前端复习 Eighth Day HTML5 新增标签和属性

1、常用新标签

header：定义文档的页眉头部

nav：定义导航的链接部分

footer：定义文档或节的页脚 底部

article：定义文章

section：定义文档中的节（section、区段）

aside：定义其所处内容之外的内容 侧边

datalist：标签定义选项列表，与input元素配合使用该元素

fieldset：元素可将表单内的相关元素分组，打包

---

2、datalist

	<datalist id="start"> 
		<option>刘晓庆</option>
		<option>郭富城</option>
		<option>刘德华</option>
		<option>张学友</option>
		<option>蔡依林</option>
		<option>刘若英</option>
		<option>成龙</option>
		<option>王菲</option>
	</datalist>

这个datalist和select相似，但是更加的强大，并且这个datalist列表，输入了一个相关值，会有自动的提示

---

3、fieldset
用户登录 用户名： 密码：
fieldset一般和legend一起用，fieldset会形成文字在线上的操作详情请看LF08.1

---

4、新增的input表单控件 有些功能，在一些浏览器上是无法使用的
（1）email，邮件控件，输入邮件格式，如果输入的不是邮件格式，会自动报错，在移动端上会直接弹出，符号键盘

			<form action="" >
				邮箱：<input type="email" />
				<input type="submit" value="登陆"/>
			</form>

（2）手机格式 tel

在pc端显示不明显，但是在移动端，会只能输入数字，出现数字键盘，电脑上不会限制使用数字或者其他的英文
（3）数字 number 数字： 只能输入数字
（4）链接地址 url url：还会记录曾经输入过的链接地址

<input type="url"/>

（5）搜索框
搜索：

<input type="search"/>

（6)区域 range
区域：

区域滑块可以直接拖动

（7)时间 time

time：

（8)日期 date

date：

（9)月份 month

month：

（10)颜色 color

color：
颜色可以自动在页面中调节，不需要给限定值

---

5、新增占位符焦点多选属性

(1)value：
用户登陆直接就显示在文本框内了，但是这些文字除非自己去删，不然是不会消失的

(2)placeholder：占位符

HTML5的新标签，相比于value更好用，文本点击后会消失，不会需要再次删除

(3)autofocus 焦点定位

不需要鼠标点击文本框。刷新后，焦点自动定位文本框

(4)上传头像
多文件上传 工具type要记得是file




两种格式都行

---

6、autocomplete 自动记录

（1）autocomplete 首先需要提交按钮

（2）这个表单必须给定他的名字

（3）autocomplete 有两个值，一个on，一个off，on代表记录已经输入的值，即开启了记忆功能，off代表关闭



姓名：

自动默认开启该功能

姓名：

可以选择开启或者关闭

---

7、required 必填项（限定内容不能为空）

一般的浏览器直接看不出来，一般配合js使用，火狐浏览器可以直接看出效果

---

8、accesskey 自定义光标
使用alt键+定义的数字或者字符，快速定义光标到指定位置