一、网页基本标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基本标签学习</title>
</head>
<body>
<!--1.标题标签-->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<!--2.段落标签-->
啊
啊 啊
啊 啊啊
啊啊啊啊啊
<p>啊</p>
<p>啊 啊</p>
<p>啊 啊啊</p>
<p>啊啊啊 啊</p>
<!--3.换行标签-->
啊<br/>
啊 啊<br/>
啊 啊啊<br/>
啊啊啊啊啊<br/>
<!--4.水平线标签-->
<hr/>
<!--5.粗体、斜体-->
<h1>字体样式</h1>
粗体：<strong>学习Java</strong> <br/>
斜体：<em>学习Java</em>
<hr/>
<!--6.特殊符号-->
空 格<br/>
空 格<br>
大于号：>
小于号：<<br/>
©版权所有<br/>
其他特殊字符可以通过&+字母查询
</body>
</html>
二、多媒体标签
网页中的多媒体元素以图片居多，所以主要关注图片标签的使用：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>多媒体(图片、音频、视频)标签</title>
</head>
<body>
<!--图片标签-->
<!--src、alt必填-->
<img src="../resource/images/year-2022.jpg" alt="2022" title="2022冲">
<!--音频标签-->
<!--src必填、controls(显示音频控制)-->
<audio src="../resource/audios/毛不易%20-%20平凡的一天.flac" controls></audio>
<!--视频标签-->
<!--src必填、controls(显示视频控制)-->
<video src="../resource/videos/1.mp4" controls></video>
</body>
</html>
三、超链接标签
超链接标签很重要！！！
-
文本或图像超链接
-
锚链接
-
功能性链接
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>超链接标签学习</title>
</head>
<body>
<!--锚链接顶部标记-->
<a name="top">顶部</a>
<hr/>
<!--a 超链接标签
href：必填，表示跳转到哪个网页
target:表示网页在哪里打开（当前标签or新标签）,默认当前标签
-->
文本超链接<br/>
<a href="1.第一个网页.html" target="_self" a>点击我跳转到网页“第一个网页”</a>
<a href="3.多媒体标签.html" target="_blank">点击我跳转到网页“多媒体标签”</a>
<hr/>
图片超链接<br/>
<a href="1.第一个网页.html">
<img src="../resource/images/year-2022.jpg" alt="" title="跳转到第一个网页">
</a>
<p>
往
</p>
<p>
下
</p>
<p>
翻
</p>
<p>
还
</p>
<p>
有
</p>
<p>
知
</p>
<p>
识
</p>
<p>
点
</p>
<p>
！
</p>
<hr/>
<!--a 锚标签-->
<!--可以跳到其他网页中的标记位置-->
<a href="#top">回到顶部</a>
<hr/>
<!--功能性标签
邮件链接
QQ链接:百度QQ推广，登录，点击推广工具，复制链接代码
-->
<a href="mailto">邮箱地址</a>
<br/>
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=个人QQ号&site=qq&menu=yes">
<img border="0" src="生成代码" alt="点击这里给我发消息" title="点击这里给我发消息"/>
</a>
</body>
</html>
四、列表和表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表和表格标签</title>
</head>
<body>
<!--1.列表标签-->
<!--有序列表ol-->
有序列表<br/>
<ol>
<li>第一条</li>
<li>第二条</li>
<li>第三条</li>
</ol>
<!--无序列表ul-->
无序列表<br/>
<ul>
<li>无序</li>
<li>无序</li>
<li>无序</li>
</ul>
<!--自定义列表dl-->
自定义列表<br/>
<dl>
<dt>相关知识</dt>
<dd>知识1</dd>
<dd>知识2</dd>
<dd>知识3</dd>
<dt>关于我们</dt>
<dd>我啊</dd>
<dd>你</dd>
<dd>找不到</dd>
</dl>
<hr/>
表格标签<br/>
<!--2.表格标签
tr:行
td:列
-->
<table border="1px">
<tr>
<!--colspan:跨列-->
<td>1-1</td>
<td colspan="2">1-2</td>
</tr>
<tr>
<!--rowspan:跨行-->
<td>2-1</td>
<td>2-2</td>
<td rowspan="2">2-3</td>
</tr>
<tr>
<td>3-1</td>
<td>3-2</td>
</tr>
</table>
</body>
</html>