一小時(shí)學(xué)會(huì)HTML｜設(shè)計(jì)師快速入門
上一篇鏈接：
已經(jīng)了解了 HTML ?是什么，并完成學(xué)習(xí)的準(zhǔn)備工作，那么這一篇，我們就展開對(duì) HTML 的具體學(xué)習(xí)。用一個(gè)晚上的時(shí)間掌握 HTML 的基本使用。
要聲明的是，我們學(xué)習(xí) HTML 重點(diǎn)以實(shí)現(xiàn)頁面基礎(chǔ)布局和樣式的方向展開，關(guān)聯(lián)性不高的內(nèi)容都會(huì)盡可能的略過，降低理解門檻。
以及，盡可能搭配視頻觀看效果更佳??
2.1.1 HTML 標(biāo)簽
我們知道 HTML 的主要作用是標(biāo)記元素的類型，這個(gè)標(biāo)記的專業(yè)術(shù)語叫做?”標(biāo)簽“（HTML TAG）。標(biāo)簽由三個(gè)概念組成，分別為標(biāo)簽名、尖括號(hào)、結(jié)束標(biāo)簽。
在上一篇中，我們做過的演示，標(biāo)題和一段正文，是由 h1 和 p 兩個(gè)標(biāo)簽組成。
結(jié)束標(biāo)簽是 HTML 中的重要內(nèi)容，忘記添加結(jié)束標(biāo)簽會(huì)引發(fā)一系列問題。
2.1.2 HTML?
屬性不同的標(biāo)簽，會(huì)包含一些特殊的 HTML 屬性，這個(gè)屬性和我們所說的 CSS 屬性不完全相同，比如一個(gè)鏈接標(biāo)簽?<a>，如果我們只給出一個(gè)起始和結(jié)束標(biāo)簽是沒意義的，還需要添加具體的網(wǎng)址進(jìn)去，這樣才有意義，于是我們會(huì)這么寫：
屬性的添加方法，就是在起始標(biāo)簽的名稱后面添加?——?空格、屬性名?=?”值“。
不同的標(biāo)簽類型包含的屬性會(huì)有差異，比如一個(gè)標(biāo)題標(biāo)簽就不能為它添加鏈接。但是，一個(gè)標(biāo)簽會(huì)包含多個(gè)屬性，所以我們也可以在一個(gè)標(biāo)簽內(nèi)添加好幾個(gè)屬性。
比如我們可以制定讓上面的鏈接在新窗口中打開，那么我們可以添加一個(gè)新的屬性和值進(jìn)去：
感興趣的同學(xué)可以在編輯器中進(jìn)行操作看一看前后的效果。
2.1.3 HTML 層級(jí)
HTML 還有一個(gè)非常重要的語法特點(diǎn)，就是它非常注重標(biāo)簽的層級(jí)關(guān)系。一個(gè)起始標(biāo)簽和結(jié)束標(biāo)簽中除了普通文本以外，還可以在中間嵌套一些別的標(biāo)簽。
比如一個(gè)標(biāo)題，它同時(shí)也是鏈接，那我們可以這么寫：
也就是說，a 標(biāo)簽是包含在 h 標(biāo)簽下的子標(biāo)簽，而 h 是 a 的父標(biāo)簽。當(dāng)然這個(gè)例子很簡(jiǎn)單，在更復(fù)雜的情況下，我們可以創(chuàng)建一內(nèi)容卡片中包含了標(biāo)題、副標(biāo)題、正文、查看更多、點(diǎn)贊、分享，前三個(gè)元素是一個(gè)層級(jí)，后三個(gè)元素一個(gè)層級(jí)，那么它們就會(huì)寫成這樣：
是一個(gè)比較特殊的標(biāo)簽類型，我們可以把它先理解成一個(gè)編組，而上面這種代碼的結(jié)構(gòu)，就類似我們?cè)谠O(shè)計(jì)軟件中創(chuàng)建的圖層編組樹樁結(jié)構(gòu)。
在 HTML 中，正確的層級(jí)結(jié)構(gòu)是非常重要的概念，不僅包含實(shí)際畫面的效果，也包含內(nèi)容邏輯上的從屬關(guān)系。而我們?cè)谳斎氪a過程中，通常會(huì)將對(duì)文本樣式做編排，即將上級(jí)標(biāo)簽的中間添加一個(gè)換行符，并為下級(jí)標(biāo)簽添加一個(gè) tab 縮進(jìn)，實(shí)現(xiàn)更直觀的層級(jí)結(jié)構(gòu)。
掌握了這些內(nèi)容，那么我們就基本知道 HTML 書寫的方式了，可以學(xué)習(xí)下一步了。
設(shè)計(jì)過 UI 界面的同學(xué)應(yīng)該都知道，每次開始界面具體內(nèi)容設(shè)計(jì)前，我們要先做一些全局的謀劃和置入官方組件元素，比如狀態(tài)欄、首頁指示器、底部導(dǎo)航欄、頁邊距等信息。
而我們創(chuàng)建一個(gè)標(biāo)準(zhǔn)的網(wǎng)頁文件，也需要做對(duì)應(yīng)的準(zhǔn)備工作，那就是提前把頁面的結(jié)構(gòu)創(chuàng)建好。當(dāng)然，這些結(jié)構(gòu)就不是設(shè)計(jì)素材了，而是對(duì)應(yīng)的頁面標(biāo)簽。下面是一個(gè)常規(guī) HTML 文檔的標(biāo)準(zhǔn)結(jié)構(gòu)：
2.2.1 <!DOCTYPE html>
這是一個(gè)特殊的標(biāo)簽，在 HTML 所有標(biāo)簽中，有一些標(biāo)簽是不需要結(jié)束標(biāo)簽的。比如這個(gè)，是一個(gè)標(biāo)準(zhǔn)網(wǎng)頁文檔聲明。用來告訴瀏覽器，該文檔是一個(gè) “正經(jīng)文檔” 以防在一些特殊情況下被錯(cuò)誤識(shí)別成其它類型的文件。
當(dāng)然，大家可以不用糾結(jié)具體的細(xì)則，只要每次在文檔頂部添加這段代碼即可。
2.2.2 html 標(biāo)簽
HTML 標(biāo)簽則是一個(gè)頂級(jí)標(biāo)簽，所有 HTML 中出現(xiàn)的代碼元素都會(huì)包含到這個(gè)標(biāo)簽內(nèi)。
HTML 的標(biāo)簽從開始到結(jié)束傳達(dá)給瀏覽器文檔內(nèi) HTML 元素的起點(diǎn)和終點(diǎn)，是一個(gè)常規(guī)網(wǎng)頁中必備的標(biāo)簽元素，不能忘記添加。
2.2.3 head 標(biāo)簽
head 標(biāo)簽是網(wǎng)頁的頭部標(biāo)簽，它并不是指網(wǎng)頁樣式中的頭部，而是代碼、文檔的頭部。
多數(shù)情況下，我們要添加一些不展示在具體頁面內(nèi)容中的全局信息時(shí)，就會(huì)添加到這個(gè)標(biāo)簽中來。比如后面要介紹的兩個(gè)標(biāo)簽，以及調(diào)用外部的代碼、文件、統(tǒng)計(jì)信息等。
2.2.4 meta 標(biāo)簽
meta 標(biāo)簽是一個(gè)用來聲明當(dāng)前 html 文檔元信息的標(biāo)簽，例如頁面的字符編碼類型，頁面的搜索引擎關(guān)鍵字。
meta 也是一個(gè)不需要結(jié)尾標(biāo)簽的特殊標(biāo)簽，因?yàn)樗暶鞯姆绞绞峭ㄟ^屬性和值來完成的，比如：
?聲明頁面使用 utf-8 的文字編碼，沒有聲明中文可能亂碼
聲明了頁面的搜索關(guān)鍵字信息超人、UI、設(shè)計(jì)，協(xié)助搜索引擎收錄定向
3.聲明了頁面的簡(jiǎn)介信息，搜索結(jié)果頁面中可以看見
meta 這個(gè)標(biāo)簽比較特殊，在我們學(xué)習(xí)中，只要聲明第一條即可，其它可以暫時(shí)忽略。
2.2.5 Title 標(biāo)簽
Title 標(biāo)簽是一個(gè)用來聲明頁面標(biāo)題的標(biāo)簽，作為瀏覽器頁面選項(xiàng)卡上顯示的頁面標(biāo)題。
2.2.6 body 標(biāo)簽
這是頁面主體的標(biāo)簽，標(biāo)簽內(nèi)包含的相關(guān)內(nèi)容就是展示用戶可見元素的區(qū)域。
我們要實(shí)現(xiàn)頁面的視覺、交互、排版，就要在 body 標(biāo)簽內(nèi)編輯。后續(xù)我們學(xué)習(xí)的 HTML 標(biāo)簽，就以包含在 body 中的標(biāo)簽為主。
2.3.1 一般文本格式標(biāo)簽
首先我們從最基本的文本類標(biāo)簽開始學(xué)起，這是最沒有理解成本的標(biāo)簽類型。我們把常見的文本標(biāo)簽羅列出來大家看一看：
<h1> - <h6>：1級(jí)標(biāo)題-6級(jí)標(biāo)題
<p>：表示一個(gè)正文的段落
<b> ：僅僅加粗文本字重，沒別的意思
<strong>：加重文字權(quán)重和凸顯，同時(shí)加粗
<i>：僅僅定義文字斜體，沒別的意思
<em> ：定義需要注意的文字，同時(shí)傾斜
<del>：定義刪除線文字
<br/>：換行符，類似word中的換行效果
這些標(biāo)簽作為身份標(biāo)識(shí)的作用想必不用介紹了，通常只要了解一點(diǎn)，h1 標(biāo)簽內(nèi)部一般不用再包含一些標(biāo)識(shí)文本的內(nèi)容，而對(duì)于 p 標(biāo)簽來說就可以往下級(jí)添加其它標(biāo)簽配合。
比如一段文案：“超人老師獨(dú)家秘笈上線啦，只要98，不用998，趕緊來參加！”，我們可以寫成這樣：
通過這種方法，我們對(duì)一個(gè)段落內(nèi)容的文本就可以做出不同的語義調(diào)整，“獨(dú)家秘笈” 我們強(qiáng)調(diào)這個(gè)關(guān)鍵字的權(quán)重，“98” 僅僅只是加粗它，“998” 我們則用刪除線抹掉。
2.3.2 列表標(biāo)簽
而在文本的段落類型里，還有一個(gè)重要的部分，就是列表。在正常我們打字編輯的時(shí)候，列表有兩種，有序列表和無序列表，它們分別由 ul、ol 標(biāo)簽來標(biāo)識(shí)。而僅僅定義一個(gè)列表是不夠的，列表中還會(huì)包含對(duì)應(yīng)的條目，所以它們中每個(gè)條目由 li 表示。
比如我們要?jiǎng)?chuàng)建一個(gè) HTML CSS 課程的目錄，作為一個(gè)有序列表（無序同理），它就可以這么寫：
文本標(biāo)簽是比較直觀的標(biāo)簽，它主要就是用來定義文本的使用類型，而只要大家稍微對(duì) word 有一定的使用經(jīng)驗(yàn)，就可以很快的理解。
鏈接我們上一節(jié)介紹過了，是 a 標(biāo)簽，可以通過 herf 屬性制定線上網(wǎng)址或本地路徑的方式進(jìn)行跳轉(zhuǎn)。而 a 標(biāo)簽內(nèi)容的文字內(nèi)容，則會(huì)變顏色以及多出下劃線。
值得注意的是，鏈接是用來實(shí)現(xiàn)跳轉(zhuǎn)功能的標(biāo)簽，而在我們的實(shí)際項(xiàng)目中，實(shí)現(xiàn)跳轉(zhuǎn)的可不僅僅只有文字，還可能是整個(gè)段落，整個(gè)模塊。
所以，使用這種效果的辦法就是在這些內(nèi)容的上級(jí)添加 a 標(biāo)簽，就可以實(shí)現(xiàn)超鏈接的跳轉(zhuǎn)效果。
本小節(jié)介紹的第二個(gè)模塊，是多媒體標(biāo)簽。多媒體內(nèi)容就是一個(gè)頁面中除了文字外的圖片、音效、視頻等內(nèi)容，如下所示：
<img>：圖像標(biāo)簽，用來顯示位圖的標(biāo)簽
<audio>：音頻標(biāo)簽，可以嵌入一些類似mp3的音頻文件進(jìn)行播放
<video>：視頻標(biāo)簽，可以嵌入類似avi、wmv、mp4等主流格式的視頻
這三個(gè)標(biāo)簽中，圖像標(biāo)簽比較特殊，因?yàn)樗彩且粋€(gè)不需要添加結(jié)束標(biāo)簽的特殊標(biāo)簽。想要正確應(yīng)用這三個(gè)標(biāo)簽，就需要了解一個(gè)重要的屬性 —— src。
這是一個(gè)用來指定多媒體文件地址的屬性，只輸入 img 標(biāo)簽，瀏覽器雖然知道這里應(yīng)該放張圖片，但具體是什么圖，它不能憑空腦補(bǔ)出來，所以，我們要用 src 屬性來指定具體目標(biāo)。
這里就牽扯到下一個(gè)重要的知識(shí)點(diǎn)，鏈接類型：絕對(duì)鏈接、相對(duì)鏈接。
絕對(duì)鏈接：比如鏈接到具體網(wǎng)址，比如 src=“supermancall.com/logo.png”
相對(duì)鏈接：相對(duì)當(dāng)前HTML文檔的位置，比如 src=“/img/logo.png”
絕對(duì)鏈接比較好理解，就是每張圖片的一個(gè)固定門牌號(hào)地址。而相對(duì)鏈接則是對(duì)方基于你當(dāng)前位置的方位。我們可以嘗試創(chuàng)建一個(gè) HTML，然后在這個(gè)文檔同級(jí)目錄創(chuàng)建一個(gè) img 文件夾，然后在里面添加素材中的 logo，再輸入下方的代碼，你就可以看見 img 文件夾中的 logo 被正常顯示在瀏覽器中：
所以，這就是切圖的作用，把頁面圖片導(dǎo)出，然后通過代碼對(duì)它進(jìn)行調(diào)用。當(dāng)然，文件的地址你可以根據(jù)根目錄隨意更改，每一個(gè) “/” 就代表一級(jí)目錄，如果 img 下方還創(chuàng)建了一個(gè)目錄的話，那么 src 的值就應(yīng)該是 img / chil / logo.png。
如果你想控制它們的大小，就可以通過 height、width 兩個(gè)屬性，比如下面代碼：
而 audio 和 video 兩個(gè)標(biāo)簽，使用 src 的方法相同，只是它們有結(jié)束標(biāo)簽，且規(guī)則相對(duì)來說更復(fù)雜，因?yàn)閷?duì)我們來說用的不多，所以暫且跳過。
表單標(biāo)簽 form，類似我們?nèi)ャy行填寫申請(qǐng)信息的申請(qǐng)單，是收集用戶選填的一系列數(shù)據(jù)的標(biāo)簽。
一個(gè)完整的 form 標(biāo)簽就是一張清單本身，但上面是空白的，所以，我們要在表單里指定一系列我們需要收集的條目，比如姓名、手機(jī)號(hào)、地址等信息。
而收集的條目和列表類似，也要由其它標(biāo)簽來完成：
<input>：一個(gè)標(biāo)準(zhǔn)的輸入元素，類型由屬性指定，可以輸入文本、密碼等
<textarea>：一個(gè)多行文本輸入框
<select>：定一下拉選項(xiàng)列表
<button>：表單執(zhí)行的按鈕，類似注冊(cè)或登錄按鈕
對(duì)于表單來說，最常用的就是 input 標(biāo)簽了，它也沒有結(jié)束標(biāo)簽。用 type 屬性可以來制定這個(gè)輸入元素是哪種類型，比如下面的情況：
< input type="email">：指定郵箱輸入框
< input type="password">：指定密碼輸入框
< input type="tel">：指定手機(jī)號(hào)輸入框
< input type="date">：指定日期選擇空間
< input type="button">：表單內(nèi)應(yīng)用的按鈕
再用個(gè)完整的例子來解釋，比如我們要注冊(cè)一個(gè)賬號(hào)，那么填寫賬號(hào)的表單，代碼可以這么表示：
表單是一個(gè)對(duì)前端來說非常重要的標(biāo)簽類型，可用的標(biāo)簽其實(shí)遠(yuǎn)遠(yuǎn)不止展示的這些，對(duì)于我們而言，只要對(duì)這些基礎(chǔ)標(biāo)簽有認(rèn)識(shí)，了解整個(gè)表單的功能即可。
最后一部分，我們要介紹的，就是專門用來進(jìn)行內(nèi)容布局和定義結(jié)構(gòu)的標(biāo)簽，主要包含：
<div>：萬能模塊定義的標(biāo)簽， 用來組織不同的標(biāo)簽元素形成一個(gè)整體
<span>：行內(nèi)內(nèi)聯(lián)元素，主要用來控制一些特殊的文本類型
<header>：頁面的頭部?jī)?nèi)容區(qū)域定義
<nav>：頁面的導(dǎo)航欄區(qū)域定義
<article>：頁面的正文內(nèi)容區(qū)域定義
<aside>：頁面的側(cè)邊欄內(nèi)容區(qū)域定義
<footer>：頁面的頁腳內(nèi)容區(qū)域定義
首先，介紹一下大名頂頂?shù)?div，這是一個(gè)專門用來進(jìn)行聚合內(nèi)容的萬能標(biāo)簽，類似 UI 設(shè)計(jì)軟件中的 ”編組“ 功能，無論里面放了什么花里胡哨、烏七八糟的內(nèi)容，都可以通過一個(gè) div 標(biāo)簽將它們統(tǒng)一進(jìn)行編組。
只要大家通過 chrome 隨便打開一個(gè)網(wǎng)頁，并通過右鍵 ”檢查元素“ 查看它們代碼的時(shí)候，就可以看到網(wǎng)頁內(nèi)容由大量的 div 元素疊加組成。
而 span 標(biāo)簽和 div 有點(diǎn)類似，但它并不定義大的模塊，往往是在一段文本或者一系列復(fù)雜文字內(nèi)容中，定義某些特殊的字符或段落。
而再往下的幾個(gè)標(biāo)簽，header、nav、article、aside、footer 等，則是 HTML5 中更新的具有明確應(yīng)用范圍的 div，更強(qiáng)的語義化（更容易在代碼中被開發(fā)者識(shí)別）。比如下面這種常見的網(wǎng)頁框架：
而我們用比較標(biāo)準(zhǔn)的 HTML 代碼來實(shí)現(xiàn)上方頁面的話，就可以這么編寫：
當(dāng)然，為了省事，我們也可以直接將上方的所有標(biāo)簽都替換成 div 也是沒問題的。div 是方便我們?cè)谡麄€(gè)頁面代碼中更好的規(guī)范內(nèi)容的層級(jí)和從屬關(guān)系，它們本身不能影響頁面內(nèi)容的樣式，但方便我們?cè)诤罄m(xù)的開發(fā)過程中調(diào)整網(wǎng)頁的模塊位置和樣式。
了解完上面這些內(nèi)容，那么你就基本掌握了 HTML 入門的基礎(chǔ)知識(shí)了。
再回到起點(diǎn)，我們總結(jié)一下，HTML 就是通過標(biāo)簽，定義元素的身份，并通過標(biāo)簽疊加標(biāo)簽的形式，來建立父子層級(jí)的結(jié)構(gòu)，和實(shí)際的頁面設(shè)計(jì)層級(jí)相對(duì)應(yīng)。
HTML 的學(xué)習(xí)只要背好并熟練應(yīng)用這些標(biāo)簽即可，而不涉及到很復(fù)雜的編程概念，是不是非常的簡(jiǎn)單？如果需要進(jìn)一步的查看和了解 HTML 的話，可以查看下方鏈接的手冊(cè)。
https://www.w3school.com.cn/tags/index.asp
下一章中，我們就會(huì)開始學(xué)習(xí)如何通過 CSS 來改變標(biāo)簽和內(nèi)容的具體樣式了
我們下篇再賤。
B端產(chǎn)品設(shè)計(jì)全能班新一期早鳥預(yù)約中，有需要的同學(xué)記得聯(lián)系我～
往期課程介紹查看??
