HTML5（HTML5简介、新增语义化标签、新增表单控件属性、新增输入类型、新增视频标签、新增音频标签、新增全局属性、兼容性问题）

文章目录

1. HTML5简介
2. 新增语义化标签
3. 新增表单控件属性
4. 新增输入类型
5. 新增视频标签
- 5.1 标签属性
- 5.2 示例代码
6. 新增音频标签
- 6.1 标签属性
- 6.2 示例代码
7. 新增全局属性
8. 兼容性问题

视频教程： 160_H5_简介

1. HTML5简介

HTML5（简称H5）是超文本标记语言（HTML）的第五次重大修改版本，于2014年10月由万维网联盟（W3C）完成标准制定。以下是HTML5的简介：

背景和发展：
- HTML5的开发工作始于2004年，经历了多年的草案阶段，最终在2014年10月正式发布
- HTML5是W3C与WHATWG（Web Hypertext Application Technology Working Group）合作的结果
设计目的：
- 主要为了在移动设备上支持多媒体，确保网页在各种设备上都能良好显示和运行
- 提供更加丰富的Web内容，无需额外插件
主要新特性：
- 引入了许多新的语义化标签，如<header>、<nav>、<article>、<section>、<footer>等，使网页结构更加清晰
- 支持多媒体元素，如视频和音频标签，简化了多媒体内容的嵌入和播放
- 提供了新的API，如地理定位、绘图、拖放等，增强了Web应用的功能
技术优势：
- HTML5简单易学，语法特征更加明显，结合了SVG的内容，可以更便捷地处理多媒体内容
- 跨平台设计，能够在不同类型的硬件（如PC、平板、手机、电视机等）上运行
应用广泛：
- HTML5在互联网中得到了非常广泛的应用，成为现代网页开发的重要标准

总的来说，HTML5是构建和呈现互联网内容的新一代标准，被认为是互联网的核心技术之一，为现代网页开发提供了全新的标准和强大的功能

2. 新增语义化标签

语义化标签不仅提高了网页的可读性和可维护性，还使得搜索引擎能够更好地理解页面内容，从而提高了网站的搜索引擎优化（SEO）效果

2.1 新增布局标签

<header>：通常用于页面或区段的头部，包含整个页面或区段的标题、logo、搜索框等信息
<nav>：用于定义页面的导航链接部分，通常包含一个或多个超链接
<section>：定义文档中的一个区段或章节，通常包含一个明确的主题
<article>：用于独立的内容，如博客条目、新闻故事、论坛帖子等，这些内容可以独立于页面其他内容进行阅读
<aside>：定义页面主区域内容之外的内容，如侧边栏，通常包含与页面内容相关的补充信息
<footer>：用于页面或区段的底部，通常包含版权信息、联系方式等

2.2 新增状态标签

视频教程：162_H5_新增状态标签

HTML5新增了一些用于表示状态的标签，这些标签可以帮助开发者更好地展示和表示应用中的状态信息。以下是两个主要的状态标签：

2.2.1 `<meter>`

<meter>用于显示已知范围内的标量值或分数值。常用属性包括：

value：当前值
min：值域的最小边界值
max：值域的最大边界值
low：定义低值区间的上限值
high：定义高值区间的下限值
optimum：指示最优/最佳取值

2.2.2 `<progress>`

<progress>用于显示任务的完成进度。常用属性包括：

value：当前进度值
max：任务的总进度值

2.2.3 示例代码

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>状态标签</title>
  <style>
      body {
      
      
          font-family: '微软雅黑', Arial, sans-serif;
          background-color: #f4f4f4;
          margin: 0;
          padding: 20px;
      }

      .container {
      
      
          max-width: 600px;
          margin: 0 auto;
          background-color: #ffffff;
          padding: 20px;
          box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      }

      h1 {
      
      
          text-align: center;
          color: #333333;
      }

      .status-box {
      
      
          margin-bottom: 20px;
          padding: 10px;
          background-color: #e7f3fe;
          border-left: 5px solid #2196F3;
      }

      .status-box h2 {
      
      
          margin-top: 0;
          color: #2196F3;
      }

      .status-box p {
      
      
          margin-bottom: 5px;
      }

      .slider {
      
      
          width: 100%;
          margin-top: 10px;
      }
  </style>
