前端学习笔记：HTML常用标签

基本结构#

在编译器输入 ! 后，按下 Tab 键，使用 Emmet 补全，即可生成一个基本的 HTML 结构。
一个网页的基本html结构如下：

1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
    <meta charset="UTF-8">
5
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
    <title>Document</title>
7
</head>
8
<body>
9

10
</body>
11
</html>

`<!DOCTYPE html>`#

HTML 文档的声明，告诉浏览器该文档是 HTML5 文档。

`<html>`#

HTML 文档的根元素，包含了文档的所有内容。

`<head>`#

<head> 元素包含了文档的元数据，如字符编码、视口设置、标题等。 <head> 元素包含以下元素：

<meta> 元素：定义文档的元数据，如字符编码、视口设置、标题等。
<title> 元素：定义文档的标题，显示在浏览器的标题栏或标签页上。

<head> 元素的常见用法如下：

1
<head>
2
    <meta charset="UTF-8">
3
    <title>Document</title>
4
</head>

`<body>`#

<body> 元素包含了文档的主体内容，如文本、图像、链接、表格等。

常用标签#

标题标签#

HTML 提供了六级标题标签，分别对应不同级别的标题。六级标题标签分别为 <h1> 到 <h6>。

1
<h1>一级标题</h1>
2
<h2>二级标题</h2>
3
<h3>三级标题</h3>
4
<h4>四级标题</h4>
5
<h5>五级标题</h5>
6
<h6>六级标题</h6>

段落标签#

HTML 段落标签用于定义段落。段落标签为 <p>。

1
<p>这是一个段落。</p>

换行标签#

HTML 换行标签用于在文本中插入换行符。换行标签为 <br>。

1
<p>这是一个段落。<br>这是第二个段落。</p>

强调标签#

常用的强调类型有加粗、斜体、下划线和 ~~删除线~~。

标签(有语义)	标签(无语义)	功能
`<strong>`	`<b>`	加粗
`<em>`	`<i>`	斜体
`<ins>`	`<u>`	下划线
`<del>`	`<s>`	删除线

更推荐使用具有语义的标签，因为它们更符合 HTML 的语义化原则，能够更好地描述文档的结构和内容。

注释标签#

HTML 注释标签用于添加注释，注释不会被浏览器显示。注释标签为 。

1
<!-- 这是一个注释 -->

图像标签#

HTML 图像标签用于在文档中插入图像。图像标签为 <img>。

1
<!-- src属性用于指定图像的 URL，title属性用于指定图像的标题。 -->
2
<!-- alt属性用于描述图像，当图像无法显示时，alt 属性将显示在图像下方。 -->
3
<img src="image.jpg" alt="这是一个图像" title="图像">

<img> 标签还有些属性，如 width、height、align、hspace、vspace 等，建议避免使用这些属性，转而使用 CSS 来控制图像的大小和位置。

视频标签#

HTML 视频标签用于在文档中插入视频。视频标签为 <video>。

1
<!-- src属性用于指定视频的 URL，title属性用于指定视频的标题。 -->
2
<!-- controls属性用于显示视频的控制条。 -->
3
<video src="video.mp4" title="视频" controls></video>

视频标签的其他属性：

属性	描述
`width`	指定视频的宽度
`height`	指定视频的高度
`autoplay`	视频加载后自动播放
`loop`	视频播放结束后循环播放
`muted`	视频默认静音
`poster`	播放前的图片

视频标签的兼容性写法：

1
<video title="视频" controls>
2
    <source src="video.mp4" type="video/mp4">
3
    <source src="video.ogg" type="video/ogg">
4
    <source src="video.webm" type="video/webm">
5
    <p>您的浏览器不支持 video 标签。</p>
6
</video>

浏览器会检查 <source> 元素，并且播放第一个与其自身相匹配的媒体。

音频标签#

HTML 音频标签用于在文档中插入音频。音频标签为 <audio>。

1
<!-- src属性用于指定音频的 URL，title属性用于指定音频的标题。 -->
2
<!-- controls属性用于显示音频的控制条。 -->
3
<audio src="audio.mp3" title="音频" controls></audio>

链接标签#

HTML 链接标签用于创建超链接。超链接标签为 <a>。

1
<a href="https://www.example.com">这是一个链接</a>

超链接标签的其他属性：

属性	描述
`target`	指定链接在何处打开，`_blank` 表示在新窗口打开，`_self` 表示在当前窗口打开
`title`	指定链接的标题

锚点链接 用于在文档中创建跳转到指定位置的链接。锚点链接的目标位置需要通过 id 属性来指定。

1
<!-- 跳转到 id 为 "section2" 的位置 -->
2
<a href="#section2">跳转到第二部分</a>
3

4
<!-- 目标位置 -->
5
<h2 id="section2">第二部分</h2>

容器标签#

HTML 提供了两种常用的容器标签：<div> 和 <span>。这两个标签都用于包裹其他内容，但它们有不同的特性和用途。

`<div>` 标签#

<div> 标签是一个块级元素，用于定义文档中的一个块级区域。它通常用于对内容进行分组，以便使用 CSS 进行样式化或使用 JavaScript 进行操作。

