Web前端开发 HTML常用标签大全
`markdown
HTML 标签大纲
任务
生成一份关于 标签及其相关知识的大纲
目录
1 HTML 标签简介
加粗文字
斜体文字
下划线文字
2 标注
行换行
</> 结束标签名
3 标题
h1 最大标题级别
h2 次级标题级别
h3 三级标题级别
h4 四级标题级别
h5 五级标题级别
h6 六级标题级别
4 段落单独一行 5 换行 和 水平线
行换行`
水平线` 6 文本格式化 加粗 斜体 下划线 7 图像 html超链接 常用属性： href 目标地址 9 音频 html 常用属性： src 音频URL路径名或文件夹路径名
Web前端开发 HTML常用标签大全
文章目录
-
1 HTML标签简介
-
- 1.1 标签结构
- 1.2 HTML骨架
- 1.3 标签的关系
-
2 注释
-
3 标题
-
4 段落
-
5 换行与水平线
-
6 文本格式化
-
7 图像
-
8 超链接
-
9 音频
-
10 视频
-
11 列表
-
11.1 无序列表项
-
11.2 定义列表项（根据具体需求进行适当描述）
-
11.3 序列编号列表项（根据具体需求进行适当描述）
-
12 表格
-
- 12.1 基本使用
- 12.2 表格结构标签
- 12.3 合并单元格
-
13 表单
-
- 13.1 input标签
- 13.2 下拉菜单
- 13.3 文本域
- 13.4 label标签
- 13.5 按钮
-
14 语义化
-
- 14.1 无语义的布局标签
- 14.2 有语义的布局标签
-
15 字符实体
-
综合案例1
-
综合案例2
-
1 HTML标签简介
HTML超文本标记语言——HyperText Markup Language
- 超文本：链接
- 标记：标签，带尖括号的文本
1.1 标签结构
- 标签分类采用双标签与单标签相结合的方式进行处理；其中双标签需以一对的形式出现，并在两者之间包含具体的内容。
- 在使用时应在
<>符号内部填写具体的分类名称。 - 对应地，在结束时应在前面添加一个额外的斜杠
/。
- 在使用时应在
<strong>需要加粗的文字</strong>
<br>
<hr>
1.2 HTML骨架
<html>：全部内容-
<head>：页面顶部, 用来存储显示在浏览器中的内容（例如CSS样式表）<title>：页面标题
-
<body>：网页主体，用于存放给用户看的信息，如图片、文字
-
<html>
<head>
<title>网页标题</title>
</head>
<body>
网页主体
</body>
</html>1.3 标签的关系
作用：明确标签的书写位置，让代码格式更整齐
- 父子关系 （嵌套关系 ）：子级标签换行且缩进（Tab）
- 兄弟关系 （并列关系 ）：兄弟标签换行且对齐
2 注释
代码注释是用于详细说明和解释代码功能的重要工具；这些帮助信息有助于提高程序的可读性，并方便开发者理解和查找代码。
<!-- HTML注释 -->3 标题
一般用在新闻标题、文章标题、网页区域名称、产品名称等。
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>显示特点：
- 文字加粗
- 字号逐渐减小
- 独占一行（换行）
<h1>标签在一个网页中仅能出现一次，并主要用于展示网页标题或图示<h2>到<h6>标签则不受使用次数的限制- 不受使用频率限制
4 段落
一般用在新闻段落、文章段落、产品描述信息等。
<p>段落</p>显示特点：
- 独占一行
- 段落之间存在间隙
5 换行和水平线
- 换行：
<br> - 水平线：
<hr>
<br>
<hr>6 文本格式化
在文本中应用特殊格式以突出重点内容。常用的文本格式包括加粗斜体下划线删除线等主要采用的方式有如加粗斜体等
- 加粗 ：
<strong>、<b> - 倾斜 ：
<em>、<i> - 下划线 ：
<ins>、<u> 删除线：<del>、<s>
<strong>、<em>、<ins>、<del>标签自带强调含义（语义）
7 图像
在网页中插入图片，src 用于指定图像的位置和名称，是<img>的必须属性。
<img src="图片的URL" alt="替换文本" title="提示文本">属性定义：属性名="属性值"。在标签名称之后放置这些属性，并用空格分隔开。
常用属性
| 图像属性 | 作用 | 说明 |
|---|---|---|
| src | 图像路径 | 必须设置 |
| alt | 替换文本 | 图片无法显示的时候显示的文字 |
| title | 提示文本 | 鼠标悬停在图片上时显示的文字 |
| width | 图片的宽度 | 值为数字，无单位 |
| height | 图片的高度 | 值为数字，无单位 |
例
基于Windows系统中的盘符或MacOS系统的根目录进行查找的目标文件定位方式即为绝对路径方式；而相对路径方式则基于当前工作目录的位置进行查找。其中：
/符号用于表示进入指定的子目录；.表示当前工作目录下的文件夹名称；.前导符号用于导航至父级目录位置。
此外，在实际操作中可以通过键盘上的特定快捷键来实现这些基本操作功能。例如：- 按住Shift键并结合光标移动方向键可以实现跨层级搜索；
- 使用Ctrl+S快捷键可快速保存搜索到的内容；
- 通过Ctrl+P快捷键则能打开最近一次保存的工作记录信息；
这些功能的应用均需确保相关参数设置正确以达到理想的操作效果
8 超链接
点击跳转到其他页面。href 属性值是跳转地址，是超链接的必须属性。
超链接默认打开当前窗口，在添加target="_blank"的情况下将在新窗口中打开页面。
<a href="">跳转到网站</a>
<!-- 跳转到本地文件：相对路径查找 -->
<!-- target="_blank" 新窗口跳转页面 -->
<a href="./another.html" target="_blank">在新窗口跳转页面</a>
<!-- 开发初期不确定超链接的跳转地址，将href属性值暂时置“#”表示空链接，不会跳转 -->
<a href="#">空链接</a>9 音频
<audio src="音频URL"></audio>常用属性
| 音频属性 | 作用 | 说明 |
|---|---|---|
| src | 音频URL | 必须设置。支持格式：mp3、ogg、wav… |
| controls | 显示音频控制面板 | |
| loop | 循环播放 | |
| autoplay | 自动播放 | 为了提升用户体验，浏览器一般会禁用 自动播放功能 |
如果属性名和属性值相同，可以简写为一个单词，如下所示
<audio src="./media/music.mp3" controls loop autoplay></audio>10 视频
<video src="视频URL"></video>常用属性
| 视频属性 | 作用 | 说明 |
|---|---|---|
| src | 视频URL | 必须设置。支持格式：mp4、ogg、WebM… |
| controls | 显示视频控制面板 | |
| loop | 循环播放 | |
| muted | 静音播放 | |
| autoplay | 自动播放 | 为了提升用户体验，浏览器支持在静音 状态自动播放 |
在浏览器中，想要自动播放，必须要有muted属性
<video src="./media/smrando.mp4" controls loop muted autoplay></video>网页制作的总体思路是从上至下进行整体规划和分步实施。具体步骤如下：
首先进行内容分析→随后编写相应的代码→然后将代码保存为执行文件→最后在浏览器中重新启动并刷新页面以观察结果。
11 列表
作用：布局内容排列整齐的区域。
11.1 无序列表
作用：布局排列整齐的不需要规定顺序 的区域。
标签：<ul>嵌套<li>
<ul>：无序列表<li>：列表条目
<ul>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
……
</ul>
<ul>标签里只能包裹<li>标签<li>标签里可包裹任何内容
11.2 有序列表
作用：布局排列整齐的需要规定顺序 的区域。
标签：<ol>嵌套<li>
<ol>：有序列表<li>：列表条目
<ol>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
……
</ol>
<ol>标签里只能包裹<li>标签<li>标签里可包裹任何内容
11.3 定义列表
标签：<dl>嵌套<dt>和<dd>
<dl>：定义列表<dt>：定义列表的标题<dd>：定义列表的描述/详情
<dl>
<dt>列表标题</dt>
<dd>列表描述 / 详情</dd>
……
</dl>
<dl>标签里只能包裹<dt>和<dd>标签<dt>和<dd>标签里可包裹任何内容
12 表格
网页中的表格与 Excel 表格类似，用来展示数据。
12.1 基本使用
标签：<table>嵌套<tr>，<tr>嵌套<td>、<th>
<table>：表格<tr>：行<th>：表头 单元格（table head）<td>：内容 单元格
在网页中，表格默认无边框线 ，使用border 属性可以为表格添加边框线。
<table border="1">
<tr>
<th>姓名</th>
<th>语文</th>
<th>数学</th>
<th>总分</th>
</tr>
<tr>
<td>张三</td>
<td>99</td>
<td>100</td>
<td>199</td>
</tr>
<tr>
<td>李四</td>
<td>98</td>
<td>100</td>
<td>198</td>
</tr>
<tr>
<td>总结</td>
<td>全市第一</td>
<td>全市第一</td>
<td>全市第一</td>
</tr>
</table>12.2 表格结构标签
作用：用表格结构标签把内容划分区域，让表格结构更清晰，语义更清晰。
| 标签名 | 含义 | 特殊说明 |
|---|---|---|
<thead> |
表格头部 | 表格头部内容 |
<tbody> |
表格主体 | 主要内容区域 |
<tfoot> |
表格底部 | 汇总信息区域 |
可以省略
12.3 合并单元格
作用：将多个单元格合并成一个单元格，以合并同类信息。
- 垂直方向合并：使顶端单元格居留，并加入 rowspan 属性
- 水平方向合并：使左侧单元格居留，并加入 colspan 属性
<table border="1">
<thead>
<tr>
<th>姓名</th>
<th>语文</th>
<th>数学</th>
<th>总分</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>99</td>
<td rowspan="2">100</td>
<td>199</td>
</tr>
<tr>
<td>李四</td>
<td>98</td>
<!-- <td>100</td> -->
<td>198</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>总结</td>
<td colspan="3">全市第一</td>
<!-- <td>全市第一</td>
<td>全市第一</td> -->
</tr>
</tfoot>
</table>
注：不能跨表格结构标签合并单元格（thead、tbody、tfoot）
13 表单
作用：收集用户信息。
使用场景：
- 登录页面
- 注册页面
- 搜索区域
13.1 input标签
input标签type属性值不同，则功能不同。
| type属性值 | 说明 |
|---|---|
| text | 文本框，用于输入单行文本 |
| password | 密码框 |
| radio | 单选框 |
| checkbox | 多选框，添加checked 属性设置默认选中。 |
| file | 上传文件，默认只能上传一个文件，添加multiple 属性可以实现文件多选功能。 |
占位文本placeholder ：提示信息，文本框和密码框都可以使用。
<input type="file" multiple>
<input type="checkbox" checked> akira37
<input type="password" placeholder="提示信息">13.2 下拉菜单
标签：<select>嵌套<option>
<select>：下拉菜单整体<option>：下拉菜单的每一项
默认显示第一项，selected 属性实现默认选中 功能。
<select>
<option>北京</option>
<option>上海</option>
<option>广州</option>
<option>深圳</option>
<option selected>武汉</option>
</select>
13.3 文本域
作用：多行输入文本的表单控件。
<textarea>默认提示文字</textarea>
注：
在实际开发过程中，默认情况下会利用CSS样式表来设定文本框的大小。
通常情况下，默认应用不会启用右侧底部的拖拽功能。
13.4 label标签
该标签的主要功能是用来详细说明网页内容并建立文字与表单控件之间的关联。 该标签的主要用途在于连接文字元素和表单控制组件，并通过这种方式显著提升用户对表单元素的交互范围。
在Markdown中编写代码时，请注意以下要点：
- label标签仅包含内容而不包含表单控件
- 配置label标签时应确保其for 属性值与对应表单控件的id 属性值一致
- 这种设置有助于确保每个label与其对应控制台元素共享相同的唯一标识符
- 这种做法有助于避免混淆并提高代码的一致性
- 通过这种方式可以实现对各个控制台元素的有效引用和管理
- 这种配置方式能够提升代码的质量并减少潜在错误
- 建议在开发过程中严格遵守这一原则以保证代码的质量和可维护性
- 此外这种方法也能够帮助开发者快速定位问题所在
- 在实际应用中建议结合其他编码规范共同使用以进一步提升开发效率
- 总之这种做法是一种既实用又高效的编程习惯
<input type="radio" id="man">
<label for="man">男</label>- 写法2：使用label标签包裹文字和表单控件，不需要属性
<label><input type="radio">女</label>
能够根据label标签扩展点击作用范围的表单元素包括：文本框、输入字段、文件上传字段以及以下几种常见类型：单选下拉框、多选下拉框和组合选择项……还包括诸如文本域等其他类型。
13.5 按钮
按钮需配合<form>标签（表单区域 ）才能实现对应的功能。
<button type="">按钮</button>| type属性值 | 说明 |
|---|---|
| submit | 提交按钮，点击后可以提交数据到后台（默认功能） |
| reset | 重置按钮，点击后将表单控件恢复默认值 |
| button | 普通按钮，默认没有功能，一般配合JavaScript使用 |
<!-- form 表单区域 -->
<!-- action="" 发送数据的地址 -->
<form action="">
用户名：<input type="text">
<br><br>
密码：<input type="password">
<br><br>
<button type="submit">提交</button> <!-- 省略type属性时功能默认为提交 -->
<button type="reset">重置</button>
<button type="button">普通按钮</button>
</form>14 语义化
14.1 无语义的布局标签
作用：布局网页（划分网页区域，摆放内容）
<div>：独占一行<span>：不换行
<div>div标签，独占一行</div>
<span>span标签，不换行</span>14.2 有语义的布局标签
<header>标记用于表示网页头部内容<nav>元素专门负责网页的导航系统<footer>标记用于显示网站的底部信息<aside>部分提供了一系列辅助信息或导航选项<section>标签定义了一个独立的页面区块- 通过
标签创建的内容能够吸引读者的注意力
15 字符实体
| 显示结果 | 描述 | 实体名称 |
|---|---|---|
| 空格 | |
|
| < | 小于号 | < |
| > | 大于号 | > |
综合案例1
<ul>
<li>
<img src="./images/1.jpg" alt="">
<h3>主帅安东尼奥回西班牙休假 国青抵达海口进行隔离</h3>
</li>
<li>
<img src="./images/2.jpg" alt="">
<h3>梅州主帅：申花有强有力的教练组 球员体能水平高</h3>
</li>
<li>
<img src="./images/3.jpg" alt="">
<h3>马德兴:00后球员将首登亚洲舞台 调整心态才务实</h3>
</li>
</ul>
综合案例2
<h1>注册信息</h1>
<form action="">
<!-- 表单控件 -->
<!-- 个人信息 -->
<h2>个人信息</h2>
<label>姓名：</label><input type="text" placeholder="请输入真实姓名">
<br><br>
<label>密码：</label><input type="password" placeholder="请输入密码">
<br><br>
<label>确认密码：</label><input type="password" placeholder="请输入确认密码">
<br><br>
<label>性别：</label>
<label><input type="radio" name="gender"> 男</label>
<label><input type="radio" name="gender" checked> 女</label>
<br><br>
<label>居住城市：</label>
<select>
<option>北京</option>
<option>上海</option>
<option>广州</option>
<option>深圳</option>
<option>武汉</option>
</select>
<!-- 教育经历 -->
<h2>教育经历</h2>
<label>最高学历：</label>
<select>
<option>博士</option>
<option>硕士</option>
<option>本科</option>
<option>大专</option>
</select>
<br><br>
<label>学校名称：</label><input type="text">
<br><br>
<label>所学专业：</label><input type="text">
<br><br>
<label>在校时间：</label>
<select>
<option>2015</option>
<option>2016</option>
<option>2017</option>
<option>2018</option>
</select>
--
<select>
<option>2019</option>
<option>2020</option>
<option>2021</option>
<option>2022</option>
</select>
<!-- 工作经历 -->
<h2>工作经历</h2>
<label>公司名称：</label><input type="text">
<br><br>
<label>工作描述：</label>
<br>
<textarea></textarea>
<br><br>
<!-- 协议 和 按钮 -->
<input type="checkbox"><label>已阅读并同意以下协议：</label>
<ul>
<li><a href="#">《用户服务协议》</a></li>
<li><a href="#">《隐私政策》</a></li>
</ul>
<br><br>
<button>免费注册</button>
<button type="reset">重新填写</button>
</form>