在客户端存储数据
HTML5 提供了两种在客户端存储数据的新方法：
- localStorage - 没有时间限制的数据存储
- sessionStorage - 针对一个 session 的数据存储
之前，这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得 cookie 速度很慢而且效率也不高。
在 HTML5 中，数据不是由每个服务器请求传递的，而是只有在请求时使用数据。它使在不影响网站性能的情况下存储大量数据成为可能。
对于不同的网站，数据存储于不同的区域，并且一个网站只能访问其自身的数据。
HTML5 使用 JavaScript 来存储和访问数据
一：DOCTYPE声明:
二：html5 的常用 的全局属性：contentEditable属性、designMode属性、hidden属性、spellcheck属性、tabindex属性
contentEditable：使文本可编辑
<div contenteditable="true">这是一段可编辑的段落。请试着编辑该文本。</div>
designMode：designMode属性用来指定整个页面是否可编辑，当页面可编辑时，页面中任何支持上文所述的contentEditable属性的元素都变成了可编辑状态。designMode属性只能在JavaScript脚本里被编辑修改。该属性有两个值-"on"与"off".属性被指定为"on"时，页面可编辑；被指定为"off"时，页面不可编辑。使用JavaScript脚本来指定designMode属性的方法如下所示：
document.designMode="on"
hidden：使内容隐藏：<div hidden="hidden">是大法官</div>
spellcheck：支持英文语法的检查：<p contenteditable="true" spellcheck="true">这是可编辑的段落。请试着编辑文本。</p>
三：内容类型(ContentType):仍然是text/html
四：新增元素：
1、
2、article元素
3、aside元素
4、header元素
5、hgroup元素
6、footer元素
7、nav元素
<nav>
<ul>
<li><a href="">菜单1</a></li>
<li><a href="">菜单2</a></li>
<li><a href="">菜单3</a></li>
</ul>
</nav>
8、figure元素
<meter value="5" max=10 min=1 ></meter>
<script>
window.onload=function(){
var mer = document.getElementsByTagName("meter")[0];
mer.onclick=function(){
mer.value+=1;
}
}
新增其他元素:
1、video元素 （定义视频，eg:电影片段或者其他视频流）
<video src="movie.gg" controls="controls">video元素</video>
2、audio元素（定义音频，比如音乐或者其他音频流）
<audio src="someaudio.wav" controls="controls">audio元素</audio>
3、 embed 元素（用来插入各种多媒体，格式可以是Midi，Wav，aifF，AU，MP3）
<embed src="Beyond.mp3" controls="console">
4、mark元素 （用来在视觉上向用户呈现那些需要突出显示或者高亮显示的文字，典型的应用是在搜索结果中向用户显示搜索关键词）
<mark>东风也放花千树，更吹落，星如雨。宝马雕车香满路，凤萧声动，玉壶光转,一夜鱼龙舞,蛾儿雪柳黄金缕，笑语盈盈暗香去，众里寻他千百度，蓦然回首，那人却在 灯火阑珊处</mark>
5、progress元素（表示运行中进程，可以用progress元素来显示JavaScript中耗费时间的函数的进程）
<progress max=10 min=1 value=5></progress>
window.onload=function(){
var pro = document.getElementsByTagName("progress")[0];
var t = setInterval(function(){
if(pro.value==10) {
clearInterval(t);
document.body.removeChild(pro);
var spans = document.createElement("span");
spans.innerHTML="加载完成";
document.body.appendChild(spans);
}else {
pro.value+=1;
}
},1000);
}
6、time元素（表示日期或者时间，也可以同时表示两者）
<p>
我在 <time datetime="2008-02-14">情人节</time> 有个约会。
</p>
便于搜索引擎搜索。当搜索引擎搜索该网页时，知道这个标签里面的文本是和事件有关的的，不是普通的文本内容。也可用这个标签实现自 动更新内部文本、
<rp> 标签在 ruby 注释中使用，以定义不支持 ruby 元素的浏览器所显示的内容。
HTML5: <ruby>漢 <rt><rp>(</rp>ㄏㄢˋ<rp>)</rp></rt></ruby>HTML4: noneHTML5: <ruby>漢 <rt> ㄏㄢˋ </rt></ruby>HTML4: none
9、wbr元素(软换行)
<p>asfdfdfasdfasdfasdfasdfasdfasdfasdfasdfasdfa<wbr>ggdfasdfasdfasdfdfasdfasdfasdfasdfasdfasdfa</p>
10、<!-- canvas --> <canvas id="myCanvas" width="200" height="200"></canvas>
11、<command> 标签定义命令按钮，比如单选按钮、复选框或按钮。
<command onclick=cut()" label="cut">
12、datalist（进阶检索功能与input连用）
<input list="browsers"> <datalist id="browsers"> <option value="Internet Explorer"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"> </datalist>
消除input框右侧的倒三角
input::-webkit-calendar-picker-indicator {
display: none;
-webkit-appearance: none;}
13、datagrid构建树形结构
<datagrid>
<ol>
<li> (datagrid row 0) </li>
<li> (datagrid row 1)
<ol style="list-style-type:lower-alpha;">
<li> (datagrid row 1,0) </li>
</ol>
</li>
<li> (datagrid row 2) </li>
</ol>
</datagrid>
14、keygen（生成秘钥）
<form action="demo_keygen.asp" method="get">
Username: <input type="text" name="usr_name" />
Encryption: <keygen name="security" />
<input type="submit" />
</form>
15、output元素
<script type="text/javascript">
function write_sum()
{
x=5
y=3
document.forms["sumform"]["sum"].value=x+y;
}
</script>
<body onload="write_sum()">
</form> -->
<form action="" method="get" name="sumform">
<output name="sum"></output>
</form>
</body>
16、input（自带校验）
<!-- input -->
<form action="">
<input type="email"><br>
<input type="url"><br>
<input type="number"><br>
</form>
<input type="range" min="0" max="255" style="height:100px;width:400px;background:yellow;" onchange="change()" id="range">
<input type="text" id="show">
function change(){
var num=document.getElementById("range");
var location=document.getElementById("show");
location.value=num.value;
}
时间
<form action="">
<input type="date"><br>
<input type="month"><br>
<input type="week"><br>
<input type="time"><br>
<input type="datetime"><br>
<input type="submit" value="提交">
</form>
<input type="datetime"><br>
<input type="datetime-local"><br>
新增属性
1、autofocus
<!-- autofocus自动获得焦点 -->
<form action="">
<p><label>Search:<input name="search" autofocus></label></p>
</form>
3、可以对input output select textarea button fieldset指定form属性声明它属于哪个表单，然后可以放在表单任何位置 form=“表单Id”
4、可以对text textarea设置required属性提交时进行非空验证
<input type="text" required="required"><br>
<input type="textarea" required="required"><br>
5、重新加载当前页配置class="reload"
6、对input、form元素新增属性autocomplete 、min、max、multiple、pattern、step
autocomplete ：属性规定表单是否应该启用自动完成功能。 autocomplete="on"
自动完成允许浏览器预测对字段的输入。当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项。
注释：autocomplete 属性适用于 <form>，以及下面的 <input> 类型：text,search,url,telephone,email,password,datepickers,range 以及 color。
multiple: <input type="file" name="img" multiple="multiple" />
pattern:格式验证pattern="正则表达式"
7、input、与button元素新增了新属性formaction、formenctype、formmethod、formtarget,novalidate与target属性
formaction:会禁用form的action属性，使表单以不同方式提交
<form action="demo_form.asp" method="get">
First name: <input type="text" name="fname" /><br />
Last name: <input type="text" name="lname" /><br />
<input type="submit" value="Submit" /><br />
<input type="submit" formaction="demo_admin.asp" value="Submit as admin" />
</form>
formenctype：会禁用表单的enctype属性，使表单按不同的编码方式提交
<form action="demo_post_enctype.asp" method="post">
First name: <input type="text" name="fname" /><br />
<input type="submit" value="Submit" />
<input type="submit" formenctype="multipart/form-data" value="Submit" />
</form>
formtarget：提交到不同的目标窗口
First name: <input type="text" name="fname" /><br />
Last name: <input type="text" name="lname" /><br />
<input type="submit" value="Submit" />
<input type="submit" formtarget="_blank" value="Submit" />
</form>
8、为fieldset元素提供了disabled属性使其子元素禁用
<fieldset> 标签将表单内容的一部分打包，生成一组相关表单的字段。<fieldset> 标签没有必需的或唯一的属性。
当一组表单元素放到 <fieldset> 标签内时，浏览器会以特殊方式来显示它们，它们可能有特殊的边界、3D 效果，或者甚至可创建一个子表单来处理这些元素。
<fieldset form="iceform">
<legend>Personalia:</legend>
Name: <input type="text" name="usrname"/><br />
Email: <input type="text" name="usrmail" disabled="disabled" /><br />
Date of birth: <input type="text" name="usrdate" />
</fieldset>
9、提供了属性contentmenu:上下文菜单，单击鼠标右键自定义菜单，但是仅限于火狐浏览器,type有三个值：content list toolbar
menuitem有三个属性值：label， icon，onclick
style type="text/css">
#menu{
width:100px;
height:100px;
background-color: red;
}
</style>
<div id="menu" contextmenu="one"></div>
<menu id="one" type="context"> <menuitem label="我是第一个菜单" icon="4444.jpg" onclick="(function (){ location.href='http://baidu.com'})()"></menuitem> </menu>
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
