全棧之前端 | 1.HTML基礎必備知識學習篇

設為「?? 星標」帶你從基礎入門 到 全棧實踐 再到 放棄學習！
涉及 網絡安全運維、應用開發、物聯網IOT、學習路徑、個人感悟 等知識分享。

希望各位看友多多支持【關注、點贊、評論、收藏、投幣】，助力每一個夢想。

【WeiyiGeek Blog's - 花開堪折直須折，莫待無花空折枝 】
作者主頁: 【 https://weiyigeek.top 】
博客地址: 【 https://blog.weiyigeek.top 】
作者答疑學習交流群：歡迎各位志同道合的朋友一起學習交流【點擊 ?? 加入交流群】, 或者關注公眾號回復【學習交流群】。

0X00 前言簡述

快速回顧

學習路徑
通過前面【全棧之前端前置知識】我們知道，前端開發一般學習路徑都是 HTML+CSS+Javascript等

HTML是網頁內容的載體 - 結構
CSS 是樣式的設置 - 表現
JS 是網頁中實現特效和交互化的效果 - 行為

首發地址: https://mp.weixin.qq.com/s/ZLfFn_kEb9CwAUanP2vbWg

什么是 HTML?

描述：HTML超文本標記語言 (Hyper Text Markup Language), 它不是一種編程語言，而是一種標記語言 (markup language)
標記語言是一套標記標簽 (markup tag), 其使用標記標簽來描述網頁。

在編寫好的HTML文件，我們可以將其部署到web容器中(http 服務端)，此時我們客戶端便可通過瀏覽器進行訪問瀏覽了。

HTTP 請求連接流程
HTTP協議遵循請求(Request)/應答(Response)模型，所有HTTP連接都被構造成一套請求和應答；

答：HTTP是一種無狀態的協議，無狀態是指Web瀏覽器和Web服務器之間不需要建立持久的連接，這意味著當一個客戶端向服務器端發出請求，然后Web服務器返回響應(response) 連接就被關閉了，在服務器端不保留連接的有關信息。
溫馨提示: 當前可以通過web容器或者中間件將HTML請求連接保持為長連接。

WeiyiGeek.http-請求與響應圖

HTTP 請求響應報文

請求報文(頭部字段名)

Accept：請求報頭域用于指定客戶端接受哪些類型的信息；
Accept：image/gif，表明客戶端希望接受GIF圖象格式的資源；
Accept：text/html，表明客戶端希望接受html文本;
Accept-Encoding：請求報頭域類似于Accept，但是它是用于指定可接受的內容編碼, 例如 Accept-Encoding:gzip.deflate ，示可以接受gzip算法編碼過的數據;
Connection：當值為Close時，告訴服務器發送響應的文件后關閉連接，為Keep-Alive時，告訴服務器在完成本次請求的響應后，保持連接;

響應報文(頭部字段名)

Location：響應報頭域用于重定向接受者到一個新的位置,Location響應報頭域常用在更換域名的時候
Content-Type：實體報頭域用語指明發送給接收者的實體正文的媒體類型,eg：Content-Type:text/html;

HTTP/1.1 304 Not Modified   # HTTP協議 響應碼
Server: nginx               # 服務端標識
Date: Mon, 27 Aug 2018 14:02:38 GMT # 日期時間、時區
Connection: keep-alive              # 連接類型
Last-Modified: Thu, 09 Aug 2018 13:51:45 GMT  # 上次修改時間
ETag: "5b6c46f1-24e"                # 標記
X-Kong-Upstream-Latency: 1
X-Kong-Proxy-Latency: 2
Via: kong/0.11.2                    # 自定義響應頭

WeiyiGeek.HTTP請求與響應頭圖

HTTP 方法
描述: 兩種最常用的 HTTP 方法是 GET 和 POST, 他們是在客戶機和服務器之間進行請求-響應時最常用的方法。

GET - 從指定的資源請求數據。
POST - 向指定的資源提交要被處理的數據。

# GET 方法 : 請注意，查詢字符串（名稱/值對）是在 GET 請求的 URL 中發送的：
/test/demo_form.php?name1=value1&name2=value2

# POST 方法: 請注意，查詢字符串（名稱/值對）是在 POST 請求的 HTTP 消息主體中發送的：
POST /test/demo_form.php HTTP/1.1
Host: runoob.com
name1=value1&name2=value2

擴展說明: 針對Form 中的 get 和 post 方法，在數據傳輸過程中分別對應了 HTTP 協議中的 GET 和 POST 方法, 二者主要區別如下：

1、Get 是用來從服務器上獲得數據，而 Post 是用來向服務器上傳遞數據。
2、Get 將表單中數據的按照 variable=value 的形式，添加到 action 所指向的 URL 后面，并且兩者使用“?”連接，而各個變量之間使用“&”連接；Post 是將表單中的數據放在 form 的數據體中，按照變量和值相對應的方式，傳遞到 action 所指向 URL。
3、Get 是不安全的，因為在傳輸過程，數據被放在請求的 URL 中，而如今現有的很多服務器、代理服務器或者用戶代理都會將請求URL記錄到日志文件中，然后放在某個地方，這樣就可能會有一些隱私的信息被第三方看到。另外，用戶也可以在瀏覽器上直接看到提交的數據，一些系統內部消息將會一同顯示在用戶面前。Post 的所有操作對用戶來說都是不可見的。
4、Get 傳輸的數據量小，這主要是因為受 URL 長度限制；而 Post 可以傳輸大量的數據，所以在上傳文件只能使用 Post（當然還有一個原因，將在后面的提到）。
5、Get 限制 Form 表單的數據集的值必須為 ASCII 字符；而 Post 支持整個 ISO10646 字符集。
6、Get 是 Form 的默認方法。
使用 Post 傳輸的數據，可以通過設置編碼的方式正確轉化中文；而 Get 傳輸的數據卻沒有變化。在以后的程序中，我們一定要注意這一點。

