html5新特性-优快云博客

本文链接：https://blog.youkuaiyun.com/xiaobing_hope/article/details/50476750

本文介绍了HTML5新增的重要特性，包括简化文档类型声明、移除脚本与链接的type属性、引入header与footer标签、hgroup元素的使用、新增mark标签等功能。此外还涵盖了多媒体元素如audio和video的支持，并探讨了表单增强功能如placeholder、required属性等。

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

html5新特性

1. 新的文档类型

<!DOCTYPE html>

2. 脚本和链接不需要type

<link rel="stylesheet" href="index.css"/>
<script src="index.js"></script>

3. header和footer标签

<header></header>
<footer></footer>

不需要原来的div定义id或者class属性为header和footer

4. hgroup

用hgroup元素对标题元素进行分组，这样不会影响文件的大纲

<header>
    <hgroup>
        <h1>Recall fan page</h1>
        <h2>only for people who want the <mark>memory</mark> of a lifetime.</h2>
    </hgroup>
</header>

5. 标记元素(mark)

高亮显示元素

<h2>only for people who want the <mark>memory</mark> of a lifetime.</h2>

6. 图形元素（figure和figcaption）

将文字和图片内在联系起来。figure元素和figurecaption结合起来，可以语义化的将注释和相应的图片联系起来

<figure>
    <img src="../imgs/gift_0.png" alt="about image"/>
    <figcaption>
        <p>this is an image of something interesting.</p>
    </figcaption>
</figure>

7. 重新定义<small>

<small>fwoejferu我是地方一大个</small>

8. 占位符（placeholder）

<input type="text" placeholder="请输入用户名" required autofocus/>

9. 必要属性（required）

<input type="text" placeholder="请输入用户名" required autofocus/>

10. 文本框自动聚焦(autofocus)

<input type="text" placeholder="请输入用户名" required autofocus/>

11. audio支持（audio）

<audio src="file.mp3" autoplay="autoplay" controls="controls">当浏览器不支持audio标签时显示</audio>

当使用<audio>元素时，记得包含两种音频格式。Firefox想要.ogg格式的文件，而webkit浏览器则需要.mp3格式的

12. video支持

<video src="movie.ogg" controls="controls" preload="auto">当浏览器不支持video标签时显示</video>

13. 视频预载（preload）

当用户访问页面时，该属性使得视频得以预载，在video元素中加入preload属性

<video src="movie.ogg" preload></video>

14. 显示进度条（controls）

<video src="movie.ogg" preload controls></video>

15. 正则表达式

在标签处直接插入一个正则表达式（利用pattern属性）

<form action="" method="post">
    <label for="username">create a username</label>
    <input type="text" name="username" id="username" placeholder="4<>10" pattern="[a-zA-Z]{4,10}" autofocus required/>
    <button type="submit">submit</button>
</form>