HTML笔记(1)--HTML语义化标签的理解

根据内容的结构化（内容语义化）选择合适的标签便于开发者阅读和写出更优雅的代码。
同时也让浏览器的爬虫和机器更好的解析
a.为什么要语义化
  为了在没有css的情况下，页面也能呈现出更好的内容结构，代码结构
  为了用户体验，例如title,alt用户名词解释或解释图片信息、label标签的活用
  有利于SEO，和搜索引擎建立良好的沟通，有助于爬虫抓取有效的信息
  便于团队开发和维护，语义具有可读性
b.写HTML代码时应当注意什么
  尽可能少用无语义的标签div和span
  在语义不明显时，既可以使用div或p时，尽量使用p，因为p在默认情况下有上下间距，
对兼容特殊终端有利
  不要使用纯样式标签，如b,font,u等，要改用css来设置
  需要强调的文本可以包含在strong（加粗）或em(斜体)中，不要用b或者i
  使用表格时，标题使用caption，表头使用thead，主题用tbody尾部用tfoot包围。
表头和一般单元格要分开，表头用th单元格用td
  表单域要用fieldset标签包起来，并用legend标签说明表单的用途；
每个input标签对应的说明文本都需要使用label标签，并且通过为input设置id属性，
在lable标签中设置for=someld来让说明文本和相对应的input关联起来。

c.H5新增的语义标签
1.根据页面的结构，由div派生的标签
header：网页或section的页眉，通常包含h1~h6元素或hgroup
使用注意：
可以是“网页”或任意“section”的头部部分；
没有个数限制。
如果hgroup或h1-h6自己就能工作的很好，那就不要用header。

footer元素：网页或section的页脚，比如版权，相关文档链接等
使用注意：
可以是“网页”或任意“section”的底部部分；
没有个数限制，除了包裹的内容不一样，其他跟header类似。

hgroup元素：hgroup元素代表“网页”或“section”的标题，当元素有多个层级时，
该元素可以将h1到h6元素放在其内
使用注意：
如果只需要一个h1-h6标签就不用hgroup
如果有连续多个h1-h6标签就用hgroup
如果有连续多个标题和其他文章数据，h1-h6标签就用hgroup包住，
和其他文章元数据一起放入header标签

nav元素：代表网页的导航链接区域，用于定义页面的主要导航部分
使用注意：
用在整个页面的主要导航部分上，侧边栏目录（aside），面包屑，页脚区域的链接列表不要使用

aside元素：包含在article元素中作为主要内容的附属信息
使用注意：
aside在article内表示主要内容的附属信息
在article之外则可做侧边栏，没用article与之对应最好不用
如果是广告，其他日志链接或分类导航可以用

section元素：代表文档中的“节”或“段”
使用注意：
表示文档中的节或者段；
article、nav、aside可以理解为特殊的section，所以如果可以用article
、nav、aside就不要用section，没实际意义的就用div

article
article使用注意：

自身独立的情况下：用article
是相关内容：用section
没有语义的：用div

<main> --- 页面主要内容，一个页面只能使用一次。
如果是web应用，则包围其主要功能。

2.媒体元素
<canvas> --- 标签定义图形，比如图表和其他图像。
这个 HTML 元素是为了客户端矢量图形而设计的。它自己没有行为，
但却把一个绘图 API 展现给客户端 JavaScript 以使脚本能够把想绘制的东西都绘
制到一块画布上。
<video> --- 标签定义视频，比如电影片段或其他视频流。

<audio> --- 标签定义声音，比如音乐或其他音频流。

<embed> --- 标签定义嵌入的内容，比如插件。

<source> --- 标签为媒介元素（比如 <video> 和 <audio>）定义媒介资源。

3.time标签  表示时间

4.datalist标签 定义选项列表，与input元素配合使用，定义input可能的值

5.details标签 用于飚速文档或文档的部分细节
<summary> --- 标签包含 details 元素的标题，
”details” 元素用于描述有关文档或文档片段的详细信息。
”summary” 元素应该是 “details” 元素的第一个子元素。

6.address标签

7.mark标签 带有几好的文本

8.keygen标签 秘钥

9.process标签：进度条

<command> --- 标签定义命令按钮，比如单选按钮、复选框或按钮。
<output> --- 标签定义不同类型的输出，比如脚本的输出。
<meter> --- 标签定义度量衡。仅用于已知最大和最小值的度量。必须定义度量的范围，
既可以在元素的文本中，也可以在 min/max 属性中定义。
<figure> --- 标签用于对元素进行组合。使用 <figcaption> 元素为元素组添加标题。
<figcaption> --- 标签定义 figure 元素的标题。”figcaption” 元素应该被置于 
“figure” 元素的第一个或最后一个子元素的位置。