HTML5新增标签

一、HTML大致框架的新增标签

header：头部

nav ：标题

main：主体 （目前main兼容性不好，可用section代替）

aside侧边栏

footer：尾部

section：表示独立的区域，里面可包含一个h1、可包含一个article[不推荐使用]

article：有语义化的div 标签。独立的，组成整体的一部分。

二、短语义化标签（一些）

1、文档细节标签   details

默认是不展开的，通过属性   open  时其展开

2、对话框    dialog

①  默认在浏览器不可见，设置属性   open  在浏览器才可见

②  在浏览器居中显示

③ 脱离文档流，不占内存

3、图表    figure（专门语义化标签来写图表）

图表标题  figcaption

4、可点击区域的图像映射  map（展示图片不完整）

①  img中usemap值与map中name值相同，即可进行关联

②  shape  

circle  ：可点区域为圆。     coords对应值在（x=50,y=100）的原点，半径25px

rect   ：可点击区域为长方形。 coords对应值 第一个点（x=400，y=0）与第一个点对角线的点（x=500，y=100）

③ href

点击 coords区域，跳转的地址

5、标记缩写   abbr 

重要标签，对SEO有优化功能

其对  WHO 的效果是靠属性  title  显示的，将abbr换成span也有效果

6、

7、标记  mark

8、定义度量衡  meter

9、定义进度  

10、语义化标签   时间  time

实际没有什么效果，目的是为了方便传值给后台，或者给浏览器看

11、给汉字添加拼音  ruby   

12、引入

①块引入    cite

②、行级引入   cite

③、行级引入    blockquote

④、带   “  ”  的引入  

13、格式化  code、pre

  （第一个为code效果，第二个为pre效果）