文章说明
本文旨在总结 HTML 中常见的标签，并提供简洁的解释，方便大家快速查找和复习。我们假设读者已经具备一定的 HTML 基础知识。本文将持续更新和完善，欢迎大家参与续写和补充
一、 HTML 标签
整个网页从 <html> 开始到 </html> 结束。
二、 head 标签
head 标签也叫头标签，是从 <head> 开始到 </head> 结束。
特点：这些信息不会直接显示在网页内容中，但对浏览器、搜索引擎和其他网络服务非常重要。
<head> 常见内部标签
| 标签 | 功能 |
|---|---|
<title> |
定义文档标题 |
<meta> |
定义网页基本信息（如网站作者，字符编码，视口设置等） |
<link> |
链接外部资源 (如 CSS 样式表) |
<script> |
引入 JavaScript 代码 |
<style> |
定义 CSS 样式 |
<base> |
为页面上的所有相对 URL 指定基础 URL |
三、 body 标签
body 标签定义了 HTML 文档的主体内容。简单来说，<body> 标签里面的东西就是我们在浏览器中实际看到的东西。body 标签内容较多，接下来我们会从以下几个方面进行详细解说：
- 段落文本标签
- 图像及链接标签
- 列表标签
- 表格标签
- 表单标签
3.1 段落文本标签
| 标签 | 说明 |
|---|---|
<h1>-<h6> |
标题标签 (h1 最大，h6 最小) |
<p> |
段落标签 |
<br> |
换行标签 |
<div> |
分块标签 (块级元素) |
<span> |
无特殊含义，常搭配 CSS 或 JavaScript 使用 (行内元素) |
<pre> |
预格式化文本，保留空格和换行 |
<strong> |
定义重要的文本 |
<em> |
定义强调的文本 |
<small> |
定义小号字体 |
3.2 图像及链接标签
| 标签 | 说明 |
|---|---|
<img> |
图像标签，用于在网页中插入图片 |
<a> |
链接标签，用于创建超链接 |
图像标签：
<img src='image.jdp' alt='描述图片的文字'>
● src 属性：指定图像的 URL 地址。这是必须的属性。
● alt 属性：定义图像的替代文本。当图像无法显示时，会显示该文本
常见属性及作用：
常见属性及作用：
● src: 图像的 URL 地址 (必须)
● alt: 图像的替代文本 (必须)
● width: 设置图像的宽度
● height: 设置图像的高度
● title: 鼠标悬停在图像上时显示的提示
链接标签：
<a herf='链接的url地址' target='_blank'>说明文本<\a>
● href 属性：指定链接的目标 URL 地址。这是必须的属性。
● target 属性：指定在何处打开链接
常见属性及作用：
● href: 链接的目标 URL 地址 (必须)。
● target: 指定在何处打开链接。
○ _blank: 在新的浏览器窗口或标签页中打开链接。
○ _self: 在当前窗口或标签页中打开链接 (默认值)。
○ _parent: 在父框架中打开链接。
○ _top: 在整个窗口中打开链接。
● title: 鼠标悬停在链接上时显示的提示文本。
● download: 强制浏览器下载链接的资源，而不是打开它
3.3 列表标签
| 标签 | 说明 |
|---|---|
<ul> |
无序列表 |
<ol> |
有序列表 |
<li> |
列表项 ，用于 <ul> 和 <ol> 中 |
<dl> |
定义列表 |
<dt> |
定义术语 |
<dd> |
定义描述 |
3.4 表单标签
| 标签 | 说明 |
|---|---|
<form> |
定义 HTML 表单，用于收集用户输入 |
<input> |
输入标签，用于创建各种输入字段（文本框、密码框、单选框、复选框、按钮等） |
<textarea> |
多行文本输入框 |
<select> |
下拉列表 |
<option> |
下拉列表选项，用于 <select> 中 |
<button> |
按钮 |
<label> |
为表单元素定义标注，提高可访问性，通常与 for 属性关联指定对应的 input 的 id。 |
<fieldset> |
将表单内的相关元素分组 |
<legend> |
为 <fieldset> 元素定义标题 |
<input>** 的常用 type 属性值：**
text: 文本框password: 密码框radio: 单选框checkbox: 复选框submit: 提交按钮reset: 重置按钮button: 普通按钮file: 文件上传email: 邮箱number: 数字date: 日期
3.5 表格标签
| 标签 | 说明 |
|---|---|
<table> |
定义 HTML 表格 |
<tr> |
表格行 (Table Row) |
<th> |
表头单元格 (Table Header) |
<td> |
表格单元格 (Table Data) |
<caption> |
表格标题 |
<colgroup> |
定义表格列的组，用于格式化一个或多个列 |
<col> |
用于 <colgroup> 中，定义表格中每一列的属性 |
<thead> |
定义表格的表头 |
<tbody> |
定义表格的主体 |
<tfoot> |
定义表格的页脚 |
表格常用属性：
border: 表格边框cellpadding: 单元格内边距cellspacing: 单元格间距colspan: 单元格横跨列数rowspan: 单元格纵跨行数
四.综合练习
使用html标签完成以下效果
代码：
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>
<h1>用户注册</h1>
<table>
<tr>
<td>用户名</td>
<td><input type="text" placeholder="请输⼊⽤⼾名"></td>
</tr>
<tr>
<td>⼿机号</td>
<td><input type="text" placeholder="请输⼊⼿机号"></td>
</tr>
<tr>
<td>密码</td>
<td><input type="text" placeholder="请输⼊密码"></td>
</tr>
</table>
<div>
<input type="button" value="注册">
<span>已有账号? </span><a href="#">登录</a><br/>
</body>
</html>运行效果：
