HTML学习总结
1 |
|
一、关于HTML
（一）.htm和.html文件的区别
1、.htm与.html没有本质上的区别，表示的是同一种文件，只是适用于不同的环境之下。
2、DOS系统仅能识别8+3的文件名，所以*.htm的命名方法可以被DOS系统识别，而*.html的文件命名方式不能被之识别。
3、在UNIX系统中，网页必须使用.html扩展名，如果是.htm，在浏览器中打开时则出现源代码；Windows中支持两种扩展名。也可以说，htm和html是Windows和UNIX对抗的产物。
4、如果在网页中同时存在index.html与index.htm，浏览器将优先解释index.html。
（二）侧重点
HTML 是主要应用于网页的结构，所以要在学习的时候要记住：关注标签的语义而不是样式。样式这些展现出来的是CSS的作用 ，所以需要去关注的是标签的意义。如 < strong >和< b > 前者是用来强调内容的重要性，而后者只是为了加粗字体，但是二者表现出的效果是一样的。
其次还有例如标题的大小h1~h6 这些的意义是用来体现该部分的重要性，而不是为了去设置他的大小，设置大小完全可以利用css去完成。
还有当你编写的代码出现有些问题时 ，浏览器会主动纠正 ，< p >元素里不能放任何块元素。
（三）其它
1.目前HTML标签是不区分大小写的，但还是建议规范代码格式以提高可读性！
2.元素可以拥有属性，属性值用双引号引起来，如<a href="romanticism.space">；
二、基本标签（body部分）
1.标题标签h1~h6依次变小
1 | <h1 align="center">标题</h1> |
2.段落标签
1 | <p> |
3.换行标签
（1）<br />
1 | <br /> |
（2）<wbr />
定义“单词断点”，即当一个原本不会从中间断开换行的单词或网址，给它内部添加允许断开换行的位置以便排版美观。
1 | <wbr /> |
注：对中文没有作用。
4.分隔线标签
1 | <hr width="20%" /> |
5.注释标签<!--注释-->
1 | <!-- |
6.常用文本格式标签
1 | <b>加粗</b> |
7.超链接标签<a></a>
在html4
1 | <a href="" target="_blank" title=""></a> |
target有以下属性：
| 属性 | 作用 |
|---|---|
_blank |
新建窗口打开 |
_parent |
在上一级窗口打开，常在分帧的框架页面中使用 |
_self |
在同一窗口打开，默认值 |
_top |
在浏览器的整个窗口打开，将会忽略所有框架结构 |
<a>标签中name锚点的用法
1 | <a name="name01">文章标题</a> |
在HTML5中这种方法被id属性代替：
1 | <!-- 需要的位置定义书签： --> |
download属性：规定在下载保存过程中作为预填充的文件名：
1 | <a href="./photo01.png" download="01.png">点击下载文件</a> |
8.字符实体——html文件中特殊字符的正确显示
当要求在页面显示如”<”、”>”或者空格等这种特殊字符时，需要用到字符实体代替输入以避免语法冲突。
注：字符实体是由&号、实体或#实体编号、半角分号三部分组成的，实际应用中使用实体名或实体编号都可以！
以下是常用字符实体：
| 显示结果 | 说明 | Entity Name实体名字 | Entity Number实体编号 |
|---|---|---|---|
| 显示一个空格 | |
  |
