HTML基础详解--语法/文档结构/基础表单

最新推荐文章于 2025-12-04 17:59:42 发布

原创最新推荐文章于 2025-12-04 17:59:42 发布 · 1.1k 阅读

25 ·

CC 4.0 BY-SA版权

文章标签：

#html #前端

1、什么是HTML

HTML（超文本标记语言——HyperText Markup Language）是构成 Web 世界的一砖一瓦。它定义了网页内容的含义和结构。除 HTML 以外的其他技术则通常用来描述一个网页的表现与展示效果（如 CSS），或功能与行为（如 JavaScript）。
简单来说，HTML定义了网页的基本骨架和基本内容。

1.1、HTML标签

HTML 元素通过“标签”（tag）将文本从文档中引出，标签由在“<”和“>”中包裹的元素名组成，HTML 标签里的元素名不区分大小写。也就是说，它们可以用大写，小写或混合形式书写。
例如，<title> 标签可以写成 <Title>，<TITLE> 或以任何其他方式。然而，习惯上与实践上都推荐将标签名全部小写。

1.2、HTML元素

在这里插入图片描述
我们元素的结构是：

开始标签（opening tag）：由元素的名称（本例中为段落的 p）包裹在开、闭角括号中组成。这个开始标签标志着元素开始或生效的位置。在此示例中，它位于段落文本的开始之前。
内容（content）：这是元素的内容。在此示例中，就是段落的文本。
结束标签（closing tag）：这与开始标签相同，只是在标签名称前包含一个正斜杠。这标志着元素的结束。忘记包含结束标签是一个常见的初学者错误，可能会产生奇特的结果。

元素是开始标签、内容和结束标签的总和。

1.2.1、嵌套元素

正确格式：

<p>我们的小猫脾气<strong>很</strong>暴躁。</p>

错误示例：

<p>我们的小猫脾气<strong>很暴躁。</p></strong>

1.2.2、空元素

有些元素只包含一个标签（也称作自闭合标签），通常用于在文档中插入/嵌入某些东西。这类元素被称为空元素。例如，img 元素可以在页面上嵌入一个图像文件：

<img
  src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png"
  alt="Firefox 图标" />

1.2.3、元素的属性

元素也可以有属性。属性看起来是这样的：

在这里插入图片描述
在这个例子中，class 属性是一个标识名称，用于通过样式信息来定位元素。

一个属性应该有：

一个在它和元素名之间的空格。（对于拥有多个属性的元素，属性之间也应该用空格分隔。）
属性名，后跟一个等号。
一个属性值，用开始和结束的引号包裹。

1.3、HTML中的特殊字符

在 HTML 中，字符 <、>、"、' 和 & 是特殊字符。它们是 HTML 语法本身的一部分。那么你如何在文本中包含这些特殊字符之一呢？你需要使用字符引用。这些是代表字符的特殊代码，用于在这些确切的情况下使用。每个字符引用都以一个**与号（&）开始，并以一个分号（;）**结束。

字面字符	字符引用等效项
<	`<`
>	`>`
"	`"`
’	`'`
&	`&`

例如，要显示HTML 中用 <p> 来定义段落元素

<p>HTML 中用 &lt;p&gt; 来定义段落元素</p>

1.4、HTML注释

HTML 有一种在代码中写注释的机制。

要编写 HTML 注释，请将其包裹在特殊标记  中。例如：

<p>我不在注释里</p>

<!-- <p>但我在注释里</p> -->

2、HTML文档基本格式

一个HTML文档的基本格式如下所示：

<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>My test page</title>
  </head>
  <body>
    <img src="images/firefox-icon.png" alt="My test image" />
  </body>
</html>

其中，

<!doctype html>——文档类型。这是必不可少的开头。了解即可！
<html></html>——<html> 元素。该元素包含整个页面的所有内容，也称作根元素。它还包含 lang 属性，设置页面的主要语种。
<head></head>——<head>元素。该元素作为想在 HTML 页面中包含但不想向用户显示的内容的容器。包括想在搜索结果中显示的关键字和页面描述、用于设置页面样式的 CSS、字符集声明等等。
<meta charset="utf-8">——该元素指明你的文档使用 UTF-8 字符编码，UTF-8 包括世界绝大多数书写语言的字符。它基本上可以处理任何文本内容。
<meta name="viewport" content="width=device-width">——视口元素可以确保页面以视口宽度进行渲染，避免移动端浏览器以比视口更宽的宽度渲染内容，导致内容缩小。
<title></title>——<title>元素。该元素设置页面的标题，显示在浏览器标签页上，也作为收藏网页的描述文字。
<body></body>——<body>元素。该元素包含期望让用户在访问页面时看到的全部内容，包括文本、图像、视频、游戏、可播放的音轨或其他内容。此时我们只有一个 <img> 元素，但接下来我们将添加更多的内容。

2.1、Meta——HTML元信息

