[HTML5] 一文读懂H5新特性的应用

Kevin的技术博客.png

文章目录

- 一、HTML5 新增语义化标签
- - 1. `<header>` 标签
  - - 语法
    - 使用场景
    - 常用属性
    - 示例代码
  - 2. `<footer>` 标签
  - - 语法
    - 使用场景
    - 常用属性
    - 示例代码
  - 3. `<nav>` 标签
  - - 语法
    - 使用场景
    - 常用属性
    - 示例代码
  - 4. `<article>` 标签
  - - 语法
    - 使用场景
    - 常用属性
    - 示例代码
  - 5. `<section>` 标签
  - - 语法
    - 使用场景
    - 常用属性
    - 示例代码
  - 6. `<aside>` 标签
  - - 语法
    - 使用场景
    - 常用属性
    - 示例代码
  - 7. `<main>` 标签
  - - 语法
    - 使用场景
    - 常用属性
    - 示例代码
  - 8. `<figure>` 和 `<figcaption>` 标签
  - - 语法
    - 语法
    - 使用场景
    - 常用属性
    - 示例代码
- 二、HTML5 表单增强功能
- - 1. 新的输入类型
  - - 示例代码
  - 2. 表单的验证属性
  - - 示例代码
- 三、HTML5 多媒体标签
- - 1. `<audio>` 标签
  - - 语法
    - 使用场景
    - 常用属性
    - 示例代码
  - 2. `<video>` 标签
  - - 语法
    - 使用场景
    - 常用属性
    - 示例代码
  - 3. `<track>` 标签
  - - 语法
    - 使用场景
    - 常用属性
    - 示例代码
- 四、HTML5 全局属性
- - 1. `contenteditable` 属性
  - - 语法
    - 使用场景
    - 示例代码
  - 2. `draggable属性`
  - - 语法
    - 使用场景
    - 常用属性值
    - 示例代码
  - 3. `hidden` 属性
  - - 语法
    - 使用场景
    - 示例代码
  - 4. `data-*` 自定义数据属性
  - - 语法
    - 使用场景
    - 示例代码
  - 5. `spellcheck` 属性
  - - 语法
    - 使用场景
    - 常用属性值
    - 示例代码
- 五、HTML5 的语义化标签
- - 1. `<article>` 标签
  - - 语法
    - 使用场景
    - 示例代码
  - 2. `<section>` 标签
  - - 语法
    - 使用场景
    - 示例代码
  - 3. `<nav>` 标签
  - - 语法
    - 使用场景
    - 示例代码
  - 4. `<aside>` 标签
  - - 语法
    - 使用场景
    - 示例代码
  - 5. `<header>` 标签
  - - 语法
    - 使用场景
    - 示例代码
  - 6. `<footer>` 标签
  - - 语法
    - 使用场景
    - 示例代码
- 六、HTML5 的多媒体标签
- - 1. `<audio>` 标签
  - - 语法
    - 使用场景
    - 常用属性
    - 示例代码
  - 2. `<video>` 标签
  - - 语法
    - 使用场景
    - 常用属性
    - 示例代码
  - 3. `<track>` 标签
  - - 语法
    - 使用场景
    - 常用属性
    - 示例代码
  - 4. `<embed>` 标签
  - - 语法
    - 使用场景
    - 示例代码
- 七、HTML5 的离线与存储功能
- - 1. `Application Cache`
  - - 语法
    - 使用场景
    - 使用步骤
    - 示例代码
    - 注意事项
  - 2. `Local Storage` 和 `Session Storage`
  - - 语法
    - 使用场景
    - 操作方法
    - 示例代码
    - 注意事项
  - 3. `IndexedDB`
  - - 语法
    - 使用场景
    - 基本操作
    - 示例代码
    - 注意事项
- 八、HTML5 的表单增强
- - 1. 新的输入类型（Input Types）
  - - 常见的新输入类型
    - 使用场景
  - 2. 新的表单属性
  - - 示例代码
  - 3. 新的表单元素
  - - 1. `<datalist>` 元素
    - - 语法
      - 使用场景
      - 示例代码
    - 2. `<output>` 元素
    - - 语法
      - 使用场景
      - 示例代码
    - 3. `<progress>` 元素
    - - 语法
      - 使用场景
      - 示例代码
    - 4. `<meter>` 元素
    - - 语法
      - 使用场景
      - 示例代码
    - 5. `<keygen>` 元素（已废弃）
    - - 语法
      - 使用场景
  - 4. 表单验证（Form Validation）
  - - 1. 必填字段验证
    - - 语法
    - 2. 格式验证
    - - 示例代码
    - 3. 自定义验证
    - - 示例代码
    - 4. 实时验证
    - - 示例代码
  - 5. 表单与多媒体的结合
  - - 示例代码
- 总结

一、HTML5 新增语义化标签

1. `<header>` 标签

语法

<header> 标签用于定义文档或文档某部分的头部内容，通常包含导航链接、网站标识、标题、搜索框等。

使用场景

页面头部：可以将网站的标题和主导航菜单放在 <header> 中。
章节头部：在文章、博客或文档的不同章节中，也可以使用 <header> 来表示该章节的标题部分。

常用属性

无特定属性：与其他HTML标签一样，<header> 也支持全局属性，如 class、id、style、data-* 等。

示例代码

<header>
    <h1>网站名称</h1>

    <nav>
        <ul>
            <li><a href="#home">首页</a></li>

            <li><a href="#about">关于我们</a></li>

            <li><a href="#contact">联系我们</a></li>

        </ul>

    </nav>

</header>

在这个例子中，<header> 元素包含了一个网站的主标题和导航菜单，帮助用户快速访问不同的页面。

2. `<footer>` 标签

语法

<footer> 标签用于定义文档或文档某部分的底部内容，通常包含版权信息、作者信息、相关链接等。

使用场景