WeiyiGeek. GET方法與POST方法區別圖

學習參考

HTML學習教程：https://developer.mozilla.org/zh-CN/docs/Learn/HTML
HTML元素標簽快速查詢:
HTML 元素和有效的 DTD查詢 : http://www.w3school.com.cn/tags/html_ref_dtd.asp

溫馨提示：因為當前HTML5被廣泛使用，所有后續文中HTML名詞皆代表HTML5。

0x01 初識HTML

1.HTML結構

描述: 網頁文檔由嵌套的 HTML 元素構成,大多數 HTML 元素可以嵌套（可以包含其他 HTML 元素）。

<!DOCTYPE html>            <!--DOCTYPE 聲明了文檔類型 (HTML5)-->
<html>   <!--HTML文檔-->     
<head>   <!--頭部-->
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  <!--編碼及網頁類型-->
  <meta http-equiv="content-language" content="zh-CN"/> <!--網頁語言-->
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="author" content="WeiyiGeek" />   <!--自定義元數據-->
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <title>我是網頁標題</title>   <!--標題-->
</head>
<body>    <!--主體-->
  <h1>我的第一主題</h1>  <!--元素標簽-->
  <p>我的第一個段落</p>
  <div>我的第二個段落</div>
  文本是可見的頁面內容，歡迎訪問 weiyigeek.top 
</body>
</html>

2.HTML標簽

描述: HTML 標記標簽通常被稱為HTML 標簽(tag)，完整標簽被稱為HTML 元素 (element)，例如，我們從上面的HTML結構中可以看到。

HTML 標簽是由尖括號包圍的關鍵詞，比如 <html>
HTML 標簽通常是成對出現的，比如 <b> 和 </b>
HTML 標簽對大小寫不敏感，比如<P> 等同于 <p>, 但是建議使用小寫標簽。
HTML 標簽內部是可以嵌套其他元素的，比如 <p>My cat is <strong>very</strong> grumpy.</p>.

注釋：開始標簽常（opening tag）,內容（Content）即元素的內容，結束標簽（closing tag），例如 <h1>我是標題</h1>，整個元素即由開始標簽、內容、結束標簽三部分組成的整體。

溫馨提示：W3School 使用的是小寫標簽，因為萬維網聯盟（W3C）在 HTML 中推薦使用小寫，而在未來 (X)HTML 版本中強制使用小寫。

溫馨提示: 但是并非所有的標簽都是成對出現，例如 換行標簽 <br /> 和 分割線標簽 <hr /> 特殊標簽，它是一種沒有內容(空內容-empty content)、空的 HTML 元素（被稱為空元素）, 空元素在開始標簽中進行關閉（以開始標簽的結束而結束）

溫馨提示: 在 XHTML、XML 以及可能在未來版本的 HTML 中，所有元素都必須被關閉。在開始標簽中添加斜杠，比如 <br />，是關閉空元素的正確方法，HTML、XHTML 和 XML 都接受這種方式，即使 <br> 在所有瀏覽器中都是有效的，但使用 <br /> 其實是更長遠的保障。

實時結果輸出：

請點擊執行,即可顯示結果!

可編輯代碼:

<h1> WeiyiGeek Blog =>  <br />  <p> 花開堪折直須折，莫待無花空折枝。 </p> <hr /> </h1>

3.HTML注釋

描述: 同許多編程語言一樣，HTML標記語言也支持單行與多行注釋，注釋標簽用于在源代碼中插入注釋，注釋不會顯示在瀏覽器中。
使用注釋可以對您的代碼進行解釋，這樣做有助于您在以后的時間對代碼的編輯，當您編寫了大量代碼時尤其有用。

示例1.
<!-- 這是一個單行注釋-->

示例2.
<!-- 這是一個多行注釋
<script type="text/javascript">
  function displayMsg() {
    alert("Hello World!")
  }
displayMsg();
</script>
//-->

示例3.條件注釋定義只有 Internet Explorer 執行的 HTML 標簽。
<!--[if IE 8]>
  .... some HTML here ....
<![endif]-->