2.1.1、使用description做SEO

指定一个包括与你的页面内容有关的关键词的描述是有用的，因为它有可能使你的页面在搜索引擎进行的相关搜索中出现得更多（这些行为在术语上被称为：搜索引擎优化或 SEO）。

description 也被使用在搜索引擎显示的结果页中。下面通过一个例子来说明：

访问 MDN Web 文档的首页。
查看网页源代码（通过鼠标右键点击网页在弹出的菜单中选择查看网页源代码）。

找到 description meta 标签。就和如下展示的这样（可能会时常改变）：

<meta
  name="description"
  content="The MDN Web Docs site
  provides information about Open Web technologies
  including HTML, CSS, and APIs for both Web sites and
  progressive web apps." />

现在，在你喜欢的搜索引擎里搜索“MDN Web Docs”（下图展示的是在谷歌搜索里的情况）。你会看到 description <meta> 和 <title> 元素如何在搜索结果里显示——很值得这样做哦！

2.1.2、在HTML中应用CSS和JavaScript

如今，几乎你使用的所有网站都会使用 CSS 来让网页更加炫酷，并使用 JavaScript 来让网页有交互功能，比如视频播放器、地图、游戏以及更多功能。这些应用在网页中很常见，它们分别使用 <link> 元素以及 <script> 元素。

<link> 元素经常位于文档的头部，它有 2 个属性，rel="stylesheet" 表明这是文档的样式表，而 href 包含了样式表文件的路径：

<link rel="stylesheet" href="my-css-file.css" />

<script>元素也应当放在文档的头部，并包含 src 属性来指向需要加载的 JavaScript 文件路径，同时最好加上 defer 以告诉浏览器在解析完成 HTML 后再加载 JavaScript。这样可以确保在加载脚本之前浏览器已经解析了所有的 HTML 内容。这样你就不会因为 JavaScript 试图访问页面上不存在的 HTML 元素而产生错误。

<script src="my-js-file.js" defer></script>

3、HTML的标题和段落

在 HTML 中，每个段落是通过 <p> 元素进行定义的，比如下面这样：

<p>我是一个段落，千真万确。</p>

每个标题都必须被包裹在一个标题元素中：

<h1>我是文章的标题</h1>

一共有六种标题元素标签——h1、h2、h3、h4、h5 和 h6。每个元素代表文档中不同级别的内容：<h1> 表示主标题，<h2> 表示二级子标题，<h3> 表示三级子标题，依此类推。

实现结构层级示例：

<h1>三国演义</h1>

<p>罗贯中</p>

<h2>第一回 宴桃园豪杰三结义 斩黄巾英雄首立功</h2>

<p>
  话说天下大势，分久必合，合久必分。周末七国分争，并入于秦。及秦灭之后，楚、汉分争，又并入于汉……
</p>

<h2>第二回 张翼德怒鞭督邮 何国舅谋诛宦竖</h2>

<p>
  且说董卓字仲颖，陇西临洮人也，官拜河东太守，自来骄傲。当日怠慢了玄德，张飞性发，便欲杀之……
</p>

<h3>却说张飞</h3>

<p>
  却说张飞饮了数杯闷酒，乘马从馆驿前过，见五六十个老人，皆在门前痛哭。飞问其故，众老人答曰：“督邮逼勒县吏，欲害刘公；我等皆来苦告，不得放入，反遭把门人赶打！”……
</p>

4、HTML中的强调与重要性

4.1、`<em>`标签

在 HTML 中我们用 <em>（emphasis）元素来标记强调的情况。这样做既可以让文档读起来更有趣，也可以被屏幕阅读器识别，并以不同的语调发出。

浏览器默认被<em> </em>包裹的样式为斜体。

实例：

<p>我很<em>庆幸</em>你没有<em>迟到</em>。</p>

4.2、`<strong>`标签

在 HTML 中我们用 <strong>（strong importance）元素来标记着重强调的情况。

浏览器默认被<strong> </strong>包裹的样式为粗体。

实例：

<p>这杯液体<strong>毒性很大</strong>。</p>

<p>就指望你了，千万<strong>不要</strong>迟到！</p>

5、HTML中的列表

5.1、无序列表 `<ul>`

每份无序的清单从 <ul> (unordered list，无序列表)元素开始，然后就是用 <li>（list item，列表项）元素把每个列出的项目单独包裹起来:

<ul>
  <li>豆浆</li>
  <li>油条</li>
  <li>豆汁</li>
  <li>焦圈</li>
</ul>

5.2、有序列表 `<ol>`

这个标记的结构和无序列表一样，除了需要用 <ol> （ordered list，有序列表）元素而不是 <ul> 元素将所有项目包裹：

<ol>
  <li>沿这条路走到头</li>
  <li>右转</li>
  <li>直行穿过第一个十字路口</li>
  <li>在第三个十字路口处左转</li>
  <li>继续走 300 米，学校就在你的右手边</li>
