文本标签
文本常用的HTML标签：
| 标签名 | 标签描述 |
|---|---|
| <h1></h1> | 标题标签 |
| <h6></h6> | 标题标签 |
| <p></p> | 段落标签 |
| <hr> | 换行标签 |
| <br> | 换行标签 |
标签栗子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>h1一级标题</h1>
<h2>h2二级标题</h2>
<h3>h3三级标题</h3>
<h4>h4四级标题</h4>
<h5>h5五级标题</h5>
<h6>h6六级标题</h6>
<p>p段落标签，每一个p标签都是一个段落</p>
<p>距离上一个p标签会自动换行</p>
<br/>
<p>br标签是手动换行</p>
<hr/>
<p>hr标签是横线换行</p>
</body>
</html>
运行效果如下：
列表标签
列表常用的HTML标签：
| 标签名 | 标签描述 |
|---|---|
| <ol></ol> | 有序列表标签 |
| <ul></ul> | 无序列表标签 |
| <li></li> | 列表项(有序无序通用) |
标签栗子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ol>
<li>ol是有序标签</li>
<li>ol是有序标签</li>
<li>ol是有序标签</li>
</ol>
<ul>
<li>ul是无序标签</li>
<li>ul是无序标签</li>
<li>ul是无序标签</li>
</ul>
</body>
</html>
运行效果如下：
超链接标签
超链接常用的HTML标签：
| 标签名 | 标签描述 |
|---|---|
| <a></a> | 超链接标签 |
a标签常用属性:
- href：目标资源的URL
- target：如何在浏览器中打开
标签栗子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<a href="https://www.runoob.com/html/html-links.html" target="_blank">在新标签或窗口中进入菜鸟网的a标签文档</a>
<a href="https://www.runoob.com/html/html-links.html" target="_self">在当前标签或窗口中进入菜鸟网的a标签文档</a>
</body>
</html>
运行效果如下：
超链接标签可以是一个文本，也可以是一个图片
图像标签
图像常用的HTML标签：
| 标签名 | 标签描述 |
|---|---|
| <img> | 图像标签 |
手动加载一张图像进入本项目
img标签常用属性:
- src：图像的URL
- alt：图片加载失败时替换的文字
标签栗子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<img src="finger.jpg" alt="手指">
</body>
</html>
运行效果如下：
刻意的把URL输入错误，运行效果：
表格标签
表格常用的HTML标签：
| 标签名 | 标签描述 |
|---|---|
| <table></table> | 表格标签 |
| <thead></thead> | 表头标签 |
| <tbody></tbody> | 表格主体标签 |
| <th></th> | 表头的单元格 |
| <tr></tr> | 表格中一行 |
| <td></td> | 行的单元格 |
标签栗子：
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table>
<thead>
<tr>
<th>table是表格标签</th>
<th>thead是表头标签</th>
<th>tbody是表格的主体标签</th>
</tr>
</thead>
<tbody>
<tr>
<td>th是表头的单元格</td>
<td>tr是表格中一行</td>
<td>td是行的单元格</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<th>3</th>
</tr>
</tbody>
</table>
</body>
</html>
运行效果如下：
不过一般都用的表格生成器了:表格生成器
表格内可以包含其他标签甚至表格标签！表格包含其他标签
区块标签
区块常用的HTML标签：
| 标签名 | 标签描述 |
|---|---|
| <div></div> | 块标签 |
| <span></span> | 行标签 |
一个div标签会占据一块内容，而一个spawn标签仅仅占用一行内容
标签栗子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>第一个div</div>
<div>第二个div</div>
<span>第一个span</span>
<span>第二个span</span>
</body>
</html>
运行效果如下：
F12进入控制台后，鼠标悬置第一个div之上，会显示其大小
实际开发中会经常使用div划分网页布局，下面拿百度首页进行举例。
表单标签(重要)
表单通常会将用户填写的信息发送到后端，是前后端沟通的关键
表单常用的HTML标签：
| 标签名 | 标签描述 |
|---|---|
| <form></form> | 表单标签 |
| <label></label> | 关联表单内控件 |
| <input> | 表单控件 |
| <select ></select> | 下拉框 |
| <option ></option> | 下拉框的选项 |
form标签常用属性:
action：表单数据提交的目标 URL
method：表单数据的提交方式，一般是POST或GET(HTTP协议中会详细解释)
label标签常用属性:
for：绑定控件的id(控件都有id这一属性)
input标签常用属性:
id：控件的id
type：控件以什么形式显示。例如：txt文本，password密码，button按钮等
标签栗子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="没有后端接收数据，无法传输" method="post">
<label for="text">label表单通过id绑定了text控件</label>
<input type="text" id="text">
<label for="pwd">绑定后，点击文字就可以把光标移动至控件中</label>
<input type="password" id="pwd">
<p>需要手动换行哦</p>
<hr>
<label for="k"></label>
<select id="k">
<option>select是单选框</option>
<option>一样可以被label绑定</option>
<option>1</option>
</select>
</form>
</body>
</html>
运行效果如下：
特殊字符
标签栗子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p>1 2</p>
</body>
</html>
运行效果如下：
可以注意到，尽管代码中输入了不知道多少个空格，实际上只显示了一个空格。
至此，需要使用转义字符来显示某些特殊字符。(一般直接查阅转义表即可，只展示部分)
更多转义字符查询
| 显示效果 | 描述 | 转义字符(大小写敏感，必须分号结尾) |
|---|---|---|
| 空格 | | |
| < | 小于号 | < |
| > | 大于号 | > |
| " | 双引号 | " |
| ' | 单引号 | ' (IE不支持) |
| & | 和 | & |
| © | 版权 | © |
| ® | 注册商标 | ® |
修改栗子如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p>1 2</p>
</body>
</html>
运行效果如下：
