移动端 第二章 html5新增标签

html5新增标签

1：新增结构标签：（我们以前布局页面经常用到的是div或者span等，但是这些没有语义化）

标签名					标签						案例
页面头部标签				header
页脚底部标签				footer
导航						nav						<nav>
													<a href=''>首页</a>
													<a href=''>首页</a>
													<a href=''>首页</a>
												</nav>
划分区域					section					(有点代替div的意思)
主题内容块				article
侧边栏					aside

2：功能标签（了解）：

标签名					标签						案例
标题组合					hgrounp					<hgrounp>
													<h1></h1>
													<h2></h2>
												</hgrounp>
进度条					progress				<progress min='0' max='100' value='30' progress>
选项列表					datalist				<input type="text" name="" list="k" />
												<datalist id="k">
													<option value="html">html</option>
													<option value="css">css</option>
													<option value="js">js</option>
												</datalist>
定义对话框或窗口			dialog					<dialog open>
											          <dt>1问题</dt>
											          <dd>1答案</dd>
											          <dt>2问题</dt>
											          <dd>2答案</dd>
												</dialog>
媒体标签					figure
媒体组合标签				figcaption				<figure>
													<figcaption>标题</figcaption>
													<p>标题内容</p>
												</figure>
标记标签					mark

3：兼容IE低版本浏览器的办法(IE低版本把h5新增标签解析成了行元素)

1手动创建：在js中创建h5新增标签，css中给h5标签添加display：block属性

举例：

<script type="text/javascript">
var e=("abbr,article,aside,audio,canvas,datalist,details,"+"figure,footer,header,hgroup,mark,menu,meter,nav,output,"+"progress,section,time,video").split(',');
for(var i=0;i<e.length;i++) {
	document.createElement(e[i]);
	}
</script>

2网址链接：

<script src="https://cdn.bootcss.com/html5shiv/3.7/html5shiv-printshiv.js"></script>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>

3本地链接:

<script src="js/html5shiv.js"></script>