想做一個開發&設計并行的牛人？卻不知道如何開始？歡迎觀看本文，說不定會引起你對開發的興趣
HTML&CSS是網頁設計的基本。設計師應該時刻學習，不要僅僅局限于視覺設計的層面。那么該要如何開始HTML&CSS的學習呢？
本文勾勒出了HTML&CSS的基本，即便不學，掌握這些基本知識也是很有必要的。

推薦閱讀：
《網站代碼輕松入門！10款開發教學網站推薦》
《適應網頁設計新趨勢：CSS3、字體以及圖標》
《超贊！源自codepen的25個最受歡迎的HTML/CSS代碼》

整體簡介

在開始學習HTML&CSS之前，首先要搞清楚兩者的區別。兩者在整體上有著很明顯的差異。

整體看來，HTML是超文本標記語言,是用來構建框架的。

而CSS值得是層疊樣式表，統一控制HTML網頁的外觀屬性。

（而JavaScript是行為）

HTML語言的基本

標簽、屬性、元素是在掌握之前必須要了解的幾點基礎。

元素
元素是用來定義頁面、內容、結構的一種標識符。一些流行的元素包括h1-h6，p,div,a,span,strong以及em.

案例：

< a >

標簽
標簽主要有兩種形式，開始標簽和結束標簽(也稱為開放標簽和閉合標簽)。

HTML 元素以開始標簽起始
HTML 元素以結束標簽終止

案例:

<a>……</a>

HTML 鏈接由 <a> 標簽定義。鏈接的地址在 href 屬性中指定：<a target="_blank" >This is a link</a>

<p>.....</p>

HTML 段落是通過 <p> 標簽進行定義的。<p>This is a paragraph.</p>

屬性
屬性指的是賦予元素的附加信息。大多數情況下，屬性將標題、類、ID分配格元素，用來描述媒體元素的來源，并可作為超鏈接的參考。

案例：

<a href = “http:///www.example.com/”>Example</a>

HTML 鏈接由 <a> 標簽定義。鏈接的地址在 href 屬性中指定：

CSS語言的基本

除了HTML，你還要了解CSS，這是你第二件必備武器。下面這個案例展示了CSS的幾個基本

案例:

在這個例子中，h1 是選擇器，color 和 font-size 是屬性，red 和 14px 是值。

h1 {color:red; font-size:14px;}

下面的示意圖為您展示了上面這段代碼的結構：

選擇器
選擇器能夠為確定元素加入指定樣式,包括ID、類、標簽選擇器等等。

屬性
屬性定義了為元素加入樣式的種類，諸如顏色、字體大小等等。（冒號之前）

值
樣式種類的具體數值。（冒號和分號之間）

框模型和定位

另外需要了解的便是框模型。CSS 框模型 (Box Model) 規定了元素框處理元素內容、內邊距、邊框?和?外邊距?的方式。

關鍵便是margin和padding屬性, 而正確理解這兩個屬性也是學習用css布局的關鍵。

CSS框模型
border(邊框)

margin(外邊距)

padding(內邊距）

width(寬度）

元素框的最內部分是實際的內容，直接包圍內容的是內邊距。內邊距呈現了元素的背景。內邊距的邊緣是邊框。邊框以外是外邊距，外邊距默認是透明的，因此不會遮擋其后的任何元素。

框模型包括以上幾種，可調整大小，框模型便能以這種方式影響內容傳遞的方式。

HTML框模型
元素的高度和寬度可自行設定，然而整體內容的高度和寬度受內邊距以及邊框影響。

案例：

div {

background: #fff;

border: 6px solid #ccc;

height: 100 px;

margin: 20 px;

padding: 20px;

width: 400px;

}

添加圖像、音頻、視頻

文本與多媒體結合能達到更好的傳遞效果。

添加圖像
圖中內含的文本部分便能實現添加圖像功能，

不可忽視的兩個屬性：

src屬性：src 屬性可設置或返回應當被載入框架中的文檔的 URL。

alt屬性：alt 屬性是一個必需的屬性，它規定在圖像無法顯示時的替代文本。

實例：

<img src="/i/eg_tulip.jpg"  alt="上海鮮花港 - 郁金香" />

親自試一試

如果無法顯示圖像，瀏覽器將顯示替代文本，就像這樣：

此外，當用戶把鼠標移到圖像上方，最新的瀏覽器會在一個文本框中顯示描述性文本。下面的代碼在 alt 屬性中為圖像添加了描述性文本：

您可以把鼠標移動到下面的照片上，看看相應的效果：

紅圈中的文本框是用戶把鼠標移動到圖像上時，IE7 瀏覽器所顯示的效果：

添加音頻
HTML5提供了一種簡易的方式添加音頻和視頻文件。跟img元素一樣，音頻元素也需要src屬性來提供URL來源

添加視頻
跟添加音頻同理，只不過用視頻元素來取代音頻元素。

希望這份入門指導能讓你對HTML&CSS產生興趣，同時教會你HTML&CSS的基本，其實它們學起來很簡單。

原文地址：designermag
特別感謝：w3school
優設網翻譯:@MartinRGB

================關于優設網================
"優設網uisdc.com"是一個分享網頁設計、無線端設計以及PS教程的干貨網站。
【特色推薦】
PS禮儀手冊：網頁設計師必須修煉的內功技法，更是不可或缺的WEB設計指南http://hao.uisdc.com/ps/。
設計微博：擁有粉絲量60萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com
———————————————————–
想在手機上、被窩里獲取設計教程、經驗分享和各種意想不到的"福利"嗎？
添加 優秀網頁設計 微信號：【youshege】優設哥的全拼
您也可以通過掃描下方二維碼快速添加：