W3C代碼標準規範

時間  2019-11-18
標籤 w3c 代碼 標準 規範 欄目 C&C++ 简体版
原文   原文鏈接
中文名：
萬維網聯盟
外文名：
World Wide Web Consortium
 
萬維網聯盟建立於1994年，是Web技術領域最具權威和影響力的國際中立性技術標準機構。到目前爲止，W3C已發佈了200多項影響深遠的Web技術標準及實施指南，如廣爲業界採用的 超文本標記語言（ 標準通用標記語言下的一個應用）、 可擴展標記語言（標準通用標記語言下的一個 子集）以及幫助殘障人士有效得到Web內容的信息無障礙指南（ WCAG）等，有效促進了Web技術的互相兼容，對互聯網技術的發展和應用起到了基礎性和根本性的支撐做用。[1]萬維網聯盟（外語縮寫：W3C）標準不是某一個標準，而是一系列標準的集合。網頁主要由三部分組成：結構（Structure）、表現（Presentation）和行爲（Behavior）。
對應的標準也分三方面：結構化標準語言主要包括 XHTML和 XML，表現標準語言主要包括CSS，行爲標準主要包括對象模型（如W3C DOM）、ECMA Script等。這些標準大部分由W3C起草和發佈，也有一些是其餘標準組織制訂的標準，好比 ECMA（European Computer Manufacturers Association）的ECMAScript標準。
 
1、 可擴展標記語言（ 標準通用標記語言下的一個 子集、外語縮寫：XML）。
2、可擴展超文本標記語言（外語縮寫： XHTML）。
3、表現標準語言：層疊樣式表（CSS）。
 
 

1、目的: 爲何要遵循標準
咱們做爲生產者實際上只是位於中游，既不是上游的瀏覽器製造商，他們是標準的真正制定者，也不算是下游，他們是瀏覽器的終端使用者。這個角色就意味着咱們位於一個接口的位置，咱們須要想辦法知足下游的用戶使用上游不一樣瀏覽器時看到的是一樣的內容。用一個程序的語言說，咱們是轉換器……adapter，咱們千方百計讓咱們的頁面、咱們的程序可以支持全部的瀏覽器、可以知足儘量多的用戶。咱們要知足全部的客戶，即便作不到，咱們也要知足咱們技術範圍以內的全部用戶。javascript

2、目標
一個標準制做的網站，讓你壓根感受不到跟標準有關。css

3、受衆 
全部ui設計師、技術工程師、運營維護人員。html

4、標準內容
拋棄聲明：之後咱們將拋棄font標籤，新的頁面中不該該再出現如<font color=」red」></font>，已經存在的老的頁面也應該在修改時儘可能替代，替代方法：<span 
class=」red_tex」></span>。java

一個標準XHTML頭信息格式以下：瀏覽器

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

複製代碼 
<html xmlns="http://www.w3.org/1999/xhtml" lang="gb2312"> 
<head> 
    <title>慧聰網_中國領先的B2B電子商務平臺、電子商務網站</title> 
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
    <meta name="description" content="慧聰網(hc360.com)是爲中小企業提供B2B電子商務服務的網上貿易平臺，是企業尋求電子商務網絡貿易信息的首選行業門戶。中小企業經過慧聰網能夠快速發佈產品供求信息並達成交易。慧聰網爲您提供全面的B2B行業資訊，供應，求購，庫存信息，努力讓每一個老闆都成爲B2B電子商務活動的一員。" /> 
    <meta name="keywords" content="B2B,hc360,電子商務,供求信息,加工,庫存,二手,網上貿易,行業門戶,商機,網上交易,行業資訊,在線交易,中小企業,供應,求購,商務網,商業貿易,貿易平臺" />
</head>
複製代碼

 

一、什麼是DOCTYPE
DOCTYPE是document type(文檔類型)的簡寫，用來講明你用的XHTML或者HTML是什麼版本。其中的DTD(例如xhtml1-transitional.dtd)叫文檔類型定義，裏面包含了文檔的規則，瀏覽器就根據你定義的DTD來解釋你頁面的標識，並展示出來。要創建符合標準的網頁，DOCTYPE聲明是必不可少的關鍵組成部分；除非你的XHTML肯定了一個正確的DOCTYPE，不然你的標識和CSS都不會生效。
XHTML 1.0 提供了三種DTD聲明可供選擇：
i) 過渡的(Transitional)：要求很是寬鬆的DTD，它容許你繼續使用HTML4.01的標識(可是要符合xhtml的寫法)。 
完整代碼以下：網絡

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

ii) 嚴格的(Strict)：要求嚴格的DTD，你不能使用任何表現層的標識和屬性，例如<br>。
完整代碼以下：框架

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

