html5新增标签

H5新增常用标签

header:定义页面的头部
footer:定义页面的底部
nav:定义页面的导航栏
article:定义文章的标签
datalist:定义input元素的可能值
details:定义文档的细节
summary:定义标题
fieldset:组合表单中的相关元素
legend:为fieldset元素设置标题
figure:定义带图片的文章
figcaption:作为figure标签的标题
progress:进度条（兼容性较差，一般使用其他元素模拟）
section:定义文档中的区段，一般用作章节，页眉，页脚
meter:定义度量
form id 规定元素所属的一个或多个表单
high number 规定被视作高的值的范围
low number 规定被视作低的值的范围
max number 规定范围的最大值
min number 规定范围的最小值
optimum number 规定度量的优化值
value number 必需。规定度量的当前值.

语义化

根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。

为什么要语义化

• 为了在没有CSS的情况下，页面也能呈现出很好地内容结构、代码结构:为了裸奔时好看；
• 用户体验：例如title、alt用于解释名词或解释图片信息、label标签的活用；
• 有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；
• 方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；
• 便于团队开发和维护，语义化更具可读性，是下一步吧网页的重要动向，遵循W3C标准的团队都遵循这个标准，可以减少差异化。

• 常见的标签

  div    《行》
  a        <base>
  span   
  header    《行》
  footer    《行》
  section   板块    《行》
  nav        导航   《行》
  article    《行》
  aside     侧边栏  广告      《行》
  
  time     时间 日期
  p   段落     《行   padding》
  h1~h6  标题         《行   padding》
  strong   强调  加粗
  em         强调   斜体
  
  层级
  ul         无序列表      《padding  margin》
       li      列表项        《行》
  
  ol         有序列表    《padding  margin》
        li     列表项   《行》
  
  dl     自定义列表      《padding》
        dt    标题（1个）《行》
         dd  列表项（n个）《margin》
  
  
  mark    标记
  
  
  块元素：
          独占一行
          没有宽度的时候撑满一整行
          支持所有css命令
  
  
  内联元素的特征：
      同排可以继续跟同类型的标签
      宽度由内容撑开
      不支持宽高
      不支持上下margin值
      代码换行被解析成一个空格
  
      解决空格问题：
          1，利用宋体 宋体在字体大小小于20px的情况下，空格大小就是文字大小的一半
          2，简单粗暴，直接给父级font-size:0; 这时候需要重新指定子级的font-size
  
  
  内联块元素
       代码换行被解析
       让内联支持宽高
       让块元素可以横向排列
       没有设置宽度的时候，由内容撑开宽度
  
  
  要注意的几个原则：
      1，尽量不要在内联元素身上设置行高
      2，注意内联元素的对齐方式
        
  元素类型转换
  	内联元素可以转换成块元素： display:block;
  	其他类型的元素可以转换成内联元素： display:inline
  	 display:inline-block  转换成内联块元素