HTML5新标签及新特性

HTML5 新标签及新特性

HTML演变

文档类型设定

即 <!Doctype > 对应的属性值。

HTML , 对应早期的 HTML4.0.1, 其基本结构如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title>Document</title>
  </head>
  <body></body>
</html>

1
2
3
4
5
6
7
8

XHTML ，其基本结构如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title>Document</title>
  </head>
  <body></body>
</html>

1
2
3
4
5
6
7
8

HTML5 ，其基本格式如下

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
    />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body></body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13

在 webStorm 中，如果想查看上述三种类型的基本格式，可以按如下步骤：new > file > 输入文件名为 xxx.html > 分别输入 html:4s / html:xt / html:5 然后回车即可

如果想查看某个页面使用了两种 HTML，可以右击，然后选择查看网页源码 ，然后查看<!Doctype > 中的信息即可

字符设定

XHTML、HTML 中设置字符集时使用： <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
HTML5 中设置字符集时使用： <meta charset="UTF-8">

常用新标签

w3school 中文网站 (opens new window)

标签	作用
header	定义文档的页眉
nav	定义导航链接部分
footer	定义文档或者节的页脚/底部
article	定义文章
section	定义文档中的节（section/段落）
aside	定义其所处内容之外的内容/侧边
datalist	定义选项列表，与 input 配合使用该标签，两者通过 id 关联
fieldset	可将表单内的相关元素打包/分组, 与 legend 搭配使用

datalist 示例

datalist 中包裹 option
datalist 与 input 关联后，input 就具备的 select 的效果，同时具有了输入联想功能。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>inputlist</title>
  </head>
  <body>
    <input type="text" value="请输入姓名" list="names" />
    <datalist id="names">
      <option>张三</option>
      <option>李四</option>
      <option>王五</option>
    </datalist>
  </body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

fieldset 示例

fieldset 默认宽度满屏

效果图如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>fieldset</title>
  </head>
  <body>
    <fieldset>
      <legend>用户登录</legend>
      用户名:
      <input type="text" />
      <br />
      密　码:
      <input type="password" />
    </fieldset>
  </body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

新增的 input type 属性值

这些新增的类型，更加细化的限定了输入内容，如果输入格式不对，在提交的时候会自动给出相应提示
更多新增 type 参考 w3school

类型	示例	含义
email	`<input type="email">`	输入邮箱格式
tel	`<input type="tel">`	输入手机号
url	`<input type="url">`	输入 url
number	`<input type="number">`	输入数字
search	`<input type="search">`	搜索框（体现语义化）
range	`<input type="range">`	自由拖动的滑块
time	`<input type="time">`	输入小时分钟
date	`<input type="date">`	输入年月日
datetime	`<input type="datetime">`	输入日期时间
month	`<input type="month">`	输入月年
week	`<input type="week">`	输入星期年
color	`<input type="color">`	调出调色板

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>newInputType</title>
  </head>
  <body>
    <form action="http://www.baidu.com">
      email：
      <input type="email" />
      <br />
      tel：
      <input type="tel" />
      <br />
      url：
      <input type="url" />
      <br />
      number：
      <input type="number" />
      <br />
      search：
      <input type="search" />
      <br />
      range：
      <input type="range" />
      <br />
      time：
      <input type="time" />
      <br />
      date：
      <input type="date" />
      <br />
      datetime：
      <input type="datetime-local" />
      <br />
      month：
      <input type="month" />
      <br />
      week：
      <input type="week" />
      <br />
      color：
      <input type="color" />
      <br />
      <input type="submit" />
    </form>
  </body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

新增的 input 属性

