01、基礎元素 <h1/2/3/4/5/6>標題 從大h1到小h6，塊元素，有6級標題。是一種標題類語義標簽，內置了字體、邊距樣式。 合理使用h標簽，主要用於標題，不要為了加粗效果而隨意使用。 h1用於最重要的標題內容，會被搜索引擎使用，用得太多影響SEO效果。 <h1 align="center" ...
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="楷體" |
| |
字體大小，從 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>
<strong>粗體strong</strong>
<i>斜體i</i>
<em>em標簽</em>
<u>下劃線u</u>
<del>刪除線del</del>
<sub>下標sub</sub>
<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
  更多相關文章
一周排行
 所有分類
|