HTML 入门

发表于 2019-12-07 更新于 2023-12-26 分类于 Python > Python教程 > Python基础本文字数： 35k 阅读时长 ≈ 59 分钟

概述

HTML，即超文本标记语言 (HyperText Markup Language)，是一种用于创建网页的标准标记语言。它可以被用来组织网页的内容和结构，并且与 CSS（层叠样式表）和 JavaScript 一起，它构成了万维网的基础技术之一。
HTML 文档由一系列的元素组成，这些元素通过标签标识，标签可以指示文本应该如何显示（例如段落、标题或列表），或者描述内容的性质（例如图片、链接）。

C/S 和 B/S 架构

C/S 架构
- C/S 架构（Client/Server Architecture）是一种传统的客户端 / 服务器架构，其中客户端和服务器是两个独立的实体。在这种架构中，客户端负责用户界面的展示和交互，而服务器负责处理业务逻辑和数据存储。客户端向服务器发送请求，服务器根据请求进行处理并返回结果给客户端。客户端和服务器之间通过网络进行通信。
- C/S 架构的优点包括：
  1. 性能：客户端和服务器之间的通信是直接的，可以实现高效的数据传输和处理。
  2. 灵活性：客户端可以根据需要选择和配置服务器，以满足特定的需求。
  3. 安全性：通过服务器控制数据和业务逻辑，可以实现更好的数据安全性和访问控制。
- 然而，C/S 架构也存在一些限制，例如客户端软件的安装和更新可能需要额外的管理和维护工作，而且客户端和服务器之间的通信可能需要专用的协议和接口。
B/S 架构
- B/S 架构（Browser/Server Architecture）是一种基于 Web 的架构模式，其中用户通过浏览器作为客户端与服务器进行交互。在 B/S 架构中，服务器负责处理业务逻辑和数据存储，而浏览器作为客户端提供用户界面的展示和交互。用户通过浏览器发送 HTTP 请求给服务器，服务器返回 HTML、CSS、JavaScript 等资源给浏览器进行解析和展示。
- B/S 架构的优点包括：
  1. 可访问性：用户只需要一个支持 Web 浏览器的设备和网络连接就可以访问应用程序，无需安装额外的客户端软件。
  2. 维护简单：由于应用程序的逻辑和数据存储都在服务器端，因此更新和维护只需在服务器端进行，无需在每个客户端上进行。
  3. 跨平台：由于应用程序在浏览器中运行，可以在不同的操作系统和设备上使用，具有更好的跨平台性。
- 然而，B/S 架构也存在一些限制，例如对于某些复杂的交互和操作，可能需要在浏览器中使用大量的 JavaScript 代码来实现，对于某些实时性要求较高的应用程序可能不太适合。

工具

编辑器
- Visual Studio Code
- Sublime Text
浏览器
- Google Chrome
- Firefox

原理

浏览器 => 服务器，发送请求，索要相关数据
服务器 => 浏览器，返回数据（响应），然后浏览器解析收到的数据，就会出现相应的效果
组成：HTML、CSS、JS

全局架构标签

在 HTML 中，有几个特殊的标签被认为是构建整个文档全局架构的基础。这些标签定义了 HTML 文档的框架和基本结构。

<!DOCTYPE html>: 这个声明定义了文档的类型，以便浏览器知道它应该如何正确地解释文档。在 HTML5 中，它被简化为 <!DOCTYPE html>。
<html>: 这个标签包裹着整个 HTML 文档的内容，是所有其他 HTML 元素的父标签。
1
2
3
4
<!DOCTYPE html>
<html lang="en">

</html>
<head>: 位于 <html> 标签内部，它包含了所有的头部信息，如文档的标题、引入样式表和脚本文件、元数据等。
1
2
3
4
<head>
<title>页面标题</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<title>: 定义了文档的标题，这个标题显示在浏览器的标签页上。
1
<title>这是标题</title>
<body>: 包含了网页的所有可见内容，如文本、图片、按钮、视频等。
1
2
3
4
<body>
<h1>这是一个标题</h1>
<p>这是一个段落。</p>
</body>

<header>: 通常用来定义一个页面或一个内容区块的头部。它可以包含标题、介绍性内容等。

<header>
    <h1>网站标志和名称</h1>
    <nav>
        <!-- 导航链接 -->
    </nav>
</header>

<footer>: 用来定义页面或一个内容区块的底部。常常包含版权信息、联系信息等。
1
2
3
<footer>
<p>版权所有 © 2023</p>
</footer>

<nav>: 用于定义导航链接的部分，通常包含一个或多个链接的列表。

<nav>
    <ul>
        <li><a href="#home">首页</a></li>
        <li><a href="#news">新闻</a></li>
        <li><a href="#contact">联系我们</a></li>
    </ul>
</nav>

<main>: 代表文档的主要内容；在文档中只应使用一次，用于标记直接与网页或应用的中心主题相关的内容。
1
2
3
4
5
<main>
<article>

</article>
</main>
<section>: 用于定义文档中的一个独立的区块，通常包含一个标题。
1
2
3
4
<section>
<h2>章节标题</h2>
<p>一些文本。</p>
</section>
<meta>: 定义了关于 HTML 文档的元数据（metadata）。元数据是关于数据的数据，它不会显示在页面上，但是对于机器来说是可读的，比如搜索引擎和浏览器。这些信息可以包括文档的描述、关键词、页面的作者、最后修改时间以及其他元数据。<meta> 标签通常位于 <head> 部分，可以包含几种不同类型的信息：
- 字符集声明：指定网页使用的字符编码（如 UTF-8）
  1
  <meta charset="UTF-8">
- 视口配置：为移动设备优化页面，控制视口的大小和比例
  1
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
- SEO 相关信息：比如描述和关键词，帮助搜索引擎理解页面内容
  1
  2
  <meta name="description" content="这是一个页面的描述">
  <meta name="keywords" content="关键词1, 关键词2">
- 作者和版权信息
  1
  2
  <meta name="author" content="作者名">
  <meta name="copyright" content="版权信息">
- 刷新和重定向：指定页面自动刷新或重定向到另一个页面
  1
  <meta http-equiv="refresh" content="30;url=http://example.com/">
- 兼容性：控制浏览器模式，比如兼容旧版 IE 浏览器
  1
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta> 标签非常关键，它们帮助提升网站的 SEO 表现，改善用户体验，并确保网页能够在不同的设备和浏览器上正确显示。

字符实体

HTML 字符实体是一种特殊的编码，用来表示在 HTML 中有特殊意义的字符（如小于号 < 和大于号 >），或者不容易输入的字符（如版权符号 ©）。字符实体有两种形式：命名实体和数字实体。
字符实体对于防止 HTML 代码被错误解释是非常重要的，同时也用于表示那些在键盘上没有直接对应键的符号。