1
<div>
2
    <h2>这是一个标题</h2>
3
    <p>这是一个段落。</p>
4
</div>

<div> 标签的特点：

块级元素，会独占一行
默认没有特定的样式
常用于页面布局和内容分组
可以嵌套使用

`<span>` 标签#

<span> 标签是一个内联元素，用于定义文本中的一个内联区域。它通常用于对文本的一部分进行样式化或使用 JavaScript 进行操作。

1
<p>这是一段<span style="color: red;">红色</span>的文本。</p>

<span> 标签的特点：

内联元素，不会独占一行
默认没有特定的样式
常用于文本的局部样式化
不能包含块级元素

`<div>` 和 `<span>` 的区别#

特性	`<div>`	`<span>`
显示类型	块级元素	内联元素
默认宽度	100% 父元素宽度	内容宽度
换行行为	自动换行	不自动换行
包含内容	可以包含任何元素，包括块级元素	只能包含内联元素和文本
主要用途	页面布局、内容分组	文本局部样式化

在实际开发中，<div> 和 <span> 经常与 CSS 结合使用，用于创建复杂的页面布局和样式。

列表标签#

HTML 列表标签用于创建有序列表（<ol>）和无序列表（<ul>）。

1
<!-- 有序列表 -->
2
<ol>
3
    <li>第一项</li>
4
    <li>第二项</li>
5
    <li>第三项</li>
6
</ol>
7

8
<!-- 无序列表 -->
9
<ul>
10
    <li>第一项</li>
11
    <li>第二项</li>
12
    <li>第三项</li>
13
</ul>
14

15
<!-- 描述列表 -->
16
<dl>
17
    <dt>名词解释</dt>
18
    <dd>名词解释的详细描述1。</dd>
19
    <dd>名词解释的详细描述2。</dd>
20
    <dt>动词解释</dt>
21
    <dd>动词解释的详细描述1。</dd>
22
    <dd>动词解释的详细描述2。</dd>
23
</dl>

有序列表标签的其他属性：

属性	描述
`type`	指定列表项的标记类型，`1` 表示数字，`A` 表示大写字母，`a` 表示小写字母，`I` 表示大写罗马数字，`i` 表示小写罗马数字
`start`	指定列表项的起始数字

有序列表和无序列表中只能包含 <li> 元素，描述列表可包含 <dt> 和 <dd> 元素，一个 <dt> 元素可以对应多个 <dd> 元素。

表格标签#

HTML 表格标签用于创建表格。表格标签为 <table>。

1
<table>
2
    <thead>
3
        <tr>
4
            <th>姓名</th>
5
            <th>年龄</th>
6
        </tr>
7
    </thead>
8
    <tbody>
9
        <tr>
10
            <td>张三</td>
11
            <td>25</td>
12
        </tr>
13
        <tr>
14
            <td>李四</td>
15
            <td>30</td>
16
        </tr>
17
    </tbody>
18
</table>

表格的合并：

合并行：使用 <tr> 标签的 rowspan 属性来合并行。
合并列：使用 <td> 或 <th> 标签的 colspan 属性来合并列。

1
<!-- 合并行示例 -->
2
<tr>
3
    <td rowspan="2">合并两行</td>
4
    <td>单元格1</td>
5
</tr>
6
<tr>
7
    <td>单元格2</td>
8
</tr>
9

10
<!-- 合并列示例 -->
11
<tr>
12
    <td colspan="2">合并两列</td>
13
</tr>

表单标签#

HTML 表单用于收集用户输入的数据，表单标签为 <form>。

1
<form action="/submit" method="post">
2
    <!-- 表单控件 -->
3
</form>

表单的基本属性#

属性	描述
`action`	指定表单数据提交的目标 URL
`method`	指定表单数据的提交方式，`get` 或 `post`
`enctype`	指定表单数据的编码类型，通常用于文件上传
`target`	指定在何处打开表单提交结果

文本输入框#

用于输入单行文本。

1
<label for="username">用户名：</label>
2
<input type="text" id="username" name="username" placeholder="请输入用户名" required>

密码输入框#

用于输入密码，输入的内容会被隐藏。

1
<label for="password">密码：</label>
2
<input type="password" id="password" name="password" placeholder="请输入密码" required>

单选按钮#

用于从多个选项中选择一个。

1
<fieldset>
2
    <legend>性别：</legend>
3
    <label><input type="radio" name="gender" value="male" checked> 男</label>
4
    <label><input type="radio" name="gender" value="female"> 女</label>
5
</fieldset>

复选框#

用于从多个选项中选择多个。

1
<fieldset>
2
    <legend>爱好：</legend>
3
    <label><input type="checkbox" name="hobby" value="reading"> 阅读</label>
4
    <label><input type="checkbox" name="hobby" value="music"> 音乐</label>
5
    <label><input type="checkbox" name="hobby" value="sports"> 运动</label>
6
</fieldset>

文本域#

用于输入多行文本。

1
<label for="message">留言：</label>
2
<textarea id="message" name="message" rows="4" cols="50" placeholder="请输入留言"></textarea>

下拉列表#

用于从预定义选项中选择一个或多个。

