01、基礎元素

<h1/2/3/4/5/6>標題

從大h1到小h6，塊元素，有6級標題。是一種標題類語意標籤，內建了字型、邊距樣式。

• 合理使用h標籤，主要用於標題，不要為了加粗效果而隨意使用。
• h1用於最重要的標題內容，會被搜尋引擎使用，用得太多影響SEO效果。

<h1 align="center">標題標籤h1/2/3/4/5/6：一級標題</h1>
<h2>2級標題</h2>
<h3>3級標題</h3>
<h4>4級標題</h4>
<h5>5級標題</h5>
<h6>6級標題</h6>

屬性	描述	值
align	標題的水平對齊方式	left、center、right

<p>段落元素

段落元素<p>內容</p>（**paragraph **/ˈpærəɡrɑːf/ 段落、分段）塊元素，表示一個內容段落，前後自動換行，段落之間會有間隙（預設margin上、下=1em），比<br>的行間距更大。

<p align="left">段落文字1</p>
<p align="center">段落文字2<br/>012</p>
普通文字1，用br換行<br>普通文字1

<br>換行

換行元素（Break）：<br>，單標籤，預設行間距。HTML中不識別輸入的回車換行，需用<br>標籤換行。

<hr>水平線

水平線元素：<hr>，單標籤，有顏色color、長度width、粗細size、對齊align等屬性，CSS中可用border設定樣式。

<br>
<hr width="80%" color="green" align="left" size=1 />
<hr width="80%" color="green"  />
<hr width="300px" color="red" size="3" />

屬性	描述	值
color	線顏色	顏色
width	寬度	畫素、百分比
size	線粗細	整數，畫素
align	水平對齊方式，	left、center、right

<ul-li/ol-li>列表標籤

列表都是塊元素，li中可以放任何東西，常用來組織列表相關內容，如商品列表、樹形結構、導航等。

• 無序列表<ul><li></li></ul>：unordered list，li為列表項，屬性type可定義符號樣式，預設disc（實心圓）。
• 有序列表<ol><li></li></ol>：ordered list，li為列表項，屬性type可定義排序樣式，預設1（數位）。

屬性	描述	值/範例
type	序號型別	無序列表：disc=實心圓、square=方塊、circle=空心圓 有序列表：1=數位、a/A=字母、i/I=阿拉伯數位
start	有序列表：序號開始的值，預設1	<ol type="1" start="4">
reversed	有序列表：倒序排列	<ol type="1" reversed >
<li>的屬性value	有序列表：設定序號值，會影響後面	<li type="I" value="5">

<ul type="disc">            		<!-- type可定義符號樣式，預設disc=實心圓，可自定義樣式取代-->
  <li type="square">l1    			<!--square=方塊-->
    <ul><li>l1的巢狀子節點</li></ul>
  </li>            
  <li type="circle">l2</li>			<!--circle=空心圓-->
  <li>l3</li>
</ul>
<ol type="1">           <!-- type可定義排序樣式，預設1=數位-->
  <li type="a">l1</li> 	<!-- a=小寫字母排序-->
  <li type="A">l2</li> 	<!-- A=大寫字母排序-->
  <li type="i">l3</li> 	<!-- i=小寫阿拉伯字母排序-->
  <li type="I">l4</li> 	<!-- I=大寫阿拉伯字母排序-->
  <li>l5</li>
</ol>

• 無序標籤、有序標籤可以多層（相互）巢狀。
• 列表項中的內容可以是文字，也可以是其他標籤，如圖片img、a標籤。
• 使用場景：新聞列表，導航按鈕。
• list-style-type：在css中設定列表符號樣式，如ul li{list-style-type:disc} ``ol li{}，列舉值-菜鳥教學。
  • disc、circle...：實心、空心符號
  • decimal...：數位

⌨️快捷鍵（VSCode）：標籤名*數量>子標籤名*數量，快速輸入多組父子標籤，加大括號則為標籤中內容。ul>li*3：快速輸入ul標籤+3組子li標籤。

<dl/dt/dd>語意化描述列表

作用同<ul/li>類似，通常用於展示詞彙表或者後設資料 (鍵 - 值對列表)，塊元素。JD首頁的分類導航就是用的<dl/dt/dd>結構。

