HTML5基础学习
HTML5介绍HTML5 新增标签和属性表单新增的type属性表单新增的其它属性表单新增元素表单新增事件
HTML5介绍
H5不是新的语言，是HTML第五次重大修改后的版本。浏览器支持，所有主流浏览器（chromy, safari, firefox）IE9及以上。（有选择性地支持，并不是全部支持。 IE9把语义元素解析为为行级元素）注：IE8及以下不支持，想让IE8支持，有如下方法： 方法一： 手动创建语义标签，默认是行级元素，需要display:block转为块级元素。 方法二： 引入第三方插件 <script src=“../js/html5shiv.min.js”></script>。改变了用户与文档的交互方式，例如增加了多媒体标签， video, audio, canvas。增加了其他新特性: 语意特性，本地存储特性，多媒体，二维三维，特效（过渡，动画）。相对于h4 1. 进步: 摒弃了一些不合理，不常用的标签属性。 2. 新增了一些标记和属性 —— 表单。 3. 从代码角度而言，html5的网页结构代码更简洁。
HTML5 新增标签和属性
HTML5新元素
表单新增的type属性
需要注意：
type=“tel” 是为移动端打开手机键盘服务的，网页端无效果datetime目前浏览器不支持，可用datetime-local达到效果。
<form>
用户名:
<input type="text"> </br>
密码:
<input type="password"> </br>
邮箱:
<input type="email"> </br>
电话:
<input type="tel"> </br>
网址:
<input type="url"> </br>
数量:
<input type="number" value="1" max="100" min="1" /></br>
搜索产品:
<input type="search"></br>
范围:
<input type="range" value="50" min="0" max="100"> </br>
颜色:
<input type="color"> </br>
时间:
<input type="time"></br>
日期:
<input type="date"></br>
时间+日期:
<input type="datetime"></br>
时间+日期:
<input type="datetime-local"></br>
月份:
<input type="month"></br>
星期:
<input type="week"></br>
提交:
<input type="submit">
</form>
表单新增的其它属性
<form name="form" id="myForm">
用户名:
<input type="text" name="userName" placeholder="请输入用户名" autofocus autocomplete="on"></br>
电话:
<input type="tel" name="phoneNumber" required pattern="^(\+86)?1\d{10}$"></br>
文件:
<input type="file" name="file" multiple> </br>
邮箱:
<input type="email" name="email" multiple></br>
<input type="submit"> </br>
</form>
地址:
<input type="text" name="address" form="myForm">
表单新增元素
datalist：解决既可选择 list，又可输入的情况keygen : 传递公钥到服务器，浏览器基本不支持output: 显示，类似span, 实用性不强
<form>
专业:
<input type="text" name="major" list="majorList">
<datalist id="majorList">
<option value="英语" label="美/英式英语"></option>
<option value="法语" label="纯正法语"></option>
<option value="中文" label="普通话"></option>
</datalist>
<input type="submit">
</form>
input type="url"时， option中的value必须以http://开头，否则验证不过，没办法提交。
网址:
<input type="url" name="web" list="webList">
<datalist id="webList">
<option value="http://www.qq.com" label="QQ"></option>
<option value="http://www.sohu.com" label="搜狐"></option>
<option value="http://www.163.com" label="163"></option></datalist>
表单新增事件
oninput: 当input中的值发生改变时触发，注意区分和onkeyup的区别， onkeyup是当键盘弹起时调用，如果通过鼠标复制内容，则不会触发，多个键一起作用时，会触发多次。oninvalid: 当input中的值验证无效时触发
<script>
document.getElementById("userName").oninput = function() {
console.log("oninput:" + this.value);
}
document.getElementById("phoneNumber").oninvalid = function() {
console.log("请输入11位手机号码");
}
</script>
<body>
<form>
用户名:
<input type="text" name="userName" id="userName" /> </br>
电话:
<input type="tel" name="phoneNumber" id="phoneNumber" pattern="^1\d{10}$" /></br>
<input type="submit" />
</form>
</body>