</ol>

5.3、描述列表 `<dl>`

描述列表的目的是标记一组项目及其相关描述，如术语和定义或问题和答案。

描述列表使用与其他列表类型不同的包裹标签——<dl>（description list，描述列表）；此外，每一项都用 <dt>（description term，描述术语）元素包裹。每个描述都用 <dd>（description definition，描述定义）元素包裹。

<dl>
  <dt>内心独白</dt>
  <dd>
    戏剧中，某个角色对自己的内心活动或感受进行念白表演，这些台词只面向观众，而其他角色不会听到。
  </dd>
  <dt>语言独白</dt>
  <dd>
    戏剧中，某个角色把自己的想法直接进行念白表演，观众和其他角色都可以听到。
  </dd>
  <dt>旁白</dt>
  <dd>
    戏剧中，为渲染幽默或戏剧性效果而进行的场景之外的补充注释念白，只面向观众，内容一般都是角色的感受、想法、以及一些背景信息等。
  </dd>
</dl>

6、HTML文档构建

6.1、文档的基本组成部分

网页的外观多种多样，但是除了全屏视频或游戏，或艺术作品页面，或只是结构不当的页面以外，都倾向于使用类似的标准组件：

页眉

通常是一个横跨顶部的大条带，上面有一个大标题、徽标，或许还有一个标语。这通常在网站的各个页面上保持不变。
导航栏

指向网站各个主要区段的超链接。通常用菜单按钮、链接或标签页表示。类似于标题栏，导航栏通常应在所有网页之间保持一致，否则会让用户感到疑惑，甚至无所适从。
主内容

中心的大部分区域是当前网页大多数的独有内容，例如视频、文章、地图、新闻等。这些内容是网站的一部分，且会因页面而异。
侧边栏

一些外围信息、链接、引用、广告等。通常与主内容相关（例如一个新闻页面上，侧边栏可能包含作者信息或相关文章链接），还可能存在其他的重复元素，如辅助导航系统。
页脚

横跨页面底部的条带，通常包含细小文字、版权声明或联系信息。它是放置常用信息（如页眉）的地方，但通常这些信息对网站本身并不重要。页脚有时也用于 SEO，提供快速访问热门内容的链接。

一个“典型的网站”可能会这样布局：

在这里插入图片描述
通过使用正确的 CSS，你可以使用几乎任何元素来环绕不同的部分，并获得你想要的外观，但正如之前所讨论的，我们需要尊重语义，使用正确的元素来完成正确的工作。

为了实现语义化标记，HTML 提供了明确这些区段的专用标签，例如：

页眉：<header>。
导航栏：<nav>。
主内容：<main>。主内容中还可以有各种子内容区段，可用 <article>、<section> 和 <div> 等元素表示。
侧边栏：<aside>。经常放置在 <main> 中。
页脚：<footer>。

上图的示例可用下面的代码表示（你也可以在 GitHub 仓库上找到我们的示例）

index.html

<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <title>我的页面标题</title>
    <link
      href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Sonsie+One"
      rel="stylesheet" />
    <link rel="stylesheet" href="styles.css" />
  </head>

  <body>
    <!-- 本站所有网页的统一主标题 -->
    <header>
      <h1>页眉</h1>
    </header>

    <nav>
      <ul>
        <li><a href="#">主页</a></li>
        <li><a href="#">我们的团队</a></li>
        <li><a href="#">项目</a></li>
        <li><a href="#">联系方式</a></li>
      </ul>

      <!-- 搜索栏是站点内导航的一个非线性的方式。 -->

      <form>
        <input type="search" name="q" placeholder="要搜索的内容" />
        <input type="submit" value="搜索" />
      </form>
    </nav>

    <!-- 网页主体内容 -->
    <main>
      <!-- 一篇文章 -->
      <article>
        <h2>文章标题</h2>

        <p>
          但我得向你解释，所有这些谴责快乐和颂扬痛苦的错误观念是如何产生的。为此，我会向你一五一十地说明这一体系，并阐述伟大的真理探索者、人类幸福的杰出建设者的真实教义。
        </p>

        <section>
          <h3>子章节</h3>

          <p>
            没有人因为快乐是快乐而拒绝、厌恶或回避快乐本身，而是因为不知道如何理性地追求快乐的人会遭遇极其痛苦的后果。也没有人因痛苦是痛苦而喜欢或追求或渴望获得痛苦本身，但也偶有辛劳和痛苦能带来极大的快乐的情景。
          </p>

          <p>
            举个微不足道的例子，若不是从中获得好处，我们当中有谁会进行艰苦的体育锻炼？但是，倘若没有恼人的后果，谁有权利指责选择享受快乐的人呢？或者倘若得不到相应快乐，谁能谴责选择避免痛苦的人呢？
          </p>
        </section>

        <section>
          <h3>另外一个子章节</h3>

          <p>
            另一方面，我们以正义的愤慨谴责并厌恶那些被及时行乐迷惑得萎靡不振，被欲望蒙蔽得看不见大难临头的人；因意志软弱而不能履行职责的人，也应受到同样的谴责，这无异于在辛劳和痛苦前退缩。这些情况非常简单且容易区分。闲暇时，当我们的选择权不受限制，当没有什么可以阻止我们做自己最喜欢的事情时，任何快乐都应该受到欢迎，任何痛苦都应该避免。但是在某些情况下，由于责任或商业义务的要求，不时会有不得不拒绝享乐而接受烦恼的情况。
          </p>

          <p>
            因此，智者在这些事情上总是坚持选择的原则：拒绝快乐以获得更大的快乐，或者忍受痛苦以避免更重的痛苦。
          </p>
        </section>
      </article>

      <!-- 辅助内容也可以嵌套在主要内容中 -->
      <aside>
        <h2>相关内容</h2>

        <ul>
          <li><a href="#">哦，我喜欢海边</a></li>
          <li><a href="#">哦，我也喜欢海边</a></li>
          <li><a href="#">尽管在英格兰北部</a></li>
          <li><a href="#">也永远不会停止下雨</a></li>
          <li><a href="#">哦，好吧……</a></li>
        </ul>
      </aside>
    </main>

    <!-- 本站所有网页的统一页脚 -->

    <footer>
      <p>© 2050 某某保留所有权利</p>
    </footer>
  </body>
