前端---HTML5新标签

H5新标签

一、结构标签

1、article

• 定义文章
• 使用
  （1）论坛帖子
  （2）博客文章
  （3）新闻故事
  （4）评论

2、aside

• 定义文章的侧边栏

3、section

• 定义文档中的某个区域
• 使用
  （1）章节
  （2）头部
  （3）底部

4、nav

• 定义导航部分

5、header

• 定义section或者document页眉
• 使用
  （1）文章介绍
  （2）导航链接器的容器

6、footer

• 定义section或者document页脚
• 使用
  （1）文档创建者姓名
  （2）文档的版权信息
  （3）使用条款的链接
  （4）联系信息等

7、details

• 定义展开详细内容
• 只有safari和chrome支持

8、figure

• 定义一组媒体元素及文字
• figcaption------定义figure的title

二、表单元素

1、日期和时间

• data
• time

2、email

• 必须输入且正确

3、url

• 必须输入且正确

4、number

• 必须输入
• min------最小值
• max------最大值

5、range

• 输入一定范围内的数字值

6、属性

• placeholder------提示文字
• require------定义input为必填项

三、多媒体标签

1、audio

• 音频
• 支持格式
  （1）MP3
  （2）wav
  （3）ogg
• 属性
  （1）controls------显示音频控件
  （2）autoplay------准备就绪后自动播放
  （3）loop-------自动单曲循环
  （4）muted------静音
  （5）src------规定音频文件的路径
• source
  （1）定义资源类型
  （2）由浏览器进行选择

2、video

• 音频
• 支持格式
  （1）MP4
  （2）webM
  （3）ogg
• 属性
  （1）controls------显示音频控件
  （2）autoplay------准备就绪后自动播放
  （3）loop-------自动单曲循环
  （4）muted------静音
  （5）src------规定音频文件的路径
• source
  （1）定义资源类型
  （2）由浏览器进行选择

四、为什么使用新标签

为了语义化

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