我在找工作的時(shí)候,經(jīng)城鞣看到招聘信息有一條是 熟悉W3C標(biāo)準(zhǔn)
那么醉蚁,W3C標(biāo)準(zhǔn)到底是什么燃辖?我們作為前端開發(fā)人員怎么樣修改我們原來的編碼習(xí)慣才能算作是符合W3C標(biāo)準(zhǔ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ī)滋斓拿鳎野l(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%">
- 不允許屬性簡寫
錯(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ù)簡單,便于改版
- 達(dá)到部分兼容各大瀏覽器的目的
如果你不知道你的代碼是否完全符合W3C標(biāo)準(zhǔn)耗啦,可以將網(wǎng)頁放到W3C驗(yàn)證器中檢查一下凿菩。驗(yàn)證器地址
以上內(nèi)容來自菜鳥學(xué)習(xí),w3cschool