属性	示例	含义
placeholder	`<input type="text" placeholder="请输入用户名"/>`	提示文本，参考 android TextView 的 hintText
autofocus	`<input type="text" autofocus>`	自动获取焦点
multiple	`<input type="file" multiple>`	多文件上传
autocomplete	`<input type="text">`	自动完成，取值 on、 off。 on 表示记录已经输入的值供下次自动完成。此外，必须有提交按钮，必须设置 name 属性，然后该属性才会生效
required	`<input type="text" required>`	必填项
accesskey	`<input type="text" accesskey="s">`	定义让控件获取焦点的快捷键，快捷键采用`alt + 字母`的形式

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>newInputAttr</title>
  </head>
  <body>
    <form action="form.html">
      <input type="text" placeholder="请输入用户名" />
      <br />
      <br />
      <!--可以简化为 <input type="text" autofocus/>  -->
      <input type="text" autofocus="autofocus" placeholder="自动获取焦点" />
      <br />
      <br />
      <input type="file" multiple />
      <br />
      <br />
      <input type="text" autocomplete name="identify" placeholder="下次自动补足输入内容" />
      <br />
      <br />
      <!--在火狐浏览器中，如果没有输入内容，点击输入框外部区域，边框会变红-->
      <input type="text" required placeholder="这是必填项" />
      <br />
      <br />
      <input type="text" accesskey="s" placeholder="获取焦点的快捷键为 alt+s" />
      <br />
      <br />
      <input type="submit" />
    </form>
  </body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

MAC 中，使用 WebStorm 编辑完上述代码然后部署到浏览器之后，不知道为什么 accesskey 一直不生效！！暂时没找到原因。

综合案例

效果图

实现代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>test1</title>
  </head>
  <body>
    <form action="">
      <fieldset>
        <legend>学生档案</legend>
        <label>
          姓　　名：
          <input type="text" placeholder="请输入学生姓名" />
        </label>
        <br />
        <label>
          手 机 号：
          <input type="tel" placeholder="请输入学生手机号" />
        </label>
        <br />
        <label>
          邮　　箱：
          <input type="email" />
        </label>
        <br />
        <label>
          所属学院：
          <input type="text" list="academy" />
        </label>
        <datalist id="academy">
          <option>JAVA学院</option>
          <option>前端学院</option>
          <option>PHP学院</option>
        </datalist>
        <br />
        <label>
          出生日期：
          <input type="date" />
        </label>
        <br />
        <label>
          语文成绩：
          <input type="number" max="100" min="0" value="0" />
        </label>
        <br />
        <label>
          数学成绩:
          <meter max="100" min="0" low="59" value="10"></meter>
        </label>
        <br />
        <label>
          英语成绩:
          <meter max="100" min="0" low="59" value="90"></meter>
        </label>
        <br />
        <input type="submit" />
        <br />
        <input type="reset" />
      </fieldset>
    </form>
  </body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62

多媒体标签

embed : 定义嵌入的内容
audio : 播放音频
video : 播放视频

embed

用来插入各种多媒体，格式可以是 Midi、Wav、 AIFF 、AU 、Mp3 等

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>embed</title>
</head>
<body>
<embed src="http://player.video.iqiyi.com/44cb2ab93ef163fea5a206e52da7c390/0/0/v_19rqyv6lfo.swf-albumId=1268727400-tvId=1268727400-isPurchase=0-cnId=3"
       allowFullScreen="true" quality="high" width="480" height="350" align="middle"
       allowScriptAccess="always" type="application/x-shockwave-flash"></embed>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12

上面示例代码中，embed 节点中的内容是直接从爱奇艺网站下复制的。做法是：找到一个视频 > 分享 > 点击向下的箭头（即更多）> 复制 html 代码 即可

audio (opens new window)

html5 通过 <audio></audio> 标签实现音频播放
audio 开始和结束标签之间可以嵌入文本，当浏览器不支持该标签时，该文本可以作为提示语。
audio 在不同浏览器中的兼容情况如下：

常用属性如下：

属性	含义
src	定义音频文件的路径
autoplay	自动播放
controls	显示默认播放控件
loop	循环播放
preload	页面初始化时就加载音频，autoplay 会覆盖该属性

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>audio</title>
  </head>
  <body>
    <!--使用方式1-->
    <audio src="../assets/audio/皇后大道东.mp3" autoplay="autoplay" controls="controls" loop="loop">
      提示语：您的浏览器不支持audio标签
    </audio>

    <br />

    <!--使用方式2: 通过 source 定义三种音频格式，从而达到不同浏览器上都能播放的情况-->
    <audio loop controls preload="auto">
      <source src="../assets/audio/皇后大道东.mp3" />
      <source src="../assets/audio/皇后大道东.ogg" />
      <source src="../assets/audio/皇后大道东.wav" />
      提示语：您的浏览器不支持audio标签
    </audio>
  </body>
</html>