注釋：示例2的注釋行結尾處的兩條斜杠 (//) 是 JavaScript 注釋符號。這可以避免 JavaScript 執行 --> 標簽。

4.HTML文檔類型

描述：HTML 文檔描述網頁，也被稱為網頁, 文檔包含 HTML 標簽和純文本。

Web 瀏覽器的作用是讀取 HTML 文檔，并以網頁的形式顯示出它們，瀏覽器不會顯示 HTML 標簽，而是使用標簽來解釋頁面的內容。

WeiyiGeek.HTML文檔圖

定義文檔類型
描述: 所有瀏覽器都支持 <!DOCTYPE> 聲明，幫助瀏覽器正確地顯示網頁。Web 世界中存在許多不同的文檔，只有了解文檔的類型，瀏覽器才能正確地顯示文檔。
HTML 也有多個不同的版本，只有完全明白頁面中使用的確切 HTML 版本，瀏覽器才能完全正確地顯示出 HTML 頁面，這就是 <!DOCTYPE> 的用處, <!DOCTYPE> 聲明對大小寫不敏感，并且其聲明沒有結束標簽.

溫馨提示: <!DOCTYPE> 不是 HTML 標簽，它為瀏覽器提供一項信息（聲明），即 HTML 是用什么版本編寫的。

HTML 版本

從 Web 誕生早期至今，已經發展出多個 HTML 版本 :
HTML(1991)
HTML+(1993)
HTML 2.0(1995)
HTML 3.2(1997)
HTML 4.01(1999)
XHTML 1.0(2000)
HTML5 (2012)
XHTML5 (2013)

常用的 DOCTYPE 聲明

HTML 5 : 聲明當前文檔類型，以及HTML版本，當前最新。

<!DOCTYPE html>

HTML 4.01 Strict (adj. 嚴格的；絕對的)：該 DTD 包含所有 HTML 元素和屬性，但不包括展示性的和棄用的元素（比如 font），不允許框架集（Framesets）。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML 4.01 Transitional (adj. 變遷的；過渡期的)：同上

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

HTML 4.01 Frameset（n. 框架集；框架型）：該 DTD 等同于 HTML 4.01 Transitional，但允許框架集內容

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

下述，DOCTYPE 聲明主要針對于XML語言，此處只是簡單了解。

XHTML 1.0 Strict：該 DTD 包含所有 HTML 元素和屬性，但不包括展示性的和棄用的元素（比如 font），不允許框架集（Framesets），必須以格式正確的 XML 來編寫標記。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

XHTML 1.0 Transitional：該 DTD 包含所有 HTML 元素和屬性，包括展示性的和棄用的元素（比如 font），不允許框架集（Framesets）。必須以格式正確的 XML 來編寫標記。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

XHTML 1.0 Frameset：該 DTD 等同于 XHTML 1.0 Transitional，但允許框架集內容。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

XHTML 1.1該 DTD 等同于 XHTML 1.0 Strict，但允許添加模型（例如提供對東亞語系的 ruby 支持）。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

5.HTML編輯器

描述: 在前面【全棧之前端前置知識】我們介紹前端開發必備的幾種IDE編輯器，此處我們來看看，在沒有安裝上述編輯器（VScode）可以使用其他那些編輯器進行修改和編寫。

例如：如下html代碼編輯器

Atom、TextEdit、EditPuls
Notepad++：https://notepad-plus-plus.org/
Sublime Text：http://www.sublimetext.com/
HBuilder：http://www.dcloud.io/
Adobe Dreamweaver(已過時)

通常每一種操作系統都帶有簡單的文本編輯器：

Windows 用戶可以使用記事本；
Linux 用戶可以選擇幾種不同的文本編輯器，如 vi、vim 或者 emacs ；
Mac 用戶可以使用 OS X 預裝的 TextEdit。

溫馨提示: 在初學時，推薦使用文本編輯器來學習 HTML，比如 Notepad (PC) 或 TextEdit (Mac)，我們相信，使用一款簡單的文本編輯器是學習 HTML 的好方法，便于手敲記憶。

0x02 HTML編碼規范

1.編碼格式

1.用兩個空格來代替制表符（tab），嵌套元素應當縮進一次（即兩個空格）;
2.屬性的定義確保全部使用雙引號，絕不要使用單引號;
3.不要省略可選的結束標簽（closing tag），除了單標簽還是需要注意在其尾部加上斜線;
4.盡量遵循 HTML 標準和語義，但是不要以犧牲實用性為代價。任何時候都要盡量使用最少的標簽并保持最小的復雜度。
5.HTML 屬性應當按照以下給出的順序依次排列，確保代碼的易讀性。

例如，標簽元素中屬性位置 class 用于標識高度可復用組件，因此應該排在首位，而id 用于標識具體組件，應當謹慎使用（例如，頁面內的書簽）因此排在第二位。

class
id, name
data-*
src, for, type, href
title, alt
aria-*, role

基礎實例:

<!-- 為每個 HTML 頁面的第一行添加標準模式（standard mode）的聲明，這樣能夠確保在每個瀏覽器中擁有一致的展現。 -->
<!DOCTYPE html> 

<!--強烈建議為 html 根元素指定 lang 屬性，從而為文檔設置正確的語言,有助于語音合成工具確定其所應該采用的發音，有助于翻譯工具確定其翻譯時所應遵守的規則 -->
<html lang="en">
<head>
<!--明確聲明字符編碼，能夠確保瀏覽器快速并容易的判斷頁面內容的渲染方式。可以避免在 HTML 中使用字符實體標記（character entity），從而全部與文檔編碼一致（一般采用 UTF-8 編碼）-->
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- IE 支持通過特定的 <meta> 標簽來確定繪制當前頁面所應該采用的 IE 版本。除非有強烈的特殊需求，否則最好是設置為 edge mode，從而通知 IE 采用其所支持的最新的模式。 -->
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title> Bootstrap 插件</title>
  <!-- H5在引入 CSS 和 JavaScript 文件時一般不需要指定 type 屬性-->
  <link rel="stylesheet" >
  <!-- External CSS -->
  <link rel="stylesheet" href="code-guide.css">
  <!-- In-document CSS -->
  <style> /* ... */ </style>
  <!-- JavaScript -->
  <script src="code-guide.js"></script>
</head>
<body>
  <img src="images/company-logo.png" alt="Company">
  <h1 class="hello-world">Hello, world!</h1>
  <!--布爾（boolean）型屬性-->
  <input type="text" disabled>
  <input type="checkbox" value="1" checked>
  <select>
    <option value="1" selected>1</option>
  </select>
</body>
</html>

0x03.HTML顏色選擇

描述: 學習過圖像設計的朋友，都知道顏色由紅色(red)、綠色(green)、藍色(blue)混合（三原色）而成, 再由這三種顏色調出各種演顏色。

同樣在 HTML 顏色由一個十六進制符號來定義，這個符號由紅色、綠色和藍色的值組成（RGB-256），這種顏色的最小值是0（十六進制：#000），最大值是255（十六進制：#FFF）。

目前所有瀏覽器都支持以下顏色名, 在HTML和CSS顏色規范定義了141個（17標準顏色，再加124。

17標準顏色：黑色，藍色，水，紫紅色，灰色，綠色，石灰，栗色，海軍，橄欖，橙，紫，紅，白，銀，藍綠色，黃色。
16顏色實現: aqua、black、blue、fuchsia、gray、green、lime、maroon、navy、olive、purple、red、silver、teal、white、yellow。

我們可以使用如下三種形式為HTML文本設置背景以及演示，以及使用rgba設置透明度。

<!-- 常規 -->
<p style="background-color:#FFFF00">通過十六進制設置背景顏色</p>
<p style="background-color:rgb(255,255,0)">通過 RGB 值設置背景顏色</p>
<p style="background-color:yellow">通過顏色名設置背景顏色</p>

<!-- 演示透明度 -->
<!-- 格式: rgba(255,255,255,透明度(0~1)) -->
<p style="background-color:rgb(255,255,0)">通過 rbg 值設置背景顏色
</p>
<p style="background-color:rgba(255,255,0,0.15)">通過 通過 rbg 值設置背景顏色,rgba設置透明度</p>
<p style="background-color:rgba(255,255,0,0.25)">通過 rbg 值設置背景顏色,rgba設置透明度</p>
<p style="background-color:rgba(255,255,0,0.5)">通過 rbg 值設置背景顏色,rgba設置透明度</p>
<p style="background-color:rgba(255,255,0,0.75)">通過 rbg 值設置背景顏色,rgba設置透明度</p>

Q: 什么是 Web安全色?
數年以前，當大多數計算機僅支持 256 種顏色的時候，一系列 216 種 Web 安全色作為 Web 標準被建議使用。其中的原因是，微軟和 Mac 操作系統使用了 40 種不同的保留的固定系統顏色（雙方大約各使用 20 種）。

我們不確定如今這么做的意義有多大，因為越來越多的計算機有能力處理數百萬種顏色，不過做選擇還是你自己。
最初，216 跨平臺 web 安全色被用來確保：當計算機使用 256 色調色板時，所有的計算機能夠正確地顯示所有的顏色。

WeiyiGeek.Web安全色一覽圖

顏色名與16進制值對應列表:

顏色名	十六進制顏色值	顏色
AliceBlue	#F0F8FF	AliceBlue
AntiqueWhite	#FAEBD7	AntiqueWhite
Aqua	#00FFFF	Aqua
Aquamarine	#7FFFD4	Aquamarine
Azure	#F0FFFF	Azure
Beige	#F5F5DC	Beige
Bisque	#FFE4C4	Bisque
Black	#000000	Black
BlanchedAlmond	#FFEBCD	BlanchedAlmond
Blue	#0000FF	Blue
BlueViolet	#8A2BE2	BlueViolet
Brown	#A52A2A	Brown
BurlyWood	#DEB887	BurlyWood
CadetBlue	#5F9EA0	CadetBlue
Chartreuse	#7FFF00	Chartreuse
Chocolate	#D2691E	Chocolate
Coral	#FF7F50	Coral
CornflowerBlue	#6495ED	CornflowerBlue
Cornsilk	#FFF8DC	Cornsilk
Crimson	#DC143C	Crimson
Cyan	#00FFFF	Cyan
DarkBlue	#00008B	DarkBlue
DarkCyan	#008B8B	DarkCyan
DarkGoldenRod	#B8860B	DarkGoldenRod
DarkGray	#A9A9A9	DarkGray
DarkGreen	#006400	DarkGreen
DarkKhaki	#BDB76B	DarkKhaki
DarkMagenta	#8B008B	DarkMagenta
DarkOliveGreen	#556B2F	DarkOliveGreen
Darkorange	#FF8C00	Darkorange
DarkOrchid	#9932CC	DarkOrchid
DarkRed	#8B0000	DarkRed
DarkSalmon	#E9967A	DarkSalmon
DarkSeaGreen	#8FBC8F	DarkSeaGreen
DarkSlateBlue	#483D8B	DarkSlateBlue
DarkSlateGray	#2F4F4F	DarkSlateGray
DarkTurquoise	#00CED1	DarkTurquoise
DarkViolet	#9400D3	DarkViolet
DeepPink	#FF1493	DeepPink
DeepSkyBlue	#00BFFF	DeepSkyBlue
DimGray	#696969	DimGray
DodgerBlue	#1E90FF	DodgerBlue
Feldspar	#D19275	Feldspar
FireBrick	#B22222	FireBrick
FloralWhite	#FFFAF0	FloralWhite
ForestGreen	#228B22	ForestGreen
Fuchsia	#FF00FF	Fuchsia
Gainsboro	#DCDCDC	Gainsboro
GhostWhite	#F8F8FF	GhostWhite
Gold	#FFD700	Gold
GoldenRod	#DAA520	GoldenRod
Gray	#808080	Gray
Green	#008000	Green
GreenYellow	#ADFF2F	GreenYellow
HoneyDew	#F0FFF0	HoneyDew
HotPink	#FF69B4	HotPink
IndianRed	#CD5C5C	IndianRed
Indigo	#4B0082	Indigo
Ivory	#FFFFF0	Ivory
Khaki	#F0E68C	Khaki
Lavender	#E6E6FA	Lavender
LavenderBlush	#FFF0F5	LavenderBlush
LawnGreen	#7CFC00	LawnGreen
LemonChiffon	#FFFACD	LemonChiffon
LightBlue	#ADD8E6	LightBlue
LightCoral	#F08080	LightCoral
LightCyan	#E0FFFF	LightCyan
LightGoldenRodYellow	#FAFAD2	LightGoldenRodYellow
LightGrey	#D3D3D3	LightGrey
LightGreen	#90EE90	LightGreen
LightPink	#FFB6C1	LightPink
LightSalmon	#FFA07A	LightSalmon
LightSeaGreen	#20B2AA	LightSeaGreen
LightSkyBlue	#87CEFA	LightSkyBlue
LightSlateBlue	#8470FF	LightSlateBlue
LightSlateGray	#778899	LightSlateGray
LightSteelBlue	#B0C4DE	LightSteelBlue
LightYellow	#FFFFE0	LightYellow
Lime	#00FF00	Lime
LimeGreen	#32CD32	LimeGreen
Linen	#FAF0E6	Linen
Magenta	#FF00FF	Magenta
Maroon	#800000	Maroon
MediumAquaMarine	#66CDAA	MediumAquaMarine
MediumBlue	#0000CD	MediumBlue
MediumOrchid	#BA55D3	MediumOrchid
MediumPurple	#9370D8	MediumPurple
MediumSeaGreen	#3CB371	MediumSeaGreen
MediumSlateBlue	#7B68EE	MediumSlateBlue
MediumSpringGreen	#00FA9A	MediumSpringGreen
MediumTurquoise	#48D1CC	MediumTurquoise
MediumVioletRed	#C71585	MediumVioletRed
MidnightBlue	#191970	MidnightBlue
MintCream	#F5FFFA	MintCream
MistyRose	#FFE4E1	MistyRose
Moccasin	#FFE4B5	Moccasin
NavajoWhite	#FFDEAD	NavajoWhite
Navy	#000080	Navy
OldLace	#FDF5E6	OldLace
Olive	#808000	Olive
OliveDrab	#6B8E23	OliveDrab
Orange	#FFA500	Orange
OrangeRed	#FF4500	OrangeRed
Orchid	#DA70D6	Orchid
PaleGoldenRod	#EEE8AA	PaleGoldenRod
PaleGreen	#98FB98	PaleGreen
PaleTurquoise	#AFEEEE	PaleTurquoise
PaleVioletRed	#D87093	PaleVioletRed
PapayaWhip	#FFEFD5	PapayaWhip
PeachPuff	#FFDAB9	PeachPuff
Peru	#CD853F	Peru
Pink	#FFC0CB	Pink
Plum	#DDA0DD	Plum
PowderBlue	#B0E0E6	PowderBlue
Purple	#800080	Purple
Red	#FF0000	Red
RosyBrown	#BC8F8F	RosyBrown
RoyalBlue	#4169E1	RoyalBlue
SaddleBrown	#8B4513	SaddleBrown
Salmon	#FA8072	Salmon
SandyBrown	#F4A460	SandyBrown
SeaGreen	#2E8B57	SeaGreen
SeaShell	#FFF5EE	SeaShell
Sienna	#A0522D	Sienna
Silver	#C0C0C0	Silver
SkyBlue	#87CEEB	SkyBlue
SlateBlue	#6A5ACD	SlateBlue
SlateGray	#708090	SlateGray
Snow	#FFFAFA	Snow
SpringGreen	#00FF7F	SpringGreen
SteelBlue	#4682B4	SteelBlue
Tan	#D2B48C	Tan
Teal	#008080	Teal
Thistle	#D8BFD8	Thistle
Tomato	#FF6347	Tomato
Turquoise	#40E0D0	Turquoise
Violet	#EE82EE	Violet
VioletRed	#D02090	VioletRed
Wheat	#F5DEB3	Wheat
White	#FFFFFF	White
WhiteSmoke	#F5F5F5	WhiteSmoke
Yellow	#FFFF00	Yellow
YellowGreen	#9ACD32	YellowGreen

顏色小工具:
拾色器：http://www.runoob.com/tags/html-colorpicker.html
顏色混搭：http://www.runoob.com/tags/colors-mixer.html

0x04 HTML元素屬性

描述：使用屬性為 HTML 元素提供附加信息，分為標準（全局）屬性與標簽屬性。

全局屬性

常見的標準屬性有id, class, title, style, dir, lang, xml:lang，值得注意屬性和屬性值盡量小寫，除此之外詳細的HTML列表如下：

id : 規定元素的唯一id
class : 規定元素的一個或多個類名( 引用樣式表中的類]
style : 規定元素的行內 CSS 樣式
title : 規定有關元素的額外信息
accesskey ：規定激活元素的快捷鍵
contenteditable ：規定元素內容是否可編輯。
contextmenu : 規定元素的上下文菜單，上下文菜單在用戶點擊元素時顯示（已過時，將被丟棄）。
dir : 規定元素中內容的文本方向
data-* : 用于存儲頁面或應用程序的私有定制數據
lang : 規定元素內容的語言
tabindex ：規定元素的 tab 鍵次序
translate : 規定是否應該翻譯元素內容
spellcheck ：規定是否對元素進行拼寫和語法檢查
hidden : 規定元素仍未或不再相關。
draggable : 規定元素是否可拖動
dropzone : 規定在拖動被拖動數據時是否進行復制、移動或鏈接（暫不支持）

參考地址:

https://developer.mozilla.org/zh-CN/docs/Web/HTML/Global_attributes
https://www.runoob.com/tags/ref-standardattributes.html

id 屬性

描述: id 屬性規定 HTML 元素的唯一的 id（HTML 文檔中必須是唯一的），其屬性可用作鏈接錨（link anchor），通過 JavaScript（HTML DOM）或通過 CSS 為帶有指定 id 的元素改變或添加樣式。

即id 屬性只能為元素單獨設置 id=" "（只能填寫一個，多個無效）

語法: <element id="idname">

屬性: idname 規定元素的唯一id。

規則：

1）必須以字母 A-Z 或 a-z 開頭
2）其后的字符：字母(A-Za-z)、數字(0-9)、連字符("-")、下劃線("_")、冒號("?? 以及點號(".")
3）值對大小寫敏感

HTML 4.01 與 HTML5之間的差異說明

在 HTML5 中, id 屬性可用于任何的 HTML 元素 (它會驗證任何HTML元素，但不一定是有用)。
在 HTML 4.01 中, id 屬性不能用于:<base>, <head>, <html>, <meta>, <param>, <script>, <style>, 和<title>。

注意: HTML 4.01 對于 id 的值有嚴格的限制 (例如：在 HTML 4.01 id 值不能以數字開頭)。

示例： 利用Javascript的Dom來改變插入網頁的文字：

<style type="text/css">
#myHeaderh1 {
	color:white;
	background-color:red;
	font-size:20px;
}
</style>


<!-- 示例1.下面利用了點擊事件和調用了一個js函數 -->
<h1 id="myHeader">Hello World!</h1>
<button onclick="displayResult()">編輯文本</button>

<!-- 示例2.當然css中也能引用id屬性的值來達到修改樣式的功能 -->
<p>下面利用引用id屬性名來達到修改文字的樣式效果！！！</p>
<h1 id="myHeaderh1">Hello World!</h1>

<script>
  // js來獲取元素的id從而確定要修改標簽 -
  function displayResult(){
    document.getElementById("myHeader").innerHTML="Test Id call";
  }
</script>

WeiyiGeek.使用id屬性效果圖

class 屬性

描述: class 屬性定義了元素的類名，通常用于指向樣式表的類,來修改標簽元素的樣式。
但是，它也可以用于 JavaScript 中（通過 HTML DOM）, 來修改 HTML 元素的類名。

即: class 屬性可以為多個元素使用相關或者不同的 class=" " （引號里面可以填入多個class屬性）

語法: <element class="classname">

屬性: classname 規定元素的類的名稱。

如需為一個元素規定多個類，用空格分隔類名，例如 <span class="left important">. HTML 元素允許使用多個類。

規則：

1）必須以字母 A-Z 或 a-z 開頭
2）可以是以下字符： (A-Za-z), 數字 (0-9), 橫桿 ("-"), 和下劃線 ("_")
3）在 HTML 中類名是區分大小寫的，此處值得注意。

示例: 在CSS中使用class 類名的引用改變樣式（此處只是簡單了解后續會介紹CSS相關教程）。

<style>
h1.intro {
	color:blue;
}
p.important {
	color:green;
}
pre.test{
	text-align:left;
	color:white;
}
pre.c{
	background-color:black;
}
</style>

<h1 class="intro">標題1這里類的名稱是intro</h1>
<p>下面是單個類屬性來改變樣式：</p>
<p class="important">注意：P標簽的important類名稱，這是一個很重要的段落:)</p>