命名实体使用一个具有描述性的名称。例如：

字符实体	描述
`&lt`	表示小于号 `<`
`&gt`	表示大于号 `>`
`&amp`	表示和号（或者叫作 “商业和号”）`&`
`&quot`	表示双引号 `"`
`&apos`	表示单引号（或撇号）`'`
`&nbsp`	表示不断行空格

数字实体使用数字代码（十进制或十六进制）。例如：

字符实体	描述
`&#60`（十进制）和 `&#x3C`（十六进制）	表示小于号 `<`
`&#62`（十进制）和 `&#x3E`（十六进制）	表示大于号 `>`
`&#38`（十进制）和 `&#x26`（十六进制）	表示和号 `&`
`&#34`（十进制）和 `&#x22`（十六进制）	表示双引号 `"`
`&#39`（十进制）和 `&#x27`（十六进制）	表示单引号 `'`
`&#160`（十进制）和 `&#xA0`（十六进制）	表示不断行空格

在 HTML 文档中使用字符实体的一个例子是，如果你想显示小于号和大于号，而不是使用它们来创建标签，你可以这样写：
1
<p>5 < 10</p>
这将在网页上显示为 "5 < 10"，而不会被浏览器解释为 HTML 标签的开始。

常用标签（文本修饰）

<b>：加粗文本，表示文本的重要性。
1
<b>加粗文本</b>
<i>：斜体文本，用于表示技术术语、外来语等。
1
<i>斜体文本</i>
<strong>：强调文本，并且常常以加粗的方式显示，表明它比 <b> 标签的语义重要性更高。
1
<strong>重要文本</strong>
<em>：加强强调，通常显示为斜体，语义上比 <i> 标签更强烈。
1
<em>强调文本</em>
<mark>：标记文本，用于突出显示部分文本，常常背景为黄色。
1
<mark>被标记的文本</mark>
<small>：将文本的字体大小设置为稍小一些，通常用于打印细节或免责声明。
1
<small>较小的文本</small>
<sub>：下标文本，常用于化学公式或数学表达式。
1
H<sub>2</sub>O
<sup>：上标文本，也常用于科学书写。
1
E=mc<sup>2</sup>
<del>：删除线文本，用于表示文本已被删除。
1
<del>这段文本已删除</del>
<ins>：下划线文本，用于标记被添加到文档中的文本。
1
<ins>这段文本是新增的</ins>
<s>：不推荐使用这个标签，它产生删除线效果，但没有 <del> 的语义。
1
<s>不再有效的文本</s>
<u>：下划线文本，但应该小心使用，因为下划线通常用来表示超链接。
1
<u>下划线文本</u>
<abbr>：缩写或首字母缩略词，可以为其提供一个 title 属性，以便提供完整形式。
1
<abbr title="HyperText Markup Language">HTML</abbr>
<cite>：引用作品的标题，通常以斜体显示。
1
<cite>《引用的书名》</cite>
<q>：短引用，用于短的引用文本，通常包含在引号中。
1
<q>这是一个短引用</q>
font>（不推荐使用）：在早期的 HTML 版本中，<font> 标签用于指定文本的字体、大小、颜色等样式属性。然而，它已经在 HTML5 中被废弃，因为样式应该使用 CSS（层叠样式表）来设置。
1
<p style="font-family: Arial; font-size: 14px; color: red;">这是一些文本。</p>
<h1>-<h6>：这些标签用来定义 HTML 文档中的标题。<h1> 代表最高的标题等级，而 <h6> 代表最低的。这些标签不但对于页面结构很重要，对于搜索引擎优化（SEO）同样重要，因为它们提供了文档结构的概述。
1
2
3
4
5
6
<h1>主标题</h1>
<h2>次级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
使用标题标签时，最好按照逻辑顺序来创建文档的结构。通常，一个页面只应该有一个 <h1> 标签，它通常用于主要标题或页面标题，然后是次级标题 <h2>，依此类推，这有助于搜索引擎理解页面内容的层级结构。

常用标签（格式控制）

段落 <p>: 用于定义文本的段落。浏览器会自动在段落的前后添加空白（margin）。
1
<p>这是一个段落。</p>
换行 <br>: 用于在不开始新段落的情况下换行。
1
这是第一行。<br>这是第二行。
水平线 <hr>: 在内容中创建一条水平线，通常用作内容分隔符。
1
2
3
<p>段落一</p>
<hr>
<p>段落二</p>
预格式化文本 <pre>: 文本会按照 HTML 代码中的编写格式显示，保留空白和换行。
1
2
3
4
5
<pre>
预格式化文本
会保留空格和
换行。
</pre>

块引用 <blockquote>: 用于引用一段较长的文本，浏览器通常会对其进行缩进。

1
2
3

<blockquote cite="http://www.worldwildlife.org/who/index.html">
    对于自然界和人类的未来，保护自然环境是非常重要的。
</blockquote>

文本方向 <bdo>: 用于覆盖默认的文本方向。

1	<bdo dir="rtl">这行文本会从右向左显示。</bdo>

滚动的文本或图片 <marquee> :

<marquee> 是一个非标准的 HTML 标签，用于创建一个滚动的文本或图片。这个标签虽然被广泛的浏览器支持，但它不是 W3C 标准的一部分，并且现代的 HTML 规范（HTML5）中已经不推荐使用。事实上，使用 <marquee> 标签可能会导致网页在不同浏览器中表现不一致，并且对于搜索引擎优化（SEO）和无障碍访问（Accessibility）也不友好。
尽管如此，下面是一个 <marquee> 标签的基本示例：
1
<marquee>这是一个滚动的文本!</marquee>
该标签有几个属性可以用来控制滚动的行为，例如：
- direction: 滚动方向，可能的值包括 "left"、"right"、"up" 和 "down"。
- width: 滚动元素的宽度。
- height: 滚动元素的高度。
- scrollamount: 滚动的速度。
- scrolldelay: 滚动之间的延迟时间（毫秒）。
- loop: 滚动的次数。

一个更复杂的例子可能看起来像这样：

1
2
3

<marquee direction="up" width="200" height="100" scrollamount="2" scrolldelay="20" loop="infinite">
    这个文本会向上滚动。
</marquee>

尽管 <marquee> 可以实现文本或图片的滚动效果，但现代网页设计中推荐使用 CSS 动画来创建更加标准化和可控的滚动效果。例如，可以使用 CSS 的 @keyframes 规则和 animation 属性来创建自定义的滚动动画，这样的动画更加灵活，并且更好地整合进网页的整体设计中。

