第二章 HTML基础

HTML 的发展历史可以追溯到 1989 年，当时英国的一位计算机科学家 Tim Berners-Lee 提出了一个基于互联网的信息管理系统，这就是现在所熟知的万维网。为了让人们可以方便地分享和浏览文档，Berners-Lee 创造了 HTML 语言。 HTML 最初是由 Berners-Lee 和他的团队开发和维护的。随着互联网的迅猛发展，HTML 也得到了快速的演进和发展，同时也吸引了越来越多的开发者和组织参与其中。在 HTML 的发展过程中，有很多重要的里程碑，如 HTML 2.0、HTML 3.2、HTML 4.0、XHTML 1.0 等版本的发布，它们都带来了重大的变化和进步。现在，HTML 的维护和更新工作由 W3C（World Wide Web Consortium）组织负责。W3C 是一个国际标准化组织，致力于开发和推广互联网技术的标准。W3C 负责维护和发布 HTML 规范，以确保 HTML 在不同的浏览器和设备上具有一致的表现。除了 W3C，还有一些其他的组织和社区也在为 HTML 的发展和维护做出贡献，如 WHATWG（Web Hypertext Application Technology Working Group）等。这些组织和社区不仅贡献了很多新的特性和标准，还积极参与了 HTML 规范的制定和推广工作。 HTML 是前端开发中最基础、最简单的知识之一，因为它是网页的结构化语言。通过使用 HTML，我们可以将一个网页分成不同的区域，并为每个区域定义出其在页面中的作用和显示方式。例如，我们可以使用 HTML 定义一个标题、一段文字、一张图片或一个表单等元素。这些元素可以被浏览器解析并渲染成具体的网页内容，让用户可以直观地了解和使用页面中的信息和功能。因此，学习 HTML 是学习前端开发的第一步，也是非常重要的一步。下面就让我们开始真正的学习吧！

2.1 HTML文档结构

一个HTML文档包含以下几个部分：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>网页标题</title>
</head>
<body>
    <!-- 页面内容 -->
</body>
</html>

<!DOCTYPE html>：指定HTML版本 <html>：定义HTML文档的根元素 <head>：包含文档元数据 <meta charset="UTF-8">：指定字符编码 <title>：指定网页标题 <body>：定义HTML文档的主体

2.2 常用HTML标签

HTML标签是HTML语言中的基本元素，它用于描述页面内容的结构和意义。常用的HTML标签有：

<h1>~<h6>：定义标题（h1是最高级别，h6是最低级别）
<p>：定义段落
<a>：定义超链接
<img>：定义图像
<ul>和<ol>：定义无序和有序列表
<table>：定义表格
<form>：定义表单
<input>：定义输入字段
<button>：定义按钮更多标签参见附录1。

定义标题

HTML标题是在网页中使用的一种文本样式，可以用来为网页中的不同部分创建标题。HTML提供了六个级别的标题标签：<h1>、<h2>、<h3>、<h4>、<h5>和<h6>。下面是HTML标题标签的用法和示例：

<h1>标签用于创建最高级别的标题，表示网页的主题或主要内容。示例：<h1>欢迎来到我的网站</h1>
<h2>标签用于创建第二级别的标题，表示网页的主要部分或主题的一个子主题。示例：<h2>个人简介</h2>
<h3>标签用于创建第三级别的标题，表示网页的某个部分或子主题的一个子主题。示例：<h3>教育背景</h3>
<h4>标签用于创建第四级别的标题，表示网页的某个子部分或子主题的一个子主题。示例：<h4>大学学历</h4>
<h5>标签用于创建第五级别的标题，表示网页的某个子部分或子主题的一个子主题。示例：<h5>研究生学历</h5>
<h6>标签用于创建最低级别的标题，表示网页的某个子部分或子主题的一个子主题。示例：<h6>博士学历</h6>

在使用标题标签时，应该遵循以下准则：尽量使用语义化的标题，即使用最适合内容的标题级别。不要跳过标题级别，例如不要使用<h1>和<h3>之间没有<h2>的情况。标题应该简洁明了，概括主题。不要滥用标题标签，因为它们对于搜索引擎优化（SEO）和可访问性（Accessibility）都非常重要。

定义段落

