設(shè)計師需要了解的 HTML 基礎(chǔ)疾速入門指南

上期我們已經(jīng)了解了 HTML 是什么，并完成學習的準備工作，那么這一篇，我們就展開對 HTML 的具體學習。用一上午的時間掌握 HTML 的基本使用。

上期回顧：

要聲明的是，我們學習 HTML 重點以實現(xiàn)頁面基礎(chǔ)布局和樣式的方向展開，關(guān)聯(lián)性不高的內(nèi)容都會盡可能的略過，降低理解門檻。

HTML的語法

1. HTML 標簽

我們知道 HTML 的主要作用是標記元素的類型，這個標記的專業(yè)術(shù)語叫做 「標簽」（HTML TAG）。標簽由三個概念組成，分別為標簽名、尖括號、結(jié)束標簽。

<標簽名> 相關(guān)內(nèi)容

在上一篇中，我們做過的演示，標題和一段正文，是由 h1 和 p 兩個標簽組成。

結(jié)束標簽是 HTML 中的重要內(nèi)容，忘記添加結(jié)束標簽會引發(fā)一系列問題。

2. HTML 屬性

不同的標簽，會包含一些特殊的 HTML 屬性，這個屬性和我們所說的 CSS 屬性不完全相同，比如一個鏈接標簽< a >，如果我們只給出一個起始和結(jié)束標簽是沒意義的，還需要添加具體的網(wǎng)址進去，這樣才有意義，于是我們會這么寫：< /a >

屬性的添加方法，就是在起始標簽的名稱后面添加 —— 空格、屬性名 = 「值」。

不同的標簽類型包含的屬性會有差異，比如一個標題標簽就不能為它添加鏈接。但是，一個標簽會包含多個屬性，所以我們也可以在一個標簽內(nèi)添加好幾個屬性。

比如我們可以制定讓上面的鏈接在新窗口中打開，那么我們可以添加一個新的屬性和值進去：

感興趣的同學可以在編輯器中進行操作看一看前后的效果。

3. HTML 層級

HTML 還有一個非常重要的語法特點，就是它非常注重標簽的層級關(guān)系。一個起始標簽和結(jié)束標簽中除了普通文本以外，還可以在中間嵌套一些別的標簽。

比如一個標題，它同時也是鏈接，那我們可以這么寫：

也就是說，a 標簽是包含在 h 標簽下的子標簽，而 h 是 a 的父標簽。當然這個例子很簡單，在更復(fù)雜的情況下，我們可以創(chuàng)建一內(nèi)容卡片中包含了標題、副標題、正文、查看更多、點贊、分享，前三個元素是一個層級，后三個元素一個層級，那么它們就會寫成這樣：

div 是一個比較特殊的標簽類型，我們可以把它先理解成一個編組，而上面這種代碼的結(jié)構(gòu)，就類似我們在設(shè)計軟件中創(chuàng)建的圖層編組樹樁結(jié)構(gòu)。

在 HTML 中，正確的層級結(jié)構(gòu)是非常重要的概念，不僅包含實際畫面的效果，也包含內(nèi)容邏輯上的從屬關(guān)系。而我們在輸入代碼過程中，通常會將對文本樣式做編排，即將上級標簽的中間添加一個換行符，并為下級標簽添加一個 tab 縮進，實現(xiàn)更直觀的層級結(jié)構(gòu)。

掌握了這些內(nèi)容，那么我們就基本知道 HTML 書寫的方式了，可以學習下一步了。

HTML文檔結(jié)構(gòu)

設(shè)計過 UI 界面的同學應(yīng)該都知道，每次開始界面具體內(nèi)容設(shè)計前，我們要先做一些全局的謀劃和置入官方組件元素，比如狀態(tài)欄、首頁指示器、底部導(dǎo)航欄、頁邊距等信息。

而我們創(chuàng)建一個標準的網(wǎng)頁文件，也需要做對應(yīng)的準備工作，那就是提前把頁面的結(jié)構(gòu)創(chuàng)建好。當然，這些結(jié)構(gòu)就不是設(shè)計素材了，而是對應(yīng)的頁面標簽。下面是一個常規(guī) HTML 文檔的標準結(jié)構(gòu)：

1. < !DOCTYPE html>

這是一個特殊的標簽，在 HTML 所有標簽中，有一些標簽是不需要結(jié)束標簽的。比如這個，是一個標準網(wǎng)頁文檔聲明。用來告訴瀏覽器，該文檔是一個 「正經(jīng)文檔」 以防在一些特殊情況下被錯誤識別成其它類型的文件。

當然，大家可以不用糾結(jié)具體的細則，只要每次在文檔頂部添加這段代碼即可。

2. html 標簽