</head>
<body>
<div class="container">
  <h1>设备监控系统</h1>

  <div class="status-box">
    <h2>电压状态</h2>
    <p>当前电压：<span id="voltage-value">220</span>V</p>
    <meter id="voltage-meter" value="220" min="180" max="250" low="200" high="240" optimum="220"></meter>
    <input type="range" id="voltage-slider" class="slider" min="180" max="250" value="220" step="1">
  </div>

  <div class="status-box">
    <h2>温度状态</h2>
    <p>当前温度：25°C</p>
    <meter value="25" min="0" max="100" low="20" high="30" optimum="25"></meter>
  </div>

  <div class="status-box">
    <h2>系统升级进度</h2>
    <p>当前进度：75%</p>
    <progress value="75" max="100"></progress>
  </div>
</div>

<script>
  // 获取电压滑块和电压显示元素
  var voltageSlider = document.getElementById('voltage-slider');
  var voltageValue = document.getElementById('voltage-value');
  var voltageMeter = document.getElementById('voltage-meter');

  // 更新电压显示
  function updateVoltageDisplay(value) {
      
      
    voltageValue.textContent = value;
    voltageMeter.value = value;
  }

  // 添加事件监听器，当滑块值改变时更新显示
  voltageSlider.addEventListener('input', function() {
      
      
    updateVoltageDisplay(this.value);
  });
</script>
</body>
</html>

2.3 新增列表标签

datalist 标签在不同的浏览器中显示可能不同

大部分主流网站中搜索框的联想词列表并不是由 datalist 标签做的

2.3.1 `<datalist>`

<datalist>标签用于定义一个数据列表，通常与<input>元素配合使用，以提供一组预设的选项值。这些选项值可以在用户输入时显示为一个下拉列表，方便用户选择

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

2.3.2 `<details>`

<details>标签用于创建一个可折叠的详细信息展示框。用户可以点击以展开或收起内容

<details>
  <summary>点击查看详细信息</summary>
  <p>这里是详细的内容描述，默认是隐藏的，点击上面的标题可以展开或收起。</p>
</details>

2.3.3 `<summary>`

<summary>标签用于为<details>元素定义一个可见的标题。点击这个标题可以切换<details>的展开和关闭状态

<details>
  <summary>常见问题</summary>
  <ul>
    <li>问题1：...</li>
    <li>问题2：...</li>
  </ul>
</details>

2.3.4 示例代码

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>列表标签</title>
  <style>
      body {
      
      
          font-family: '微软雅黑', Arial, sans-serif;
          margin: 20px;
          background-color: #f4f4f4;
      }

      .container {
      
      
          max-width: 800px;
          margin: auto;
          background-color: #fff;
          padding: 20px;
          box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      }

      h1 {
      
      
          text-align: center;
          color: #333;
      }

      label {
      
      
          display: block;
          margin-top: 10px;
      }

      input, select {
      
      
          width: 100%;
          padding: 8px;
          margin-top: 5px;
          border: 1px solid #ddd;
          border-radius: 4px;
      }

      .product-list {
      
      
          margin-top: 20px;
      }

      .product-item {
      
      
          border-bottom: 1px solid #ddd;
          padding: 10px 0;
      }

      .product-item:last-child {
      
      
          border-bottom: none;
      }

      details {
      
      
          margin-top: 20px;
          background-color: #e9e9e9;
          padding: 10px;
          border-radius: 4px;
      }

      summary {
      
      
          font-weight: bold;
          cursor: pointer;
      }
  </style>