</html>

styles.css与index.html置于同一路径下

/* || General setup */

html, body {
  margin: 0;
  padding: 0;
}

html {
  font-size: 10px;
  background-color: #a9a9a9;
}

body {
  width: 70%;
  margin: 0 auto;
}

/* || typography */

h1, h2, h3 {
  font-family: 'Sonsie One', cursive;
  color: #2a2a2a;
}

p, input, li {
  font-family: 'Open Sans Condensed', sans-serif;
  color: #2a2a2a;
}

h1 {
  font-size: 4rem;
  text-align: center;
  color: white;
  text-shadow: 2px 2px 10px black;
}

h2 {
  font-size: 3rem;
  text-align: center;
}

h3 {
  font-size: 2.2rem;
}

p, li {
  font-size: 1.6rem;
  line-height: 1.5;
}

/* || header layout */

nav, article, aside, footer {
  background-color: white;
  padding: 1%;
}

nav {
  height: 50px;
  background-color: #ff80ff;
  display: flex;
  margin-bottom: 10px;
}

nav ul {
  padding: 0;
  list-style-type: none;
  flex: 2;
  display: flex;
}

nav li {
  display: inline;
  text-align: center;
  flex: 1;
}

nav a {
  display: inline-block;
  font-size: 2rem;
  text-transform: uppercase;
  text-decoration: none;
  color: black;
}

nav form {
  flex: 1;
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 2em;
}

input {
  font-size: 1.6rem;
  height: 32px;
}

input[type="search"] {
  flex: 3;
}

input[type="submit"] {
  flex: 1;
  margin-left: 1rem;
  background: #333;
  border: 0;
  color: white;
}

/* || main layout */

main {
  display: flex;
}

article {
  flex: 4;
}

aside {
  flex: 1;
  margin-left: 10px;
  background-color: #ff80ff;
}

aside li {
  padding-bottom: 10px;
}

footer {
  margin-top: 10px;
}

6.2、换行与水平分割线

有时会用到 <br> 和 <hr> 两个元素，需要介绍一下。

6.2.1、`<br>`：换行元素

<br> 可在段落中进行换行；<br> 是唯一能够生成多个短行结构（例如邮寄地址或诗歌）的元素。比如：

<p>
  从前有个人叫小高<br />
  他说写 HTML 感觉最好<br />
  但他写的代码结构语义一团糟<br />
  他写的标签谁也懂不了。
</p>

6.2.2、`<hr>`：主题性中断元素

<hr> 元素在文档中生成一条水平分割线，表示文本中主题的变化（例如话题或场景的改变）。一般就是一条水平的直线。

<p>
  原来这唐僧是个慈悯的圣僧。他见行者哀告，却也回心转意道：“既如此说，且饶你这一次。再休无礼。如若仍前作恶，这咒语颠倒就念二十遍！”行者道：“三十遍也由你，只是我不打人了。”却才伏侍唐僧上马，又将摘来桃子奉上。唐僧在马上也吃了几个，权且充饥。
</p>
<hr />
<p>
  却说那妖精，脱命升空。原来行者那一棒不曾打杀妖精，妖精出神去了。他在那云端里，咬牙切齿，暗恨行者道：“几年只闻得讲他手段，今日果然话不虚传。那唐僧已此不认得我，将要吃饭。若低头闻一闻儿，我就一把捞住，却不是我的人了。不期被他走来，弄破我这勾当，又几乎被他打了一棒。若饶了这个和尚，诚然是劳而无功也。我还下去戏他一戏。”