元素/屬性	描述
<dl>	description list，描述列表，包含多組<dt>、<dd>
<dt>	description term( /tɜːrm/ 術語，項 )描述術語（標題），<dl>的子元素
<dd>	description definition(/ˌdefɪˈnɪʃn/，定義)描述內容，<dl>的子元素，放到<dl>後面，用來描述<dt>。預設樣式左縮排：margin-inline-start: 40px

<dl>
  <dt>人物簡介：</dt>
  <dd>一代詩仙</dd>
  <dt>代表作：</dt>
  <dd>仰天大笑出門去，下樓排隊做核酸</dd>
</dl>

<blockquote>/<q>參照元素

語意化參照元素，代表其中的文字是參照內容。

元素/屬性	描述
<blockquote>塊元素	塊級參照元素(quote /kwoʊt/ 參照、引文)，預設會增加縮排，一般都會加上額外的自定義樣式。
cite	(/saɪt/ 參照)標註引文相關資源的url地址或相關解釋資訊，但並不會顯示
<q>行內元素	行內參照行內元素，預設樣式是用偽元素新增了引號「」
cite	同上塊參照

⚠️注意：預設樣式不同瀏覽器不同，所以最好通過css統一樣式。

<style>
  blockquote {
    font-size: 1rem;
    color: #999;
    border-left: .2rem solid #dfe2e5;
    margin: 1rem 0;
    padding: .25rem 0 .25rem 1rem;
  }
</style>
<div>
  <blockquote>
    塊參照blockquote文字<q>行內參照q</q>
  </blockquote>
  <q>行內參照q</q>
</div>

<span/font/b/i/u/del>文字元素

針對文字內容的常規元素。除了pre是塊元素，其他都是行內元素。文字標籤一般會巢狀在<p>標籤中使用，實現不同語意/效果。

元素/屬性	描述	值/範例
<span>	（ /spæn/）無特定含義，是用來組織檔案的行內元素（行內容器），外觀取決於css	<span>span內容</span>
<font>	設定文字字型樣式的文字元素，文字在標籤裡
face	字型型別，值為字型名稱	face="楷體"
size	字型大小，從 1 到 7 的數位，預設3。不同於字號，已廢棄不推薦使用。	推薦css代替
color	字型顏色	顏色
<pre>塊元素	預格式的文字（predefine /ˈpriːdɪˈfaɪn/ 預定義），保留空格、換行符，預設等寬字型。只能包含文字/行內元素，不能再包含其他塊元素了。
<b>	粗體樣式（Bold），單純樣式效果
<strong>	粗體效果，加重語氣，更強調語意，語意在搜尋引擎、語音閱讀時有效
<i>	_斜體_樣式，單純樣式效果
<em>	_斜體_效果（emphasis/ˈemfəsɪs/強調），著重語氣，和i相比強調的語意
<u>	下劃線
<del>	刪除線
<sub>	下標(字型小)
<sup>	上標(字型小)

<span style="color:blue">span內容</span>
<font size="4" color="red" face="楷體">font標籤內容</font>
<pre style="color:yellowgreen;font-family:'楷體'; font-size: 18px;">pre字型內容   ，
  支援回車和空   格</pre>
<b>粗體b</b> &nbsp;
<strong>粗體strong</strong>&nbsp;
<i>斜體i</i>&nbsp;
<em>em標籤</em>&nbsp;
<u>下劃線u</u>&nbsp;
<del>刪除線del</del>&nbsp;
<sub>下標sub</sub>&nbsp;
<sup>上標sup</sup>

<abbr/address/code...>語意元素

表示特點語意的元素，預設提供了一些樣式（吃藕醜）。

元素/屬性	描述
<abbr>行內元素	縮略語或縮寫（abbreviation /əˌbriːviˈeɪʃn/ 縮略），預設樣式：下劃線（虛線）
title	用title解釋其含義，滑鼠提示顯示
<address>塊元素	聯絡方式的元素，如地址、URL，郵箱等。預設樣式：斜體+塊元素
<code>行內元素	計算機程式碼，預設樣式：等寬字型
<var>行內元素	變數名稱：數學表示式或程式設計中的變數，預設樣式：斜體
<kbd>行內元素	鍵盤、使用者輸入，預設樣式：monotype 字型
<samp>行內元素	計算機程式輸出，（sample，樣本）預設樣式：monotype 字型
<time>行內元素，IE