以下是使用 CSS 创建水平滚动文本效果的一个简单示例：

<style>
    @keyframes scroll-left {
        0% {
            transform: translateX(100%);
        }

        100% {
            transform: translateX(-100%);
        }
    }

    .scroll-text {
        display: block;
        width: 100%;
        overflow: hidden;
        white-space: nowrap;
        box-sizing: border-box;
    }

    .scroll-text p {
        display: inline-block;
        padding-left: 100%;
        /* Ensure it starts from outside the view */
        animation: scroll-left 10s linear infinite;
    }
</style>

<div class="scroll-text">
    <p>这是使用CSS创建的滚动文本效果。</p>
</div>

在这个例子中，.scroll-text p 元素会不断地从右向左滚动，创建一个无限循环的滚动效果。这种方法更加现代，也更容易控制和维护。

列表：

有序列表 <ol>：列表项按顺序编号
在 HTML4.01 中，type 属性是标准的；但在 HTML5 中，type 属性仍然可以使用，但已经不再是最佳实践。

type="1": 默认值。使用数字进行编号（1, 2, 3, ...）。
type="A": 使用大写字母进行编号（A, B, C, ...）。
type="a": 使用小写字母进行编号（a, b, c, ...）。
type="I": 使用大写罗马数字进行编号（I, II, III, ...）。

type="i": 使用小写罗马数字进行编号（i, ii, iii, ...）。

<ol type="1">
    <li>第一项</li>
    <li>第二项</li>
    <li>第三项</li>
</ol>

<ol type="A">
    <li>第一项</li>
    <li>第二项</li>
    <li>第三项</li>
</ol>

<ol type="a">
    <li>第一项</li>
    <li>第二项</li>
    <li>第三项</li>
</ol>

<ol type="I">
    <li>第一项</li>
    <li>第二项</li>
    <li>第三项</li>
</ol>

<ol type="i">
    <li>第一项</li>
    <li>第二项</li>
    <li>第三项</li>
</ol>

在 HTML5 中，推荐使用 CSS 来控制列表项的类型显示样式：

<ol style="list-style-type: upper-roman;">
    <li>第一项</li>
    <li>第二项</li>
    <li>第三项</li>
</ol>

无序列表 <ul>：列表项没有编号
在 HTML 中，无序列表 <ul> 的项目符号样式可以通过 type 属性在旧版本的 HTML（如 HTML 4.01 及更早版本）中指定，但这在 HTML5 中已不再支持。在 HTML 4.01 中，type 属性接受以下值：

type="disc": 默认值。使用实心圆圈作为列表项的标记。
type="circle": 使用空心圆圈作为列表项的标记。

type="square": 使用实心方块作为列表项的标记。

<ul type="disc">
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
</ul>

<ul type="circle">
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
</ul>

<ul type="square">
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
</ul>

在 HTML5 中，建议使用 CSS 的 list-style-type 属性来指定无序列表的项目符号样式。下面是一个使用 CSS 来定义无序列表样式的例子：

<style>
    .list-disc {
        list-style-type: disc;
    }

    .list-circle {
        list-style-type: circle;
    }

    .list-square {
        list-style-type: square;
    }
</style>

<ul class="list-disc">
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
</ul>

<ul class="list-circle">
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
</ul>

<ul class="list-square">
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
</ul>

描述列表 <dl>：用于列出术语及其描述

<dl>
    <dt>HTML</dt>
    <dd>超文本标记语言。</dd>
    <dt>CSS</dt>
    <dd>层叠样式表。</dd>
</dl>

同一资源定位符（URL）（重点）

统一资源定位符（Uniform Resource Locator）是一种用于在互联网上定位资源的参考或地址。它可以用来访问网页、图像、视频、下载文件等各种资源。URL 通常包括以下几个部分：
1. 协议（或称为方案）: 它指定了如何访问资源。最常见的协议是 http（超文本传输协议）和 https（安全超文本传输协议），但还有其他协议如 ftp（文件传输协议）、mailto（电子邮件地址）等。
2. 主机名（或称为域名）: 它标识了资源所在的服务器的位置。例如，www.example.com。
3. 端口（可选）: 用于访问资源的服务器上的特定端口。如果未指定，则通常使用协议的默认端口（例如，http 的默认端口是 80，https 的默认端口是 443）。
4. 路径: 定位服务器上特定资源的路径。例如，/path/to/myfile.html。
5. 查询字符串（可选）: 以 ? 开头，后面跟着一系列的参数，通常用于向服务器发送信息或请求，参数间通常以 & 分隔。
6. 片段（可选）: 以 # 开头，后面是一个锚点名，用于定位网页上的某个位置。
一个完整的 URL 示例看起来可能是这样的：
1
https://www.example.com:443/path/to/myfile.html?search=query#section
- https: 使用的协议（安全超文本传输协议）。
- www.example.com: 主机名或域名。
- 443: 端口号（https 的默认端口，通常可以省略）。
- /path/to/myfile.html: 访问资源的路径。
- search=query: 查询字符串，可以包含多个用 & 分隔的键值对。
- #section: URL 片段指向网页上的一个锚点。
URL 是 Internet 上交流和数据检索的基础，它使得用户能够通过浏览器或其他客户端软件访问和分享网络上的资源。

超链接（重点）

超链接是 HTML 中的一种基础元素，它允许用户从一个网页跳转到另一个网页或网页上的特定部分，也可以用来启动电子邮件程序或下载文件。超链接通过 <a> 标签（anchor 标签）来创建。
基本的 <a> 标签包含以下几个属性：
1. href (Hypertext Reference): 这是最重要的属性，它指定了链接的目的地，可以是一个 URL、一个网页内的锚点或者一个 JavaScript 代码段（以 javascript: 开头）。
2. target: 该属性定义了浏览器应如何打开链接文档。
  - _blank：在新窗口或标签页打开
  - _self：在相同的框架或者窗口打开，这是默认行为
  - _parent：在父框架中打开，如果已经是最顶层，则效果等同于 _self
  - _top：在整个窗口中打开，取消所有框架