页面底部：通常用于页面的尾部，包含版权声明、法律条款、联系信息等。
章节结尾：在一个文章或文档的章节结束时，也可以用 <footer> 来标示总结或相关信息。

常用属性

无特定属性：与其他HTML标签一样，<footer> 也支持全局属性，如 class、id、style、data-* 等。

示例代码

<footer>
    <p>&copy; 2024 网站版权所有。</p>

    <p><a href="#privacy">隐私政策</a> | <a href="#terms">使用条款</a></p>

</footer>

3. `<nav>` 标签

语法

<nav> 标签用于定义导航链接的区域。通常放在页面的顶部或侧边栏，用于展示网页的主要导航链接。

使用场景

主导航栏：可以将整个网站的主要导航链接放置在 <nav> 标签中。
次级导航栏：在页面内使用 <nav> 标签来表示章节内的导航，方便用户在同一页面内快速跳转。

常用属性

无特定属性：与其他HTML标签一样，<nav> 也支持全局属性，如 class、id、style、data-* 等。

示例代码

<nav>
    <ul>
        <li><a href="#section1">章节1</a></li>

        <li><a href="#section2">章节2</a></li>

        <li><a href="#section3">章节3</a></li>

    </ul>

</nav>

在这个示例中，<nav> 标签包含一个列表，列表项中每个 <a> 链接都指向文档中的不同章节。

4. `<article>` 标签

语法

<article> 标签用于表示文档中独立的内容区域，如博客文章、新闻报道、用户评论等。<article> 内的内容在逻辑上独立于其他内容，可以独立分发或引用。

使用场景

独立内容块：适用于表示一个完整的文章、博客帖子、新闻报道等内容。
嵌套使用：在一个 <article> 内部，可以嵌套使用其他 <article> 标签，适用于显示评论、嵌入文章等场景。

常用属性

无特定属性：与其他HTML标签一样，<article> 也支持全局属性，如 class、id、style、data-* 等。

示例代码

<article>
    <header>
        <h2>HTML5新特性介绍</h2>

        <p>作者: 张三</p>

        <time datetime="2024-08-12">2024年8月12日</time>

    </header>

    <p>HTML5 引入了很多新特性，如语义化标签、增强的表单控件、媒体标签等...</p>

    <footer>
        <p>分类: 前端技术</p>

    </footer>

</article>

在这个例子中，<article> 标签定义了一篇独立的文章，包含标题、作者信息、发布时间、正文内容以及分类信息。

5. `<section>` 标签

语法

<section> 标签用于定义文档中的节或区段，通常包含多个内容块。这些区段通常有一个标题，并在逻辑上分组为相关内容。

使用场景

内容分区：适用于将文档内容划分为多个部分，每个部分都有其特定的主题。
章节划分：在文章或页面中使用 <section> 标签来标识不同的章节。

常用属性

无特定属性：与其他HTML标签一样，<section> 也支持全局属性，如 class、id、style、data-* 等。

示例代码

<section>
    <h2>HTML5的语义化标签</h2>

    <p>HTML5 引入了一些新的语义化标签，如 <header>、<footer>、<article> 等，用于更清晰地定义网页结构。</p>

</section>

<section>
    <h2>HTML5的多媒体支持</h2>

    <p>HTML5 新增了 <audio> 和 <video> 标签，简化了多媒体内容的嵌入和播放。</p>

</section>

这里的 <section> 标签用于划分文档的不同部分，每个部分都有其特定的主题和标题。

6. `<aside>` 标签

语法

<aside> 标签用于表示与页面主要内容间接相关的部分，如侧边栏、广告或引用的内容。通常作为页面的辅助内容块出现。

使用场景

侧边栏内容：适用于放置广告、相关链接、作者介绍等侧边栏内容。
附加信息：在文章内使用 <aside> 来提供注释、引用或补充信息。

常用属性

无特定属性：与其他HTML标签一样，<aside> 也支持全局属性，如 class、id、style、data-* 等。

示例代码

<aside>
    <h3>作者简介</h3>

    <p>张三，前端开发工程师，精通HTML5、CSS3、JavaScript。</p>

</aside>

在这个示例中，<aside> 标签定义了一个侧边栏内容块，用于展示作者简介。

7. `<main>` 标签

语法

<main> 标签用于定义文档的主要内容区域，通常包含文档的核心内容。注意，页面中应该只出现一个 <main> 标签。

使用场景

主内容区：用于包裹页面的主要内容，避免与页眉、页脚、导航等非核心内容混淆。

常用属性

无特定属性：与其他HTML标签一样，<main> 也支持全局属性，如 class、id、style、data-* 等。

示例代码

<main>
    <article>
        <h2>HTML5 新增语义化标签</h2>

        <p>HTML5 引入了很多新的语义化标签，这些标签...</p>

    </article>

    <article>
        <h2>HTML5 的多媒体支持</h2>

        <p>HTML5 通过 <audio> 和 <video> 标签简化了多媒体内容的嵌入...</p>

    </article>

</main>

在这个示例中，<main> 标签包含了页面的核心内容部分，包括两个文章块。

8. `<figure>` 和 `<figcaption>` 标签

语法

<figure> 标签用于将图像、图表、照片等与文档正文相关的内容独立出来，通常搭配 <fig

** 和 **