</p>

7、HTML中的超链接

7.1、基本链接

通过将文本或其他内容包裹在 <a> 元素内，并给它一个包含网址的 href 属性（也称为超文本引用或目标，它将包含一个网址）来创建一个基本链接。

<p>
  我创建了一个指向
  <a href="https://www.mozilla.org/zh-CN/">Mozilla 主页</a>的链接。
</p>

使用title属性添加支持信息

你可能要添加到你的链接的另一个属性是 title。这旨在包含关于链接的补充信息（当鼠标指针悬停在链接上时，标题将作为提示信息出现），例如页面包含什么样的信息或需要注意的事情。

<p>
  我创建了一个指向
  <a
    href="https://www.mozilla.org/zh-CN/"
    title="了解 Mozilla 使命以及如何参与贡献的最佳站点。">
    Mozilla 主页</a
  >的超链接。
</p>

7.2、块级链接

就像之前提到的那样，任何内容，甚至块级元素都可以作为链接出现。如果想让标题元素变为链接，就把它包裹在锚点元素（<a>）内，像这个代码段一样：

<a href="https://developer.mozilla.org/zh-CN/">
  <h1>MDN Web 文档</h1>
</a>
<p>自从 2005 年起，就开始记载包括 CSS、HTML、JavaScript 等网络技术。</p>

7.3、图片链接

如果有需要作为链接的图片，使用 <a> 元素来包裹要引用图片的 <img> 元素。下面的示例使用相对路径来引用本地存储的 SVG 图像文件。

<a href="https://developer.mozilla.org/zh-CN/">
  <img src="mdn_logo.svg" alt="MDN Web 文档" />
</a>

7.4、链接到非 HTML 资源——留下清晰的指示

当链接到一个需要下载的资源（如 PDF 或 Word 文档）或流媒体（如视频或音频）或有另一个潜在的意想不到的效果（打开一个弹出窗口），你应该添加明确的措辞，以减少混乱。

7.4.1、需要下载的资源

当你链接到要下载的资源而不是在浏览器中打开时，你可以使用 download 属性来提供一个默认的保存文件名。下面是一个 Firefox 的 Windows 最新版本下载链接的示例：

<a
  href="https://download.mozilla.org/?product=firefox-latest-ssl&os=win64&lang=zh-CN"
  download="firefox-latest-64bit-installer.exe">
  下载最新的 Firefox 中文版 - Windows（64 位）
</a>

7.4.2、打开流媒体链接

<p>
  <a href="https://www.example.com/video-stream/" target="_blank">
    观看视频（将在新标签页中播放，HD 画质）
  </a>
</p>

8、HTML中的图片

要想在网页上放置简单的图像，我们需要使用 <img> 元素。这个元素是空元素（即无法包含任何子内容和结束标签），它需要两个属性才能起作用：src 和 alt。src 属性包含一个 URL，该 URL 指向要嵌入页面的图像。src 属性可以是相对 URL 或绝对 URL，这与 <a> 元素的 href 属性类似。如果没有 src 属性，img 元素就没有图像可加载。

<img
  src="images/dinosaur.jpg"
  alt="The head and torso of a dinosaur skeleton;
          it has a large head with long sharp teeth"
  width="400"
  height="341" />

使用<figure>和<figcaption>元素为图片添加注释

使用 HTML 的 <figure> 和 <figcaption> 元素，它正是为此而被创造出来的：为图片提供一个语义容器，在说明文字和图片之间建立清晰的关联。

<figure>
  <img
    src="images/dinosaur.jpg"
    alt="The head and torso of a dinosaur skeleton;
            it has a large head with long sharp teeth"
    width="400"
    height="341" />

  <figcaption>
    A T-Rex on display in the Manchester University Museum.
  </figcaption>
</figure>

<figcaption> 元素告诉浏览器和辅助技术工具，这段说明文字描述了 <figure> 元素的内容。

figure 里不一定要是图片，只要是这样的独立内容单元即可：

用简洁、易懂的方式表达意图。
可以置于页面线性流的某处。
为主要内容提供重要的补充说明。

figure 可以是几张图片、一段代码、音视频、方程、表格或类似的东西。

9、HTML中的表格

每一个表格的内容都包含在这两个标签中：<table></table>。
在表格中，最小的内容容器是单元格，是通过 <td> 元素创建的（其中“td”代表“table data”）。

如果我们想要一行四个单元格，我们需要把这组标签拷贝三次，更新你表中的内容，让它看起来是这样的：

<table>
    
<td>我是第一个单元格</td>
<td>我是第二个单元格</td>
<td>我是第三个单元格</td>
<td>我是第四个单元格</td>
    
</table>

如果想让这一行停止增加，并让单元格从第二行开始，我们需要使用<tr> 元素（其中“tr”代表“table row”）