3. rel: 这个属性定义了当前文档与链接文档之间的关系，例如 noopener 或 nofollow。
  - noopener
    - noopener 是一个 HTML 超链接标签 <a> 的 rel 属性值，用于在用户点击链接时提高安全性和性能。
    - 当你使用 target="_blank" 属性打开新标签时，新页面将运行在同一个进程中，并且通过 window.opener 属性有权访问打开它的原始页面。这可以导致以下两个问题：
      - 安全性问题：新页面可以通过 JavaScript 更改原始页面的位置，这可以被恶意网站利用，比如进行钓鱼攻击。
      - 性能问题：新页面共享同一进程可能会影响原始页面的性能，因为新页面的 JavaScript 可以占用处理时间。
    - 通过在超链接的 rel 属性中添加 noopener，可以阻止新页面访问 window.opener 属性，并且通常会导致浏览器以新的进程打开新页面，从而解决上述两个问题。
      1
      <a href="https://www.example.com" target="_blank" rel="noopener">打开Example网站</a>
    - 这里，rel="noopener" 指示浏览器打开一个没有指向打开它的页面的引用的新标签，这样，www.example.com 就不能操控打开它的原始页面了。
    - 在现代浏览器中，当你使用 target="_blank" 时，默认安全设置已经包括了 rel="noopener" 的效果。然而，为了确保安全性并兼容那些没有这个默认设置的老旧浏览器，最好还是显式地添加 noopener 属性。
  - nofollow
    - nofollow 是一个在 rel 属性中使用的值，它告诉搜索引擎不要追踪或不要给予特定超链接中目标 URL 任何权重。通常，当一个网站链接到另一个网站时，搜索引擎会考虑这个链接作为一种 “投票”，或者对目标网站的信任和权威的认可。使用 nofollow 告诉搜索引擎：“我不能或不想为这个链接的目标站点背书，不要把这个链接作为排名的因素。”
    - 这个属性通常用于：
      - 防止评论垃圾：在博客或论坛等用户可以留言的网站上，nofollow 用于用户生成的链接，以避免搜索引擎认为这些不可控的链接是站点管理员所背书的。
      - 对付付费链接：按照 Google 等搜索引擎的指南，所有付费链接都应该是 nofollow 的，以保证搜索引擎结果的公正性。
      - 选择性地指导搜索引擎爬虫：网站的站长可能希望引导搜索引擎优先考虑网站的某些部分，而不是那些不太重要的链接。
    - 以下是一个使用 nofollow 属性的例子：
      1
      <a href="https://www.example.com" rel="nofollow">这是一个nofollow链接</a>
    - 在这个例子中，超链接指向 https://www.example.com，并且使用了 nofollow 属性。这意味着搜索引擎在抓取当前页面时，会看到这个链接，但不会因为这个链接给予 example.com 网站任何额外的信任或权威评级。这对于避免赋予不受信任或未经核实的内容链接权重是非常有用的。
4. title: 提供关于链接的额外信息，这些信息会在用户将鼠标悬停在链接上时显示为工具提示。
5. type: 指定链接文档的 MIME 类型。
6. download: 指示浏览器下载 URL 而不是导航到它，可以将其设置为下载文件的名称。
7. name: 在早期的 HTML 规范中，<a> 标签可以使用 name 属性来创建锚点（anchor points），用户可以通过超链接直接跳转到这些锚点。然而，在 HTML5 中，使用元素的 id 属性来代替 <a> 标签的 name 属性已成为创建锚点的推荐方法。

一个基础的超链接看起来像这样：

1	<a href="https://www.example.com">访问Example网站</a>

如果你想在新窗口中打开链接，你可以添加 target="_blank" 属性：

1	<a href="https://www.example.com" target="_blank">在新窗口中打开Example网站</a>

如果你想定义下载链接，并指定下载的文件名：

1	<a href="/path/to/file.pdf" download="NewFileName.pdf">下载PDF文件</a>

超链接可以链接到网页的特定部分，这通过链接到一个有 ID 的元素来实现：

<!-- 这个链接将会导航到同一页面的id为section2的元素 -->
<a href="#section2">跳到第二节</a>

<!-- 页面中的某个部分 -->
<div id="section2">这里是第二节内容</div>

多媒体标签

简介
在 HTML 中，多媒体标签允许开发者在网页上嵌入各种类型的媒体资源，如图片、音频、视频等。
图片（<img>）
- 简介
  <img> 标签用于在 HTML 页面上嵌入图像文件。
- 属性
  - src (必需的): 指定图像文件的路径。
  - alt (推荐的): 提供图像的替代文本，用于图像无法显示时或屏幕阅读器。
  - width 和 height: 指定图像的尺寸（以像素为单位）。
  - title: 提供图像的额外信息，通常在鼠标悬停时显示。
- 示例
  1
  <img src="image.jpg" alt="描述图像内容的文本" width="500" height="600">
音频（<audio>）
- 简介
  <audio> 标签用于在文档中嵌入音频内容。
- 属性
  - src: 指定音频文件的路径。
  - controls: 如果存在此属性，则浏览器将提供播放、暂停和音量控制。
  - autoplay: 音频加载后立即开始播放（不建议使用，因为会影响用户体验）。
  - loop: 音频结束后重新开始播放。
  - muted: 默认静音播放音频。
  - preload: 指示浏览器是否应在页面加载时加载音频数据。
- 示例
  1
  2
  3
  4
  5
  <audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  <source src="audio.ogg" type="audio/ogg">
  您的浏览器不支持音频标签。
  </audio>

视频 `<video>`

简介
<video> 标签用来嵌入视频内容，它支持多种视频格式。
属性
- src: 指定视频文件的路径。
- controls: 如果存在此属性，则浏览器将提供播放、暂停、音量和全屏等控制。
- autoplay: 视频加载后立即开始播放（同样不建议使用）。
- loop: 视频结束后重新开始播放。
- muted: 默认静音播放视频。
- preload: 指示浏览器是否应在页面加载时加载视频数据。
- poster: 在视频播放之前显示的封面图像路径。
- width 和 height: 指定视频播放器的尺寸。

示例

<video controls width="320" height="240" poster="poster.jpg">
    <source src="video.mp4" type="video/mp4">
    <source src="video.ogg" type="video/ogg">
    您的浏览器不支持视频标签。
</video>

嵌入对象（<embed>、<object>）
- 简介
  这些标签用于嵌入各种类型的多媒体，如 Flash、PDF、SVG 等。
- 属性
  - <embed> 属性:
    - src: 嵌入内容的路径。
    - type: 嵌入内容的 MIME 类型。
    - width 和 height: 指定嵌入内容的尺寸。
  - <object> 属性:
    - data: 嵌入内容的路径。
    - type: 内容的 MIME 类型。
    - width 和 height: 指定对象的尺寸。
- 示例
  - 示例 (使用 <embed>):
    1
    <embed src="movie.swf" type="application/x-shockwave-flash" width="400" height="300">
  - 示例 (使用 <object>):
    1
    2
    3
    <object data="file.pdf" type="application/pdf" width="300" height="200">
    <a href="file.pdf">Download PDF</a>
    </object>

表格（table）

