關(guān)于W3C標(biāo)準(zhǔn)之你不得不知道的那些事兒

我在找工作的時(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)(<)&lt脓规、大于號(hào)(>)&gt馆揉、和號(hào)(&)&amp
  • 盡量使用外鏈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

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末帜讲,一起剝皮案震驚了整個(gè)濱河市衅谷,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌似将,老刑警劉巖获黔,帶你破解...
    沈念sama閱讀 216,591評(píng)論 6 501
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異在验,居然都是意外死亡玷氏,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,448評(píng)論 3 392
  • 文/潘曉璐 我一進(jìn)店門腋舌,熙熙樓的掌柜王于貴愁眉苦臉地迎上來盏触,“玉大人,你說我怎么就攤上這事≡薇纾” “怎么了雌芽?”我有些...
    開封第一講書人閱讀 162,823評(píng)論 0 353
  • 文/不壞的土叔 我叫張陵,是天一觀的道長诗宣。 經(jīng)常有香客問我膘怕,道長想诅,這世上最難降的妖魔是什么召庞? 我笑而不...
    開封第一講書人閱讀 58,204評(píng)論 1 292
  • 正文 為了忘掉前任,我火速辦了婚禮来破,結(jié)果婚禮上篮灼,老公的妹妹穿的比我還像新娘。我一直安慰自己徘禁,他們只是感情好诅诱,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,228評(píng)論 6 388
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著送朱,像睡著了一般娘荡。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上驶沼,一...
    開封第一講書人閱讀 51,190評(píng)論 1 299
  • 那天炮沐,我揣著相機(jī)與錄音,去河邊找鬼回怜。 笑死大年,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的玉雾。 我是一名探鬼主播翔试,決...
    沈念sama閱讀 40,078評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼复旬!你這毒婦竟也來了垦缅?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 38,923評(píng)論 0 274
  • 序言:老撾萬榮一對(duì)情侶失蹤驹碍,失蹤者是張志新(化名)和其女友劉穎失都,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體幸冻,經(jīng)...
    沈念sama閱讀 45,334評(píng)論 1 310
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡粹庞,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,550評(píng)論 2 333
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了洽损。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片庞溜。...
    茶點(diǎn)故事閱讀 39,727評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出流码,到底是詐尸還是另有隱情又官,我是刑警寧澤,帶...
    沈念sama閱讀 35,428評(píng)論 5 343
  • 正文 年R本政府宣布漫试,位于F島的核電站六敬,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏驾荣。R本人自食惡果不足惜外构,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,022評(píng)論 3 326
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望播掷。 院中可真熱鬧审编,春花似錦、人聲如沸歧匈。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,672評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽件炉。三九已至勘究,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間斟冕,已是汗流浹背口糕。 一陣腳步聲響...
    開封第一講書人閱讀 32,826評(píng)論 1 269
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留宫静,地道東北人走净。 一個(gè)月前我還...
    沈念sama閱讀 47,734評(píng)論 2 368
  • 正文 我出身青樓,卻偏偏與公主長得像孤里,于是被迫代替她去往敵國和親伏伯。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,619評(píng)論 2 354