W3C标准1
20%的功能满足80%的需求
真我=爱、喜悦、和平
W3C标准
什么是W3C标准？
站点标准（Site Standard）不是某一个标准，而是一系列标准的集合。网页主要由三部分组成：结构 （Structure）、表现（Presentation）和行为（Behavior）。对应的标准也分三方面：结构化标准语言主要包括 XHTML和XML；表现标准语言主要包括CSS；行为标准主要包括对象模型（如W3C DOM）、ECMAScript等。这些 标准大部分由W3C起草和发布，也有一些是其他标准组织制订的标准，比如ECMA（European Computer Manufacturers Association）的ECMAScript标准。
W3C标准--html html5
什么是html？
HTML是用来制作网页的标记语言
HTML是Hypertext Markup Language的英文缩写, 即超文本标记语言
HTML语言是一种标记语言,不需要编译,直接由浏览器执行
HTML文件是一个文本文件,包含了一些HTML元素,标签等.
HTML文件必须使用html或htm为文件名后缀
HTML是大小写不敏感的,HTML与html是一样的
什么是语义化？
<基本上都是围绕着几个主要的标签，像标题（H1~H6）、列表（li）、强调（strong em）等等>
根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。
DOM是什么？
一、DOM全称
文档对象模型（Document Object Model）
二、DOM是什么
DOM就是一个编程接口，就是一套API。
DOM是针对HTML文档、XML等文档的一套API。就类似于JDBC是针对数据库的一套API一样。
三、DOM的用途
DOM 是用来访问或操作HTML文档、XHTML文档、XML文档中的节点元素。 现在基本上所有的浏览器都都执行了W3C发布的DOM规范，所以在浏览器上就可以用DOM的这些API。
四、DOM与其他技术的联系
JavaScript 可以通过 DOM 来访问和操作HTML文档所有的元素。
JavaScript是一种脚本语言，DOM是用来获得和操作HTML文档的节点属性。JavaScript通常是通过DOM来获得和操作HTML属性的。这就是二者的区别与联系。
Java代码
<script>
function test(){
window.alert("成功。");
}
</script>
<input type=button value="提交" onclick="test()">
把上述代码复制到一个文件里，改成.html扩展名后，打开此html文档，点击"提交"按钮会弹出"成功"对话框。
其中：
第1，2，4，5行是JavaScript代码。
第3行是DOM代码（此行一定不要混淆成是JavaScript代码）。这就是JavaScript调用DOM的例子。
第6行是html代码。
五、DOM详细说明
HTML文档是树状结构，根为；DOM也是树状结构，根为window或document对象。
所以DOM就可以把HTML以树状的形式呈现出来。
六、DOM的分类
核心 DOM：定义了一套标准的可以针对任何文档的对象。
HTML DOM：针对HTML文档的DOM。
XML DOM：针对XML文档的DOM。
七、DOM的级别Level
DOM0：不是W3C规范。
DOM1：开始是W3C规范。专注于HTML文档和XML文档。
DOM2：对DOM1增加了样式表对象模型
DOM3：对DOM2增加了内容模型 (DTD 、Schemas) 和文档验证。
2D 3D?
html5强化了3D功能
本地存储？
html5新增Web Storage
1、localstorage
<!DOCTYPE HTML>
<html>
<head>
<meta charset="gb2312">
<title>HTML5--本地存储LocalStorage</title>
<script type="text/javascript">
window.onload = function()
{
alert("当你关闭此页面或者关闭浏览器的时候，
localStorage中保存的数据不会消失，
也就是说重新打开此页面的时候，
点击获取数据，可以取到数据。")
//首先获得body中的3个input元素
var msg = document.getElementById("msg");
var getData = document.getElementById("getData");
var setData = document.getElementById("setData");
setData.onclick = function()//存入数据
{
if(msg.value)
{
localStorage.setItem("data", msg.value);
alert("信息已保存到data字段中");
}
else
{
alert("信息不能为空");
}
}
getData.onclick = function()//获取数据
{
var msg = localStorage.getItem("data");
if(msg)
{
alert("data字段中的值为：" + msg);
}
else
{
alert("data字段无值！");
}
}
}
</script>
</head>
<body>
<input id="msg" type="text"/>
<input id="setData" type="button" value="保存数据"/>
<input id="getData" type="button" value="获取数据"/>
</body>
</html>
2、SessionStorage
<!DOCTYPE HTML>
<html>
<head>
<meta charset="gb2312">
<title>HTML5--本地存储SessionStorage</title>
<script type="text/javascript">
window.onload = function()
{
alert("当你关闭此页面或者关闭浏览器的时候，
sessionStorage中保存的数据才会消失，
也就是说重新打开此页面的时候，点击获取数据，
将不会显示任何数据，刷新页面无效。
\r\n由此可以证明，sessionStorage的生命周期为，
某个用户浏览网站时，从进入到离开的这段时间。")
//首先获得body中的3个input元素
var msg = document.getElementById("msg");
var getData = document.getElementById("getData");
var setData = document.getElementById("setData");
setData.onclick = function()//存入数据
{
if(msg.value)
{
sessionStorage.setItem("data", msg.value);
alert("信息已保存到data字段中");
}
else
{
alert("信息不能为空");
}
}
getData.onclick = function()//获取数据
{
var msg = sessionStorage.getItem("data");
if(msg)
{
alert("data字段中的值为：" + msg);
}
else
{
alert("data字段无值！");
}
}
}
</script>
</head>
<body>
<input id="msg" type="text"/>
<input id="setData" type="button" value="保存数据"/>
<input id="getData" type="button" value="获取数据"/>
</body>
</html>
localstorage与sessionstorage区别
sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。
而localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。
html原本支持的cookie
cookie状态管理 连接地址:http://www.cnblogs.com/xyws/p/4840049.html
cookie 有三个致命缺点：
1.cookie 会包含进每一个 HTTP 请求，因此会减慢 web 应用程序，产生不必要的重复数据；
2.cookie 会包含进每一个 HTTP 请求，因此网络上发送的数据就不能加密（除非你的整个应用都是用的 SSL）
3.cookie 限制数据大小为 4 KB——这已经足以降低你的应用程序的速度，但是 4 KB 的大小有时候确实会捉襟见肘。
我们真正想要的是：
a.更大的存储空间
b.在客户端上的
c.不受页面刷新的影响
d.不需要提交到服务器
浙公网安备 33010602011771号