<p>下面是多個類屬性來改變樣式：</p>
<pre class="test c">
#include \<\stdio.h\>\

int main(){
	int a,b;
	char test="I Love Html!!!";
	a=1;
	b=1;
	a=a+b;
	printf("這是一個字符串：%s , a+b=%d\n",test,a);
	return 0;
}
</pre>

WeiyiGeek.Class屬性示例執行結果圖

擴展說明: HTML 4.01 與 HTML5之間的差異?

在 HTML5 中, class 屬性可用于任何的 HTML 元素 (它會驗證任何HTML元素。但不一定是有用)。
在 HTML 4.01 中, class 屬性不能用于: <base>, <head>, <html>, <meta>, <param>, <script>, <style>, 和 <title>。

title 屬性

描述: title 屬性規定關于元素的額外信息，這些信息通常會在鼠標移到元素上時顯示一段工具提示文本（tooltip text）。

語法：<element title="text">
屬性值: 規定元素的工具提示文本(tooltip text)
示例:

實時結果輸出：

請點擊執行,即可顯示結果!

可編輯代碼:

  <p><abbr title="世界衛生組織">WHO</abbr> 成立于 1948 年</p><br />
  <p title="title屬性設置效果">查詢title屬性效果，請把鼠標移動到此處</p>

hidden 屬性

