文本类标签
<h1>Hello World!!!</h1> <!--标题 h1最大-->
<h2>Hello World!!!</h2>
<h3>Hello World!!!</h3>
<h4>Hello World!!!</h4>
<h5>Hello World!!!</h5>
<h6>Hello World!!!</h6>
<p>Hello World!!!</p> <!--段落标签-->
<b>Hello World!!!</b> <!--加粗标签-->
<strong>Hello World!!!</strong> <!--加粗文本,具有强调效果-->
<i>Hello World!!!</i> <!--斜体标签-->
<em>Hello World!!!</em> <!--斜体,具有强调效果-->
<br /> <!--换行标签-->
<hr /> <!--水平线标签-->
<u>Hello World!!!</u> <!--下划线标签-->
<bdo dir="rtl">Hello World!!!</bdo>
<!--覆盖默认的文本方向
dir="ltr" :默认,可以不写,原样输出
dir="rtl" : 逆序输出
-->
<details style="width: 100px;">
<!--定义元素的细节,描述文档某个部分的细节
<summary></summary> 重新定义该细节的标题
-->
<summary>书籍大贩卖</summary>
<p>西游记</p>
<p>¥:1800</p>
<details>
<summary>商品贩卖</summary>
<p>HP电脑</p>
<p>¥:5000</p>
</details>
</details>
<details>
<summary>商品</summary>
<p>HP电脑</p>
<p>¥:5000</p>
</details>
CO<sub>2</sub> <!--下标-->
123<sup>10</sup> <!--上标-->
语义化标签
不起作用,只是是网页的代码风格更加规范
<div></div> <!--块级元素-->
<span></span> <!--行级元素-->
<header></header> <!--网页的头部-->
<section></section> <!--区块内容-->
<article></article> <!--独立的内容-->
<nav></nav> <!--网页导航-->
<aside></aside> <!--网页的侧边栏(侧边导航栏)-->
<footer></footer> <!--网页底部-->
<address></address> <!--定义文档或文章的作者/拥有者的联系信息-->
列表标签
<!--无序列表-->
<ul></ul>
<!--有序列表-->
<ol></ol>
<!--列表项-->
<li></li>
<!--自定义列表-->
<dl></dl> <!--定义列表-->
<dt></dt> <!--定义列表中的项目-->
<dd></dd> <!--定义对应项目的描述-->
超链接标签
<a href="" target=""></a>
<!--
href="" : 定义链接跳转的地址
: 可以设置锚点,href中填写 # + 需要跳转到的标签的id名
target="" :
定义在何处打开该链接, _blank,在新窗口打开
-->
多媒体标签
<!--表示任务的进度-->
<progress min="0" max="100"></progress>
<br />
<progress min="0" max="100" value="30"></progress>
<br />
<!--度量给定的范围,
min:表示最小值
max:表示最大值
value:表示当前值
low:表示低的最大范围
high:表示高的最大范围
optimum:表示该度量的最优值
注:当low,high,optimum三者都出现是,才能出现类似密码强度(三段不同颜色)似的度量
可用于密码强度-->
<meter mim="0" max="100" value="29"></meter>
<br />
<meter min="0" max="100" value="88" low="33" high="66" optimum="80"></meter>
<br />
<!--在图像上定义局部跳转-->
<img src="./img/003.png" usemap="#one" />
<map name="one" id="one">
<area shape="rect" coords="0,0,100,100" href="https://www.csdn.net" target="_blank" />
</map>
<br />
<!--加载音频-->
<audio src="./img/a.mp3" controls loop>
<source src="./img/a.mp3">
</audio>
<!--加载视频-->
<video controls loop poster="./img/003.png">
<source src="./img/movie.webm">
</video>
加载音频和视频的标签有些属性在有的浏览器中不支持,而在一些其他的浏览器支持
表格标签
<!--
<table></table> 定义表格
<tr></tr> 定义行
<th></th> 定义表头单元格
<td></td> 定义单元格
<thead></thead> 定义表格的头部
<tbody></tbody> 定义表格的主体
<tfoot></tfoot> 定义表格的底部
后三个标签在默认的情况下不影响表格布局,对表格代码起到分组的作用
-->
<table border="1" width="200px" cellspacing="0" cellpadding="10px">
<caption>你好</caption>
<tr>
<th>111</th>
<th>111</th>
<th>111</th>
</tr>
<tr>
<td>222</td>
<td>222</td>
<td>222</td>
</tr>
</table>