新手不得不注意HTML CSS 規範

作爲一名新進的程序菜鳥,根本不知道從哪裏開始學起好,前輩都說HTML CSS 規範是一個十分需要注意的點,要我記下,特地轉來保存一下,大家相互學習

//總論


本規範既然一個開發規範,也是一個腳本語言參看,本規範並不是一個原封不動的定然嚴厲順從的條文,特異情形下要靈方便用,做定然的變通。然而,請大家千萬不要輕易改動規範。萬一有任何問題,請及時與我聯繫,我會及時改動本規範的相干代碼樣例和文檔。


/基 本 要 求


1. 在網站根目錄中開設p_w_picpaths common temp 三個子目錄,依據必需再開設media 子目錄,p_w_picpaths目錄中放不同欄目標版面都要用到的公共圖片,例如公司的符號、banner 條、菜單、按鈕等等;common 子目錄中放css、js,、php、include 等公共文件;temp 子目錄放客戶供給的各種文字圖片等等原始材料;media 子目錄中放flash, avi, quick time 等多媒體文件 。
2. 在根目錄中分寸上該當按照首頁的欄目構造,給每一個欄目開設一個目錄,依據必需在每一個欄目標目錄中開設一個p_w_picpaths 和media 的子目撥取以放置此欄目專有的圖片和多媒體文件,萬一這個欄目標內阮堪礓多,又分出許多下級欄目,能夠相應的再開設其他目錄。
3. temp 目錄中的文件經常會比擬多,提倡以工夫爲名目開設目錄,將客戶陸續供給的材料歸類整理。


4. 除非有特異情形,目錄、文件的名目全副用小寫英文字母、數字、下劃線的組合,其中不得包括漢字、空格和特異字符;目錄的命名請儘量以英文爲點撥,不到萬不得已不要以拼音作爲目錄名目,經印驗證,用拼音命名的目錄經常連一個月後的自己都看不懂,
/腳 本 編 寫
我們該當有一個腳本大局風格統一的觀念,含義是一個月後和一個月前的你寫的腳本風格堅持統一,以及統一個工作組中不同的開發人員編寫的腳本風格堅持統一,因爲我們不可能永遠孤寂的開發,你隨時都有可能和三個月前的自己配合(你的客戶要求改版),也經常要和工作室中不同的同志共同開發一個項目,還有可能被要求修正曾經離職人員開發的腳本,當然你自己也有可能會扔下一個項目給爾後的同志。
1. Html 文件的通用模板:


<html>
<!--
Generator: Sub Design Studio ( n)
Creation Data: 2000-8-1
Original Author: eastline
-->
<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=”../p_w_picpaths/sample.gif”>
</td>
而該當是這麼的:


<td><img src=”../p_w_picpaths/sample.gif”></td>
這是因爲博覽器感受換行相當於一個半角空格,以上不規範的寫法相當於無意中添置一個半角空格,萬一確乎有必需添置一個半角空格,也該當這麼寫:


<td><img src=”../p_w_picpaths/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()措施來設置負值會引發失常。


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章