描述: hidden 屬性規定對元素進行隱藏，隱藏的元素不會被顯示，可以對 hidden 屬性進行設置，使用戶在滿足某些條件時才能看到某個元素（比如選中復選框，等等）, 然后可使用 JavaScript 來刪除 hidden 屬性，使該元素變得可見。

語法: <element hidden>
示例: 隱藏標簽元素顯示。
示例:

<p>這不是一段隱藏的段落</p>
<p hidden>這是一段隱藏的p標簽段落</p>
<span hidden="hidden">這是一段隱藏的sapn標簽段落</span>   <!--建議使用后面這一種-->

溫馨提示:

HTML 4.01 與 HTML5之間的差異：hidden 屬性是 HTML5 中的新屬性, 當前幾乎主流的瀏覽器都支持它。
HTML 與 XHTML 之間的差異：在 XHTML 中, 屬性禁止簡寫，hidden 屬性必須定義為 <element hidden="hidden">.

accesskey 屬性

描述：規定激活（使元素獲得焦點）元素的快捷鍵。
注釋：以下元素支持 accesskey 屬性：<a>, <area>, <button>, <input>, <label>, <legend> （fieldset連用）以及 <textarea>。
語法：<element accesskey="character|快捷鍵">。
示例: 使用指定快捷鍵訪問綁定的超鏈接

