LZ-Says：終於明白了雞大說的，技術，沉澱，所謂的孤寂以及背後的堅持。比心，祝好～
前言
搞前段也搞了有一段日子，感覺嘛，還好。
還是有很多的屬性，有點蒙，寫起來還是不能行雲流水。
大佬說過，這個沒有任何捷徑可選，唯有多練，多練。
Today，簡單整理總結一下，算是爲之前的部分前段，做個回顧。
只有根基打牢固，後續的騷技巧才能玩的嗨皮。LZ 一開始明白，卻沒有理解。
而今，爲了未來，打好基礎，加油～！！！
一、HTML 基礎部分
東西很基礎，如有不對，請指正，3 Q～
-
首先來說，什麼是 HTML？
身邊常見的例子，網頁，就是 HTML，當然這裏面還包含着例如 PHP、JSP 等等，LZ 這裏統稱網頁無可厚非吧。那麼來看一下確定術語吧。
HTML（Hypertext Markup Language）：超文本標記語言 -
那麼，一個網頁又是由什麼組成？
我們看到的最實際的網頁，往往包含了很多內容，網頁跳轉連接、圖片、文字描述、各種好看好玩的效果。嗯，我們表面看到的是這些。而實際中，網頁（HTML）則主要由三個部分組成分別爲：- 結構： HTML 用於描述頁面的結構；
- 表現： CSS 控制頁面中元素的樣式；
- 行爲： JS （Java Script）響應用戶操作。
-
既然說了網頁的組成，那麼它標準格式又是什麼？
<html><!-- 根標籤，有且只有一個 -->
<head><!-- 設置頭部信息（幫助瀏覽器解析網頁），不會在網頁中直接顯示 -->
<title>網頁標題</title>
</head>
<body><!-- 此處包含用戶可見內容 -->
<!-- 用戶可見內容 -->
</body>
</html>
- 再說說我們一般都會在代碼中寫一些註釋，那麼在 HTML 中註釋又是什麼樣呢？
<!--
註釋內容不會顯示在網頁，在源代碼中會顯示
一般主要對代碼進行描述，方便後續閱讀維護
-->
-
小夥伴都知道，在我們實際開發中總會遇到各種版本，而每個版本一樣卻又不一樣。以 Android 爲例，5.0 開啓的後續版本都需要我們開發者進行兼容，那麼相對來說，HTML 目前使用較爲廣泛的版本又是哪兒些？
HTML 4、XHTML 以及 HTML 5（常用） -
在我們開發時，都需要指定某種規則，或者告知程序需要按照某種規則進行解碼，以 Android 爲例，Gradle 這個估計大部分都被坑過吧。而 HTML 中，又該如何指定當前使用的 HTML 版本呢？我們下面以最常見的 HTML 5 爲例，我們只需要在根標籤上添加如下聲明即可：
<!DOCTYPE HTML>
-
上面說到我們都需要指定某種規則，或者依據某種規則告知程序我們希望做的事情，那麼 HTML 也爲我們提供了倆種解析模式：
- 標準模式： （Standards Mode）
- 怪異模式： Quirks Mode
在正常模式下解析時，當然我們的網頁對用戶顯示正確內容，而怪異模式，則會在解析過程中出現一些不可預期的行爲，最終導致的用戶體驗性較差。So，我們必須在頁面中編寫正確的 Doctype，也就是告訴網頁應該按照何種規則解析我們的網頁。
-
有時候，尤其在初學者時，常常會出現亂碼原因，那麼爲什麼會出現亂碼呢？
總結來講，出現亂碼的根本原因是因爲編碼和解碼此阿勇的字符集不同導致。
首先，由於計算機底層只能識別二進制文件，即使我們通過 Java 也好，還是其他語言編寫的代碼也好，最終都變成了機器可識別的二進制文件。
剛剛也說過，編碼和解碼，那麼他倆又是什麼？- 編碼：依據某種規則將字符轉換爲二進制編碼；
- 解碼：依據某種規則將二進制編碼轉換爲字符；
二者之間簡單來講就是一個轉換的過程，通過將我們編寫的編碼成二進制文件使機器可正確識別並執行我們預期操作，隨後將二進制編碼解碼輸出。
-
那麼關於這個 HTML 亂碼問題，又該如何解決？
第一種方式： 說白了，出現的問題就是因爲二者不一致，那麼只要將編碼和解碼規則指定爲同一個即可嘛。例如編碼採用 GB-2312，那對應的解碼也採用 GB-2312 不久好了麼。
第二種方式： 其實就是在第一種方式的基礎完善而已，即編碼和解碼採用國際通用規則，也就是 UTF-8 即可。 -
小夥伴說了，你叨叨半天，那麼具體該如何操作呢？
...
<head>
<meta charset="UTF-8"/>
...
<head>
...
-
小夥伴說了，這個 meta 又是什麼鬼呢？它能幹嘛？
這裏簡單講述下：meta 標籤主要作用便是設置網頁的一些元數據，例如網頁的字符集、關鍵字、簡介等。 -
小夥伴又說了，能給我演示幾種關於 meta 的使用麼？
meta 可設置網頁關鍵字，方便搜索引擎搜索，好的關鍵字也利於提升搜索引擎排名。
<meta name="keyworks" content="賀,大,寶"/>
也可以指定網頁描述：
<meta name="descripiton" content="測試網頁描述"/>
還可以設置請求的重定向：
<meta http-equiv="refresh" content="請求時間（秒）;請求目標路徑"/>
- 小夥伴說，剛剛你說的字符集能大概說下不？
爲了方便，LZ 這裏直接截取 W3C School 爲我們整理的部分內容。
簡單理解，就是不同國家自身獨特的規則以及世界通用規則的區別。
二、HTML 常用標籤
標籤可細分爲：
- 成對標籤；
- 自結束標籤。
按照字面意思來講，成對標籤，一對一對的，例如：p /p。而自結束標籤則單身狗，一人吃飽全家不餓，例如換行符 br/。
- 標題標籤：標題一共有 6 個。h1 最大，h6 最小。對於搜索引擎來講，h1 重要性僅次於 title，搜索引擎檢索完 title，會立即查看 h1 中的內容，So，h1 也算影響搜索引擎排名因素之一。
<body>
<h1>一級標題</h1>
<h2>二級標題</h2>
<h3>三級標題</h3>
<h4>四級標題</h4>
<h5>五級標題</h5>
<h6>六級標題</h6>
</body>
顯示效果如下：
- 段落標籤：描述一個段落文字內容。獨佔一行且行與行之間具有默認邊距。
<p>我是 p 標籤，我代表段落</p>
顯示效果如下：
- 換行符，自結束標籤，代表換下一行。
<p>
鋤禾日當午，汗滴禾下土。<br>
誰知盤中餐，粒粒皆辛苦。
</p>
顯示效果如下：
- 水平線標籤，hr
<hr/>
演示效果：
- 圖片標籤：img 主要倆個屬性爲：
- src：圖片地址；
- alt：主要用於圖片異常時，對圖片的描述佔位。其次的作用是爲例便於搜索引擎識別不同類型的圖片，如不設置則搜索引擎不會對此圖片進行檢索搜錄。
<img alt="HLQ_Struggle" src="https://avatar.csdnimg.cn/E/8/D/1_u012400885.jpg"/>
顯示效果如下：
上圖顯示圖片太大，我們將其寬度設置下，使其變小：
這個時候，高度也發生變化。
所以，這裏需要記住一點：如果單獨設置寬或者高，則會自動調整圖片比例。
那麼下面嘗試同時測試寬高看下效果：
路徑分爲倆種：相對路徑以及絕對路徑。
簡單描述下：相對路徑，相對於某個項目下某某圖片。當項目地址發生改變時並不影響圖片使用。而絕對路徑，例如：/user/hlq/img.png ，當我將圖片移動其他目錄下，再使用此地址，則發現圖片應用不到了。
一般在實際開發中，我們都會指定圖片的相對路徑，而不是絕對路徑。
這裏簡單說下圖片的格式，圖片的格式一般有如下幾種：
-
jpeg（jpg）： 支持的顏色較多且可壓縮，但是不支持透明，一般使用此格式來緩存照片。
-
gif： 支持顏色較少，支持動態圖。
-
png： 支持顏色較多且支持複雜的透明。
-
webp： 圖片較小，兼容性會有些問題。
-
.9png： 可伸縮性圖片，也是按照指定規則進行拉伸。
-
…
-
超鏈接標籤：a 標籤，可以從一個頁面跳轉另一個頁面。
<a href="https://blog.csdn.net/u012400885">This is HLQ-Blog.</a>
顯示效果如下：
很明顯看到，當鼠標浮上時，頁面左下角會顯示出當前鏈接的地址。
a 標籤中有幾個關鍵屬性，我們一起來看下。
target 規定打開頁面的位置，關鍵屬性如下：
- _self：默認在當前窗口打開
- _blank：在新頁面打開網頁
- 可以設置一個內聯框架 name 屬性，在指定的內聯框架打開此頁面
href：跳轉目標。設置 # 跳轉當前頁面頂部
- www.xxx.com：跳轉指定網址；
- #ID：跳轉指定 ID 處；
- mailto：打開本地默認郵箱；
-
center 居中標籤，將包裹的內容居中。
-
內聯框架 iframe：將某個網址內嵌當前網頁。不推薦使用，搜索引擎不會檢索。
<iframe src="https://blog.csdn.net/u012400885"></iframe>
顯示效果如下：
特殊字符
假設我們有個需求，要在網頁中輸出如下內容：
a<b>c
很 easy，是不是？來個代碼。
<p>
a<b>c
</p>
來個效果圖：
咦，字母 b 以及大小與的符號哪兒去了呢？
這裏解釋下，< b > 在 HTML 代表加粗，直接這樣寫，瀏覽器會將其識別爲一個標籤解析，那麼我們如果想要正確顯示需求怎麼辦？
彆着急，我們先來看下 HTML 中有用的字符實體，也就是特殊字符，
So，針對如上需求，我們簡單修改下代碼：
<p>
a<b>c
</p>
查看最後效果：
最後我們再列舉一個特殊字符：
<p>
我是 HLQ_Struggle
</p>
<p>
我是 HLQ_Struggle
</p>
在上面的代碼中，我們爲其中的一段話中間加了幾個空格，而爲另一行文字則是使用標記符號，也就是實體名稱。
那麼，他倆之間的效果又是什麼樣的呢？一起來看。
ummm，爲什麼會這樣呢？
簡單說下，即使你在 HTML 中打了 n 個空格，在瀏覽器解析過程中，依舊會被認爲只有一個空格。那麼在某些變態需求中需要我們輸出多個空格時，直接採用實體名稱即可。
HTML 規範
- 凡事，都講究個規矩，那麼在 HTML 的規矩又是什麼呢？
HTML 規範，嚴格意義應該是 XHTML 規範。- HTML 不區分大小寫，但是一般都小寫；
- HTML 中註釋不能嵌套；
- HTML 標籤必須結構完整，要麼成對出現，要麼自結束標籤；
- HTML 會自動修正我們編寫過程中遇到的一些問題，例如成對標籤，只寫一個，瀏覽器會自動爲你修復結束標籤，但是很扯犢子的那就 Says GoodBye；
- HTML 標籤可以嵌套，但是不能交叉嵌套；
- HTML 標籤屬性必須有值且必須加引號；
End
感謝各位觀看，如有不正請指出，歡迎溝通交流～
個人公衆號
不定期發佈博文，最近有點忙，感謝老鐵理解，歡迎關注～
參考資料
- W3C School：https://www.w3cschool.cn/index.html