一.html简单标签
h1-h6:标题标签
p:段落标签,自动换行,间距样式
div:块标签,自动换行,页面布局
span:间隔标签,个性化样式设置
hr:水平线
br:换行
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<p>段落标签</p>
<div>块标签</div>
<div>布局标签</div>
<br>
<span>间隔标签</span>
<hr>
二.个性化标签
strong和b——字体加粗
em和i——字体倾斜
u——下划线
del——删除线
sub——下标标签
sup——上标标签
ruby--rt——上标签
progress和meter——进度条
<strong>加粗标签</strong>
<b>加粗标签</b>
<em>倾斜标签</em>
<i>倾斜标签</i>
<u>下划线</u>
<del>删除线</del>
h<sub>a</sub>v
9<sup>2</sup>
<ruby>内容<rt>nrirong</rt></ruby>
<progress value="20" max="100"></progress>
<meter value="80" max="100"></meter>
三.列表标签
ul>li——无序标签,自动缩进,自动生成圆点
ol>li——有序标签,自动缩进,自动生成序号
dl>dt——没有缩进
dl>dd——自动缩进
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--列表标签-->
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<ol>
<li>q</li>
<li>a</li>
<li>z</li>
<li>x</li>
<li>s</li>
</ol>
<dl>
<dt>hu</dt>
<dt>li</dt>
<dt>wang</dt>
<dt>chen</dt>
<dt>ai</dt>
</dl>
<dl>
<dd>yi</dd>
<dd>xiang</dd>
<dd>he</dd>
<dd>xi</dd>
<dd>ni</dd>
</dl>
</body>
</html>
四.表格标签
table--属性:border边框,width宽度,height高度,cellspacing边框间隙,align位置属性
th--属性:align位置属性
tr--属性:align位置属性
td--属性:align位置属性,colspan左右合并,rowspan上下合并
<table border="1" width="50%" height="600" cellspacing="0" align="center">
<tr>
<th colspan="4">学生信息</th>
</tr>
<tr align="center">
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>总人数</th>
</tr>
<tr align="center">
<td>王五</td>
<td>男</td>
<td>22</td>
<td rowspan="3">3</td>
</tr>
<tr align="center">
<td>刘七</td>
<td>女</td>
<td>25</td>
</tr>
<tr align="center">
<td>张三</td>
<td>男</td>
<td>28</td>
</tr>
</table>
五.媒体标签
a--超链接:href-目标地址。有外部链接和内部链接
target--属性:_self——当前页面打开
target--属性:_black——新的页面打开
img图片:src-指向链接的图片地址,有外部地址和内部地址
width宽度,height高度,alt提示语
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<a href="./1.简单标签.html" target="_blank">
<img src="./image/1.webp" alt="图片丢失" width="500" height="500" >
</a>
<img src="./image/2.webp" alt="图片丢失" width="500" height="1000">
</body>
</html>
audio音频:src-带播放的音乐文件的目标地址,有外部链接但大部分是内部链接
controls-播放器的控制按钮
video视频:src-目标地址,有外部地址和内部地址
width-设置播放器的宽度
height-设置播放器的高度
contrils-播放器的控制按钮
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<audio src="./yinyue/1.mp3" controls></audio>
<br>
<br>
<br>
<video src="./shipin/mda-qe066hqzj8iv4wjw.mp4" controls></video>
<br>
<br>
<br>
<video src="https://vdept3.bdstatic.com/mda-qf86874js255agki/cae_h264/1718007964954836684/mda-qf86874js255agki.mp4?v_from_s=hkapp-haokan-nanjing&auth_key=1719834140-0-0-a55693729cd7f95409ddd75158299af5&bcevod_channel=searchbox_feed&cr=0&cd=0&pd=1&pt=3&logid=2540488862&vid=9667164270129610062&klogid=2540488862&abtest=101830_1-102148_1-17451_2-3000185_2" controls></video>
<br>
<br>
<br>
</body>
</html>
六.框架标签
iframe——页面的嵌套子页面:
src--指向子页面的内容
width--宽度
height--高度
frameborder--子页面的边框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>这是一个页面</p>
<iframe src="./6.音频和视频.html" width="500" height="500"></iframe>
</body>
</html>