HTML 標簽則是一個頂級標簽，所有 HTML 中出現(xiàn)的代碼元素都會包含到這個標簽內(nèi)。

HTML 的標簽從開始到結(jié)束傳達給瀏覽器文檔內(nèi) HTML 元素的起點和終點，是一個常規(guī)網(wǎng)頁中必備的標簽元素，不能忘記添加。

3. head 標簽

head 標簽是網(wǎng)頁的頭部標簽，它并不是指網(wǎng)頁樣式中的頭部，而是代碼、文檔的頭部。

多數(shù)情況下，我們要添加一些不展示在具體頁面內(nèi)容中的全局信息時，就會添加到這個標簽中來。比如后面要介紹的兩個標簽，以及調(diào)用外部的代碼、文件、統(tǒng)計信息等。

4. meta 標簽

meta 標簽是一個用來聲明當前 html 文檔元信息的標簽，例如頁面的字符編碼類型，頁面的搜索引擎關(guān)鍵字。

meta 也是一個不需要結(jié)尾標簽的特殊標簽，因為它聲明的方式是通過屬性和值來完成的，比如：

• 聲明頁面使用 utf-8 的文字編碼，沒有聲明中文可能亂碼
• 聲明了頁面的搜索關(guān)鍵字信息超人、UI、設(shè)計，協(xié)助搜索引擎收錄定向
• 聲明了頁面的簡介信息，搜索結(jié)果頁面中可以看見

meta 這個標簽比較特殊，在我們學習中，只要聲明第一條即可，其它可以暫時忽略。

5. Title 標簽

Title 標簽是一個用來聲明頁面標題的標簽，作為瀏覽器頁面選項卡上顯示的頁面標題。

6. body 標簽

這是頁面主體的標簽，標簽內(nèi)包含的相關(guān)內(nèi)容就是展示用戶可見元素的區(qū)域。

我們要實現(xiàn)頁面的視覺、交互、排版，就要在 body 標簽內(nèi)編輯。后續(xù)我們學習的 HTML 標簽，就以包含在 body 中的標簽為主。

文本類型標簽

首先我們從最基本的文本類標簽開始學起，這是最沒有理解成本的標簽類型。我們把常見的文本標簽羅列出來大家看一看：

這些標簽作為身份標識的作用想必不用介紹了，通常只要了解一點，h1 標簽內(nèi)部一般不用再包含一些標識文本的內(nèi)容，而對于 p 標簽來說就可以往下級添加其它標簽配合。

比如一段文案：「超人老師獨家秘笈上線啦，只要98，不用998，趕緊來參加！」，我們可以寫成這樣：

通過這種方法，我們對一個段落內(nèi)容的文本就可以做出不同的語義調(diào)整，「獨家秘笈」 我們強調(diào)這個關(guān)鍵字的權(quán)重，「98」 僅僅只是加粗它，「998」 我們則用刪除線抹掉。

而在文本的段落類型里，還有一個重要的部分，就是列表。在正常我們打字編輯的時候，列表有兩種，有序列表和無序列表，它們分別由 ul、ol 標簽來標識。而僅僅定義一個列表是不夠的，列表中還會包含對應(yīng)的條目，所以它們中每個條目由 li 表示。

比如我們要創(chuàng)建一個 HTML CSS 課程的目錄，作為一個有序列表（無序同理），它就可以這么寫：

文本標簽是比較直觀的標簽，它主要就是用來定義文本的使用類型，而只要大家稍微對 word 有一定的使用經(jīng)驗，就可以很快的理解。

鏈接/多媒體標簽

鏈接我們上一節(jié)介紹過了，是 a 標簽，可以通過 herf 屬性制定線上網(wǎng)址或本地路徑的方式進行跳轉(zhuǎn)。而 a 標簽內(nèi)容的文字內(nèi)容，則會變顏色以及多出下劃線。

值得注意的是，鏈接是用來實現(xiàn)跳轉(zhuǎn)功能的標簽，而在我們的實際項目中，實現(xiàn)跳轉(zhuǎn)的可不僅僅只有文字，還可能是整個段落，整個模塊。

所以，使用這種效果的辦法就是在這些內(nèi)容的上級添加 a 標簽，就可以實現(xiàn)超鏈接的跳轉(zhuǎn)效果。

本小節(jié)介紹的第二個模塊，是多媒體標簽。多媒體內(nèi)容就是一個頁面中除了文字外的圖片、音效、視頻等內(nèi)容，如下所示：

這三個標簽中，圖像標簽比較特殊，因為它也是一個不需要添加結(jié)束標簽的特殊標簽。想要正確應(yīng)用這三個標簽，就需要了解一個重要的屬性 —— src。

