HTML和CSS的那些事兒-1標籤屬性和元素

一直以來都在做.NET的後台開發，中間穿插前台開發，目前開發技能構成大概是35%前端65%後台。漸漸地發現自己對web前端開發更有興緻和感覺(對後台扯東扯西的商務邏輯不大感冒…，而且此前的後台開發一直壓抑我的創造力)，決定開始系統性學習前端開發所需要的技能，包括HTML,css,javascript,silverlight和flash，當然還有PS等。。。至於.net的開發，LEVIN會繼續維護自己的開源項目。若干年以後LEVIN可輕飄飄的說：“哥當年可是前後台通殺”.

註：本部落格系列為電子書讀書筆記。適於HTML4和XHTML，且灰常灰常的基礎。

正在閱讀的書籍：

《Html AND CSS Standard》{done}

《Addison.Wesley.Spring.Into.HTML.and.CSS.Apr.2005》{ing}

 

1，第一行以<!DOCTYPE..開始是為了讓瀏覽器知道你到底要做什麼，否則瀏覽器將用“quirks”（奇怪的）模式來表現你的網頁

2，閉合標籤是個好習慣。甚至務必要閉合標籤

3，覽器不會關注你的代碼是怎麼寫的，也絲毫不關心空格。

經翻閱w3schools.com，瀏覽器一般會截短空格，比如你連續打10個空格，瀏覽器可能只為你保留1個。這種情況下，還是用空格的“字元實體名”即“&nbsp;”吧。關於html entities，請參考http://www.w3schools.com/HTML/html_entities.asp

4，強調

粗體(bold)強調strong，斜線(italics)強調em;不要用過時的b和i,因為他們不是語義標籤。

5，換行

<br/>.千萬別拿“換行當分段”用。分段用P。記住：根據語義使用標籤。

6，標題

html文檔的標題<title/>

html內容的標題h1~h6。主標題h1，一個頁面h1最好只出現一次。h2~h3根據設計意圖依次使用。

其他資料：標題的使用與SEO

7，列表

無序ul有序ol，定義列表dl

 

8，連結

<a>。注意“開啟新視窗”和“取代當前視窗”的應用情境。添加title屬性是個好習慣。外部連結以及文檔內部錨點(anchor)的應用情境。

9，映像

<img>。height和width屬性不是必須的，但如果指定這兩個屬性，頁面載入的時候不會出現布局跳躍或閃爍的現象，因為頁面會根據這兩個屬性預Crowdsourced Security Testing道映像佔據的空間。實際應用中，height和width一般不會在img標籤內直接指定而通過css定義。

alt屬性一定要寫。用於替代顯示圖片(當圖片不能正常顯示時)。

關於映像的格式，請參考google下“GIF還是PNG”。

10，表格

<table>。表格的正確用處應該是，展示表格式的資料。別排斥表格！該用表格的地方千萬別拿所謂的div+css硬拼。

11，表單及表單元素

<form>。屬性action是必須的，表示表單內容發往何處。

<input>元素是常用的表單元素，根據type屬性的不同一共分為10種如<input type=”text”/>。

別忘了表單元素的name屬性