HTML5语义化标签兼容IE9以下的浏览器

170 阅读1分钟

[本文已参与「新人创作礼」活动,一起开启掘金创作之路。]

github地址:https://github.com/21MrLi/html-jiangrong

方法一在头部添加:

<!-- [if lte IE 8] --><script type="text/javascript" src="js/html5shiv.js"></script><!-- [endif] -->

方法二原生创建html5新增标签:

头部创建标签

<script type="text/javascript">
     var h5Tags=['header' ,'footer','article','nav' ,'section']
     for(var i=0;i<h5Tags.length;i++){
      document.createElement(h5Tags[i]);
     }
</script>

在css中添加

<style>
    header,footer,article,nav,section{display:block}
</style> 

语义化标签简介

定义文章 定义文章的侧边栏
一组媒体对象以及文字
定义 figure 的标题 定义页脚 定义页眉

定义对网页标题的组合

定义导航 定义文档中的区段

定义一个对话框 页面上的版块 用于划分页面上的不同区域,或者划分文章里不同的节

用来在页面中表示一套结构完整且独立的内容部分,可以用来呈现论坛的一个帖子,杂志或报纸中的一篇文章,一篇博客,用户提交的评论内容等。

标签规定独立的流内容(图像、图表、照片、代码等等)。
figure的子元素 用于对figure的内容 进行说明

选项列表。与 input 元素配合使用,来定义 input 可能的值。

需要标记的词或句子

用于描述文档或文档某个部分的细节 < summary> details 元素的标题 该元素用于摘录引用等 应该与页面的主要内容区分开的其他内容