如何设置成小电子图版软件
点击联系发帖人
时间：2012-06-23 16:11
前端开发（66）
Hybrid WebApp（54）
H5性能优化意义用户感受一秒钟法则优化方案资源加载首屏加载按需加载Lazyload滚屏加载Media Query（响应式加载）第三方资源异步加载Loading进度条避免30*/40*/50*的http statusFavicon.ico图片的使用格式选择像素控制小图片合并避免html代码中的大小重设避免DataURL使用图片的替代(css3, svg, iconfont)域名/服务端部署Gzip资源缓存，长cache分域名部署(静态资源域名)减少CookieCDN加速代码资源Javascript, CSS合并外联使用js, css压缩html, js, css资源的版本更新Css位置Js位置代码规范避免空src避免css表达式避免空css规则避免直接设置元素style服务端接口接口合并减少接口数据量缓存其他一些建议选择器避免让选择符看起来像是正则表达式。高级选择器不容易读懂，执行耗时也长尽量使用ID选择器尽量使用css3动画资源加载使用srcset首次加载不超过1024KB（或者可以说是越小越好）html和js减少重绘和回流缓存dom选择和计算缓存列表.length尽量使用事件代理,避免批量绑定事件使用touchstart，touchend代替clickHtml使用viewport减少dom节点合理使用requestAnimationFrame动画代替setTimeOut适当使用Canvas动画TouchMove, Scroll事件会导致多次渲染更快一步单页应用资源离线本地数据持久化和更新机制(版本管理)预加载测试方案工具准备ChromeCharles测试标准经典案例图片未优化按需加载优化方案尽可能优化图片, 但是压缩后发现噪点明显增加, 影响了显示效果修改加载方案, 第一次进入后, 只加载本页的图片loading时间降低至1秒左右
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：1081704次
积分：12596
积分：12596
排名：第720名
原创：232篇
转载：286篇
译文：10篇
评论：264条
文章：22篇
阅读：38789
阅读：9860
文章：15篇
阅读：28283
文章：48篇
阅读：98435
(3)(15)(12)(16)(17)(5)(16)(13)(7)(10)(15)(8)(12)(18)(33)(8)(10)(3)(7)(3)(4)(5)(10)(9)(18)(27)(26)(22)(7)(1)(5)(2)(1)(1)(1)(3)(2)(3)(1)(1)(5)(2)(2)(1)(2)(2)(2)(3)(3)(14)(5)(16)(9)(15)(7)(16)(9)(1)(1)(1)(1)(21)(1)(4)(1)(1)(2)(3)(2)(1)(1)(4)(3)(1)WEB标准不是某一个标准，而是一系列标准的集合。网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。对应的标准也分三方面：结构化标准语言主要包括XHTML和XML，表现标准语言主要包括CSS，行为标准主要包括对象模型（如W3C DOM）、ECMAScript等。这些标准大部分由W3C起草和发布，也有一些是其他标准组织制订的标准，比如ECMA（European Computer Manufacturers Association）的ECMAScript标准。我们来简单了解一下这些标准：
1．结构标准语言
XML是The Extensible Markup Language(可扩展标识语言)的简写。目前推荐遵循的是W3C于日发布的XML1.0，参考（）。和HTML一样，XML同样来源于SGML，但XML是一种能定义其他语言的语。XML最初设计的目的是弥补HTML的不足，以强大的扩展性满足网络信息发布的需要，后来逐渐用于网络数据的转换和描述。关于XML的好处和技术规范细节这里就不多说了，网上有很多资料，也有很多书籍可以参考。
（2）XHTML
XHTML是The Extensible HyperText Markup Language可扩展标识语言的缩写。目前推荐遵循的是W3C于日推荐XML1.0（参考）。XML虽然数据转换能力强大，完全可以替代HTML，但面对成千上万已有的站点，直接采用XML还为时过早。因此，我们在HTML4.0的基础上，用XML的规则对其进行扩展，得到了XHTML。简单的说，建立的目的就是实现HTML向XML的过渡。
2. 表现标准语言
CSS是Cascading Style Sheets层叠样式表的缩写。目前推荐遵循的是W3C于日推荐CSS2（参考）。W3C创建CSS标准的目的是以CSS取代HTML表格式布局、帧和其他表现的语言。纯CSS布局与结构式XHTML相结合能帮助设计师分离外观与结构，使站点的访问及维护更加容易。
3.行为标准
DOM是Document Object Model文档对象模型的缩写。根据W3C DOM规范（），DOM是一种与浏览器，平台，语言的接口，使得你可以访问页面其他的标准组件。简单理解，DOM解决了Netscaped的Javascript和Microsoft的Jscript之间的冲突，给予web设计师和开发者一个标准的方法，让他们来访问他们中的数据、脚本和表现层对像。
(2) ECMAScript
ECMAScript是ECMA(European Computer Manufacturers Association)制定的标准脚本语言（JAVAScript）。目前推荐遵循的是ECMAScript 262（）。
1．第一步改善为页面添加正确的DOCTYPE DOCTYPE是document type的简写。主要用来说明用的XHTML或者HTML是什么版本。浏览器根据DOCTYPE定义的DTD(文档类型定义)来解释页面代码。(1)过渡型（Transitional ）&!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"& (2)严格型（Strict ）&!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"& (3)框架型（Frameset ）&!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"& PS:偷懒的办法是可以访问/网站的首页，然后查看源代码，把head区同样的代码拷贝粘贴就可以了。设定一个名字空间（Namespace） 直接在DOCTYPE声明后面添加如下代码：&html XMLns="http://www.w3.org/1999/xhtml" & 一个namespace是收集元素类型和属性名字的一个详细的DTD，namespace声明允许你通过一个在线地址指向来识别你的namespace。只要照样输入代码就可以。声明你的编码语言 为了被浏览器正确解释和通过标识校验，所有的XHTML文档都必须声明它们所使用的编码语言。代码如下：&meta http-equiv="Content-Type" content="text/ charset=GB2312" /& 这里声明的编码语言是简体中文GB2312，你如果需要制作繁体内容，可以定义为BIG5。用小写字母书写所有的标签 XML对大小写是敏感的，所以，XHTML也是大小写有区别的。所有的XHTML元素和属性的名字都必须使用小写。否则你的文档将被W3C校验认为是无效的。例如下面的代码是不正确的：&TITLE&公司简介&/TITLE& 正确的写法是：&title&公司简介&/title& 同样的，&P&改成&p&，&B&改成&b&等等。这步转换很简单。 为图片添加 alt 属性 为所有图片添加alt属性。alt属性指定了当图片不能显示的时候就显示供替换文本，这样做对正常用户可有可无，但对纯文本浏览器和使用屏幕阅读机的用户来说是至关重要的。只有添加了alt属性，代码才会被W3C正确性校验通过。注意的是我们要添加有意义的alt属性，象下面这样的写法毫无意义：&img src="logo_unc_120x30.gif" alt="logo_unc_120x30.gif"& 正确的写法：&img src="logo_unc_120x30.gif" alt="UNC公司标志，点击返回首页"& 给所有属性值加引号 在HTML中，你可以不需要给属性值加引号，但是在XHTML中，它们必须被加引号。例：height="100"，而不能是height=100。关闭所有的标签 在XHTML中，每一个打开的标签都必须关闭。就象这样：&p&每一个打开的标签都必须关闭。&/p& &b&HTML可以接受不关闭的标，XHTML就不可以。&/b& 这个规则可以避免HTML的混乱和麻烦。举例来说：如果你不关闭图像标签，在一些浏览器中就可能出现CSS显示问题。用这种方法能确保页面和你设计的一样显示。需要说明的是：空标签也要关闭，在标签尾部使用一个正斜杠"/"来关闭它们自己。例如：&br /& &img src="webstandards.gif" /& 经过上述七个规则处理后，页面就基本符合XHTML1.0的要求。但我们还需要校验一下是否真的符合标准了。我们可以利用W3C提供免费校验服务（）。发现错误后逐个修改。2．第二步改善接下来我们的改善主要在结构和表现相分离上，这一步不象第一步那么容易实现，我们需要观念上的转变，以及对CSS2技术的学习和运用。但学习任何新知识都需要花点时间的，不是吗？诀窍在于边做边学。假如你一直采用表格布局，根本没用过 CSS，也不必急于跟表格布局说再见，你可以先用样式表代替 font 标签。随着你学到的越多，你能做的就越多。好，一起来看看我们需要做哪些事：用CSS定义元素外观 我们在写标识时已经养成习惯，当希望字体大点就用&h1&，希望在前面加个点符号就用&li&。我们总是想&h1&的意思是大的，&li&的意思是圆点，&b&的意思是“加粗文本”。而实际上， &h1&能变成你想要的任何样子，通过CSS，&h1&能变成小的字体，&p&文本能够变成巨大的、粗体的，&li&能够变成一张图片等等。我们不能强迫用结构元素实现表现效果，我们应该使用CSS来确定那些元素的外观。例如，我们可以使原来默认的6级标题可以看起来大小一样：h1, h2, h3, h4, h5, h6{ font-family: 宋体, font-size: 12 } 用结构化元素代替无意义的垃圾 许多人可能从来都不知道HTML和XHTML元素设计本意是用来表达结构的。我们很多人已经习惯用元素来控制表现，而不是结构。例如，一段列表内容可能会使用下面这样的标识：句子一&br /& 句子二&br /& 句子三&br /& 如果我们采用一个无序列表代替会更好：&ul& &li&句子一&/li& &li&句子二&/li& &li&句子三&/li& &/ul& 你或许会说“但是&li&显示的是一个圆点，我不想用圆点”。事实上，CSS没有设定元素看起来是什么样子，你完全可以用CSS关掉圆点。给每个表格和表单加上id 给表格或表单赋予一个唯一的、结构的标记，例如&table id="menu"& 接下来，在书写样式表的时候，你就可以创建一个“menu”的选择器，并且关联一个CSS规则，用来告诉表格单元、文本标签和所有其他元素怎么去显示。这样，不需要对每个&td&标签附带一些多余的、占用带宽的表现层的高、宽、对齐和背景颜色等等属性。只需要一个附着的标记（标记“menu”的id标记），你就可以在一个分离的样式表内为干净的、紧凑的代码标记进行特别的表现层处理。中级改善我们这里先列主要的三点，但其中包含的内容和知识点非常多，需要我们逐步学习和掌握，直到最后实现完全采用CSS而不才用任何表格实现布局。
DIV＋CSS网页布局入门
你正在学习CSS布局吗？是不是还不能完全掌握纯CSS布局？通常有两种情况阻碍你的学习： 第一种可能是你还没有理解CSS处理页面的原理。在你考虑你的页面整体表现效果前，你应当先考虑内容的语义和结构，然后再针对语义、结构添加CSS。这篇文章将告诉你应该怎样把HTML结构化。 另一种原因是你对那些非常熟悉的表现层属性(例如：cellpadding,、hspace、align="left"等等)束手无策，不知道该转换成对 应的什么CSS语句。当你解决了第一种问题，知道了如何结构化你的HTML，我再给出一个列表，详细列出原来的表现属性用什么CSS来代替。 结构化HTML
我们在刚学习网页制作时，总是先考虑怎么设计，考虑那些图片、字体、颜色、以及布局方案。然后我们用Photoshop或者Fireworks画出来、切割成小图。最后再通过编辑HTML将所有设计还原表现在页面上。 如果你希望你的HTML页面用CSS布局(是CSS-friendly的)，你需要回头重来，先不考虑“外观”，要先思考你的页面内容的语义和结构。 外观并不是最重要的。一个结构良好的HTML页面可以以任何外观表现出来，CSS Zen Garden是一个典型的例子。CSS Zen Garden帮助我们最终认识到CSS的强大力量。 HTML不仅仅只在电脑屏幕上阅读。你用photoshop精心设计的画面可能不能显示在PDA、移动电话和屏幕阅读机上。但是一个结构良好的HTML页面可以通过CSS的不同定义，显示在任何地方，任何网络设备上。
开始思考
首先要学习什么是"结构"，一些作家也称之为"语义"。这个术语的意思是你需要分析你的内容块，以及每块内容服务的目的，然后再根据这些内容目的建立起相应的HTML结构。 如果你坐下来仔细分析和规划你的页面结构，你可能得到类似这样的几块： 标志和站点名称 主页面内容 站点导航(主菜单) 子菜单 搜索框 功能区(例如购物车、收银台) 页脚(版权和有关法律声明)
我们通常采用DIV元素来将这些结构定义出来，类似这样： &div id="header"&&/div& &div id="content"&&/div& &div id="globalnav"&&/div& &div id="subnav"&&/div& &div id="search"&&/div& &div id="shop"&&/div& &div id="footer"&&/div& 这不是布局，是结构。这是一个对内容块的语义说明。当你理解了你的结构，就可以加对应的ID在DIV上。DIV容器中可以包含任何内容块，也可以嵌套另一个DIV。内容块可以包含任意的HTML元素---标题、段落、图片、表格、列表等等。 根据上面讲述的，你已经知道如何结构化HTML，现在你可以进行布局和样式定义了。每一个内容块都可以放在页面上任何地方，再指定这个块的颜色、字体、边框、背景以及对齐属性等等。
使用选择器是件美妙的事id的名称是控制某一内容块的手段,通过给这个内容块套上DIV并加上唯一的id,你就可以用CSS选择器来精确定义每一个页面元素的外观表现,包括标 题、列表、图片、链接或者段落等等。例如你为#header写一个CSS规则，就可以完全不同于#content里的图片规则。 另外一个例子是：你可以通过不同规则来定义不同内容块里的链接样式。类似这样：#globalnav a:link或者 #subnav a:link或者#content a:link。你也可以定义不同内容块中相同元素的样式不一样。例如，通过#content p和#footer p分别定义#content和#footer中p的样式。从结构上讲，你的页面是由图片、链接、列表、段落等组成的，这些元素本身并不会对显示在什么网络 设备中(PDA还是手机或者网络电视)有影响，它们可以被定义为任何的表现外观。 一个仔细结构化的HTML页面非常简单，每一个元素都被用于结构目的。当你想缩进一个段落，不需要使用blockquote标签，只要使用p标签，并对p 加一个CSS的margin规则就可以实现缩进目的。p是结构化标签，margin是表现属性，前者属于HTML，后者属于CSS。(这就是结构于表现的 相分离.) 良好结构的HTML页面内几乎没有表现属性的标签。代码非常干净简洁。例如，原先的代码&table width="80%" cellpadding="3" border="2" align="left"&，现在可以只在HTML中写&table&，所有控制表现的东西都写到CSS中去，在结构化的HTML中， table就是表格，而不是其他什么(比如被用来布局和定位)。 亲自实践一下结构化 上面说的只是最基本的结构，实际应用中，你可以根据需要来调整内容块。常常会出现DIV嵌套的情况，你会看到"container"层中又有其它层，结构类似这样： &div id="navcontainer"& &div id="globalnav"& &ul&a list&/ul& &/div& &div id="subnav"& &ul&another list&/ul& &/div& &/div& 嵌套的div元素允许你定义更多的CSS规则来控制表现，例如：你可以给#navcontainer一个规则让列表居右，再给#globalnav一个规则让列表居左，而给#subnav的list另一个完全不同的表现。
用CSS替换传统方法 下面的列表将帮助你用CSS替换传统方法： HTML属性以及相对应的CSS方法 HTML属性
CSS方法说明 align="left" align="right" float: float: 使用CSS可以浮动 任何元素:图片、段落、div、标题、表格、列表等等 当你使用float属性，必须给这个浮动元素定义一个宽度。 marginwidth="0" leftmargin="0" marginheight="0" topmargin="0" margin: 0; 使用CSS, margin可以设置在任何元素上, 不仅仅是body元素.更重要的，你可以分别指定元素的top, right, bottom和left的margin值。 vlink="#333399" alink="#000000" link="#3333FF" a:link #3 a:visited: #339; a:hover: #999; a:active: #00f; 在HTML中，链接的颜色作为body的一个属性值定义。整个页面的链接风格都一样。使用CSS的选择器，页面不同部分的链接样式可以不一样。bgcolor="#FFFFFF" background-color: # 在CSS中，任何元素都可以定义背景颜色，不仅仅局限于body和table元素。bordercolor="#FFFFFF" border-color: # 任何元素都可以设置边框(boeder)，你可以分别定义top, right, bottom和leftborder="3" cellspacing="3" border-width: 3 用CSS，你可以定义table的边框为统一样式，也可以分别定义top, right, bottom and left边框的颜色、尺寸和样式。 你可以使用 table, td or th 这些选择器. 如果你需要设置无边框效果，可以使用CSS定义： border-collapse: &br clear="left"& &br clear="right"& &br clear="all"&
clear: clear: clear: 许多2列或者3列布局都使用 float属性来定位。如果你在浮动层中定义了背景颜色或者背景图片，你可以使用clear属性. cellpadding="3" vspace="3" hspace="3" padding: 3 用CSS，任何元素都可以设定padding属性，同样，padding可以分别设置top, right, bottom and left。padding是透明的。 align="center" text-align: margin-right: margin-left: Text-align 只适用于文本. 象div，p这样的块级怨毒可以通过margin-right: 和margin-left:来水平居中
一些令人遗憾的技巧和工作环境
由于浏览器对CSS支持的不完善，我们有时候不得不采取一些技巧(hacks)或建立一种环境(Workarounds)来让CSS实现传统方法同样的效 果。例如块级元素有时侯需要使用水平居中的技巧，盒模型bug的技巧等等。所有这些技巧都在Molly Holzschlag的文章《Integrated Web Design: Strategies for Long-Term CSS Hack Management》中有详细说明。 另外一个关于CSS技巧的资源站点是Big John和Holly Bergevin的“Position is Everything”。 理解浮动行为
Eric Meyer的《Containing Floats》将帮助你掌握如何使用float属性布局。float元素有时候需要清除(clear)，阅读《How To Clear Floats Without Structural Markup》将非常有帮助。 更多帮助
已有的《CSS Discussion》列表是很好的资源，它收集了一个WiKiA讨论组的信息，其中包括CSS布局总结(css- /?page=CssLayouts)，CSS 技巧总结 (css-/?page=CssHack) 以及更多
在做项目的过程中，我们经常会建立各种各样的规范，以方便团队之间更好的合作更好的完成项目；同样我们也经常会听到各种各样的协议，比如Google的IM软件Gtalk使用的开放的XMPP协议，只要其他IM软件也遵循XMPP协议就能与Gtalk使用互通；而互联网上的信息无以计数，这些信息本身是独立存在的，如何将其串联并呈现在用户眼前，就需要使用到HTTP协议。
同样的道理，因为浏览器们各自的内核不同，对于默认样式的渲染也不尽相同，所以就需要一份各浏览器都遵循的规则来保证同一个网页文档在不同浏览器上呈现出来的样式是一致的，这个规则就是DOCTYPE声明。
因为互联网是互通的，所以任意的两个或者以上的网页文档都可能会涉及到数据交换，而因为XML语言是允许用户自定义标签的，所以任意两个交换的文档就可能会出现相同的标签，从而导致相同标签的冲突，所以就需要一个命名空间以区分开交换文档中可能存在的相同标签。
XHTML做为HTML向XML过渡的一种语言，并不能实现XML语言中的用户自定义标签，所以XHMTL文档中的命名空间都是相同的：
&html xmlns=”http://www.w3.org/1999/xhtml”&
xmlns即是XHTML namespace的缩写，也就是所谓的“命名空间”。与DOCTYPE声明一样，xmlns也属于一种声明。与HTML文档中仍然存在DOCTYPE声明不一样的是，在HTML文档是不存在xmlns的，我们平常所见到的xmlns都是出现在XHTML文档中的。
在制作一个网页的时候，除了在开始的时候声明DOCTYPE（文档类型）之外，如果是XHTML文档还需要声明命名空间，而第三个需要声明的就是网页文档的字符编码类型：
&meta http-equiv=”Content-Type” content=”text/ charset=utf-8″ /&
为了能被浏览器正确的解释以及通过W3C验证，每个XHTML文档都应该声明所使用的字符编码。很多时候网页文档出现乱码大部分都是由于字符编码不对而引起的。
utf-8是unicode的一种变长度的编码表达方式，做为一种全球通用型的字符编码正越来越多的网页文档所使用，使用utf-8字符编码的网页可最大程度的避免不同区域的用户访问相同网页时因字符编码不同而导致的乱码现象。
但是当我们打开国内的大多数网站看，特别是门户型的大型网站，关于字符编码的声明却并非是utf-8，而是gb2312：
&meta http-equiv=”Content-Type” content=”text/ charset=gb; /&
当然，除了gb2312外还有一些网站使用gbk或者是gb18030编码，这三种字符编码都是属于简体中文字符集。也就是说，如果一台电脑没有安装简体中文字符集时，当它访问字符编码为gb2312的中文网页时，则显示出来的是乱码。
既然使用gb2312字符编码时会因为不同区域的用户访问而可能出现乱码现象，那为何不使用utf-8呢？
其中一个原因可能历史遗留的原因，而另一个更重要的原因应该是由于两种编码的存储方式不同而造成的文档体积不同。
使用gb2312字符编码集时，一个汉字是占用2个字节的大小，而一个汉字在utf-8编码中所占的字节数却往往都是在3个字节，甚至是3个以上的字节。所以对于同一个中文文档来说，使用gb2312字符编码来进行存储的体积是要小于utf-8编码所存储的文档大小的。
而对于文字多访问量大的中文网站来说，使用gb2312编码的网页文档在下载传输上可以节省下不小的流量，再者是因为中文网站的用户群体基本上都锁定在中文用户上，这些也就是很多网站使用gb2312编码而不是utf-8编码的原因。
但是文字多访问量大的网站，国内并不多，再加上可能成对的乱码问题，所以在制作网页的时候推荐使用utf-8编码。
当然，不管用何种编码，最重要的是整站使用的编码要统一。
对于字符编码的声明除了上面的方式，还可能看到另一种声明方式：
&meta http-equiv=”Content-Language” content=”gb; /&
&meta http-equiv=”Content-Language” content=”zh-CN” /&
这种声明方式是针对老版本的浏览器的，在浏览器已经普遍更新换代的今天已经不推荐使用这种声明方式。
在较早之前的网页上，我们经常可以看到如下的网页结构代码：
&title&这是一个网页&/title&
&meta name=”…” content=”…” /&
……
……
很显然的，这种结构的网页代码是不符合Web标准规范的，但是浏览器仍然可以很好的呈现出这个网页来，只要代码没出什么错误。这个其实就像是用Table布局的页面跟Div构架的页面一样，浏览器都可以呈现出来，关健是哪个页面呈现的质量会更高。
做出一个页面，跟做好一个页面，中间有着很遥远的距离。
在浏览器的发展历程中，微软凭借着将Internet Explorer捆绑进Windows操作系统中，从来成为浏览器市场上的霸主，从而也造成了一系列的IE对W3C组织所制定的Web标准于不顾的事情，微软的IE一直都只遵循自家的Web标准。很庆幸的是，微软决定在他的IE8中支持Web标准，虽然这事还没最终确定。除微软的IE外，Mozilla Firefox、Apple Safari、Opera、Chrome等浏览器则以支持Web标准的名义与IE做得长久的对抗。
浏览器的不同，于是就造成了对HTML代码默认解析的不同，所以即使同样的代码在不同的浏览器下也可能呈现出不同的样式来，于是这就需要有一份众浏览器都遵循的规则来协调众浏览器之间的差异，这份规则需要一个声明来引用它，这个声明就是DOCTYPE——document type（文档类型）。
DOCTYPE声明是标准网页中必不可少的部分，所以，想要制作一个符合W3C标准的网页，首先就需要为这个页面声明一个文档类型。
DOCTYPE所声明的DTD（文档类型定义）分为三种，分别是：
Transitional（过渡的）：要求不是很严格的DTD，允许你继续在页面中使用HTML4.01的标签；
Strict（严格的）：这是制作页面时理想的DTD方式，但是这个文档类型定义不允许使用任何的表现层上的标签和属性；
Frameset（框架的）：这个专门针对页面设计中包含有框架的DTD。
由于框架型的设计可能对网页在搜索引擎中收录的影响，很多网页中都不使用框架设计；而Strict的DTD对于大多数人来说还只是一种理想化的方式；Transitional型的DTD则是目前最适用也是使用最广泛的文档类型定义。
现在随便打开一个符合Web标准的网页，都可以在页面的最开始处看到这样一句声明：
&!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&
这是一个关于XHTML网页文档的DOCTYPE声明。当然并不是说DOCTYPE声明只能针对XHTML网页文档，对于使用HTML4.01的网页文档来说，同样可以使用DOCTYPE声明：
过渡的DTD：
&!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”&
严格的DTD：
&!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”&
唯一需要注意的是，DOCTYPE声明的位置必须是位于页面的最开始处，在DOCTYPE声明代码之前不能出现任何的代码或是标签，否则页面中的标签或是CSS样式可能会失效。
在HTML4 Elements中共计有91个标签，然而在这么多的标签中经常被使用到的标签不到四分之一，在这些常用的标签中有两个标签是属于最通用型的——div、span，这两个结构性的标签因为本身不带呈现样式及语义而被广泛的用于网页制作中，再加上之前很多人直接把WEB标准误解为就是div+css，于是在一个页面里出现了特多的div或者是span标签，尽管这些地方本身有更符合语义的标签来实现。
Table式的页面布局因为其本身的简便以及有Dreamweaver这样的可视化操作的Web制作软件的存在，从而引领了Web制作的一个时代，也正是因此而导致了过多的Web设计人员从来没有真正关注过HTML标签的真正语义，当Web标准开始兴起的时候，于是就直接被理解成是div+css的布局。
于是Web标准中的结构标签几乎变成了div的秀场。
div标签的过度使用，已经导致了很多人对于Web标准的误解，最明显的一点就是，当网页切换到使用div标签布局后，table标签便被无情的抛弃，俨然Web标准已经被理解成就是div+css。而事实上，table标签是不能被抛弃的，当需要显示数据内容时，由table标签构建的HTML结构的优势要强于div标签构建的布局，table标签仍然是显示数据时最符合HTML语义的标签。
Table页面布局所生成的过多的冗长代码，以及混杂其中的HTML样式属性，已经严重影响到页面的性能，尤其是对于大访问量的网站，解决的方法即是对页面进行基于Web标准的重构。然而对Web标准的误解，造成页面整体结构上div被过多的使用；以及Table布局所遗留下来的思想，造成页面上的结构嵌套过多。这些仍然影响着页面的整体性能。
所以，以更符合语义化的标签来构建页面，是Web标准推崇的理念。在这个理念下构建的页面还应该尽量的精简代码，使页面代码尽量的保持轻简，让浏览器更快速呈现的同时也便于日后的代码维护。
Web标准并不是某一个单独的标准，而是一系列标准的集合，包括结构、表现、行为三部分。这里的结构并不是指div，而是指标准化的语言——XHTML、XML。
明明&strong /&标签可以实现粗体样式，为什么还要用&span /&标签再搭配粗体样式去实现呢？
在许多人看来，HTML应该是WEB制作所有语言中最简单的语言，因为它不需要编译、封闭等，甚至只需要一个记事本就可以让其在浏览器中呈现出来。所以我们也看到很多人都在说HTML很简单超简单之类的话，网上也有很多诸如“花个两三天学习下HTML就可以制作网页”之类的理论。在这些人看来，学HTML就像是学英文字母ABC一般简单。
正是这样的理论这样的思想，导致学习HTML的人都不把它当回事，认为HTML仅仅只是诸如“加粗用&B /&标签，斜体用&I /&标签”之类的应用。这样的思想尤其是在初学者当中流传，而一旦真正深入的了解学习HTML之后，才会发现HTML远非想像中的那么简单。
而随着WEB标准大潮的席卷互联网，更多的人索性就差不多抛弃HTML众多标签般的只用DIV，似乎DIV+CSS就是WEB标准的核心。这个错误的理论与HTML超简单的理论被绑在了一起，在互联网中传播着。思想改变行动，最终造成了WEB标准在国内互联网推行的困难重重。
真正的WEB标准应该是推崇以更合适的语义标签来制作网页结构，完全不是在整个页面写满DIV就是符合WEB标准。与此相同的道理是，HTML远远不是你所想像中的那么简单。
一个网站在浏览器中呈现效果的好坏，视觉因素占一半的比重，而另一半的比重就在于网页的结构上。
我们可以在网上看到很多整个页面都是由DIV架构的网页，这些DIV结构的页面在配合上CSS时，整个页面在浏览器中呈现的也许很正常，并看不出什么问题。可是如果用户禁用掉CSS之后呢？浏览器还能否正确的理解网页结构并呈现出来，就成了判断这个网页结构好坏的很重要的一个标准。而对于这些完全由DIV结构组成的页面，很显然的，在CSS被禁用之后，浏览器就很难呈现出一个结构清晰明了的页面来，而用户自然也很难从结构上去判断哪些内容是标题，哪些内容是真正的内容。
而如果在页面中采用了更符合语义的HTML标签的话，即使CSS样式在被禁用之后，浏览器依然可以根据&h /&标签来显示成标题，根据&p /&标签来显示成段落，最终仍然可以为用户呈现出结构清晰明了的页面。
如果把网站建设比喻成是建造一栋大厦，那么HTML无疑就是这栋大厦的基石，如果基石不够坚稳的话，那么这栋大厦就很有可能会面临倾倒的危险。
从深层次理解并学习HTML的标签语义，从思想上重视HTML，别忘了，整个网站都是基于HTML结构来呈现的。
WEB标准学习经验总结
今天在群里，熊猫君提议整理一个帖子，一方面为初学者提供一个入门指南，另一方面也象借此和已经在从事这个行业进行一点交流。下面是我从事这个行当多年的一些经验总结，希望抛砖引玉，大家不吝赐教。１、必备工具 其实web标准并不是很复杂的技术，实现web标准的工具也很简单，说白了，只要可以进行纯文本编辑的软件，都可以作为代码编写的gon工具。例如记事本、UltraEdit甚至CuteFTP的编辑器（象我这种懒人有时候就用那玩艺儿直接在线编辑，汗）。 而另一些较专业软件会提供高亮显示代码（前面提到的UltraEdit也具有此项功能）、代码提示、自动闭合标签等等功能，使用起来会大大提高工作效率。如DreamWeaver、MS&Expression、EditPlus等等，这些编辑软件目前是绝对的主流，无论是初学者上手容易还是专业人士提高效率都是不错的选择。 再说说浏览器环境，目前一台机器同时装IE、Firefox、Opera、Safari已经不是难事，而IE7&Standalone和MultipleIE的问世也让IE7和低版本IE并存成为可能。推荐浏览器环境——本机安装IE7、FF、Opera、Safari，同时安装MultipleIE。从我个人的使用经验，IE7&Standalone存在一定的缺陷，有可能导致本机安装的IE6无法正常使用。 除了编辑器以外，还有就是必不可少的调试工具啦，首推当然是Firefox下的Firebug！IE下目前还没有与之相当的调试工具，比较好的有IE&development&toobar、IE&Debugbar等等，不过和Firebug完全不是一个档次的东西，只能说勉强凑合用。２、必备的HTML/XHTML基础 说到基础，其实正是我最想谈的。从论坛许多的帖子也可以看出来，大多数问题的产生是由于制作者本身基础的不牢固。而HTML/XHTML作为基础中的基础，更是许多人的薄弱环节。然而很多人还是喜欢一上来就问布局或者Hack这些技巧方面的问题，其实很多问题如果本人的基础牢固了，几乎不能被称之为问题。 web标准必备的HTML/XHTML基础，大致有几个方面： 1、每个标签的语义，这一点是网页标准的根本。而整个网页标准化几乎都是围绕着这一点而来的，明确了语义，才能选择合适的标签；明确了语义，才能构建可读性良好的结构。例如&h1&就是网站最高等级的标题，它不应该放在&h2&层级之下；例如&fieldset&和&legend&，主要用于表单元素分组，不应该因为它那个漂亮的边框就用来表现新闻列表。 2、每个标签的初始样式，现在有很多重置标签样式就是针对这一点，因为每个标签在不同浏览器下的初始样式是不同的，而重置样式是为了更好地实现网页兼容性。从我个人的角度来说，不推荐初学者一上来就了解如何重置样式，而应该从了解标签的初始样式入手，先了解了这些，才能明白每一行重置样式的代码的真正含义。 3、标签的正确嵌套规则，同时还必须了解的是哪些标签属于块元素，而哪些属于行内元素。这是即使是高手也会经常忽略的方面，例如本人（^_^）。今天看到/thread--1.html这个帖子的时候，才意识到，原来之前对dt、dd的嵌套规则理解有误，二者不能一视同仁。HTML/XHTML的嵌套规则并不算简单，常用的标签不过三十个上下，就有大约二十种不同的嵌套规则，稍不留神就会出错。虽然不严格遵循并不会影响页面的表现，但养成一个良好的习惯是很重要的，它往往能决定你在这条路上可以走多远。 4、标签的属性。这个又要分为两方面，一是符合标准的常用属性及对应的值，例如&table&的summary属性、&th&&td&的scope属性、&label&的for属性等等；二是标准强制要求的属性，例如图片的alt属性、form的action属性、textfield的col属性和row属性等等。 HTML/XHTML基础，虽然可以分开成多个方面讲，但实际关于它们的知识往往是综合在一起的，大多数相关的手册几乎都有详尽的介绍。对于这方面知识的学习，除了看相关手册外，多把自己的网页拿去w3c做校验也是不错的方法。３、必须了解的CSS知识 CSS是标准化最吸引人的地方，也是时下讨论最多的话题，市面上的相关书籍也在web标准类里占据压倒性的比重，甚至有些人（包括一些用人单位）认为CSS就是网页标准。这种过于夸大CSS作用的观点固然是错误的，但CSS对于网页标准的重要性却也可见一斑。 CSS相关的知识、技巧很多，从知识的必备性方面来讲，以下几个方面是我认为最重要的： 1、布局。布局是表现层技术的基础，任何表现层的东西都是基于布局之上的。利用CSS布局的方法有很多种，例如float、绝对定位、负margin等等。每一种布局都有着各自的优势和局限性，从适性最广来讲显然是float最佳，也最为常用，但清除浮动往往是让人头疼的问题。绝对定位的网页抗压性好，但自由度低，而且渲染效率最差。负margin是最不破坏文档流的办法，但在对负值支持不佳的IE下往往会有灵异表现。关于布局方面的知识，建议看一下webflash的《彻底弄懂CSS盒子模式》系列文章，个人认为相关知识的文章尚无出其右者。 2、IE下的Haslayout渲染模式。其实hack是许多标准工程师所深恶痛绝的东西，但在浏览器兼容性要求越来越高的今天，hack却往往是一种无奈之举。而深入了解IE的Haslayout渲染模式，就会明白许多hack的来由，以及许多兼容性问题的产生之源。推荐阅读——译文On&having&layout。然而HasLayout问题之多，绝非一两篇文章所能概括，通过阅读文章，了解其中的原理，再举一反三，很多问题就会迎刃而解了。 3、符合标准的CSS规则。关于这一点，我可以不负责任地说，数以千万计的网站，其CSS完全符合标准的，所占比重不会超过1%。这并不是一个悲观的估计，即使是w3c推荐的一些网站，例如ESPN，他们的CSS也时常会通不过校验。CSS的许多规则的确令CSSer们非常不适，例如background和color，这两个属性绝大多数人都是分开来使用的，而w3c标准却规定两者必须“生则同生，死则同死”。还有就是各个浏览器的专有属性，在实现一些效果时是最简单有效的。这种时候我们往往会选择放弃标准，但暂时的放弃不意味着无视。今天知道我们哪些行为是错误的，以及为什么要用错误的方法，明天改正起来就不会太难。 4、提高网站性能的技巧，如有助于SEO的以图代字、用尽量少和小容量的图片实现圆角表格、用background-position实现图片切换以提高渲染效率等等。从对网站的帮助角度来看，这些技巧远比浏览器hack更值得掌握。 5、了解一点js知识。这个和CSS关系不是那么密切，但经常看到很多人钻牛角尖，用js可以非常简单实现的效果，非要用CSS去勉强实现。例如将子菜单放在链接里，通过:hover触发。又比如多列等高布局的实现。这已经是行为层的范畴了，为什么还非要用表现层来实现呢？当然这里并不是说所有CSS不容易实现的都往js里扔，而是要了解一下双方的技术特点，合理地选用最佳方案。４、必备的网站样式管理技巧 1、规范化的命名与合理的代码重用性，也就是ID和class。对不起，这里又要老生常谈一下，因为昨天刚刚又看到一个通篇没有用一个ID的网站。ID和class是属于结构层的，不过CSS的调用却几乎都要通过ID和class来实现。但是，ID和class不仅仅是为了调用CSS样式而存在的。恰恰相反，是良好的ID和class构建的结构给了CSS大展身手的舞台。搞反了彼此关系，其实还是表现主导结构的思路，也就和满屏幕的table没有本质区别。理清了ID、class和CSS的关系，再来谈命名，命名其实只有一个基本原则，就是结构化。当然，在结构化之余，body、框架、模块之间的命名如能以某种形式加以区别（我个人习惯是加不同前缀），会让代码更加清晰。 2、样式文件的管理，也就是如何存储网站的样式文件。如果是一个很小的网站，把所有样式存在一个文件中也是没有问题的。但大网站的CSS往往几十上百k，全部存在一个文件里不但影响网页加载，也不利于修改维护。如何分割CSS，需要事先做好规划，无论是按栏目按功能还是按层级，要根据自己网站的特点。５、其他 期待大家继续补充……
对话闲聊DIV+CSS与WEB标准
“Web标准”这个词听说好久了，但是到底什么是Web标准呢？我们该如何实现Web标准呢？DIV+CSS布局是Web标准吗？实现Web标准到底有什么好处呢？不知上面这些问题大家以前是怎么认为的，至少我以前很傻乎乎的认为“Div+CSS布局就是符合Web标准”。下面是布鲁斯狼和其老友的一段聊天对话，看完后希望大家在对“Web标准”的理解上有进一步的提高和认识！对话一横导航链接为什么要用UL+LI为什么不直接在一行写上文本链接呢 列表本身就有列表符号，同时列表项也要分行显示做成横向的，既要使得不显示列表符号，又要将他们内嵌到一行。----------------------------------------------------------------------------------思维是这样的。什么才是标准。什么叫分离。什么叫结构。标准是一系列标准。分离的是表现，内容和行为。而内容则决定了结构。用合适的标签来组织文档，这是内容（结构）的基础。导航从其本意上说，不是一个段落P，更不是一些个标题Hx，也不是一个DIV，DIV只是部分与分区。导航实质上就是一个无序列表。也就是说，用UL+LI来组织导航的内容，更具有语义，具有更好的结构。至于说，列表项预设标记，与垂直竖向的方式。是撇开不谈的。只需要建立一个具有良好结构与富含语义的文档即可。表现，交给CSS完成。行为，交给JS完成。对话二列表通用性较广，是不是做出语义性元素更有针对性？----------------------------------------------------------------------------------在页面中很多元素，都是列表元素。不过在使用的时候，要注意，不要滥用。另外在UL外面，更多的时候不需要外设DIV标签，它本身就是一个块元素。对话三现在全靠 div span ul ，标准里面不标准。----------------------------------------------------------------------------------现在标准是不够标准，但分离与结构的原则应该是很重视的。能有好的结构，分离的够彻底，就很不错了对话四Web标准是CSS布局 准确么 ----------------------------------------------------------------------------------不正确。CSS布局是实现WEB标准的基础对话五如何实现Web标准----------------------------------------------------------------------------------结构化文档。行为，表现，内容，三者分离。具有更好的适应性与扩展性。并不是说，用CSS进行布局就是标准了。这只是其中一步。对话六谈到把DIV+CSS说成Web标准的普遍说法，其实有些人硬找茬，大家都知道Web标准不只是这些，是思想，是内容和表现分离的主导思想，是结构化代码，而代码中的代表DIV就成了焦点了……另外，我觉得DIV+CSS已经类似于中国语言中的“约定俗称”，大家都知道这层意思了 ----------------------------------------------------------------------------------对，我就说的随大流。DIV+CSS，实际上成为CSS网页布局的代名词。而CSS网页布局就是WEB标准化构成的一个环节而已。除了CSS，还要讲结构HTML，讲DOM，JAVASCRIPT等等。最后就一个结果，要想符合标准，先DIV+CSS再说~~~~~~~~~~~~但并不是DIV+CSS，就是标准了。
怎样才是符合web标准?
简单说就是不用HTML+table来设计页面，改用XHTML+CSS来实现。
怎样是代码校验?
代码校验就是检查你制作好的页面是否完全符合web标准。通常可以到W3C的网站去校验。
什么是DocType,有什么用?
DOCTYPE是document&type(文档类型)的简写，用来说明你的网页是什么标识语言(XHTML或者HTML)是什么版本。&
我应该使用是么样的DOCTYPE?
初次学习web标准的设计师推荐使用XHTML&1.0过渡式的DTD，代码如下：
&!DOCTYPE&html&PUBLIC&"-//W3C//DTD&XHTML&1.0&Transitional//EN"&"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&&
遵循web标准就不能使用表格了吗?
可以使用表格。只是表格仅仅用于其本意：展示数据列表。而不允许使用表格排版和定位。&
遵循web标准可以使用Flash吗?
可以。但是&embed&不允许使用。暂时只能采用js调用来通过W3C校验。&
不用表格可以制作出漂亮的页面布局吗?
可以。CSS可以实现几乎所有用table实现的布局。参考成功网站:,,,&
有什么关于web标准好书推荐吗?
web标准的概念和实践推荐Zeldman的《网站重构--用web标准进行设计》；CSS入门和进阶推荐Eric&Meyer的《CSS权威指南》《More&Eric&Meyer&on&CSS》。&
CSS布局比表格难吗?
这要看你怎么想了。变革和观念转换总是有困难的，你认为这个转变是值得的，那么你会发现CSS并不比表格难。
表格布局是不是马上要淘汰了?
不会。至少现在还有成千上万的(老的和新建的)网页依然使用表格布局。新技术的过渡和普及需要时间。
经过1天多的艰苦奋战，终于把html（Hypertext markup language）的基础教程给看完了。
这次为了xml而看了这“古老”的技术，还是有点收获的。。总体来说，虽然不是很熟练，但是看懂一般的html网页源文件已经不是问题了。闲来无事，就写写笔记吧，说说感受也好！
html给我的感觉是很标准，很有格式的。最主要的代码特点就是标记成对的出现，虽然有些可以省略，但是建议除非太过烦琐还是把前后都加上去吧！作为一个完整的html网页，总是有头部，主体和结尾3大部分，分别用&head&&/head&,&body&&/body&和&/html&表示。另外，一个重要特性就是可以自定义风格（CSS），这是非常方便的，类似于编程语言的类的功能吧！同时，还可以嵌入其他script来增强其交互功能。而对于相当重要的标记，也只是由头部标识和属性所组成。（&标识 属性1 属性2 属性3...&）看来，学习html是学习其他网页脚本语言的基础吧，同时对于学习可视化网页设计也是有帮助的（这么说应该不过分吧！）！，下面就让我们一起来详细分析各个部分的构成元素。
2常见标记介绍
其实大多数html网页的标记不多，就只有10几个吧！（看到这里，好！）这里主要介绍一下常见的控制文件的外观和布局的标记！
&h&:从&h1&到&h6&所标识的字体依次减小，一般来说，&h1&用来标记文件标题&h2&用来标记一章的标题&h3&用来标记章节的标题，&h6&则是来作为小字印刷，如版权信息等等。
&p&和&br&:基本类似于回车键的功能，而&p&可以插入空格，同时也可以附带属性，如&p align=right&效果&p&（缺省情况是左对齐，左对齐很多排列方式的缺省情况）
&div&:虽然类似于&p&,也可以使用align属性，但是在使用风格表格时功能强大。（风格表格见后）
&hr&:可以产生一条水平线，对于组织格式是很有帮助的。
在这里应该说一说逻辑标记和物理标记的差别：物理标记表明信息的外观，而逻辑标记表明信息的语义。从适用范围来说，使用逻辑标记更值得推荐，因为逻辑标记表示的是本质特性，不随浏览器的变化而变化！
逻辑标记：&cite&&dfn&&strong&&code&&ins&&del&（注：大家可以自己测试一下，看看有什么效果，其中ins和del是很有用的标记，特别是在多人合作开发的时候，看字面应该知道这两个是干嘛的吧！）
物理标记：&i&&t&&tt&&big&&small&&sub&&sup&&strike&（注：大家测试吧，动手最重要◎）
链接是超文本（Hypertext）格式的重要实现方式，而使用的就是锚（Anchor）（，所以缩写也就是&a&）,
一个典型的锚标记的定义：&a href="目标页面"&激活热区&/a&（注：href：hypertext reference,就是链接到哪里），现在分情况介绍：
1）外部链接
1。1非本地文件：&a href=""&中山大学&/a&（这个很明显，不用解释了）
1。2其他形式的非本地资源：&a href=""&中山大学&/a&（ftp资源）
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& &a href=""&我的email&/a&（email信息）
1。2本地文件：&a href="另一个网页.html"&另一网页？&/a&（同一文件夹的，当然也可以给出完整路径咯）
&&&&&& &a href="../另一个网页.html"&另一网页？&/a&（上一级别文件夹的）
&&& （注：../表示上一级文件夹，同样../../就表示上上一级）
2）内部链接
什么是内部链接，就是在同一个网页里边的链接！这样做是为了避免网页太大而造成的浏览麻烦！
步骤：首先要定义一个引用目标锚，然后在另一处定义被锚引用的目标！看例子吧◎
&a herf="#top"&top&/a&（其中＃top定义了该锚）
&a name="top"&top&/a&（这里就引用了该锚）
(注：这种方法最常见的应用就是网页上经常看到的网页最下边的“返回顶部”了)
使用图像：&img src="图像文件"&（注：图像文件路径与链接路径相同）。在这里可以加入提示属性&alt&，如&img src="图片.gif" alt="图片"&（注：看看有什么效果，如果图片不存在，会怎样呢？）
1）对齐方式：缺省是左对齐，可以使用&div align=..&进行更改。
2）高度和宽度：&img src="图片.gif" height=34mm width=34mm&（注：看明白了吧！不过应该注意的一点是，在ie里边高度和宽度的比例应该与源图相同，不然就显示不了，已在我的机子上测试过了）
3）四周区域和边框：&img src="图像文件" border＝4 hspace=5 vspace=5&（注：很简单吧，测试一下吧！还有，边框默认情况是没有的，但是对于有链接的图来说，有个框框还是很好的）
1）无序列表：无序，就是没有特别的序号，也就是平等哦。。下面看个例子吧。
&&ul&&li&内容1&li&内容2&li&内容3&/ul&（注：对于ul，可以添加属性type，属性值有disc,square,circle，这样就可以改变序号了◎）
2）有序列表：这个当然就是前面有序号咯。
&ol&&li&内容1&li&内容2&li&内容3&/ol&（注：对于ol，同样可以添加type属性，属性值可以是1，a，A，i，I，呵呵，自己测试一下。）另外，对于ol，可以从喜欢的序号开始排序，用的属性就是ol的start和li的value了，很明白吧：）
3）列表嵌套：嵌套，类似于树状菜单的东西。可以使用&ul&&ul&&/ul&&/ul&(ol也一样)类似的格式进行使用。
4）定义列表：主要有dl，dt，dd，分别代表定义标识，头部和内容，使用方法：
&dl&&dt&头部&dd&定义的内容&/dl&（注：dt和dd不需要结束标记）
1）定义一个form：定义一个form标记，用于确定发送消息的类型和处理方式，其中必须的属性就是action了。&form action="" method="post"&（注：method用于说明传送数据的方式，还有get方式，不过现在常用post）。类似的有，&form action="" method="post"&
2)大部分的form都是在&input&中处理的。如下面所示：
& 请输入名字&input type="text" name="username"&&p&& 请输入口令&input type="password" name="pword"&&p&& 请提出宝贵意见&textarea name="comment" rows=3 cols=20 && &/textarea&&p&& &input type="submit" value="Submit form"&& &input type="reset" value="Clear data"&
自己可以修改一下属性并进行测试◎
3）复选框和单选框
&&input type="checkbox" name="check1" value="check1"&check1&&input type="checkbox" name="check2" checked value="check2"&check2&&input type="checkbox" name="check3" checked value="check3"&check3&p&（这是复选框）&&input type="radio" name="radio1" value="radio1"&radio1&&input type="radio" name="radio2" checked value="radio2"&radio2&&input type="radio" name="radio3" value="radio3"&radio3&p&（这是单选框）
4）下拉菜单和滚动菜单
& &select&& &&option&1&/option&& &&option&2&/option&& &&option&3&/option&& &&option&4&/option&& &&option&5&/option&& &/select&&p&（下拉菜单）&&&select multiple size=5 name="1"&& &&option&1&/option&& &&option&2&/option&& &&option&3&/option&& &&option&4&/option&& &&option&5&/option&& &/select&&p&（滚动菜单，就是比下拉菜单多了个multiple属性和name属性，而size属性是可有可无）
什么是帧结构，就是在一个完整网页里边分页，当一个页的url发生变化，其他的可以不变：）使用帧结构可以使得网页更加多变，内容更加丰富，不过也会带来一定的麻烦，因为它打乱了原来的基本操作规则。
如何建立一个帧结构？如下面的例子所示。
&html&///注意：没有body的哦。。&head&&&title&帧结构&/title&&/head&&frameset rows="50%,*" cols="50%,*"&//定义了网页的分页结构，包括了行数和列数&frame src="doc1.html"&//引用网页的基本写法&&frameset rows="40%,50%"&//定义了一个嵌套的帧&&frame src="doc2.html"&&&frame src="doc3.html" scrolling="yes"&//scrooling表示是否带有滚动条&&/frameset&&frame src="doc4.html" frameborder="0"&//frameborder表示边框格式，1表示缺省，0表示无&frame src="doc5.html" noresize&//noresize使得帧窗口的大小不可移动！&/frameset&&/html&
注：另外，如果在帧窗口中加入&a herf="新网页" target="_top"&这样的话，当激活这个链接的时候，就清除了当前的帧结构，用新页代替，可以自己测试一下。
如何建立一个表格呢？&
&table border=20 cellspacing=20 cellpadding=20&&//大家可以测试一下，这3个分别表示的是什么。。其中border表示边框，如果不设置，那么显示的表格就没有边框。而cellsapcing是格间线宽度，cellpadding是内边框！&&caption align=center&数据&/caption&&&tr&&&th&数据1&/th&&th&数据2&/th&//标题，可以使用align属性进行设置其出现的位置&&/tr&&&tr&&&td&一些数据&/td&&td&还有数据&/td&//数据，可以使用align和valign对其上下左右的位置进行设置&&/tr&&&tr&&&td&更多数据&/td&&td&最后数据&/td&//还可以对其bgcolor属性进行设置数据的颜色&&/tr&&&/table&
注：还可以进行跨行和跨列的设置，用的是colspan和rowspan（看意思就知道了：））如：&&&&&&&&&&&&&&&&&&&&& &th rowsspan=4&数据内容&/th&
什么是CSS：就是层叠式风格列表，类似于网页格式的模板，也相当于编程里边的类一样，定义了自己的风格，标记着属性的值（或许比喻不怎么恰当，就原谅一下咯。）下面给出一个完整的例子，大家注意看释:& &html&&head&&title&CSS&/title&&style type="text/css"&//用style标记，而且是在head里边定义的&h1{font-style:italic}&h2{text-style:right}&h3{font-family:arial}&h4{font-style:italic}&div{color:blue}//&定义形式：标记选择器{属性1：值1；属性2：值2；属性3：值3；......}&div code{color:red}//上下文：如果在网页中，&code&定义在&div&里边，那么就套用格式，如果没有，就不&h5,h6{color:orange}//一次多个选择器&p.aside{font-family:font-style:italic}//定义了一个类,可以给文件中独立的块进行设置风格。&.arial{font-family:arial}//定义了通用类，使用方法与类相同&a:link{color:green}&a:active{color:font-size:150%}&a:visite{color:red}//定义了伪类，所谓伪类，就是用于与用户交互操作有关的属性，如超链接等等。&/style&&/head&&body&&&h1&标题1&/h1&&&h2&标题2&/h2&&&h3&标题3&/h3&&&h4&标题4&/h4&&&div&用&strong&&em&蓝色&/em&&/strong&文字&/div&&&div&是&code&红色&/code&吗？&/div&&&code&是红色吗？&/code&&&h5&orange&/h5&&&h6&orange&/h6&&&p class=aside&爱逛街的老鼠？？&/p&&//这就是类的使用方法，调用了class&/body&&/html&
注：由于css功能强大，所以只是简单写了写，以后有机会再专门写写
我们使用XHTML+CSS来重新设计我们的网站，如何知道自己制作的页面真的符合web标准?W3C和一些志愿者网站提供了在线校验程序，来帮助我们检查页面是否符合标准，并提供了修正错误的帮助信息。这些校验非常有用，是我调试页面第一步要做的事情。
1.XHTML校验
校验网址:http://validator.w3.org/
校验方式:网址校验、文件上传校验
校验成功，会显示"This Page Is Valid XHTML 1.0 Transitional!"。
校验失败，会显示更多校验选项和错误信息。
一般选择"Show Source"和"Verbose Output"可以帮助你找到错误代码所在行和错误原因。
XHTML校验常见错误原因对照表
No DOCTYPE Found! Falling Back to HTML 4.01 Transitional--未定义DOCTYPE。
No Character Encoding Found! Falling back to UTF-8.--未定义语言编码。
end tag for "img" omitted, but OMITTAG NO was specified--图片标签没有加"/"关闭。
an attribute value specification must be an attribute value literal unless SHORTTAG YES is specified--属性值必须加引号。
element "DIV" undefined---DIV标签不能用大写，要改成小写div。
required attribute "alt" not specified---图片需要加alt属性。
required attribute "type" not specified---JS或者CSS调用的标签漏了type属性。
其中最最常见的错误就是标签的大小写问题了。通常这些错误都是关联的，比如忘记了一个其他标签都会报错，所以不要看到一堆的错误害怕，通常解决了一个错误，其他的错误也都没有了。
2.CSS2校验
校验网址:http://jigsaw.w3.org/css-validator/
校验方式:网址校验、文件上传校验、直接贴入代码校验
校验成功，会显示"恭喜恭喜，此文档已经通过样式表校验! "。
校验失败，会显示两类错误:错误和警告。错误表示一定要修正，否则无法通过校验;警告表示有代码不被W3C推荐,建议修改。
web标准常见问题集合
列举了一些常见，新手经常问的问题。举例并说明解决方法。
1.超链接访问过后hover样式就不出现的问题
运行代码框&!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&
&meta http-equiv="Content-Type" content="text/ charset=gb2312" /&
&style type="text/css"&
color:blue
a:visited {
color:green
a:active {
color:orange
&a href="#"&
web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全
&/a& [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
被点击访问过的超链接样式不在具有hover和active了,很多人应该都遇到过这个问题，解决方法是改变CSS属性的排列顺序: L-V-H-A
2.FF下如何使连续长字段自动换行
运行代码框&!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&
&meta http-equiv="Content-Type" content="text/ charset=gb2312" /&
&style type="text/css"&
word-wrap:break-
&div id="ff"&aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&/div&
&script type="text/javascript"&
/* &![CDATA[ */
function toBreakWord(intLen){
var obj=document.getElementById("ff");
var strContent=obj.innerHTML;
var strTemp="";
while(strContent.length&intLen){
strTemp+=strContent.substr(0,intLen)+"
strContent=strContent.substr(intLen,strContent.length);
strTemp+="
obj.innerHTML=strT
if(document.getElementById
!document.all)
toBreakWord(37)
&/script& [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
众所周知IE中直接使用word-wrap:break-word 就可以了, 这里FF中我们使用JS插入的方法来解决
3.ff下为什么父容器的高度不能自适应
运行代码框&!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&
&meta http-equiv="Content-Type" content="text/ charset=gb2312" /&
&style type="text/css"&
border:1px solid red
&div&&p&web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全&/p&&/div& [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
为什么这个P撑不开DIV呢？解决的办法是在div 与 p 之间插入&div style="clear:both"&&/div&清除掉这个p的浮动
4. IE6的双倍边距BUG
运行代码框&!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&
&meta http-equiv="Content-Type" content="text/ charset=gb2312" /&
&style type="text/css"&
margin-left:10
height:200
border:1px solid red
&a href="#"&
web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全
&/div& [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
浮动后本来外边距10px,但IE解释为20px,解决办法是加上display:inline
5. IE6下绝对定位的容器内文本无法正常选择的问题
运行代码框&!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&
&meta http-equiv="Content-Type" content="text/ charset=gb2312" /&
&style type="text/css"&
height:200
border:1px solid red
&a href="#"&
web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全
&/div& [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
上面的问题在IE6、7中存在，解决问题的办法是让IE进入到qurks mode。关于qurks mode的相关知识，请参考：
6. IE6下为什么图片下方有空隙产生
运行代码框&!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&
&meta http-equiv="Content-Type" content="text/ charset=gb2312" /&
&style type="text/css"&
background:
height:110
&img src="/intl/en_ALL/images/logo.gif" alt="google" /&
&/div& [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
解决这个BUG的方法也有很多，可以是改变html的排版，或者设置img 为display:block或者设置vertical-align属性为vertical-align:top | bottom |middle |text-bottom都可以解决.
7. IE6下这两个层中间怎么有间隙
运行代码框&!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&
&meta http-equiv="Content-Type" content="text/ charset=gb2312" /&
&style type="text/css"&
height:100
background:red
height:100
background:orange
&div class="left"&aaaaaa&/div&
&div class="right"&aaaaaa&/div& [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
这个IE的3PX BUG也是经常出现的，解决的办法是给.right也同样浮动 float:left 或者相对IE6定义.left margin-right:-3
8. list-style-image无法准确定位的问题
运行代码框&!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&
&meta http-equiv="Content-Type" content="text/ charset=gb2312" /&
&style type="text/css"&
list-style:url("/attachments//arrowb_kJrcZheJmiIF.gif");
font:12px/25px 宋体;
&li&&a href="#"&web标准常见问题大全&/a&&/li&
&li&&a href="#"&web标准常见问题大全&/a&&/li&
&li&&a href="#"&web标准常见问题大全&/a&&/li&
&li&&a href="#"&web标准常见问题大全&/a&&/li&
&li&&a href="#"&web标准常见问题大全&/a&&/li&
&/ul& [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
这个list-style-image的定位问题也是经常有人问的，解决的办法一般是用li的背景模拟，这里采用相对定位的方法也可以解决
9. LI中内容超过长度后以省略号显示的方法
运行代码框&!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&
&meta http-equiv="Content-Type" content="text/ charset=gb2312" /&
&style type="text/css"&
white-space:
text-overflow:
-o-text-overflow:
&li&&a href="#"&web标准常见问题大全web标准常见问题大全&/a&&/li&
&li&&a href="#"&web标准常见问题大全web标准常见问题大全&/a&&/li&
&li&&a href="#"&web标准常见问题大全web标准常见问题大全&/a&&/li&
&li&&a href="#"&web标准常见问题大全web标准常见问题大全&/a&&/li&
&li&&a href="#"&web标准常见问题大全web标准常见问题大全&/a&&/li&
&/ul& [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
此方法适用与IE与OP浏览器
10.web标准中定义id与class有什么区别吗
运行代码框&!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&
&meta http-equiv="Content-Type" content="text/ charset=gb2312" /&
&style type="text/css"&
color:blue
&div id="aa" class="aa"&
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
&/div& [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
一.web标准中是不容许重复ID的,比如 div id="aa"& 不容许重复2次,而class 定义的是类,理论上可以无限重复, 这样需要多次引用的定义便可以使用他.
二.属性的优先级问题ID 的优先级要高于class,看上面的例子
三.方便JS等客户端脚本，如果在页面中要对某个对象进行脚本操作，那么可以给他定义一个ID，否则只能利用遍历页面元素加上指定特定属性来找到它，这是相对浪费时间资源，远远不如一个ID来得简单.
11.如何垂直居中文本
运行代码框&!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&
&meta http-equiv="Content-Type" content="text/ charset=gb2312" /&
&style type="text/css"&
line-height:30
border:1px solid red
&div&web标准常见问题大全&/div& [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
给容器设置一个与其高度相同的行高就可以了
12.如何对齐文本与文本输入筐
运行代码框&!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&
&meta http-equiv="Content-Type" content="text/ charset=gb2312" /&
&style type="text/css"&
&input type="text" /&aaaaaaaaaaaaaaaaaa [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
遇到此种问题，设置文本框的vertical-align:middle 就可以了
13.为什么FF下面不能水平居中呢
运行代码框&!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&
&meta http-equiv="Content-Type" content="text/ charset=gb2312" /&
&style type="text/css"&
text-align:
height:200
border:1px solid red
&div&&/div& [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
FF下面设置容器的左右外补丁为auto就可以了
14.为什么FF下文本无法撑开容器的高度
运行代码框&!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&
&meta http-equiv="Content-Type" content="text/ charset=gb2312" /&
&style type="text/css"&
height:200
border:1px solid red
&div&web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见&/div& [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
标准浏览器中固定高度值的容器是不会象IE6里那样被撑开的,那我又想固定高度，又想能被撑开需要怎样设置呢？办法就是去掉height设置min-height:200& 这里为了照顾不认识min-height的IE6 可以这样定义：{height:auto!height:200min-height:200}
15.为什么IE6下容器的宽度和FF解释不同呢
运行代码框&?xml version="1.0" encoding="gb2312"?&
&!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&
&meta http-equiv="Content-Type" content="text/ charset=gb2312" /&
&style type="text/css"&
height:200
border:10px solid red
&div onclick="alert(this.offsetWidth)"&web标准常见问题大全&/div&
&hr/& [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
问题的差别在于容器的整体宽度有没有将边框（border）的宽度算在其内，这里IE6解释为200PX ，而FF则解释为220PX，那究竟是怎么导致的问题呢？大家把容器顶部的xml去掉就会发现原来问题出在这，顶部的申明触发了IE的qurks mode，关于qurks mode、standards mode的相关知识，请参考：
16.为什么web标准中IE无法设置滚动条颜色了
运行代码框&!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&
&meta http-equiv="Content-Type" content="text/ charset=gb2312" /&
&style type="text/css"&
scrollbar-face-color:#f6f6f6;
scrollbar-highlight-color:#
scrollbar-shadow-color:#
scrollbar-3dlight-color:#
scrollbar-arrow-color:#000;
scrollbar-track-color:#
scrollbar-darkshadow-color:#
&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/& [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
解决办法是将body换成html
17.为什么我定义的样式没有作用呢
运行代码框&!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&
&meta http-equiv="Content-Type" content="text/ charset=gb2312" /&
&style type="text/css"&
#aa ul li {
color:blue
&div id="aa"&
&li class="aa"&
web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全
&/div& [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
这里你无法用.aa定义到li 遇到这种情况怎么解决呢？答案是提高.aa 的优先权 比如#aa ul li.aa 优先权相关文章参考-baidu搜索关键词: CSS的优先权
18.为什么无法定义1px左右高度的容器
运行代码框&!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&
&meta http-equiv="Content-Type" content="text/ charset=gb2312" /&
&style type="text/css"&
background:
&div&&&/div& [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
IE6下这个问题是因为默认的行高造成的，解决的方法也有很多，例如：overflow:hidden | zoom:0.08 | line-height:1px
19.为什么这个背景颜色无法显示
运行代码框&!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&
&meta http-equiv="Content-Type" content="text/ charset=gb2312" /&
&style type="text/css"&
background:red
&li&web标准常见问题大全&/li&
&li&web标准常见问题大全&/li&
&li&web标准常见问题大全&/li&
&li&web标准常见问题大全&/li&
&li&web标准常见问题大全&/li&
&div style="clear:both"&&/div&
&/ul& [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
IE中设置有背景色的ul并没有显示出来，这个属于haslayout问题，
20.怎么样才能让层显示在FLASH之上呢
运行代码框&!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&
&meta http-equiv="Content-Type" content="text/ charset=gb2312" /&
&style type="text/css"&
height:200
background:red
height:100
web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全
&object type="application/x-shockwave-flash" data="/2005/www/m533-104.swf"&
¶m name="movie" value="/2005/www/m533-104.swf" /&
&/object& [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
解决的办法是给FLASH设置透明¶m name="wmode" value="transparent" /&
21.怎样使一个层垂直居中于浏览器中
运行代码框&!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&
&meta http-equiv="Content-Type" content="text/ charset=gb2312" /&
&style type="text/css"&
margin:-100px 0 0 -100
height:200
&div&web标准常见问题大全&/div& [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
这里我们使用百分比绝对定位，与外补丁负值的方法，负值的大小为其自身宽度高度除以二
22 .图片垂直与容器内
23.如何让div横向排列
运行代码框&!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&
&meta http-equiv="Content-Type" content="text/ charset=gb2312" /&
&style type="text/css"&
height:200
border:1px solid red
&div&web标准常见问题大全&/div&
&div&web标准常见问题大全&/div&
&div&web标准常见问题大全&/div& [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
横向排列DIV可以使用浮动的方式比如float:left,或者设置对象为内联，还可以绝对定位对象等等
web标准相关的一些链接
1．网站标准2．有语义代码3．校验（Validation&）4．易用性（Accessibility&）5．样式表CSS&
发表评论：
TA的最新馆藏[转]&[转]&[转]&[转]&[转]&[转]&}
Hybrid WebApp（54）
H5性能优化意义用户感受一秒钟法则优化方案资源加载首屏加载按需加载Lazyload滚屏加载Media Query（响应式加载）第三方资源异步加载Loading进度条避免30*/40*/50*的http statusFavicon.ico图片的使用格式选择像素控制小图片合并避免html代码中的大小重设避免DataURL使用图片的替代(css3, svg, iconfont)域名/服务端部署Gzip资源缓存，长cache分域名部署(静态资源域名)减少CookieCDN加速代码资源Javascript, CSS合并外联使用js, css压缩html, js, css资源的版本更新Css位置Js位置代码规范避免空src避免css表达式避免空css规则避免直接设置元素style服务端接口接口合并减少接口数据量缓存其他一些建议选择器避免让选择符看起来像是正则表达式。高级选择器不容易读懂，执行耗时也长尽量使用ID选择器尽量使用css3动画资源加载使用srcset首次加载不超过1024KB（或者可以说是越小越好）html和js减少重绘和回流缓存dom选择和计算缓存列表.length尽量使用事件代理,避免批量绑定事件使用touchstart，touchend代替clickHtml使用viewport减少dom节点合理使用requestAnimationFrame动画代替setTimeOut适当使用Canvas动画TouchMove, Scroll事件会导致多次渲染更快一步单页应用资源离线本地数据持久化和更新机制(版本管理)预加载测试方案工具准备ChromeCharles测试标准经典案例图片未优化按需加载优化方案尽可能优化图片, 但是压缩后发现噪点明显增加, 影响了显示效果修改加载方案, 第一次进入后, 只加载本页的图片loading时间降低至1秒左右
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：1081704次
积分：12596
积分：12596
排名：第720名
原创：232篇
转载：286篇
译文：10篇
评论：264条
文章：22篇
阅读：38789
阅读：9860
文章：15篇
阅读：28283
文章：48篇
阅读：98435
(3)(15)(12)(16)(17)(5)(16)(13)(7)(10)(15)(8)(12)(18)(33)(8)(10)(3)(7)(3)(4)(5)(10)(9)(18)(27)(26)(22)(7)(1)(5)(2)(1)(1)(1)(3)(2)(3)(1)(1)(5)(2)(2)(1)(2)(2)(2)(3)(3)(14)(5)(16)(9)(15)(7)(16)(9)(1)(1)(1)(1)(21)(1)(4)(1)(1)(2)(3)(2)(1)(1)(4)(3)(1)WEB标准不是某一个标准，而是一系列标准的集合。网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。对应的标准也分三方面：结构化标准语言主要包括XHTML和XML，表现标准语言主要包括CSS，行为标准主要包括对象模型（如W3C DOM）、ECMAScript等。这些标准大部分由W3C起草和发布，也有一些是其他标准组织制订的标准，比如ECMA（European Computer Manufacturers Association）的ECMAScript标准。我们来简单了解一下这些标准：
1．结构标准语言
XML是The Extensible Markup Language(可扩展标识语言)的简写。目前推荐遵循的是W3C于日发布的XML1.0，参考（）。和HTML一样，XML同样来源于SGML，但XML是一种能定义其他语言的语。XML最初设计的目的是弥补HTML的不足，以强大的扩展性满足网络信息发布的需要，后来逐渐用于网络数据的转换和描述。关于XML的好处和技术规范细节这里就不多说了，网上有很多资料，也有很多书籍可以参考。
（2）XHTML
XHTML是The Extensible HyperText Markup Language可扩展标识语言的缩写。目前推荐遵循的是W3C于日推荐XML1.0（参考）。XML虽然数据转换能力强大，完全可以替代HTML，但面对成千上万已有的站点，直接采用XML还为时过早。因此，我们在HTML4.0的基础上，用XML的规则对其进行扩展，得到了XHTML。简单的说，建立的目的就是实现HTML向XML的过渡。
2. 表现标准语言
CSS是Cascading Style Sheets层叠样式表的缩写。目前推荐遵循的是W3C于日推荐CSS2（参考）。W3C创建CSS标准的目的是以CSS取代HTML表格式布局、帧和其他表现的语言。纯CSS布局与结构式XHTML相结合能帮助设计师分离外观与结构，使站点的访问及维护更加容易。
3.行为标准
DOM是Document Object Model文档对象模型的缩写。根据W3C DOM规范（），DOM是一种与浏览器，平台，语言的接口，使得你可以访问页面其他的标准组件。简单理解，DOM解决了Netscaped的Javascript和Microsoft的Jscript之间的冲突，给予web设计师和开发者一个标准的方法，让他们来访问他们中的数据、脚本和表现层对像。
(2) ECMAScript
ECMAScript是ECMA(European Computer Manufacturers Association)制定的标准脚本语言（JAVAScript）。目前推荐遵循的是ECMAScript 262（）。
1．第一步改善为页面添加正确的DOCTYPE DOCTYPE是document type的简写。主要用来说明用的XHTML或者HTML是什么版本。浏览器根据DOCTYPE定义的DTD(文档类型定义)来解释页面代码。(1)过渡型（Transitional ）&!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"& (2)严格型（Strict ）&!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"& (3)框架型（Frameset ）&!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"& PS:偷懒的办法是可以访问/网站的首页，然后查看源代码，把head区同样的代码拷贝粘贴就可以了。设定一个名字空间（Namespace） 直接在DOCTYPE声明后面添加如下代码：&html XMLns="http://www.w3.org/1999/xhtml" & 一个namespace是收集元素类型和属性名字的一个详细的DTD，namespace声明允许你通过一个在线地址指向来识别你的namespace。只要照样输入代码就可以。声明你的编码语言 为了被浏览器正确解释和通过标识校验，所有的XHTML文档都必须声明它们所使用的编码语言。代码如下：&meta http-equiv="Content-Type" content="text/ charset=GB2312" /& 这里声明的编码语言是简体中文GB2312，你如果需要制作繁体内容，可以定义为BIG5。用小写字母书写所有的标签 XML对大小写是敏感的，所以，XHTML也是大小写有区别的。所有的XHTML元素和属性的名字都必须使用小写。否则你的文档将被W3C校验认为是无效的。例如下面的代码是不正确的：&TITLE&公司简介&/TITLE& 正确的写法是：&title&公司简介&/title& 同样的，&P&改成&p&，&B&改成&b&等等。这步转换很简单。 为图片添加 alt 属性 为所有图片添加alt属性。alt属性指定了当图片不能显示的时候就显示供替换文本，这样做对正常用户可有可无，但对纯文本浏览器和使用屏幕阅读机的用户来说是至关重要的。只有添加了alt属性，代码才会被W3C正确性校验通过。注意的是我们要添加有意义的alt属性，象下面这样的写法毫无意义：&img src="logo_unc_120x30.gif" alt="logo_unc_120x30.gif"& 正确的写法：&img src="logo_unc_120x30.gif" alt="UNC公司标志，点击返回首页"& 给所有属性值加引号 在HTML中，你可以不需要给属性值加引号，但是在XHTML中，它们必须被加引号。例：height="100"，而不能是height=100。关闭所有的标签 在XHTML中，每一个打开的标签都必须关闭。就象这样：&p&每一个打开的标签都必须关闭。&/p& &b&HTML可以接受不关闭的标，XHTML就不可以。&/b& 这个规则可以避免HTML的混乱和麻烦。举例来说：如果你不关闭图像标签，在一些浏览器中就可能出现CSS显示问题。用这种方法能确保页面和你设计的一样显示。需要说明的是：空标签也要关闭，在标签尾部使用一个正斜杠"/"来关闭它们自己。例如：&br /& &img src="webstandards.gif" /& 经过上述七个规则处理后，页面就基本符合XHTML1.0的要求。但我们还需要校验一下是否真的符合标准了。我们可以利用W3C提供免费校验服务（）。发现错误后逐个修改。2．第二步改善接下来我们的改善主要在结构和表现相分离上，这一步不象第一步那么容易实现，我们需要观念上的转变，以及对CSS2技术的学习和运用。但学习任何新知识都需要花点时间的，不是吗？诀窍在于边做边学。假如你一直采用表格布局，根本没用过 CSS，也不必急于跟表格布局说再见，你可以先用样式表代替 font 标签。随着你学到的越多，你能做的就越多。好，一起来看看我们需要做哪些事：用CSS定义元素外观 我们在写标识时已经养成习惯，当希望字体大点就用&h1&，希望在前面加个点符号就用&li&。我们总是想&h1&的意思是大的，&li&的意思是圆点，&b&的意思是“加粗文本”。而实际上， &h1&能变成你想要的任何样子，通过CSS，&h1&能变成小的字体，&p&文本能够变成巨大的、粗体的，&li&能够变成一张图片等等。我们不能强迫用结构元素实现表现效果，我们应该使用CSS来确定那些元素的外观。例如，我们可以使原来默认的6级标题可以看起来大小一样：h1, h2, h3, h4, h5, h6{ font-family: 宋体, font-size: 12 } 用结构化元素代替无意义的垃圾 许多人可能从来都不知道HTML和XHTML元素设计本意是用来表达结构的。我们很多人已经习惯用元素来控制表现，而不是结构。例如，一段列表内容可能会使用下面这样的标识：句子一&br /& 句子二&br /& 句子三&br /& 如果我们采用一个无序列表代替会更好：&ul& &li&句子一&/li& &li&句子二&/li& &li&句子三&/li& &/ul& 你或许会说“但是&li&显示的是一个圆点，我不想用圆点”。事实上，CSS没有设定元素看起来是什么样子，你完全可以用CSS关掉圆点。给每个表格和表单加上id 给表格或表单赋予一个唯一的、结构的标记，例如&table id="menu"& 接下来，在书写样式表的时候，你就可以创建一个“menu”的选择器，并且关联一个CSS规则，用来告诉表格单元、文本标签和所有其他元素怎么去显示。这样，不需要对每个&td&标签附带一些多余的、占用带宽的表现层的高、宽、对齐和背景颜色等等属性。只需要一个附着的标记（标记“menu”的id标记），你就可以在一个分离的样式表内为干净的、紧凑的代码标记进行特别的表现层处理。中级改善我们这里先列主要的三点，但其中包含的内容和知识点非常多，需要我们逐步学习和掌握，直到最后实现完全采用CSS而不才用任何表格实现布局。
DIV＋CSS网页布局入门
你正在学习CSS布局吗？是不是还不能完全掌握纯CSS布局？通常有两种情况阻碍你的学习： 第一种可能是你还没有理解CSS处理页面的原理。在你考虑你的页面整体表现效果前，你应当先考虑内容的语义和结构，然后再针对语义、结构添加CSS。这篇文章将告诉你应该怎样把HTML结构化。 另一种原因是你对那些非常熟悉的表现层属性(例如：cellpadding,、hspace、align="left"等等)束手无策，不知道该转换成对 应的什么CSS语句。当你解决了第一种问题，知道了如何结构化你的HTML，我再给出一个列表，详细列出原来的表现属性用什么CSS来代替。 结构化HTML
我们在刚学习网页制作时，总是先考虑怎么设计，考虑那些图片、字体、颜色、以及布局方案。然后我们用Photoshop或者Fireworks画出来、切割成小图。最后再通过编辑HTML将所有设计还原表现在页面上。 如果你希望你的HTML页面用CSS布局(是CSS-friendly的)，你需要回头重来，先不考虑“外观”，要先思考你的页面内容的语义和结构。 外观并不是最重要的。一个结构良好的HTML页面可以以任何外观表现出来，CSS Zen Garden是一个典型的例子。CSS Zen Garden帮助我们最终认识到CSS的强大力量。 HTML不仅仅只在电脑屏幕上阅读。你用photoshop精心设计的画面可能不能显示在PDA、移动电话和屏幕阅读机上。但是一个结构良好的HTML页面可以通过CSS的不同定义，显示在任何地方，任何网络设备上。
开始思考
首先要学习什么是"结构"，一些作家也称之为"语义"。这个术语的意思是你需要分析你的内容块，以及每块内容服务的目的，然后再根据这些内容目的建立起相应的HTML结构。 如果你坐下来仔细分析和规划你的页面结构，你可能得到类似这样的几块： 标志和站点名称 主页面内容 站点导航(主菜单) 子菜单 搜索框 功能区(例如购物车、收银台) 页脚(版权和有关法律声明)
我们通常采用DIV元素来将这些结构定义出来，类似这样： &div id="header"&&/div& &div id="content"&&/div& &div id="globalnav"&&/div& &div id="subnav"&&/div& &div id="search"&&/div& &div id="shop"&&/div& &div id="footer"&&/div& 这不是布局，是结构。这是一个对内容块的语义说明。当你理解了你的结构，就可以加对应的ID在DIV上。DIV容器中可以包含任何内容块，也可以嵌套另一个DIV。内容块可以包含任意的HTML元素---标题、段落、图片、表格、列表等等。 根据上面讲述的，你已经知道如何结构化HTML，现在你可以进行布局和样式定义了。每一个内容块都可以放在页面上任何地方，再指定这个块的颜色、字体、边框、背景以及对齐属性等等。
使用选择器是件美妙的事id的名称是控制某一内容块的手段,通过给这个内容块套上DIV并加上唯一的id,你就可以用CSS选择器来精确定义每一个页面元素的外观表现,包括标 题、列表、图片、链接或者段落等等。例如你为#header写一个CSS规则，就可以完全不同于#content里的图片规则。 另外一个例子是：你可以通过不同规则来定义不同内容块里的链接样式。类似这样：#globalnav a:link或者 #subnav a:link或者#content a:link。你也可以定义不同内容块中相同元素的样式不一样。例如，通过#content p和#footer p分别定义#content和#footer中p的样式。从结构上讲，你的页面是由图片、链接、列表、段落等组成的，这些元素本身并不会对显示在什么网络 设备中(PDA还是手机或者网络电视)有影响，它们可以被定义为任何的表现外观。 一个仔细结构化的HTML页面非常简单，每一个元素都被用于结构目的。当你想缩进一个段落，不需要使用blockquote标签，只要使用p标签，并对p 加一个CSS的margin规则就可以实现缩进目的。p是结构化标签，margin是表现属性，前者属于HTML，后者属于CSS。(这就是结构于表现的 相分离.) 良好结构的HTML页面内几乎没有表现属性的标签。代码非常干净简洁。例如，原先的代码&table width="80%" cellpadding="3" border="2" align="left"&，现在可以只在HTML中写&table&，所有控制表现的东西都写到CSS中去，在结构化的HTML中， table就是表格，而不是其他什么(比如被用来布局和定位)。 亲自实践一下结构化 上面说的只是最基本的结构，实际应用中，你可以根据需要来调整内容块。常常会出现DIV嵌套的情况，你会看到"container"层中又有其它层，结构类似这样： &div id="navcontainer"& &div id="globalnav"& &ul&a list&/ul& &/div& &div id="subnav"& &ul&another list&/ul& &/div& &/div& 嵌套的div元素允许你定义更多的CSS规则来控制表现，例如：你可以给#navcontainer一个规则让列表居右，再给#globalnav一个规则让列表居左，而给#subnav的list另一个完全不同的表现。
用CSS替换传统方法 下面的列表将帮助你用CSS替换传统方法： HTML属性以及相对应的CSS方法 HTML属性
CSS方法说明 align="left" align="right" float: float: 使用CSS可以浮动 任何元素:图片、段落、div、标题、表格、列表等等 当你使用float属性，必须给这个浮动元素定义一个宽度。 marginwidth="0" leftmargin="0" marginheight="0" topmargin="0" margin: 0; 使用CSS, margin可以设置在任何元素上, 不仅仅是body元素.更重要的，你可以分别指定元素的top, right, bottom和left的margin值。 vlink="#333399" alink="#000000" link="#3333FF" a:link #3 a:visited: #339; a:hover: #999; a:active: #00f; 在HTML中，链接的颜色作为body的一个属性值定义。整个页面的链接风格都一样。使用CSS的选择器，页面不同部分的链接样式可以不一样。bgcolor="#FFFFFF" background-color: # 在CSS中，任何元素都可以定义背景颜色，不仅仅局限于body和table元素。bordercolor="#FFFFFF" border-color: # 任何元素都可以设置边框(boeder)，你可以分别定义top, right, bottom和leftborder="3" cellspacing="3" border-width: 3 用CSS，你可以定义table的边框为统一样式，也可以分别定义top, right, bottom and left边框的颜色、尺寸和样式。 你可以使用 table, td or th 这些选择器. 如果你需要设置无边框效果，可以使用CSS定义： border-collapse: &br clear="left"& &br clear="right"& &br clear="all"&
clear: clear: clear: 许多2列或者3列布局都使用 float属性来定位。如果你在浮动层中定义了背景颜色或者背景图片，你可以使用clear属性. cellpadding="3" vspace="3" hspace="3" padding: 3 用CSS，任何元素都可以设定padding属性，同样，padding可以分别设置top, right, bottom and left。padding是透明的。 align="center" text-align: margin-right: margin-left: Text-align 只适用于文本. 象div，p这样的块级怨毒可以通过margin-right: 和margin-left:来水平居中
一些令人遗憾的技巧和工作环境
由于浏览器对CSS支持的不完善，我们有时候不得不采取一些技巧(hacks)或建立一种环境(Workarounds)来让CSS实现传统方法同样的效 果。例如块级元素有时侯需要使用水平居中的技巧，盒模型bug的技巧等等。所有这些技巧都在Molly Holzschlag的文章《Integrated Web Design: Strategies for Long-Term CSS Hack Management》中有详细说明。 另外一个关于CSS技巧的资源站点是Big John和Holly Bergevin的“Position is Everything”。 理解浮动行为
Eric Meyer的《Containing Floats》将帮助你掌握如何使用float属性布局。float元素有时候需要清除(clear)，阅读《How To Clear Floats Without Structural Markup》将非常有帮助。 更多帮助
已有的《CSS Discussion》列表是很好的资源，它收集了一个WiKiA讨论组的信息，其中包括CSS布局总结(css- /?page=CssLayouts)，CSS 技巧总结 (css-/?page=CssHack) 以及更多
在做项目的过程中，我们经常会建立各种各样的规范，以方便团队之间更好的合作更好的完成项目；同样我们也经常会听到各种各样的协议，比如Google的IM软件Gtalk使用的开放的XMPP协议，只要其他IM软件也遵循XMPP协议就能与Gtalk使用互通；而互联网上的信息无以计数，这些信息本身是独立存在的，如何将其串联并呈现在用户眼前，就需要使用到HTTP协议。
同样的道理，因为浏览器们各自的内核不同，对于默认样式的渲染也不尽相同，所以就需要一份各浏览器都遵循的规则来保证同一个网页文档在不同浏览器上呈现出来的样式是一致的，这个规则就是DOCTYPE声明。
因为互联网是互通的，所以任意的两个或者以上的网页文档都可能会涉及到数据交换，而因为XML语言是允许用户自定义标签的，所以任意两个交换的文档就可能会出现相同的标签，从而导致相同标签的冲突，所以就需要一个命名空间以区分开交换文档中可能存在的相同标签。
XHTML做为HTML向XML过渡的一种语言，并不能实现XML语言中的用户自定义标签，所以XHMTL文档中的命名空间都是相同的：
&html xmlns=”http://www.w3.org/1999/xhtml”&
xmlns即是XHTML namespace的缩写，也就是所谓的“命名空间”。与DOCTYPE声明一样，xmlns也属于一种声明。与HTML文档中仍然存在DOCTYPE声明不一样的是，在HTML文档是不存在xmlns的，我们平常所见到的xmlns都是出现在XHTML文档中的。
在制作一个网页的时候，除了在开始的时候声明DOCTYPE（文档类型）之外，如果是XHTML文档还需要声明命名空间，而第三个需要声明的就是网页文档的字符编码类型：
&meta http-equiv=”Content-Type” content=”text/ charset=utf-8″ /&
为了能被浏览器正确的解释以及通过W3C验证，每个XHTML文档都应该声明所使用的字符编码。很多时候网页文档出现乱码大部分都是由于字符编码不对而引起的。
utf-8是unicode的一种变长度的编码表达方式，做为一种全球通用型的字符编码正越来越多的网页文档所使用，使用utf-8字符编码的网页可最大程度的避免不同区域的用户访问相同网页时因字符编码不同而导致的乱码现象。
但是当我们打开国内的大多数网站看，特别是门户型的大型网站，关于字符编码的声明却并非是utf-8，而是gb2312：
&meta http-equiv=”Content-Type” content=”text/ charset=gb; /&
当然，除了gb2312外还有一些网站使用gbk或者是gb18030编码，这三种字符编码都是属于简体中文字符集。也就是说，如果一台电脑没有安装简体中文字符集时，当它访问字符编码为gb2312的中文网页时，则显示出来的是乱码。
既然使用gb2312字符编码时会因为不同区域的用户访问而可能出现乱码现象，那为何不使用utf-8呢？
其中一个原因可能历史遗留的原因，而另一个更重要的原因应该是由于两种编码的存储方式不同而造成的文档体积不同。
使用gb2312字符编码集时，一个汉字是占用2个字节的大小，而一个汉字在utf-8编码中所占的字节数却往往都是在3个字节，甚至是3个以上的字节。所以对于同一个中文文档来说，使用gb2312字符编码来进行存储的体积是要小于utf-8编码所存储的文档大小的。
而对于文字多访问量大的中文网站来说，使用gb2312编码的网页文档在下载传输上可以节省下不小的流量，再者是因为中文网站的用户群体基本上都锁定在中文用户上，这些也就是很多网站使用gb2312编码而不是utf-8编码的原因。
但是文字多访问量大的网站，国内并不多，再加上可能成对的乱码问题，所以在制作网页的时候推荐使用utf-8编码。
当然，不管用何种编码，最重要的是整站使用的编码要统一。
对于字符编码的声明除了上面的方式，还可能看到另一种声明方式：
&meta http-equiv=”Content-Language” content=”gb; /&
&meta http-equiv=”Content-Language” content=”zh-CN” /&
这种声明方式是针对老版本的浏览器的，在浏览器已经普遍更新换代的今天已经不推荐使用这种声明方式。
在较早之前的网页上，我们经常可以看到如下的网页结构代码：
&title&这是一个网页&/title&
&meta name=”…” content=”…” /&
……
……
很显然的，这种结构的网页代码是不符合Web标准规范的，但是浏览器仍然可以很好的呈现出这个网页来，只要代码没出什么错误。这个其实就像是用Table布局的页面跟Div构架的页面一样，浏览器都可以呈现出来，关健是哪个页面呈现的质量会更高。
做出一个页面，跟做好一个页面，中间有着很遥远的距离。
在浏览器的发展历程中，微软凭借着将Internet Explorer捆绑进Windows操作系统中，从来成为浏览器市场上的霸主，从而也造成了一系列的IE对W3C组织所制定的Web标准于不顾的事情，微软的IE一直都只遵循自家的Web标准。很庆幸的是，微软决定在他的IE8中支持Web标准，虽然这事还没最终确定。除微软的IE外，Mozilla Firefox、Apple Safari、Opera、Chrome等浏览器则以支持Web标准的名义与IE做得长久的对抗。
浏览器的不同，于是就造成了对HTML代码默认解析的不同，所以即使同样的代码在不同的浏览器下也可能呈现出不同的样式来，于是这就需要有一份众浏览器都遵循的规则来协调众浏览器之间的差异，这份规则需要一个声明来引用它，这个声明就是DOCTYPE——document type（文档类型）。
DOCTYPE声明是标准网页中必不可少的部分，所以，想要制作一个符合W3C标准的网页，首先就需要为这个页面声明一个文档类型。
DOCTYPE所声明的DTD（文档类型定义）分为三种，分别是：
Transitional（过渡的）：要求不是很严格的DTD，允许你继续在页面中使用HTML4.01的标签；
Strict（严格的）：这是制作页面时理想的DTD方式，但是这个文档类型定义不允许使用任何的表现层上的标签和属性；
Frameset（框架的）：这个专门针对页面设计中包含有框架的DTD。
由于框架型的设计可能对网页在搜索引擎中收录的影响，很多网页中都不使用框架设计；而Strict的DTD对于大多数人来说还只是一种理想化的方式；Transitional型的DTD则是目前最适用也是使用最广泛的文档类型定义。
现在随便打开一个符合Web标准的网页，都可以在页面的最开始处看到这样一句声明：
&!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&
这是一个关于XHTML网页文档的DOCTYPE声明。当然并不是说DOCTYPE声明只能针对XHTML网页文档，对于使用HTML4.01的网页文档来说，同样可以使用DOCTYPE声明：
过渡的DTD：
&!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”&
严格的DTD：
&!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”&
唯一需要注意的是，DOCTYPE声明的位置必须是位于页面的最开始处，在DOCTYPE声明代码之前不能出现任何的代码或是标签，否则页面中的标签或是CSS样式可能会失效。
在HTML4 Elements中共计有91个标签，然而在这么多的标签中经常被使用到的标签不到四分之一，在这些常用的标签中有两个标签是属于最通用型的——div、span，这两个结构性的标签因为本身不带呈现样式及语义而被广泛的用于网页制作中，再加上之前很多人直接把WEB标准误解为就是div+css，于是在一个页面里出现了特多的div或者是span标签，尽管这些地方本身有更符合语义的标签来实现。
Table式的页面布局因为其本身的简便以及有Dreamweaver这样的可视化操作的Web制作软件的存在，从而引领了Web制作的一个时代，也正是因此而导致了过多的Web设计人员从来没有真正关注过HTML标签的真正语义，当Web标准开始兴起的时候，于是就直接被理解成是div+css的布局。
于是Web标准中的结构标签几乎变成了div的秀场。
div标签的过度使用，已经导致了很多人对于Web标准的误解，最明显的一点就是，当网页切换到使用div标签布局后，table标签便被无情的抛弃，俨然Web标准已经被理解成就是div+css。而事实上，table标签是不能被抛弃的，当需要显示数据内容时，由table标签构建的HTML结构的优势要强于div标签构建的布局，table标签仍然是显示数据时最符合HTML语义的标签。
Table页面布局所生成的过多的冗长代码，以及混杂其中的HTML样式属性，已经严重影响到页面的性能，尤其是对于大访问量的网站，解决的方法即是对页面进行基于Web标准的重构。然而对Web标准的误解，造成页面整体结构上div被过多的使用；以及Table布局所遗留下来的思想，造成页面上的结构嵌套过多。这些仍然影响着页面的整体性能。
所以，以更符合语义化的标签来构建页面，是Web标准推崇的理念。在这个理念下构建的页面还应该尽量的精简代码，使页面代码尽量的保持轻简，让浏览器更快速呈现的同时也便于日后的代码维护。
Web标准并不是某一个单独的标准，而是一系列标准的集合，包括结构、表现、行为三部分。这里的结构并不是指div，而是指标准化的语言——XHTML、XML。
明明&strong /&标签可以实现粗体样式，为什么还要用&span /&标签再搭配粗体样式去实现呢？
在许多人看来，HTML应该是WEB制作所有语言中最简单的语言，因为它不需要编译、封闭等，甚至只需要一个记事本就可以让其在浏览器中呈现出来。所以我们也看到很多人都在说HTML很简单超简单之类的话，网上也有很多诸如“花个两三天学习下HTML就可以制作网页”之类的理论。在这些人看来，学HTML就像是学英文字母ABC一般简单。
正是这样的理论这样的思想，导致学习HTML的人都不把它当回事，认为HTML仅仅只是诸如“加粗用&B /&标签，斜体用&I /&标签”之类的应用。这样的思想尤其是在初学者当中流传，而一旦真正深入的了解学习HTML之后，才会发现HTML远非想像中的那么简单。
而随着WEB标准大潮的席卷互联网，更多的人索性就差不多抛弃HTML众多标签般的只用DIV，似乎DIV+CSS就是WEB标准的核心。这个错误的理论与HTML超简单的理论被绑在了一起，在互联网中传播着。思想改变行动，最终造成了WEB标准在国内互联网推行的困难重重。
真正的WEB标准应该是推崇以更合适的语义标签来制作网页结构，完全不是在整个页面写满DIV就是符合WEB标准。与此相同的道理是，HTML远远不是你所想像中的那么简单。
一个网站在浏览器中呈现效果的好坏，视觉因素占一半的比重，而另一半的比重就在于网页的结构上。
我们可以在网上看到很多整个页面都是由DIV架构的网页，这些DIV结构的页面在配合上CSS时，整个页面在浏览器中呈现的也许很正常，并看不出什么问题。可是如果用户禁用掉CSS之后呢？浏览器还能否正确的理解网页结构并呈现出来，就成了判断这个网页结构好坏的很重要的一个标准。而对于这些完全由DIV结构组成的页面，很显然的，在CSS被禁用之后，浏览器就很难呈现出一个结构清晰明了的页面来，而用户自然也很难从结构上去判断哪些内容是标题，哪些内容是真正的内容。
而如果在页面中采用了更符合语义的HTML标签的话，即使CSS样式在被禁用之后，浏览器依然可以根据&h /&标签来显示成标题，根据&p /&标签来显示成段落，最终仍然可以为用户呈现出结构清晰明了的页面。
如果把网站建设比喻成是建造一栋大厦，那么HTML无疑就是这栋大厦的基石，如果基石不够坚稳的话，那么这栋大厦就很有可能会面临倾倒的危险。
从深层次理解并学习HTML的标签语义，从思想上重视HTML，别忘了，整个网站都是基于HTML结构来呈现的。
WEB标准学习经验总结
今天在群里，熊猫君提议整理一个帖子，一方面为初学者提供一个入门指南，另一方面也象借此和已经在从事这个行业进行一点交流。下面是我从事这个行当多年的一些经验总结，希望抛砖引玉，大家不吝赐教。１、必备工具 其实web标准并不是很复杂的技术，实现web标准的工具也很简单，说白了，只要可以进行纯文本编辑的软件，都可以作为代码编写的gon工具。例如记事本、UltraEdit甚至CuteFTP的编辑器（象我这种懒人有时候就用那玩艺儿直接在线编辑，汗）。 而另一些较专业软件会提供高亮显示代码（前面提到的UltraEdit也具有此项功能）、代码提示、自动闭合标签等等功能，使用起来会大大提高工作效率。如DreamWeaver、MS&Expression、EditPlus等等，这些编辑软件目前是绝对的主流，无论是初学者上手容易还是专业人士提高效率都是不错的选择。 再说说浏览器环境，目前一台机器同时装IE、Firefox、Opera、Safari已经不是难事，而IE7&Standalone和MultipleIE的问世也让IE7和低版本IE并存成为可能。推荐浏览器环境——本机安装IE7、FF、Opera、Safari，同时安装MultipleIE。从我个人的使用经验，IE7&Standalone存在一定的缺陷，有可能导致本机安装的IE6无法正常使用。 除了编辑器以外，还有就是必不可少的调试工具啦，首推当然是Firefox下的Firebug！IE下目前还没有与之相当的调试工具，比较好的有IE&development&toobar、IE&Debugbar等等，不过和Firebug完全不是一个档次的东西，只能说勉强凑合用。２、必备的HTML/XHTML基础 说到基础，其实正是我最想谈的。从论坛许多的帖子也可以看出来，大多数问题的产生是由于制作者本身基础的不牢固。而HTML/XHTML作为基础中的基础，更是许多人的薄弱环节。然而很多人还是喜欢一上来就问布局或者Hack这些技巧方面的问题，其实很多问题如果本人的基础牢固了，几乎不能被称之为问题。 web标准必备的HTML/XHTML基础，大致有几个方面： 1、每个标签的语义，这一点是网页标准的根本。而整个网页标准化几乎都是围绕着这一点而来的，明确了语义，才能选择合适的标签；明确了语义，才能构建可读性良好的结构。例如&h1&就是网站最高等级的标题，它不应该放在&h2&层级之下；例如&fieldset&和&legend&，主要用于表单元素分组，不应该因为它那个漂亮的边框就用来表现新闻列表。 2、每个标签的初始样式，现在有很多重置标签样式就是针对这一点，因为每个标签在不同浏览器下的初始样式是不同的，而重置样式是为了更好地实现网页兼容性。从我个人的角度来说，不推荐初学者一上来就了解如何重置样式，而应该从了解标签的初始样式入手，先了解了这些，才能明白每一行重置样式的代码的真正含义。 3、标签的正确嵌套规则，同时还必须了解的是哪些标签属于块元素，而哪些属于行内元素。这是即使是高手也会经常忽略的方面，例如本人（^_^）。今天看到/thread--1.html这个帖子的时候，才意识到，原来之前对dt、dd的嵌套规则理解有误，二者不能一视同仁。HTML/XHTML的嵌套规则并不算简单，常用的标签不过三十个上下，就有大约二十种不同的嵌套规则，稍不留神就会出错。虽然不严格遵循并不会影响页面的表现，但养成一个良好的习惯是很重要的，它往往能决定你在这条路上可以走多远。 4、标签的属性。这个又要分为两方面，一是符合标准的常用属性及对应的值，例如&table&的summary属性、&th&&td&的scope属性、&label&的for属性等等；二是标准强制要求的属性，例如图片的alt属性、form的action属性、textfield的col属性和row属性等等。 HTML/XHTML基础，虽然可以分开成多个方面讲，但实际关于它们的知识往往是综合在一起的，大多数相关的手册几乎都有详尽的介绍。对于这方面知识的学习，除了看相关手册外，多把自己的网页拿去w3c做校验也是不错的方法。３、必须了解的CSS知识 CSS是标准化最吸引人的地方，也是时下讨论最多的话题，市面上的相关书籍也在web标准类里占据压倒性的比重，甚至有些人（包括一些用人单位）认为CSS就是网页标准。这种过于夸大CSS作用的观点固然是错误的，但CSS对于网页标准的重要性却也可见一斑。 CSS相关的知识、技巧很多，从知识的必备性方面来讲，以下几个方面是我认为最重要的： 1、布局。布局是表现层技术的基础，任何表现层的东西都是基于布局之上的。利用CSS布局的方法有很多种，例如float、绝对定位、负margin等等。每一种布局都有着各自的优势和局限性，从适性最广来讲显然是float最佳，也最为常用，但清除浮动往往是让人头疼的问题。绝对定位的网页抗压性好，但自由度低，而且渲染效率最差。负margin是最不破坏文档流的办法，但在对负值支持不佳的IE下往往会有灵异表现。关于布局方面的知识，建议看一下webflash的《彻底弄懂CSS盒子模式》系列文章，个人认为相关知识的文章尚无出其右者。 2、IE下的Haslayout渲染模式。其实hack是许多标准工程师所深恶痛绝的东西，但在浏览器兼容性要求越来越高的今天，hack却往往是一种无奈之举。而深入了解IE的Haslayout渲染模式，就会明白许多hack的来由，以及许多兼容性问题的产生之源。推荐阅读——译文On&having&layout。然而HasLayout问题之多，绝非一两篇文章所能概括，通过阅读文章，了解其中的原理，再举一反三，很多问题就会迎刃而解了。 3、符合标准的CSS规则。关于这一点，我可以不负责任地说，数以千万计的网站，其CSS完全符合标准的，所占比重不会超过1%。这并不是一个悲观的估计，即使是w3c推荐的一些网站，例如ESPN，他们的CSS也时常会通不过校验。CSS的许多规则的确令CSSer们非常不适，例如background和color，这两个属性绝大多数人都是分开来使用的，而w3c标准却规定两者必须“生则同生，死则同死”。还有就是各个浏览器的专有属性，在实现一些效果时是最简单有效的。这种时候我们往往会选择放弃标准，但暂时的放弃不意味着无视。今天知道我们哪些行为是错误的，以及为什么要用错误的方法，明天改正起来就不会太难。 4、提高网站性能的技巧，如有助于SEO的以图代字、用尽量少和小容量的图片实现圆角表格、用background-position实现图片切换以提高渲染效率等等。从对网站的帮助角度来看，这些技巧远比浏览器hack更值得掌握。 5、了解一点js知识。这个和CSS关系不是那么密切，但经常看到很多人钻牛角尖，用js可以非常简单实现的效果，非要用CSS去勉强实现。例如将子菜单放在链接里，通过:hover触发。又比如多列等高布局的实现。这已经是行为层的范畴了，为什么还非要用表现层来实现呢？当然这里并不是说所有CSS不容易实现的都往js里扔，而是要了解一下双方的技术特点，合理地选用最佳方案。４、必备的网站样式管理技巧 1、规范化的命名与合理的代码重用性，也就是ID和class。对不起，这里又要老生常谈一下，因为昨天刚刚又看到一个通篇没有用一个ID的网站。ID和class是属于结构层的，不过CSS的调用却几乎都要通过ID和class来实现。但是，ID和class不仅仅是为了调用CSS样式而存在的。恰恰相反，是良好的ID和class构建的结构给了CSS大展身手的舞台。搞反了彼此关系，其实还是表现主导结构的思路，也就和满屏幕的table没有本质区别。理清了ID、class和CSS的关系，再来谈命名，命名其实只有一个基本原则，就是结构化。当然，在结构化之余，body、框架、模块之间的命名如能以某种形式加以区别（我个人习惯是加不同前缀），会让代码更加清晰。 2、样式文件的管理，也就是如何存储网站的样式文件。如果是一个很小的网站，把所有样式存在一个文件中也是没有问题的。但大网站的CSS往往几十上百k，全部存在一个文件里不但影响网页加载，也不利于修改维护。如何分割CSS，需要事先做好规划，无论是按栏目按功能还是按层级，要根据自己网站的特点。５、其他 期待大家继续补充……
对话闲聊DIV+CSS与WEB标准
“Web标准”这个词听说好久了，但是到底什么是Web标准呢？我们该如何实现Web标准呢？DIV+CSS布局是Web标准吗？实现Web标准到底有什么好处呢？不知上面这些问题大家以前是怎么认为的，至少我以前很傻乎乎的认为“Div+CSS布局就是符合Web标准”。下面是布鲁斯狼和其老友的一段聊天对话，看完后希望大家在对“Web标准”的理解上有进一步的提高和认识！对话一横导航链接为什么要用UL+LI为什么不直接在一行写上文本链接呢 列表本身就有列表符号，同时列表项也要分行显示做成横向的，既要使得不显示列表符号，又要将他们内嵌到一行。----------------------------------------------------------------------------------思维是这样的。什么才是标准。什么叫分离。什么叫结构。标准是一系列标准。分离的是表现，内容和行为。而内容则决定了结构。用合适的标签来组织文档，这是内容（结构）的基础。导航从其本意上说，不是一个段落P，更不是一些个标题Hx，也不是一个DIV，DIV只是部分与分区。导航实质上就是一个无序列表。也就是说，用UL+LI来组织导航的内容，更具有语义，具有更好的结构。至于说，列表项预设标记，与垂直竖向的方式。是撇开不谈的。只需要建立一个具有良好结构与富含语义的文档即可。表现，交给CSS完成。行为，交给JS完成。对话二列表通用性较广，是不是做出语义性元素更有针对性？----------------------------------------------------------------------------------在页面中很多元素，都是列表元素。不过在使用的时候，要注意，不要滥用。另外在UL外面，更多的时候不需要外设DIV标签，它本身就是一个块元素。对话三现在全靠 div span ul ，标准里面不标准。----------------------------------------------------------------------------------现在标准是不够标准，但分离与结构的原则应该是很重视的。能有好的结构，分离的够彻底，就很不错了对话四Web标准是CSS布局 准确么 ----------------------------------------------------------------------------------不正确。CSS布局是实现WEB标准的基础对话五如何实现Web标准----------------------------------------------------------------------------------结构化文档。行为，表现，内容，三者分离。具有更好的适应性与扩展性。并不是说，用CSS进行布局就是标准了。这只是其中一步。对话六谈到把DIV+CSS说成Web标准的普遍说法，其实有些人硬找茬，大家都知道Web标准不只是这些，是思想，是内容和表现分离的主导思想，是结构化代码，而代码中的代表DIV就成了焦点了……另外，我觉得DIV+CSS已经类似于中国语言中的“约定俗称”，大家都知道这层意思了 ----------------------------------------------------------------------------------对，我就说的随大流。DIV+CSS，实际上成为CSS网页布局的代名词。而CSS网页布局就是WEB标准化构成的一个环节而已。除了CSS，还要讲结构HTML，讲DOM，JAVASCRIPT等等。最后就一个结果，要想符合标准，先DIV+CSS再说~~~~~~~~~~~~但并不是DIV+CSS，就是标准了。
怎样才是符合web标准?
简单说就是不用HTML+table来设计页面，改用XHTML+CSS来实现。
怎样是代码校验?
代码校验就是检查你制作好的页面是否完全符合web标准。通常可以到W3C的网站去校验。
什么是DocType,有什么用?
DOCTYPE是document&type(文档类型)的简写，用来说明你的网页是什么标识语言(XHTML或者HTML)是什么版本。&
我应该使用是么样的DOCTYPE?
初次学习web标准的设计师推荐使用XHTML&1.0过渡式的DTD，代码如下：
&!DOCTYPE&html&PUBLIC&"-//W3C//DTD&XHTML&1.0&Transitional//EN"&"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&&
遵循web标准就不能使用表格了吗?
可以使用表格。只是表格仅仅用于其本意：展示数据列表。而不允许使用表格排版和定位。&
遵循web标准可以使用Flash吗?
可以。但是&embed&不允许使用。暂时只能采用js调用来通过W3C校验。&
不用表格可以制作出漂亮的页面布局吗?
可以。CSS可以实现几乎所有用table实现的布局。参考成功网站:,,,&
有什么关于web标准好书推荐吗?
web标准的概念和实践推荐Zeldman的《网站重构--用web标准进行设计》；CSS入门和进阶推荐Eric&Meyer的《CSS权威指南》《More&Eric&Meyer&on&CSS》。&
CSS布局比表格难吗?
这要看你怎么想了。变革和观念转换总是有困难的，你认为这个转变是值得的，那么你会发现CSS并不比表格难。
表格布局是不是马上要淘汰了?
不会。至少现在还有成千上万的(老的和新建的)网页依然使用表格布局。新技术的过渡和普及需要时间。
经过1天多的艰苦奋战，终于把html（Hypertext markup language）的基础教程给看完了。
这次为了xml而看了这“古老”的技术，还是有点收获的。。总体来说，虽然不是很熟练，但是看懂一般的html网页源文件已经不是问题了。闲来无事，就写写笔记吧，说说感受也好！
html给我的感觉是很标准，很有格式的。最主要的代码特点就是标记成对的出现，虽然有些可以省略，但是建议除非太过烦琐还是把前后都加上去吧！作为一个完整的html网页，总是有头部，主体和结尾3大部分，分别用&head&&/head&,&body&&/body&和&/html&表示。另外，一个重要特性就是可以自定义风格（CSS），这是非常方便的，类似于编程语言的类的功能吧！同时，还可以嵌入其他script来增强其交互功能。而对于相当重要的标记，也只是由头部标识和属性所组成。（&标识 属性1 属性2 属性3...&）看来，学习html是学习其他网页脚本语言的基础吧，同时对于学习可视化网页设计也是有帮助的（这么说应该不过分吧！）！，下面就让我们一起来详细分析各个部分的构成元素。
2常见标记介绍
其实大多数html网页的标记不多，就只有10几个吧！（看到这里，好！）这里主要介绍一下常见的控制文件的外观和布局的标记！
&h&:从&h1&到&h6&所标识的字体依次减小，一般来说，&h1&用来标记文件标题&h2&用来标记一章的标题&h3&用来标记章节的标题，&h6&则是来作为小字印刷，如版权信息等等。
&p&和&br&:基本类似于回车键的功能，而&p&可以插入空格，同时也可以附带属性，如&p align=right&效果&p&（缺省情况是左对齐，左对齐很多排列方式的缺省情况）
&div&:虽然类似于&p&,也可以使用align属性，但是在使用风格表格时功能强大。（风格表格见后）
&hr&:可以产生一条水平线，对于组织格式是很有帮助的。
在这里应该说一说逻辑标记和物理标记的差别：物理标记表明信息的外观，而逻辑标记表明信息的语义。从适用范围来说，使用逻辑标记更值得推荐，因为逻辑标记表示的是本质特性，不随浏览器的变化而变化！
逻辑标记：&cite&&dfn&&strong&&code&&ins&&del&（注：大家可以自己测试一下，看看有什么效果，其中ins和del是很有用的标记，特别是在多人合作开发的时候，看字面应该知道这两个是干嘛的吧！）
物理标记：&i&&t&&tt&&big&&small&&sub&&sup&&strike&（注：大家测试吧，动手最重要◎）
链接是超文本（Hypertext）格式的重要实现方式，而使用的就是锚（Anchor）（，所以缩写也就是&a&）,
一个典型的锚标记的定义：&a href="目标页面"&激活热区&/a&（注：href：hypertext reference,就是链接到哪里），现在分情况介绍：
1）外部链接
1。1非本地文件：&a href=""&中山大学&/a&（这个很明显，不用解释了）
1。2其他形式的非本地资源：&a href=""&中山大学&/a&（ftp资源）
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& &a href=""&我的email&/a&（email信息）
1。2本地文件：&a href="另一个网页.html"&另一网页？&/a&（同一文件夹的，当然也可以给出完整路径咯）
&&&&&& &a href="../另一个网页.html"&另一网页？&/a&（上一级别文件夹的）
&&& （注：../表示上一级文件夹，同样../../就表示上上一级）
2）内部链接
什么是内部链接，就是在同一个网页里边的链接！这样做是为了避免网页太大而造成的浏览麻烦！
步骤：首先要定义一个引用目标锚，然后在另一处定义被锚引用的目标！看例子吧◎
&a herf="#top"&top&/a&（其中＃top定义了该锚）
&a name="top"&top&/a&（这里就引用了该锚）
(注：这种方法最常见的应用就是网页上经常看到的网页最下边的“返回顶部”了)
使用图像：&img src="图像文件"&（注：图像文件路径与链接路径相同）。在这里可以加入提示属性&alt&，如&img src="图片.gif" alt="图片"&（注：看看有什么效果，如果图片不存在，会怎样呢？）
1）对齐方式：缺省是左对齐，可以使用&div align=..&进行更改。
2）高度和宽度：&img src="图片.gif" height=34mm width=34mm&（注：看明白了吧！不过应该注意的一点是，在ie里边高度和宽度的比例应该与源图相同，不然就显示不了，已在我的机子上测试过了）
3）四周区域和边框：&img src="图像文件" border＝4 hspace=5 vspace=5&（注：很简单吧，测试一下吧！还有，边框默认情况是没有的，但是对于有链接的图来说，有个框框还是很好的）
1）无序列表：无序，就是没有特别的序号，也就是平等哦。。下面看个例子吧。
&&ul&&li&内容1&li&内容2&li&内容3&/ul&（注：对于ul，可以添加属性type，属性值有disc,square,circle，这样就可以改变序号了◎）
2）有序列表：这个当然就是前面有序号咯。
&ol&&li&内容1&li&内容2&li&内容3&/ol&（注：对于ol，同样可以添加type属性，属性值可以是1，a，A，i，I，呵呵，自己测试一下。）另外，对于ol，可以从喜欢的序号开始排序，用的属性就是ol的start和li的value了，很明白吧：）
3）列表嵌套：嵌套，类似于树状菜单的东西。可以使用&ul&&ul&&/ul&&/ul&(ol也一样)类似的格式进行使用。
4）定义列表：主要有dl，dt，dd，分别代表定义标识，头部和内容，使用方法：
&dl&&dt&头部&dd&定义的内容&/dl&（注：dt和dd不需要结束标记）
1）定义一个form：定义一个form标记，用于确定发送消息的类型和处理方式，其中必须的属性就是action了。&form action="" method="post"&（注：method用于说明传送数据的方式，还有get方式，不过现在常用post）。类似的有，&form action="" method="post"&
2)大部分的form都是在&input&中处理的。如下面所示：
& 请输入名字&input type="text" name="username"&&p&& 请输入口令&input type="password" name="pword"&&p&& 请提出宝贵意见&textarea name="comment" rows=3 cols=20 && &/textarea&&p&& &input type="submit" value="Submit form"&& &input type="reset" value="Clear data"&
自己可以修改一下属性并进行测试◎
3）复选框和单选框
&&input type="checkbox" name="check1" value="check1"&check1&&input type="checkbox" name="check2" checked value="check2"&check2&&input type="checkbox" name="check3" checked value="check3"&check3&p&（这是复选框）&&input type="radio" name="radio1" value="radio1"&radio1&&input type="radio" name="radio2" checked value="radio2"&radio2&&input type="radio" name="radio3" value="radio3"&radio3&p&（这是单选框）
4）下拉菜单和滚动菜单
& &select&& &&option&1&/option&& &&option&2&/option&& &&option&3&/option&& &&option&4&/option&& &&option&5&/option&& &/select&&p&（下拉菜单）&&&select multiple size=5 name="1"&& &&option&1&/option&& &&option&2&/option&& &&option&3&/option&& &&option&4&/option&& &&option&5&/option&& &/select&&p&（滚动菜单，就是比下拉菜单多了个multiple属性和name属性，而size属性是可有可无）
什么是帧结构，就是在一个完整网页里边分页，当一个页的url发生变化，其他的可以不变：）使用帧结构可以使得网页更加多变，内容更加丰富，不过也会带来一定的麻烦，因为它打乱了原来的基本操作规则。
如何建立一个帧结构？如下面的例子所示。
&html&///注意：没有body的哦。。&head&&&title&帧结构&/title&&/head&&frameset rows="50%,*" cols="50%,*"&//定义了网页的分页结构，包括了行数和列数&frame src="doc1.html"&//引用网页的基本写法&&frameset rows="40%,50%"&//定义了一个嵌套的帧&&frame src="doc2.html"&&&frame src="doc3.html" scrolling="yes"&//scrooling表示是否带有滚动条&&/frameset&&frame src="doc4.html" frameborder="0"&//frameborder表示边框格式，1表示缺省，0表示无&frame src="doc5.html" noresize&//noresize使得帧窗口的大小不可移动！&/frameset&&/html&
注：另外，如果在帧窗口中加入&a herf="新网页" target="_top"&这样的话，当激活这个链接的时候，就清除了当前的帧结构，用新页代替，可以自己测试一下。
如何建立一个表格呢？&
&table border=20 cellspacing=20 cellpadding=20&&//大家可以测试一下，这3个分别表示的是什么。。其中border表示边框，如果不设置，那么显示的表格就没有边框。而cellsapcing是格间线宽度，cellpadding是内边框！&&caption align=center&数据&/caption&&&tr&&&th&数据1&/th&&th&数据2&/th&//标题，可以使用align属性进行设置其出现的位置&&/tr&&&tr&&&td&一些数据&/td&&td&还有数据&/td&//数据，可以使用align和valign对其上下左右的位置进行设置&&/tr&&&tr&&&td&更多数据&/td&&td&最后数据&/td&//还可以对其bgcolor属性进行设置数据的颜色&&/tr&&&/table&
注：还可以进行跨行和跨列的设置，用的是colspan和rowspan（看意思就知道了：））如：&&&&&&&&&&&&&&&&&&&&& &th rowsspan=4&数据内容&/th&
什么是CSS：就是层叠式风格列表，类似于网页格式的模板，也相当于编程里边的类一样，定义了自己的风格，标记着属性的值（或许比喻不怎么恰当，就原谅一下咯。）下面给出一个完整的例子，大家注意看释:& &html&&head&&title&CSS&/title&&style type="text/css"&//用style标记，而且是在head里边定义的&h1{font-style:italic}&h2{text-style:right}&h3{font-family:arial}&h4{font-style:italic}&div{color:blue}//&定义形式：标记选择器{属性1：值1；属性2：值2；属性3：值3；......}&div code{color:red}//上下文：如果在网页中，&code&定义在&div&里边，那么就套用格式，如果没有，就不&h5,h6{color:orange}//一次多个选择器&p.aside{font-family:font-style:italic}//定义了一个类,可以给文件中独立的块进行设置风格。&.arial{font-family:arial}//定义了通用类，使用方法与类相同&a:link{color:green}&a:active{color:font-size:150%}&a:visite{color:red}//定义了伪类，所谓伪类，就是用于与用户交互操作有关的属性，如超链接等等。&/style&&/head&&body&&&h1&标题1&/h1&&&h2&标题2&/h2&&&h3&标题3&/h3&&&h4&标题4&/h4&&&div&用&strong&&em&蓝色&/em&&/strong&文字&/div&&&div&是&code&红色&/code&吗？&/div&&&code&是红色吗？&/code&&&h5&orange&/h5&&&h6&orange&/h6&&&p class=aside&爱逛街的老鼠？？&/p&&//这就是类的使用方法，调用了class&/body&&/html&
注：由于css功能强大，所以只是简单写了写，以后有机会再专门写写
我们使用XHTML+CSS来重新设计我们的网站，如何知道自己制作的页面真的符合web标准?W3C和一些志愿者网站提供了在线校验程序，来帮助我们检查页面是否符合标准，并提供了修正错误的帮助信息。这些校验非常有用，是我调试页面第一步要做的事情。
1.XHTML校验
校验网址:http://validator.w3.org/
校验方式:网址校验、文件上传校验
校验成功，会显示"This Page Is Valid XHTML 1.0 Transitional!"。
校验失败，会显示更多校验选项和错误信息。
一般选择"Show Source"和"Verbose Output"可以帮助你找到错误代码所在行和错误原因。
XHTML校验常见错误原因对照表
No DOCTYPE Found! Falling Back to HTML 4.01 Transitional--未定义DOCTYPE。
No Character Encoding Found! Falling back to UTF-8.--未定义语言编码。
end tag for "img" omitted, but OMITTAG NO was specified--图片标签没有加"/"关闭。
an attribute value specification must be an attribute value literal unless SHORTTAG YES is specified--属性值必须加引号。
element "DIV" undefined---DIV标签不能用大写，要改成小写div。
required attribute "alt" not specified---图片需要加alt属性。
required attribute "type" not specified---JS或者CSS调用的标签漏了type属性。
其中最最常见的错误就是标签的大小写问题了。通常这些错误都是关联的，比如忘记了一个其他标签都会报错，所以不要看到一堆的错误害怕，通常解决了一个错误，其他的错误也都没有了。
2.CSS2校验
校验网址:http://jigsaw.w3.org/css-validator/
校验方式:网址校验、文件上传校验、直接贴入代码校验
校验成功，会显示"恭喜恭喜，此文档已经通过样式表校验! "。
校验失败，会显示两类错误:错误和警告。错误表示一定要修正，否则无法通过校验;警告表示有代码不被W3C推荐,建议修改。
web标准常见问题集合
列举了一些常见，新手经常问的问题。举例并说明解决方法。
1.超链接访问过后hover样式就不出现的问题
运行代码框&!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&
&meta http-equiv="Content-Type" content="text/ charset=gb2312" /&
&style type="text/css"&
color:blue
a:visited {
color:green
a:active {
color:orange
&a href="#"&
web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全
&/a& [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
被点击访问过的超链接样式不在具有hover和active了,很多人应该都遇到过这个问题，解决方法是改变CSS属性的排列顺序: L-V-H-A
2.FF下如何使连续长字段自动换行
运行代码框&!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&
&meta http-equiv="Content-Type" content="text/ charset=gb2312" /&
&style type="text/css"&
word-wrap:break-
&div id="ff"&aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&/div&
&script type="text/javascript"&
/* &![CDATA[ */
function toBreakWord(intLen){
var obj=document.getElementById("ff");
var strContent=obj.innerHTML;
var strTemp="";
while(strContent.length&intLen){
strTemp+=strContent.substr(0,intLen)+"
strContent=strContent.substr(intLen,strContent.length);
strTemp+="
obj.innerHTML=strT
if(document.getElementById
!document.all)
toBreakWord(37)
&/script& [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
众所周知IE中直接使用word-wrap:break-word 就可以了, 这里FF中我们使用JS插入的方法来解决
3.ff下为什么父容器的高度不能自适应
运行代码框&!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&
&meta http-equiv="Content-Type" content="text/ charset=gb2312" /&
&style type="text/css"&
border:1px solid red
&div&&p&web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全&/p&&/div& [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
为什么这个P撑不开DIV呢？解决的办法是在div 与 p 之间插入&div style="clear:both"&&/div&清除掉这个p的浮动
4. IE6的双倍边距BUG
运行代码框&!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&
&meta http-equiv="Content-Type" content="text/ charset=gb2312" /&
&style type="text/css"&
margin-left:10
height:200
border:1px solid red
&a href="#"&
web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全
&/div& [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
浮动后本来外边距10px,但IE解释为20px,解决办法是加上display:inline
5. IE6下绝对定位的容器内文本无法正常选择的问题
运行代码框&!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&
&meta http-equiv="Content-Type" content="text/ charset=gb2312" /&
&style type="text/css"&
height:200
border:1px solid red
&a href="#"&
web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全
&/div& [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
上面的问题在IE6、7中存在，解决问题的办法是让IE进入到qurks mode。关于qurks mode的相关知识，请参考：
6. IE6下为什么图片下方有空隙产生
运行代码框&!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&
&meta http-equiv="Content-Type" content="text/ charset=gb2312" /&
&style type="text/css"&
background:
height:110
&img src="/intl/en_ALL/images/logo.gif" alt="google" /&
&/div& [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
解决这个BUG的方法也有很多，可以是改变html的排版，或者设置img 为display:block或者设置vertical-align属性为vertical-align:top | bottom |middle |text-bottom都可以解决.
7. IE6下这两个层中间怎么有间隙
运行代码框&!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&
&meta http-equiv="Content-Type" content="text/ charset=gb2312" /&
&style type="text/css"&
height:100
background:red
height:100
background:orange
&div class="left"&aaaaaa&/div&
&div class="right"&aaaaaa&/div& [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
这个IE的3PX BUG也是经常出现的，解决的办法是给.right也同样浮动 float:left 或者相对IE6定义.left margin-right:-3
8. list-style-image无法准确定位的问题
运行代码框&!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&
&meta http-equiv="Content-Type" content="text/ charset=gb2312" /&
&style type="text/css"&
list-style:url("/attachments//arrowb_kJrcZheJmiIF.gif");
font:12px/25px 宋体;
&li&&a href="#"&web标准常见问题大全&/a&&/li&
&li&&a href="#"&web标准常见问题大全&/a&&/li&
&li&&a href="#"&web标准常见问题大全&/a&&/li&
&li&&a href="#"&web标准常见问题大全&/a&&/li&
&li&&a href="#"&web标准常见问题大全&/a&&/li&
&/ul& [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
这个list-style-image的定位问题也是经常有人问的，解决的办法一般是用li的背景模拟，这里采用相对定位的方法也可以解决
9. LI中内容超过长度后以省略号显示的方法
运行代码框&!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&
&meta http-equiv="Content-Type" content="text/ charset=gb2312" /&
&style type="text/css"&
white-space:
text-overflow:
-o-text-overflow:
&li&&a href="#"&web标准常见问题大全web标准常见问题大全&/a&&/li&
&li&&a href="#"&web标准常见问题大全web标准常见问题大全&/a&&/li&
&li&&a href="#"&web标准常见问题大全web标准常见问题大全&/a&&/li&
&li&&a href="#"&web标准常见问题大全web标准常见问题大全&/a&&/li&
&li&&a href="#"&web标准常见问题大全web标准常见问题大全&/a&&/li&
&/ul& [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
此方法适用与IE与OP浏览器
10.web标准中定义id与class有什么区别吗
运行代码框&!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&
&meta http-equiv="Content-Type" content="text/ charset=gb2312" /&
&style type="text/css"&
color:blue
&div id="aa" class="aa"&
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
&/div& [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
一.web标准中是不容许重复ID的,比如 div id="aa"& 不容许重复2次,而class 定义的是类,理论上可以无限重复, 这样需要多次引用的定义便可以使用他.
二.属性的优先级问题ID 的优先级要高于class,看上面的例子
三.方便JS等客户端脚本，如果在页面中要对某个对象进行脚本操作，那么可以给他定义一个ID，否则只能利用遍历页面元素加上指定特定属性来找到它，这是相对浪费时间资源，远远不如一个ID来得简单.
11.如何垂直居中文本
运行代码框&!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&
&meta http-equiv="Content-Type" content="text/ charset=gb2312" /&
&style type="text/css"&
line-height:30
border:1px solid red
&div&web标准常见问题大全&/div& [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
给容器设置一个与其高度相同的行高就可以了
12.如何对齐文本与文本输入筐
运行代码框&!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&
&meta http-equiv="Content-Type" content="text/ charset=gb2312" /&
&style type="text/css"&
&input type="text" /&aaaaaaaaaaaaaaaaaa [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
遇到此种问题，设置文本框的vertical-align:middle 就可以了
13.为什么FF下面不能水平居中呢
运行代码框&!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&
&meta http-equiv="Content-Type" content="text/ charset=gb2312" /&
&style type="text/css"&
text-align:
height:200
border:1px solid red
&div&&/div& [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
FF下面设置容器的左右外补丁为auto就可以了
14.为什么FF下文本无法撑开容器的高度
运行代码框&!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&
&meta http-equiv="Content-Type" content="text/ charset=gb2312" /&
&style type="text/css"&
height:200
border:1px solid red
&div&web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见&/div& [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
标准浏览器中固定高度值的容器是不会象IE6里那样被撑开的,那我又想固定高度，又想能被撑开需要怎样设置呢？办法就是去掉height设置min-height:200& 这里为了照顾不认识min-height的IE6 可以这样定义：{height:auto!height:200min-height:200}
15.为什么IE6下容器的宽度和FF解释不同呢
运行代码框&?xml version="1.0" encoding="gb2312"?&
&!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&
&meta http-equiv="Content-Type" content="text/ charset=gb2312" /&
&style type="text/css"&
height:200
border:10px solid red
&div onclick="alert(this.offsetWidth)"&web标准常见问题大全&/div&
&hr/& [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
问题的差别在于容器的整体宽度有没有将边框（border）的宽度算在其内，这里IE6解释为200PX ，而FF则解释为220PX，那究竟是怎么导致的问题呢？大家把容器顶部的xml去掉就会发现原来问题出在这，顶部的申明触发了IE的qurks mode，关于qurks mode、standards mode的相关知识，请参考：
16.为什么web标准中IE无法设置滚动条颜色了
运行代码框&!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&
&meta http-equiv="Content-Type" content="text/ charset=gb2312" /&
&style type="text/css"&
scrollbar-face-color:#f6f6f6;
scrollbar-highlight-color:#
scrollbar-shadow-color:#
scrollbar-3dlight-color:#
scrollbar-arrow-color:#000;
scrollbar-track-color:#
scrollbar-darkshadow-color:#
&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/& [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
解决办法是将body换成html
17.为什么我定义的样式没有作用呢
运行代码框&!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&
&meta http-equiv="Content-Type" content="text/ charset=gb2312" /&
&style type="text/css"&
#aa ul li {
color:blue
&div id="aa"&
&li class="aa"&
web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全
&/div& [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
这里你无法用.aa定义到li 遇到这种情况怎么解决呢？答案是提高.aa 的优先权 比如#aa ul li.aa 优先权相关文章参考-baidu搜索关键词: CSS的优先权
18.为什么无法定义1px左右高度的容器
运行代码框&!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&
&meta http-equiv="Content-Type" content="text/ charset=gb2312" /&
&style type="text/css"&
background:
&div&&&/div& [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
IE6下这个问题是因为默认的行高造成的，解决的方法也有很多，例如：overflow:hidden | zoom:0.08 | line-height:1px
19.为什么这个背景颜色无法显示
运行代码框&!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&
&meta http-equiv="Content-Type" content="text/ charset=gb2312" /&
&style type="text/css"&
background:red
&li&web标准常见问题大全&/li&
&li&web标准常见问题大全&/li&
&li&web标准常见问题大全&/li&
&li&web标准常见问题大全&/li&
&li&web标准常见问题大全&/li&
&div style="clear:both"&&/div&
&/ul& [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
IE中设置有背景色的ul并没有显示出来，这个属于haslayout问题，
20.怎么样才能让层显示在FLASH之上呢
运行代码框&!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&
&meta http-equiv="Content-Type" content="text/ charset=gb2312" /&
&style type="text/css"&
height:200
background:red
height:100
web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全
&object type="application/x-shockwave-flash" data="/2005/www/m533-104.swf"&
¶m name="movie" value="/2005/www/m533-104.swf" /&
&/object& [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
解决的办法是给FLASH设置透明¶m name="wmode" value="transparent" /&
21.怎样使一个层垂直居中于浏览器中
运行代码框&!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&
&meta http-equiv="Content-Type" content="text/ charset=gb2312" /&
&style type="text/css"&
margin:-100px 0 0 -100
height:200
&div&web标准常见问题大全&/div& [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
这里我们使用百分比绝对定位，与外补丁负值的方法，负值的大小为其自身宽度高度除以二
22 .图片垂直与容器内
23.如何让div横向排列
运行代码框&!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&
&meta http-equiv="Content-Type" content="text/ charset=gb2312" /&
&style type="text/css"&
height:200
border:1px solid red
&div&web标准常见问题大全&/div&
&div&web标准常见问题大全&/div&
&div&web标准常见问题大全&/div& [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
横向排列DIV可以使用浮动的方式比如float:left,或者设置对象为内联，还可以绝对定位对象等等
web标准相关的一些链接
1．网站标准2．有语义代码3．校验（Validation&）4．易用性（Accessibility&）5．样式表CSS&
发表评论：
TA的最新馆藏[转]&[转]&[转]&[转]&[转]&[转]&}
我要回帖
更多关于 电子图版软件 的文章
更多推荐
- ·什么是x站是指哪个平台？
- ·请问x站是指哪个平台什么意思?
- ·小武当山风景区景区里，地音喇叭里放的那些歌曲？
- ·小武当山风景区景区里，放的那些比较空灵的音乐，是什么歌曲？
- ·外置声卡直播 第二场耳机声卡音乐突突响，偶尔清晰一会？
- ·登入广东省自考管理系统继续教育管理系统后怎么进行操作呢?
- ·[集合帖]大家提供点电池me860信号图标美化什么的，我来做个通用美化。。。
- ·手机邮箱163设置怎样在电脑上登陆
- ·数据结构利用栈结构怎么把十八进制转十进制换成六进制数算法
- ·MFC编程时添加背景图片在Bitmap中引入图片时弹出Resouse Typemfc是什么意思
- ·我在思考，怎么获取百度财富值的财富值？
- ·前几年的x2 5800+ 、6000+ 到底差距多少?为什么现在卖二手货的网站价格还要差好几十块？
- ·三星i9100gg外放喇叭没声了
- ·中兴v889d恢复长按解锁？之前下了个v889d 锁屏断网的需要按住拉倒那一个模块才可以开机，删掉以后不可以长按解锁？
- ·梅花手表787 怎么样？
- ·哪里可以学习立体三维立体图浮雕？
- ·有看过你对cs5ai cs5 序列号号的回答，我想问问这个软件到底是怎么用啊，怎么这么麻烦？
- ·魅族m9捷克固件x换了个framework.apk,变砖了怎么办，sd卡没有系统固件，现在不断重启，怎样搞回去啊，求救
- ·qq飞车浮云纹理质量调高还是调底，调高了3个人就不卡，多了就卡。
- ·这该死百度宅男当崇祯为什么这么LJ？
- ·如何设置成小电子图版软件
- ·打开IE时，弹出对话框：“ox7c1211a0指令引用的ox00000004内存，该ie 内存不能为readd 点击确定后跳转“0x21109
- ·qq黄钻有什么特权1有哪些特权?
- ·加黄钻经验值qq黄钻有什么用用
- ·运动鞋的图片广告图片 有用吗
- ·求新浪里的新浪视频背景音乐乐-06-21/075961785151.html
- ·一年不打篮球的技巧影响大吗
- ·西宁 哪有卖 bmx 小轮车bmx多少钱啊？？初学的1000左右 的？
- ·有关WWE Johnwwe cena vs的英文文章
- ·呜呜~为什么哪里都买不到2012阿迪达斯 欧洲杯西班牙队 西班牙队的那款双肩包了？型号X14526。
- ·男性乳头内陷影响对练胸肌有影响吗？ 内陷还连得出来胸肌吗？ 有办法解决男生练胸肌乳头内陷吗
- ·求东方神起吧的《至少要知道这个》、《super star》
- ·柏杨老狗李毅吧吧彩色狗是人吗？
- ·西班牙欧洲杯战绩vs法国预测和历史战绩视频
- ·6月24日欧洲杯 24队哪个队赢的机会比较大
