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