HTML中，段落是最常用的内容元素之一，用于呈现文本的结构。段落可以包含各种文本元素，如文本、图片、链接等，但通常用于呈现纯文本内容。段落的HTML标签是<p>。例如，以下代码将创建一个包含一段文本的段落： <p>这是一个段落。</p> 在段落中，可以使用其他HTML标记来格式化文本，如粗体、斜体、链接等等。例如： <p>这是一个包含<strong>粗体</strong>和<em>斜体</em>的段落。</p> 此外，还可以使用CSS样式来定义段落的外观和布局，例如设置字体、颜色、行间距等等。例如：

<style>
  p {
    font-family: Arial, sans-serif;
    font-size: 16px;
    color: #333;
    line-height: 1.5;
    margin-bottom: 20px;
  }
</style>

在实际应用中，段落通常与其他HTML元素（如标题、列表、表格等）结合使用，以呈现出具有良好结构和可读性的文档。

定义超链接

HTML中，超链接（Hyperlink）用于在页面中创建指向其他页面、文档、资源或任何其他URL的链接。超链接是构建网站的基本元素之一，使用户能够轻松地浏览不同的页面和内容。在HTML中，超链接使用<a>标签来创建，它具有以下基本语法： <a href="URL">Link text</a> 其中，href属性指定链接的目标URL，可以是其他页面、文件、电子邮件地址等等。Link text则是超链接的文本内容，用户单击此文本时将触发链接。例如，以下代码将创建一个指向Google首页的超链接： <a href="https://www.google.com">Visit Google</a> 除了使用URL之外，还可以使用其他值作为href属性，例如相对路径、锚点等等。例如： <a href="about.html">About Us</a> <a href="#section2">Go to Section 2</a> 此外，<a>标签还支持多个属性，如target属性（指定链接在何处打开）、title属性（指定链接的提示文本）等等。例如： <a href="https://www.google.com" target="_blank" title="Open in new window">Visit Google</a>

在实际应用中，超链接通常与其他HTML元素（如段落、图像、列表等）结合使用，以提供更丰富和可交互的内容。超链接的样式和布局可以使用CSS进行定制，以适应不同的设计需求。

定义图像

在HTML中，图像可以使用<img>标签来添加到网页中。<img>标签是一个空标签，它不需要结束标记，通常像这样使用 <img src="image.jpg" alt="My Image"> src属性指定图像文件的URL地址，这是唯一必需的属性。在这个例子中，图像文件名为image.jpg。alt属性是可选的，用于指定替代文本，如果图像无法加载或用户使用屏幕阅读器等辅助技术访问网页，则会显示替代文本。例如： <img src="image.jpg" alt="A beautiful sunset over the ocean">

除了这两个基本属性之外，<img>标签还支持其他一些属性，例如width和height属性用于指定图像的宽度和高度（单位为像素或百分比）： <img src="image.jpg" alt="My Image" width="500" height="300">

在实际应用中，可以使用相对或绝对URL地址指向图像文件，也可以使用各种图片格式，如JPEG、PNG、GIF等等。可以使用CSS样式表对图像进行调整大小、添加边框、应用滤镜等等。图像的加载和显示速度也是需要考虑的因素，因此优化图像大小、压缩和缓存等方法也是常见的实践。

SVG图像

SVG（Scalable Vector Graphics）是一种基于XML的矢量图形格式，可以在HTML中使用<svg>元素来创建各种矢量图形。使用SVG可以轻松地创建和修改图形，并且它们可以被无限放大而不会失真。在HTML中，可以使用以下标记创建SVG图像：

 <svg>
   <rect x="10" y="10" width="50" height="50" />
 </svg>

上述代码将创建一个宽度为50像素，高度为50像素的矩形，左上角坐标为(10,10)。在SVG中，可以使用各种元素和属性来创建各种图形和效果。下面是一些常用的SVG元素和属性：

<rect>：用于创建矩形
<circle>：用于创建圆形
<line>：用于创建线条
<path>：用于创建复杂的路径和形状
<text>：用于创建文本
fill：设置元素的填充颜色
stroke：设置元素的描边颜色
stroke-width：设置元素的描边宽度
transform：设置元素的变换效果，如平移、旋转、缩放等等例如，下面的代码将创建一个带有文字和一个圆形的SVG图像：

  <svg width="200" height="200">
    <circle cx="50" cy="50" r="40" fill="red" stroke="black" stroke-width="2" />
    <text x="70" y="60" font-size="20" fill="black">Hello, SVG!</text>
  </svg>

