W3C標準

時間 2019-11-11

標籤 w3c 標準欄目 C&C++ 简体版

原文原文鏈接

今天在一些招聘要求上有看到這麼一條要求「熟悉W3C標準」，什麼是W3C標準，說實話當看到這個題目的時候我是蒙圈的，由於我學習同樣東西有這麼一個習慣，喜歡先深刻理解內容，再本身概括總結總體概念和知識網絡。因此學了這麼一年的前端雖然有遇到W3C這個概念，可是歷來沒有深刻理解它到底長啥個樣子。javascript

首先來講一說W3C是什麼？W3C 指萬維網聯盟（World Wide Web Consortium）。建立於1994年，是Web技術領域最具權威和影響力的國際中立性技術標準機構。他們最重要的工做是發展 Web 規範（稱爲推薦，Recommendations），這些規範描述了 Web 的通訊協議和其餘的構建模塊。每項 W3C 推薦的發展是經過由會員和受邀專家組成的工做組來完成的。工做組的經費來自公司和其餘組織，並會建立一個工做草案，最後是一份提議推薦。通常來講，爲了得到正式的批准，推薦都會被提交給 W3C 會員和主任。css

爲何要遵循標準？

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

目標

一個標準制做的網站，讓你壓根感受不到跟標準有關。前端

受衆

全部ui設計師、技術工程師、運營維護人員。java

標準內容

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

class=」red_tex」></span>。面試

一個標準XHTML頭信息格式以下：sql

<!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> 
    <meta charset="utf-8" /> 
    <title>W3Cschool - 學技術查資料，從w3cschool開始!</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="renderer" content="webkit" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="keywords" content="w3cschool,w3cschool在線教程,技術文檔,編程入門教程,W3Cschool,W3C,HTML,HTML5,CSS,Javascript,jQuery,Bootstrap,PHP,Java,Sql" />
    <meta name="description" content="w3cschool是一個專業的編程入門學習及技術文檔查詢網站，提供包括HTML,CSS,Javascript,jQuery,C,PHP,Java,Python,Sql,Mysql等編程語言和開源技術的在線教程及使用手冊，是類國外W3Cschool的W3C學習社區及菜鳥編程平臺。" />
</head>

一、什麼是DOCTYPE

DOCTYPE是document type(文檔類型)的簡寫，用來講明你用的XHTML或者HTML是什麼版本。其中的DTD(例如xhtml1-transitional.dtd)叫文檔類型定義，裏面包含了文檔的規則，瀏覽器就根據你定義的DTD來解釋你頁面的標識，並展示出來。要創建符合標準的網頁，DOCTYPE聲明是必不可少的關鍵組成部分；除非你的XHTML肯定了一個正確的DOCTYPE，不然你的標識和CSS都不會生效。chrome

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。

完整代碼以下：

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

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

二、名字空間 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"。目前階段咱們只要照抄代碼就能夠了。

三、定義語言編碼

<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">。

特殊狀況，你須要在屬性值裏使用雙引號，你能夠用"，單引號可使用'，例如：<alt="say'hello'">

九、把全部<和&特殊符號用編碼表示

任何小於號（<），不是標籤的一部分，都必須被編碼爲 <

任何大於號（>），不是標籤的一部分，都必須被編碼爲 >

任何與號（&），不是實體的一部分的，都必須被編碼爲 &

錯誤：

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&doSearchForum=true&main=1&catcount=10&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="w3cschool" />

儘量的讓做爲內容的圖片都帶有屬於本身的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>

總而言之，W3C爲咱們提供了編寫web的規範，讓不只僅是開發者本身能夠讀懂頁面，也讓其他發開着和機器易讀頁面，實現更良好的開發環境。