回顾下基础中的基础，很多标签基本没用过，都是div一把梭。但是至少要知道有这么个东西，也许以后能用到，很多标签对网站的SEO是有很大帮助的。
基础标签
<p class="t">h1 to h6 --- 定义HTML标题如下：</p>
<h1>h1标题</h1>
<h2>h2标题</h2>
<h3>h3标题</h3>
<h4>h4标题</h4>
<h5>h5标题</h5>
<h6>h6标题</h6>
<p class="t">p --- 段落：</p>
<p>我是段落1</p>
<p>我是段落2</p>
<p class="t">br --- 简单的换行，</p>
<div>我是文本我是文本<br>突然br换行</div>
<p class="t">hr --- 水平线 如下这条线</p>
<hr>
<p class="t">div --- 最常用的块标签，可定义文档中的分区或节</p>
<div style="display: flex;align-items: center;">
<div style="font-size:12px;width:50px;height:50px;background:pink;margin-right:5px;display:flex;align-items:center;text-align:center">
我是div内的文本
</div>
<div style="font-size:12px;width:50px;height:50px;background:pink;margin-right:5px;display:flex;align-items:center;text-align:center">
我是div内的文本
</div>
<div style="font-size:12px;width:50px;height:50px;background:pink;margin-right:5px;display:flex;align-items:center;text-align:center">
我是div内的文本
</div>
</div>
<p class="t">span --- 行内标签</p>
<p>我是段落内容<span style="font-size:20px;color:pink">我是span内容</span></p>
<p>header、footer、section、article、aside等为语义标签</p>
<header>我是header</header>
<footer>我是footer</footer>
<section>我是section</section>
<article>我是article</article>
<aside>我是aside</aside>
<p>details --- 展示内容细节</p>
<details>
<summary>点我展开</summary>
我是details内容
</details>
文本格式
<p class="t">abbr --- 定义缩写</p>
<p>鼠标指➡️<abbr title="Hyper Text Markup Language">HTML</abbr></p>
<p class="t">address --- 定义文档作者或拥有者的联系方式</p>
<address>
<ul>
<li>作者：mclwh</li>
<li>邮箱：123@123.com</li>
<li>电话：1234567890</li>
</ul>
</address>
<p class="t">b --- 定义粗体</p>
<p>我是普通段落</p>
<p><b>我是粗体段落</b></p>
<p class="t">bdi --- 与其它文本内容隔开</p>
<p><span class="red">تیز سمی</span>: 3没用bdi</p>
<p><bdi class="red">تیز سمی</bdi>: 3用了bdi</p>
<p class="t">bdo --- 改变文本的方向性</p>
注意若bdo标签后面是数字时，数字将会和bdo标签的文本按照dir属性设置的方向显示。
<p>hello <bdo dir="ltr">bdo</bdo> element</p>
<p>hello <bdo dir="rtl">bdo</bdo> element</p>
<p>hello <bdo dir="rtl">bdo</bdo> 11 element</p>
<p class="t">blockquote --- 定义长引用</p>
<blockquote cite="https://juejin.cn">我来自掘金</blockquote>
<p class="t">cite --- 用于引用作品</p>
作用似乎就是将文本变为斜体，不考虑语义化的话好像用处不大？
<p>The <a href="https://developer.mozilla.org/zh-CN/"><cite>MDN</cite></a> Web Docs site provides information about Open Web technologies.</p>
<p class="t">code --- 定义代码文本</p>
即在此标签的内容，应被当作是代码而不是文本。
<code>console.log("芜湖起飞")</code>
<p class="t">del --- 定义为被删除文本</p>
<p>我是普通文本，<del>我是被删除文本</del></p>
<p class="t">dfn --- 用于标记专业术语或短语。效果同cite</p>
<p class="t">em --- 定义强调文本</p>
<p>我是普通文本</p>
<em>我是强调文本</em>
<p class="t">i --- 定义斜体文本</p>
<p>我是普通文本</p>
<i>我是斜体文本</i>
<p class="t">ins --- 定义被插入文本</p>
<p>我是普通文本</p>
<ins>我是插入文本</ins>
<p class="t">kbd --- 定义键盘文本</p>
<p>我是普通文本</p>
<kbd>我是键盘文本</kbd>
<p class="t">mark --- 定义有记号的文本</p>
<mark>我是有记号的文本</mark>
<p class="t">meter --- 定义预定范围的度量，应用场景举例，密码强度</p>
<meter min="0" max="1" value="0.8" low="0.5"></meter>
<p class="t">pre --- 定义预格式文本</p>
<pre>我是pre内的文本</pre>
<p class="t">progress --- 定义进度条</p>
<progress value="10" max="100" ></progress>
<p class="t">q --- 定义短引用</p>
<q>我是短引用文本</q>
<p class="t">rp --- 定义若浏览器不支持ruby元素显示的内容</p>
<rp>我是rp文本</rp>
<p class="t">rt --- 定义ruby注释的解释</p>
<rt>我是ruby注释的解释文本</rt>
<p class="t">ruby --- 定义ruby注释</p>
<ruby>我是ruby注释的文本</ruby>
<p class="t">samp --- 定义计算机代码样本</p>
<samp>我是计算机代码样本</samp>
<p class="t">small --- 定义小号文本</p>
<small>我是小号文本</small>
<p class="t">strong --- 定义更为强烈的强调文本</p>
<strong>我是更为强烈的强调文本</strong>
<p class="t">sup --- 定义上标文本</p>
<p>我是普通文本<sup>我是上标文本</sup></p>
<p class="t">sub --- 定义下标文本</p>
<p>我是普通文本<sub>我是下标文本</sub></p>
<p class="t">time --- 定义时间和日期</p>
<time datetime="2023-07-03 17:05:49" itemprop="datePublished">2023-07-03 17:05:49</time>
<p class="t">var --- 文本变量，仅用于语义化</p>
<p>变量<var>x</var>的值是5</p>
表单
<form action="/submit" @submit="submit">
<p>fieldset会将里面的内容框起来</p>
<fieldset>
<legend>信息填写</legend>
<label for="username">点我输入账号：</label>
<input type="text" id="username">
<textarea name="" id="" cols="30" rows="10"></textarea>
</fieldset>
<select name="" id="">
<option value="1">男</option>
<option value="0">女</option>
</select>
<p>optgroup效果如下，嵌套在select里的option组</p>
<select placeholder="吃点什么" value="b">
<optgroup label="肉类">
<option value="a">鸡肉</option>
<option value="b">猪肉</option>
<option value="c">牛肉</option>
</optgroup>
<optgroup label="蔬菜">
<option value="d">生菜</option>
<option value="e">油麦菜</option>
</optgroup>
</select>
<p>datalist与input标签配合使用，效果如下</p>
<input id="myCar" placeholder="输入或选择品牌" list="cars" />
<datalist id="cars">
<option value="BMW"/>
<option value="Ford"/>
<option value="Volvo"/>
</datalist>
<p>keygen提交时会生成密钥对。将公钥留在客户端。私钥发到服务端</p>
<keygen id="keypair" name="keypair" required/>
<p>output用于表单计算的结果、或其它响应内容。</p>
<output>123123</output>
<button type="submit">提交</button>
</form>
链接&图像&媒体
<a href="https://juejin.cn">我是a标签，点我进掘金</a>
<p>map标签用于做图片映射，与img标签配合使用。映射的区域可点击跳转到对应链接。</p>
<img src="http://s2.sinaimg.cn/middle/69906822ga1e24ba6e971&690" width="444" height="395" alt="中国地图" usemap="#province"/>
<map id="province">
<area shape="rect" coords="80,112,110,125" alt="新疆" href="https://baike.baidu.com/item/%E6%96%B0%E7%96%86/132263?fr=aladdin">
<area shape="rect" coords="77,209,110,229" alt="西藏" href="https://baike.baidu.com/item/%E8%A5%BF%E8%97%8F/130045">
<area shape="rect" coords="150,176,185,192" alt="青海" href="https://baike.baidu.com/item/%E9%9D%92%E6%B5%B7/31638">
<area shape="rect" coords="197,236,235,261" alt="四川" href="https://baike.baidu.com/item/%E5%9B%9B%E5%B7%9D/212569">
<area shape="rect" coords="170,300,211,325" alt="云南" href="https://baike.baidu.com/item/%E4%BA%91%E5%8D%97/206207">
<area shape="circle" coords="227,200,8" alt="甘肃" href="https://baike.baidu.com/item/%E7%94%98%E8%82%83">
<area shape="circle" coords="240,177,5" alt="宁夏" href="https://baike.baidu.com/item/%E7%94%98%E8%82%83">
<area shape="circle" coords="285,133,8" alt="内蒙古" href="https://baike.baidu.com/item/%E7%94%98%E8%82%83">
</map>
<p class="t">canvas标签自行使用～～对我来说太复杂啦～～需配合库使用，如pixi.js babylon.js three.js</p>
<p>figure用于表示一组相关的多媒体内容，figcaption作为内容的标题或说明</p>
<figure>
<img src="https://fakeimg.pl/350x200/ff0000,128/000,255" alt="A beautiful image">
<figcaption>这是一张图片</figcaption>
</figure>
<p>audio用于音频播放器</p>
<audio controls>
<source src="audio.mp3" type="audio/mp3">
</audio>
<p>video用于视频播放器，</p>
<p>source则为audio&video提供多个媒体源。以便在不同设备或浏览器提供合适的内容。如某浏览器不支持mp4格式，那将会自动切换为webm格式</p>
<p>track为audio&video提供字母、标题或描述等文本轨道</p>
<video controls>
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
<track src="subtitles.vtt" kind="subtitles" srclang="en" label="English">
<track src="subtitles.vtt" kind="subtitles" srclang="fr" label="French">
</video>
<p>object标签用于向 HTML 文档中嵌入外部资源，如图像、视频、音频、Flash 动画等。它提供了一种在 HTML 页面中嵌入其他类型文件的方法。</p>
<object data="资源地址" type=""></object>
<p> 使用embed标签可以在网页中放置如mp3音乐、电影、SWF动画等多种多媒体内容。</p>
<embed src="" type="" contextmenu="">
列表
<p>无序列表</p>
<ul >
<li>无序列表1</li>
<li>无序列表2</li>
<li>无序列表3</li>
</ul>
<p>有序列表</p>
<ol>
<li>有序列表1</li>
<li>有序列表2</li>
<li>有序列表3</li>
</ol>
<p>描述列表,可用于术语和对应的描述，如下</p>
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets</dd>
<dt>JavaScript</dt>
<dd>A programming language</dd>
</dl>
表格
<p>table为表格的主体</p>
<p>caption为标题</p>
<p>colgroup包裹col</p>
<p>col定义每一列的样式，可添加span属性来表示应用到多少列。值为数字</p>
<p>thead定义头部、tbody定义主体内容、tfoot定义尾部</p>
<p>tr为行、td为列、th表示头部的列</p>
<table border="1">
<caption>我是表格</caption>
<colgroup>
<col style="background-color:red;"/>
<col style="background-color: green;"/>
<col style="background-color:yellow"/>
</colgroup>
<thead>
<tr>
<th>day1</th>
<th>day2</th>
<th>day3</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</tfoot>
</table>
其它
<p>dialog标签可以用来定义对话框或窗口，具体用法配合JS更丰富</p>
<dialog open>我是对话框</dialog>
<p>svg标签可以用来画icon</p>
<p>base标签定义页面所有链接的默认地址或目标</p>
<p>meta标签定义HTML的元信息</p>
已废弃
<p class="t">acronym</p>
<p class="t">applet</p>
<p class="t">basefont</p>
<p class="t">bgsound</p>
<p class="t">big</p>
<p class="t">blink</p>
<p class="t">center</p>
<p class="t">content</p>
<p class="t">dir</p>
<p class="t">font</p>
上述代码中用到的样式
.red{
color: red;
}
.t{
color: red;
font-weight: bold;
margin-top: 10px;
}
最好复制过去，自己亲自尝试下，看看不同标签的效果，更能体会到其作用。
欢迎各位补充～～