把你已经创建好的 4 个单元格放入 <tr>标签，就像这样：

<tr>
  <td>我是第一个单元格</td>
  <td>我是第二个单元格</td>
  <td>我是第三个单元格</td>
  <td>我是第四个单元格</td>
</tr>

现在你已经实现了一行，可以继续增加至两行、三行。每一行都需要一个额外的 <tr> 元素来包装，每个单元格的内容都应该写在 <td> 中。

9.1、为表格中的列提供共同的样式

不使用<col>应用样式时；

<table>
  <tr>
    <th>数据 1</th>
    <th style="background-color: yellow">数据 2</th>
  </tr>
  <tr>
    <td>加尔各答</td>
    <td style="background-color: yellow">橙汁</td>
  </tr>
  <tr>
    <td>机器人</td>
    <td style="background-color: yellow">爵士乐</td>
  </tr>
</table>

在这里插入图片描述
使用<col>应用样式时；

可以在 <col> 元素上一次性指定信息，每一列都会应用相同的样式，而不是像上面这样做。<colgroup> 容器就在开始标记 <table> 下面，<col> 元素在 <colgroup> 容器内指定。

<table>
  <colgroup>
    <col />
    <col style="background-color: yellow" />
  </colgroup>
  <tr>
    <th>数据 1</th>
    <th>数据 2</th>
  </tr>
  <tr>
    <td>加尔各答</td>
    <td>橙汁</td>
  </tr>
  <tr>
    <td>机器人</td>
    <td>爵士乐</td>
  </tr>
</table>

定义了两个“样式列”，其中一个为第二列每列指定样式信息。没有为第一列设计样式，但仍必须包含一个空白的 <col> 元素，否则样式将只应用于第一列。

如果想将样式信息应用于两列，只需包含一个带有 span 属性的 <col> 元素即可，就像这样：

<colgroup>
  <col style="background-color: yellow" span="2" />
</colgroup>

就像 colspan 和 rowspan 一样，span 需要一个无单位的数字值，用来指定让这个样式应用到表格中多少列。

9.2、表格中的scope属性

scope 属性，可以添加在 <th> 元素中，以告诉屏幕阅读器该表头的类型——它是所在行的表头，还是所在列的表头。

我们给出的消费记录例子，你可以像这样明确地把表头定义为所在列的头部：

<thead>
  <tr>
    <th scope="col">购买</th>
    <th scope="col">位置</th>
    <th scope="col">时间</th>
    <th scope="col">评价</th>
    <th scope="col">成本 (€)</th>
  </tr>
</thead>

而每一行都可以有一个像这样定义的标题，即通过scope确认所在列的表头：

<tr>
  <th scope="row">理发</th>
  <td>理发店</td>
  <td>12/09</td>
  <td>好主意</td>
  <td>30</td>
</tr>

scope 还有两个可选的值：colgroup 和 rowgroup。这些用于位于多个列或行的顶部的标题。

如下列代码中，衣物为三列colgroup的表头。长裤，裙子，连衣裙则为各自列的col表头。

<thead>
  <tr>
    <th colspan="3" scope="colgroup">衣物</th>
  </tr>
  <tr>
    <th scope="col">长裤</th>
    <th scope="col">裙子</th>
    <th scope="col">连衣裙</th>
  </tr>
</thead>

再看下面的例子，荷兰为两行rowgroup的表头，阿姆斯特丹，乌特勒支则为各自行的row表头。

<tr>
  <th rowspan="2" scope="rowgroup">荷兰</th>
  <th scope="row">阿姆斯特丹</th>
  <td>89</td>
  <td>34</td>
  <td>69</td>
</tr>
<tr>
  <th scope="row">乌特勒支</th>
  <td>80</td>
  <td>12</td>
  <td>43</td>
</tr>

10、HTML中的表单和按钮

10.1、按钮

按钮通常是通过 HTML 的 <button> 元素创建的（有时也使用 <input> 元素并将其 type 属性设置为 button 或 submit 值）。

最简单的按钮可以通过以下代码实现如下：

<button>点击这里</button>

10.2、表单的结构

一个基础的表单包含以下三个部分：

一个 <form> 元素，用于包裹表单的所有内容。所有包含在 <form></form> 标签内的表单控件都属于同一个表单，它们的数据会在表单提交时一起发送。
一对或多对<label>元素与表单控件元素（通常是<input>元素，但也有其他类型，例如<select>）：
- 表单控件元素(<input>/<select>)允许用户选择或者输入一些数据，这些数据将在表单提交时发送到服务器。
- <label> 元素为表单控件提供一个标识标签，用于描述应在控件中输入的数据内容。
一个 <button> 元素，用于提交表单。

下面是一个表单示例：