<!-- 例如. 使用 Shift + Alt + i 可以快捷訪問個人主頁  -->
<a  accesskey="i">WeiyiGeek 個人主頁</a><br />
<a  accesskey="b">WeiyiGeek 個人博客</a>

溫馨提示: 請使用Alt + accessey 或者 Shift + Alt + accessKey來訪問帶有指定快捷鍵的元素。

tabindex 屬性

描述：規定元素的 tab 鍵控制次序（當 tab 鍵用于導航時）。
注釋：以下元素支持 tabindex 屬性：<a>, <area>, <button>, <input>, <object>, <select> 以及 <textarea>。
語法：<element tabindex="number|按次序">
示例: 使用tab按鍵切換訪問鏈接。

<a  tabindex="2">WeiyiGeek 主頁</a>
<a  tabindex="1">Google</a>  <!--Tab這個優先級最高-->
<a  tabindex="3">Microsoft</a>

溫馨提示: 請嘗試使用鍵盤上的“Tab”鍵在鏈接之間進行導航

translate 屬性

描述： 規定是否應該翻譯元素內容，在國外的一些網站常常不能翻譯。
語法：<element translate="yes|no">
參數： 當值為yes是規定該元素內容可被翻譯，當值為no時則不翻譯。
示例： 規定不應翻譯某些元素。

