移动端总结新增页面标签

最新推荐文章于 2024-09-15 08:00:00 发布

明天自己会更好

最新推荐文章于 2024-09-15 08:00:00 发布

阅读量286

点赞数

分类专栏：移动端文章标签： html5

本文链接：https://blog.youkuaiyun.com/qq_40770473/article/details/108923640

版权

本文总结了移动端HTML5中新增的结构标签，如header、footer、nav、section、article、aside等，强调了它们的语义化优势。同时，讨论了如何解决IE低版本浏览器对新标签的不兼容问题，提出了通过手动创建标签、修改CSS样式及使用html5shiv.min.js脚本进行兼容的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

移动端总结新增页面标签

1新增结构标签：（我们以前布局页面经常用到的是div或者span等，但是这些没有语义化）
2功能标签：
3兼容IE低版本浏览器的办法(IE低版本把h5新增标签解析成了行元素)
4兼容代码（html5shiv.min.js）

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

标签名标签案例
页面头部标签 header
页脚底部标签 footer
导航 nav
划分区域 section
主题内容块 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> <optionvalue="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>

4兼容代码（html5shiv.min.js）

/**
* @preserve HTML5 Shiv 3.7.2 | @afarkas @jdalton @jon_neal @rem | MIT/GPL2 Licensed
*/
!function(a,b){
   function c(a,b){
   var c=a.createElement("p"),d=a.getElementsByTagName("head")