第三部分 web前端之HTML

详情参考W3 School

1.HTML是一种标记语言, 使用标记标签来描述网页
2.HTML 标签是由尖括号包围的关键词,通常是成对出现的,比如 <b> 和 </b>标签对中的第一个标签是开始标签,第二个标签是结束标签

<!DOCTYPE html>    
/*html5标准网页声明,只有了解文档的类型,浏览器才能正确地显示文档。
 分为:1严格 2.过渡(默认使用) 3框架*/
<html>
<head>
<title>  文档标题 </title>
<base target=“_blank”/> <!--网页的打开方式,默认是blank,从新的一页中打开-->
<link/>   <!-- 引入外部元素 -->
<style type="text/css"> 插入样式信息的位置,type属性必须有</style>
<script> 插入JS的位置  </script>
</head>

<body>
<!-- 放各种标签的位置-->

</body>
</html>

标签介绍
1.标题元素 : <h1>我的第一个标题</h1> h1—h6标题大小越来越小

2.段落元素 : <p>我的第一个段落。</p>
换行标签 :
在不产生新段落的情况下换行
(不要使用
,因为它没有闭合标签,容易出现问题)
分割线标签:<hr />
强调文本标签:<strong>强调文本</strong>
加粗文本标签 : <b>加粗文本</b>
两者实现效果相同但是意义不同

注:在html里手动输入多个空行或者多个空格都会被认为是一个空行或者一个空格

3.超链接元素
<a href="链接的地址">点击此内容进行跳转(可以是图片) </a>
选择设置的属性:
target="_blank" 跳转新网页进行加载,不设置此属性默认当前网页加载
title="鼠标放上去显示文字"

锚点< a name="p1"> </a>在需要定位的地方取一个名字
在同网页中跳转可用锚点,先在需要定位的地方取一个名字,再用超链接通过:自身网址#名字进行跳转

4.图片元素:<img src="文件位置" alt="图片没加载出来时显示的文字" title="鼠标放到图片上显示的文字" />

可以在图片标签里width="宽" height="高"设置图片大小

特殊的内联元素,图片大小就是标签的大小(一般的内联元素的大小由标签大小决定)
注:img标签和css背景区别
img表示的是网页的内容,可以保存下来那种,
例:一个相册的修饰边框的图片是写在Css里,而相片放在img标签里

5.列表元素
无序列表 ul(开头是黑点)
有序列表 ol(开头是数字)
注意<li></li>与ul和ol组合使用,也就是
<ul>
<li> </li>
<li> </li>
<li> </li>
</ul>

有序,无序列表可以组合使用

自定义列表标签
以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。

<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>

6.表格元素:
tr表示行,td表示列(有几个tr表示有几行,无内容用&nbsp占位),th表示表头

border属性表示边框大小
cellspacing属性表示两个单元格间的距离
cellpadding属性表示内边距,就是表格里内容距离边框的距离
colspan属性表示列合并
rowspan属性表示行合并
注:列合并删除本行其它列,行合并删除下一行的对应列

<table border="1" >
<tr>
<th>Heading</th>
<th>Another Heading</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

7.按钮元素
<button type="button" onclick="点击之后变为">按钮内容</button>

8.表单元素(重点)
用于搜集不同类型的用户输入。表单元素指的是不同类型的 input 元素

<form>

<input type="text"> 定义用于文本输入的单行输入字段
<input type="password"> 定义被隐藏的输入方式
<input type="radio"> 定义单选按钮。
<input type="checkbox"> 定义多选按钮。
<input type="submit"> 定义用于向表单处理程序(form-handler)提交表单的按钮
.<input type="hidden">内容对用于不可见
注:input里的value属性,可以设置表单框里默认的值
name属性,每个input最好都有一个name,只有有了name之后servlet才可以通过它的name得到用户填写的值

<!--select下拉元素-->
<select name="cars" size="4">   
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>

select元素
1.size属性表示可以通过滚动显示下拉框里的元素
2 multiple属性,允许用户同时选择多个选项
option元素:
1.value属性: 被选择后会把value里的值发送给服务器
2.disabled属性可以控制某个元素不可以被选择
3.selected属性:指定在页面加载时预先选定该选项