這是一個用來指定多媒體文件地址的屬性，只輸入 img 標簽，瀏覽器雖然知道這里應(yīng)該放張圖片，但具體是什么圖，它不能憑空腦補出來，所以，我們要用 src 屬性來指定具體目標。
這里就牽扯到下一個重要的知識點，鏈接類型：絕對鏈接、相對鏈接。

絕對鏈接：比如鏈接到具體網(wǎng)址，比如 src=「supermancall.com/logo.png」

相對鏈接：相對當前HTML文檔的位置，比如 src=「/img/logo.png」

絕對鏈接比較好理解，就是每張圖片的一個固定門牌號地址。而相對鏈接則是對方基于你當前位置的方位。我們可以嘗試創(chuàng)建一個 HTML，然后在這個文檔同級目錄創(chuàng)建一個 img 文件夾，然后在里面添加素材中的 logo，再輸入下方的代碼，你就可以看見 img 文件夾中的 logo 被正常顯示在瀏覽器中：

所以，這就是切圖的作用，把頁面圖片導(dǎo)出，然后通過代碼對它進行調(diào)用。當然，文件的地址你可以根據(jù)根目錄隨意更改，每一個 「/」 就代表一級目錄，如果 img 下方還創(chuàng)建了一個目錄的話，那么 src 的值就應(yīng)該是 img / chil / logo.png。

如果你想控制它們的大小，就可以通過 height、width 兩個屬性，比如下面代碼：

而 audio 和 video 兩個標簽，使用 src 的方法相同，只是它們有結(jié)束標簽，且規(guī)則相對來說更復(fù)雜，因為對我們來說用的不多，所以暫且跳過。

表單標簽

表單標簽 form，類似我們?nèi)ャy行填寫申請信息的申請單，是收集用戶選填的一系列數(shù)據(jù)的標簽。

一個完整的 form 標簽就是一張清單本身，但上面是空白的，所以，我們要在表單里指定一系列我們需要收集的條目，比如姓名、手機號、地址等信息。

而收集的條目和列表類似，也要由其它標簽來完成：

對于表單來說，最常用的就是 input 標簽了，它也沒有結(jié)束標簽。用 type 屬性可以來制定這個輸入元素是哪種類型，比如下面的情況：

表單是一個對前端來說非常重要的標簽類型，可用的標簽其實遠遠不止展示的這些，對于我們而言，只要對這些基礎(chǔ)標簽有認識，了解整個表單的功能即可。

布局結(jié)構(gòu)標簽

最后一部分，我們要介紹的，就是專門用來進行內(nèi)容布局和定義結(jié)構(gòu)的標簽，主要包含：

首先，介紹一下大名頂頂?shù)?div，這是一個專門用來進行聚合內(nèi)容的萬能標簽，類似 UI 設(shè)計軟件中的編組功能，無論里面放了什么花里胡哨、烏七八糟的內(nèi)容，都可以通過一個 div 標簽將它們統(tǒng)一進行編組。

只要大家通過 chrome 隨便打開一個網(wǎng)頁，并通過右鍵 」檢查元素「 查看它們代碼的時候，就可以看到網(wǎng)頁內(nèi)容由大量的 div 元素疊加組成。

而 span 標簽和 div 有點類似，但它并不定義大的模塊，往往是在一段文本或者一系列復(fù)雜文字內(nèi)容中，定義某些特殊的字符或段落。

而在往下的幾個標簽，header、nav、article、aside、footer 等，則是 HTML5 中更新的具有明確應(yīng)用范圍的 div，更強的語義化（更容易在代碼中被開發(fā)者識別）。比如下面這種常見的網(wǎng)頁框架：

而我們用比較標準的 HTML 代碼來實現(xiàn)上方頁面的話，就可以這么編寫：

當然，為了省事，我們也可以直接將上方的所有標簽都替換成 div 也是沒問題的。div 是方便我們在整個頁面代碼中更好的規(guī)范內(nèi)容的層級和從屬關(guān)系，它們本身不能影響頁面內(nèi)容的樣式，但方便我們在后續(xù)的開發(fā)過程中調(diào)整網(wǎng)頁的模塊位置和樣式。

結(jié)語

了解完上面這些內(nèi)容，那么你就基本掌握了 HTML 入門的基礎(chǔ)知識了。

再回到起點，我們總結(jié)一下，HTML 就是通過標簽，定義元素的身份，并通過標簽疊加標簽的形式，來建立父子層級的結(jié)構(gòu)，和實際的頁面設(shè)計層級相對應(yīng)。

HTML 的學習只要背好并熟練應(yīng)用這些標簽即可，而不涉及到很復(fù)雜的編程概念，是不是非常的簡單？

歡迎關(guān)注作者的微信公眾號：「超人的電話亭」