值得关注的HTML基础
值得關(guān)注的HTML基礎(chǔ)
- 🥳序言
- 😋一、網(wǎng)頁(yè)三大元素
- 😜二、HTML簡(jiǎn)介
- 1. 定義
- 2. 發(fā)展歷史
- 😝三、HTML結(jié)構(gòu)
- 1. 引例闡述
- 2. 特點(diǎn)
- 3. HTML頁(yè)面結(jié)構(gòu)
- （1）DOCTYPE
- （2）html
- （3）head
- （4）body
- （5）meta
- （6）title
- （7）style
- （8）link
- （9）script
- 😛四、常用元素
- 1. 三種常用元素
- （1）內(nèi)聯(lián)元素
- （2）行內(nèi)塊級(jí)元素
- （3）塊級(jí)元素
- 2. 圖例
- 😏五、語(yǔ)義化
- 1. 定義
- 2. 常見(jiàn)語(yǔ)義化標(biāo)簽解析
- （1）語(yǔ)義化 - 區(qū)塊類別標(biāo)簽
- 1）header
- 2）nav
- 3）article
- 4）section
- 5）aside
- 6）footer
- （2）語(yǔ)義化 - 分組類別標(biāo)簽
- 1）figure/figcaption
- 2）blockquote
- 3）dl/dt/dd
- （3）語(yǔ)義化 - 文本標(biāo)簽
- 1）cite
- 2）time
- 3）address
- 4）mark
- 5）code
- 6）small
- （4）語(yǔ)義化 - 多媒體元素標(biāo)簽
- 1）img
- 2）picture
- 3）音視頻
- 🧐六、HTML解析
- 1. DOM文檔對(duì)象模型
- 2. HTML的解析過(guò)程
- 🙃七、結(jié)束語(yǔ)
- 🐣彩蛋 One More Thing
🥳序言
眾所周知，html是前端剛開(kāi)始學(xué)習(xí)時(shí)的第一門語(yǔ)言。然而，在我們?nèi)粘５膶?shí)際開(kāi)發(fā)中，一直注重的是實(shí)踐和應(yīng)用。但是殊不知的是，很多小伙伴都忽略了很多關(guān)于 html 相關(guān)的基礎(chǔ)入門知識(shí)。那么在接下來(lái)的文章中，將講解 html 是什么，其發(fā)展歷史又是怎么樣的？還有 html 如何使用，以及如何寫(xiě)出更加語(yǔ)義化的 html 。
接下來(lái)我們來(lái)一起學(xué)習(xí)⑧~🧐
😋一、網(wǎng)頁(yè)三大元素
大家都知道，對(duì)于網(wǎng)頁(yè)來(lái)說(shuō)，有三大基本元素。那就是大家所熟悉的 html ， css 和 js 。對(duì)于這三者來(lái)說(shuō)，主要描述如下：
-
html ：網(wǎng)頁(yè)的基本結(jié)構(gòu)；
-
css ：網(wǎng)頁(yè)的展現(xiàn)效果；
-
js ：網(wǎng)頁(yè)的功能行為。
😜二、HTML簡(jiǎn)介
1. 定義
HTML ，全稱為 HyperText Markup Language , 即超文本標(biāo)記語(yǔ)言)，它是用于構(gòu)建網(wǎng)頁(yè)基本結(jié)構(gòu)及其內(nèi)容的一門標(biāo)記語(yǔ)言。接下來(lái)我們來(lái)看一下超文本和標(biāo)記語(yǔ)言分別是什么：
超文本： 文本中包含指向其他文本的鏈接；
標(biāo)記語(yǔ)言： 將文本以及文本相關(guān)的其他信息結(jié)合起來(lái)，展現(xiàn)出文檔結(jié)構(gòu)，如： HTML 、 XML 、 KML 、 Markdown 等等。
2. 發(fā)展歷史
看完定義之后，我們?cè)賮?lái)看下 HTML 的一個(gè)發(fā)展歷史。具體如下：
- 伯納斯-李 在1989年提出了基于互聯(lián)網(wǎng)的超文本系統(tǒng)。
- 1993年 IETF （互聯(lián)網(wǎng)工程任務(wù)組）發(fā)布首個(gè) HTML 提案，由此， HTML 語(yǔ)言的第一版就誕生啦。
- 在經(jīng)歷過(guò)幾個(gè)草案之后， HTML 2.0 于1995年發(fā)布，包括了基于表單的文件上傳、表格、國(guó)際化等功能。
- 1994年 W3C 成立，隨后接管了 HTML 的標(biāo)準(zhǔn)化工作，并在1997年發(fā)布了 HTML3.2 。
- 隨后發(fā)布的 HTML4.0 中采用許多特定瀏覽器的元素類型和屬性。
- 在2014年的時(shí)候， HTML5 作為 W3C 的推薦標(biāo)準(zhǔn)發(fā)布。
😝三、HTML結(jié)構(gòu)
1. 引例闡述
我們來(lái)看一段 HTML 代碼，具體如下：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>測(cè)試站點(diǎn)</title> </head> <body><p class="editor-note">周一家的貓咪很可愛(ài)！</p><img src="cat.png" alt="貓咪圖片"> </body> </html>大家可以看到，在上面這段 HTML 代碼中，包括 html 、 head 、 meta 、title 和 body 等等標(biāo)簽，由上面的這些標(biāo)簽，就構(gòu)成了 html 的結(jié)構(gòu)。
接下來(lái)我們來(lái)看一下 html 具有哪些特點(diǎn)。
2. 特點(diǎn)
- HTML 文檔包含多個(gè) HTML 元素，元素具備不同的特性。
- HTML 元素 = 開(kāi)始標(biāo)簽 + 結(jié)束標(biāo)簽 + 元素內(nèi)容。
- 一些元素只有一個(gè)標(biāo)簽，如 img 、 input 、 br 等。
- HTML 元素標(biāo)簽不區(qū)分大小寫(xiě)。
- 元素可以嵌套在其他元素中間。
- 元素可以擁有屬性，屬性包含元素的額外信息。
接下來(lái)我們來(lái)看下以上這幾個(gè)標(biāo)簽各自的作用。
3. HTML頁(yè)面結(jié)構(gòu)
（1）DOCTYPE
<DocTYPE HTML> ，常放在 HTML 文檔最前面的位置，加上之后就會(huì)按照 W3C 的 HTML5 標(biāo)準(zhǔn)來(lái)解析渲染頁(yè)面。
（2）html
<html> ，是網(wǎng)頁(yè)的根元素，包含整個(gè)頁(yè)面的內(nèi)容。
（3）head
<head> ，此標(biāo)簽對(duì)用戶不可見(jiàn)，其中包括像面向搜索引擎的關(guān)鍵字、頁(yè)面描述、字符編碼聲明、CSS樣式等內(nèi)容。
（4）body
<body> ，該元素包含能夠被用戶訪問(wèn)到的內(nèi)容，包括文本、圖像、視頻、游戲、音頻等等內(nèi)容。
（5）meta
<meta> ，常設(shè)置的內(nèi)容有： charset/name/http-equiv 。下面給出一些常用的配置信息。
<meta charset="utf-8">定義文檔字符編碼 <meta name="keywords" content="HTML"> 關(guān)鍵字 <meta name="description" content="HTML基礎(chǔ)">頁(yè)面描述 <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">主要用于移動(dòng)端，定義設(shè)備屏幕上用來(lái)顯示網(wǎng)頁(yè)的區(qū)域 <meta http-equiv="expires" content="31 Dec 2021">http頭部下面給出一個(gè)自定義meta的網(wǎng)站，大家可以自行查閱~ https://wiki.whatwg.org/wiki/MetaExtennsions（6）title
<title> ，表示頁(yè)面的標(biāo)題，經(jīng)常顯示在瀏覽器的標(biāo)簽頁(yè)上。
（7）style
<style> ，是 CSS 的樣式。
（8）link
<link> ，表示跳轉(zhuǎn)鏈接。下面給出幾種常見(jiàn)的 link 方式。具體如下：
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> 當(dāng)前頁(yè)面的favicon<link rel="stylesheet" href="my-css-file.css"> 鏈接到樣式表<link href="fancy.css" rel="alternate stylesheet" type="text/css" title="Fancy"> 可替換的樣式表（9）script
<script> 表示可執(zhí)行腳本。通常引用的方式如下：
<script type="text/javascript" src="javascript.js"></script>下面我們來(lái)了解它的兩個(gè)屬性：
- defer：立即下載，延遲執(zhí)行，表示腳本可以等到 dom 被完全解析和顯示之后再執(zhí)行，只對(duì)外部腳本有效。有 defer 屬性的腳本會(huì)阻止 DOMContentLoaded 事件，直到腳本被加載并且解析完成。
- async：立即下載腳本，且不妨礙其他操作，比如在下載其他資源或者加載其他腳本的時(shí)候，只對(duì)外部腳本有效。
我們用一張圖來(lái)展示這兩者的區(qū)別，具體如下圖：
大家可以看到， async 支持在遇到 js 文件時(shí)，立即下載腳本。而對(duì)于 defer 來(lái)說(shuō)，它只能前面的 js
內(nèi)容先全部加載完，再進(jìn)行執(zhí)行操作。
😛四、常用元素
1. 三種常用元素
（1）內(nèi)聯(lián)元素
- 只占據(jù)它自己對(duì)應(yīng)標(biāo)簽的邊框所包含的空間。
- 只能容納文本或其他內(nèi)聯(lián)元素。
- 只能通過(guò)修改水平邊距、邊框或者行高的方式改變尺寸。
- 常用的內(nèi)聯(lián)元素有： <a>、 <span> 、 <br> 、 <i> 、 <em> 、 <strong> 、 <label> 、 <q> 、 <var> 、 <cite> 、 <code> 。
（2）行內(nèi)塊級(jí)元素
- 元素在行內(nèi)排列，不會(huì)獨(dú)占一行。
- 支持設(shè)置寬高以及垂直邊距、邊框。
- 常用的內(nèi)聯(lián)元素： <img> 、 <input> 、 <td> 。
（3）塊級(jí)元素
- 占據(jù)其父元素的整行，總是從新的一行開(kāi)始。
- 能容納其他塊元素或者內(nèi)聯(lián)元素。
- 可以控制寬高、行高、邊距、邊框等改變其尺寸。
- 常用的塊級(jí)元素： <div>、 <p> 、 <h1>-<h6> 、 <ol> 、 <ul> 、 <dl> 、 <table> 、 <address> 、 <blockquote> 、 <form> 。
2. 圖例
下面我們用一張圖來(lái)來(lái)了解這三種常用該元素的區(qū)別。具體如下圖：
😏五、語(yǔ)義化
1. 定義
所謂語(yǔ)義化，即根據(jù)內(nèi)容的結(jié)構(gòu)，選擇合適的標(biāo)簽來(lái)構(gòu)建出便于開(kāi)發(fā)者閱讀的可維護(hù)性更高的代碼結(jié)構(gòu)，同時(shí)能夠讓機(jī)器更好地解析。如下所示：
<div class="header"></div> <div class="section"><div class="article"><div class="figure"><img><div class="figcaption"></div></div></div> </div> <div class="footer"></div> <header></header> <section><section><figure><img><figcaption></figcaption></figure></section> </section> <footer></footer>2. 常見(jiàn)語(yǔ)義化標(biāo)簽解析
接下來(lái)我們來(lái)看一下一些常見(jiàn)的語(yǔ)義化標(biāo)簽，具體如下。
（1）語(yǔ)義化 - 區(qū)塊類別標(biāo)簽
1）header
- header 主要用于展現(xiàn)一些介紹性信息。
- 通常包含?組介紹性或是輔助導(dǎo)航的元素，如標(biāo)題、 Logo 、搜索框、作者名稱等 。
- 不能放在 <footer> 、 <address> 或者另?個(gè) <header> 元素內(nèi)部。
比如：
<header><h1>HTML</h1><P><time pubdate datetime="2021-08-15"></time></P> </header>2）nav
- 在當(dāng)前?檔或其他?檔中提供導(dǎo)航鏈接，如菜單、?錄、索引等。
- ?來(lái)放置?些熱?的鏈接，不常?的鏈接通常放到 footer ?置于底部。
比如：
<nav><ol><li><a href="#">HTML</a></li><li><a href="#">css</a></li><li><a href="#">js</a></li></ol> </nav>3）article
- 獨(dú)?的?檔、頁(yè)面、應(yīng)?、站點(diǎn)。
- 可獨(dú)?分配的或可復(fù)?的結(jié)構(gòu)，如論壇帖?、新聞?章、博客、?戶提交的評(píng)論、交互式組件等。
比如：
<article class="forecast"><h1>廣州的天氣預(yù)報(bào)</h1><article class="day-forecast"><h2>2021.08.15</h2><p>多云</p></article><article class="day-forecast"><h2>2021.08.16</h2><p>晴天</p></article></article>4）section
- 按主題將內(nèi)容分組，通常會(huì)有標(biāo)題。
- <section> 通常出現(xiàn)在?檔的?綱中。
- 不要把 <section> 作為普通容器來(lái)使用，比如說(shuō)用于美化片段樣式，此時(shí)用 <div> 更合適。
- 如果元素里邊是獨(dú)立的整塊的內(nèi)容，可以單獨(dú)發(fā)布，則更適合用 <article> 。
比如：
<h1>選擇一個(gè)蘋果</h1> <section><h2>介紹</h2><p>這個(gè)文檔將提供一個(gè)引導(dǎo)，幫助選擇一個(gè)正確的蘋果</p> </section> <section><h2>標(biāo)準(zhǔn)</h2><p>對(duì)于選擇一個(gè)蘋果來(lái)說(shuō)，有很多不同的標(biāo)準(zhǔn)，比如尺寸，顏色，甜度等等標(biāo)準(zhǔn)</p> </section>5）aside
- 表示一個(gè)和其余頁(yè)面內(nèi)容幾乎無(wú)關(guān)的部分，或者說(shuō)單獨(dú)拆出來(lái)不會(huì)影響整體的內(nèi)容。
- 通常放在側(cè)邊欄，用于展示廣告、 tips 、引用內(nèi)容等等。
比如：
<p>今天天氣還不錯(cuò)，我決定去踏青</p> <aside><h4>野餐</h4><P>準(zhǔn)備號(hào)各種各樣的食物，大概早上9點(diǎn)鐘出發(fā)去野餐。</P> </aside>6）footer
- 表示最近一個(gè)章節(jié)的頁(yè)腳。
- 通常包含該章節(jié)作者、版權(quán)數(shù)據(jù)或者文檔鏈接等信息。
- footer 內(nèi)的元素不屬于章節(jié)內(nèi)容，不包含在大綱中。
比如：
<footer><h1>版權(quán)號(hào) by monday</h1><P><time pubdate datetime="2021-08-15"></time></P> </footer>（2）語(yǔ)義化 - 分組類別標(biāo)簽
1）figure/figcaption
- <figure> 包裹被獨(dú)?引?的內(nèi)容：圖表、插圖、代碼等，通常會(huì)有個(gè)標(biāo)題；
- <figcaption> 與其相關(guān)聯(lián)的圖表的說(shuō)明/標(biāo)題，通常位于 <figure> 的第?個(gè)或最后?個(gè)。
比如：
<figure><img src="https://developer.mozilla.org/static/img/favicon144.png" alt="A robotic monster over the letters MDN."><figcaption>MDN logo</figcaption> </figure>2）blockquote
- 塊級(jí)引?元素。
- cite 屬性表示該來(lái)源的 url 。
比如：
<figure><blockquote cite="https://www.huxley.net/bnw/one.html"><p>Words can be X-rays, if you use them properly - they'll go through anything.</p></blockquote><figcaption>-Aldous Huxley, <cite>Brave New World</cite></figcaption> </figure>3）dl/dt/dd
- 用于描述一組鍵值對(duì)。
- 通常用于元數(shù)據(jù)、術(shù)語(yǔ)定義等場(chǎng)景。
（3）語(yǔ)義化 - 文本標(biāo)簽
1）cite
- <cite> 元素通常用于引用作品標(biāo)題。
- 包括論文、文件、書(shū)籍、電影等的引用。
2）time
- 機(jī)器可讀的時(shí)間和日期。
- datetime 表示此元素關(guān)聯(lián)的時(shí)間日期，若不指定則該元素不會(huì)被解析為日期。
3）address
- 表示某個(gè)人或組織的聯(lián)系信息。
4）mark
- 在引用中使用，表示需要引起注意。
5）code
- 表示代碼片段。
6）small
- 表示免責(zé)聲明、注意事項(xiàng)等等信息。
（4）語(yǔ)義化 - 多媒體元素標(biāo)簽
1）img
- src 屬性是必須的，嵌?圖?的?件路徑。
- alt 屬性包含?條對(duì)圖像的?本描述，?強(qiáng)制。屏幕閱讀器會(huì)將這些描述讀給需要使?閱讀器的使?者聽(tīng)，讓他們知道圖像的含義。圖像?法加載時(shí)(?絡(luò)錯(cuò)誤、內(nèi)容被屏蔽或鏈接過(guò)期時(shí))，瀏覽器會(huì)在??上顯示 alt 屬性中的?本。
- decoding 解碼?式：異步、同步。
- loading 懶加載。
2）picture
- 元素通過(guò)包含零或多個(gè) <source> 元素和?個(gè) <img> 元素來(lái)為不同的。
- 顯示/設(shè)備場(chǎng)景提供相應(yīng)的圖像版本。
- media 屬性：依據(jù)的媒體條件渲染相應(yīng)的圖?，類似媒體查詢。
- type 屬性： MIME 類型，根據(jù)瀏覽器?持性渲染相應(yīng)的圖?。
3）音視頻
-
所謂音視頻標(biāo)簽，即 <video></video> 和 <audio></audio> 標(biāo)簽。
-
src 屬性是必須的，嵌?視頻?件路徑。
-
controls 表示是否展示瀏覽器?帶的控件，同時(shí)可以創(chuàng)建?定義控件。
-
autoplay 是否?動(dòng)播放。
-
source 元素表示視頻的可替代資源(不同格式、清晰度，讀取失敗或?法解碼時(shí)可以依次嘗試)。
比如：
<video controls><source src="/flower.webm" type="video/webm"><source src="/flower.mp4" type="video/mp4">Sorry, your brower doesn't support embedded videos. </video><audio controls src="/xxx.mp3">Your brower deos not support the <code>audio</code> element. </audio><video controls src="/friday.mp4"><track default kind="captions" srclang="en" src="friday.vtt"/>Sorry, your brower doesn't support embedded videos. </video>🧐六、HTML解析
我們來(lái)看一下HTML是如何進(jìn)行解析的。
1. DOM文檔對(duì)象模型
所謂 DOM ，即對(duì)節(jié)點(diǎn)的結(jié)構(gòu)化進(jìn)行表述，并定義了一種方式可以使程序?qū)υ摻Y(jié)構(gòu)進(jìn)行訪問(wèn)，它將 web 頁(yè)面和腳本語(yǔ)言鏈接起來(lái)。
2. HTML的解析過(guò)程
對(duì)于 DOM 樹(shù)來(lái)說(shuō)，其構(gòu)建過(guò)程如下：
- 首先先構(gòu)建 DOM 樹(shù)；
- 其次要對(duì)樣式進(jìn)行計(jì)算，此時(shí)構(gòu)建 CSSOM 樹(shù)；
- 接著將 DOM 和 CSSOM 組合成一個(gè) Render 渲染樹(shù)；
- 現(xiàn)在，瀏覽器將對(duì)整個(gè)頁(yè)面的布局進(jìn)行計(jì)算；
- 最后，繪制頁(yè)面。
具體如下圖所示：
🙃七、結(jié)束語(yǔ)
在上文中，我們了解到了網(wǎng)頁(yè)的三大元素， HTML 的簡(jiǎn)介、結(jié)構(gòu)和其解析過(guò)程。當(dāng)然，同樣很重要的一點(diǎn)是語(yǔ)義化標(biāo)簽。對(duì)于語(yǔ)義化標(biāo)簽來(lái)說(shuō)，它可以很一目了然地讓我們知道是什么意思，很大程度上地提升了開(kāi)發(fā)效率。
到這里，關(guān)于 HTML 的基礎(chǔ)知識(shí)講到這里就結(jié)束啦！希望對(duì)大家有幫助~
🐣彩蛋 One More Thing
👉關(guān)注公眾號(hào)星期一研究室，第一時(shí)間關(guān)注優(yōu)質(zhì)文章，更多精選專欄待你解鎖~
👉如果這篇文章對(duì)你有用，記得留個(gè)腳印jio再走哦~
👉以上就是本文的全部?jī)?nèi)容！我們下期見(jiàn)！👋👋👋
總結(jié)
以上是生活随笔為你收集整理的值得关注的HTML基础的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 梦梦奈怎么玩 梦梦奈的安装使用方法
- 下一篇： 前端只是切图仔？来学学给开发人看的UI设