我在找工作的時(shí)候，經(jīng)常看到招聘信息有一條是 熟悉W3C標(biāo)準(zhǔn)
那么，W3C標(biāo)準(zhǔn)到底是什么？我們作為前端開發(fā)人員怎么樣修改我們?cè)瓉淼木幋a習(xí)慣才能算作是符合W3C標(biāo)準(zhǔn)？今天，我就來簡(jiǎn)單的跟大家講一講。當(dāng)然，肯定會(huì)有一些遺漏的地方，歡迎大家補(bǔ)充！
什么是W3C標(biāo)準(zhǔn)
萬維網(wǎng)聯(lián)盟（外語縮寫：W3C）標(biāo)準(zhǔn)不是某一個(gè)標(biāo)準(zhǔn)，而是一系列標(biāo)準(zhǔn)的集合。網(wǎng)頁主要由三部分組成：結(jié)構(gòu)（Structure）、表現(xiàn)（Presentation）和行為（Behavior）
想必看這篇文章的旁友多少知道HTML,CSS,JS這三個(gè)前端開發(fā)最最基本的工具。以上三個(gè)就對(duì)應(yīng)網(wǎng)頁的三個(gè)部分，針對(duì)這個(gè)三個(gè)部分，提出了許多標(biāo)準(zhǔn)，真是折騰我們前端寶寶們啊。
我們到底要遵循哪些基本標(biāo)準(zhǔn)
要一條一條的列出來肯定是很多而且必然有遺漏的，但是經(jīng)過我?guī)滋斓拿?，我發(fā)現(xiàn)學(xué)習(xí)XHTML的一些標(biāo)準(zhǔn)就基本能符合。
XTML是以XML格式編寫的HTML，在更嚴(yán)格更純凈的HTML版本，是2001年1月發(fā)布的W3C推薦標(biāo)準(zhǔn)，可想而知了吧，旁友們。
下面我就列舉一些XTML必須遵循的標(biāo)準(zhǔn)，當(dāng)然你也可以直接點(diǎn)擊這里
- 文檔結(jié)構(gòu)
XHTML DOCTYPE 是強(qiáng)制性的
<html> 中的 XML namespace 屬性是強(qiáng)制性的
<html>、<head>、<title> 以及 <body> 也是強(qiáng)制性的 - 需要定義語言編碼
<meta http-equiv=“Content-Type” content=“text/html; charset=gb2312” />
- 元素語法
XHTML 元素必須正確嵌套
XHTML 元素必須始終關(guān)閉
XHTML 元素必須小寫
XHTML 文檔必須有一個(gè)根元素 - 屬性語法
XHTML 屬性必須使用小寫
XHTML 屬性值必須用引號(hào)包圍
XHTML 屬性最小化也是禁止的、 - XHTML 元素必須合理嵌套
在 HTML 中，一些元素可以不互相嵌套，像這樣：
<b><i>粗體和斜體文本</b></i>
在 XHTML 中，所有的元素都必須互相合理地嵌套，像這樣：
<b><i>粗體和斜體文本</i></b>
- XHTML 元素必須有關(guān)閉標(biāo)簽
錯(cuò)誤示例：
<p>這是一個(gè)段落
<p>這是另外一個(gè)段落
正確示例：
<p>這是一個(gè)段落</p>
<p>這是另外一個(gè)段落</p>
- 空元素必須包含關(guān)閉標(biāo)簽
錯(cuò)誤示例：
分行:<br>
水平線: <hr>
圖片: <img src="happy.gif" alt="Happy face">
正確示例：
分行:<br />
水平線: <hr />
圖片: <img src="happy.gif" alt="Happy face" />
- XHTML 元素必須是小寫
錯(cuò)誤示例:
<BODY>
<P>這是一個(gè)段落</P>
</BODY>
正確示例：
<body>
<p>這是一個(gè)段落</p>
</body>
- 屬性名稱必須是小寫
錯(cuò)誤示例：
<table WIDTH="100%">
正確示例:
<table width="100%">
- 屬性值必須有引號(hào)
錯(cuò)誤示例：
<table width=100%>
正確示例：
<table width="100%">
- 不允許屬性簡(jiǎn)寫
錯(cuò)誤示例：
<input checked>
<input readonly>
<input disabled>
<option selected>
正確示例：
<input checked="checked">
<input readonly="readonly">
<input disabled="disabled">
<option selected="selected">
以上我覺得大部分前端開發(fā)人員應(yīng)該一開始學(xué)習(xí)的時(shí)候就會(huì)避免的，下面要說的是可能會(huì)忽略的一些方面
- 圖片標(biāo)簽必須要有alt屬性
- 把所有特殊符號(hào)用編碼表示
空格為? 、小于號(hào)（<）<、大于號(hào)（>）>、和號(hào)（&）&
等 - 盡量使用外鏈css樣式表和js腳本。是結(jié)構(gòu)、表現(xiàn)和行為分為三塊
- 樣式盡量少用行間樣式表，使結(jié)構(gòu)與表現(xiàn)分離，標(biāo)簽的id和class等屬
性命名要做到見文知義
遵循這些標(biāo)準(zhǔn)之后對(duì)我們到底有什么好處呢
- 避免頁面亂碼現(xiàn)象
- 簽規(guī)范可以提高搜索引擎對(duì)頁面的抓取效率，對(duì)SEO（搜索引擎優(yōu)
化）很有幫助 - 提高頁面渲染速度，提高用戶的體驗(yàn)
- 標(biāo)簽越少，加載越快，用戶體驗(yàn)提高，代碼維護(hù)簡(jiǎn)單，便于改版
- 達(dá)到部分兼容各大瀏覽器的目的
如果你不知道你的代碼是否完全符合W3C標(biāo)準(zhǔn)，可以將網(wǎng)頁放到W3C驗(yàn)證器中檢查一下。驗(yàn)證器地址
以上內(nèi)容來自菜鳥學(xué)習(xí)，w3cschool
