html5新特性

来源：互联网发布：sql 排序后加上序号编辑：程序博客网时间：2024/05/20 06:06

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>

验证输入字符满足4到10位，为a-z或者A-Z的字符，自动聚焦，必填

0 0