<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <title>第一个表单</title>
  </head>
  <body>
    <form action="./submit_page" method="get">
      <h2>订阅我们的新闻简报</h2>
      <p>
        <label for="name">姓名（必填）：</label>
        <input type="text" name="name" id="name" required />
      </p>
      <p>
        <label for="email">邮箱（必填）：</label>
        <input type="email" name="email" id="email" required />
      </p>
      <p>
        <button>订阅新闻简报！</button>
      </p>
    </form>
  </body>
</html>

10.2.1、`<form>`元素

<form> 元素作为表单的外层容器，用于将所有的表单控件组织到一起。当点击 <button> 按钮时，所有在表单控件中填写的数据将会被提交到服务器。<form> 元素的两个最重要的属性是：

action：包含一个路径，用于指定提交的表单数据将发送到哪个页面进行处理。稍后，当你提交表单时，你会在 URL 中看到 /submit_page。你还会收到一个 404 错误响应，因为处理数据的页面实际上并不存在，但目前这样做是没有问题的。
method：指定将表单数据发送到服务器时使用的数据传输方法。现在你不必太过担心这个属性；当值为 get 时，数据会作为参数附加在 URL 的末尾进行发送。

检查提交的数据

在单独的浏览器标签页打开示例，尝试输入姓名“Bob”，电子邮件地址为“bob@bob.com”。
点击 <button>。

action 和 method 属性会使表单数据以下列 URL 形式提交：

/some/url/submit_page?name=Bob&email=bob%40bob.com

10.2.2、`<input>`元素

<input> 元素表示用户在表单中输入的各种数据项。让我们来看一个基础表单中的例子：

<input type="text" name="name" id="name" required />

这些属性的含义如下：

type：指定要创建的表单控件类型。表单控件类型有很多，从各种简单的文本字段，到单选按钮、复选框等。当值为 text 时，会渲染一个可接受任意文本的基本文本框。实际上，有许多专门用于处理特定类型数据的文本字段输入类型，例如：<input type ="number">、<input type ="password"> 和 <input type ="tel"> 等等。
name：为该数据项指定一个名称。当表单提交时，数据会以名值对（name/value pairs）的形式发送。一般来说，name 属性的值就是这个数据项的“名称”，而用户在文本框输入的数据就是这个数据项的“值”。
id：指定一个用于标识该元素的 ID。在这里，它用于将该表单控件与对应的 <label> 标签关联起来。
required：指定该表单控件在提交表单前必须填写。这应仅用于必填字段，而不应设置在可选字段上。

在<input>元素中，required 和 value 属性的实际效果

尝试在带有required属性的<input>元素字段未填写任何内容的情况下提交表单。你会在“Name”字段旁看到一条错误提示，例如“请填写此字段”（不同浏览器的提示内容可能会有所不同）。这就是 required 属性和浏览器默认的客户端表单验证机制在起作用。
接着，尝试在<input type="email"/>字段中输入一个无效的邮箱地址（例如“aaaa”）。这时你会在“Email”字段旁看到另一条错误提示，例如“请输入邮箱地址”。
现在尝试修改表单，在<input> 中加入 value="Bob"。当你重新加载页面时，会看到第一个输入框中默认填入了“Bob”。

10.2.3、`<label>`元素

<label> 元素为表单控件提供了标识性标签，用于描述应该在控件中输入的数据。你可以在 <label> 元素中放置任意文本内容，但这些内容应准确描述关联表单控件所期望的数据类型。标签与控件之间的关联方式是：给表单控件设置一个 id 属性，然后给 <label> 设置 for 属性，其值与该控件的 id 相同。

例如，

<label for="name">姓名（必填）：</label>
<input type="text" name="name" id="name" required />

在上文中看到的标签样式被称为显式表单标签——控件与标签之间的关联是通过 id 和 for 属性显式建立的。你也可以通过将控件嵌套在标签内的方式实现 隐式表单标签，如下所示：

<label>
  姓名（必填）：
  <input type="text" name="name" required />
</label>

通过嵌套方式，控件与标签之间的关联是隐式建立的，因此你不再需要使用 id 和 for 属性。

10.2.4、`<button>`元素

当一个 <button> 元素被放在 form 元素中时，它的默认行为是提交表单，只要没有无效数据阻止客户端表单验证。

通过 <button> 元素的 type 属性可以指定按钮的其他行为：

<button type="submit"> 明确声明该按钮是“提交按钮”。一般来说不需要显式声明，除非你的 <form> 中包含了多个按钮，并且你想明确表示哪个按钮是用于提交表单的。这种情况非常罕见。
<button type="reset"> 创建一个重置按钮——这会立即清空表单中输入的所有内容，将表单恢复到初始状态。不建议使用重置按钮——在早期的网页中它们比较常见，但通常会造成更多困扰。许多人曾经经历过填写完长长的表单后，不小心点击了“重置”按钮而不是“提交”，结果只能重新填写表单。
<button type="button"> 创建一个普通按钮，其行为和 <form> 外的按钮一样。正如之前所见，普通按钮默认什么都不做，需要使用 JavaScript 来给它们添加功能。