1
<label for="city">城市：</label>
2
<select id="city" name="city">
3
    <option value="beijing">北京</option>
4
    <option value="shanghai">上海</option>
5
    <option value="guangzhou">广州</option>
6
    <option value="shenzhen">深圳</option>
7
</select>

多选下拉列表：

1
<label for="skills">技能：</label>
2
<select id="skills" name="skills" multiple>
3
    <option value="html">HTML</option>
4
    <option value="css">CSS</option>
5
    <option value="javascript">JavaScript</option>
6
    <option value="python">Python</option>
7
</select>

按钮#

提交按钮：用于提交表单数据。

1
<input type="submit" value="提交">
2
<!-- 或者使用 button 标签 -->
3
<button type="submit">提交</button>

重置按钮：用于重置表单数据。

1
<input type="reset" value="重置">
2
<!-- 或者使用 button 标签 -->
3
<button type="reset">重置</button>

普通按钮：用于触发 JavaScript 事件。

1
<input type="button" value="点击我" onclick="alert('你点击了按钮！')">
2
<!-- 或者使用 button 标签 -->
3
<button type="button" onclick="alert('你点击了按钮！')">点击我</button>

文件上传#

用于上传文件。

1
<label for="file">上传文件：</label>
2
<input type="file" id="file" name="file">

多选文件上传：

1
<input type="file" id="files" name="files" multiple>

其他 HTML5 表单控件#

数字输入框：

1
<label for="age">年龄：</label>
2
<input type="number" id="age" name="age" min="1" max="120" step="1" value="18">

日期选择器：

1
<label for="birthday">出生日期：</label>
2
<input type="date" id="birthday" name="birthday">

邮箱输入框：

1
<label for="email">邮箱：</label>
2
<input type="email" id="email" name="email" placeholder="请输入邮箱" required>

URL 输入框：

1
<label for="website">个人网站：</label>
2
<input type="url" id="website" name="website" placeholder="请输入网站地址">

搜索框：

1
<label for="search">搜索：</label>
2
<input type="search" id="search" name="search" placeholder="请输入搜索内容">

滑块：

1
<label for="volume">音量：</label>
2
<input type="range" id="volume" name="volume" min="0" max="100" value="50">

颜色选择器：

1
<label for="color">颜色：</label>
2
<input type="color" id="color" name="color" value="#ff0000">

表单分组和标签关联#

<fieldset> 和 <legend>：

用于将表单内容分组并提供标题。

1
<fieldset>
2
    <legend>个人信息</legend>
3
    <!-- 个人信息相关的表单控件 -->
4
</fieldset>

<label>：

用于为表单控件提供标签，提高可访问性。可以通过 for 属性与控件的 id 关联，或者将控件嵌套在 <label> 标签内。

1
<!-- 通过 for 属性关联 -->
2
<label for="username">用户名：</label>
3
<input type="text" id="username" name="username">
4

5
<!-- 通过嵌套关联 -->
6
<label><input type="checkbox" name="agree"> 我同意条款</label>

表单的常用属性#

以下是表单控件常用的属性：

属性	描述
`name`	控件的名称，用于表单提交时的数据标识
`value`	控件的值
`placeholder`	提供输入提示
`required`	表示该控件为必填项
`disabled`	禁用控件
`readonly`	设置控件为只读
`checked`	用于单选按钮和复选框，设置默认选中
`autofocus`	页面加载时自动获取焦点

表单验证#

HTML5 提供了表单验证功能，可以通过设置相应的属性来实现基本的表单验证。

1
<form>
2
    <label for="email">邮箱：</label>
3
    <input type="email" id="email" name="email" required>
4

5
    <label for="password">密码：</label>
6
    <input type="password" id="password" name="password" required minlength="8">
7

8
    <button type="submit">提交</button>
9
</form>

常用的验证属性：

属性	描述
`required`	表示该控件为必填项
`minlength`	最小长度
`maxlength`	最大长度
`min`	最小值（用于数字、日期等）
`max`	最大值（用于数字、日期等）
`pattern`	使用正则表达式验证输入值
`type`	通过设置类型来进行特定格式的验证（如 email、url 等）

通过合理使用表单标签和控件，可以创建出功能完善、用户友好的表单界面，用于收集各种用户数据。

字符实体#

HTML 中使用字符实体来表示特殊字符，以避免与 HTML 标签冲突。例如，要在 HTML 中显示小于号 <，需要使用实体 <。使用字符实体可以确保在 HTML 文档中正确显示特殊字符，避免解析错误。

以下是一些常用的字符实体：

字符	实体	说明
`<`	`<`	小于号
`>`	`>`	大于号
`&`	`&`	和号
`"`	`"`	双引号
`'`	`'`	单引号
	` `	非断行空格
`©`	`©`	版权符号
`®`	`®`	注册商标符号
`™`	`™`	商标符号
`€`	`€`	欧元符号
`£`	`£`	英镑符号
`¥`	`¥`	日元符号
`¥`	`¥`	日元符号
`¥`	`&yuan;`	人民币符号
`§`	`§`	节号符号
`...`	`…`	省略号
`°`	`°`	度符号