H5常用新标签

在H5中 有许多新标签下面是我的个人对常用新标签的理解

  <header></header>:头部标签,不仅仅只存在于页面分部的头部还可以分布在主体部分的头部内容部分的头部等 加强了语义化

  <footer></footer>:尾部标签,和头部一样 不仅仅只存在于页面分部的尾部还可以分布在主体部分的尾部内容部分的尾部等 加强了语义化

  <nav></nav>:导航栏,仅仅只用于导航栏内容的承载 加强了语义化

  <main></main>:主体部分,网页分布的内容主体部分,类似于格局划分的中间部分

  <figure></figure>:取代的是以前div套img和p的内容。

            示例:<div><img  src=""/ ><p>描述</p></div>

    在figure里有一个专门的标题标签<figcaption></figcaption>

  <section></section>:定义文档中的某一个区块。在实际过程中不能替代DIV标签,在官方的标注文档中明确建议:在section中 只出现标题(h1-h6)和内容(p),还可以使用img。一般可以用在一些展示性的列表(有标题和段落 或者标题段落图片)

  <datalist></datalist>: 在input标签中用list引用datalist中的id 然后就能查看到option中的智能提示

        示例:<input type="text" list="123">

           <datalist id="123">

              <option value="10086">移动客服</option>

              <option value="10010">联通客服</option>

              <option value="10000">电信客服</option>

           </datalist>

  <details></details>:用户补充信息,在details标签里面也有一个配合使用的标题 标签<summary></summary>  details有一个属性open 

  <audio></audio>:音频标签,通过src引入你所需要的音频文件  在audio里有一个controls属性 可以显示浏览器自带的控制条,每一种浏览器所自带的控制条都不同  而autoplay属性:自动播放

muted属性:静音,loop属性:播放完毕自动循环, preload属性:预加载 (src与href两种加载的区别: herf: 引入资源 可以并行加载  在多个文件需要加载时 href会一次性请求多条数据 src:替代资源  当一个文件没有加载完成时不会进行后面的操作 所以预加载类似于迅雷边下边播功能  当你的preload元素身上出现了autopaly 默认就是预加载),格式兼容MP3 Wav Ogg   浏览器兼容问题可以在audio标签里的soruce标签添加三种格式的文件

   <video></video>:视频标签,通过src引入所需要的视频文件 在video 标签中也有与audio相同的属性显示控制条 与audio不同的是视频标签可以设置宽高  poster属性:用作未进行播放的图片 src引入。

  <input></input>:以前的type有text button submit password checkbox radio file(文件浏览,上传头像) reset(重置) 

          新type属性: date(日历) number(pc端为上下箭头 移动端)   autofocus:自动聚焦 auticomplete属性:是否自动完成表单 on/off   pattern属性:正则验证

            ios专用:autocapitalize:on/off 关闭首字母大写 autocorrect:on/off 关闭ios输入自动修正

原文地址:https://www.cnblogs.com/chengX3programmer/p/8644062.html