哈囉！這篇是個人用來記錄看過什麼而已的筆記！不是什麼技術文章而且正常要放自己部落格會比較正常
但還是希望能分享一點學習紀錄
此篇文章內容皆來自網路
https://www.fooish.com/html/
HTML (HyperText Markup Language, 超文字標示語言)
HTML (HyperText Markup Language, 超文字標示語言) 是用來編寫網頁 (web pages) 的基本語言，通常 HTML 會和 CSS 及 JavaScript 一起使用來開發網頁應用程式。
HTML 是一種「標示語言」(標籤式語言) 而非程式語言，而網頁瀏覽器 (web browser) 像是常見的 Chrome, IE, Safari, Firefox 懂得知道如何讀取 HTML 檔案，並將 HTML 中所描述的內容呈現在頁面上。
HTML 是三個網頁開發的基礎語言的其中一個： 那? 我們可以用 HTML 來描述什麼內容呢？
舉例來說，我們可以用 HTML 語法來描述網頁的標題、一個段落、一張表格、在網頁中嵌入圖片、影片或建立互動式表單等。
一份 HTML 檔案文件 (HTML document) 看起來會像是由一堆標籤 (tags) 結構所組成，所謂的標籤是一個個使用尖括弧 <tagname> ... </tagname> 包圍的 HTML 元素 (HTML elements)，不同的標籤包圍著表示不同內容的區塊，瀏覽器會解讀 HTML 標籤來呈現網頁內容，但不會將標籤本身顯示在頁面上，標籤只是用來標示及區分不同的語意內容。
瀏覽器會解讀 HTML 標籤來呈現網頁內容，標籤本身顯示在頁面上，標籤只是用來標示及區分不同的語意內容。
HTML 文件本質上只是單純的純文字檔，舉個例子，一份 HTML 文件會長得像這樣子：
bluegreenking2
<!DOCTYPE html>
<html>
<head>
<title>網頁標題</title>
</head>
<body>
<h1>這是一級標題</h1>
<p>這是一個段落</p>
</body>
</html>
每一個 HTML 標籤包圍的內容中，可以再包含其他的 HTML 標籤，所以說 HTML 文件的結構是屬於一種階層樹狀 (巢狀) 的結構：
+-------+
| html |
+---+---+
|
+--------+------+
| |
+--+---+ +---+--+
| head | | body |
+--+---+ +---+--+
| |
+---+---+ +----+----+
| title | | |
+-------+ +---+--+ +--+--+
| h1 | | p |
+---+--+ +--+--+
| |
text text
簡單解釋說明一下上方的 HTML 文件，其中：
<!DOCTYPE html> 標籤用來聲明這是一份採用 HTML5 語法標準的文件<html> 標籤是 HTML 文件的根元素<head> 標籤中的包含著不會被顯示在頁面上的內容，用來說明關於該網頁的元資訊 (metadata)<title> 標籤用來指定該網頁的標題，通常會顯示在瀏覽器的頁籤上<body> 標籤中包含著會被顯示在頁面上的內容<h1> 標籤用來指定一級/最重要的標題<p> 標籤用來包含一段文字段落那怎麼看編輯完的 HTML 網頁實際會長什麼樣子呢？答案很簡單，就是用瀏覽器打開啊，將 HTML 檔案拖曳到瀏覽器直接打開，或在 HTML 檔案上按右鍵選擇用瀏覽器打開檔案看看！
HTML 檔案文件基本上只是一份純文字檔案，所以說呢，只要是可以編輯純文字的編輯軟體都可以做為 HTML 的編輯器喔！將編輯好的文件儲存成副檔名為 .html 的檔案，就是一份 HTML 文件了！
你可能會看到很多網頁 URL 都不是
.html結尾的，但其實這些網頁的內容依然都是 HTML 格式喔，因為這些網頁不是透過副檔名的方式，而是透過 web server 帶的content-type: text/htmlheader 告訴瀏覽器這是一份 HTML 文件。
所謂的標籤是一個個用尖括弧 <tagname>...</tagname> 包圍住的 HTML 元素 (HTML element)，不同的 HTML 標籤包圍著表示不同語意 (semantic) 內容的區塊
HTML 標籤僅用來表達 HTML 文件的結構和區分不同的內容語意，標籤本身不會被顯示在頁面上喔。
其中 [DOCTYPE], [ html ], [ head ], [ body ] 是每份 HTML 文件中都會用到的標籤。
我們再繼續來說明清楚「標籤」、「內容」和「元素」這幾個名詞實際上分別是指什麼？
完整的標籤包含：
< > 裡面再放入元素名稱，如上面例子的名稱 p 表示段落元素 <p>，起始標籤代表這個 HTML 元素從這裡開始。/，結束標籤代表這個 HTML 元素的尾端，如上面例子的 </p> 表示段落元素的結尾。標籤中間包圍的就是這個元素的內容，以上面的例子來說，內容就是 My cat is very cute. 這一句文字。
起始標籤 + 內容 + 結束標籤 所組成的區塊我們稱之為一個 HTML 元素，<p>My cat is very cute.</p> 這一整串就表示一個 HTML 段落元素。
前面有提到 HTML 文件結構是一種巢狀結構，而 HTML 元素裡面可以放進其他的 HTML 元素，我們稱之為巢狀元素 (nesting element)。
例如下面這個句子：
<p>My cat is very cute.</p>
如果我們想 "強調" very cute，我們可以把 very cute 這幾個字加上強調的 strong 標籤 (在瀏覽器中會被顯示為粗體字)：
<p>My cat is <strong>very cute.</strong></p>
在瀏覽器中呈現的結果如下：
My cat is very cute.
要特別注意，巢狀標籤是一層接著一層的包覆，不同層的起始和結束標籤間不可以互相錯置。例如下面的寫法是錯誤的：
<p>My cat is <strong>very cute.</p></strong>
因為 strong 標籤是被用在 p 元素的內容中，所以整個 strong 元素包含它的起始和結束標籤，都必須「被包」在 p 標籤裡面，才能形成一個正確的巢狀關係。
有些 HTML 元素是不允許有[內容]的，我們稱之為空元素。
此外，空元素是沒有[結束標籤]的元素，像是圖片元素 <img>，例如我們可以用 img 標籤來顯示一張圖片：
<img src="/images/myphoto.png">
我們用 img 標籤的 src 屬性來指定圖檔的所在位址，但 img 元素本身沒有結束標籤，也沒有裡面的內容，因為圖片元素是直接把圖檔嵌在 HTML 網頁上。
有時候我們也稱空元素的標籤為自閉合標籤 (Self-closing Tag)。
https://developer.mozilla.org/zh-TW/docs/Glossary/Empty_element
HTML 標籤中還有所謂的屬性 (Attribute)，屬性是用來提供該標籤的額外資訊，屬性出現在[起始標籤]中，語法如下：
<tag attribute1="value2" attribute2="value2">
一個屬性是由屬性名稱、等號以及用雙引號包住的屬性值所組成，不同的屬性則是用空格分隔開。
像是前面提到的例子 <img src="/images/myphoto.png">，其中 src 就是 img 的屬性。
其實，屬性值你可以用雙引號 (double quotes "") 也可以用單引號 (single quotes '') 來包住，單雙引號對 HTML 屬性值是沒有差別的。這特性也可以被利用在如果屬性值中有引號，例如 <option value=""abc"> 這樣寫會造成瀏覽器解讀錯誤，誤將 value 當作是空的，但你可以改成這樣 <option value='"abc'> 寫就不會錯了。
**HTML 的「標籤名稱」或「屬性名稱」**的寫法是英文大小寫都可以 (case insensitive)，但常見且建議是固定使用小寫 (lowercase)。
推薦的標準寫法 <img src="123">
不推薦這種寫法 <IMG SRC="123">
標籤名稱、屬性名稱和屬性質之間的多餘空白或換行會被瀏覽器忽略，你可以用這個特性來做 HTML code 的編排，讓 HTML 程式碼比較容易閱讀。
例如：
<tag
attribute1="value2"
attribute2 = "value2"
>
和下面這樣子寫是一樣的：
<tag attribute1="value2" attribute2="value2">
但注意雙引號間的屬性值不能亂空白，標籤名稱或屬性名稱之間也不能亂空白，像下面這個就是錯誤的語法：
<t ag attribute1="val ue2" attr ibute2="value2">
在 HTML 文件最開頭的第一行，一定要寫上這一段 DOCTYPE：
<!DOCTYPE html>
本質上 DOCTYPE 不是一個 HTML 標籤，宣告 DOCTYPE 的用意是用來告訴瀏覽器 (browser) 這一份文件是屬於什麼文件類型 (Document Type Declaration, DTD)，現代網頁的 DOCTYPE 基本上都是用 <!DOCTYPE html> 來表示這是一份標準的 HTML5 文件。
沒宣告 DOCTYPE 或是宣告一個錯誤的 DOCTYPE，會造成瀏覽器無法預期的行為，像是渲染 (render) CSS 排版時怎麼和你想要的不太一樣，稱之為瀏覽器處於怪異模式 (Quirks mode) 下。
順便也來介紹一些舊時代常見的 DOCTYPE，你可能還會在一些網頁中看見這些寫法：
#＃ HTML <html> 標籤 (Tag)
HTML 網頁中一定有一個 (也只會有一個) <html> 標籤 (tag)
<html> 標籤是整份 HTML 文件的根元素 (root element)，整個網頁中所有的 HTML 元素都包含在 <html> 標籤裡面。
一份標準的 HTML 文件看起來的樣子：
<!DOCTYPE HTML>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
The content of the document
</body>
</html>
可以看見所有的 HTML 元素都是 <html> 的子元素，除了 [DOCTYPE]！
屬性對前端是非常重要的, 除了 Html本身有用到 最常使用的還是 Javascriipt
$('#').attr('src')....
所有的 Html 元素都有的屬性,我們稱作全域屬性 (global attributes)
可以在所有的元素中使用，以下我們將會一一介紹這些屬性。
id 元素唯一識別符號id 是用來設定 HTML 元素的唯一識別符號 (identifier)，每個 HTML 元素的 id 需要是在整份 HTML 文件中獨一無二 (unique) 不可重複的。
設定 id 有三種用途：
<a href="#myid"> 會跳到 <tag id="myid"> 元素處命名 id 可以用的字元有 ASCII 英文字、數字、底線 _、一槓 - 和點 .。
語法範例：
<p id="exciting">The most exciting paragraph on the page. One of a kind!</p>
class 元素類別名稱class 是用來設定 HTML 元素的類別名稱 (class names)，每一個 HTML 元素可以有多個類別，你可以用空格分隔 (space-separated) 開不同的類別名稱。
class 有兩種用途：
class 的命名規則是：
一個 A-Z 或 a-z 字開頭
接著這些任意的 A-Z a-z 0-9 - _ 字元
語法範例：
<p class="note editorial">Above point sounds a bit obvious. Remove/rewrite?</p>
style 用來直接設定該 HTML 元素的 CSS 樣式 (inline style)，而用 style 屬性設定的 CSS 優先權是最高的，會蓋過寫在 []或[外部樣式表]中的樣式。
語法範例： tag style. > <style></style>. > 外部引入
<p style="padding: 15px; line-height: 1.5; text-align: center; border: 3px solid #000;">
Hello World!
</p>
title 用來提供關於該 HTML 元素的額外資訊，當滑鼠移動到該元素上方時，瀏覽器也會出現一個 tooltip 顯示 title 的內容。
語法範例：
<div title="hello~~">Hover Me!</div>
data-*HTML 元素的資料屬性 data-* 是用來存放自定義的資料 (custom data attributes)，通常是用來和 JavaScript 存取互動。
定義一個資料屬性 data-* 包含兩個部分：
語法範例：
<img src="ship.png"
data-ship-id="324"
data-weapons="laserI laserII"
data-shields="72%"
data-x="414354"
data-y="85160"
data-z="31940">
tabindextabindex 設定一個數字，用來設定該 HTML 元素可以被聚焦 (focusable)，當你按 tab 鍵時也可以跳到該元素上，而 tabindex 數字大小的順序也代表當你按 tab 鍵時的跳躍順序。
tabindex 如果設定一個負數，表示該元素可以被聚焦，但不參與鍵盤鍵 (例如 tab) 的瀏覽切換。
語法範例：
<a href="https://www.fooish.com/" tabindex="2">Fooish</a>
<a href="https://www.google.com/" tabindex="1">Google</a>
<a href="https://www.facebook.com/" tabindex="3">Facebook</a>
contenteditablecontenteditable 用來設定該元素的內容是否可以被使用者編輯 (editable)。
contenteditable 有兩種屬性值：
true: 表示元素可以被編輯false: 表示元素不可以被編輯 (預設值)語法範例：
<div contenteditable="true">
<p>點我看看是不是可以編輯</p>
</div>
dir 文字方向dir 用來設定語言文字的方向順序，dir 有這些值：
ltr: 從左到右 (left to right)，像是英文rtl: 從右到左 (right to left)，像是阿拉伯文auto: 讓瀏覽器自動判斷，預設值draggable 可以被拖曳的元素draggable 指定該元素可以被拖曳 (drag and drop)，通常是會搭配 JavaScript 使用。
draggable 有兩種屬性值：
true: 表示元素可以被拖曳false: 表示元素不可以被拖曳 (預設值)語法範例：
<p draggable="true">This is a draggable paragraph.</p>
hidden 隱藏元素hidden 用來設定該 HTML 元素是否要被從畫面中隱藏起來，通常讓使用者滿足某些條件後才能看見。hidden 是一個布林屬性 (boolean)。
語法範例：
<p>你看得見我</p>
<p hidden>你看不見我</p>
accesskey 指定鍵盤快捷鍵accesskey 用來生成鍵盤快捷鍵，讓該 HTML 元素可以快速被訪問，而 accesskey 的屬性值是指定一個字元 (英文字或數字)。
語法範例：
<button accesskey="s">Stress reliever</button>
而不同的作業系統或瀏覽器，使用快捷鍵的方式不太一樣：
Firefox: Alt + Shift + key
Edge: Alt + key
Internet Explorer: Alt + key
Google Chrome: Alt + Shift + key
Safari: Alt + key
Opera: Alt + key
Firefox: Control + Option + key 或 Control + Alt + key
Google Chrome: Control + Alt + key
Safari: Control + Alt + key
Opera: Control + Alt + key
lang lang 是用來聲明你網頁上的文字 主要是使用甚麼語言寫的
lang 可以幫助銀幕處理器( screeb reader ) 能夠正確的唸出文字
也能幫助搜尋引擎理解你的文字內容
lang 用來提供網頁內容的語言資訊，聲明一個 HTML 元素的內容是用什麼語言 (language)，可以用來幫助搜尋引擎 (Google) 判斷內容、用在 CSS 選擇器等。
<html lang="en">
<p>This paragraph is English.</p>
<p lang="en-GB">This paragraph is defined as British English.</p>
<p lang="fr">Ce paragraphe est défini en français.</p>
</html>
常見的 lang 設定：
en
fr
zh-Hant
zh-Hant-TW
zh-Hant-CN
zh-Hant-HK
zh-Hant-MO
zh-Hant-SG
zh-Hans
zh-Hans-TW
zh-Hans-CN
zh-Hans-HK
zh-Hans-MO
zh-Hans-SG
zh-hakka
可以看出 lang 的值的規則是用 - 分開表示 "語言-字體-地區" (language-script-region)：
spellcheck 自動即時拼字檢查控制瀏覽器要不要對內容進行即時拼字檢查，通常是用在可以被編輯 (editable) 的元素上，像是 , 或 contenteditable="true" 的元素。
spellcheck 有兩種屬性值：
true: 表示開啟拼字檢查false: 表示關閉拼字檢查語法範例：
<p contenteditable spellcheck="true">This exampull will be checkd fur spellung when you try to edit it.</p>
translate 聲明內容是否需要被翻譯translate 用來聲明該 HTML 元素的內容需不需要被翻譯，這屬性會被運用在例如 Google Translate 做網頁翻譯時。
translate 有兩種屬性值：
yes: 表示需要被翻譯no: 表示不需要被翻譯語法範例：
<footer>
<small>© 2020 <span translate="no">BrandName</span></small>
</footer>
HTML 註解 (comment) 標籤 (tag) 是用來可以寫註解在你的 HTML 文件之中，註解會被瀏覽器 (browser) 忽略不會顯示在螢幕畫面上。通常註解是用來說明或備註你的 HTML 程式碼，讓你一陣子後回頭看或其他協同工作者可以知道你當初為什麼這一個地方的 HTML 會這樣子寫。
HTML 註解符號是用 <!-- 和 --> 前後包住你的註解，舉個例子：
<!-- 這裡是註解文字，只會在 HTML code 裡看到，不會出現在畫面 -->
iThome鐵人賽
看影片追技術