简介
HTML 表格由 <table> 元素创建，并使用若干不同的元素来定义行、单元格、标题等。
表格标签和属性
- <table>: 这个标签用来创建表格。
  - border: 指定表格的边框宽度。
  - bgcolor: 用于设置表格、行、单元格的背景颜色。
  - bordercolor: 用于设置表格边框的颜色。
  - width: 定义表格的宽度。
  - height: 定义表格的高度。
  - cellpadding: 定义单元格内边距。
  - cellspacing: 定义单元格之间的空间。
  - align: 定义表格相对周围元素的对齐方式，值可以是 left、right、center、justify 等。
- <tr>: 表示表格的一行（Table Row）。
  - align: 设置行内容的水平对齐方式。
  - valign: 设置行内容的垂直对齐方式，值可以是 top、middle、bottom 或 baseline。
- <th>: 表示表格的头部单元格（Table Header），通常用来表示列名。默认加粗居中显示。
  - scope: 用来指定这个表头是属于哪个范围的，可以是 row 或 col。
  - colspan: 定义单元格应横跨几列。
  - rowspan: 定义单元格应横跨几行。
- <td>: 表示表格的标准单元格（Table Data），用于展示数据。
  - colspan: 同 <th>。
  - rowspan: 同 <th>。
- <caption>: 定义表格标题，通常位于表格的上方。
- <thead>: 用来包围一组行，通常是表格头部的行。
- <tbody>: 用来包围主体部分的一组行。
- <tfoot>: 用来包围表格底部的一组行。

示例代码

以下是一个包含多数上述属性的简单 HTML 表格示例：

<table border="1" width="100%">
    <caption>课程表</caption>
    <thead>
        <tr>
            <th scope="col">时间</th>
            <th scope="col">星期一</th>
            <th scope="col">星期二</th>
            <th scope="col">星期三</th>
            <th scope="col">星期四</th>
            <th scope="col">星期五</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">09:00-10:00</th>
            <td>数学</td>
            <td>语文</td>
            <td>英语</td>
            <td rowspan="2">物理</td>
            <td>化学</td>
        </tr>
        <tr>
            <th scope="row">10:15-11:15</th>
            <td>体育</td>
            <td colspan="2">美术</td>
            <td>生物</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="6">注：星期六、日无课</td>
        </tr>
    </tfoot>
</table>

在这个示例中，我们创建了一个带边框的表格，它有一个标题 “课程表”，并且划分为标题、主体和底部三个部分。表头定义了六列，代表时间和星期一至星期五。在主体部分有两行，代示两个时间段的课程排列，其中 “物理” 这个单元格跨越了两行（rowspan="2"），而 “美术” 这个单元格跨越了两列（colspan="2"）。最后，表格底部有一个单元格被设置为跨越所有六列，显示注释信息。
注意：HTML5 中不推荐使用诸如 border, width, height, cellpadding, cellspacing, align 这样的表格布局属性，它们应该用 CSS 来控制以实现更好的样式和响应式设计。

分帧（iframe）

简介
HTML 中的 <iframe> 标签用于在当前 HTML 页面中嵌入另一个文档。这可以用于嵌入一个网页、视频、地图或其他从不同源加载的内容。
属性
- src: 指定内嵌页面的 URL。
  1
  <iframe src="https://www.example.com"></iframe>
- width 和 height: 设置 <iframe> 的宽度和高度。
  1
  <iframe src="https://www.example.com" width="600" height="400"></iframe>
- name: 为 <iframe> 定义一个名称，这个名称可以用作链接或表单的目标。
  1
  <iframe name="iframe1" src="https://www.example.com"></iframe>
- sandbox: 启用额外的限制条件，限制内嵌页面的行为，可以提供安全性。
  1
  <iframe sandbox src="https://www.example.com"></iframe>
  sandbox 属性可以采用以下值：
  - allow-forms: 允许表单提交。
  - allow-popups: 允许弹窗。
  - allow-same-origin: 允许与外层文档同源。
  - allow-scripts: 允许脚本运行。
  - allow-top-navigation: 允许内嵌内容导航到顶层窗口。
- frameborder: 设置 <iframe> 的边框。在 HTML5 中已经不推荐使用，改用 CSS 来设置。
  1
  <iframe src="https://www.example.com" frameborder="0"></iframe>
- allowfullscreen: 允许 <iframe> 中的内容全屏显示。
  1
  <iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" allowfullscreen></iframe>
- scrolling: 设置是否显示滚动条。在 HTML5 中这个属性已经不被推荐使用，应该使用 CSS 来控制。
  1
  <iframe src="https://www.example.com" scrolling="no"></iframe>
  scrolling 属性可以设置为以下值之一：
  - auto：默认值。浏览器会自动决定是否为内嵌内容显示滚动条。
  - yes：无论内嵌内容的大小如何，始终显示滚动条。
  - no：无论内嵌内容的大小如何，都不显示滚动条。
- srcdoc: 允许你直接在 <iframe> 标签内部定义 HTML 内容，而不是通过 src 属性加载外部页面。
  1
  <iframe srcdoc="<p>Hello, world!</p>"></iframe>
- seamless（已废弃）
  - 这个属性曾经用来提示浏览器以一种看起来像是当前页面自然部分的方式显示 <iframe> 。这个属性已经不再被 HTML5 支持。
  - 当你使用 <iframe> 时，应当考虑到安全和性能问题，因为 <iframe> 可能会导致页面加载变慢，并且如果嵌入的内容不可信，也存在潜在的安全风险。此外，<iframe> 的使用会导致一些无障碍性问题，因此在使用时需要额外注意。

综合示例

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Iframe Example</title>
        <style>
            /* 可以通过CSS设置iframe的边框 */
            iframe {
                border: 2px solid #000;
                border-radius: 4px;
                /* CSS属性为iframe添加圆角 */
            }
        </style>
    </head>
    <body>
        <h2>嵌入的Google地图</h2>
        <!-- 使用iframe展示Google地图 -->
        <iframe
            src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d241317.11609823212!2d72.57974262203758!3d23.02049784004505!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x395e84f2b5e3da4b%3A0x8c8c8e9a486a15ed!2sAhmedabad%2C%20Gujarat%2C%20India!5e0!3m2!1sen!2sus!4v1614302074726"
            width="600" height="450" allowfullscreen="" loading="lazy" <!-- 使用loading属性提高页面加载性能 -->
            referrerpolicy="no-referrer-when-downgrade"
            style="border:0;" <!-- 通过内联样式移除或者设置边框 -->
            title="Google Map of Ahmedabad"
            aria-hidden="false" <!-- 确保iframe内容对屏幕阅读器可见 -->
            tabindex="0"> <!-- 确保iframe可以被键盘访问 -->
        </iframe>
    </body>
</html>

在这个示例中，<iframe> 用于嵌入一个 Google 地图的视图。我们设置了如下属性：

