您当前的位置是：→谈谈初始化CSS元素
【发表于】: 21:02:00&&已被访问:229次分享到：　为什么要初始化CSS？不同的浏览器默认的样式可能不近相同，所有开发时的第一件事可能就是如果把他们统一。　　也许他们平时做页面时根本就没考虑过浏览器兼容的问题。其实不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面差异。
在各种浏览器中，都会对CSS的选择器默认一些数值，譬如当h1没有被设置数值时，显示一定大小。但并不是所有的浏览器都使用一样的数值，所以有了CSS Reset，以让网页的样式在各浏览器中表现一致。
初始化CSS的一个小实例html,&body,&div,&span,&&&&h1,&h2,&h3,&h4,&h5,&h6,&p,&blockquote,&pre,&&&a,&abbr,&acronym,&address,&big,&cite,&code,&&&img,&ins,&kbd,&q,&s,&samp,&&&small,&strike,&strong,&&&&dl,&dt,&dd,&ol,&ul,&li,&&&fieldset,&form,&label,&legend,&&&table,&caption,&tbody,&tfoot,&thead,&tr,&th,&td&{&&&&&&&margin:&0;&&&&&&&padding:&0;&&&&&&&border:&0;&&&&&&&outline:&0;&&&&&&&font-size:&100%;&&&&&&&vertical-align:&&&&&&&&background:&&&&}&&&body&{&&&&&&&line-height:&1;&&&}&&&ol,&ul&{&&&&&&&list-style:&&&&}&&&blockquote,&q&{&&&&&&"es:&&&&}&&&blockquote:before,&blockquote:after,&&&q:before,&q:after&{&&&&&&&content:&'';&&&&&&&content:&&&&}&&&&&&table&{&&&&&&&border-collapse:&&&&&&&&border-spacing:&0;&&&}&&
下面举更多的实例,以大家参考一下!
一、Generic&Reset&CSS*&{&padding:&0;&margin:&0;&border:&0;&}　　这也是一款CSS&Reset的方法，让所有的选择器的padding、margin和border都设置成0。这是一种强大的方法，也是最简单，最安全的方法，不过，也是最占用资源的方法。对于小型的网站来说，用这个并不会带来大的资源浪费，但如果是像Yahoo这种架构非常大的网站，刚需要有选择地进行CSS重设，以减少资源浪费。二、Ateneu&Popular&CSS&Resethtml,&body,&div,&span,&applet,&object,&iframe,&h1,&h2,&h3,&h4,&h5,&h6,&p,&blockquote,&pre,&a,&abbr,&acronym,&address,&big,&cite,&code,&del,&dfn,&em,&font,&img,&ins,&kbd,&q,&s,&samp,&small,&strike,&strong,&sub,&sup,&tt,&var,&dl,&dt,&dd,&ol,&ul,&li,&fieldset,&form,&label,&legend,&table,&caption,&tbody,&tfoot,&thead,&tr,&th,&td&{&margin:&0;&padding:&0;&border:&0;&outline:&0;&font-weight:&&font-style:&&font-size:&100%;&font-family:&&vertical-align:&&}&:focus&{&outline:&0;}&a,&a:link,&a:visited,&a:hover,&a:active{text-decoration:none}&table&{&border-collapse:&border-spacing:&0;}&th,&td&{text-align:&&font-weight:&}&img,&iframe&{border:&&text-decoration:}&ol,&ul&{list-style:&}&input,&textarea,&Ｓelect,&button&{font-size:&100%;font-family:&}&Ｓelect&{margin:&}&hr&{margin:&0;padding:&0;border:&0;color:�background-color:�height:&1px}三、Chris&Poteet’s&Reset&CSS*&{&vertical-align:&&font-family:&&font-style:&&font-size:&100%;&border:&&padding:&0;&margin:&0;&}&body&{&padding:&5&}&h1,&h2,&h3,&h4,&h5,&h6,&p,&pre,&blockquote,&form,&ul,&ol,&dl&{&margin:&20px&0;&}&li,&dd,&blockquote&{&margin-left:&40&}&table&{&border-collapse:&&border-spacing:&0;&}&四、Yahoo’s&CSS&Resetbody,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,&&&form,fieldset,input,textarea,p,blockquote,th,td&{&&&&&&&padding:&0;&&&&&&&margin:&0;&&&}&&&table&{&&&&&&&border-collapse:&&&&&&&&border-spacing:&0;&&&}&&&fieldset,img&{&&&&&&&border:&0;&&&}&&&address,caption,cite,code,dfn,em,strong,th,var&{&&&&&&&font-weight:&&&&&&&&font-style:&&&&}&&&ol,ul&{&&&&&&&list-style:&&&&}&&&caption,th&{&&&&&&&text-align:&&&&}&&&h1,h2,h3,h4,h5,h6&{&&&&&&&font-weight:&&&&&&&&font-size:&100%;&&&}&&&q:before,q:after&{&&&&&&&content:'';&&&}&&&abbr,acronym&{&border:&0;&&&}&&五、Eric&Meyer&Reset&CSShtml,&body,&div,&span,&applet,&object,&iframe,&table,&caption,&tbody,&tfoot,&thead,&tr,&th,&td,&del,&dfn,&em,&font,&img,&ins,&kbd,&q,&s,&samp,&small,&strike,&strong,&sub,&sup,&tt,&var,&h1,&h2,&h3,&h4,&h5,&h6,&p,&blockquote,&pre,&a,&abbr,&acronym,&address,&big,&cite,&code,&dl,&dt,&dd,&ol,&ul,&li,&fieldset,&form,&label,&legend&{&vertical-align:&&font-family:&&font-weight:&&font-style:&&font-size:&100%;&outline:&0;&padding:&0;&margin:&0;&border:&0;&}&:focus&{&outline:&0;&}&body&{&background:&&line-height:&1;&color:&&}&ol,&ul&{&list-style:&&}&table&{&border-collapse:&&border-spacing:&0;&}&caption,&th,&td&{&font-weight:&&text-align:&&}&blockquote:before,&blockquote:after,&q:before,&q:after&{&content:&"";&}&blockquote,&q&{"es:&""&"";&}六、Tantek&Celik&Reset&CSS:link,:visited&{&text-decoration:none&}&ul,ol&{&list-style:none&}&h1,h2,h3,h4,h5,h6,pre,code&{&font-size:1&}&ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input&{&margin:0;&padding:0&}&a&img,:link&img,:visited&img&{&border:none&}&address&{&font-style:normal&}七、Christian&Montoya&Reset&CSShtml,&body,&form,&fieldset&{&margin:&0;&padding:&0;&font:&100%/120%&Verdana,&Arial,&Helvetica,&sans-&}&h1,&h2,&h3,&h4,&h5,&h6,&p,&pre,&blockquote,&ul,&ol,&dl,&address&{&margin:&1em&0;&padding:&0;&}&li,&dd,&blockquote&{&margin-left:&1&}&form&label&{&cursor:&&}&fieldset&{&border:&&}&input,&Ｓelect,&textarea&{&font-size:&100%;&font-family:&&}八、Rudeworks&Reset&CSS*&{&margin:&0;&padding:&0;&border:&&}&html&{&font:&62.5%&"Lucida&Grande",&Lucida,&Verdana,&sans-&text-shadow:�&0px&0px&0&}&ul&{&list-style:&&list-style-type:&&}&h1,&h2,&h3,&h4,&h5,&h6,&p,&pre,&blockquote,&ul,&ol,&dl,&address&{&font-weight:&&margin:&0&0&1em&0;&}&cite,&em,&dfn&{&font-style:&&}&sup&{&position:&&bottom:&0.3&vertical-align:&&}&sub&{&position:&&bottom:&-0.2&vertical-align:&&}&li,&dd,&blockquote&{&margin-left:&1&}&code,&kbd,&samp,&pre,&tt,&var,&input[type='text'],&textarea&{&font-size:&100%;&font-family:&monaco,&"Lucida&Console",&courier,&mono-&}&del&{&text-decoration:&line-&}&ins,&dfn&{&border-bottom:&1px&solid&#&}&small,&sup,&sub&{&font-size:&85%;&}&abbr,&acronym&{&text-transform:&&font-size:&85%;&letter-spacing:&.1&border-bottom-style:&&border-bottom-width:&1&}&a&abbr,&a&acronym&{&border:&&}&sup&{&vertical-align:&&}&sub&{&vertical-align:&&}&h1&{&font-size:&2&}&h2&{&font-size:&1.8&}&h3&{&font-size:&1.6&}&h4&{&font-size:&1.4&}&h5&{&font-size:&1.2&}&h6&{&font-size:&1&}&a,&a:link,&a:visited,&a:hover,&a:active&{&outline:&0;&text-decoration:&&}&a&img&{&border:&&text-decoration:&&}&img&{&border:&&text-decoration:&&}&label,&button&{&cursor:&&}&input:focus,&Ｓelect:focus,&textarea:focus&{&background-color:&#FFF;&}&fieldset&{&border:&&}&.clear&{&clear:&&}&.float-left&{&float:&&}&.float-right&{&float:&&}&body&{&text-align:&&}&#wrapper&{&margin:&0&&text-align:&&}九、Anieto2K&Reset&CSShtml,&body,&div,&span,&applet,&object,&iframe,&h1,&h2,&h3,&h4,&h5,&h6,&p,&blockquote,&pre,&a,&abbr,&acronym,&address,&big,&cite,&code,&del,&dfn,&em,&font,&img,&ins,&kbd,&q,&s,&samp,&small,&strike,&strong,&sub,&sup,&tt,&var,&dl,&dt,&dd,&ol,&ul,&li,&fieldset,&form,&label,&legend,&table,&caption,&tbody,&tfoot,&thead,&tr,&th,&td,¢er,&u,&b,&i&{&margin:&0;&padding:&0;&border:&0;&outline:&0;&font-weight:&&font-style:&&font-size:&100%;&font-family:&&vertical-align:&baseline&}&body&{&line-height:&1&}&:focus&{&outline:&0&}&ol,&ul&{&list-style:&none&}&table&{&border-collapse:&&border-spacing:&0&}&blockquote:before,&blockquote:after,&q:before,&q:after&{&content:&""&}&blockquote,&q&{"es:&""&""&}&input,&textarea&{&margin:&0;&padding:&0&}&hr&{&margin:&0;&padding:&0;&border:&0;&color:�&background-color:�&height:&1px&}十、CSSLab&CSS&Resethtml,&body,&div,&span,&applet,&object,&iframe,&h1,&h2,&h3,&h4,&h5,&h6,&p,&blockquote,&pre,&a,&abbr,&acronym,&address,&big,&cite,&code,&del,&dfn,&em,&font,&img,&ins,&kbd,&q,&s,&samp,&small,&strike,&strong,&sub,&sup,&tt,&var,&dl,&dt,&dd,&ol,&ul,&li,&fieldset,&form,&label,&legend,&table,&caption,&tbody,&tfoot,&thead,&tr,&th,&td&{&margin:&0;&padding:&0;&border:&0;&outline:&0;&font-weight:&&font-style:&&font-size:&100%;&font-family:&&vertical-align:&&}&:focus&{&outline:&0;&}&table&{&border-collapse:&&border-spacing:&0;&}&caption,&th,&td&{&text-align:&&font-weight:&&}&a&img,&iframe&{&border:&&}&ol,&ul&{&list-style:&&}&input,&textarea,&Ｓelect,&button&{&font-size:&100%;&font-family:&&}&Ｓelect&{&margin:&&}&/*&Fixes&incorrect&placement&of&numbers&in&ol’s&in&IE6/7&*/&ol&{&margin-left:2&}&/*&==&clearfix&==&*/&.clearfix:after&{&content:&".";&display:&&height:&0;&clear:&&visibility:&&}&.clearfix&{display:&inline-}&*&html&.clearfix&{height:&1%;}&.clearfix&{display:&}　　这些都大同小异，需求不同，方法也就不同。我自己偏向于喜欢Yahoo的CSS&Reset，也用了Yahoo的代码。 &
上下篇:您可能感兴趣的文章最新推荐信息&&日版宠物情人2017的插曲，很带节奏感，日语的，女生唱的。
最后听见是在第8集的时候女主手割伤了，然后男主用嘴帮她吸了一下，插曲就出来了。
歌手：Def...老钟家的两个儿子很特别，就是跟其他的人不太一样，魔一般的执着。兄弟俩都到了要结婚的年龄了，不管自家老爹怎么磨破嘴皮子，兄弟俩说不娶就不娶，老父母为兄弟两操碎了心...把牛仔裤磨出有线的破洞
1、具体工具就是磨脚石，下面垫一个硬物，然后用磨脚石一直磨一直磨，到把那块磨薄了，用手撕开就好了。出来的洞啊很自然的。需要猫须的话调几...先来看下敬业福和爱国福
今年春节，支付宝再次推出了“五福红包”活动，表示要“把欠大家的敬业福都还给大家”。
今天该活动正式启动，和去年一样，需要收集“五福”...有时候我们打开冰箱就会闻到一股异味，冰箱里的这种异味是因为一些物质发出的气味的混合体，闻起来让人恶心。 产生这些异味的主要原因有以下几点。
1、很多人有这种习...简介
《极品家丁》讲述了现代白领林晚荣无意回到古代金陵，并追随萧二***化名“林三”进入萧府，不料却阴差阳错上演了一出低级家丁拼搏上位的“林三升职记”。...你就是我最爱的宝宝 - 李溪芮
(电视剧《极品家丁》片尾曲)
作词：常馨内
作曲：常馨内
你的眉 又鬼马的挑
你的嘴 又坏坏的笑
上一秒吵闹 下...乌梅，又称春梅，中医认为，乌梅味酸，性温，无毒，具有安心、除热、下气、祛痰、止渴调中、杀虫的功效，治肢体痛、肺痨病。乌梅泡水喝能治伤寒烦热、止吐泻，与干姜一起制...什么是脂肪粒
在我们的脸上总会长一个个像脂肪的小颗粒，弄也弄不掉，而且颜色还是白白的。它既不是粉刺也不是其他的任何痘痘，它就是脂肪粒。
脂肪粒虽然也是由油脂...来源：中国青年报
新的攻击方法不断涌现，黑客几乎永远占据网络攻击的上风，我们不可能通过技术手段杜绝网络攻击。国家安全保障的主要方向是打击犯罪，而不是处置和惩罚...夫妻网络直播“造人”爆红
　　1月9日，温岭城北派出所接到南京警方的协查通告，他们近期打掉了一个涉黄直播APP平台。而根据掌握的线索，其中有一对涉案的夫妻主播...如何防止墙纸老化？
（1）选择透气性好的墙纸
市场上墙纸的材质分无纺布的、木纤维的、PVC的、玻璃纤维基材的、布面的等，相对而言，PVC材质的墙纸最不透气...观点一：破日本销售量的“鲜肌之谜” 非日本生产
近一段时间，淘宝上架了一款名为“鲜肌之谜的” 鲑鱼卵巢美容液，号称是最近日本的一款推出的全新护肤品，产品本身所...系腰裙(北宋词人 张先)
惜霜蟾照夜云天，朦胧影、画勾阑。人情纵似长情月，算一年年。又能得、几番圆。
欲寄西江题叶字，流不到、五亭前。东池始有荷新绿，尚小如...关于女人的经典语句1、【做一个独立的女人】
思想独立：有主见、有自己的人生观、价值观。有上进心,永远不放弃自己的理想，做一份自己喜爱的事业，拥有快乐和成就...你想体验机器人性爱吗？你想和性爱机器人结婚吗？如果你想，机器人有拒绝你的权利吗？
近日，第二届“国际人类-机器人性爱研讨会”大会在伦敦金史密斯大学落下帷幕。而...10.土耳其地下洞穴城市
变态指数：★★☆☆☆
这是土耳其卡帕多西亚的一个著名景点，传说是当年基督教徒们为了躲避战争而在此修建。里面曾住着20000人，......据英国《每日快报》报道，一位科学家兼理论家Robert Lanza博士宣称，世界上并不存在人类死亡，死亡的只是身体。他认为我们的意识借助我们体内的能量生存，而且...《我爱狐狸精》 - 刘馨棋
　　(电视剧《屏里狐》主题曲)
　　作词：金十三&李旦
　　作曲：刘嘉
　　狐狸精 狐狸仙
　　千年修...?&?&?&?&&CSS网页布局也可以算是一个系统的工作，DIVCSS网站的开发可能有多人协作，由一个团队来完成，这就涉及到很多规范性操作的问题，即使是一个人进行开发，也需要有一定的条理和规范，这是一篇转载自蓝色的文章，非常有效，作者总结了很多实用的经验，大家可以参考学习。
本规范既是一个开发规范，也是一个脚本语言参考，本规范并不是一个一成不变的必须严格遵守的条文，特殊情况下要灵活运用，做一定的变通。但是，请大家千万不要随意更改规范。如果有任何问题，请及时与我联系，我会及时更改本规范的相关代码样例和文档。
1. 在网站根目录中开设images common temp 三个子目录，根据需要再开设media 子目录，images目录中放不同栏目的页面都要用到的公共图片，例如公司的标志、banner 条、菜单、按钮等等；common 子目录中放css、js,、php、include 等公共文件；temp 子目录放客户提供的各种文字图片等等原始资料；media 子目录中放flash, avi, quick time 等多媒体文件 。
2. 在根目录中原则上应该按照首页的栏目结构，给每一个栏目开设一个目录，根据需要在每一个栏目的目录中开设一个images 和media 的子目录用以放置此栏目专有的图片和多媒体文件，如果这个栏目的内容特别多，又分出很多下级栏目，可以相应的再开设其他目录。
3. temp 目录中的文件往往会比较多，建议以时间为名称开设目录，将客户陆续提供的资料归类整理。
4. 除非有特殊情况，目录、文件的名称全部用小写英文字母、数字、下划线的组合，其中不得包含汉字、空格和特殊字符；目录的命名请尽量以英文为指导，不到万不得已不要以拼音作为目录名称，经验证明，用拼音命名的目录往往连一个月后的自己都看不懂，
我们应该有一个脚本整体风格一致的概念，意思是一个月后和一个月前的你写的脚本风格保持一致，以及同一个工作组中不同的开发人员编写的脚本风格保持一致，因为我们不可能永远孤立的开发，你随时都有可能和三个月前的自己合作（你的客户要求改版），也经常要和工作室中不同的同事共同开发一个项目，还有可能被要求修改已经离职人员开发的脚本，当然你自己也有可能会扔下一个项目给后来的同事。
1. Html 文件的通用模板：
div css xhtml xml Example Source Code Example Source Code []
Generator: Sub Design Studio ( [url=http://www.]www.[/url])
Creation Data:
original Author: eastline
&title& 文档标题 &/title&
&meta http-equiv="content-type" content="text/ charset=gb2312"&
&meta name="author" content="eastline"&
其他meta标记
div css xhtml xml Example Source Code Example Source Code []
&link rel="stylesheet" type="text/css" href="style/style.css"&
样式表定义
客户端Javascript 函数定义及初始化操作
div css xhtml xml Example Source Code Example Source Code []
&body bgcolor="#ffffff"&
为了保证网站能够与下一代的web 语言xml 标准兼容，所有的HTML 标签的属性都要用单引号或者双引号括起，即我们应该写 &a href=”url”& 而不 是 &a href=url&.
2. 允许全文检索的页面，为了使Internet上的搜索引擎能够有效检索，在频道的首页的html的&head&&/head&之间应该加入Keywords 和Description 元标记，例如 ：
div css xhtml xml Example Source Code Example Source Code []
&meta name=”keywords” content=”东方新干线，汽车，买车"/&
&meta name=”description” content=”东方新干劲线，全球中文汽车信息第一站"/&
3. CSS 文件的格式样例代码 ：
div css xhtml xml Example Source Code Example Source Code []
&style type="text/css"&
p { text-indent: 2 }
{ font-family: "宋体"; font-size: 9 color: #000000; margin-top: 0
margin-right: 0 margin-bottom: 0 margin-left: 0px}
table { font-family: "宋体"; font-size: 9 line-height: 20 color: #000000}
a:link { font-size: 9 color: #FFFFFF; text-decoration: none}
a:visited { font-size: 9 color: #99FFFF; text-decoration: none}
a:hover { font-size: 9 color: #FF9900; text-decoration: none}
a:active { font-size: 9 color: #FF9900; text-decoration: none}
a.1:link { font-size: 9 color: #3366 text-decoration: none}
a.1:visited { font-size: 9 color: #3366 text-decoration: none}
a.1:hover { font-size: 9 color: #FF9900; text-decoration: none}
a.1:active { font-size: 9 color: #FF9922; text-decoration: none}
.blue { font-family: "宋体"; font-size: 10.5 line-height: 20 color: #0099FF; letter-spacing: 5em}
这里尤其要注意的是a:link a:visited a:hover a:actived 的排列顺序一定要严格照上面的样例代码，否则或多或少会出问题。另外我们规定重定义的最先，伪类其次，自定义最后，便于自己和他人阅读！
为了保证不同浏览器上字号保持一致，字号建议用点数pt和像素px来定义，pt一般使用中文宋体的9pt和11pt，px一般使用中文宋体12px 和14.7px 这是经过优化的字号，黑体字或者宋体字加粗时，一般选用11pt和14.7px 的字号比较合适。
在写 &table& 互相嵌套时，严格按照的规范，对于单独的一个&table&来说，&table&& tr&对齐，&td& 缩进两个半角空格，&td& 中如果还有嵌套的表格，&table&也缩进两个半角空格，如果&td&中没有任何嵌套的表格，&/td& 结束标记应该与 &td& 处于同一行，不要换行，
如我们注意在源代码中不应有这样的代码：
div css xhtml xml Example Source Code Example Source Code []
&td&&img src=”../images/sample.gif”&
而应该是这样的：
div css xhtml xml Example Source Code Example Source Code []
&td&&img src=”../images/sample.gif”&&/td&
这是因为浏览器认为换行相当于一个半角空格，以上不规范的写法相当于无意中增加一个半角空格，如果确实有必要增加一个半角空格，也应该这样写：
div css xhtml xml Example Source Code Example Source Code []
&td&&img src=”../images/sample.gif”& &/td&
属于同一个级别 的 &table& 一定是左首对齐的，另外不允许没有任何内容的空的单元格存在，高度大于等于12px 的单元格应该
在 &td& 和 &/td& 之间写一个 ，如果高度小于12px, 则应该 在 &td& 和 & /td& 之间插入一个1*1 大小的透明的gif 图片，这是因为某些浏览器认为空单元格非法而不会予以解释。如果代码顺序较乱，在DW3中可以通过command-&apply souce formatting进行重新整理！
5. Width 和height 的写法也有统一的规范，一般情况下只有一列的表格，width 写在&table& 的标签内，只有一行的表格，height 写在 & table& 的标签内，多行多列的表格，width 和height 写在第一行或者第一列的 &td& 标签内。总之遵循一条原则：不出现多于一个的控制同一个单元格大小的height 和width, 保证任何一个width 和height 都是有效的，也就是你改动代码中任何一个width 和height 的数值，都应该在浏览器中看到变化。做到这一条不容易，需要较长时间的练习和思考。
1. 在排布表格之前，请大家一定要好好思考一个最佳的方案，表格的嵌套尽量控制在三层以内，并且应该尽量避免 &colspan& &rowspan& 两个标记，经验表明，这两个标记会带来许多麻烦。
2. 一个网页要尽量避免用整个一张大表格，所有的内容都嵌套在这个大表格之内，因为浏览器在解释页面的元素时，是以表格为单位逐一显示，如果一张网页是嵌套在一个大表格之内，那么很可能造成的后果就是，当浏览者敲入网址，他要先面对一片空白很长时间，然后所有的网页内容同时出现。如果必须这样做，请使用 &tbody&标记，以便能够使这个大表格分块显示。
3. 排版中我们经常会遇到需要进行首行缩进的处理，不要使用
或者全角空格来达到效果，规范的做法是在样式表中定义 p { text-indent: 2 } 然后给每一段加上 &p& 标记，注意，一般情况下，请不要省略 &/p& 结束标记 。
4. 原则上，我们禁止用 &img width=?
height=?& 来人为干预图片显示的尺寸，而且建议 &img& 标签中不要带上width 和height 两个属性，这是因为制作过程中，图片往往需要反复的修改，这样可以避免人为干预图片显示的尺寸，尽可能的发挥浏览器自身的功能；但是这样的一个副作用是当网页还未加载图片时，不会留出图片的站位大小，可能会造成网页在加载过程中抖动（如果图片是插在一个固定大小的表格里的，不会有这个现象），尤其是当图片的尺寸较大时，这种现象会很明显，所以当预料到这种会明显导致网页抖动的情况会发生时，请大家务必在最后给 &img&附上 width 和
height 属性。
5. 为了最大程度的发挥浏览器自动排版的功能，在一段完整的文字中请尽量不要使用&br& 来人工干预分段。
6. 不同语种的文字之间应该有一个半角空格，但避头的符号之前和避尾的符号之后除外汉字之间的标点要用全角标点，英文字母和数字周围的括号应该使用半角括号。
7. 所有的字号都应该用样式表来实现，禁止在页面中出现 &font size=?& 标记。
8. 请不要在网页中连续出现多于一个的也尽量少使用全角空格（英文字符集下，全角空格会变成乱码），空白应该尽量使用 text-indent, padding, margin, hspace, vspace 以及透明的gif 图片来实现。
9. 中英文混排时，我们尽可能的将英文和数字定义为verdana 和arial 两种字体。
10. 行距建议用百分比来定义，常用的两个行距的值是line-height:120%/150%.
11. 网站中的路径全部采用相对路径，一般链接到某一目录下的缺省文件的链接路径不必写全名，如我们不必这样：&a href=”aboutus/index.htm”& 而应该这样：&a href=”aboutus/”&
12. 嵌入图形文本的使用较大的字体，建议不要在图形中包括文本。
13.“网页大小”定义为网页的所有文件大小的总和，包括HTML文件和所有的嵌入的对象。用户喜欢快的而不是新奇的站点。对于解调器用户，网页大小保持在34K以下为合适。
文件命名原则
1. 每一个目录中应该包含一个缺省的html 文件，文件名统一用index.htm
2.件名称统一用小写的英文字母、数字和下划线的组合。
3. 命名原则的指导思想一是使得你自己和工作组的每一个成员能够方便的理解每一个文件的意义，二是当我们在文件夹中使用“按名称排例”的命令时，同一种大类的文件能够排列在一起，以便我们查找、修改、替换、计算负载量等等操作。
4. 下面以“新闻”（包含“国内新闻”和“国际新闻”）这个栏目来说明html 文件的命名原则 ：
☆ 在根目录下开设news目 录
☆ 第一条缺省新闻取名index.htm
☆ 所有属于“国内新闻”的新闻依次取名为：china_1.htm, china_2.htm, …
☆ 所有属于“国际新闻”的新闻依次取名为：internation_1.htm, internation _2.htm, …
☆ 如果文件的数量是两位数，请将前九个文件命名为：china_01.htm, china_02.htm 以保证所有的文件能够在文件夹中正确排序。
5. 图片的命名原则遵循以下几条规范 ：
☆ 名称分为头尾两两部分，用下划线隔开。
☆ 头部分表示此图片的大类性质，例如广告、标志、菜单、按钮等等。
☆ 一般来说:
放置在页面顶部的广告、装饰图案等长方形的图片我们取名：banner
标志性的图片我们取名为：logo
在页面上位置不固定并且带有链接的小图片我们取名为button
在页面上某一个位置连续出现，性质相同的链接栏目的图片我们取名：menu
装饰用的照片我们取名：pic
不带链接表示标题的图片我们取名：title
依照此原则类推。
☆ 尾部分用来表示图片的具体含义。
☆ 下面是几个样例，大家应该能够一眼看明白图片的意义：
div css xhtml xml Example Source Code Example Source Code []
banner_sohu.gif
banner_sina.gif
menu_aboutus.gif
menu_job.gif
title_news.gif
logo_police.gif
logo_national.gif
pic_people.jpg
pic_hill.jpg&　　免责声明：本文仅代表作者个人观点，与王朝网络无关。王朝网络登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述，其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。&&&&为你推荐&&&&&&转载本文UBB代码HTML代码复制到剪贴板...&更多内容??????????&&&&&&&&&频道精选&&&王朝女性&&|&&|&&|&&|&&|&&|&&|&&|&&|&&|&&|&&|&王朝分栏&&|&&|&&|&&|&&|&&|&&|&&|&&|&&|&王朝编程&&|&&|&&|&&|&&|&&|&&|&&|&&|&&|&王朝导购&&|&&|&&|&&|&&|&&|&&|&&|&&|&&|&王朝其他&&|&&|&&|&&|&&|&&|&&&&&2005-&&版权所有&