<p translate="no">請勿翻譯本段。</p>
<p>本段可被譯為任意語言。</p>

spellcheck 屬性 (試驗)

描述： 規定是否對元素進行拼寫和語法檢查, 我們通常可以對以下內容進行拼寫檢查。

1.input 元素中的文本值（非密碼）
2.<textarea>元素中的文本
3.可編輯元素中的文本

語法： <element spellcheck="true|false">
參數： 當值為true是規定該元素內容進行拼寫和語法檢查，當值為false時則不進行檢查。
示例： <p spellcheck="true">元素內容拼寫檢查</p>

contenteditable 屬性

描述： 規定元素內容是否可編輯，如果元素未設置 contenteditable 屬性，那么元素會從其父元素繼承該屬性。

語法： <element contenteditable="true|false">
參數： 進行拼寫檢查的可編輯段落且可以編輯內容。
示例：  <p contenteditable="true" spellcheck="true">這是一段可編輯的段落,嘗試編輯</p>

data-* 屬性

描述： 該全局屬性是一類被稱為自定義數據屬性的屬性，它賦予我們在所有 HTML 元素上嵌入自定義數據屬性的能力，并可以通過腳本在 HTML 與 DOM 表現之間進行專有數據的交換。

語法： <element data-*="somevalue">
參數： 屬性包括兩部分，屬性名不應該包含任何大寫字母，并且在前綴 "data-" 之后必須有至少一個字符，屬性值可以是任意字符串。
示例：

