说一说你对HTML5语义化的理解

语义化意味着顾名思义，HTML5的语义化指的是合理使用语义化的标签来创建页面结构，如header,footer,nav，从标签上即可以直观的知道这个标签的作用，而不是滥用div。

语义化的优点有:

• 代码结构清晰，易于阅读，利于开发和维护
• 提高用于体验，在样式加载失败时，页面结构清晰
• 方便其他设备解析（如屏幕阅读器）根据语义渲染网页。
• 有利于搜索引擎优化（SEO），搜索引擎爬虫会根据不同的标签来赋予不同的权重

语义化标签主要有：

• title：主要用于页面的头部的信息介绍
• header：定义文档的页眉
• nav：主要用于页面导航
• main：规定文档的主要内容。对于文档来说应当是唯一的。它不应包含在文档中重复出现的内容，比如侧栏、导航栏、版权信息、站点标志或搜索表单。
• article：独立的自包含内容
• h1~h6：定义标题
• ul: 用来定义无序列表
• ol: 用来定义有序列表
• address：定义文档或文章的作者/拥有者的联系信息。
• canvas：用于绘制图像
• dialog：定义一个对话框、确认框或窗口
• aside：定义其所处内容之外的内容。<aside> 的内容可用作文章的侧栏。
• section：定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。
• figure：规定独立的流内容（图像、图表、照片、代码等等）。figure 元素的内容应该与主内容相关，但如果被删除，则不应对文档流产生影响。
• details：描述文档或者文档某一部分细节
• mark：义带有记号的文本。

HTML常用标签简介
MDN中所列出的html标签列表

1. 一些简单的常见标签
<h1>- <h6> 标题元素
<p> 段落元素
<ul> 无序列表
<ol> 有序列表
<small> 不重要的文字
<strongv 重要的文字
<kbd> 键盘输入元素
<video> 视频元素 audio> 音频元素
<svg> 可缩放矢量图形
<div> 区块元素
<span> 短语内容
2. <a>标签 &&<ifram>标签
<a> 锚点，在http中进行get请求，有以下常用属性
（1）href 属性：必需属性，为锚定义一个超文本链接来源
==> href=”qq.com” 会当成文件打开（因未设定打开协议）
==> href=”//qq.com” 无协议绝对地址，当前时什么协议就以什么协议打开
==> href=”index.html” 相对路径，以ftp协议
==> href=”#XX” 定义当前页面的锚点
==> href=”?xx=yy” 查询参数
==> href=”javascript:alert(‘1’)” JavaScript伪协议
==> href=”javascript:;” 为达到点击链接不做跳转的效果
（2）target 属性：该属性指定在何处显示链接的资源，可以与<iframe>标签连用，指向iframe的name
==> target=_blank 在新的页面打开
==> target=_self 在自身打开
==> target=_top 若在iframe中，在其最外层打开
==> target=_parent 若在iframe中，在其上一层iframe打开
（3）download 属性：当网页的响应Content-Type设置为“application/octet-stream”时，可以不用download
当Content-Type设置为“text/html”时，若想下载如<a href="index.html" download>link</a>必须用download
<iframe> 内联框架元素，有以下常用属性
==> src 属性 iframe指向的路径
==> name 属性 与<a>标签配合使用，用于<a>标签的指向链接
==> frameborder 属性 iframe标签外边框，一般设置为0
3. 表单标签
注：表单元素若要正常提交至服务器，需有name属性

<form> 在http中一般进行post请求
==> action 属性 用于制定表单提交的目标
==> method 属性 用于表示表单以何种方式发至目标
==> target 属性 同<a>标签的target
<input type="submit">&&<input type="button">&&<button>
PS：一个表单中，必须得有提交按钮，否则表单数据无法提交
==> <input type="submit"> 提交按钮，输入完数据 Enter 即可上传表单数据
==> <button> 一个表单中若没有提交按钮，仅有button标签，该标签会自动升级为submit
==> <input type="button"> 这么写就仅仅是一个普通的按钮，即使表单没有提交按钮也不会自动升级
<input typt="checkbox>"&&<label>
==> <input type="checkbox"> 复选框
==> 达到点击文字就可以选中复选框时可以和<label>连用，如：
      <input type="checkbox" id="btn"> <label for="btn">apple</label>
      不过常用下面这种写法：
      <label>apple<input type="checkbox"></label>
<input type="radio"> 单选框，也可以同复选框一样与<label>标签连用
      若达到几个单选框只能选择一个的效果，要设置一样的name属性
<select> 下拉表单，常用的有name属性，multiple（可多选）属性
<option> 下拉表单中的选项，有以下常用属性
==> <optgroup> 为多个option标签划分一个组，用label属性设置组名，如:
<optgroup label="x1">
<option value="1">10</option>
<option value="2">12</option>
</optgroup>
1
2
3
4
==> <option>标签的常用属性有value,设置选项上传至服务器的值：
      disabled 属性，设置选型不可选；
      selected属性，设置该选项默认选中；
- <textarea> 多行文本域
==> 虽然该标签有cols属性和rows属性分别控制列数和行数，但都不是很准确，所以一般<texrtarea>标签的大小用css的height和width来控制
==> 在css中，还可以设置其resize=none;用来控制该多行文本域不可被用户拉动，防止影响网页布局

4. <table>表格元素
表格标签中只能有<thead>、<tbody>、<tfoot>三种标签。
如果没有<thead>和<tfoot>标签，所有的内容默认添加在<tbody>标签中，如果没有<tbody>标签，浏览器会自动添加。
在设置了<thead>、<tbody>、<tfoot>三种标签后，三种标签在代码中的顺序将不会影响网页渲染的效果，永远以<thead>、<tbody>、<tfoot>顺序进行展示。
<td>表示表的数据、<th>表示表头(默认样式包括加粗和居中)，<tr>表示每一行
所有的<td>、<th>标签都要在<tr>标签里面
<colgroup>(有闭合标签)、<col>(空标签)
代码实例参上，以观标签效果
<table border=1>
<colgroup>
<col width=100> <!-- 控制第一列的宽度-->
<col width=100 bgcolor="blue"><!-- 控制第二列的宽度和背景颜色-->
<col width=100>
<col width=100>
</colgroup>
<thead>
<tr>
<th>h1</th>
<th>h2</th>
<th>h3</th>
<th>h4</th>
</tr>
</thead>
<tbody>
<tr>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
</tbody>
<tfoot>
<tr>
<td>31</td>
<td>32</td>
<td>33</td>
<td>34</td>
</tr>
</tfoot>
</table>
1
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
css中，设置标签的边框合并

table{
border-collapse:collapse;
}
5. 常用的内容分区语义化标签
<article> 表示文档、页面、应用或网站中的独立结构
<aside> 其通常表现为侧边栏或者嵌入内容
<footer> 表示最近一个章节内容或者根节点元素的页脚
<header> 表示一组引导性的帮助，可能包含标题元素
<nav>导航栏，描绘一个含有多个超链接的区域
<section> 表示文档中的一个区域（或节），比如，内容中的一个专题组，一般来说会有包含一个标题
<dl>、<dt>、<dd>
==> <dl>是一个包含术语定义以及描述的列表
==> <dt>用于在一个定义列表中声明一个术语
==> <dd> 用来指明一个描述列表<dl>元素中一个术语的描述
<main> 表示文档的主体内容，由与文档直接相关，或者扩展于文档的中心主题、应用的主要功能部分的内容组成。
<address> 可以让作者为它最近的<article>或者<body>]祖先元素提供联系信息。在后一种情况下，它应用于整个文档。