引言
HTML（HyperText Markup Language）是构建网页和网页应用的标准标记语言。它由一系列的元素（elements）组成，这些元素通过标签（tags）来定义。下面是一些HTML的基础标签，它们对于创建网页至关重要：
第一批标签：div、p、h、span、hr、br
<!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>
<!-- div 块元素 单独一块 内部嵌套任何标签 -->
<div>
<!-- h 标题标签 -->
<h1>第一块的一级标题</h1>
<hr>
<h2>第一块的二级</h2>
<!-- hr 分割线 -->
<hr>
<h3>第一块的三级</h3>
<!-- p 段落标签 内部一般为文本 -->
<p>我是段落1<span>标签</span></p>
<p>段落2,<span>你好</span><br>我是段落2</p>
<br>
<p>段落3,<span>你好</span>我是段落3</p>
<div>
<h1>第二块的一级标题</h1>
<p><span style="position: relative;">你好</span>,我是第二块的段落标签</p>
</div>
</div>
</body>
</html>第二批标签：b、strong、i、em、u、del、sup、sub
<!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>
<div>
<h1>字体相关标签</h1>
<span>普通文本</span>
<b>加粗字体</b>
<strong>加粗字体</strong>
<i>斜体</i>
<em>斜体</em>
<u>下划线</u>
<del>删除线</del>
<sup>2</sup>
<sub>3</sub>
<!-- sub 下标 sup 上标 -->
H<sub>2</sub>Co<sub>3</sub> = 2H<sup>+</sup>Co3<sup>2-</sup>
</div>
</body>
</html>第三批标签：li、ol、ul、dl
<!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>
<div>
<h1>无序列表</h1>
<ul>
<li>我是1</li>
<li>我是2</li>
<li>我是3</li>
</ul>
</div>
<div>
<h1>有序列表</h1>
<ol>
<li>有序1</li>
<li>有序2</li>
<li>有序3</li>
<li>有序4</li>
<li>有序5</li>
</ol>
</div>
<div>
<h1>自定义列表</h1>
<dl>
<dt>标签头</dt>
<dd>自定义1</dd>
<dt>标签头</dt>
<dd>自定义2</dd>
<dt>标签头</dt>
<dd>自定义3</dd>
</dl>
</div>
<div>
<h1>段落1</h1>
<p></p>
<p></p>
<p></p>
段落1
<div>
结尾
<div>
<h1>隔离</h1>
</div>
</div>
</div>
<span>span1</span><span>span2</span><span>span3</span><span>span4</span><span>span5</span>
</body>
</html>第四批标签：table、tr、th、td
<!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>
<div>
<table border="10" width="70%" align="center">
<tr>
<th>表头单元格1</th>
<th>表头单元格2</th>
<th>表头单元格3</th>
</tr>
<tr>
<td colspan="2">普通单元格1</td>
<td>普通单元格2</td>
</tr>
<tr>
<!-- rowspan属性可以合并同行 -->
<!-- colspan属性可以合并同列 -->
<td>普通单元格1</td>
<td rowspan="2" colspan="2">
<table border="1" width="100%">
<tr>
<td>列1</td>
<td>列2</td>
</tr>
<tr>
<td>列1</td>
<td>列2</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>普通单元格1</td>
</tr>
</table>
</div>
</body>
</html>第五批标签：src、video、audio、img、a、href
<!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>
<hr>
<hr>
<hr>
<hr>
<span id="666">666</span>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<span id="888">888</span>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<span class="999">999</span>
<div>
<h1>声音</h1>
<audio src="./audio/bg.mp3" controls></audio>
</div>
<div>
<h1>视频</h1>
<video src="./video/你的名字-2016_BD日粤双语中字.mp4" controls></video>
</div>
<div>
<h1>图片</h1>
<img src="./image/悟空.png" alt="",width="400">
<img src="https://i-blog.csdnimg.cn/direct/6abced731e9c4d359dea0de8d72dfa79.jpeg" alt="加载失败">
<img src="./image/悟空.png" alt="",width="400">
</div>
<div>
<h1>超链接</h1>
<a href="./2.第一批标签.html">hello</a>
<a href="www.qq.com">qq</a>
<a href="#666">锚点666</a>
<a href="#888">锚点888</a>
<a href="#999">锚点999</a>
</div>
</body>
</html>第六批标签：iframe src
<!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>
<div>
<h1>框架嵌套标签</h1>
<iframe src="2.第一批标签.html" frameborder="0" width="50%" height="300"></iframe>
<iframe src="3.第二批标签.html" frameborder="0" width="50%" height="300"></iframe>
<iframe src="https://blog.csdn.net/dudnf?spm=1010.2135.3001.5343" frameborder="0" width="50%" height="300"></iframe>
<iframe src="https://im.qq.com/index/" frameborder="0" width="50%" height="300"></iframe>
</div>
</body>
</html>第七批标签：from input select textarea
<!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>
<form action="http://httpbin.org/post" method="post">
<div>
<label for="inp">用户名</label><input name="username" required placeholder="请输入名字" id="inp" type="text">
</div>
<div>
<label for="pwd">密码</label><input name="password" id="pwd" required placeholder="请输入密码" type="password">
</div>
<div>
<span name="sex">性别</span>
男<input value="man" type="radio" checked name="sex">
女<input value="women" type="radio" name="sex">
</div>
<div>
<span name="hobby">爱好</span>
篮球<input type="checkbox" checked value="basketball">
足球<input type="checkbox" value="football">
台球<input type="checkbox" value="taiball">
</div>
<div>
<span>年纪</span>
<input name="age" type="range" min="0" max="100" step="1">
</div>
<div>
<span>颜色</span>
<input name="color" type="color">
</div>
<div>
<span>上传文件</span>
<input name="file" type="file">
</div>
<!-- <div>
<span>按钮</span>
<input type="button" value="播放" href="./audio/bg.mp3">
</div> -->
<div>
<span>邮件</span>
<input type="email" value="2241354684@qq.com">
</div>
<div>
<span>时间</span>
<input name="time" type="datetime-local">
</div>
<div>
<span name="adress">居住地址</span>
<select>
<option value="henan">河南</option>
<option value="shangqiu">商丘</option>
<option value="zhengzhou" selected>郑州</option>
</select>
</div>
<div>
<span name="langue">学习语言</span>
<select multiple>
<option value="python" selected value="">python</option>
<option value="java">java</option>
<option value="c">c</option>
</select>
</div>
<div>
<span>留言</span>
<textarea name="text" id="" cols="100" rows="10"></textarea>
</div>
<div>
<input type="submit" value="注册">
<input type="reset" value="重置">
</div>
</form>
</body>
</html>以上七个就是html基本的标签了！感谢大家观看！
2021
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