上述代码将创建一个宽度为200像素，高度为200像素的SVG图像，在其中绘制了一个半径为40像素，填充颜色为红色，描边颜色为黑色，描边宽度为2像素的圆形，以及一个文字为“Hello, SVG!”的文本。可以使用CSS来设置SVG元素的样式，例如颜色、字体等等。使用SVG可以创建各种复杂的矢量图形，并在HTML中嵌入，非常实用。同时，使用SVG可以使得图形在不同设备和分辨率下保持清晰和可缩放性，是一种非常有价值的技术。

定义无序和有序列表

在HTML中，可以使用<ul>和<ol>标签来创建无序和有序列表，分别对应无序列表和有序列表。无序列表使用<ul>标签，并在其中使用<li>标签创建列表项。例如：

<ul>
  <li>Apple</li>
  <li>Orange</li>
  <li>Banana</li>
</ul>

上面的代码会创建一个无序列表，其中包含三个列表项：苹果、橘子和香蕉。默认情况下，列表项前面会显示一个圆点符号。有序列表使用<ol>标签，并在其中使用<li>标签创建列表项。例如：

<ol>
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ol>

上面的代码会创建一个有序列表，其中包含三个列表项：第一、第二和第三。默认情况下，列表项前面会显示一个数字。 <ul>和<ol>标签都可以嵌套使用，例如：

<ol>
  <li>First</li>
  <li>Second</li>
  <li>
    Third
    <ul>
      <li>3.1</li>
      <li>3.2</li>
    </ul>
  </li>
</ol>

上面的代码会创建一个有序列表，其中第三个列表项包含一个嵌套的无序列表。列表项可以包含任何HTML元素，包括图像、链接和段落等。

定义表格

在 HTML 中，表格是通过 <table> 元素来定义的。它由多个行和列组成，每个单元格包含一个元素或一个文本节点。在表格中，可以使用以下元素来定义行和列： <thead>：定义表格的表头部分，包含了一组表头单元格，可以通过<th>元素定义表头单元格。 <tbody>：定义表格的主体部分，包含了一组表格行，可以通过<tr>元素定义表格行。 <tr>：定义表格中的一行，可以通过<td>或<th>元素定义行中的单元格。 <td>：定义表格中的一个数据单元格，包含了一个元素或一个文本节点。 <th>：定义表格中的一个表头单元格，包含了一个元素或一个文本节点。下面是一个简单的 HTML 表格的例子：

<table>
  <thead>
    <tr>
      <th>编号</th>
      <th>姓名</th>
      <th>年龄</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>张三</td>
      <td>25</td>
    </tr>
    <tr>
      <td>2</td>
      <td>李四</td>
      <td>30</td>
    </tr>
    <tr>
      <td>3</td>
      <td>王五</td>
      <td>28</td>
    </tr>
  </tbody>
</table>

这个表格有一个表头部分和一个主体部分。表头包含了三个表头单元格，分别是“编号”、“姓名”和“年龄”。主体部分包含了三行数据，每行数据由三个单元格组成。此外，还可以通过<colgroup>标签来定义表格列的属性，如列宽、对齐方式等，具体如下：

<table>
  <colgroup>
    <col style="width: 30%;" /> <!-- 第1列宽度为30% -->
    <col style="text-align: center;" /> <!-- 第2列居中对齐 -->
  </colgroup>
  <thead>
    <tr>
      <th>列1标题</th>
      <th>列2标题</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>数据1</td>
      <td>数据2</td>
    </tr>
    <tr>
      <td>数据3</td>
      <td>数据4</td>
    </tr>
  </tbody>
</table>

在<colgroup>中使用<col>标签来定义列，然后可以使用style属性来设置列的属性。最后，表格还支持合并单元格操作，可以使用rowspan属性和colspan属性来实现，如下所示：

<table>
  <thead>
    <tr>
      <th rowspan="2">姓名</th>
      <th colspan="2">学科</th>
      <th rowspan="2">总分</th>
    </tr>
    <tr>
      <th>语文</th>
      <th>数学</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>小明</td>
      <td>80</td>
      <td>90</td>
      <td>170</td>
    </tr>
    <tr>
      <td>小红</td>
      <td>85</td>
      <td>95</td>
      <td>180</td>
    </tr>
  </tbody>
