移动端第二章新增H5标签

最新推荐文章于 2025-10-13 04:33:08 发布

原创最新推荐文章于 2025-10-13 04:33:08 发布 · 154 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#移动端

移动端专栏收录该内容

12 篇文章

订阅专栏

本文详细介绍了HTML5中的页面结构标签如<header>、<footer>、<nav>等，以及功能标签如<hgroup>、<progress>、<datalist>等的用法，并提供了实例。同时，针对IE低版本浏览器的兼容问题，文章给出了手动创建标签和引入html5shiv库的解决办法。

	标签名					标签						案例
	页面头部标签				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>