移动端 第二章 html5新增标签

    科技2022-07-16  137

    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>
    Processed: 0.013, SQL: 8