</table>

上述代码中，<th>标签的rowspan属性和colspan属性分别指定了要合并的行数和列数。

定义表单

HTML表单是一种通过用户在表单元素中填写数据，将数据提交给服务器进行处理的方式。常见的表单元素包括文本框、单选框、复选框、下拉框、文本域等等。 HTML表单的结构：

  <form action="server_url" method="post">
    <!-- 表单元素 -->
  </form>

其中，action属性指定表单提交的目标地址，method属性指定提交的方法，一般有get和post两种。 HTML表单元素包括：

<input>元素：用于定义文本框、单选框、复选框、提交按钮等等。
<select>元素：用于定义下拉框。
<textarea>元素：用于定义多行文本框。
<button>元素：用于定义按钮。
<label>元素：用于为表单元素定义标签，增强可访问性。
<fieldset>和<legend>元素：用于将表单元素进行分组，增强可读性。常见的表单元素属性包括：
type属性：指定输入框的类型，常用的有text、password、radio、checkbox等。
name属性：指定输入框的名称，用于提交表单数据。
value属性：指定输入框的默认值。
disabled属性：禁用输入框。
required属性：指定输入框为必填项。
readonly属性：指定输入框只读，不能编辑。例如，定义一个包含文本框、下拉框、单选框和提交按钮的表单：

  <form action="server_url" method="post">
    <label for="username">用户名：</label>
    <input type="text" name="username" id="username" required>
    <br>
    <label for="gender">性别：</label>
    <select name="gender" id="gender">
      <option value="male">男</option>
      <option value="female">女</option>
    </select>
    <br>
    <label>爱好：</label>
    <input type="checkbox" name="hobby" value="reading">读书
    <input type="checkbox" name="hobby" value="music">听音乐
    <br>
    <button type="submit">提交</button>
  </form>

在提交表单时，表单数据会被编码成键值对，并发送到服务器进行处理。

`<input>`元素

HTML中的input元素是一个非常常用的表单控件，用于接受用户输入数据。它的type属性决定了输入类型，常见的输入类型包括文本框、密码框、单选框、复选框、下拉框、日期选择框等等。以下是一些常见的 type 取值及其作用：

text: 文本输入框，可以输入任意字符串。
password: 密码输入框，输入的内容会以星号或圆点的形式展示。
email: 邮箱输入框，会检查输入的字符串是否符合邮箱的格式。
tel: 电话号码输入框，会检查输入的字符串是否符合电话号码的格式。
number: 数字输入框，只能输入数字。
date: 日期输入框，可以选择日期。
time: 时间输入框，可以选择时间。
color: 颜色选择框，可以选择颜色。
file: 文件上传框，可以上传文件。
search: 搜索框，可以输入搜索关键词。
checkbox: 多选框，可以选择多个选项。
radio: 单选框，可以选择一个选项。
submit: 提交按钮，用于提交表单。
reset: 重置按钮，用于重置表单。
button: 普通按钮，用于触发自定义操作。除了上述常见的取值之外，还有一些比较少用的 type 取值，例如 image（用于上传图片并提交表单）、range（用于选择数值范围）、week（选择周数）等等。

下面是一些常见的input类型和用法：

文本框

文本框用于输入单行文本，其type属性设置为"text"。如下所示：

  <label for="username">用户名：</label>
  <input type="text" id="username" name="username">

密码框

密码框用于输入密码，其type属性设置为"password"。输入内容会被遮蔽，如下所示：

  <label for="password">密码：</label>
  <input type="password" id="password" name="password">

单选框

单选框用于从一组选项中选择一个，其type属性设置为"radio"。每个单选框都应该有唯一的name属性，相同name属性的单选框为一组。如下所示：

  <p>性别：</p>
  <label><input type="radio" name="gender" value="male">男</label>
  <label><input type="radio" name="gender" value="female">女</label>

复选框

复选框用于从一组选项中选择多个，其type属性设置为"checkbox"。每个复选框都应该有唯一的name属性，相同name属性的复选框为一组。如下所示：

  <p>爱好：</p>
  <label><input type="checkbox" name="hobby" value="reading">阅读</label>
  <label><input type="checkbox" name="hobby" value="music">音乐</label>
  <label><input type="checkbox" name="hobby" value="sport">运动</label>

