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达到效果。
<!--
email: 验证邮箱必须是名字+@+域名格式
tel: 移动端时,打开手机键盘,网页端无效果
url: 验证以http://开头
number: 只能输入数字和小数点,不能输入其它字符,
value: 默认值,
max: 最大值,
min: 最小值.
search: 添加了清除图标,更人性化
range: 滑动块
value: 默认值,如不设置,则在最大和最小中间,
max: 最大值,
min: 最小值.
color: 颜色选取
----时间相关-----
time: 时间(时分秒)
date: 日期(年月日)
datetime: 大多数浏览器都不支持datetime, 用datetimelocal
-->
<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>
表单新增的其它属性
<!--
placeholder: 提示文本,提示占位
autofocus: 自动获取焦点
autocomplete: 自动提示 on/off, 也可用于表单,有两前提:
1. 必须成功提交过
2. input必须有name属性
required: 必须输入
pattern: 可以放入正则表达式的验证
*: 代表任意个
?: 代表0个或1个
+: 代表1个或多个
multiple: 放于type=file中,可以一次选择多个文件
multiple: 在type="email"中时,可以输入多个email, 各email之间用逗号分割
form: 通过设置form的id, 在form以外功过form="xx"引用,提交表单时,依旧可以把表单外的元素一起提交
-->
<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, 实用性不强
<!--
datalist: 选择有的列表项,输入没有的列表项;
设置datalist中的id, 在input中通过list="id of datalist" 相关联;
option value是主显示内容,label是提示作用;
option既可以是双标签,也可以是单标签;
datalist的浏览器兼容性不太好,不推荐使用。
-->
<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>