`** 标签**

语法

<figure> 标签用于封装图像、图表、插图或其他媒体内容，并使这些内容与文档的主要文本部分区分开来。<figcaption> 标签则用于为 <figure> 内的内容提供标题或说明。

使用场景

图像展示：在文章中插入图片时，可以使用 <figure> 标签来封装图片，并使用 <figcaption> 添加图片说明。
图表和插图：用于图表、插图等媒体内容的展示，并为其添加相关的标题或说明。

常用属性

无特定属性：<figure> 和 <figcaption> 支持HTML的全局属性，如 class、id、style、data-* 等。

示例代码

<figure>
    <img src="example.jpg" alt="示例图片">
    <figcaption>图1：示例图片的说明文字</figcaption>

</figure>

在这个示例中，<figure> 标签封装了一个图片，<figcaption> 标签为该图片提供了说明文字。这样，图像和其说明可以独立于正文内容进行展示。

二、HTML5 表单增强功能

HTML5 对表单进行了显著增强，引入了许多新的输入类型、属性和元素，使表单更加强大和灵活。

1. 新的输入类型

HTML5 新增了许多 <input> 标签的输入类型，如 email、url、date、time、number、range、color 等，方便开发者更精确地控制用户输入的内容。

示例代码

<form>
    <label for="email">电子邮件:</label>

    <input type="email" id="email" name="email" required>

    <label for="url">个人主页:</label>

    <input type="url" id="url" name="url">

    <label for="dob">出生日期:</label>

    <input type="date" id="dob" name="dob">

    <label for="appointment">预约时间:</label>

    <input type="time" id="appointment" name="appointment">

    <label for="age">年龄:</label>

    <input type="number" id="age" name="age" min="1" max="100">

    <label for="volume">音量:</label>

    <input type="range" id="volume" name="volume" min="0" max="100">

    <label for="color">选择颜色:</label>

    <input type="color" id="color" name="color">
    
    <input type="submit" value="提交">
</form>

此示例展示了HTML5表单中新输入类型的使用，每种类型都能更好地约束用户输入数据的格式。

2. 表单的验证属性

HTML5 还引入了一些新的表单验证属性，使得客户端验证更加简单直观。

required：表示输入字段是必填的。
pattern：允许你为输入内容定义一个正则表达式。
min** 和 **max：用于限制 number 和 date 类型的输入范围。
step：用于设置数字或日期类型输入的增量。
maxlength** 和 **minlength：设置输入字段的字符数限制。

示例代码

<form>
    <label for="username">用户名:</label>

    <input type="text" id="username" name="username" required minlength="4" maxlength="20">
    
    <label for="age">年龄:</label>

    <input type="number" id="age" name="age" required min="18" max="65">
    
    <label for="password">密码:</label>

    <input type="password" id="password" name="password" required pattern=".{6,}">
    
    <input type="submit" value="注册">
</form>

这个表单示例演示了HTML5验证属性的使用，用户在提交表单前，浏览器会自动进行验证，确保数据符合要求。

三、HTML5 多媒体标签

1. `<audio>` 标签

语法

<audio> 标签用于在网页中嵌入音频内容，支持多种音频格式，如MP3、WAV、OGG等。

使用场景

音频播放：适用于嵌入背景音乐、语音解说、播客等音频内容。
音效嵌入：可以为网页中的某些交互添加音效。

常用属性

controls：添加播放控件，如播放/暂停按钮、音量调节等。
autoplay：页面加载时自动播放音频。
loop：音频播放结束后重新开始播放。
preload：定义音频文件在页面加载时是否应预加载。可选值为 none、metadata、auto。

示例代码

<audio controls>
    <source src="audio.mp3" type="audio/mpeg">
    <source src="audio.ogg" type="audio/ogg">
    您的浏览器不支持 audio 标签。
</audio>

在这个示例中，<audio> 标签嵌入了一个音频文件，并提供了播放控件，用户可以通过浏览器直接播放音频。

2. `<video>` 标签

语法

<video> 标签用于在网页中嵌入视频内容，支持多种视频格式，如MP4、WebM、Ogg等。

使用场景

视频播放：用于嵌入电影片段、宣传视频、教程等视频内容。
视频背景：可以作为页面的背景视频，增加视觉效果。

常用属性

controls：添加视频播放控件，如播放/暂停按钮、进度条、音量调节等。
autoplay：页面加载时自动播放视频。
loop：视频播放结束后重新开始播放。
muted：播放视频时将音量静音。
poster：指定视频加载前显示的预览图像。

示例代码

<video controls poster="poster.jpg">
    <source src="video.mp4" type="video/mp4">
    <source src="video.webm" type="video/webm">
    您的浏览器不支持 video 标签。
</video>

在这个示例中，<video> 标签用于嵌入一个视频文件，并提供播放控件，poster 属性定义了在视频加载前显示的图片。

3. `<track>` 标签

语法

<track> 标签用于在 <video> 和 <audio> 元素中添加字幕、章节标题或其他时间文本数据。

使用场景

字幕添加：用于为视频内容添加多语言字幕。
章节划分：在长视频或音频中添加章节，便于用户快速导航。

常用属性

kind：定义文本轨道的类型。常用值包括 subtitles（字幕）、captions（字幕，针对听障用户）、descriptions（视频描述）、chapters（章节）等。
src：定义字幕文件的URL。
srclang：定义字幕文件的语言，如 en 表示英语。
label：为轨道提供一个可读标签。
default：指定该轨道是否为默认轨道。

示例代码

<video controls>
    <source src="movie.mp4" type="video/mp4">
    <track kind="subtitles" src="subtitles_en.vtt" srclang="en" label="English" default>
    <track kind="subtitles" src="subtitles_fr.vtt" srclang="fr" label="Français">
    您的浏览器不支持 video 标签。
</video>

此示例展示了如何为视频添加多语言字幕轨道，用户可以在视频播放时选择不同语言的字幕。

四、HTML5 全局属性

HTML5 引入了一些全局属性，这些属性可以应用于几乎所有的HTML元素中。

1. `contenteditable` 属性

语法

contenteditable 属性用于指定一个元素是否可编辑。

使用场景

富文本编辑器：在网页上创建一个富文本编辑区域，用户可以直接在页面上编辑内容。
前端展示：临时编辑页面内容以查看效果。

示例代码

<div contenteditable="true">
    这是一个可编辑的段落，您可以点击此处进行编辑。
</div>

在这个示例中，用户可以直接在网页上编辑 <div> 元素的内容。

2. `draggable属性`

语法

draggable 属性用于指定一个元素是否可拖动。

使用场景

拖放交互：在网页中实现拖放操作，例如拖动图片、文件或文本块。
自定义UI组件：创建可拖动的自定义界面元素，例如看板、工具栏等。

常用属性值

true：允许元素被拖动。
false：禁止元素被拖动。
auto：使用默认的拖动行为（通常元素默认是不可拖动的，除非是链接或图片）。

示例代码

<img src="image.jpg" draggable="true" alt="可拖动的图片">
<p draggable="true">这是一个可拖动的段落。</p>

在这个示例中，<img> 和 <p> 标签分别通过 draggable 属性变得可拖动，用户可以通过拖动这些元素进行交互。

3. `hidden` 属性

语法

hidden 属性用于隐藏元素，使其不在页面上显示。

使用场景

临时隐藏元素：例如在表单中隐藏某些字段，或在特定条件下隐藏某些内容。
状态管理：用于控制元素的显示与隐藏状态，而无需使用CSS的 display: none;。

示例代码

<p hidden>这段文本是隐藏的。</p>

<button onclick="document.querySelector('p').hidden = false;">显示隐藏的文本</button>

在这个示例中，段落文本被默认隐藏，点击按钮后，文本会显示出来。

4. `data-*` 自定义数据属性

语法

data-* 属性允许开发者在HTML元素中存储额外的自定义数据，这些数据可以通过JavaScript轻松访问。

使用场景

数据存储：在元素中存储特定数据，例如用户ID、配置选项等。
JavaScript交互：通过JavaScript读取或修改这些自定义数据属性，实现页面的动态交互。

示例代码

<div id="user" data-user-id="12345" data-user-role="admin">
    用户信息
</div>

<script>
    let userId = document.getElementById('user').dataset.userId;
    let userRole = document.getElementById('user').dataset.userRole;
    console.log(`User ID: ${userId}, Role: ${userRole}`);
</script>

在这个示例中，data-* 属性用于在 div 元素中存储用户ID和角色信息，JavaScript可以轻松地获取这些数据进行处理。

5. `spellcheck` 属性

语法

spellcheck 属性用于指定元素的拼写和语法是否应该被检查。

使用场景

表单输入检查：在文本输入区域启用或禁用拼写检查功能，尤其是在多行文本或文章编辑器中。
国际化支持：为不同语言的输入字段设置拼写检查功能，提升用户体验。

常用属性值

true：启用拼写检查。
false：禁用拼写检查。

示例代码

<textarea spellcheck="true">请输入您的文本...</textarea>

在这个示例中，<textarea> 标签启用了拼写检查，用户输入的文本会被浏览器自动检查拼写错误。

五、HTML5 的语义化标签

HTML5 强调语义化，通过引入一系列新的语义化标签，使网页结构更加清晰、易于理解，并提升SEO效果。

1. `<article>` 标签

语法

<article> 标签用于封装一段独立的内容块，如文章、博客帖子、新闻报道等，内容通常具有独立的意义，可以单独存在。

使用场景

博客文章：每篇博客文章可以使用一个 <article> 标签封装。
新闻报道：新闻网站的每篇新闻报道可以使用 <article> 标签。
论坛帖子：论坛中的每个帖子或回复可以使用 <article> 标签。

示例代码

<article>
    <h2>HTML5的语义化标签</h2>

    <p>HTML5引入了许多语义化标签，使网页结构更加清晰。</p>

</article>

在这个示例中，<article> 标签封装了一篇关于HTML5语义化标签的文章，内容独立且具备完整意义。

2. `<section>` 标签

语法

<section> 标签用于表示文档中的某个区域或部分，这个部分通常包含一个主题，并且可以包含多个 <article>。

使用场景

章节划分：用于文章、报告等文档的章节划分。
页面模块：用于网页的不同模块或部分，如功能块、服务介绍等。

示例代码

<section>
    <h2>HTML5 表单增强功能</h2>

    <p>HTML5 对表单进行了显著增强，增加了许多新特性。</p>

</section>

在这个示例中，<section> 标签表示一个关于HTML5表单功能的章节或区域，可以包含与表单相关的多种内容。

3. `<nav>` 标签

语法

<nav> 标签用于定义页面中的导航链接区域。

使用场景

主导航菜单：用于定义网页的主导航栏。
次级导航：用于定义页面中的次级导航部分，如文章目录、页内链接等。
面包屑导航：用于实现网页的面包屑导航，方便用户理解当前页面的位置。

示例代码

<nav>
    <ul>
        <li><a href="#home">首页</a></li>

        <li><a href="#about">关于我们</a></li>

        <li><a href="#services">服务</a></li>

        <li><a href="#contact">联系我们</a></li>

    </ul>

</nav>

在这个示例中，<nav> 标签定义了一个简单的导航菜单，包含了几个主要的导航链接。

4. `<aside>` 标签

语法

<aside> 标签用于表示页面内容的侧边栏，或与主内容相关的补充信息，如广告、相关链接等。

使用场景

侧边栏：用于网页的侧边栏，通常放置广告、推荐文章、热门标签等内容。
补充信息：用于提供与主内容相关的背景信息、引用、作者信息等。

示例代码

<aside>
    <h3>关于作者</h3>

    <p>本篇文章的作者是前端开发专家，专注于HTML5技术。</p>

</aside>

在这个示例中，<aside> 标签用于提供关于作者的补充信息，作为主内容的附加信息展示。

5. `<header>` 标签

语法

<header> 标签用于表示页面或页面部分的头部内容，通常包含标题、导航、logo等元素。

使用场景

页面头部：用于定义整个页面的头部区域，通常包括网站logo、主导航、搜索框等。
章节头部：用于定义某个章节或部分的头部，如文章的标题和作者信息等。

示例代码

<header>
    <h1>HTML5 新特性详解</h1>

    <nav>
        <ul>
            <li><a href="#introduction">简介</a></li>

            <li><a href="#forms">表单</a></li>

            <li><a href="#media">多媒体</a></li>

        </ul>

    </nav>

</header>

在这个示例中，<header> 标签表示页面的头部，包含了页面标题和导航链接。

6. `<footer>` 标签

语法

使用场景

页面底部：用于定义整个页面的底部区域，通常包括版权声明、页面链接、联系信息等。
章节底部：用于定义某个章节或部分的底部信息，如文章的结束语、作者简介等。

示例代码

<footer>
    <p>&copy; 2024 HTML5 学习笔记. 保留所有权利。</p>

    <ul>
        <li><a href="#privacy">隐私政策</a></li>

        <li><a href="#terms">服务条款</a></li>

        <li><a href="#contact">联系我们</a></li>

    </ul>

</footer>

六、HTML5 的多媒体标签

HTML5 引入了新的多媒体标签 <audio> 和 <video>，使网页开发者能够直接在网页中嵌入音频和视频内容，而无需借助外部插件。这些标签提供了丰富的属性和方法来控制媒体的播放、暂停、音量、进度等功能。

1. `<audio>` 标签

语法

<audio> 标签用于在网页中嵌入音频文件，支持多种音频格式如 MP3、WAV、OGG 等。

使用场景

背景音乐：为网页添加背景音乐。
音频播客：嵌入播客音频文件，用户可以在线收听。
语音朗读：在教育网站中嵌入语音朗读的音频文件，辅助学习。

常用属性

src：指定音频文件的路径。
controls：显示音频控制面板，如播放/暂停按钮、进度条、音量控制等。
autoplay：页面加载后自动播放音频。
loop：音频播放结束后自动重新播放。
muted：默认将音频静音。

示例代码

<audio controls>
    <source src="music.mp3" type="audio/mp3">
    <source src="music.ogg" type="audio/ogg">
    您的浏览器不支持 audio 标签。
</audio>

在这个示例中，<audio> 标签嵌入了一个音频文件，并提供了多个格式以确保跨浏览器的兼容性。用户可以通过显示的控件播放、暂停、调整音量等。

2. `<video>` 标签

语法

<video> 标签用于在网页中嵌入视频文件，支持多种视频格式如 MP4、WebM、Ogg 等。

使用场景

嵌入视频教程：在教育平台嵌入视频教程，用户可以直接观看。
产品展示：在电商网站中嵌入产品展示视频，以动态形式吸引用户。
用户生成内容：在社交媒体平台允许用户上传和嵌入自己拍摄的视频。

常用属性

src：指定视频文件的路径。
controls：显示视频控制面板，如播放/暂停按钮、进度条、音量控制、全屏按钮等。
autoplay：页面加载后自动播放视频。
loop：视频播放结束后自动重新播放。
muted：默认将视频静音。
poster：指定在视频加载或播放之前显示的预览图片。

示例代码

<video controls poster="poster.jpg">
    <source src="video.mp4" type="video/mp4">
    <source src="video.webm" type="video/webm">
    您的浏览器不支持 video 标签。
</video>

在这个示例中，<video> 标签嵌入了一个视频文件，并提供了多个格式和一个预览图像，以确保跨浏览器的兼容性和用户体验。用户可以通过显示的控件播放、暂停、调整音量、全屏观看视频等。

3. `<track>` 标签

语法

<track> 标签用于为 <video> 和 <audio> 元素添加字幕、章节标题或元数据。

使用场景

字幕文件：为视频添加字幕，支持多语言字幕文件切换。
章节导航：为视频或音频添加章节标记，便于用户快速跳转到特定内容。
元数据：为媒体文件添加描述、标签等额外信息，便于搜索和管理。

常用属性

src：指定字幕或章节文件的路径。
kind：指定轨道的类型，如 subtitles（字幕）、captions（显示的文字）、descriptions（描述性文字）、chapters（章节标题）、metadata（元数据）。
srclang：指定字幕文件的语言，如 en、zh 等。
label：为用户提供的字幕选择菜单中显示的标签文本。

示例代码

<video controls>
    <source src="video.mp4" type="video/mp4">
    <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">
    <track src="subtitles_zh.vtt" kind="subtitles" srclang="zh" label="Chinese">
    您的浏览器不支持 video 标签。
</video>

在这个示例中，<track> 标签为视频添加了两个字幕文件，一个是英文字幕，一个是中文字幕。用户可以通过播放器的字幕菜单选择合适的字幕。

4. `<embed>` 标签

语法

<embed> 标签用于嵌入外部资源，如多媒体对象或交互式内容，包括Flash动画、PDF文档、音频、视频等。

使用场景

嵌入PDF文件：在网页中嵌入PDF文档，用户可以直接浏览。
嵌入Flash动画：嵌入Flash游戏或动画（尽管Flash技术逐渐被淘汰）。
嵌入外部内容：在网页中嵌入其他网站或平台的交互式内容，如视频播放器、小工具等。

示例代码

<embed src="document.pdf" width="600" height="400" type="application/pdf">

在这个示例中，<embed> 标签嵌入了一个PDF文档，用户可以直接在网页中查看该文档。

七、HTML5 的离线与存储功能

HTML5 提供了一系列新的API来增强网页的离线能力和本地存储能力，这使得Web应用程序可以在无网络连接时依然保持部分功能，并且可以在本地保存数据以提高性能和用户体验。

1. `Application Cache`

语法

Application Cache 是HTML5提供的离线存储技术，允许开发者将网页资源（如HTML、CSS、JavaScript等）缓存到用户的设备中，当设备无法连接到互联网时，用户仍然可以访问这些缓存的内容。

使用场景

离线访问：使Web应用程序在无网络连接的情况下依然可用，如邮件客户端、新闻应用等。
提高性能：减少服务器请求次数，提高页面加载速度。

使用步骤

创建缓存清单文件（.appcache）：
- 清单文件应列出所有需要缓存的资源，并配置缓存策略。
在HTML文件中引用清单文件：
- 使用 manifest 属性将清单文件与HTML文件关联。
配置服务器：
- 确保服务器返回正确的MIME类型（text/cache-manifest）以识别缓存清单文件。

示例代码

<!DOCTYPE html>
<html manifest="example.appcache">
<head>
    <title>离线Web应用</title>

</head>

<body>
    <h1>这个应用程序可以离线访问</h1>

    <p>当没有网络时，您仍然可以查看此页面的内容。</p>

</body>

</html>

在这个示例中，HTML文档使用了 manifest 属性引用了缓存清单文件 example.appcache。通过配置该清单文件，用户可以在离线状态下访问页面内容。

注意事项

弃用与替代：Application Cache 已被标记为弃用技术，建议使用 Service Workers 作为替代方案，以实现更灵活和强大的离线能力。

2. `Local Storage` 和 `Session Storage`

语法

Local Storage 和 Session Storage 是HTML5提供的本地存储技术，允许Web应用程序在用户浏览器中存储数据。

Local Storage：用于持久存储，数据在浏览器会话结束后仍然存在，直到被显式删除。
Session Storage：用于临时存储，数据只在当前浏览器会话中存在，浏览器关闭后数据会被清除。

使用场景

保存用户设置：如主题选择、语言偏好等，使用 Local Storage 保存，用户下次访问时依然有效。
表单数据保存：在用户填写表单时，使用 Session Storage 临时保存数据，防止数据丢失。

操作方法

存储数据：
- localStorage.setItem('key', 'value');
- sessionStorage.setItem('key', 'value');
读取数据：
- localStorage.getItem('key');
- sessionStorage.getItem('key');

删除数据：

localStorage.removeItem('key');
sessionStorage.removeItem('key');

清空所有数据：

localStorage.clear();
sessionStorage.clear();

示例代码

<!DOCTYPE html>
<html>
<head>
    <title>Local Storage 示例</title>

    <script>
        function saveData() {
            localStorage.setItem('username', document.getElementById('username').value);
            alert('用户名已保存');
        }

        function loadData() {
            var storedUsername = localStorage.getItem('username');
            if (storedUsername) {
                document.getElementById('username').value = storedUsername;
                alert('用户名已加载');
            } else {
                alert('没有保存的用户名');
            }
        }
    </script>

</head>

<body>
    <h1>Local Storage 示例</h1>

    <label for="username">用户名：</label>

    <input type="text" id="username" />
    <button onclick="saveData()">保存</button>

    <button onclick="loadData()">加载</button>

</body>

</html>

在这个示例中，Local Storage 被用来保存和加载用户名。用户输入的用户名在点击保存按钮后会被存储在浏览器中，下次访问页面时可以通过加载按钮来恢复。

注意事项

数据大小限制：每个域名在 Local Storage 和 Session Storage 中存储的数据通常受到5MB左右的限制，具体取决于浏览器。
数据安全性：由于数据存储在客户端，敏感数据不应直接保存在 Local Storage 或 Session Storage 中。

3. `IndexedDB`

语法

IndexedDB 是HTML5提供的一种低级API，用于在客户端存储大量结构化数据。它允许开发者使用索引和事务来查询和管理数据。

使用场景

离线数据同步：在用户离线时将数据保存到 IndexedDB，当恢复网络连接后再同步到服务器。
复杂数据存储：适用于存储大量或复杂的结构化数据，如用户生成的内容、游戏进度、文件缓存等。

基本操作

打开数据库：使用 indexedDB.open() 方法打开或创建数据库。
创建对象存储：在数据库中创建存储对象（类似于表）。
添加数据：使用事务和请求对象来添加数据。
读取数据：通过事务和游标来查询数据。

示例代码

// 打开数据库
var request = indexedDB.open("myDatabase", 1);

request.onupgradeneeded = function(event) {
    var db = event.target.result;
    // 创建一个对象存储
    var objectStore = db.createObjectStore("users", { keyPath: "id" });
    // 创建索引
    objectStore.createIndex("name", "name", { unique: false });
    objectStore.createIndex("email", "email", { unique: true });
};

request.onsuccess = function(event) {
    var db = event.target.result;
    var transaction = db.transaction(["users"], "readwrite");
    var objectStore = transaction.objectStore("users");

    // 添加数据
    var request = objectStore.add({ id: 1, name: "Kevin", email: "kevin@example.com" });
    
    request.onsuccess = function(event) {
        console.log("用户数据已添加");
    };

    // 读取数据
    var getRequest = objectStore.get(1);
    getRequest.onsuccess = function(event) {
        console.log("用户数据:", getRequest.result);
    };
};

在这个示例中，使用 IndexedDB 创建了一个名为 myDatabase 的数据库，并在其中创建了一个 users 对象存储。数据通过事务被添加到数据库，并通过索引进行查询。

注意事项

浏览器兼容性：IndexedDB 是一种较新的技术，在不同浏览器中的支持可能有所不同，需要进行兼容性测试。
异步操作：IndexedDB 的所有操作都是异步的，需要使用回调函数或 Promise 来处理数据。

八、HTML5 的表单增强

HTML5 在表单方面做了大量改进，引入了新的输入类型、属性和元素，这大大提升了表单的用户体验和开发效率。

1. 新的输入类型（Input Types）

HTML5 为 <input> 标签增加了许多新的输入类型，这些类型能够更好地适应不同的数据输入需求，并且在大多数情况下提供了内置的验证功能。

常见的新输入类型

email：用于输入和验证电子邮件地址。

<input type="email" name="user_email" required>

当用户输入的内容不符合电子邮件格式时，浏览器会自动提示错误。

url：用于输入和验证URL地址。

<input type="url" name="website" required>

number：用于输入数字，可以通过 min 和 max 属性设置数值范围，并且可以设置步进值 step。

<input type="number" name="age" min="0" max="100" step="1">

range：用于选择范围值，通常显示为滑动条。

<input type="range" name="volume" min="0" max="100">

date、time、datetime-local：用于选择日期和时间。

<input type="date" name="birthday">
<input type="time" name="appointment_time">
<input type="datetime-local" name="meeting">

color：用于选择颜色，通常显示为颜色选择器。

<input type="color" name="favcolor">

使用场景

电子商务网站：在产品订购表单中使用 number、range、date 等类型，让用户输入和选择相关数据更加便捷。
用户注册：在注册表单中使用 email、url 类型，确保用户输入有效的电子邮件地址和个人主页URL。
预约系统：使用 date、time 类型让用户选择合适的预约日期和时间。

2. 新的表单属性

HTML5 为表单元素新增了一些属性，使开发者能够更轻松地控制表单的行为。

required：标记输入字段为必填项。

<input type="text" name="username" required>

当用户未填写必填项时，浏览器会提示用户填写。

placeholder：在输入字段中显示提示文本，当用户输入内容时提示文本消失。

<input type="text" name="search" placeholder="请输入搜索内容">

pattern：用于指定输入内容的正则表达式模式。

<input type="text" name="phone" pattern="\d{3}-\d{4}-\d{4}" placeholder="123-4567-8910">

autofocus：页面加载时自动聚焦到指定的输入字段。

<input type="text" name="first_name" autofocus>

autocomplete：用于控制浏览器是否允许自动填写表单，设置为 on 或 off。

<input type="text" name="username" autocomplete="off">

novalidate：禁用表单的自动验证功能，通常与 form 标签一起使用。

<form novalidate>
    <input type="email" name="email" required>
    <button type="submit">提交</button>

</form>

示例代码

<form action="/submit" method="post">
    <label for="username">用户名：</label>

    <input type="text" id="username" name="username" required placeholder="请输入用户名">
    
    <label for="email">邮箱：</label>

    <input type="email" id="email" name="email" required placeholder="请输入邮箱">
    
    <label for="age">年龄：</label>

    <input type="number" id="age" name="age" min="0" max="120" required>
    
    <label for="birthday">生日：</label>

    <input type="date" id="birthday" name="birthday">
    
    <label for="color">选择您喜欢的颜色：</label>

    <input type="color" id="color" name="color">
    
    <button type="submit">提交</button>

</form>

在这个示例中，表单元素使用了 required、placeholder、pattern 等属性，以提高用户填写表单的体验和数据的准确性。

3. 新的表单元素

HTML5 引入了几个新的表单元素，提升了表单的功能性和用户体验。这些新元素帮助开发者创建更具交互性的表单。

1. `<datalist>` 元素

<datalist> 元素用于提供 <input> 元素的预定义选项。当用户在输入框中键入内容时，会显示一个下拉列表，用户可以从中选择一个选项。

语法

<input list="browsers" name="browser">
<datalist id="browsers">
    <option value="Chrome">
    <option value="Firefox">
    <option value="Safari">
    <option value="Edge">
    <option value="Opera">
</datalist>

使用场景

<datalist> 适用于需要用户输入文本且希望提供建议或预定义选项的场景，如搜索框、浏览器兼容性测试等。

示例代码

<label for="browser">选择浏览器：</label>

<input list="browsers" id="browser" name="browser" placeholder="请输入或选择浏览器">
<datalist id="browsers">
    <option value="Chrome">
    <option value="Firefox">
    <option value="Safari">
    <option value="Edge">
    <option value="Opera">
</datalist>

2. `<output>` 元素

<output> 元素用于显示计算或脚本的结果。它通常与 JavaScript 一起使用，用于显示动态计算值。

语法

<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
    <input type="range" id="a" name="a" value="50">
    <input type="range" id="b" name="b" value="50">
    <output name="result" for="a b">100</output>

</form>

使用场景

<output> 元素适用于需要在表单中实时显示计算结果的场景，如动态定价、问卷评分计算等。

示例代码

<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
    <label for="a">输入A：</label>

    <input type="range" id="a" name="a" value="50" min="0" max="100">
    
    <label for="b">输入B：</label>

    <input type="range" id="b" name="b" value="50" min="0" max="100">
    
    <output name="result" for="a b">100</output>

</form>

3. `<progress>` 元素

<progress> 元素表示任务的完成进度。它通常用于展示任务（如文件上传或下载）的进度。

语法

<progress value="70" max="100"></progress>

使用场景

<progress> 元素适用于显示任务进度的场景，如表单提交、文件上传、安装过程等。

示例代码

<label for="file">文件上传进度：</label>

<progress id="file" value="32" max="100">32%</progress>

4. `<meter>` 元素

<meter> 元素用于表示在已知范围内的标量值或分数值。它与 <progress> 元素不同，后者表示任务的进度，而 <meter> 表示一个度量值（如温度、打分）。

语法

<meter value="0.6">60%</meter>

使用场景

<meter> 元素适用于表示度量值的场景，如打分系统、统计分析、性能指标等。

示例代码

<label for="disk">磁盘使用情况：</label>

<meter id="disk" value="0.6">60%</meter>

5. `<keygen>` 元素（已废弃）

<keygen> 元素用于生成用户证书密钥对，通常用于安全性高的网站。该元素已在最新的 HTML5 规范中被废弃，建议使用其他安全方式。

语法

<keygen name="name">

使用场景

过去用于生成加密密钥的场景，现在建议使用更现代的 Web Crypto API。

4. 表单验证（Form Validation）

HTML5 为表单提供了多种内置的验证机制，这些机制大大减少了对 JavaScript 的依赖，使开发者能够快速实现表单验证。

1. 必填字段验证

使用 required 属性来标记字段为必填项，如果用户未填写该字段，则无法提交表单。

语法

<input type="text" name="username" required>

2. 格式验证

可以使用 type 属性来指定输入字段的数据格式，例如 email、url、number 等类型的字段会自动验证用户输入的格式是否正确。

示例代码

<form>
    <label for="email">电子邮件：</label>

    <input type="email" id="email" name="email" required>
    
    <label for="website">个人网站：</label>

    <input type="url" id="website" name="website" required>
    
    <button type="submit">提交</button>

</form>

3. 自定义验证

使用 pattern 属性配合正则表达式进行自定义验证。

示例代码

<form>
    <label for="phone">电话号码：</label>

    <input type="text" id="phone" name="phone" pattern="\d{3}-\d{4}-\d{4}" placeholder="格式: 123-4567-8910">
    
    <button type="submit">提交</button>

</form>

4. 实时验证

HTML5 还支持 oninput 事件，可以用来在用户输入时实时验证表单字段。

示例代码

<form>
    <label for="password">密码：</label>

    <input type="password" id="password" name="password" required minlength="8" oninput="checkPassword()">
    
    <label for="confirm_password">确认密码：</label>

    <input type="password" id="confirm_password" name="confirm_password" required oninput="checkPassword()">
    
    <button type="submit">提交</button>

</form>

<script>
function checkPassword() {
    var password = document.getElementById("password").value;
    var confirmPassword = document.getElementById("confirm_password").value;
    if (password !== confirmPassword) {
        document.getElementById("confirm_password").setCustomValidity("密码不匹配");
    } else {
        document.getElementById("confirm_password").setCustomValidity("");
    }
}
</script>

5. 表单与多媒体的结合

HTML5 允许将表单与多媒体元素结合起来，实现更加丰富的用户交互。例如，可以结合 <canvas> 元素在表单中绘制图形或签名，也可以使用 <video> 元素与表单互动。

示例代码

<form>
    <label for="signature">签名：</label>

    <canvas id="signature" width="300" height="100" style="border:1px solid #000;"></canvas>

    <input type="hidden" id="signature_data" name="signature">
    
    <label for="feedback">视频反馈：</label>

    <video id="feedback" controls>
        <source src="feedback.mp4" type="video/mp4">
        您的浏览器不支持视频播放。
    </video>

    
    <button type="submit">提交</button>

</form>

<script>
// 签名功能示例
var canvas = document.getElementById("signature");
var ctx = canvas.getContext("2d");
var isDrawing = false;

canvas.addEventListener("mousedown", function(event) {
    isDrawing = true;
    ctx.moveTo(event.offsetX, event.offsetY);
});

canvas.addEventListener("mousemove", function(event) {
    if (isDrawing) {
        ctx.lineTo(event.offsetX, event.offsetY);
        ctx.stroke();
    }
});

canvas.addEventListener("mouseup", function() {
    isDrawing = false;
    document.getElementById("signature_data").value = canvas.toDataURL();
});
</script>

在这个示例中，用户可以在 <canvas> 上签名，并将签名数据作为表单的一部分提交。同时，表单中还嵌入了一个视频元素，用户可以观看视频并提供反馈。

总结

HTML5 的引入为 Web 开发带来了许多新功能和改进，使得开发者可以更轻松地构建现代化、交互性更强的 Web 应用。本文详细介绍了 HTML5 的新增标签、API、表单改进和多媒体支持，并通过丰富的代码示例展示了这些新特性的实际应用。
通过掌握这些 HTML5 的新功能，开发者可以提升用户体验，并充分利用现代浏览器提供的功能，创建更为丰富和强大的 Web 应用。

[HTML5] 一文读懂H5新特性的应用

文章目录

一、HTML5 新增语义化标签

1. <header> 标签

语法

使用场景

常用属性

示例代码

2. <footer> 标签

语法

使用场景

常用属性

示例代码

3. <nav> 标签

语法

使用场景

常用属性

示例代码

4. <article> 标签

语法

使用场景

常用属性

示例代码

5. <section> 标签

语法

使用场景

常用属性

示例代码

6. <aside> 标签

语法

使用场景

常用属性

示例代码

7. <main> 标签

语法

使用场景

常用属性

示例代码

8. <figure> 和 <figcaption> 标签

语法

语法

使用场景

常用属性

示例代码

二、HTML5 表单增强功能

1. 新的输入类型

示例代码

2. 表单的验证属性

示例代码

三、HTML5 多媒体标签

1. <audio> 标签

语法

使用场景

常用属性

示例代码

2. <video> 标签

语法

使用场景

常用属性

示例代码

3. <track> 标签

语法

使用场景

常用属性

示例代码

四、HTML5 全局属性

1. contenteditable 属性

语法

使用场景

示例代码

2. draggable属性

语法

使用场景

常用属性值

示例代码

3. hidden 属性

语法

使用场景

示例代码

4. data-* 自定义数据属性

1. `<header>` 标签

2. `<footer>` 标签

3. `<nav>` 标签

4. `<article>` 标签

5. `<section>` 标签

6. `<aside>` 标签

7. `<main>` 标签

8. `<figure>` 和 `<figcaption>` 标签

1. `<audio>` 标签

2. `<video>` 标签

3. `<track>` 标签

1. `contenteditable` 属性

2. `draggable属性`

3. `hidden` 属性

4. `data-*` 自定义数据属性

5. `spellcheck` 属性

1. `<article>` 标签

2. `<section>` 标签

3. `<nav>` 标签

4. `<aside>` 标签

5. `<header>` 标签

6. `<footer>` 标签

1. `<audio>` 标签

2. `<video>` 标签

3. `<track>` 标签

4. `<embed>` 标签

1. `Application Cache`

2. `Local Storage` 和 `Session Storage`

3. `IndexedDB`