<script type="text/javascript" src="js/jquery.min.js"></script>
<script src="js/main.js" type="text/javascript"></script>
页面：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />
<title>WEAVER 10th Year</title>
<meta name="description" content="WEAVER" />
<!--<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="-1">-->
<meta name="format-detection" content="telephone=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!--<link rel="apple-touch-icon" sizes="57x57" href="images/logo/icon_57.jpg">
<link rel="apple-touch-icon" sizes="72x72" href="images/logo/icon_72.jpg">
<link data-logo="" rel="apple-touch-icon" sizes="114x114" href="images/logo/icon_114.jpg">-->
<!--<link rel="stylesheet" href="css/swiper.css">-->
<style type="text/css">
*{margin:0padding:0}body{background:
#66ceffmargin:0font-family:Arial,Helvetica,sans-seriffont-size:13pxline-height:1.5}.swiper-container{height:1008pxwidth:640px}.device{width:640pxheight:automargin:0
autoposition:relativeoverflow:hidden}.wiper-container{height:au
towidth:640pxoverflow:hidden}img{display:blockborder:0}.hide{display:none}.rel{position:relative}.abs{position:absolute}.swiper-slide{width:640pxheight:1008px}.swiper-slide
div{position:absolutewidth:100%height:100%left:0top:0z-index:9}div.bg{tex
t-align:centerz-index:9}div.main{z-index:2}div.draw{opacity:0}div.resize
img{width:0bottom:0right:0}div.down
img{width:0bottom:0right:0}div.info{left:640px}.WEAVER-audio .music p
span{background:url(images/music.png) no-repeat 0
0background-size:cover
cursor:pointer}.WEAVER-audio{top:1%right:1%z-index:999max-width:50px}.WEAVER-audio
.music p{width:100%height:100%}.WEAVER-audio .music p
span{display:nonewidth:100%height:100%}.WEAVER-audio .music p
span:first-child{display:block}.WEAVER-audio .music audio{h
eight:0width:0opacity:0}.WEAVER-audio
.music p span.audio_open{background-position:-100% 0}.WEAVER-audio
.music p span.audio_close{background-position:0
0}.loading{text-align:centerheight:128pxwidth:100%z-index:99top:0left:0}.loading
img{width:128pxma
rgin:0
auto}div.videocontroller,div.video{bottom:0left:0height:39%width:100%z-index:9}div.video{z-index:10}.citylist{width:50%height:23%z-index:9top:30.75%left:25%}.citylist
a{display:blockfloat:leftwidth:33%height:25%overflow:hiddentext-inde
nt:-200%}
.topShare { opacity:0display:none}.light{ cursor:pointerposition:
absoluteleft: -180pxtop: 0width: 180pxheight: 90px
background-image:
-moz-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.5),rgba(255,255,255,0))
backg
round-image:
-webkit-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.5),rgba(255,255,255,0))
transform: skewx(-25deg)-o-transform: skewx(-25deg)-moz-transform:
skewx(-25deg)-webkit-transform: skewx(-25deg)}
</style>
<meta name="viewport" id="viewport" content="width=device-width, initial-scale=0.5, maximum-scale=1.0">
<script async="" src="js/analytics.js"></script><script type="text/javascript">
var phoneWidth = parseInt(window.screen.width)
var phoneScale = phoneWidth/640
var ua = navigator.userAgent
if (/Android (\d+\.\d+)/.test(ua)){
if (phoneWidth > 640) {
document.write('<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">')
}
} else {
document.write('<meta name="viewport" content="width=device-width, user-scalable=no, target-densitydpi=device-dpi">')
}
</script>
</head>
<body>
<div id="loading" class="loading"><img style="margin: auto" src="images/load.gif"/></div>
<div class="device rel" id="device">
<div class="swiper-container" id="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide rel"><div
class="main"><img src="images/index.gif"></div><div
class="bg rel"><div id="light"><img
src="images/light.png"></div></div></div>
<div class="swiper-slide rel">
<div class="main"><img src="images/page1.jpg"></div>
<div class="bg rel"><div class="draw"><img src="images/page1-2.png"></div></div>
</div>
<div class="swiper-slide rel">
<div class="main"><img class="lazy" data-original="images/page2.jpg"></div>
<div class="bg rel"><div
class="draw"><img class="lazy"
data-original="images/page2-2.gif"></div></div>
</div>
<div class="swiper-slide rel">
<div class="main"><img class="lazy" data-original="images/page3.jpg"></div>
<div class="bg rel"><div class="draw"><img
class="lazy" data-original="images/page3-2.gif"></div><div
class="info"><img class="lazy"
data-original="images/page3-3.png"></div></div>
</div>
<div class="swiper-slide rel">
<div class="main"><img class="lazy" data-original="images/page4.jpg"></div>
<div class="bg rel"><div class="draw"><img
class="lazy" data-original="images/page4-2.png"></div><div
class="info"><img class="lazy"
data-original="images/page4-3.png"></div></div>
</div>
<div class="swiper-slide rel">
<div class="main"><img class="lazy" data-original="images/page5.jpg"></div>
<div class="bg rel"><div class="draw"><img
class="lazy" data-original="images/page5-2.gif"></div><div
class="info"><img class="lazy"
data-original="images/page5-3.png"></div></div>
</div>
<div class="swiper-slide rel">
<div class="main"><img class="lazy" id="cityMain1" data-original="images/WEAVER_city_1.jpg"></div>
<div class="bg rel"><div
class="draw"><img class="lazy" id="cityMark1"
data-original="images/WEAVER_city_1.png"></div><div
class="topShare" id="topShare"><img class="lazy"
data-original="images/share.jpg"></div></div>
</div>
</div>
</div>
</div>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=ri[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date()a=s.createElement(o),
m=s.getElementsByTagName(o)[0]a.async=1a.src=gm.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga')
ga('create', 'UA-49138262-1', 'WEAVER.cn')
ga('send', 'pageview')
</script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
!window.jQuery &&document.write('<scr' + 'ipt
type="text/javascript" src="js/jquery-1.8.2.js"></scr' +
'ipt>')
</script>
<script>
function gaEventgo(ev, mark){ ga('send', 'event', ev , mark)}
$(document).ready(function(e) {
var _topShare = $("#topShare")
var _lightShow = $("#light"), _tmp = 0
var
interLight = setInterval(function(){ if(++_tmp>6) {
clearInterval(interLight)_lightShow.hide()}
_lightShow.animate({opacity:0}, 1000 ).animate({opacity:1}, 1000)},
2000)
$("#cityMark1").on('click', function(){ _topShare.show().animate({opacity:1} ,{duration:800})})
_topShare.on('click', function(){ _topShare.hide()})
$("#videocontroller").on('click',function(){ gaEventgo('video', 'player')})
})
</script>
<script src="js/main.js" type="text/javascript"></script>
</body>
</html>
1.什么是web标准？首先要明确一个概念。我们本书讲的web标准，不是指XML，而是指为了实现大量HTML信息向XML标准的过渡，W3C和ECMA制定的一系列的技术规范，目前主要包括XHTML1.0、CSS2.0、DOM1.0和ECMA JavaScrit。web标准不仅仅是一个规范，而是一系列规范的总称。
按这些规范制作的网页，符合XML格式规范，内容与表现相分离，将使你的页面数据在以后可以被分享、交换和重用。
下面，让我们一起了解一些重要的基础知识。如果你已经掌握，可以跳过直接阅读第二节
。
2. 什么是w3c？
W3C是“World Wide Web Consortium”的缩写，中文称万维网组织。是一个专注于“领导和发展web技术”的国际工业行业协会。它由万维网发明者Time Berners-Lee领导，成立与1994年。W3C已经有超过500家的会员--包括微软、美国在线(Netscape的母公司)、苹果电脑、 Adobe、Macromedia、SUN 以及各类主流硬件、软件制造商和电信公司。学会主要研究由三家学术机构主理--美国麻省理工学院(MIT)、法国的欧洲信息与数学研究论坛 (ERCIM)、日本的应庆大学(KEIO)。
W3C主要工作是研究和制定开放的规范(事实上的标准)，以便提高web相关产品的互用性。W3C的推荐规范的制定都是由来自于会员和特别邀请的专家组成的工作组完成。工作组的草案(Drafts)在通过多数相关公司和组织同意后提交给W3C理事会讨论，正式批准后才成为“推荐规范 (Recommendations)”发布。更多的信息您可以访问W3C的网站：www.w3.org
web标准的优势
5.1 易用性
用web标准制作的页面，对搜索引擎更加“透明”，因为良好清晰的结构使得搜索引擎能够方便的判断与评估信息，从而建立更精确的索引。按web标准制作的页面也可以在更老版本的浏览器中正常显示基本结构，即使CSS/XSL样式无法解析，它也能显示出完整的信息和结构。
符合web标准的页面也很容易被转换成其他格式文档，例如数据库或者word格式,也容易被移植到新的系统--硬件或者软件系统，比如网络电视、PDA等等。这是XML天生具有的优势。
符合web标准的页面也具有天生的“易用性(accessibility)”,不仅仅是普通浏览器可以阅读，那些有残疾的人们也可以通过盲人浏览器、声音阅读器正常使用。
5.2 向后兼容性
使用web标准建立的页面，将在未来的新浏览器或者新网络设备中很好的工作。我们只要修改CSS或者XSL定制相应的表现形式就可以了。
关于web标准的好处
1.科技在进步，网络带宽越来越大，速度越来也快，节省那点字节有意义吗？
web标准的好处之一是：用web标准制作的页面代码量小，可以节省带宽。这只是web标准附带的好处，因为DIV的结构本身就比TABLE简单，TABLE布局的层层嵌套造成代码臃肿，文件尺寸膨胀。通常情况下，相同表现的页面用DIV+CSS比用TABLE布局的节省2/3的代码。这是web标准天生的好处。至于节省带宽的意义并不主要针对普通用户，而主要针对网站经营者，特别是中大型网站，类似新浪、网易这样的站点。一个新闻首页从500K缩小到170k，假设一天的pageview是3000万(保守数字)，那么节省的服务器流量就是330k*30000000=9440G，这个成本的节约是可观的。
2.我需要考虑残障人士（盲人和弱视）吗？
为残障人士提供网络浏览方便是美国及欧洲一些国家的法律规定，由于web标准页面的清晰结构、语义完整，一些相关设备能很容易的正确提取信息给残障人士。因此，方便盲人阅读信息也成为web标准的天生好处之一。至于有人说中国目前还有很多人为解决温饱发愁，哪有时间考虑残障人士。这是社会文明和社会道德问题，不在本书讨论范畴。但如果你页面按web标准制作了，就能达到这个效果，何乐而不为呢？
关于浏览器兼容
1.我不需要关心web标准，IE占有99%的市场，我做的页面只要IE能看就可以了。
“以用户为核心”通常都是反对web标准者的档箭牌，实际上这是虚伪的“以用户为核心”。你不能保证IE永远是垄断浏览器市场，你也不能保证IE不做任何改变(事实上，微软的IE7已经开始改善对 web标准的支持)。坚持用html+table布局制作的页面将是“死”的信息，不方便搜索，无法重用与共享，从长远来讲，这才是对用户最大的伤害。
2.为什么web标准的页面兼容性并不好？
我们说web标准的优势是兼容性好，这个兼容是指向后兼容，向新浏览器、新设备兼容。对已有的浏览器来说，因为它们对web标准的支持程度不一样，因此会出现不同浏览器下页面变形的情况。我们必须采用一些"hack"技巧来实现不同浏览器的兼容。这是无奈、也是不可避免的，是web技术发展必然要经历的一个过程，是我们向XML过渡必须克服的一个困难。
我想你和我一样，都关心WEB的未来会是怎么样的，下一轮的新技术热点在什么方向。其实，要回答这个问题，没有谁比W3C更有权威了。只要看看W3C在做什么，正在研究什么规范就知道WEB的走向和趋势了。
W3C明确地告诉我们：XML是未来的趋势毋庸置疑，开放和共享是互联网的精神和根本动力。
蒂姆.贝纳斯-李（Tim Berners-Lee），W3C领导人，万维网之父，说到：XML提供了信息交换的手段，但这仅仅只是开始。我们的目标是web的语义化，即：使得web上的信息内容更加容易理解、更便于交换和共享，RDF和OWL语言将在这方面提供更强大的支持。
web技术即将迎接新一轮的变革和发展，如果你还在犹豫是不是需要学习web标准，那么你将失去这次机会。