</head>
<body>
<div class="container">
  <h1>在线购物车</h1>

  <label for="product">选择商品：</label>
  <input type="text" id="product" list="products" placeholder="请选择商品">
  <datalist id="products">
    <option value="苹果手机">
    <option value="三星电视">
    <option value="小米平板">
  </datalist>

  <div class="product-list">
    <div class="product-item">
      <span>商品：苹果手机</span>
      <meter value="0.8" min="0" max="1" optimum="1">库存紧张</meter>
    </div>
    <div class="product-item">
      <span>商品：三星电视</span>
      <meter value="0.5" min="0" max="1" optimum="1">库存中等</meter>
    </div>
    <div class="product-item">
      <span>商品：小米平板</span>
      <meter value="0.2" min="0" max="1" optimum="1">库存充足</meter>
    </div>
  </div>

  <details>
    <summary>订单详情</summary>
    <p>订单号：123456789</p>
    <p>收货地址：北京市朝阳区某某街道123号</p>
    <p>联系方式：13800138000</p>
    <p>支付方式：在线支付</p>
    <p>订单状态：待发货</p>
  </details>
</div>
</body>
</html>

2.4 新增文本标签

在HTML5中，<ruby>、<rt> 和 <mark> 都是新增的语义化标签，它们各自有不同的用途和功能。以下是这三个标签的详细说明：

<ruby>：
- 用途：用于包裹需要注音的文本和对应的注音符号
- 场景：常用于东亚语言（如中文、日文、韩文）中的注音或注释
<rt>：
- 用途：用于包裹注音符号，必须嵌套在 <ruby> 标签内部
- 场景：与 <ruby> 标签配合使用，显示注音文本
<mark>：
- 用途：用于表示文本中的高亮或标记部分，通常用于突出显示文本中的关键词或重要内容
- 场景：适用于需要突出显示文本的任何情况，如搜索结果、重点内容等

示例代码

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>文本标签</title>
  <style>
      body {
      
      
          font-family: '微软雅黑', Arial, sans-serif;
          line-height: 1.6;
          margin: 20px;
      }

      .article-title {
      
      
          font-size: 24px;
          text-align: center;
      }
  </style>
</head>
<body>
<header>
  <h1 class="article-title">探索HTML5的新特性</h1>
</header>
<article>
  <p>HTML5引入了许多新的标签，以增强网页的语义化。例如，
    <mark>&lt;mark&gt;</mark>
    标签可以用来突出显示文本中的关键词。
  </p>
  <p>在东亚语言中，
    <ruby>汉字
      <rt>hanzi</rt>
    </ruby>
    的注音非常重要。HTML5通过
    <ruby>ruby
      <rt>标签</rt>
    </ruby>
    和
    <ruby>rt
      <rt>标签</rt>
    </ruby>
    提供了原生的支持。
  </p>
  <section>
    <h2>示例段落</h2>
    <p>下面是一个包含注音和关键词高亮的示例段落：</p>
    <p>在
      <ruby>北京
        <rt>Beijing</rt>
      </ruby>
      ，有许多著名的
      <mark>历史遗迹</mark>
      ，如
      <ruby>故宫
        <rt>Gugong</rt>
      </ruby>
      、
      <ruby>天坛
        <rt>Tiantan</rt>
      </ruby>
      等。
    </p>
  </section>
  <section>
    <h2>使用场景</h2>
    <p>
      <mark>搜索引擎</mark>
      常常使用
      <mark>&lt;mark&gt;</mark>
      标签来突出显示搜索结果中的匹配词语。
    </p>
    <p>在教育领域，
      <ruby>汉语
        <rt>Hanyu</rt>
      </ruby>
      学习者会用到
      <ruby>ruby
        <rt>和</rt>
      </ruby>
      <ruby>rt
        <rt>标签</rt>
      </ruby>
      来学习汉字的发音。
    </p>
  </section>
</article>
<footer>
  <p>本文档仅为示例，展示了HTML5中
    <mark>&lt;mark&gt;</mark>
    、
    <ruby>ruby
      <rt>和</rt>
    </ruby>
    <ruby>rt
      <rt>标签</rt>
    </ruby>
    的使用。
  </p>
</footer>
</body>
</html>

3. 新增表单控件属性

3.1 autocomplete

