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