HTML5 新增语义化结构

Posted 2021-06-21 GoldenaArcher

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML5 新增语义化结构相关的知识，希望对你有一定的参考价值。

html5 新增语义化结构

来自黑马程序员 pink 老师前端入门教程，零基础必看的 h5(html5)+css3+web 前端视频教程的内容，从 p275 开始到 p279 结束。

主要讲的新特性具有以下两个特点：

开发常用的新特性
部分在这个教程内用得到的新特性

这些知识点应该也会随着 H5 权威指南的学习而被推进吧

新增的语义化标签

header，头部标签
nav，导航标签
article，文章标签
section，区域标签
aside，侧边栏标签
footer，尾部标签
…

特点：

针对搜索引擎
标签可以使用多次
IE9 中需要将元素转换成块级元素
移动端更喜欢使用这些标签——没有兼容性的问题

新增的多媒体标签

audio，音频
video，视频

视频

使用它们可以很方便的在页面中嵌入支持有限的视频格式文件的播放——尽量使用 mp4。

视频使用语法

<video>
  <!-- 考虑兼容问题 -->
  <source src="abc.mp4" type="video/mp4" />
  <source src="abc.ogg" type="video/ogg" />
</video>

视频常用属性

autoplay，控制是否自动播放
controls，控制是否显示播放控件
width
height
loop，控制是否循环播放
preload，控制是否预先加载
src
poster，等待加载时的画面图片
muted，静音播放

音频

使用它们可以很方便的在页面中嵌入支持有限的视频格式文件的播放——尽量使用 mp3。

音频使用语法

与视频相似：

<audio>
  <!-- 考虑兼容问题 -->
  <source src="abc.mp3" type="video/mpeg" />
  <source src="abc.ogg" type="video/ogg" />
</audio>

音频的属性与视频相似。

属性

required
placeholder
autofocus
autocomplete，默认为 on
multiple，多用于允许提交多个文件

案例学习

这么说有一点的抽象，看一下源码及案例效果就知道作用是什么了：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 验证必须添加表单域 -->
    <form action="">
      邮箱：<input type="email" name="" id="" /> <br />
      网址：<input type="url" name="" id="" /> <br />
      日期：<input type="date" name="" id="" /> <br />
      时间：<input type="time" name="" id="" /> <br />
      数量：<input type="number" name="" id="" /> <br />
      手机号码：<input type="tel" name="" id="" /> <br />
      搜索：<input type="search" name="" id="" /> <br />
      颜色：<input type="color" name="" id="" /> <br />
      <input type="submit" value="提交" /> <br />
    </form>
  </body>
</html>