autocomplete：规定表单或输入域应该拥有自动完成功能

<form autocomplete="on">
    <input type="text" name="username" autocomplete/>
</form>

3.2 autofocus

autofocus：规定在页面加载时，域自动获得焦点

<input type="text" name="search" autofocus/>

3.3 form

form：用于关联表单外的表单元素，通过指定form的ID来关联

<form id="test">
    <input type="text" name="name"/>
    <input type="submit" value="提交"/>
</form>
<input type="text" name="confirm" form="test"/>

3.4 novalidate

novalidate：提交表单时不进行验证

<form novalidate>
    <input type="text" name="name"/>
    <input type="submit" value="提交"/>
</form>

3.5 required

required：规定表单控件的内容是必填项

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

3.6 pattern

pattern：规定表单控件的输入内容必须符合正则表达式定义的模式

<input type="text" name="zipcode" pattern="[0-9]{5}" title="五位数字邮政编码"/>

3.7 示例代码

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>表单控件属性</title>
  <style>
      body {
      
      
          font-family: '微软雅黑', Arial, sans-serif;
          background-color: #f4f4f4;
          color: #333;
          margin: 0;
          padding: 0;
      }

      .container {
      
      
          width: 80%;
          margin: 20px auto;
          padding: 20px;
          background-color: #fff;
          border-radius: 8px;
          box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      }

      h1 {
      
      
          text-align: center;
          color: #5a5a5a;
      }

      form {
      
      
          margin-top: 20px;
      }

      label {
      
      
          display: block;
          margin-bottom: 5px;
          color: #333;
      }

      input[type="text"],
      input[type="email"],
      input[type="password"],
      input[type="tel"],
      input[type="date"],
      input[type="url"],
      textarea {
      
      
          width: 100%;
          padding: 10px;
          margin-bottom: 20px;
          border: 1px solid #ddd;
          border-radius: 4px;
          box-sizing: border-box;
      }

      input[type="submit"] {
      
      
          width: 100%;
          padding: 10px;
          background-color: #5cb85c;
          color: white;
          border: none;
          border-radius: 4px;
          cursor: pointer;
      }

      input[type="submit"]:hover {
      
      
          background-color: #4cae4c;
      }

      .form-group {
      
      
          margin-bottom: 15px;
      }
  </style>
</head>
<body>
<div class="container">
  <h1>用户注册</h1>
  <form action="/submit-form" method="post" autocomplete="on" novalidate>
    <div class="form-group">
      <label for="username">用户名（必填）:</label>
      <input type="text" id="username" name="username" required="required" pattern="[a-zA-Z0-9]{5,}"
             title="用户名必须包含5个以上的字母或数字" autofocus="autofocus"/>
    </div>
    <div class="form-group">
      <label for="email">邮箱（必填）:</label>
      <input type="email" id="email" name="email" required="required" autocomplete="email"/>
    </div>
    <div class="form-group">
      <label for="password">密码（必填）:</label>
      <input type="password" id="password" name="password" required="required" pattern=".{8,}" title="密码至少8位"/>
    </div>
    <div class="form-group">
      <label for="birthdate">出生日期:</label>
      <input type="date" id="birthdate" name="birthdate"/>
    </div>
    <div class="form-group">
      <label for="phone">电话:</label>
      <input type="tel" id="phone" name="phone" pattern="^\+?\d{10,15}$" title="电话号码必须为10到15位数字"/>
    </div>
    <div class="form-group">
      <label for="website">个人网站:</label>
      <input type="url" id="website" name="website"/>
    </div>
    <div class="form-group">
      <label for="bio">个人简介:</label>
      <textarea id="bio" name="bio" rows="4" placeholder="请简要介绍自己"></textarea>
    </div>
    <input type="submit" value="注册"/>
  </form>
</div>
</body>
</html>

4. 新增输入类型

4.1 email

email：限制用户输入为邮箱格式，包含@符号和合法的邮箱后缀

<input type="email" name="email" required="required" pattern="w([-.]w)@w([-.]w).w([-.]w)"/>

4.2 url

