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>

<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" />

<ul-li/ol-li>列表标签

列表都是块元素，li中可以放任何东西，常用来组织列表相关内容，如商品列表、树形结构、导航等。

• 无序列表<ul><li></li></ul>：unordered list，li为列表项，属性type可定义符号样式，默认disc（实心圆）。
• 有序列表<ol><li></li></ol>：ordered list，li为列表项，属性type可定义排序样式，默认1（数字）。

<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>
  <dt>人物简介：</dt>
  <dd>一代诗仙</dd>
  <dt>代表作：</dt>
  <dd>仰天大笑出门去，下楼排队做核酸</dd>
</dl>

<blockquote>/<q>引用元素

语义化引用元素，代表其中的文字是引用内容。

⚠️注意：默认样式不同浏览器不同，所以最好通过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 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...>语义元素

表示特点语义的元素，默认提供了一些样式（吃藕丑）。