值得关注的HTML基础
值得關注的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
- 用于描述一組鍵值對。
- 通常用于元數據、術語定義等場景。
（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再走哦~
👉以上就是本文的全部內容！我們下期見！👋👋👋
總結
以上是生活随笔為你收集整理的值得关注的HTML基础的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 梦梦奈怎么玩 梦梦奈的安装使用方法
- 下一篇： 2017年html5行业报告,云适配发布