|
| < | 小于 | < |
< |
| > | 大于 | > |
> |
| & | &符号 | & |
& |
| “ | 半角双引号 | " |
" |
| © | 版权 | © |
© |
| ® | 注册商标 | ® |
® |
| × | 乘号 | × |
× |
| ÷ | 除号 | ÷ |
÷ |
更多实体编码：常用HTML语言特殊字符对照表(ISO Latin-1字符集)
9.表格和列表
（1）表格
表格：是
<table></table>，表格内包含的行是<tr></tr>，行内包含单元格<td></td>或<th><th/>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<caption>表格名称</caption>
<tr><!--表头-->
<th>加粗显示的表头</th>
<th>加粗显示的表头</th>
<th>加粗显示的表头</th>
</tr>
<tr><!--第一行-->
<td>单元格内容</td>
<td>单元格内容</td>
<td>单元格内容</td>
</tr>
<tr><!--第二行-->
<td>单元格内容</td>
<td>单元格内容</td>
<td>单元格内容</td>
</tr>
</table>注：列标签
与 的区别： 里的文本内容会以粗体表示，且默认居中，而 里的文本内容是不加粗、默认居左的；所以 一般用来做表头， 一般用来填数据。 表格的属性：
2
3
4
5
6
7
8
9
10
11
12
13
align 规定对齐方式，位于<table>标签内时定义整张表格与其他元素的对齐方式， 位于<tr><td>内时定义单元格内文字的对齐方式
border 定义表格所有内外边框宽度，位于<table>标签内时定义整张表格所有边框宽度，位于<tr><td>等标签内无效
width 可用于整张表或某列定义其宽度
height 可用于整张表或某行定义其高度
cellpadding 单元格内边距，默认有数值，但无需变动
cellspacing 单元格外边距，默认有数值，要去掉需设置为0！
summary 规定表格的摘要说明
-->在 HTML5 中，仅支持 “border” 属性，并且只允许使用值 “1” 或 “”。
合并单元格
需要注意的是，这里并不是真正的将两个单元格合并为一个了，而是将源单元格按照合并的数值和方向放大，随即我们应该手动删除多出来的单元格以达到看上去合并了的效果！
2
3
4
行合并：rowspan="" 默认向下合并，值填【总共】合并了单元格的数量，填1或0都无效果！
列合并：colspan="" 默认向右合并，值同上
-->
<colgroup></colgroup>和<col />
<colgroup>标签用于对表格中的列进行组合，以便对其进行格式化。通过使用
<colgroup>和<col />标签，可以向整个列应用样式，而不需要重复为每个单元格或每一行设置样式。注释：只能在
<table>元素之内，在任何一个<caption>元素之后，在任何一个<thead>、<tbody>、<tfoot>、<tr>元素之前使用<colgroup>标签。用法：在目标表格内添加
<colgroup></colgroup>标签，再在其内部添加<col />标签，第一个<col />标签控制第一列，以此类推。对<col />设置span=""属性即可控制多列。对<col />标签设置样式即可在表格中展示出来：
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
.col_1 {
background-color: rgb(248, 248, 248);
}
.col_2 {
background-color: rgb(104, 118, 138);
}
.col_3 {
background-color: rgb(255, 255, 255);
}
</style>
<body>
<table>
<caption>表头</caption>
<colgroup>
<col class="col_1" />
<col class="col_2" />
<col span="2" class="col_3" />
</colgroup>
<tr>
<td>001</td>
<td>002</td>
<td>003</td>
<td>004</td>
</tr>
<tr>
<td>011</td>
<td>012</td>
<td>013</td>
<td>014</td>
</tr>
<tr>
<td>021</td>
<td>022</td>
<td>023</td>
<td>024</td>
</tr>
</table>
</body>
- 单元格内可以嵌套表格，以实现较为复杂的布局
- …
（2）列表
①有序列表
2
3
4
5
6
<li></li>
<li></li>
<li></li>
...
</ol>②无序列表
2
3
4
5
6
<li></li>
<li></li>
<li></li>
...
</ul>属性type定义项前符号的样式，可选样式有
disc黑圆点，circle空心圆，square黑色方块，默认为disc。③自定义列表
自定义列表不是一列项目，而是项目及其注释的组合。
列表以
<dl>标签开始，每个自定义列表项以<dt>开始，每个自定义列表项的描述以<dd>开始。
2
3
4
5
6
7
8
<dt>苹果</dt>
<dd>又大又红</dd>
<dd>apple</dd>
<dt>香蕉</dt>
<dd>又香又甜</dd>
<dd>banana</dd>
</dl>
10.<iframe>框架标签
使用框架(iframe)，可以实现在一个浏览器窗口同时显示多个网页。
框架属性
- 属性
height和width定义框架的尺寸frameborder定义是否显示边框，值1为显示，0为不显示，缺省值为1！scrolling定义是否显示滚动条，可取值为yes、no、auto（是、否、自动）align设置整个框架相对于其他元素的对齐方式，可选值有left、right、top、middle、bottom五个。（用处不大好像？）注：HTML5不支持
<frame>和<frameset>，HTML4.1不支持<iframe>，可以把需要的文本放在<iframe>和</iframe>内，以应对无法理解<iframe>的浏览器！
11.表单
所有的HTML标签中，表单标签是最重要的。在实际开发中，最经典的实例就是用户注册，覆盖了表单标签的所有元素。
（1）表单相关标签：
①表单标签<form></form>
<form></form>表单标签，在HTML页面创建一个表单，表单标签在浏览器上没有任何显示。如果数据需要提交到服务器，负责收集数据的标签必须存放在表单标签内。
action属性：提交路径，确定表单提交到指定的服务器端脚本程序；method属性：请求方式。常用取值：get和post：get（默认值）：提交的数据追加在请求路径上。例如：
/index.html?username=jack&password=1230456，数据格式k/v，追加是使用?连接，之后的每一个数据使用&连接；因为请求路径长度有限，所以get请求提交的数据也有限，URL最长允许8192个字符，多出的会被截断。
性能较好一点点。
post：提交的数据不在请求路径上追加（即不显示在地址栏上），较
get方法更安全点，但内容仍是未加密的。
autocomplete属性：自动填充，浏览器基于用户以前输入过的值给出填充选项。该属性适用于
<form></form>标签，以及这些<input>类型：text、search、url、telephone、email、password、datepickers、range和color。onsubmit属性：为表单的提交绑定一个事件句柄函数，当用户点击提交按钮时，这个事件句柄函数就会被调用，如果函数返回false则表单不会被提交,如果返回其他的或什么都没有返回，则表单会提交。
②输入域标签<input>
<input>标签用于获得用户输入的信息，type属性值不同，搜集的方式/内容不同，是表单里最常用的标签。type属性：text：文本框，单行输入字段，供用户输入文本，默认宽度为20个字符；password：密码框，输入的内容加密显示；radio：单选框，表示一组互斥选项按钮的其中一个。同时设置相同的name属性才会正确生效，当一个按钮被选中，则其他的按钮变为非选中状态；submit：在页面自动生成提交按钮，点此会把表单数据提交到服务器。一般不写name属性，否则将把“提交”两个字提交到服务器；提交按钮默认是“提交”两字，若要更改其他提示文字，需定义value属性，其值就会变成按钮上的字！checkbox：复选框；file：文件上传，一般与accept属性一同使用，accept属性规定允许上传的文件类型，如：1
2
3<form>
<input type="file" placeholder="file" name="file_1" accept="image/jpg, image/png"/>
</form>hidden：隐藏字段，数据会发送到服务器，但浏览器不进行显示；reset：重置按钮，将表单重置为默认状态；image：带图形/图案/图片的提交按钮，通过src给按钮设置图片，作用与submit一样，必须同时设置；button：普通按钮，通常与JavaScript结合使用。email：规定包含E-mail地址的输入域。url：规定包含URL输入框。number：数值输入框，一般在输入框的右边会有用于增减数值的小箭头，可配合step属性规定输入数字数值的间隔值。range：规定包含一定范围内数字值的输入框，默认值范围为0-100，显示为滑动条，也可搭配min、max、step属性使用。date：日期选择。color：颜色选择，输入时会自动打开色板。
name属性：元素名，如果需要将表单数据提交到服务器，必须提供
name属性值，浏览器通过属性值获得提交的数据。value属性：如果
type类型是button、reset、submit，该属性定义按钮上现实的文本；如果
type类型是text、password、hidden，该属性定义其初始值；如果
type类型是checkbox、radio、image，该属性定义与输入相关联的值。单选框和复选框必须设置该属性，文本域不能使用该属性。
size属性：设置大小。
checked属性：单选框或复选框设置默认被选中。
readonly：是否只读。
disabled：是否可用。
maxlength：允许输入的最大长度。
placeholder：输入的提示信息。
max和min：规定输入字段的最大和最小字符数。
required：是否为必须项，默认为
false。form属性：该属性规定
<input>标签所属的一个或多个表单，属性值必须是其所属表单的id，多个表单id之间用空格符分隔。表单重写属性：
用于重写表单的
action、method、nivalidate、target属性以便以不同方式提交到不同的地方，分别是formaction、formmethod、formnivalidate、formtarget，只能应用到提交按钮和图像提交按钮上。autofocus属性：规定页面加载完成时自动获得输入焦点，适用于所有属性。
multiple属性：规定输入域可以有多个输入值，适用于设置
type属性为email和file的input标签。pattern属性：用于对用户输入内容做校验，值为正则表达式，可用于
type属性为text、search、url、telephone、email、password的<input>标签上。
③下拉列表标签<select>
可进行多选或单选，由子标签<option>指定选择项。
name属性：发送给服务器的名称。
multiple属性：不写默认单选，该属性取值为自身时表示多选。
size属性：多选时，可见选项的数目。
<option>子标签：selected属性：默认该项已选。value：发送给服务器的选项值。disabled属性：是否禁用。
<optgroup>子标签：用于将多个选项组合在一个大的条目中，可添加
label属性为其添加小标题：1
2
3
4
5
6
7
8
9
10
11
12
13
14<form>
<select>
<optgroup label="地区">
<option>地区1</option>
<option>地区2</option>
<option>地区3</option>
</optgroup>
<optgroup label="国家">
<option>国家1</option>
<option>国家2</option>
<option>国家3</option>
</optgroup>
</select>
</form>
⑤文本域标签<textarea>
<textarea>文本域，多行的文本输入控件。cols和rows属性：文本域的默认列数和行数，实际页面中大小仍可调节。wrap属性：规定提交到表单的该项数据中是否包含用户输入时自动换行的换行符，hard为否，soft为是。如果wrap属性为hard，同时必须设置cols属性！
⑥按钮标签<button>
<button type="button|reset|submit">按钮标签一般很少使用，提供“普通/重置/提交”功能，不同的浏览器默认值不同。
⑦<label></label>标签
差不多相当于定义锚点，有属性for，可设置其值为目标元素的id值，这样在单击<label>标签内的文本时就浏览器会自动将焦点聚集于目标输入域：
1 | <form> |
⑧<fieldset></fieldset>标签
用于将表单内多个元素分组，分组后不同浏览器可能会有不同的渲染效果，在其内部添加<legeng></legend>标签可为其分组自定义标题：
1 | <form> |
⑨<datalist></datalist>标签
用于定义多个可选输入值，实现普通输入框拥有下拉选项的效果，与input标签配合使用，<datalist></datalist>内部添加多个<option></option>标签作为可选输入项，属性id的值为目标元素list的值，二者相同即绑定成功：
1 | <form> |
谷歌浏览器渲染效果：
注：火狐浏览器有时不能正确渲染！
（2）总结02
重复内容，懒得整理了，可不看
2
3
4
5
6
7
8
9
10
11
12
13
14
15
用户名<input type="text" id="uName" />
密码<input type="password" id="uPaswd" />
确认密码<input type="password" id="uPaswd2" />
简介<textarea></textarea>
性别：男<input type="radio" name="sex" />女<input type="radio" name="sex" />
爱好：音乐<input type="checkbox" value="music" />运动<input type="checkbox" value="sport" />
你喜欢的水果：
<select name="fruit" size="0" multiple>
<option value="apple">林檎</option>
<option value="banana">香蕉</option>
<option value="orange">橙子</option>
</select>
<input type="submit" value="提交" onsubmit="" />
</form>HTML 表单(Form)是 HTML 的一个重要部分，主要用于采集和提交用户输入的信息。
1.表单的组成部分：
学习 HTML 表单(Form)最关键要掌握的有三个要点：
表单控件(Form Controls)
通过 HTML 表单的各种控件，用户可以输入文字信息，或者从选项中选择，以及做提交的操作。比如
<input type= "text">就是一个表单控件，表示一个单行输入框。Action
表单里的 action 就指明了处理表单信息的文件。提交表单的地址
Method
至于 method，表示了发送表单信息的方式。method 有两个值：get 和post。
get 的方式是将表单控件的 name/value 信息经过编码之后，通过URL 发送(你可以在地址栏里看到)。
而 post 则将表单的内容通过 http 发送，你在地址栏看不到表单的提交信息。2.表单常用控件：
表单控件 说明 <input type="text" />单行文本输入框 <input type="password" />密码输入框，输入的内容显示为星号 *<input type="radio" />单选框 <input type="checkbox" />复选框 <textarea></textarea>多行文本输入框 <input type="submit">将表单信息提交给action指向的文件 <select><option><option></select>见下文详解 <input type="file">上传文件 <input type="reset">全部重做/清空按钮 ①单行文本输入框
默认占一行
②密码输入框
默认占一行
③单选框
对于如性别等只允许单选的一组选项可设置单选框，对同一主题的一组单选框必须设置属性
name的值相同才能正确生效！默认不换行！
2
3
<input type="redio" name="sex" />女
<input type="redio" name="sex" checked="checked" />保密
checked属性定义该选择框默认为已选状态④复选框
同上，复选框允许用户在一组选项里选择多个选项，前提是设置属性
name的值为相同内容！默认不换行！
2
3
<input type="checkbox" value="sport" name="habbit" />
<input type="checkbox" value="打电动" name="habbit" checked="checked" />属性
value的值为提交上去的的实际后台的记录。⑤多行文本
cols定义宽度，rows定义高度，但大小默认是可拖拽的。⑥提交submit
⑦下拉列表
下拉列表可做单选也可做多选：
2
3
4
5
<option value="apple">林檎</option>
<option value="banana">香蕉</option>
<option value="strawberry">草莓</option>
</select>
select的属性size定义下拉列表默认显示的行数，其值是数字几就显示为几行文字的高度，不受单位px的影响！
multiple定义是否支持多选，多选状态时客户端可按住Ctrl操作多选！总结：
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<form>
<!--输入内容-->
<input type=""/>
type属性： ="text" 输入文本
="password" 输入密码
="hidden" 隐藏的内容
="radio" 单选框
="checkbox" 多选框
="file" 输入/上传文件
="button" 普通按钮
="reset" 全部重做/清空按钮
="submit" 提交按钮
placeholder="请输入密码" 未输入内容时提示信息
size="10px" 约束输入框的长度
maxlength="16" 限制输入内容的最大长度
required="required" 限制必须输入内容后才可以提交
checked="checked" 在某项内使用——默认该项已选
name=""
value=""
<!--文本输入域-->
<textarea name="zwjs">
balabalabalabala......
</textarea>
<!--下拉列表-->
<select name="自定义">
<option selected="selected">balabala</option>
<option selected="selected">balabala</option>
<!--对某一项使用selected时——网页默认选择该项-->
</select>
</form>
--总结：
1.用户输入和选择的内容，标签里必须用name命名，选择的内容还必须有默认值value="xxx"
2.get与post提交方式的区别：
get：所有提交的内容会显示在地址栏，不够安全，长度有限制；
post：不会在地址栏显示提交的内容，比较安全，长度没有限制。
12.图片媒体相关标签
（1）<img>
1 | <img src="img/猪大叔素材 (100).jpg" title="图像提示文字" alt="你图没了" align="center" width="" /> |
注：如果给图片只设置width、height的其中一个，那么图片会按原比例缩放，如果二者都设置了值，那么图片的长宽只会按照既定的尺寸拉伸！
该标签还有以下属性：
| 属性 | 说明 |
|---|---|
srcset |
定义允许浏览器使用的图像集 |
sizes |
定义一组媒体条件，当媒体条件为真时，根据图像预期布局宽度的值从srcset图像集中选择一个合适的图像显示 |
图片标签的align有以下属性：
| 属性 | 作用 |
|---|---|
top |
把图像的顶部和同行最高的文本或图像的顶部对齐 |
midle |
把图像的中部与同行文字基线或图像的中部对齐 |
bottom |
把图像的底部与同行文字基线或图像的底部对齐 |
texttop |
把图像的顶部和同行的文本的顶部对齐 |
absmiddle |
把图像的中部和同行中最大项的中部对齐 |
baseline |
把图像的底部与同行文字基线对齐 |
left、center、right |
文字环绕图像左中右对齐 |
（2）<figure>和<figcaption>
用于给图片添加说明信息：
1 | <figure> |
13、H5标签
（1）页面结构标签
①<header></header>
构建页眉，无出现次数限制，内部可包含其他基础标签，也可以被包含进其它标签中。
②<main></main>
一个文档最多出现一个，且不能是其它标签的子元素。
③<nav></nav>
构建导航栏、侧边栏等。
④<artical></artical>
表示页面中一块与上下文不相关的独立内容。
⑤<section></section>
定义章、节、段等。
⑥<aside></aside>
标记与页面主要内容略微相关的侧边栏内容或元内容。通常，<aside> 元素包含了与页面主内容相关但不直接属于主内容的信息，比如辅助信息、广告、侧边导航、作者的简短介绍、定义、引文或者其它一些与主内容相关但不构成主内容主体的部分。
⑦<footer></footer>
定义页脚。
⑧<details></details>
定义细节内容，可将其内部所有内容展开或折叠，有属性open，值为open时展开，值为false时（默认）折叠。
⑨<summary></summary>
可以被包含在<details></details>内为其提供小标题，小标题始终可见，用户单击标题即可展开或折叠。
⑩<embed />和<object />
都可用于给页面嵌入内容，如PDF文档、Flash视频等：
| 属性 | 说明 |
|---|---|
src、data |
嵌入内容的URL，<embed />用src属性，<object />用data属性 |
type |
嵌入内容的MIME类型 |
width、height |
宽高 |
1 | <embed src="a.pdf" type="application/pdf" width="600" height="1000" /> |
（2）引用和术语定义标签
①<abbr></abbr>
定义缩写和简写。
②<address></address>
定义文档编写者的联系方式。
③<bdo></bdo>
定义文字内容的排版方向，属性dir的值：rtl和ltr分别表示从左往右和从右往左。
④<q></q>
行内引用，不换行，内容会被双引号括起来。
<blockquote></blockquote>表示的是快引用，会换行，并且其左右会有缩进。
这两个标签都可以使用cite属性定义其引用来源，属性值为URL，
⑤<cite></cite>
定义引用，不换行，默认斜体显示。
（3）格式标签
①<mark></mark>
背景高亮显示。
②<meter></meter>
容量条，有以下属性：
| 属性 | 说明 |
|---|---|
value |
相对于min和max的容量占比，必须项，默认为0 |
min |
容量条的最小值，默认为0，不能小于0 |
max |
容量条的最大值，默认为1 |
low |
理想值区间的最小值 |
high |
理想值区间的最大值 |
optimum |
最优值 |
- 容量条显示的多少是根据
value值相对于min和max的值而计算的，比如当min和max分别为0.2和0.9时，value值必须为0.55才能使容量条显示容量为一半！ - 若不提供
low和high，或者value的值在其范围内，那么容量显示颜色为绿色，若value的值在其范围内，则为橙黄色。
③<progress></progress>
进度条：
| 属性 | 说明 |
|---|---|
max |
规定总共需要多少工作，值必须大于0 |
value |
规定当前已经完成了多少工作，值必须大于0且小于等于max |
④<ruby></ruby>
标注拼音或音标：
1 | <ruby>荨<rt>xún</rt><rp>不支持时显示这个</rp></ruby>麻疹，<ruby>荨<rt>qián</rt></ruby>麻 |
④<time></time>
time标签的最基本用法是用于包裹一个日期或时间，并指定datetime属性来表示这个日期或时间的精确值：
1 | <time datatime="2024-05-17T15:30:00/2024-05-20T13:14:00">5月份</time> |
三、头部信息（head部分）
1、<html></html>标签
lang属性：lang属性的值是一个语言代码，用于指示该文档的主语言，通常遵循ISO 639-1标准，例如en代表英语，zh代表中文。- 在实际的网页开发中，
lang属性通常只使用ISO 639-1代码，如lang="zh"，并不直接区分简体和繁体。但是，可以通过CSS或JavaScript等技术，根据用户所在的地区或偏好来提供相应的简体或繁体内容。 lang属性可以用于任何HTML元素，但通常用于<html>标签上，以指定整个文档的主要语言。如果页面中有多种语言，也可以在特定语言的段落或句子上使用。- 对于多语言网站，使用
lang属性可以帮助搜索引擎更准确地识别和索引内容，从而提高搜索结果的相关性和排名。 - 对于依赖屏幕阅读器等辅助技术的用户，
lang属性有助于正确地朗读网页内容。 - 在国际化的网站上，
lang属性对于确保内容在不同语言和地区之间正确显示和索引非常重要。
1 |
|
2、<head></head>标签
<base>、<link>、<meta>、<script>、<style>、<title>这些标签可用在<head></head>标签内，<title>标签是唯一必需的标签。
3、<base />标签
页面中所有链接的基准URL，页面中所有外部链接资源的路径如果是相对路径，就会以该标签提供的基准URL为根路径再进行索引，如：
1 |
|
注：一个文档最多只能存在一个该标签！
4、<meta />标签
该标签用来描述文档一些元信息，如文档字符编码、针对搜索引擎提供的文档关键字等：
charset说明文档的编码字符集，
utf-8是HTML5推荐的默认字符集。http-equiv定义HTTP头部元信息名称。
expires：为了提高访问速度，很多浏览器采用累积式加速的方法，将曾经访问的网页存放在本地计算机中，存储的位置称为浏览器缓存区，以后每次访问网站时，浏览器会首先搜索缓存区目录，如果有访问过的内容，浏览器就不必从网上下载，直接从缓存区中调出来，这样就提高了访问网站的速度。
expires用于设定网页在缓存区的到期时间，如果过期，必须到服务器上重新下载。expires必须使用GMT的时间格式。即使设置了
expires属性，用户代理（即浏览器）也可能根据自己的策略选择忽略它，对于需要更精细控制的场景，可以使用Cache-ControlHTTP头来代替HTML的expires属性。1
<meta http-equiv="expires" content="Tue, 19 Mar 2024 12:00:00 GMT" />
refresh：设置自动刷新页面的时间和跳转（重定向）的页面：1
<meta http-equiv="refresh" content="5;url=https://www.example.com" />
若不指定URL，则页面自动刷新。
X-UA-Compatible：X-UA-Compatible是针对IE8的一个特殊的 HTTP头部元信息，用来指定正浏览器进行解析时可以模拟某个特定版本 IE 浏览器的渲染方式，来解决 IE 浏览器的兼容性问题。通过在 meta 中设置X-UA-Compatible的值，可以指定 IE浏览器渲染网页的兼容性模式，如：
1
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
IE=edge代表让IE使用最新版本的内核渲染网页。
nameauthor：网页作者。description：网页内容描述。keywords：关键字。1
<meta name="keywords" content="关键词1, 关键词2, 关键词3">
generator：用来说明生成网页所使用的的软件或工具。1
<meta name="generator" content="程序名称 版本号">
revised：该属性没有被官方认可，属于定义属性且使用广泛，被一些开发者用于记录文档的修订日期或版本等用途。robots：指示搜索引擎爬虫如何索引和抓取网页，有以下属性可选：all：允许爬虫检索，页面上的链接可以被查询。none：不允许爬虫检索，且页面上的链接不可以被查询。index：允许检索，允许爬虫登录。noindex：不允许检索，不让爬虫登录。follow：页面上的链接可以被查询。nofollow：不允许检索，页面上的链接可以被查询，不让爬虫顺着此链接往下探查。
搜索引擎使用搜索机器人访问一个网站时，首先会检在该网的的根目录下是否有
robots.txt文件，这个文件用于指定搜索机器人在网站上的抓取范围。网络管理员可以通过robots.txt定义哪些目录不能访问，或者哪些目录对于某些特定的spider程序不能访间。例如，有些网站的可执行文件目录和临时文件目录不希望被搜索引擎搜索到，那么网络管理员就可以把这些目录定义为拒绝访问目录。当网站包含不希望被搜索引擎收录的内容时，才需要使用
robots.txt文件,如果希望搜索引擎能收录网站上所有内容，不要建立robots.txt文件。几乎所有搜索引擎都是通过搜索机器人自动在 Internet 搜索，当发现新的网站时，会检索页面中的
keywords和description，将其收录到检索数据库，然后根据关键词的密度将网站排序。也就是说，如果页面没有使用
<meta>标签定义keywords和description，那么搜索机器人无法将你的站点收录到检索数据库，浏览者也就不可能通过搜索引擎访问你的站点。1
<meta name="robots" content="index, follow">
viewport：用于控制移动设备上的视口大小和缩放，对于响应式设计至关重要。viewport（视口）是指浏览器窗口内的内容区城，不包括菜单栏、工具栏、状态栏和边框等区域，也就是网页实际显示的区域。
viewport是2007年苹果公司发布iPhone时引人的，目前基于 Android 和 iOS的移动设备浏 览器基本都支持这个标签。在没有引入 viewport前，在移动设备上浏览网页时，一般默认会移动设备的宽度渲染网页，然后再把页面缩小呈现在视口当中，再让用户去放大或缩小进行浏览，很不方便，而且浏览器经常会出现横向滚动条。如果希望移动设备屏幕视口能够以网页原始大小显示页面，大多数情况下，可以使用如下该属性：
1
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
width=device-width是指当前viewport的宽度等于设备宽度，initial-scale=1.0指默认缩放倍数为1——即无缩放。content：用于输入name属性的值。
5、<link />\标签
引入外部资源，最常见的如样式表。
可选属性：
type：指定链接资源的MIME类型。然而，值得注意的是，type属性并不是<link>标签的标准属性。在HTML5规范中，<link>标签使用rel（关系）属性来指定资源的类型和目的，而不是type属性。href：被链接文档的URL。rel：说明引用资源的类型：值 描述 alternate指出本页面的替换版本，如其它语言其他格式版本等 bookmark相关文档 contents文档目录 help帮助文档 icon站点自定义图标 stylesheet样式表 如果你的网站有多种语言版本，你可以使用 rel=”alternate” 来列出每种语言版本的链接，并通过 hreflang 属性指定每种版本的语言代码。如：
1
2<link rel="alternate" hreflang="en" href="http://www.example.com/en/" />
<link rel="alternate" hreflang="fr" href="http://www.example.com/fr/" />在这个例子中，
hreflang属性告诉搜索引擎链接指向的是英语和法语版本的页面。
给网站设置图标：
1 | <link rel="icon" href="favicon.ico" type="image/png" /> |
引入CSS样式：
1 | <link rel="stylesheet" href="..." /> |
6、<script></script>标签
既可包含脚本语句，也可以通过 “src” 属性指向外部脚本文件。
如果使用src属性，则 <script> 元素必须是空的！
在 HTML 4 中，type属性是必需的，但在 HTML5 中是可选的。
async属性是 HTML5 中的新属性。
HTML5 中不再支持 HTML 4.01 中的某些属性：xml:space。
| 属性 | 值 | 描述 |
|---|---|---|
| asyncNew | async | 规定异步执行脚本（仅适用于外部脚本）。 |
| charset | charset | 规定在脚本中使用的字符编码（仅适用于外部脚本）。 |
| defer | defer | 规定当页面已完成解析后，执行脚本（仅适用于外部脚本）。 |
| src | URL | 规定外部脚本的 URL。 |
| type | MIME-type | 规定脚本的 MIME 类型。 |
| xml:space | preserve | HTML5 不支持。规定是否保留代码中的空白。 |
四、HTML5全局属性
五、HTML5全局事件
其它
<font></font>标签已不再支持，请用CSS代替！
其他更多慢慢补充……
<body></body>标签有以下属性：
| 属性 | 描述 |
|---|---|
text |
设定页面文字颜色 |
bgcolor |
设定页面背景颜色 |
background |
设置图片背景 |
bgproperties |
设定不随页面滚动的背景图像 |
link |
设定默认的链接颜色 |
alink |
设定鼠标正在单击的链接颜色 |
vlink |
设定已访问过的链接颜色 |
topmargin |
页面上边距 |
leftmargin |
页面左边距 |
