H5的特性
语义化标签
标签 | 描述 |
---|---|
header | 定义了文档的头部区域 |
footer | 定义了文档的尾部区域 |
nav | 定义文档的导航 |
section | 定义文档中的节(section、区段) |
article | 定义页面独立的内容区域 |
aside | 定义页面的侧边栏内容 |
detailes | 用于描述文档或文档某个部分的细节 |
summary | 标签包含 details 元素的标题 |
dialog | 定义对话框,比如提示框 |
2.新增表单控件
email:
邮箱
tel:
电话
url:
网址
number:
数字(min,max,step数字间隔,value)
range:
数字选择器(min,max,step数字间隔,value)
search:
搜索框
color:
颜色选择器
date:
选取 日 月 年
month
- 选取月 年
week
- 选取周和年
time
- 选取时间(小时和分钟)
datetime
- 选取时间、⽇、⽉、年(UTC 时间)date和time的组合
3.新增表单属性
placeholder:
输入框提示信息
autofocus:
指定表单获取输入焦点
required
:必填字段
pattern:
正则验证
form:
规定输入域所属的一个或多个表单(form属性所以用表单的id)
formaction:
重写表单的action属性
formmethod:
重写表单的method属性
autocomplete:
属性规定form或input域应该拥有自动完成功能
以往input中的name和value要随着form表单一起提交,form表单必须包裹input , 而现在可以通过input的form属性綁定
<form id="testform">
<input type="text" />
</form>
<input form=testform />
placeholder属性
<input type="text" placeholder="请输入密码" />
autofocus属性,页面只能有一个
<input type="text" autofocus />
还有type为email、number等,但是实际项目中一般使用自定义,所以这里不提。
4.新增表单验证
novalidate:
表单取消验证
formnovalidate:
submit元素取消验证
setCustomValidity:
自定义验证信息
总体来说,这些标签就是div标签的语义化转化,过去我们曾用div来包裹某个块或者说组件,现在h5使用这些标签实现语义化,有利于代码可读性和SEO。语义元素在IE6-8的兼容可以使用:
document.createElement('header');
document.createElement('nav');
来解决,但是这样js创建的新元素没有样式,需要在css中定义,或者直接通过插件http://www.bootcdn.cn/html5shiv/来解决。html5shiv 是一个针对 IE 浏览器的 HTML5 JavaScript 补丁,目的是让 IE 识别并支持 HTML5 元素。
本地存储
h5提供了sessionStorage
、localStorage
和indexedDB
加强本地存储。使用之前应该先判断支持情况:
if(window.sessionStorage){
//浏览器支持sessionStorage
}
if(window.localStorage){
//浏览器支持localStorage
}
localStorage和sessionStorage的区别在于sessionStorage基于会话,关闭浏览器之后存储消失。localStorage在各浏览器中上限不同,最低的是2.6MB, 所以开发上限为2.6MB, 当然这比cookie强太多,如果还是不够的话只能借助indexedDB, indexedDB上限是250MB。
localStorage和cookie另一个区别是没有过期时间,不过这个可以在localStorage中加一个时间字段轻松解决这个问题。
存取localStorage可能遇到的坑是跨域问题,因为localStorage是域内安全,也就是同一个域才能对localStorage进行存储,可以通过postMessage来解决。以下是它的常用应用场景:
var userData = {
name : 'sysuzhyupeng',
age: 24
}
localStorage.setItem('userDate', JSON.stringify(userData));
var newUserData = JSON.parse(localStorage.getItem('userData'));
另外,浏览器提供了storage事件来监听存储:
window.addEventListener('storage', showStorageEvent, true)
cookie、localStorage和sessionStorage三者之间的区别
1.生命周期
Cookie:可设置失效时间,默认是关闭浏览器后失效
sessionStorage:仅在当前网页会话下有效,关闭页面或浏览器后就会被清除
localStorage:除非手动清除,否则永久保存
2. 存放数据大小:
cookie:4KB左右
localStorage和sessionStorage:可以保存5MB的信息。
<fieldset id="filel">
<legend>学生档案</legend>
<div id="">
<p>姓名:</p>
<input type="text" name="" id="" splaceholder="请输入姓名" placeholder="请输入姓名"/>
<p>手机号码:</p>
<input type="tel" name="" id="" value="1"/>
<p>邮箱地址:</p>
<input type="email" name="" id="" value="1"/>
<p>所属学校:</p>
<input type="text" name="" id="" value="Android"/>
<p>入学成绩:</p>
<input type="number" name="" id="" value="0"/>
<p>基础水平:</p>
<meter value="0.3" style="width: 500px;height: 30px;"></meter>
<p>入学日期:</p>
<input type="datetime" name="" id="" value="2020/09/24" readonly="true"/>
<p>入学日期:</p>
<input type="date" name="" id="" value=""/>
<p>课程进度:</p>
<input type="range" name="" id="" value="10"/>
<input type="submit" name="" id="sub1" value="保存" />
</fieldset>