html5新特性（二十四课）

一、新增语义化标签

1、<header> 头部标签

含义：用于定义文档或者节（section）的页眉。通常包含网站标志、主导航栏等内容。

2、<nav> 导航标签

含义：用于定义导航链接的区域。它可以用于整个网站的导航，也可以用于页面内某个部分的导航。

3、<article> 内容标签

含义：代表文档、页面或者应用程序中独立的、完整的、可以独自被外部引用的内容。

4、<section> 定义文档某个区域

含义：用于定义文档中的节（section）或者段（segment）。它是一个通用的容器，用于对内容进行分组。通常在逻辑上相关的内容可以放在一个<section>标签中。

5、<aside> 侧边栏标签

含义：表示和页面主要内容关联度较低的内容，比如侧边栏、广告、引用、导航菜单的次要部分等。

6、<footer> 尾部标签

含义：用于定义文档或者节（section）的页脚。通常包含版权信息、联系方式、网站地图等内容。

二、新增音频标签

1、<audio> 音频标签

含义：用于在网页中嵌入音频内容 建议mp3

属性

1、autoplay属性：使音频在页面加载完成后自动播放

2、controls属性：如果添加该属性，浏览器会为音频生成一个基本的控制界面，方便用户操作音频播放、暂停和音量调节等

3、loop属性：让音频循环播放，即音频播放完后会自动从头开始播放

4、muted属性：将音频设置为静音状态

<audio src="音频地址" autoplay="autoplay" controls="controls" loop="loop"></audio>

2、<video> 视频标签

含义：用于在网页中嵌入视频内容，建议mp4

语法格式：<video src="文件地址"></video>

属性

1、autoplay属性：使视频在页面加载完成后自动开始播放(谷歌浏览器需要添加muted来实现)

2. controls属性：浏览器会显示一个基本的视频播放器控制条，包含播放 / 暂停按钮、音量调节滑块、进度条等常用控制功能，方便用户操作视频播放

3、loop属性：设置视频循环播放，即视频播放完一遍后会自动从头开始再次播放

4、poster属性：用来指定在视频开始播放前以及播放结束后显示的图像，可让页面在视频未播放时呈现出更好的视觉效果

5、muted 属性：用于将视频的音频输出设置为静音

6、height、width属性：设置视频的物理高度和宽度

 <video src="视频地址" autoplay="autoplay" muted="muted" loop="loop" poster="图片地址" controls="controls"></video>

三、新增input表单标签

1、email类型

含义与用途：用于接收电子邮件地址。当用户在该类型的输入框中输入内容时，浏览器会进行基本的格式验证。

2、url类型

含义与用途：用于输入网址。浏览器会对输入内容进行格式验证，例如检查是否以正确的协议（如 “http://” 或 “https://”）开头等。

3、tel类型

含义与用途：用于输入电话号码。不过，与email和url类型不同，它不会对电话号码格式进行严格验证，因为电话号码格式在全球各地差异较大。它主要是在语义上表明该输入框用于输入电话号码。

4、number类型

含义与用途：用于输入数字。它提供了一些方便的特性，如可以通过上下箭头来调整数字大小，并且可以设置数字的范围等属性。

5、range类型

含义与用途：用于创建一个滑动条来选择一个范围内的值。这对于用户直观地选择数值范围很有用，例如音量调节、亮度调节等场景。

6、date类型

含义与用途：用于输入日期。浏览器会提供一个日期选择器（在支持的浏览器中），方便用户选择日期，而不是手动输入。

7、time类型

含义与用途：用于输入时间。浏览器同样会提供一个时间选择器（在支持的浏览器中），方便用户选择具体的时间。

8、datetime - local类型

含义与用途：用于输入本地日期和时间。它结合了date和time的功能，让用户可以同时选择日期和时间。

9、week类型

含义与用途：用于选择一年中的第几周。浏览器会提供相应的选择器（在支持的浏览器中）来帮助用户进行选择。

10、month类型

含义与用途：用于选择一年中的月份。浏览器也会提供选择器（在支持的浏览器中）辅助用户选择。

11、search类型

含义与用途：用于创建一个搜索框样式的输入框。在语义上明确该输入框用于搜索操作。

12、color类型

含义与用途：用于创建一个颜色选择器。用户可以通过这个输入框直观地选择颜色，而不是手动输入颜色代码。

    <form action="">
        <ul>
            <li>email类型<input type="email"></li>
            <li>url类型<input type="url"></li>
            <li>tel类型<input type="tel" name="" id=""></li>
            <li>number类型<input type="number" name="" id=""></li>
            <li>range类型<input type="range" name="" id=""></li>
            <li>date类型<input type="date" name="" id=""></li>
            <li>time类型<input type="time" name="" id=""></li>
            <li>datetime - local类型<input type="datetime - local" name="" id=""></li>
            <li>week类型<input type="week" name="" id=""></li>
            <li>month类型<input type="month" name="" id=""></li>
            <li>search类型<input type="search" name="" id=""></li>
            <li>color类型<input type="color" name="" id=""></li>
            <li><input type="submit" name="" id=""></li>
        </ul>
    </form>

四、新增的表单属性

1、required属性

含义与用途：规定输入框为必填项。当用户提交表单时，如果必填的输入框为空，浏览器会阻止表单提交，并弹出提示框告知用户该字段是必填的

2、placeholder属性

含义与用途：用于在输入框中显示提示信息，当输入框获取焦点（用户点击输入框准备输入）时，提示信息会自动消失。它可以帮助用户了解该输入框期望输入的内容类型

3、autofocus属性

含义与用途：当页面加载完成时，使输入框自动获得焦点。这样用户无需手动点击输入框就可以直接开始输入内容，常用于页面上的主要输入框或者搜索框等

4、autocomplete 属性

含义与用途：用于控制浏览器是否自动填充表单字段。当设置为 “on”（默认值通常是 “on”）时，浏览器会根据用户之前输入过的内容或者存储的凭据（如用户名和密码）尝试自动填充表单字段；当设置为 “off” 时，浏览器不会进行自动填充

5、multiple属性

含义与用途：在 HTML5 表单中，multiple属性用于指定用户可以选择多个值。它可以应用于多种表单元素类型，主要用于增强用户在选择数据时的灵活性

    <form action=""><input type="search" autofocus="autofocus" required="required" placeholder="提示内容">
        <input type="file" multiple="multiple">
        <input type="submit" value="提交">
    </form>