html5新增的元素、属性

html5语义化

html5新增的元素语义化更好，结构更清晰，更利于维护，功能更强大。

我是图片

主体元素

HTML5中新增了几种结构元素，分别是section、article、aside、nav、time等。

section 元素

section：主要用于网页内容分块，如定义章节、页眉、页脚等。

1
2
3
4
5
6
7
8
9
<section>
	<h2>标题一</h2>
	<p>内容一</p>
</section>
<section>
	<h2>标题二</h2>
	<p>内容二</p>
</section>
...

article 元素

外部内容可以是来自一个外部的新闻提供者的一篇新的文章，或者来自 blog 的文本，或者是来自论坛的文本。亦或是来自其他外部源内容。

1
2
3
4
5
6
7
8
<articl>
	<h2>标题一</h2>
	<p>内容一</p>
</articl>
<articl>
	<h2>标题二</h2>
	<p>内容二</p>
</articl>

aside 元素

aside标签一般用于导航条、侧边栏、广告等。

1
2
3
4
<aside>
	<p>内容一</p>
	<p>内容二</p>
</aside>

nav标签主要用于导航结构

1
2
3
4
5
6
7
<nav>
	<ul>
		<li><a href="/home">主页</a></li>
		<li><a href="/article">文章</a></li>
		<li><a href="/about">关于我们</a></li>
	</ul>
</nav>

time 元素

time标签主要用于定义时间或日期。

1
<time>2017年5月23日</time>

非主体结构

非主体结构：分别有header、hgroup、footer、figure、address、。

header 元素

header一般用作页面头部区域块，也可以为每个区域块都加一个header元素。

1
2
3
4
5
<header>页面头部</header>
<section>
	<header>该区域头部</header>
	<p>内容</p>
</section>

hgroup 元素

hgroup用于对网页或区域块的标题进行分组。

1
2
3
4
5
6
7
<section>
	<hgroup>
		<h1>主标题</h1>
		<h2>子标题</h2>
	</hgroup>
	<p>内容</p>
</section>

####footer 元素

footer用于网页的底部或区域块的底部。

1
2
3
<header>头部</header>
<article>内容</article>
<footer>底部</footer>

figure 元素

figure用于图像、图表、代码等，移除后也不会对网页内容产生影响。

1
2
3
4
5
<h1>标题</h1>
<p>内容</p>
<figure>
	<img src="" alt="">
</figure>

address 元素

address用于显示联系信息。

1
2
3
4
<address>
	作者：xxx
	地址：xxxx
</address>

其他新增的元素

标签 描述
mark 标签定义带有记号的文本
source 定义媒体资源
source 定义媒体资源
ruby 定义注释
audio 定义声音内容，元素允许多个 source 元素
video 定义视频
canvas 定义图形容器，使用js来绘制图形
svg 可缩放矢量图形,使用XML格式定义图像

input的新特性

input的新type属性

类型 描述
color 定义拾色器
date 定义日期字段
datetime 定义日期字段
datetime-local 定义日期字段
month 定义日期字段的月
week 定义日期字段的周
time 定义日期字段的时
email 定义邮箱
number 定义带有 spinner 控件的数字字段
range 定义带有 slider 控件的数字字段
search 定义用于搜索的文本字段
tel 定义用于电话号码的文本字段
url 定义用于地址的文本字段 
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
<label>定义拾色器</label>
<input type="color"><br>
<label>定义图片按钮</label>
<input type="image"><br>
<label>定义日期字段</label>
<input type="date"><br>
<label>定义日期字段</label>
<input type="datetime"><br>
<label>定义日期字段</label>
<input type="datetime-local"><br>
<label>定义日期字段的月</label>
<input type="month"><br>
<label>定义日期字段的周</label>
<input type="week"><br>
<label>定义日期字段的时</label>
<input type="time"><br>
<label>定义邮箱</label>
<input type="email"><br>
<label>定义带有 spinner 控件的数字字段</label>
<input type="number"><br>
<label>定义带有 slider 控件的数字字段</label>
<input type="range"><br>
<label>定义用于搜索的文本字段</label>
<input type="search"><br>
<label>定义用于电话号码的文本字段</label>
<input type="tel"><br>
<label>定义用于地址的文本字段</label>
<input type="url"><br>

input的新属性

属性 描述
autofocus 页面加载时时获得焦点
list 指定一个datalist，作为下拉提示单
min/max 输入的最大/最小
step 每次递增step的值
multiple 可接受多个值的文件上传字段
pattern 于验证输入字段的模式
required 用于判断内容是否为空
placeholder 描述输入字段的提示信息 
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
<!-- 页面加载时时获得焦点 -->
<input type="text" autofocus>
<!-- 指定一个datalist，作为下拉提示单 -->
<form action="">
	<input type="text" list="select" required><br>	
	<datalist id="select">
		<option value="1">选项一</option>
		<option value="2">选项二</option>
		<option value="3">选项三</option>
	</datalist>
</form>
<!-- 
	min/max | 输入的最大/最小
	step | 每次递增step的值
-->
<input type="number" min=0 max=10 step=2>
<!-- 可接受多个值的文件上传字段 -->
<input type="file" multiple>
<!-- 
	pattern于验证输入字段的模式
	required用于判断内容是否为空
-->
<form action="">
	<input type="text" pattern="[a-z]{3}" required="">
	<input type="submit">
</form>
<!-- 描述输入字段的提示信息 -->
<input type="text" placeholder="请输入姓名">