H5新增语义化标签
关于HTML语义化
1、什么是HTML语义化?
通过标签可以判断内容的语义,例如,通过<h1>
标签判断出内容是标题,通过<p>
判断内容是段落、通过<input>
标签是输入框等
2、语义化的好处
1、去掉样式或者样式丢失的时候,页面仍可以呈现清晰的结构;
2、方便其他设备解析(如移动设备,盲人阅读器,屏幕阅读器等),以语义的方式来渲染页面;
3、有利于SEO;
4、遵循w3c标准,便于开发和维护,可以减少差异化;
3、如何确定标签是否语义良好
去掉样式,看网页结构是否良好有序,是否仍然有很好的可读性;
4、语言化标签应注意的问题
1、在语义不明显时(既可以使用p时)尽量用p, 因为p在默认情况下有上下间距,对兼容特殊终端有利;
2、有语义的时候,尽量少用无语义的标签p和span;
3、不要使用纯样式标签,如:b、font、u等,改用css设置。
4、需要强调的文本,可以包含在strong或者em标签中,strong默认样式是加粗(不要用b),em是斜体(不用i)
H5新增的语言化标签
1、根据页面结构,由div派生的标签
hrader- 头标签
footer - 尾标签
nav - 导航
以前H4中,导航栏一直用ul-li标签来写,H5中可以直接用<nav>
标签来写,eg:
<nav>
<a href='#'>导航1</a>
<a href='#'>导航2</a>
</nav>
hgroup - 标题组合(一个标题和一个子标题)
<hgroup>
<h1>我是主标题</h1>
<h2>我是子标题</h2>
</hgroup>
section - 划分页面的不同区域
article - 页面上一套结构完整且独立的内容部分
aside - 和主题相关的附属信息
2、媒体元素 组合< figure>和< fitcaption>
<figure>
是父元素,用于图片的外层,其子元素,<figcaption>
用来对内容进行说明
3、< time>标签 - 专门用来表示时间
4、< datalist>标签 - 定义选项列表
5、< details>标签 - 用来描述文档或文档某个部分的细节
6、 < address>标签 - 定义文章作者/拥有者的联系信息
7、< mark>标签 - 定义带有记号的文本
8、< keygen>标签 - 用于给表单添加公钥
9、< process>标签 - 定义进度条
H5标签的兼容性
IE6/7/8 不兼容H5标签,解决办法:
1、使用js动态创建标签:
<script>
document.createElement('header'); //创建header标签
</script>
IE6 不识别header等h5标签,会认为其是自定义标签,而自定义标签是内联元素,所以需要在显示器中添加display:block;
2、 引入一个H5的文件
当h5标签较多时,使用方法1比较麻烦,可以引入一个H5文件
<!--[if lt IE 9]>
<script type="text/javascript" src="js/html5.min.js"></script>
<![endif]-->