日期选择框

日期选择框用于选择日期，其type属性设置为"date"。如下所示：

  <label for="date">日期：</label>
  <input type="date" id="date" name="date">

颜色选择框

颜色选择框允许用户选择颜色值，它可以使用<input>元素和type="color"属性来创建。

  <label for="color-picker">Choose a color:</label>
  <input type="color" id="color-picker" name="color-picker">

上面的代码将创建一个颜色选择框，用户可以点击其中的颜色块来选择颜色。

文件上传框

文件上传框允许用户选择本地文件并上传到服务器，它可以使用<input>元素和type="file"属性来创建。

  <label for="file-upload">Upload a file:</label>
  <input type="file" id="file-upload" name="file-upload">

上面的代码将创建一个文件上传框，用户可以点击其中的按钮来选择文件。

搜索框

搜索框允许用户输入关键词进行搜索，它可以使用<input>元素和type="search"属性来创建。

<label for="search-box">Search:</label>
  <input type="search" id="search-box" name="search-box">

上面的代码将创建一个搜索框，用户可以在其中输入关键词并按下回车键来进行搜索。

`<select>`元素

HTML 中的 <select> 元素用于创建一个下拉列表，允许用户从列表中选择一个或多个选项。它通常与 <option> 元素一起使用。下面是一个简单的使用 <select>和 <option> 的示例：

  <select>
    <option value="apple">Apple</option>
    <option value="banana">Banana</option>
    <option value="orange">Orange</option>
  </select>

这个例子创建了一个包含三个选项的下拉列表。每个选项都使用 <option> 元素表示，并通过 value 属性指定选项的值。 <select> 元素也有一些属性可以用来控制列表的行为和外观，包括：

multiple：允许用户选择多个选项。
size：指定列表中可见的选项数量。
disabled：禁用下拉列表，使其不能被编辑或选择。下面是一个包含上述属性的示例：

  <select multiple size="3" disabled>
    <option value="apple">Apple</option>
    <option value="banana">Banana</option>
    <option value="orange">Orange</option>
  </select>

这个例子创建了一个包含三个选项的下拉列表，允许用户选择多个选项，但由于被禁用了，不能被编辑或选择。可见的选项数量被限制为 3。另外，如果你希望在列表中包含一些默认选中的选项，可以使用 selected 属性。例如：

  <select>
    <option value="apple">Apple</option>
    <option value="banana" selected>Banana</option>
    <option value="orange">Orange</option>
  </select>

在这个例子中，"Banana" 选项被默认选中，因为它有 selected 属性。

`<textarea>`元素

HTML的<textarea>元素用于在HTML表单中创建多行文本输入字段。与单行输入字段<input>不同，<textarea>元素允许用户输入多行文本。使用<textarea>元素需要指定其行数和列数属性。行数定义了输入框中显示的文本行数，而列数则定义了文本框的宽度。例如，下面的代码将创建一个5行、30列的文本框： <textarea rows="5" cols="30"></textarea> 除了行数和列数，<textarea>元素还可以设置一些其他的属性。其中，最重要的是name属性和value属性。name属性用于指定表单数据的名称，而value属性用于设置默认的文本框中的文本。例如，下面的代码将创建一个名为comment的文本框，并将其默认文本设置为“请输入您的评论”： <textarea name="comment" rows="5" cols="30">请输入您的评论</textarea> 在提交表单时，<textarea>元素的值会作为表单数据的一部分发送到服务器。在处理表单数据时，服务器可以通过访问<textarea>元素的名称来获取其值。除了基本的行数、列数、名称和值属性，<textarea>元素还支持其他属性，例如readonly、disabled、required等，这些属性在表单验证和用户交互中非常有用。

`<button>`元素

HTML 中的 <button> 标签用于创建一个按钮，可以在用户点击时执行 JavaScript 代码或提交表单。<button> 可以包含文本或图像等内容，也可以为空。常见的按钮包括提交按钮和重置按钮。 <button> 标签有以下常用属性：

type：指定按钮的类型，常见的取值包括 submit（提交按钮）、reset（重置按钮）和 button（普通按钮）。
name：指定按钮的名称，与表单提交时使用。
value：指定按钮的值，与表单提交时使用。例如，下面的代码创建了一个提交按钮：

  <form action="submit.php" method="post">
    <button type="submit">提交</button>
  </form>

