值得關注的HTML基礎
- 🥳序言
- 😋一、網頁三大元素
- 😜二、HTML簡介
- 1. 定義
- 2. 發展歷史
- 😝三、HTML結構
- 1. 引例闡述
- 2. 特點
- 3. HTML頁面結構
- （1）DOCTYPE
- （2）html
- （3）head
- （4）body
- （5）meta
- （6）title
- （7）style
- （8）link
- （9）script
- 😛四、常用元素
- 1. 三種常用元素
- （1）行內元素
- （2）行內塊級元素
- （3）塊級元素
- 2. 圖例
- 😏五、語意化
- 1. 定義
- 2. 常見語意化標簽決議
- （1）語意化 - 區塊類別標簽
- 1）header
- 2）nav
- 3）article
- 4）section
- 5）aside
- 6）footer
- （2）語意化 - 分組類別標簽
- 1）figure/figcaption
- 2）blockquote
- 3）dl/dt/dd
- （3）語意化 - 文本標簽
- 1）cite
- 2）time
- 3）address
- 4）mark
- 5）code
- 6）small
- （4）語意化 - 多媒體元素標簽
- 1）img
- 2）picture
- 3）音視頻
- 🧐六、HTML決議
- 1. DOM檔案物件模型
- 2. HTML的決議程序
- 🙃七、結束語
- 🐣彩蛋 One More Thing
🥳序言
眾所周知，html是前端剛開始學習時的第一門語言，然而，在我們日常的實際開發中，一直注重的是實踐和應用，但是殊不知的是，很多小伙伴都忽略了很多關于 html 相關的基礎入門知識，那么在接下來的文章中，將講解 html 是什么，其發展歷史又是怎么樣的？還有 html 如何使用，以及如何寫出更加語意化的 html ，
接下來我們來一起學習⑧~🧐
😋一、網頁三大元素
大家都知道，對于網頁來說，有三大基本元素，那就是大家所熟悉的 html ， css 和 js ，對于這三者來說，主要描述如下：
-
html：網頁的基本結構； -
css：網頁的展現效果； -
js：網頁的功能行為，
😜二、HTML簡介
1. 定義
HTML ，全稱為 HyperText Markup Language , 即超文本標記語言)，它是用于構建網頁基本結構及其內容的一門標記語言，接下來我們來看一下超文本和標記語言分別是什么：
超文本： 文本中包含指向其他文本的鏈接；
標記語言： 將文本以及文本相關的其他資訊結合起來，展現出檔案結構，如： HTML 、 XML 、 KML 、 Markdown 等等，
2. 發展歷史
看完定義之后，我們再來看下 HTML 的一個發展歷史，具體如下：
伯納斯-李在1989年提出了基于互聯網的超文本系統，- 1993年
IETF（互聯網工程任務組）發布首個HTML提案，由此，HTML語言的第一版就誕生啦， - 在經歷過幾個草案之后，
HTML 2.0于1995年發布，包括了基于表單的檔案上傳、表格、國際化等功能， - 1994年
W3C成立，隨后接管了HTML的標準化作業，并在1997年發布了HTML3.2， - 隨后發布的
HTML4.0中采用許多特定瀏覽器的元素型別和屬性， - 在2014年的時候，
HTML5作為W3C的推薦標準發布，
😝三、HTML結構
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>測驗站點</title>
</head>
<body>
<p class="editor-note">周一家的貓咪很可愛！</p>
<img src="cat.png" alt="貓咪圖片">
</body>
</html>
大家可以看到，在上面這段 HTML 代碼中，包括 html 、 head 、 meta 、title 和 body 等等標簽，由上面的這些標簽，就構成了 html 的結構，
接下來我們來看一下 html 具有哪些特點，
2. 特點
HTML檔案包含多個HTML元素，元素具備不同的特性，HTML元素 = 開始標簽 + 結束標簽 + 元素內容，- 一些元素只有一個標簽，如
img、input、br等， HTML元素標簽不區分大小寫，- 元素可以嵌套在其他元素中間，
- 元素可以擁有屬性，屬性包含元素的額外資訊，
接下來我們來看下以上這幾個標簽各自的作用，
3. HTML頁面結構
（1）DOCTYPE
<DocTYPE HTML> ，常放在 HTML 檔案最前面的位置，加上之后就會按照 W3C 的 HTML5 標準來決議渲染頁面，
（2）html
<html> ，是網頁的根元素，包含整個頁面的內容，
（3）head
<head> ，此標簽對用戶不可見，其中包括像面向搜索引擎的關鍵字、頁面描述、字符編碼宣告、CSS樣式等內容，
（4）body
<body> ，該元素包含能夠被用戶訪問到的內容，包括文本、影像、視頻、游戲、音頻等等內容，
（5）meta
<meta> ，常設定的內容有： charset/name/http-equiv ，下面給出一些常用的配置資訊，
<meta charset="utf-8">定義檔案字符編碼
<meta name="keywords" content="HTML"> 關鍵字
<meta name="description" content="HTML基礎">頁面描述
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">主要用于移動端，定義設備螢屏上用來顯示網頁的區域
<meta http-equiv="expires" content="31 Dec 2021">http頭部
下面給出一個自定義meta的網站，大家可以自行查閱~
https://wiki.whatwg.org/wiki/MetaExtennsions
（6）title
<title> ，表示頁面的標題，經常顯示在瀏覽器的標簽頁上，
（7）style
<style> ，是 CSS 的樣式，
（8）link
<link> ，表示跳轉鏈接，下面給出幾種常見的 link 方式，具體如下：
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
當前頁面的favicon
<link rel="stylesheet" href="my-css-file.css">
鏈接到樣式表
<link href="fancy.css" rel="alternate stylesheet" type="text/css" title="Fancy">
可替換的樣式表
（9）script
<script> 表示可執行腳本，通常參考的方式如下：
<script type="text/javascript" src="javascript.js"></script>
下面我們來了解它的兩個屬性：
defer：立即下載，延遲執行，表示腳本可以等到dom被完全決議和顯示之后再執行，只對外部腳本有效，有defer屬性的腳本會阻止DOMContentLoaded事件，直到腳本被加載并且決議完成，async：立即下載腳本，且不妨礙其他操作，比如在下載其他資源或者加載其他腳本的時候，只對外部腳本有效，
我們用一張圖來展示這兩者的區別，具體如下圖：
大家可以看到， async 支持在遇到 js 檔案時，立即下載腳本，而對于 defer 來說，它只能前面的 js
內容先全部加載完，再進行執行操作，
😛四、常用元素
1. 三種常用元素
（1）行內元素
- 只占據它自己對應標簽的邊框所包含的空間，
- 只能容納文本或其他行內元素，
- 只能通過修改水平邊距、邊框或者行高的方式改變尺寸，
- 常用的行內元素有：
<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>，
（2）行內塊級元素
- 元素在行內排列，不會獨占一行，
- 支持設定寬高以及垂直邊距、邊框，
- 常用的行內元素：
<img>、<input>、<td>，
（3）塊級元素
- 占據其父元素的整行，總是從新的一行開始，
- 能容納其他塊元素或者行內元素，
- 可以控制寬高、行高、邊距、邊框等改變其尺寸，
- 常用的塊級元素：
<div>、<p>、<h1>-<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote>、<form>，
2. 圖例
下面我們用一張圖來來了解這三種常用該元素的區別，具體如下圖：
😏五、語意化
1. 定義
所謂語意化，即根據內容的結構，選擇合適的標簽來構建出便于開發者閱讀的可維護性更高的代碼結構，同時能夠讓機器更好地決議，如下所示：
<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. 常見語意化標簽決議
接下來我們來看一下一些常見的語意化標簽，具體如下，
（1）語意化 - 區塊類別標簽
1）header
header主要用于展現一些介紹性資訊，- 通常包含?組介紹性或是輔助導航的元素，如標題、
Logo、搜索框、作者名稱等 ， - 不能放在
<footer>、<address>或者另?個<header>元素內部，
比如：
<header>
<h1>HTML</h1>
<P><time pubdate datetime="2021-08-15"></time></P>
</header>
2）nav
- 在當前?檔或其他?檔中提供導航鏈接，如選單、?錄、索引等，
- ?來放置?些熱?的鏈接，不常?的鏈接通常放到
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
- 獨?的?檔、頁面、應?、站點，
- 可獨?分配的或可復?的結構，如論壇帖?、新聞?章、博客、?戶提交的評論、互動式組件等，
比如：
<article class="forecast">
<h1>廣州的天氣預報</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
- 按主題將內容分組，通常會有標題，
<section>通常出現在?檔的?綱中，- 不要把
<section>作為普通容器來使用，比如說用于美化片段樣式，此時用<div>更合適， - 如果元素里邊是獨立的整塊的內容，可以單獨發布，則更適合用
<article>，
比如：
<h1>選擇一個蘋果</h1>
<section>
<h2>介紹</h2>
<p>這個檔案將提供一個引導，幫助選擇一個正確的蘋果</p>
</section>
<section>
<h2>標準</h2>
<p>對于選擇一個蘋果來說，有很多不同的標準，比如尺寸，顏色，甜度等等標準</p>
</section>
5）aside
- 表示一個和其余頁面內容幾乎無關的部分，或者說單獨拆出來不會影響整體的內容，
- 通常放在側邊欄，用于展示廣告、
tips、參考內容等等，
比如：
<p>今天天氣還不錯，我決定去踏青</p>
<aside>
<h4>野餐</h4>
<P>準備號各種各樣的食物，大概早上9點鐘出發去野餐，</P>
</aside>
6）footer
- 表示最近一個章節的頁腳，
- 通常包含該章節作者、著作權資料或者檔案鏈接等資訊，
footer內的元素不屬于章節內容，不包含在大綱中，
比如：
<footer>
<h1>著作權號 by monday</h1>
<P><time pubdate datetime="2021-08-15"></time></P>
</footer>
（2）語意化 - 分組類別標簽
1）figure/figcaption
<figure>包裹被獨?引?的內容：圖表、插圖、代碼等，通常會有個標題；<figcaption>與其相關聯的圖表的說明/標題，通常位于<figure>的第?個或最后?個，
比如：
<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
- 塊級引?元素，
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
- 用于描述一組鍵值對，
- 通常用于元資料、術語定義等場景，
<dl>
<dt>FireFox</dt>
<dd>A free, open source, cross-platform.</dd>
</dl>
（3）語意化 - 文本標簽
1）cite
<cite>元素通常用于參考作品標題，- 包括論文、檔案、書籍、電影等的參考，
2）time
- 機器可讀的時間和日期，
datetime表示此元素關聯的時間日期，若不指定則該元素不會被決議為日期，
3）address
- 表示某個人或組織的聯系資訊，
4）mark
- 在參考中使用，表示需要引起注意，
5）code
- 表示代碼片段，
6）small
- 表示免責宣告、注意事項等等資訊，
（4）語意化 - 多媒體元素標簽
1）img
src屬性是必須的，嵌?圖?的?件路徑，alt屬性包含?條對影像的?本描述，?強制，螢屏閱讀器會將這些描述讀給需要使?閱讀器的使?者聽，讓他們知道影像的含義，影像?法加載時(?絡錯誤、內容被屏蔽或鏈接過期時)，瀏覽器會在??上顯示alt屬性中的?本，decoding解碼?式：異步、同步，loading懶加載，
2）picture
- 元素通過包含零或多個
<source>元素和?個<img>元素來為不同的， - 顯示/設備場景提供相應的影像版本，
media屬性：依據的媒體條件渲染相應的圖?，類似媒體查詢，type屬性：MIME型別，根據瀏覽器?持性渲染相應的圖?，
3）音視頻
-
所謂音視頻標簽，即
<video></video>和<audio></audio>標簽， -
src屬性是必須的，嵌?視頻?件路徑， -
controls表示是否展示瀏覽器?帶的控制元件，同時可以創建?定義控制元件， -
autoplay是否?動播放， -
source元素表示視頻的可替代資源(不同格式、清晰度，讀取失敗或?法解碼時可以依次嘗試)，
比如：
<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是如何進行決議的，
1. DOM檔案物件模型
所謂 DOM ，即對節點的結構化進行表述，并定義了一種方式可以使程式對該結構進行訪問，它將 web 頁面和腳本語言鏈接起來，
2. HTML的決議程序
對于 DOM 樹來說，其構建程序如下：
- 首先先構建
DOM樹； - 其次要對樣式進行計算，此時構建
CSSOM樹； - 接著將
DOM和CSSOM組合成一個Render渲染樹； - 現在，瀏覽器將對整個頁面的布局進行計算；
- 最后，繪制頁面，
具體如下圖所示：
🙃七、結束語
在上文中，我們了解到了網頁的三大元素， HTML 的簡介、結構和其決議程序，當然，同樣很重要的一點是語意化標簽，對于語意化標簽來說，它可以很一目了然地讓我們知道是什么意思，很大程度上地提升了開發效率，
到這里，關于 HTML 的基礎知識講到這里就結束啦！希望對大家有幫助~
🐣彩蛋 One More Thing
👉關注公眾號星期一研究室，第一時間關注優質文章，更多精選專欄待你解鎖~
👉如果這篇文章對你有用，記得留個腳印jio再走哦~
👉以上就是本文的全部內容！我們下期見！👋👋👋
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/295454.html
標籤：其他
上一篇：C++之模板初階：甩鍋編譯器