HTML5 新标签用法总结

最后更新：
阅读次数： 次
许可协议： 知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议

构造页面结构的标签

  • header： 有两种使用方式，一是标注内容的标题，另一种是标注页面的页眉
    • 标注内容标题时，还可以同时存放内容的作者、发表日期、标签、点击量、内容概要等很多内容
  • nav： 常用来标注导航栏（一组链接）
  • aside： 用来添加附注，即与周围的文本没有密切关系的内容。比如盛放广告、相关内容链接等。也可以用来标注侧边栏
  • section： 区块元素，在其他语义元素不能满足需要时使用
  • main： 标识页面的主要内容，主要内容就是整篇文章，不包括站点页眉、页脚和侧边栏等信息
  • article： 内容块，可以用来放博客文章、新闻内容等
  • footer： 用来放一些网站版权信息、作品来源、法律限制以及一些链接等简单的信息

html5 layout

  • details： 标注可折叠区块
  • summary： 标注可折叠区块的标题
<details>
  <summary>about me</summary>
  <p>Hi, i'm percy, a sad boy, but not very sad.</p>
</details>
  • figure： 插图（注意它与图片的概念不同）
  • figcaption： 插图标题
<figure>
  <img src="./img/1.jpg" alt="picture" />
  <figcaption>picture title</figcaption>
</figure>

标注文本的标签

  • time： 在页面上标注一个有效的日期或时间
    • datatime 特性： 提供计算机能看懂的日期（eg： 2014-03-21）
    • HTMLTimeElement.dateTime
<p>The time is <time datatime="2017-03-11">2017/3/11</time>，i miss you!</p>
  • output： 标注 JavaScript 返回值（通常要为其指定一个 ID 属性）
<p>Your score is <output id="result"></output></p>
  • mark： 标注突出显示的文本（浏览器默认为标记的文本添加黄色背景）
<p>I am <mark>percy</mark></p>

构建表单的标签

  • 新的输入控件
    • <input type=”email”> 输入电子邮件
    • <input type=”url”> 输入网址
    • <input type=”search”> 搜索框
    • <input type=”tel”> 输入电话号码
    • <input type=”number” min=”0” max=”255”> 输入数值
    • <input type=”range” min=”0” max=”100”> 滑动条
      • 可为滑动条设置 oninput、onchange 监听变化
      • 注意 oninput 与 onchange 的不同，看下面演示

See the Pen oninput vs onchange by percy (@percy507) on CodePen.

  • datalist： 显示输入建议

    • datalist 必须配合一个标准文本框使用
<label
  >Choose a browser from this list: <input type="text" list="browsers" />
</label>
<datalist id="browsers">
  <option value="Chrome"> </option>
  <option value="Firefox"> </option>
  <option value="Internet Explorer"> </option>
  <option value="Opera"> </option>
  <option value="Safari"> </option>
  <option value="Microsoft Edge"> </option>
</datalist>
  • progress： 进度条
<progress value="50" max="200"></progress>

音频视频标签

audio 和 video 都是 inline 标签

  • audio： 音频标签

    • src： 音频文件地址
    • controls： 显示基本的控件
    • preload： 预加载媒体文件，默认值为 auto（直接预下载整个文件）
      • metadata： 先下载开头的数据块，点击播放时再下载整个文件
      • none： 只在点击播放后才开始下载整个文件
    • autoplay： 在加载完音频文件后立即播放（可结合 JavaScript 实现背景音乐）
    • loop： 是否开启循环播放
    • muted： 是否静音
<audio src="Indecent.mp3" controls autoplay></audio>
// 后备措施，支持多种格式

<audio controls>
  <source src="love.mp3" type="audio/mp3" />
  <source src="love.ogg" type="audio/ogg" />
</audio>

  • video： 视频标签

    • video 标签具有音频标签 audio 上面的所有特性
    • width、height： 设置视频窗口的大小
    • poster： 设置用于替换视频第一帧的图片
<video
  src="walking_dead.mp4"
  controls
  width="300"
  height="200"
  poster="img/post.jpg"
></video>
// 后备措施，支持多种格式

<video controls>
  <source src="dead.mp4" type="video/mp4" />
  <source src="dead.webm" type="video/webm" />
</video>

常见浏览器音频视频格式（后缀名+MIME 类型）

  • MP3： .mp3、audio/mp3，最流行的音频格式
  • Ogg Vorbis： .ogg、audio/ogg，免费开放的标准，可以和 mp3 媲美
  • WAV： .wav、audio/wav，未加工的音频初始格式，体积非常大
  • H.264： .mp4、video/mp4，视频压缩的行内标准，非常流行，广泛应用于各种视频行业
  • Ogg Theora： .ogv、video/ogg，免费开放的标准，品质和性能不如 H.264，但能满足大多数人的需要
  • WebM： .webm、video/webm，最新视频格式

MIME 类型，也叫内容类型，表示 Web 资源的内容类型。

暂时就这些了，有新的再补~