iii) 框架的(Frameset)：專門針對框架頁面設計使用的DTD，若是你的頁面中包含有框架，須要採用這種DTD。
完整代碼以下：less

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

注：DOCTYPE聲明必須放在每個XHTML文檔最頂部，在全部代碼和標識之上。ide

二、名字空間 namespace
<html xmlns="http://www.w3.org/1999/xhtml" lang="gb2312">
一般咱們HTML4.0的代碼只是<html>，這裏的"xmlns"是什麼呢？
這個「xmlns」是XHTML namespace的縮寫，叫作「名字空間」聲明。XHTML是HTML向XML過渡的標識語言，它須要符合XML文檔規則，所以也須要定義名字空間。又由於XHTML1.0不能自定義標識，因此它的名字空間都相同，就是"http://www.w3.org/1999/xhtml"。目前階段咱們只要照抄代碼就能夠了。post

三、定義語言編碼
<meta http-equiv=「Content-Type」 content=「text/html; charset=gb2312」 />
爲了被瀏覽器正確解釋和經過W3C代碼校驗，全部的XHTML文檔都必須聲明它們所使用的編碼語言，咱們通常使用gb2312(簡體中文)，製做多國語言頁面也有可能用Unicode、ISO-8859-1等，根據你的須要定義。
注：若是忘記了定義語言編碼,可能就會出現,你在DW(dreamweaver)作完一個頁面，第二次打開時全部的中文變成了亂碼。

四、Javascript定義
Js必需要用<script language="javascript" type="text/javascript">來開頭定義，而不是原來的<script language=javascript>或乾脆直接<script>，而且須要加個註釋符<!--   -->，以保證不在不支持js的瀏覽器上直接顯示出代碼來。 
例如：

複製代碼 
<script language="javascript" type="text/javascript"> 
//<![CDATA[ 
function show_layout(selObj){ 
var n = selObj.options[selObj.selectedIndex].value; 
document.getElementById('stylesheet').href = n; 
} 
//]]> 
</script>
複製代碼

注：具體參考js規範。

五、CSS定義
CSS必需要用<style type=「text/css」>開頭來定義，而不是原來的直接<style>，也不建議直接寫在內容代碼裏如：<div style=」padding-left:20px;」></div>，並須要加個註釋符<!-- --> 
例如：

<style type="text/css" media="screen"> 
<!-- 
body {margin:0px;padding:0px;font-size:12px;text-align:center} 
--> 
</style>

爲保證各瀏覽器的兼容性，在寫CSS時請都寫上數量單位，例如：錯誤：.space_10{padding-left:10} 正確：.space_10 {padding-left:10px}

六、不要在註釋內容中使用「--」
「--」只能發生在XHTML註釋的開頭和結束，也就是說，在內容中它們再也不有效。
例以下面的代碼是無效的：<!--這裏是註釋-----------這裏是註釋-->
正確的應用等號或者空格替換內部的虛線。<!--這裏是註釋============這裏是註釋-->

七、全部標籤的元素和屬性的名字都必須使用小寫
與HTML不同，XHTML對大小寫是敏感的，<title>和<TITLE>是不一樣的標籤。XHTML要求全部的標籤和屬性的名字都必須使用小寫。例如：<BODY>必須寫成<body>。大小寫夾雜也是不被承認的，一般dreamweaver自動生成的屬性名字"onMouseOver"也必須修改爲"onmouseover"。

八、全部的屬性必須用引號""括起來
在HTML中，你能夠不須要給屬性值加引號，可是在XHTML中，它們必須被加引號。
例如：<height=80>必須修改成：<height="80">。
特殊狀況，你須要在屬性值裏使用雙引號，你能夠用"，單引號可使用&apos;，例如：<alt="say&apos;hello&apos;">

九、把全部<和&特殊符號用編碼表示
任何小於號（<），不是標籤的一部分，都必須被編碼爲 &lt;
任何大於號（>），不是標籤的一部分，都必須被編碼爲 &gt;
任何與號（&），不是實體的一部分的，都必須被編碼爲 &amp; 
錯誤：
http://club.china.alibaba.com/forum/thread/search_forum.html?action=SearchForum&doSearchForum=true&main=1&catcount=10&keywords=mp3 
正確：
http://club.china.alibaba.com/forum/thread/search_forum.html?action=SearchForum&amp;doSearchForum=true&amp;main=1&amp;catcount=10&amp;keywords=mp3

十、給全部屬性賦一個值
XHTML規定全部屬性都必須有一個值，沒有值的就重複自己。例如： 
<td nowrap><input type="checkbox" name="shirt" value="medium" checked>必須修改成：
<td nowrap="nowrap"><input type="checkbox" name="shirt" value="medium" checked="checked" />

