一、文档结构标签
<html>：网页的根标签 ，嵌套包含所有标签。
<head>：头标签，包含文档的元数据用于编写网页的修饰内容，附加信息。
<body>：身体标签，用于编写展示内容，用户可以看见 或者可以交互内容。
<meta>：元标签 ，没有结束标签
二、框架标签
<div>：块级元素
<h1> 到 <h6>：定义标题，<h1> 是最高级别的标题
<p>：定义一个段落。
<span>：隔离样式
<br>：强制换行
<hr>：分割线
例子如下：
<!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><span>一级</span>标题</h1>
<hr>
<h2><span>二级</span>标题</h2>
<hr>
<h3><span>三级</span>标题</h3>
<hr>
<h4><span>四级</span>标题</h4>
<hr>
<h5><span>五级</span>标题</h5>
<hr>
<h6><span>六级</span>标题</h6>
<hr>
<p>段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落<br>段落段落段落段落段落段落段落段落段落段落段落段落段落段落</p>
</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>
<p>加粗<b>加粗</b></p>
<p>斜体<i>斜体</i></p>
<p><u>下划线</u></p>
<p><del>中划线，删除线</del></p>
<p>2h<sub>2</sub>o=2h<sub>2</sub>+o<sub>2</sub></p>
</body>
</html>效果如下：
四、列表标签
<ol>：有序列表
<ul>：无序列表
<li>：列表项，独占一行，不能单独存在
<dl>：自定义列表
<dt>：列表项目，没有缩进
<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>
<div>
<h1>无序列表</h1>
<ul>
<li>无序列表1</li>
<li>无序列表2</li>
<li>无序列表3</li>
</ul>
<h1>有序列表</h1>
<ol>
<li>有序列表1</li>
<li>有序列表2</li>
<li>有序列表3</li>
</ol>
<h1>自定义列表</h1>
<dl>
<dt>项目1</dt>
<dd>项目1说明</dd>
<dt>项目2</dt>
<dd>项目2说明</dd>
<dt>项目3</dt>
<dd>项目3说明</dd>
</dl>
</div>
</body>
</html>效果如下：
五、表格标签
<table>：定义表格
属性：
border：边框
cellpadding：内部单元格的高度
cellspacing：单元格之间的距离
align：对齐方式
<tr>：定义表格行
<th>：定义表头单元格
<td>：定义表格单元格
属性
colspan：合并同一行中的多列
rowspan：合并同一列中的多行
例子如下：
<!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>
<table border="10" cellpadding="10" cellspacing="5" align="center" width="80%">
<tr>
<th>表头单元格1</th>
<th>表头单元格2</th>
<th>表头单元格3</th>
</tr>
<tr>
<td colspan="2">普通单元格1</td>
<td>普通单元格2</td>
</tr>
<tr>
<td>普通单元格1</td>
<td colspan="2" rowspan="2">
<table border="2" 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>
</body>
</html>效果如下：
六、媒体标签
<video>：视频
<audio>：音频
<img>：图片
<a>：超链接
例子如下：
<!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>
<hr>
<span id="111">111</span>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<div>
<h1>声音</h1>
<audio src="./audio/gaming.mp3" controls></audio>
</div>
<div>
<!-- control显示控件 -->
<h1>视频</h1>
<video src="./video/1.mp4" controls></video>
</div>
<div>
<h1>图片</h1>
<!-- alt:当图片加载不出来时显示的内容 -->
<img src="./img/1.jpeg" alt="" width="200px">
</div>
<div>
<h1>超链接</h1>
<!-- a 的属性href中可以放其他网站的链接，也可以放本网站其他页面 也可以弄锚点，但要在要跳转到的地方给他个id,然后在href中输入#id -->
<a href="http://www.baidu.com">百度</a>
<a href="./2.第一批标签.html">第一批标签</a>
<a href="./3.第二批标签.html" target="_blank">第二批标签</a>
<a href="#111" >锚点1</a>
</div>
</body>
</html>效果如下：
当点击下方的百度时，该页面就会变成百度页面，当点击第二批标签时，会打开新的页面来显示第二批标签的效果页面，当点击锚点1时，就会跳转到指定的位置
七、框架嵌套标签
<iframe>：当前页面内嵌入另一个 HTML 页面
例子如下：
<!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>
<p>可以嵌套其他页面</p>
<!-- frameborder：边框 -->
<iframe src="./2.第一批标签.html" frameborder="0" width="40%" height="400"></iframe>
<iframe src="https://csdn.net" frameborder="0" width="40%" height="400"></iframe>
</div>
</body>
</html>效果如下：
八、表单标签
<form>：表单标签
属性
action：提交的目标地址，没有填写内容 代表当前页面地址
method：提交方法
<input>：创建不同类型的输入控件，允许用户输入数据
type="text"：创建一个单行文本输入框。type="password"：创建一个密码输入框，输入的内容会被隐藏。type="file"：创建一个文件上传控件。type="radio"：创建一个单选按钮type="checkbox"：创建一个复选框。type="range"：创建一个滑动条，允许用户选择一个值的范围。type="submit"：创建一个提交按钮，用于提交表单。type="reset"：创建一个重置按钮，用于重置表单中的所有控件到默认值。
<select>：创建下拉选择菜单。它允许用户从多个选项中选择一个或多个
<option>：选项
multiple：如果添加此属性，允许用户选择多个选项。
<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:提交目标地址 没有填写内容代表当前网页地址(如果没有提交地址，默认提交到当前网页)
method:提交方法
get:参数以"?a=b&c=d"格式拼接到请求地址后面，不安全
post:参数在网络的载荷数据中，安全并且数据量大
-->
<form action="http://httpbin.org/post" method="post">
<!--
表单域:提交的各种信息
input
select
textarea
-->
<div>
<!--
required：必须填
placeholder：提示信息
-->
<label for="un">用户名</label><input required placeholder="请输入名字" name="username" id="un" type="text">
</div>
<div>
<label for="pwd">密码</label><input required placeholder="请输入密码" name="password" id="pwd" type="password">
</div>
<div>
<span>性别</span>
<!-- radio：单选框 -->
<!-- name:确保是单选 -->
<label for="woman">女</label><input name="sex" value="woman" id="woman" type="radio">
<!-- checked:默认选择 -->
<label for="man">男</label><input name="sex" value="man" id="man" type="radio" checked>
</div>
<div>
<span>爱好</span>
<!-- checkbox：复选框 -->
<label for="footbal">足球</label><input id="footbal" name="hobby" value="footbal" type="checkbox">
<label for="basketball">篮球</label><input id="basketball" name="hobby" value="basketball" type="checkbox" checked>
</div>
<div>
<span>年纪</span>
<!-- range:滑动 -->
<input type="range" min="0" max="100" step="1" name="age">
</div>
<div>
<span>喜爱颜色</span>
<input type="color" name="color">
</div>
<div>
<span>附件</span>
<input type="file" name="file">
</div>
<div>
<span>居住地址</span>
<select name="address">
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<!-- selected:默认选择 -->
<option value="guangzhou" selected>广州</option>
</select>
</div>
<div>
<span>学习语言</span>
<!-- multiple:为了默认可以多选 -->
<select name="lang" multiple>
<option value="python">python</option>
<option value="java" selected>java</option>
<option value="c++" selected>c++</option>
</select>
</div>
<div>
<span>交友宣言</span>
<!-- textarea：多行输入框 -->
<textarea name="info" cols="30" rows="10"></textarea>
</div>
<!--
表单按钮：input
type="submit":提交信息，表单域内容要有name才会提交（选择的需要写value，输入的不需要写value）
type="reset"：重置内容
-->
<div>
<input type="submit" value="注册">
<input type="reset" value="清空">
</div>
</form>
</body>
</html>效果如下：