src: 指定了要嵌入的地图的 URL。
width 和 height: 设置了 <iframe> 的尺寸。
allowfullscreen: 允许用户将嵌入的地图切换到全屏模式。
loading="lazy": 这是一个现代浏览器特性，用于延迟加载非关键资源，从而提高页面的加载性能。
referrerpolicy: 指定了当请求嵌入的资源时应该发送哪些 referrer 信息。
style: 通过内联样式设置了 <iframe> 的边框为 0，即无边框显示。
title: 为了提高无障碍性，给 <iframe> 添加了一个标题。
aria-hidden 和 tabindex: 这些属性帮助提高无障碍性，确保屏幕阅读器可以读取 <iframe> 内容，以及用户可以通过键盘导航到 <iframe>。

分帧（frameset）

简介
- <frameset> 是 HTML4 中的一个元素，它允许开发者将浏览器窗口分割成多个框架（frames），每个框架都可以加载不同的文档。
- <frameset> 标签在 HTML5 中已被废弃，因为它不符合现代 web 标准，并且不推荐使用，取而代之的是使用 CSS 布局和 <iframe> 元素。
参数
- frameset
  - rows：定义了水平分割的框架的高度。可以使用像素或百分比来设定多个值，比如 "100,*" 表示第一个框架高 100 像素，第二个框架占据剩下的空间。
  - cols：定义了垂直分割的框架的宽度。同样可以使用像素或百分比，比如 "*,200" 表示第一个框架占据剩下的空间，第二个框架宽 200 像素。
  - frameborder：定义是否显示框架间的边框。
  - framespacing：定义框架间的空间大小。
  - border：定义框架的边框宽度。
- frame
  <frame> 标签定义了 <frameset> 中的具体框架。每个 <frame> 元素都包含一个 src 属性，指向框架中要显示的 HTML 文档的 URL
- noframes
  <noframes> 标签用于为不支持框架的浏览器提供替代内容。如果浏览器不支持或禁用了框架，它将显示 <noframes> 标签内的内容。

综合示例

<!DOCTYPE html>
<html>
    <head>
        <title>Comprehensive Frameset Example</title>
    </head>
    <frameset rows="100,*,100" frameborder="1" border="5" bordercolor="blue">
        <frame src="top_frame.html" name="topFrame" scrolling="auto" noresize>
            <frameset cols="200,*,200" bordercolor="red">
                <frame src="left_frame.html" name="leftFrame" frameborder="0">
                    <frame src="main_frame.html" name="mainFrame" frameborder="1" scrolling="auto">
                        <frameset rows="50%,50%" frameborder="0">
                            <frame src="right_top_frame.html" name="rightTopFrame" noresize>
                                <frame src="right_bottom_frame.html" name="rightBottomFrame" noresize>
                        </frameset>
            </frameset>
            <frame src="bottom_frame.html" name="bottomFrame" scrolling="auto" noresize>
    </frameset>
    <noframes>
        <body>
            Your browser does not support frames. Here is a non-frame based version of the content:
            <ul>
                <li><a href="top_frame.html">Top Content</a></li>
                <li><a href="left_frame.html">Left Content</a></li>
                <li><a href="main_frame.html">Main Content</a></li>
                <li><a href="right_top_frame.html">Right Top Content</a></li>
                <li><a href="right_bottom_frame.html">Right Bottom Content</a></li>
                <li><a href="bottom_frame.html">Bottom Content</a></li>
            </ul>
        </body>
    </noframes>
</html>

在此例子中：

最外层的 <frameset> 被分为三个水平框架，rows="100,*,100" 表示顶部和底部框架的高度分别为 100 像素，而中间框架占据剩余空间。
中间框架又进一步被一个嵌套的 <frameset cols="200,*,200"> 分为三个垂直框架。
其中右侧框架又被一个嵌套的 <frameset> 分为两个水平框架。
每一个 <frame> 标签通过 src 属性设定了框架内容的来源。
noresize 属性用于阻止用户调整指定框架的大小。
bordercolor 属性用于设置框架之间边框的颜色。
scrolling="auto" 属性设置允许框架有滚动条。
<noframes> 标签包含了非框架支持的浏览器的备选内容，通常是链接到原框架内容的链接列表。

表单（form）（非常重要）

简介
HTML 表单（<form>）是用于收集用户输入的一种方便方式。一个 <form> 元素可以包含输入字段，如文本框、复选框、单选按钮、提交按钮等。
属性
- action：指定表单提交后，服务器上处理该提交的 URL。当表单被提交时，表单数据会发送到该 URL。
- method：指定表单数据提交到服务器时所使用的 HTTP 方法，通常是 GET 或 POST。
- enctype：当你需要在表单中进行文件上传时，这个属性决定了表单数据在提交到服务器时数据的编码类型。
  - application/x-www-form-urlencoded：这是默认编码类型，其中表单数据被编码为名称 / 值对。
  - multipart/form-data：当你需要在表单中上传文件时，必须使用这个编码类型。
  - text/plain：这种编码类型不进行编码。这是为调试目的而使用的。
- name：指定表单的名称。
- target：指定响应提交的结果显示的位置，如在一个新的标签页、当前页面或一个 iframe 中。
  - _self：默认目标，将表单的输出显示在包含表单的同一个 HTML 框架中。
  - _blank：将表单的输出加载到一个新的窗口或标签页中。
  - _parent：将表单的输出加载到父框架中。
  - _top：将表单的输出加载到整个窗口中。
- autocomplete：指示浏览器是否可以自动完成表单。可以设置为 on 或 off。
- novalidate：如果存在，那么表单数据在提交时不会被验证。
- accept-charset：指定服务器处理表单数据时所使用的字符编码。

综合示例

<!DOCTYPE html>
<html>
    <head>
        <title>Form Example</title>
    </head>
    <body>
        <form action="http://example.com/submit" method="post" enctype="multipart/form-data" name="userProfile"
            target="_blank" autocomplete="on">
            <label for="name">Name:</label>
            <input type="text" id="name" name="username" required>

            <label for="email">Email:</label>
            <input type="email" id="email" name="email">

            <label for="photo">Profile Photo:</label>
            <input type="file" id="photo" name="photo" accept="image/*">

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

            <label for="department">Department:</label>
            <select id="department" name="department">
                <option value="it">IT</option>
                <option value="hr">Human Resources</option>
                <option value="support">Support</option>
            </select>
            <button type="submit">Submit</button>
        </form>
    </body>
</html>

在这个例子中：