当用户点击这个按钮时，表单将会提交到 submit.php，并执行相应的操作。如果需要创建重置按钮，可以使用 type="reset"。除了以上介绍的使用方式，<button> 标签还可以结合 JavaScript 代码使用，例如： <button onclick="alert('Hello world!')">点我</button> 当用户点击按钮时，会弹出一个提示框，显示 "Hello world!"。这个功能可以用来实现各种交互效果，例如打开菜单、切换页面等等。

`<label>`元素

HTML <label> 元素是一种用于描述表单元素的标签，它通常用于为表单元素添加标签或说明。它可以与以下表单元素相关联：

<input>元素
<textarea>元素
<select>元素

<button>元素 <label> 元素通常与表单元素的 id 属性配合使用，例如：

<label for="username">Username:</label>
<input type="text" id="username" name="username">

在上面的示例中，<label> 元素的 for 属性与输入元素的 id 属性相对应，因此当用户单击 <label> 元素时，输入元素将获得焦点。在 <label> 元素内，您可以使用文本、图像、其他表单元素等内容，例如：

  <label for="subscribe">Subscribe to newsletter:</label>
  <input type="checkbox" id="subscribe" name="subscribe" value="yes">

在这个例子中，<label> 元素的文本描述与一个复选框相关联，这将使用户更容易单击标签来激活复选框，而不是只单击小框本身。总之，使用 <label> 元素有助于改进表单的可访问性，并且可以提高用户体验。

`<fieldset>`和`<legend>`元素

HTML 中，<fieldset> 和 <legend> 元素通常一起使用，用于将相关表单元素组合在一起，并为它们添加标题。 <fieldset> 元素定义一个组合框，通常用于将表单元素分组。可以将 <fieldset>元素看作一个逻辑容器，将表单中的相关元素分组在一起，以便更好地组织和显示它们。 <legend> 元素定义了 <fieldset> 元素的标题，可以看作是一个分组框的标题。<legend> 元素应该作为 <fieldset> 元素的第一个子元素，以便浏览器正确地将它们一起显示。下面是一个例子：

  <form>
    <fieldset>
      <legend>联系方式</legend>
      <label for="name">姓名：</label>
      <input type="text" id="name" name="name"><br>
      <label for="email">邮箱：</label>
      <input type="email" id="email" name="email"><br>
      <label for="message">留言：</label>
      <textarea id="message" name="message"></textarea><br>
    </fieldset>
  </form>

在上面的例子中，<fieldset> 元素用于将联系表单中的表单元素组合在一起，并将它们的标题设置为“联系方式”。<legend> 元素用于定义标题。每个表单元素都在 <fieldset> 元素内部，以便浏览器能够正确地将它们与分组框相关联。

定义容器

HTML中的<div>和<span>标签是用来创建容器的元素，可以用来将HTML文档划分为多个区域，进行样式布局和组织内容。 <div>是用来创建块级元素，可以将多个相关的元素组合在一起，形成一个独立的容器，用于控制样式和布局。<div>元素可以使用CSS样式来设置它的宽度、高度、边距、内边距等属性。<div>标签通常用于布局，将多个元素组织成为一个整体，方便进行样式控制。 <span>是用来创建内联元素，它是一个行内元素，可以在行内任意位置添加内容，常用于对文字进行标记、高亮、或者在文字周围添加一些小的图标等。<span>元素通常用于设置文本样式，比如颜色、字体大小等。和<div>标签一样，<span>标签也可以使用CSS样式来设置它的属性。在实际应用中，<div>和<span>标签可以灵活组合使用，用于实现各种复杂的页面布局和内容展示效果。在之后的CSS章节会有详细的例子。

第二章 HTML基础

第二章 HTML基础

2.1 HTML文档结构

2.2 常用HTML标签

定义标题

定义段落

定义超链接

定义图像

SVG图像

定义无序和有序列表

定义表格

定义表单

<input>元素

文本框

密码框

单选框

复选框

日期选择框

颜色选择框

文件上传框

搜索框

<select>元素

<textarea>元素

<button>元素

<label>元素

<fieldset>和<legend>元素

定义容器

`<input>`元素

`<select>`元素

`<textarea>`元素

`<button>`元素

`<label>`元素

`<fieldset>`和`<legend>`元素