url：限制用户输入为网址格式，必须包含http://或https://

<input type="url" name="url" required="required" pattern="[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(/.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+.?"/>

4.3 number

number：限制用户输入为数字，可以设置最小值、最大值和步进值

<input type="number" name="quantity" value="50" min="0" max="100" step="5"/>

4.4 range

range：显示为滑动条，用于选择一个范围值

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

4.5 search

search：基本功能与文本输入框相同，但可以提供更符合搜索场景的样式和用户体验

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

4.6 tel

与<input type="email">和<input type="url">不同，在提交表单之前，输入值不会被自动验证为特定格式，因为世界各地的电话号码格式差别很大

尽管tel类型的输入在功能上和text输入一致，但它们确实有用；其中最明显的就是移动浏览器（特别是在手机上），可能会选择提供为输入电话号码而优化的自定义键盘

tel：tel类型的<input>元素用于让用户输入和编辑电话号码

<input type="tel" id="usrtel" name="usrtel">

4.7 color

color：为用户提供更直观和便捷的颜色选择功能，增强用户体验

<input type="color" id="colorPicker">

4.8 date、month、week、time、datetime、datetime-local

date、month、week、time、datetime、datetime-local：日期和时间选择器

<input type="date" name="birthdate"/>
<input type="time" name="meetingtime"/>

4.9 示例代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>输入类型</title>
  <style>
      body {
      
      
          font-family: '微软雅黑', Arial, sans-serif;
          background-color: #f4f4f4;
          margin: 0;
          padding: 20px;
      }

      .profile-container {
      
      
          max-width: 800px;
          margin: 0 auto;
          background-color: #fff;
          padding: 20px;
          box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      }

      h2 {
      
      
          text-align: center;
          color: #333;
      }

      form {
      
      
          margin-top: 20px;
      }

      .form-section {
      
      
          padding-bottom: 15px;
          margin-bottom: 15px;
      }

      .form-section:last-child {
      
      
          border-bottom: none;
      }

      .form-group {
      
      
          margin-bottom: 10px;
      }

      .form-group label {
      
      
          display: block;
          margin-bottom: 5px;
          color: #555;
      }

      .form-group input {
      
      
          width: 100%;
          padding: 10px;
          border-radius: 4px;
          box-sizing: border-box;
      }

      .form-group input[type="range"] {
      
      
          width: 100%;
      }

      .form-group input[type="color"] {
      
      
          padding: 0;
          height: 40px;
      }

      .form-group input[type="submit"] {
      
      
          background-color: #5cb85c;
          color: white;
          border: none;
          cursor: pointer;
          font-size: 16px;
          padding: 10px 20px;
      }

      .form-group input[type="submit"]:hover {
      
      
          background-color: #4cae4c;
      }

      .clickable-input {
      
      
          cursor: pointer;
      }
  </style>
</head>
<body>
<div class="profile-container">
  <h2>个人资料设置</h2>
  <form>
    <div class="form-section">
      <h3>基本信息</h3>
      <div class="form-group">
        <label for="email">邮箱地址：</label>
        <input type="email" id="email" name="email" required pattern="w([-.]w)@w([-.]w).w([-.]w)"
               placeholder="请输入您的邮箱地址">
      </div>
      <div class="form-group">
        <label for="usrtel">电话号码：</label>
        <input type="tel" id="usrtel" name="usrtel" placeholder="请输入您的电话号码">
      </div>
    </div>
    <div class="form-section">
      <h3>网络信息</h3>
      <div class="form-group">
        <label for="url">个人网址：</label>
        <input type="url" id="url" name="url" required
               pattern="[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(/.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+.?"
               placeholder="请输入您的个人网址">
      </div>
    </div>
    <div class="form-section">
      <h3>偏好设置</h3>
      <div class="form-group">
        <label for="quantity">通知数量：</label>
        <input type="number" id="quantity" name="quantity" value="50" min="0" max="100" step="5"
               placeholder="请选择数量">
      </div>
      <div class="form-group">
        <label for="volume">音量调节：</label>
        <input type="range" id="volume" name="volume" min="0" max="100" step="1">
      </div>
      <div class="form-group">
        <label for="colorPicker">主题颜色：</label>
        <input type="color" id="colorPicker" name="color">
      </div>
    </div>
    <div class="form-section">
      <h3>日期和时间</h3>
      <div class="form-group">
        <label for="birthdate">出生日期：</label>
        <input type="date" id="birthdate" name="birthdate" class="clickable-input">
      </div>
      <div class="form-group">
        <label for="meetingtime">会议时间：</label>
        <input type="time" id="meetingtime" name="meetingtime" class="clickable-input">
      </div>
    </div>
    <div class="form-section">
      <h3>其他设置</h3>
      <div class="form-group">
        <label for="search">搜索偏好：</label>
        <input type="search" id="search" placeholder="请输入您常用的搜索内容" required>
      </div>
    </div>
    <div class="form-group">
      <input type="submit" value="保存设置">
    </div>
  </form>
