新手不得不注意HTML CSS 规范

浏览数：14 / 时间：2015年06月09日

作为一名新进的程序菜鸟，根本不知道从哪里开始学起好，前辈都说HTML CSS 规范是一个十分需要注意的点，要我记下，特地转来保存一下，大家相互学习

//总论

本规范既然一个开发规范，也是一个脚本语言参看，本规范并不是一个原封不动的定然严厉顺从的条文，特异情形下要灵方便用，做定然的变通。然而，请大家千万不要轻易改动规范。万一有任何问题，请及时与我联系，我会及时改动本规范的相干代码样例和文档。

/基本要求

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 文件的通用模板：

<html>

<head>
<title> 文档题目 </title>
<meta http-equiv="content-type" content="text/html; charset=gb2312">
<meta name="author" content="eastline">

其他meta 标记

<link rel="stylesheet" type="text/css" href="style/style.css">

款式表定义
客户端javascript 函数定义及初始化垄断

</head>
<body bgcolor="#ffffff">
… …
</body>

赔偿：
为了保证网站能够与下一代的web 语言xml 规范接受，所有的HTML 标签的属性都要用单引号可能双引号括起，即我们该当写 <a href=”url”> 而不是 <a href=url>.

2. 批准全文检索的版面，为了使Internet上的搜查引擎能够管用检索，在频道的首页的html的<head></head>之间该当加入Keywords 和Description 元符号，例如：

<meta name=”keywords” content=”东方新干线，汽车，买车”>
<meta name=”description” content=”东方新干劲线，全球中文汽车消息第一站”>

3. CSS 文件的款式样例代码：

<style type="text/css">
<!—
p { text-indent: 2em; }
body { font-family: "宋体"; font-size: 9pt; color: #000000; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px}
table { font-family: "宋体"; font-size: 9pt; line-height: 20px; color: #000000}
a:link { font-size: 9pt; color: #FFFFFF; text-decoration: none}
a:visited { font-size: 9pt; color: #99FFFF; text-decoration: none}
a:hover { font-size: 9pt; color: #FF9900; text-decoration: none}
a:active { font-size: 9pt; color: #FF9900; text-decoration: none}
a.1:link { font-size: 9pt; color: #3366cc; text-decoration: none}
a.1:visited { font-size: 9pt; color: #3366cc; text-decoration: none}
a.1:hover { font-size: 9pt; color: #FF9900; text-decoration: none}
a.1:active { font-size: 9pt; color: #FF9922; text-decoration: none}
.blue { font-family: "宋体"; font-size: 10.5pt; line-height: 20px; color: #0099FF; letter-spacing: 5em}
-->
</style>

这里尤其要当心的是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> 处于统一行，不要换行，

如我们当心在源代码中不应有这么的代码：

<td><img src=”../images/sample.gif”>
</td>
而该当是这么的：

<td><img src=”../images/sample.gif”></td>
这是因为博览器感受换行相当于一个半角空格，以上不规范的写法相当于无意中添置一个半角空格，万一确乎有必需添置一个半角空格，也该当这么写：

<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: 2em; } 然后给每一段加上 <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 以保证所有
试图利用setValues()措施来设置负值会引发失常。