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
>