值得关注的HTML基础
值得關(guān)注的HTML基礎(chǔ)
- 🥳序言
- 😋一、網(wǎng)頁三大元素
- 😜二、HTML簡介
- 1. 定義
- 2. 發(fā)展歷史
- 😝三、HTML結(jié)構(gòu)
- 1. 引例闡述
- 2. 特點(diǎn)
- 3. HTML頁面結(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. 圖例
- 😏五、語義化
- 1. 定義
- 2. 常見語義化標(biāo)簽解析
- (1)語義化 - 區(qū)塊類別標(biāo)簽
- 1)header
- 2)nav
- 3)article
- 4)section
- 5)aside
- 6)footer
- (2)語義化 - 分組類別標(biāo)簽
- 1)figure/figcaption
- 2)blockquote
- 3)dl/dt/dd
- (3)語義化 - 文本標(biāo)簽
- 1)cite
- 2)time
- 3)address
- 4)mark
- 5)code
- 6)small
- (4)語義化 - 多媒體元素標(biāo)簽
- 1)img
- 2)picture
- 3)音視頻
- 🧐六、HTML解析
- 1. DOM文檔對象模型
- 2. HTML的解析過程
- 🙃七、結(jié)束語
- 🐣彩蛋 One More Thing
🥳序言
眾所周知,html是前端剛開始學(xué)習(xí)時(shí)的第一門語言。然而,在我們?nèi)粘5膶?shí)際開發(fā)中,一直注重的是實(shí)踐和應(yīng)用。但是殊不知的是,很多小伙伴都忽略了很多關(guān)于 html 相關(guān)的基礎(chǔ)入門知識(shí)。那么在接下來的文章中,將講解 html 是什么,其發(fā)展歷史又是怎么樣的?還有 html 如何使用,以及如何寫出更加語義化的 html 。
接下來我們來一起學(xué)習(xí)⑧~🧐
😋一、網(wǎng)頁三大元素
大家都知道,對于網(wǎng)頁來說,有三大基本元素。那就是大家所熟悉的 html , css 和 js 。對于這三者來說,主要描述如下:
-
html :網(wǎng)頁的基本結(jié)構(gòu);
-
css :網(wǎng)頁的展現(xiàn)效果;
-
js :網(wǎng)頁的功能行為。
😜二、HTML簡介
1. 定義
HTML ,全稱為 HyperText Markup Language , 即超文本標(biāo)記語言),它是用于構(gòu)建網(wǎng)頁基本結(jié)構(gòu)及其內(nèi)容的一門標(biāo)記語言。接下來我們來看一下超文本和標(biāo)記語言分別是什么:
超文本: 文本中包含指向其他文本的鏈接;
標(biāo)記語言: 將文本以及文本相關(guān)的其他信息結(jié)合起來,展現(xiàn)出文檔結(jié)構(gòu),如: HTML 、 XML 、 KML 、 Markdown 等等。
2. 發(fā)展歷史
看完定義之后,我們再來看下 HTML 的一個(gè)發(fā)展歷史。具體如下:
- 伯納斯-李 在1989年提出了基于互聯(lián)網(wǎng)的超文本系統(tǒng)。
- 1993年 IETF (互聯(lián)網(wǎng)工程任務(wù)組)發(fā)布首個(gè) HTML 提案,由此, HTML 語言的第一版就誕生啦。
- 在經(jīng)歷過幾個(gè)草案之后, HTML 2.0 于1995年發(fā)布,包括了基于表單的文件上傳、表格、國際化等功能。
- 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. 引例闡述
我們來看一段 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>測試站點(diǎn)</title> </head> <body><p class="editor-note">周一家的貓咪很可愛!</p><img src="cat.png" alt="貓咪圖片"> </body> </html>大家可以看到,在上面這段 HTML 代碼中,包括 html 、 head 、 meta 、title 和 body 等等標(biāo)簽,由上面的這些標(biāo)簽,就構(gòu)成了 html 的結(jié)構(gòu)。
接下來我們來看一下 html 具有哪些特點(diǎn)。
2. 特點(diǎn)
- HTML 文檔包含多個(gè) HTML 元素,元素具備不同的特性。
- HTML 元素 = 開始標(biāo)簽 + 結(jié)束標(biāo)簽 + 元素內(nèi)容。
- 一些元素只有一個(gè)標(biāo)簽,如 img 、 input 、 br 等。
- HTML 元素標(biāo)簽不區(qū)分大小寫。
- 元素可以嵌套在其他元素中間。
- 元素可以擁有屬性,屬性包含元素的額外信息。
接下來我們來看下以上這幾個(gè)標(biāo)簽各自的作用。
3. HTML頁面結(jié)構(gòu)
(1)DOCTYPE
<DocTYPE HTML> ,常放在 HTML 文檔最前面的位置,加上之后就會(huì)按照 W3C 的 HTML5 標(biāo)準(zhǔn)來解析渲染頁面。
(2)html
<html> ,是網(wǎng)頁的根元素,包含整個(gè)頁面的內(nèi)容。
(3)head
<head> ,此標(biāo)簽對用戶不可見,其中包括像面向搜索引擎的關(guān)鍵字、頁面描述、字符編碼聲明、CSS樣式等內(nèi)容。
(4)body
<body> ,該元素包含能夠被用戶訪問到的內(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ǔ)">頁面描述 <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">主要用于移動(dòng)端,定義設(shè)備屏幕上用來顯示網(wǎng)頁的區(qū)域 <meta http-equiv="expires" content="31 Dec 2021">http頭部下面給出一個(gè)自定義meta的網(wǎng)站,大家可以自行查閱~ https://wiki.whatwg.org/wiki/MetaExtennsions(6)title
<title> ,表示頁面的標(biāo)題,經(jīng)常顯示在瀏覽器的標(biāo)簽頁上。
(7)style
<style> ,是 CSS 的樣式。
(8)link
<link> ,表示跳轉(zhuǎn)鏈接。下面給出幾種常見的 link 方式。具體如下:
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> 當(dāng)前頁面的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>下面我們來了解它的兩個(gè)屬性:
- defer:立即下載,延遲執(zhí)行,表示腳本可以等到 dom 被完全解析和顯示之后再執(zhí)行,只對外部腳本有效。有 defer 屬性的腳本會(huì)阻止 DOMContentLoaded 事件,直到腳本被加載并且解析完成。
- async:立即下載腳本,且不妨礙其他操作,比如在下載其他資源或者加載其他腳本的時(shí)候,只對外部腳本有效。
我們用一張圖來展示這兩者的區(qū)別,具體如下圖:
大家可以看到, async 支持在遇到 js 文件時(shí),立即下載腳本。而對于 defer 來說,它只能前面的 js
內(nèi)容先全部加載完,再進(jìn)行執(zhí)行操作。
😛四、常用元素
1. 三種常用元素
(1)內(nèi)聯(lián)元素
- 只占據(jù)它自己對應(yīng)標(biāo)簽的邊框所包含的空間。
- 只能容納文本或其他內(nèi)聯(lián)元素。
- 只能通過修改水平邊距、邊框或者行高的方式改變尺寸。
- 常用的內(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ù)其父元素的整行,總是從新的一行開始。
- 能容納其他塊元素或者內(nèi)聯(lián)元素。
- 可以控制寬高、行高、邊距、邊框等改變其尺寸。
- 常用的塊級(jí)元素: <div>、 <p> 、 <h1>-<h6> 、 <ol> 、 <ul> 、 <dl> 、 <table> 、 <address> 、 <blockquote> 、 <form> 。
2. 圖例
下面我們用一張圖來來了解這三種常用該元素的區(qū)別。具體如下圖:
😏五、語義化
1. 定義
所謂語義化,即根據(jù)內(nèi)容的結(jié)構(gòu),選擇合適的標(biāo)簽來構(gòu)建出便于開發(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. 常見語義化標(biāo)簽解析
接下來我們來看一下一些常見的語義化標(biāo)簽,具體如下。
(1)語義化 - 區(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)航鏈接,如菜單、?錄、索引等。
- ?來放置?些熱?的鏈接,不常?的鏈接通常放到 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ī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> 作為普通容器來使用,比如說用于美化片段樣式,此時(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>對于選擇一個(gè)蘋果來說,有很多不同的標(biāo)準(zhǔn),比如尺寸,顏色,甜度等等標(biāo)準(zhǔn)</p> </section>5)aside
- 表示一個(gè)和其余頁面內(nèi)容幾乎無關(guān)的部分,或者說單獨(dú)拆出來不會(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é)的頁腳。
- 通常包含該章節(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)語義化 - 分組類別標(biāo)簽
1)figure/figcaption
- <figure> 包裹被獨(dú)?引?的內(nèi)容:圖表、插圖、代碼等,通常會(huì)有個(gè)標(biāo)題;
- <figcaption> 與其相關(guān)聯(lián)的圖表的說明/標(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 屬性表示該來源的 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
- 用于描述一組鍵值對。
- 通常用于元數(shù)據(jù)、術(shù)語定義等場景。
(3)語義化 - 文本標(biāo)簽
1)cite
- <cite> 元素通常用于引用作品標(biāo)題。
- 包括論文、文件、書籍、電影等的引用。
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)語義化 - 多媒體元素標(biāo)簽
1)img
- src 屬性是必須的,嵌?圖?的?件路徑。
- alt 屬性包含?條對圖像的?本描述,?強(qiáng)制。屏幕閱讀器會(huì)將這些描述讀給需要使?閱讀器的使?者聽,讓他們知道圖像的含義。圖像?法加載時(shí)(?絡(luò)錯(cuò)誤、內(nèi)容被屏蔽或鏈接過期時(shí)),瀏覽器會(huì)在??上顯示 alt 屬性中的?本。
- decoding 解碼?式:異步、同步。
- loading 懶加載。
2)picture
- 元素通過包含零或多個(gè) <source> 元素和?個(gè) <img> 元素來為不同的。
- 顯示/設(shè)備場景提供相應(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解析
我們來看一下HTML是如何進(jìn)行解析的。
1. DOM文檔對象模型
所謂 DOM ,即對節(jié)點(diǎn)的結(jié)構(gòu)化進(jìn)行表述,并定義了一種方式可以使程序?qū)υ摻Y(jié)構(gòu)進(jìn)行訪問,它將 web 頁面和腳本語言鏈接起來。
2. HTML的解析過程
對于 DOM 樹來說,其構(gòu)建過程如下:
- 首先先構(gòu)建 DOM 樹;
- 其次要對樣式進(jìn)行計(jì)算,此時(shí)構(gòu)建 CSSOM 樹;
- 接著將 DOM 和 CSSOM 組合成一個(gè) Render 渲染樹;
- 現(xiàn)在,瀏覽器將對整個(gè)頁面的布局進(jìn)行計(jì)算;
- 最后,繪制頁面。
具體如下圖所示:
🙃七、結(jié)束語
在上文中,我們了解到了網(wǎng)頁的三大元素, HTML 的簡介、結(jié)構(gòu)和其解析過程。當(dāng)然,同樣很重要的一點(diǎn)是語義化標(biāo)簽。對于語義化標(biāo)簽來說,它可以很一目了然地讓我們知道是什么意思,很大程度上地提升了開發(fā)效率。
到這里,關(guān)于 HTML 的基礎(chǔ)知識(shí)講到這里就結(jié)束啦!希望對大家有幫助~
🐣彩蛋 One More Thing
👉關(guān)注公眾號(hào)星期一研究室,第一時(shí)間關(guān)注優(yōu)質(zhì)文章,更多精選專欄待你解鎖~
👉如果這篇文章對你有用,記得留個(gè)腳印jio再走哦~
👉以上就是本文的全部內(nèi)容!我們下期見!👋👋👋
總結(jié)
以上是生活随笔為你收集整理的值得关注的HTML基础的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 梦梦奈怎么玩 梦梦奈的安装使用方法
- 下一篇: 手机游戏运营商十大品牌排行榜