<form> 标签定义了一个表单。
action 属性设置为 "http://example.com/submit"，这意味着表单数据会被发送到这个 URL。
method 属性设置为 "post"，所以数据会以 HTTP POST 方法发送。
enctype 属性设置为 "multipart/form-data"，因为表单中包含文件上传。
target 属性设置为 "_blank"，所以提交后的页面会在新标签页中打开。
<input> 和 <select> 标签定义了不同类型的输入元素。
<input> 元素包含不同的 type 属性，如 "text"、"email"、"file" 和 "checkbox"。
<button> 标签定义了提交按钮，当用户点击此按钮时，表单会被提交。

练习

写一个 3*3 的表格，需要有标题、表头、内容显示，要求合并 1 和 4，8 和 9
写一个分帧页面，点击有联动的效果，功能不限
写一个表单，能使用 post 方法进行提交
- 自学 input 的其他类型和新的标签
- 完成：用户名、密码、性别 (单选)、爱好 (复选)、省份 (下拉)、简介 (文本域)、提交按钮
- 若想对齐，可以将上面的内容放在表格中

input

简介
HTML <input> 元素是表单的基本组成部分，它可以根据不同的类型来接受不同形式的用户输入。
类型（type 属性）
- button：创建一个可点击按钮，不提交表单。
- checkbox：创建一个复选框，允许从多个选项中选择多个选项。
- color：提供颜色选择器以选择颜色。
- date：允许用户选择日期（不包括时间）。
- datetime-local：允许用户选择日期和时间（没有时区）。
- email：用于应包含电子邮件地址的输入字段。
- file：允许用户选择一个或多个文件。
- hidden：用户不会看到的输入字段，但仍会提交其值。
- image：创建一个图像作为提交按钮。
- month：允许用户选择月份和年份。
- number：允许用户输入一个数字。
- password：创建一个隐藏文本的密码字段。
- radio：创建一个单选按钮。
- range：创建一个滑块以选择指定范围内的数字。
- reset：创建一个重置按钮，将表单重置为其初始值。
- search：用于搜索字段，例如站点搜索或 Google 搜索。
- submit：创建一个提交表单的按钮。
- tel：输入电话号码的字段。
- text：默认。创建一个文本字段。
- time：允许用户选择时间（没有日期）。
- url：用于应包含 URL 地址的输入字段。
- week：允许用户选择一周和年份。
常见属性
- name：输入字段的名称，表单数据提交到服务器时使用此名称作为键。
- id：元素的 ID，通常用于通过 CSS 或 JavaScript 引用该元素。
- value：元素的值，对于不同类型的输入，它可能有不同的含义。
- placeholder：一种提示（指导性文本），显示在输入字段为空时。
- required：此属性指定输入字段必须填写才能提交表单。
- disabled：此属性指定输入字段是禁用的，不能与之交互。
- readonly：此属性指定输入字段是只读的。
- size：文本输入字段的可见宽度。
- maxlength：允许的最大字符数。
- min、max：对于数字类型，这些属性定义了可接受的最小和最大值。
- pattern：定义输入字段的正则表达式模式，用于验证字段的值。
- autocomplete：此属性指示表单字段是否应启用自动完成。
- multiple：用于文件或电子邮件输入，允许多个值选择。
- step：为数字和日期输入定义合法的步长。

示例

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <title>Input Example</title>
    </head>

    <body>
        <form action="/submit" method="post">
            <label for="username">Username:</label>
            <input type="text" id="username" name="username" required placeholder="Enter your username"><br>

            <label for="password">Password:</label>
            <input type="password" id="password" name="password" required minlength="8"><br>

            <label for="email">Email:</label>
            <input type="email" id="email" name="email" placeholder="example@domain.com"><br>

            <label for="age">Age:</label>
            <input type="number" id="age" name="age" min="18" max="99"><br>

            <label for="birthdate">Birth Date:</label>
            <input type="date" id="birthdate" name="birthdate"><br>

            <label for="profile_pic">Profile Picture:</label>
            <input type="file" id="profile_pic" name="profile_pic" accept="image/*"><br>

            <input type="checkbox" id="agree" name="agree" value="yes">
            <label for="agree">I agree to the terms and conditions</label><br>

            <input type="radio" id="male" name="gender" value="male" checked>
            <label for="male">Male</label><br>
            <input type="radio" id="female" name="gender" value="female">
            <label for="female">Female</label><br>

            <input type="submit" value="Register">
        </form>
    </body>

</html>

在这个示例中，我们创建了一个简单的用户注册表单。表单包括文本、密码、电子邮件、数字和日期输入类型，并使用了 required、minlength、min 和 max 等属性来约束用户输入。此外，表单还包括文件上传、复选框和单选按钮，以及一个提交按钮。
在 HTML 表单中，<label> 元素通常与 <input> 元素一起使用，目的是提供更好的用户体验和无障碍访问。将 <label> 与 <input> 相关联有以下几个好处：
- 可用性：当用户点击或触摸 <label> 文本时，关联的 <input> 字段会自动获得焦点。这在移动设备上尤其有用，因为它增大了触摸目标区域，使得用户更容易选中小的输入框。
- 无障碍性：为视障用户使用屏幕阅读器的可访问性提高了标签。屏幕阅读器会读出 <label> 标签，使用户能够知道输入字段的意图。
- 清晰的表单结构：标签为用户提供了清晰的指示，说明应该在输入字段中输入什么信息。
要将 <label> 与 <input> 相关联，你可以采用以下两种方式：
1. 使用 for 属性：将 <label> 的 for 属性设置为与 <input> 的 id 属性相同的值。
  1
  2
  <label for="username">Username:</label>
  <input type="text" id="username" name="username">
  这种方法是最常见的，它允许 <label> 与 <input> 之间可以有其他 HTML 元素。
2. 将 <input> 放入 <label> 内：直接将 <input> 元素放到 <label> 元素内部。
  1
  2
  3
  <label>Username:
  <input type="text" name="username">
  </label>
  这种方法会隐式地将两者相关联，不需要 id 和 for 属性，但它限制了标记的布局，因为 <input> 必须位于 <label> 之内。

select

简介
HTML 的 <select> 元素代表一个提供多个选项的下拉列表，用户可以从中选择一个或多个选项。
<select> 的常见属性
- name：表单提交时代表元素的名称。
- id：元素的唯一标识符，常用于 CSS 样式和 JavaScript 引用。
- size：显示在不滚动情况下可见的选项数。
- disabled：禁用下拉列表，用户无法与之交云或更改其值。
- required：指定在提交表单之前用户必须选择一个选项。
- multiple：允许用户选择多个选项。
- autofocus：页面加载时自动聚焦此元素。
<option> 的常见属性
- value：选项的实际值，如果未指定，则默认使用选项显示的文本。
- selected：定义该选项在页面加载时是否被预先选中。
- disabled：禁用选项，用户无法选择它。
- label：选项的较短标签，如果没有提供，则使用选项的文本。