<style>
  li:after {
    content: 'Data ID :=> ' attr(data-id);
    position: absolute;
    top: -22px;
    left: 10px;
    background: black;
    color: white;
    padding: 2px;
    border: 1px solid #eee;
    opacity: 0;
    transition: 0.5s opacity;
  }
</style>
<h1>animal agents</h1>
<ul>
  <li data-id="bird">Owl 貓頭鷹</li>
  <li data-id="fish">Salmon 鮭魚</li> 
  <li data-id="spider">Tarantula 毒蜘蛛</li>   <!--n. 狼蛛；塔蘭圖拉毒蛛-->
</ul>

WeiyiGeek. data-*屬性使用圖

溫馨提示: 用戶代理會完全忽略前綴為 "data-" 的自定義屬性。

draggable 屬性

描述：規定元素是否可拖動，鏈接和圖像默認是可拖動的，draggable：可拖動的
提示：draggable 屬性常用在拖放操作中，請在我們的拖放教程中學習更多內容。
語法：<element draggable="true|false|auto">
參數: true 可拖動，false 不可拖動，auto 使用瀏覽器默認行為。
示例:

<style type="text/css">
  #div {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script type="text/javascript">
  function allowDrop(ev){
    ev.preventDefault();
  }
  
  function drag(ev){
    ev.dataTransfer.setData("Text",ev.target.id);
  }
  
  function drop(ev){
    var data=ev.dataTransfer.getData("Text");
    ev.target.appendChild(document.getElementById(data));
    ev.preventDefault();
  }
</script>


<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br />
<p id="drag" draggable="true" ondragstart="drag(event)">
這是一段可移動的段落，可以把該段落拖入上面的矩形。
</p>

dir 屬性

描述: 是一個指示元素中文本方向的枚舉屬性。它的取值如下：
語法：<element dir="ltr|rtl|auto">

ltr，指從左到右，用于那種從左向右書寫的語言（比如英語）；
rtl，指從右到左，用于那種從右向左書寫的語言（比如阿拉伯語）；
auto，指由用戶代理決定方向, 它在解析元素中字符時會運用一個基本算法，直到發現一個具有強方向性的字符，然后將這一方向應用于整個元素。
示例:

<div dir="ltr">從左向右書寫的語言</div>
<div dir="rtl">從右向左書寫的語言</div>
<div dir="auto">指由用戶代理決定方向</div>

WeiyiGeek.dir 屬性執行結果圖

dropzone 屬性（未支持-NEW）

描述: 規定在元素上拖動數據時，是否拷貝、移動或鏈接被拖動數據。
提示：draggable 屬性常用在拖放操作中，請在我們的拖放教程中學習更多內容。
語法：<element dropzone="copy|move|link">
參數:

copy ：拖動數據會產生被拖動數據的副本
move : 拖動數據會導致被動數據被移動到新w位置
link ：拖動數據會產生指向原始數據的鏈接

溫馨提示: 當前沒有主流瀏覽器支持 dropzone 屬性。

標簽屬性

描述：除了全局屬性之外，HTML 標簽也可以擁有自己屬性（后續學習標簽時會學到），從而提供了有關 HTML 元素的更多的信息。

屬性格式:
描述: 屬性總是以名稱/值對的形式出現，比如：name="value"（用等號給屬性賦值），屬性總是在 HTML 元素的開始標簽中規定, 并且屬性值應該始終被包括在引號內，雙引號是最常用的，不過使用單引號也沒有問題。

在某些個別的情況下，比如屬性值本身就含有雙引號，那么您必須使用單引號，例如：name='Student "HelloWorld" HTML'

示例演示:

<!-- 例1.HTML 鏈接由 <a> 標簽定義，鏈接的地址在 href 屬性中指定 -->
<a  >This is a link</a>

<!-- 例2. 擁有關于背景顏色的附加信息 -->
<body bgcolor="yellow"> 

<!-- 例3.擁有關于表格邊框的附加信息。 -->
<table border="1"> 
<th>name</th>
<th>age</th>
<th>addr</th>
</table>

原文地址: https://blog.weiyigeek.top/2023/2-21-715.html

本文至此完畢，更多技術文章，盡情期待下一章節！

專欄書寫不易，如果您覺得這個專欄還不錯的，請給這篇專欄 【點個贊、投個幣、收個藏、關個注，轉個發，留個言】(人間六大情)，這將對我的肯定，謝謝！。

點擊 ?? 關注「全棧工程師修煉指南」公眾號
 微信溝通交流: weiyigeeker (點擊添加)
交流溝通群：629184198 或關注公眾號回復【學習交流群】

溫馨提示: 由于作者水平有限，本章錯漏缺點在所難免,希望讀者批評指正，并請在文章末尾留下您寶貴的經驗知識，聯系郵箱地址 master@weiyigeek.top 或者關注公眾號 WeiyiGeek 聯系我。

帥哥（靚仔）、美女，點個關注后續不迷路

posted @ 2023-04-11 09:11 全棧工程師修煉指南閱讀(127) 評論(0) 收藏舉報

刷新頁面返回頂部

全棧工程師修煉指南

Always keep a beginner's mind, don't forget the beginner's mind.