注:<input type="checkbox" name="knownType" value="2"/> 这样定义就在点击复选框的时候被选择上,而设置label标签后,就可以实现点击某一段文字就能选择上复选框,增强了用户体验

<form>
<label for="male">Male</label>
<input type="radio" name="sex" id="male" />
<br />
<label for="female">Female</label>
<input type="radio" name="sex" id="female" />
</form>

表单属性,定义在<form>开始标签里的
1.action:action 属性定义在提交表单时执行的动作。向服务器提交表单的通常做法是使用提交按钮。通常,表单会被提交到 web 服务器上的网页。如果省略 action 属性,则 action 会被设置为当前页面。(表单数据提交给网页之后,服务器才能获取数据)

2.Method 属性:method 属性规定在提交表单时所用的 HTTP 方法(GET 或 POST):

如果表单提交是被动的(比如搜索引擎查询),并且没有敏感信息。
当您使用 GET 时,表单数据在页面地址栏中是可见的:
注:GET 最适合少量数据的提交。浏览器会设定容量限制。
(表单里的数据以键值对的形式存到提交到的网页地址栏之后)

如果表单正在更新数据,或者包含敏感信息(例如密码)。
POST 的安全性更加,因为在页面地址栏中被提交的数据是不可见的

Name 属性
如果要正确地被提交,每个输入字段必须设置一个 name 属性。

属性
1.用于设置元素自身属性,而元素里内容的属性,通过css控制
2.属性内容要用双引号括起来
例:
<h1 align="center"> 居中对齐
<body bgcolor="yellow"> 设置背景色

注:html标签尽量不要定义样式,而只定义内容,样式通过css里实现,从而实现内容和样式分离开

9.div元素:主要用于包裹其它块级元素,用于布局,
布局就像切豆腐,先写一个总div,在总div里进行分割

span:包裹其它行内元素

10.textarea元素:定义多行输入字段

<textarea name="message" rows="10" cols="30"> </textarea>

元素:HTML 元素指的是从开始标签(start tag)到结束标签(end tag)的所有代码。

<p>表示一个定义段落的元素,这个元素具有开始标签和结束标签

块级元素:每一块都从一个新行开始 div(组合块级元素)
行内/内联元素:每个元素都在同一行 span(组合行内元素,无任何实际意义)
内联元素不可实现文字的变大小,因为程序把每行紧紧的包裹

元素嵌套:尽量用块级元素嵌套行内元素

类:
可以为行内元素(span)和块级元素(div)设置class属性,class属性值相同则说明它们是同一类,这样我们就可以同时控制相同类的样式了

常用字符实体:一些在html中不适合直接写出的字符

  空格

& &

< <

> >

" "

&qpos; '

文本格式化


image.png
YSGKKGV}0OCXI2IX7R3WMZ8.png

href和src的区别
href 表示超文本引用(hypertext reference),在 link和a 等元素上使用。
src 表示来源地址,在 img、script、iframe 等元素上。
src 的内容,是页面必不可少的一部分,是引入。href 的内容,是与该页面有关联,是引用。区别就是,引入和引用。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 151,688评论 1 330
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 64,559评论 1 273
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 101,749评论 0 226
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 42,581评论 0 191
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 50,741评论 3 271
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 39,684评论 1 192
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,122评论 2 292
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,847评论 0 182
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,441评论 0 228
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,939评论 2 232
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,333评论 1 242
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,783评论 2 236
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,275评论 3 220
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,830评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,444评论 0 180
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 34,553评论 2 249
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 34,618评论 2 249

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,050评论 18 139
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,611评论 1 92
  • HTML标签解释大全 一、HTML标记 标签:!DOCTYPE 说明:指定了 HTML 文档遵循的文档类型定义(D...
    米塔塔阅读 3,168评论 1 41
  • 回奶奶家吃饭的路上,乱七八糟的聊天,聊到婚姻,王女士说婚前给我们的钱说好给我就是我的,离婚也简洁迅速不会有财产纠...
    鸵鸟啊鸵鸟奔跑吧阅读 270评论 0 0
  • 作为标准一个大三党,在你们高考结束后咨询了众多学长学姐,迫不及待有很多想法想要和你们分享,我几乎写了篇三千字的论文...
    Jenny爱青梅阅读 136评论 1 0