示例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Select Example</title>
</head>

<body>
    <form action="/submit-form" method="post">
        <label for="car">Choose a car:</label>
        <select name="car" id="car" required>
            <option value="">Select a car</option>
            <option value="volvo" selected>Volvo</option>
            <option value="saab">Saab</option>
            <option value="mercedes">Mercedes</option>
            <option value="audi">Audi</option>
        </select><br>

        <label for="cars">Choose multiple cars:</label>
        <select name="cars" id="cars" multiple size="4">
            <optgroup label="Swedish Cars">
                <option value="volvo">Volvo</option>
                <option value="saab">Saab</option>
            </optgroup>
            <optgroup label="German Cars">
                <option value="mercedes">Mercedes</option>
                <option value="audi">Audi</option>
            </optgroup>
        </select><br>

        <input type="submit">
    </form>
</body>

</html>

在此示例中：

第一个 <select> 元素有一个 name 属性 car，这意味着它的值将以 car 作为键提交。required 属性确保用户在提交表单之前必须选择一个选项。
Volvo 选项通过 selected 属性被预先选中。
第二个 <select> 元素有一个 name 属性 cars 和 multiple 属性，允许用户选择多个车辆，并通过 size 属性显示 4 个选项，而不需要滚动。
<optgroup> 元素用于将选项分组为 “Swedish Cars” 和 “German Cars”。这不仅有助于用户更好地理解选项的逻辑分组，也让屏幕阅读器的用户能够通过这些分组来理解选项的上下文。

textarea

简介
HTML <textarea> 元素表示一个可供用户输入多行纯文本的控件，通常用于收集用户的评论、反馈等多行文本信息。
<textarea> 的常见属性
- name：在表单提交时用于标识表单控件的名称。
- id：元素的唯一标识符，通常用于 CSS 样式和 JavaScript 引用。
- rows：指定文本区域的可见行数。
- cols：指定文本区域的列数，也就是宽度。
- placeholder：提供灰色提示文字，用于在用户未输入内容之前显示预期的输入。
- disabled：表明用户不能与文本区域交互。
- readonly：用户可以滚动文本区域，但不能编辑里面的内容。
- maxlength：允许的最大字符数。
- required：表示用户在提交表单之前必须填写文本区域。
- autofocus：页面加载时文本区域自动获得焦点。
- wrap：指定在提交表单时文本的硬换行行为，可以是 soft 或 hard。

示例

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <title>Textarea Example</title>
    </head>

    <body>
        <form action="/submit-comment" method="post">
            <label for="comment">Comment:</label><br>
            <textarea id="comment" name="comment" rows="4" cols="50" placeholder="Enter your comment here..."
                maxlength="200" required></textarea><br>
            <input type="submit" value="Submit">
        </form>
    </body>

</html>

在这个示例中：

使用 rows 和 cols 属性定义了 <textarea> 的尺寸，分别为 4 行高和 50 个字符宽。
placeholder 属性提供了一个灰色的提示文本，指导用户输入他们的评论。
maxlength 属性限制用户输入最多 200 个字符。
required 属性确保用户在表单提交之前必须在文本区域中输入内容。

当用户填写并提交表单时，服务器将接收到一个名为 comment 的字段，其中包含用户在 <textarea> 中输入的文本。这样，<textarea> 元素就允许用户提交格式自由的文本数据。

提交相关

input，type="submit"，标准的提交，可以将该按钮的值提交
button 标签，可以完成表单提交，但是不能提交该按钮的值
input，type="button"，长得像按钮，但是不能提交，可以结合 js 使用

表单使用说明

需要提交的内容必须放在 form 标签中，否则无法提交
任何标签都可以放在 form 标签中，但是只能提交特定的标签内容
提交的标签必须有 name 属性，单选和多选对应的 name 属性必须要一致
上传文件时，form 必须设置两个属性，method 必须是 post，enctype 必须是 multipart/form-datab
无法输入的提交选项，必须要指定 value，value 值尽可能简单

head 标签

说明：用于存放对网页进行说明的一些内容，不会显示在网页中

内容：

<!DOCTYPE html>
<html>
    <head>
        <!-- 网页的标题 -->
        <title>head标签使用</title>
        <!-- 简化的方式指定字符集 -->
        <meta charset="utf-8">
        <!-- 设置关键字 -->
        <meta name="keywords" content="python, java, h5, php, ui" />
        <!-- 设置描述 -->
        <meta name="description" content="python, java, h5, php, ui" />
        <!-- 指定文档类型及字符集 -->
        <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
        <!-- 延时刷新，不指定url刷新当前页面，制定后刷新当前页面 -->
        <meta http-equiv="refresh" content="3; url=http://www.yanclaire.xin/index.php" />
        <!-- 加载CSS文件 -->
        <link rel="stylesheet" type="text/css" href="css文件路径" />
    </head>
    <body>
        <h1>优化标准</h1>
    </body>
</html>

无意义标签

说明：虽然没有意义，但是可以将指定的一块内容分割开来，后面可以结合 css 和 js 进行使用
常用：div、span、header、footer、section

示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>无意义标签</title>
    </head>
    <body>
        <header>头部</header>
        <div>这是一个块级标签，没有意义</div>
        <div>这是一个块级标签，没有意义</div>
        <span>行级标签</span>
        <span>行级标签</span>
        <section>一块</section>
        <footer>脚部</footer>
    </body>
</html>

取消的 DTD

统一使用：<!DOCTYPE html>

概述

C/S 和 B/S 架构

C/S 架构

B/S 架构

工具

原理

标签

格式

特点

说明

全局架构标签

字符实体

常用标签（文本修饰）

常用标签（格式控制）

同一资源定位符（URL）（重点）

超链接（重点）

多媒体标签

简介

图片（<img>）

音频（<audio>）

视频 <video>

嵌入对象（<embed>、<object>）

表格（table）

简介

表格标签和属性

示例代码

分帧（iframe）

简介

属性

综合示例

分帧（frameset）

简介

参数

综合示例

表单（form）（非常重要）

简介

属性

综合示例

练习

input

简介

类型（type 属性）

常见属性

示例

select

简介

<select> 的常见属性

<option> 的常见属性

示例

textarea

简介

<textarea> 的常见属性

示例

提交相关

表单使用说明

head 标签

无意义标签

取消的 DTD

图片（`<img>`）

音频（`<audio>`）

视频 `<video>`

嵌入对象（`<embed>`、`<object>`）

`<select>` 的常见属性

`<option>` 的常见属性

`<textarea>` 的常见属性