HTML5 新增语义化结构

最新推荐文章于 2025-06-05 09:52:00 发布

GoldenaArcher

最新推荐文章于 2025-06-05 09:52:00 发布

阅读量439

点赞数 1

CC 4.0 BY-SA版权

分类专栏： # HTML 文章标签： html5 html 前端

本文链接：https://blog.csdn.net/weixin_42938619/article/details/116435485

HTML 专栏收录该内容

11 篇文章

订阅专栏

本文介绍了HTML5中的新语义化标签，如<header>, <nav>, <article>, <section>, <aside>和<footer>，以及<audio>和<video>多媒体标签的使用方法和属性。此外，还探讨了新增的<input>类型，如'email', 'url', 'date', 'time', 'number'等，以及它们在表单验证中的应用。通过实例展示了这些新特性的实际效果，强调了它们对搜索引擎友好和移动端兼容性的优势。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>