【經(jīng)驗技巧】HTML與設(shè)計師的那些事
本文將圍繞web前端技術(shù)與設(shè)計的相通點進行討論，旨在幫助設(shè)計師快速理解和使用HTML
在某個時間段里，我對HTML這個東西非常著迷，感覺像發(fā)現(xiàn)了新大陸。
對設(shè)計師來說，這可以算是新大陸，畢竟不是同一個領(lǐng)域上的知識，一個代碼編織的世界。在日常項目開發(fā)中，特別是在項目后期進行視覺實現(xiàn)的檢查，監(jiān)督產(chǎn)品視覺的實現(xiàn)質(zhì)量時，HTML是一個非常實用的工具。
下面內(nèi)容，是我請教了前端大神，并結(jié)合了我個人的理解，希望通過設(shè)計的交流方式給大家分享一下我的心得。
技術(shù)互相滲透，不求甚解，如有錯誤，請指正。
（本內(nèi)容只是設(shè)計師在日常項目中使用的比較多的部分，并不涵蓋HTML的所有內(nèi)容。）
--------------------------------------------------------------------
大綱：
1、設(shè)計師如何快速理解HTML？
2、初步認(rèn)識開發(fā)者工具
3、Elements（元素）
4、Styles（樣式）
--------------------------------------------------------------------
一、設(shè)計師如何快速理解HTML？
網(wǎng)上的解釋是：html，全稱Hypertext Markup Language，也就是“超文本鏈接標(biāo)示語言”。HTML文本是由 HTML命令組成的描述性文本，HTML 命令可以說明文字、 圖形、動畫、聲音、表格、鏈接等。
從設(shè)計的角度看，我們并不會接觸到太多功能，只是把常用的部分，提煉出與設(shè)計相通的關(guān)鍵詞，方便理解。
把相應(yīng)的關(guān)鍵詞置入到對應(yīng)的模塊，就得到了下面的樣子
初步看來，HTML并不是很復(fù)雜，跟設(shè)計差不多，完全在設(shè)計上的射程范圍之內(nèi)。
二、初步認(rèn)識開發(fā)者工具
頁面布局樣式與整體功能劃分。
選擇按鈕：激活選擇按鈕之后，可以在網(wǎng)頁上選擇和查看元素，鼠標(biāo)經(jīng)過元素時氣泡中會顯示元素的屬性和尺寸；
視窗切換：切換不同終端視窗，查看頁面在不同終端的預(yù)覽效果；
菜單欄：開發(fā)者工具的主要內(nèi)容；
更多：可以切換開發(fā)者工具的布局樣式，共有四種，分別是上下窗口、左側(cè)窗口、底部窗口和右側(cè)窗口；
關(guān)閉：關(guān)閉開發(fā)者工具面板
我們重點關(guān)注的內(nèi)容是 Elements（元素）和 Styles（樣式）。
不要誤以為這是兩個獨立的板塊，實際上Styles是附加在Elements上的，就像圖層樣式是附在圖層上，不是兩個獨立的個體；
右側(cè)的正方形色塊是Styles（樣式）中的其中一種，主要是控制元素與元素之間的距離。
三、Elements（元素）
元素區(qū)域是最基礎(chǔ)、最重要的部分，所有頁面上展示出來的內(nèi)容都是基于此板塊，與設(shè)計中的畫布和圖層的關(guān)系完全一致。
我們可以忽略代碼的意思和寫法，只要理解它的結(jié)構(gòu)即可。
1、元素的基本結(jié)構(gòu)
<html> ：頭部和底部各一個<html>標(biāo)簽，表示網(wǎng)頁內(nèi)容的開始和結(jié)束；
<head>：首尾兩個<hesd>標(biāo)簽，代表的元信息和網(wǎng)站的標(biāo)題，一般是不顯示任何內(nèi)容；
<body>：首尾兩個<body>標(biāo)簽，中間的省略號就是網(wǎng)頁展示出來的整體內(nèi)容，所有內(nèi)容都被包含在里面，所有內(nèi)容都在這里展開。
<html> 與<head>兩組標(biāo)簽，相當(dāng)于PS中的空白圖層，沒有內(nèi)容信息；
<body>標(biāo)簽才是網(wǎng)頁內(nèi)容的主題部分。
那空白圖層為什么不刪掉，留著不礙事嗎？
這個并不是多余的部分，這是HTML的基本格式，要遵循它的規(guī)則，代碼才能正常運轉(zhuǎn)，所以必須有。
2、網(wǎng)頁內(nèi)容的主體部分
在<body>標(biāo)簽內(nèi)，包含著頁面顯示出來所有內(nèi)容，里面包含著許多<div class>（這是眾多元素寫法的其中一種），每一個<div class>代表著一個或一組元素，跟設(shè)計上“圖層”和“組”的概念幾乎完全一致。
鼠標(biāo)在代碼上面經(jīng)過時，左側(cè)網(wǎng)頁元素會出現(xiàn)對應(yīng)的高亮狀態(tài)，每一行代碼都會與網(wǎng)頁元素一一對應(yīng)。
這與設(shè)計上的“圖層”和“畫布”的關(guān)系相同。
四、Styles（樣式）
Styles（樣式），可以簡單概括為“效果”
每一個或一組元素，Styles面板都會顯示相應(yīng)的效果代碼。
就像在PS里，既可以給圖層添加圖層樣式，也可以給分組添加，每個元素都可以擁有它獨立的樣式效果。
上圖左側(cè)為樣式效果（圖層樣式），右側(cè)為盒子模型（Box model）；
紅色英文部分的意思分別是：顏色、行高、字號、底部外邊距、空白。
盒子模型（Box model）主要是解釋元素尺寸和間隔的概念。
設(shè)計上可以通過柵格來規(guī)范內(nèi)容布局排版，而前端開發(fā)則需要借助“盒子模型”來制定元素尺寸和間隔的概念。
從核心至外層氛圍四格部分：元素（Element）、內(nèi)邊距（Padding）、邊框（Border）、外邊距（Margin）。
元素（Element）：指最基礎(chǔ)的元素如，文字、icon或圖片本身的外邊界尺寸；
內(nèi)邊距（Padding）：指元素的外邊界到其他子元素之間的間距；
邊框（Border）：指圍繞在元素周圍的路徑；
外邊距（Margin）：指元素的外邊界到相鄰元素之間的間距。
通常情況下，邊框與元素是重疊在一起的，也就是元素會填充整個邊框，只會顯示元素、內(nèi)邊框和外邊框三種顏色。如下圖顯示。
總結(jié)
我們將一個前端的知識，通過拆分、轉(zhuǎn)化，用設(shè)計角度去學(xué)習(xí)分析，其實發(fā)現(xiàn)HTML也并不是想象中的難（如果不是讓我寫），只要找到一個比較合適的切入點去學(xué)習(xí)，就能快速的理解一個全新的知識。
希望以上內(nèi)容能在項目開發(fā)中提供一點幫助。
以上。
