HTML5 简单归纳 -- 前端知识 （一）

HTML5简介

1.h5不是一个新语言，它是HTML语言第五次重大修改--版本

2.   2014年  h5

3.支持：目前所有的主流浏览器都支持h5，IE8以下不支持

4.特性：　　a:抛弃了h4中不常用的标签或属性（center/font等）  SEO优化--i/em  b/strong

　　　　　　b:新增了一些标签和属性（表单，多媒体（video，audio））

　　　　　　c:h5的网页结构比h4的网页结构更简单。语义化（SEO优化）

HTML5新增的type属性

将所有的<input>标签写在<form>标签中，form：收集用户输入的信息，提交服务器。

手机号码：<input type = "tel"  nume =""/>

电子邮箱：<input type = "email"  nume =""/>

URL地址：<input type = "url"  nume =""/>

数字框：<input type = "number"  nume =""  min="" max="" value=""/>

颜色：<input type = "color"  nume =""/>

范围：<input type = "range"  nume =""/>

HTML5表单中新增的属性

1. placaeholder = "提示信息"；当用户未输入值时显示的提示信息，占位符。

2. autofocus = "autofocus"； 自动聚焦。

3. autocomplete = "on"； --on:打开自动补全；

　　a:该输入框必须有name属性；

　　b:输入的值必须提交过一次。

4. required = "required"；设置必填项--若为空，阻止数据提交

5. multiple = "multiple"；选择多个文件。

6. type = "file"：文件；type = "password"：密码

下拉列表：input 元素与datalist配合使用。

1. datalist 只是用来定义一个下拉列表。

2. option 定义下拉列表具体的项，option可以是单标签，也可以是双标签。value：下拉列表的值，label：辅助说明。

3.获取值只需要通过获取input元素中的 value 值；

进度条：<progress  value = ""  max = ""></progress>

度量器：<meter min = ""   max = "" value = ""  low = ""  high = ""></meter >

　　low：最低值；high：最高值。

 

HTML5表单新增事件 

<form>
手机号：<input type = "tel" placeholder  = "请输入手机号" maxlength = "11" id = "phone"  pattern="^1[35678]\d{9}$" name = "phone"/>
</form>

　　document.getElementById("phone").oninralid = function(){

　　　　//对象。setCustomValidity("所要修改的提示信息");

　　}

1. onchange：当输入框的值发生改变的同时失去焦点才触发。

2. onblur：不管输入框的值是否发生改变，只要失去焦点就触发。

3. onkeyup：只要键盘某个按键弹起时就触发。

4. oninput：当输入框的值发生改变时立即去触发。