</div>

<script>
  document.addEventListener('DOMContentLoaded', function () {
      
      
    const clickableInputs = document.querySelectorAll('.clickable-input');
    clickableInputs.forEach(input => {
      
      
        input.addEventListener('click', function (event) {
      
      
            // 确保点击事件的目标是输入框本身
            if (event.target === input) {
      
      
                this.showPicker();
            }
        });
    });
  });
</script>
</body>
</html>

5. 新增视频标签

视频教程：167_H5_新增视频标签

HTML5中新增的视频标签<video>，极大地简化了在网页中嵌入视频的操作。这个标签允许开发者轻松地播放视频，而无需依赖Flash或其他浏览器插件

5.1 标签属性

<video>标签具有多个属性，用于控制视频的播放和行为

属性	描述	接收值	示例
`src`	指定视频文件的路径; 必须是有效的URL地址	URL路径	`src="movie.mp4"`
`controls`	显示视频控件; 包括播放、暂停、音量控制、进度条等	无	`controls`
`autoplay`	视频在就绪后马上播放; 无需用户干预	无	`autoplay`
`muted`	视频的音频输出默认为静音;	无	`muted`
`loop`	视频播放结束后重新开始播放; 无限循环	无	`loop`
`poster`	视频加载时显示的图片; 通常用于视频封面或预览图	图片URL路径	`poster="image.jpg"`
`preload`	指定视频加载行为; 控制预加载的内容	`auto`, `metadata`, `none`	`preload="metadata"`

在HTML5的<video>标签中，preload属性用于指定视频在页面加载时应如何预加载。这个属性有三个可能的取值：

auto：浏览器将根据其算法和用户的网络状况决定是否预加载视频。通常，这意味着浏览器会预加载整个视频
metadata：这是preload属性的一个取值，当设置为metadata时，浏览器只预加载视频的元数据。元数据包括视频的时长、尺寸和文本轨道等信息，但不包括视频内容本身。这意味着用户在点击播放之前，页面不会下载视频文件的数据，从而节省带宽和加快页面加载速度
none：当设置为none时，浏览器不会预加载视频的任何部分，包括元数据。这意味着用户在点击播放之前，不会有任何数据被下载

因此，当preload属性设置为metadata时，它的意思是告诉浏览器仅预加载视频的元数据，而不是视频内容。这样做的好处是，可以让用户在视频开始播放之前就能看到视频的时长、分辨率等信息，同时避免了不必要的网络流量消耗

5.2 示例代码

<video width="320px" 
       controls 
       autoplay 
       muted 
       loop 
       src="movie.mp4"
       poster="image.jpg" 
       preload="metadata">
</video>

6. 新增音频标签

HTML5中新增的音频标签<audio>，使得在网页中嵌入音频变得更加简单和高效。使用这个标签，可以轻松地嵌入多种格式的音频文件

6.1 标签属性

<audio>标签具有多个属性，用于控制音频的播放和行为