十一、全部的標記都必需要有一個相應的結束標記
之前在HTML中，你能夠打開許多標籤，例如<p>和<li>而不必定寫對應的</p>和</li>來關閉它們。但在XHTML中這是不合法的。XHTML要求有嚴謹的結構，全部標籤必須關閉。若是是單獨不成對的標籤，在標籤最後加一個"/"來關閉它。 
例如：<br /> 
<img height="80" alt="網頁" title=」網頁」 src="logo.gif" width="200" />

特殊結束標記 
錯誤：
Document.write(「<td width=\"300\"><a href=\"1.html\">ok</a></td>」);
正確:
Document.write(「<td width=\"300\"><a href=\"1.html\">ok<\/a><\/td>」);
在js中，原已結束的標籤須要再轉義再結束。

十二、全部的標記都必須合理嵌套 
一樣由於XHTML要求有嚴謹的結構，所以全部的嵌套都必須按順序，之前咱們這樣寫的代碼： 
<p><b></p></b>必須修改成：<p><b></b></p> 
就是說，一層一層的嵌套必須是嚴格對稱。
錯誤：
<table><tr><form><td></td></form></tr></table>
正確：
<form><table><tr><td></td></tr></table></form>

1三、圖片添加有意義的alt屬性
例如：<img src="logo.gif" width="100" height="100" align="middle" boder="0" alt="阿里巴巴" />
儘量的讓做爲內容的圖片都帶有屬於本身的alt屬性。
同理：添加文字連接的title屬性。
<a href="#" target="_blank" title="新聞新聞新聞新聞">新聞新聞…</a>，在一些限定字數的內容展現尤其重要，幫助顯示不完成的內容顯示完整，而不用考慮頁面會所以而撐大。

1四、在form表單中增長lable，以增長用戶友好度 
例如：

<form action="http://somesite.com/prog/adduser" method="post">
  <label for="firstname">first name: </label>
  <input type="text" id="firstname" />
  <label for="lastname">last name: </label>
  <input type="text" id="lastname" />
</form>

 

附錄一
一、XHTML校驗
校驗網址：http://validator.w3.org/
校驗方式：網址校驗、文件上傳校驗
通常選擇"Show Source"和"Verbose Output"能夠幫助你找到錯誤代碼所在行和錯誤緣由。

XHTML校驗常見錯誤緣由對照表
1.No DOCTYPE Found! Falling Back to HTML 4.01 Transitional--未定義DOCTYPE。
2.No Character Encoding Found! Falling back to UTF-8.--未定義語言編碼。
3.end tag for "img" omitted, but OMITTAG NO was specified--圖片標籤沒有加"/"關閉。
4.an attribute value specification must be an attribute value literal unless SHORTTAG YES is specified--屬性值必須加引號。
5.element "DIV" undefined---DIV標籤不能用大寫，要改爲小寫div。
6.required attribute "alt" not specified---圖片須要加alt屬性。
7.required attribute "type" not specified---JS或者CSS調用的標籤漏了type屬性。
其中最最多見的錯誤就是標籤的大小寫問題了。一般這些錯誤都是關聯的，好比忘記了一個</li>其餘<li>標籤都會報錯，因此不要看到一堆的錯誤懼怕，一般解決了一個錯誤，其餘的錯誤也都沒有了。


附錄二
二、CSS2校驗
校驗網址：http://jigsaw.w3.org/css-validator/
校驗方式：網址校驗、文件上傳校驗、直接貼入代碼校驗
校驗成功，會顯示"恭喜恭喜，此文檔已經經過樣式表校驗! "。校驗失敗，會顯示兩類錯誤：錯誤和警告。錯誤表示必定要修正，不然沒法經過校驗；警告表示有代碼不被W3C推薦,建議修改。
一樣，經過檢驗後，能夠放置一個CSS校驗經過圖標。

CSS2校驗常見錯誤緣由對照表
1.(錯誤)無效數字：color909090不是一個color值，909090---十六進制顏色值必須加"#"號，即#909090
2.(錯誤)無效數字：margin-topUnknown dimension：6pixels ---pixels不是一個單位值，正確寫法6px
3.(錯誤)屬性：scrollbar-face-color 不存在 : #eeeeee --- 定義滾動條顏色是非標準的屬性
4.(錯誤)值：cursorhand不存在 : hand是非標準屬性值，修改成cursor:pointer
5.(警告)Line:0 font-family: 建議你指定一個種類族科做爲最後的選擇 --W3C建議字體定義的時候，最後以一個類別的字體結束，例如"sans-serif"，以保證在不一樣操做系統下，網頁字體都能被顯示。
6.(警告)Line:0 can't find the warning message for otherprofile --表示在代碼中有非標準屬性或值，校驗程序沒法判斷和提供相應的警告信息。

 

 

【轉自 MIN飛翔 博客】

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程