H5新标签总结

H5新标签

• 结构标签

1. article：定义文章

使用：（1）论坛帖子

     （2）博客文章

     （3）新闻故事

     （4）评论

1. aside：定义文章侧边栏，例如目录
2. section：定义文档中的某个区域

使用：

    （1）章节

     （2）头部

     （3）底部

1. nav：导航栏
2. header：定义section或者document页眉

使用：

1. 文章介绍内容
2. 导航连接器的容器

1. footer：定义section或者document页脚

使用：

1. 文档创建者姓名
2. 文档的版权信息
3. 使用条数的链接
4. 联系信息等

1. details：定义展开详细内容，只有safari和chrome支持
2. figure：定义一组媒体元素及文字

   figcaption用来定义figure的title

• 表单元素

1. 日期和时间：date、time
2. email：必须填写且正确
3. url：必须输入且正确
4. number：

1. 必须填写
2. Min：最小值
3. Max：最大值

1. range:输入一定范围内的数字值
2. 属性：

1. placeholder：提示文本
2. required：定义该input的必填值

• 多媒体标签

1. audio：音频

1. 支持格式：MP3、wav、ogg
2. 属性：

controls：显示音频控件

autoplay：准备就绪后自动播放

loop：自动循环播放

muted：静音

src：音频的路径

       （3）source：定义资源类型，由浏览器进行连接 

1. vedio：视频
2. 支持格式：MP4、webM、ogg
3. 属性：

         controls：显示视频控件

         autoplay：准备就绪后自动播放视频

         loop：自动循环播放

        muted：静音

        src：规定视频文件的路径

1. source：定义资源类型  由浏览器进行连接

• 使用新标签的原因：是为了语义化

语义化的作用：

1. 去掉样式能够让页面结构清晰呈现
2. 有益于SEO
3. 便于团队开发和维护