属性	描述	接收值	示例
`src`	指定音频文件的路径; 必须是有效的URL地址	URL路径	`src="audio.mp3"`
`controls`	显示音频控件; 包括播放、暂停、音量控制、进度条等	无	`controls`
`autoplay`	音频在就绪后马上播放; 无需用户干预	无	`autoplay`
`muted`	音频的音频输出默认为静音;	无	`muted`
`loop`	音频播放结束后重新开始播放; 无限循环	无	`loop`
`preload`	指定音频加载行为; 控制预加载的内容	`auto`, `metadata`, `none`	`preload="metadata"`
在HTML5的`<audio>`标签中，`preload`属性用于指定音频在页面加载时应如何预加载。这个属性有三个可能的取值：

auto：浏览器将根据其算法和用户的网络状况决定是否预加载音频。通常，这意味着浏览器会预加载整个音频
metadata：当设置为metadata时，浏览器只预加载音频的元数据。元数据包括音频的时长、大小等信息，但不包括音频内容本身。这有助于节省带宽和加快页面加载速度
none：当设置为none时，浏览器不会预加载音频的任何部分，包括元数据。这意味着用户在点击播放之前，不会有任何数据被下载

6.2 示例代码

<audio controls 
       autoplay 
       muted 
       loop 
       src="audio.mp3"
       preload="metadata">
</audio>

7. 新增全局属性

HTML5引入了一些新的全局属性，这些属性可以应用于任何HTML元素，从而为网页设计和功能实现带来了更大的灵活性和便利

属性	描述
draggable	规定元素是否可拖动
dropzone	规定在拖动被拖动数据时是否进行复制、移动或链接
hidden	规定元素仍未或不再相关
spellcheck	规定是否对元素进行拼写和语法检查
contenteditable	规定元素内容是否可编辑
translate	规定是否应该翻译元素内容
contextmenu	规定元素的上下文菜单（在用户点击元素时显示）
data-	用于存储页面或应用程序的私有定制数据

8. 兼容性问题

问题类型	描述及解决方法
标签支持问题	HTML5引入的新标签（如`<article>`, `<header>`等）在旧版浏览器中可能不被识别。解决方法包括使用JavaScript或polyfill库，如html5shim框架
兼容性检测	旧版浏览器中HTML5新API可能不存在。解决方法包括使用Modernizr库检测HTML5特性支持，并根据结果调整代码逻辑
属性值支持问题	HTML5新属性值（如`<input>`标签的email、url等）在某些浏览器中可能不被支持。解决方法包括进行测试和降级处理
媒体支持问题	HTML5多媒体元素（如`<video>`、`<audio>`）在不同浏览器中的支持情况不同
CSS兼容性问题	不同浏览器对CSS的解析结果不同，导致显示效果不一致。解决方法包括使用CSS Reset工具（如Normalize.css）和CSS Hack技术
特定浏览器问题的解决方法	通过meta标签改变浏览器内核来做兼容，或者使用条件注释针对IE浏览器进行特定的处理

文章目录

1. HTML5简介

2. 新增语义化标签

2.1 新增布局标签

2.2 新增状态标签

2.2.1 <meter>

2.2.2 <progress>

2.2.3 示例代码

2.3 新增列表标签

2.3.1 <datalist>

2.3.2 <details>

2.3.3 <summary>

2.3.4 示例代码

2.4 新增文本标签

3. 新增表单控件属性

3.1 autocomplete

3.2 autofocus

3.3 form

3.4 novalidate

3.5 required

3.6 pattern

3.7 示例代码

4. 新增输入类型

4.1 email

4.2 url

4.3 number

4.4 range

4.5 search

4.6 tel

4.7 color

4.8 date、month、week、time、datetime、datetime-local

4.9 示例代码

5. 新增视频标签

5.1 标签属性

5.2 示例代码

6. 新增音频标签

6.1 标签属性

6.2 示例代码

7. 新增全局属性

8. 兼容性问题

猜你喜欢

目录

热门文章

2.2.1 `<meter>`

2.2.2 `<progress>`

2.3.1 `<datalist>`

2.3.2 `<details>`

2.3.3 `<summary>`