10.2.5、单选按钮

“选择酒店房型”按钮是通过 <radio> 控件实现的。这些控件会渲染为一组按钮控件，每次只能选择其中一个——你不能同时选中多个。它们的名字来源于老式收音机上的按钮：按下一个按钮，之前选中的按钮就会弹出。

示例代码如下：

<fieldset>
  <legend>选择酒店房型：</legend>
  <div>
    <input
      type="radio"
      id="hotelChoice1"
      name="hotel"
      value="economy"
      checked />
    <label for="hotelChoice1">经济型（+$0）</label>

    <input type="radio" id="hotelChoice2" name="hotel" value="superior" />
    <label for="hotelChoice2">高级型（+$50）</label>

    <input
      type="radio"
      id="hotelChoice3"
      name="hotel"
      value="penthouse"
      disabled />
    <label for="hotelChoice3">顶级套房（+$150）</label>
  </div>
</fieldset>

radio 输入控件的工作方式大致和 text 输入控件相同，但也有几点不同：

每组单选按钮的 name 属性值必须相同，以便将它们关联成一组。如果 name 属性值不同，它们会被视为不同的组，提交时也会有发送不同的值。
每个单选按钮必须包含一个 value 属性，用于指定提交时该按钮对应的值。提交的数据会是一个名值对，其中名称（即 name）始终相同，例如 hotel=economy 或 hotel=superior。
每个单选按钮的 <label> 应该描述该具体选项的值，而不是你正在选择的这一组选项所代表的字段含义。描述整组选项的推荐做法是使用 <fieldset> 元素包裹这些选项，并用其子元素 <legend> 来提供整体描述。
<fieldset> 元素用于对表单中的控制元素进行分组（也包括 label 元素）。
<legend> 元素表示其父元素 <fieldset> 内容的标题。

还值得注意的是，我们为第一个单选按钮添加了 checked 属性——这会让它在页面初次加载时默认被选中。这意味着总会有一个选项被选中，并且你无法取消选中一个单选按钮，除非选择另一个。

在单选按钮的示例中，你会注意到第三个单选按钮设置了 disabled 属性。这会导致该控件显示为灰色且无法被选中。你可以在任何表单控件上设置 disabled 属性，包括 <button> 元素。<fieldset> 元素也可以接受 disabled 属性——这会导致该 <fieldset> 内的所有表单控件都被禁用。

10.2.6、复选框

“选择要参加的课程”的复选框是使用 <input type="checkbox"> 控件实现的。这些控件渲染为一组开关状态的复选框。与单选按钮不同，你可以同时选择多个选项。

<fieldset>
  <legend>选择要参加的课程：</legend>
  <div>
    <input type="checkbox" id="yoga" name="yoga" />
    <label for="yoga">瑜伽（+$10）</label>

    <input type="checkbox" id="coffee" name="coffee" />
    <label for="coffee">咖啡烘焙（+$20）</label>

    <input type="checkbox" id="balloon" name="balloon" />
    <label for="balloon">气球动物艺术（+$5）</label>
  </div>
</fieldset>

单选框与复选框的主要区别（除了 type 属性值的不同）在于每个复选框的 name 属性值不同，且通常没有设置 value 属性。这意味着，每个复选框代表不同的数据值，而单选按钮只能代表一个值。当表单提交时，如果复选框被选中，则提交的值为 on，例如：yoga=on、ballon=on 等等。

10.2.7、下拉菜单

下拉菜单，比如我们示例中的“出行方式”选择控件，不是通过 <input> 类型实现的，而是使用 <select> 和 <option> 元素来实现的：

<label for="transport">出行方式：</label>
<select name="transport" id="transport">
  <option value="">--请选择一项--</option>
  <option value="plane">乘坐飞机</option>
  <option value="bike">骑自行车</option>
  <option value="walk">徒步</option>
  <option value="bus">乘坐公交</option>
  <option value="train">搭乘火车</option>
  <option value="jetPack">使用喷气背包</option>
</select>

<select> 元素囊括了所有不同的选项值。你需要在这里设置 id 属性，将控件与其标签关联起来，同时设置 name 属性，指定提交时数据项的名称。

数据项的每个可能值由嵌套在 <select> 内的 <option> 元素表示。每个 <option> 元素可以带有 value 属性，指定如果该选项被选中时提交的值。如果未指定 value，则使用 <option></option> 标签内的文本内容作为提交值。

10.2.8、多行文本输入框

多行文本输入框使用 <textarea> 元素创建：

<label for="comments">其他备注：</label>
<textarea id="comments" name="comments" rows="5" cols="33"></textarea>

它们的行为与 <input type="text"> 元素类似，不同之处在于它们允许输入多行文本。rows 属性指定文本区域默认显示的行数，而 cols 属性指定文本区域默认显示的列数。如果未指定这两个属性，浏览器默认使用 cols="20" 和 rows="2"。