HTML

head

在页面加载完成的时候，HTML 文档中的头部是不会显示在 web 浏览器的。它包含了诸如页面的 “（标题）、指向 CSS 的链接（如果你选择用 CSS 来为 HTML 内容添加样式）、指向自定义网页图标的链接和其他的元数据（描述 HTML 的数据，比如作者和描述文档的重要关键词）等信息。

• title 元素是一项元数据，用于表示整个 HTML 文档的标题（而不是文档内容）。
• meta：元数据就是描述数据的数据，而 HTML 有一个“官方的”方式来为一个文档添加元数据——meta 元素。

<meta charset="utf-8" />

这个元素简单的指定了文档的字符编码——在这个文档中被允许使用的字符集。

假如你将字符集设置为 ISO-8859-1（拉丁字母表的字符集），那么页面将出现乱码：

一些浏览器（比如 Chrome）会自动修正错误的编码，所以根据你所使用的浏览器不同，你或许不会看到这个问题。无论如何，你仍然应该为你的页面手动设置编码为 utf-8，来避免在其他浏览器中可能出现的问题。

添加作者和描述

许多 <meta> 元素包含了 name 和 content 属性：

• name 指定了 meta 元素的类型；说明该元素包含了什么类型的信息。
• content 指定了实际的元数据内容。

<meta name="author" content="Chris Mills" />
<meta
  name="description"
  content="The MDN Web Docs Learning Area aims to provide
complete beginners to the Web with all they need to know to get
started with developing web sites and applications." />

许多 <meta> 特性已经不再使用。例如，keyword <meta> 元素（<meta name="keywords" content="fill, in, your, keywords, here">，为搜索引擎提供关键词，用于确定该页面与不同搜索词的相关性）已经被搜索引擎忽略了，因为作弊者填充了大量关键词到 keyword，错误地引导搜索结果。

在你的站点增加自定义图标

为了进一步丰富你的网站设计，你可以在元数据中添加对自定义图标的引用，它们会在某些场景下显示。最常见的用例为 favicon（为“favorites icon”的缩写，在浏览器的“收藏夹”及“书签”列表中显示）。

这个不起眼的图标已经存在很多年了，16 像素的方形图标是第一种类型。你可以看见（取决于浏览器）这些图标出现在浏览器每一个打开的标签页中以及书签面板中的书签页面旁边。

页面添加网页图标的方式有：

1. 将其保存在与网站的索引页面相同的目录中，以 .ico 格式保存（大多数浏览器支持更通用的格式，如 .gif 或 .png）

2. 将以下行添加到 HTML 的 head 块中以引用它：

   html复制

   <link rel="icon" href="favicon.ico" type="image/x-icon" />
   
   

强调和着重强调

在日常用语中，我们常常会加重某个字的读音，或者用加粗等方式突出某句话的重点。与此类似，HTML 也提供了相应的标签，用于标记某些文本，使其具有加粗、倾斜、下划线等效果。下面，我们将学习一些最常见的标签。

强调

我很庆幸你没有迟到。

我很庆幸你没有迟到。

第一句话听起来真的像松了一口气——因为没有迟到。相反，第二句话因为以斜体强调了“庆幸”和“迟到”两词，听起来具有讽刺性而且有隐含的攻击性，表达对一个人迟到的恼怒。

在 HTML 中我们用 em（emphasis）元素来标记这样的情况。这样做既可以让文档读起来更有趣，也可以被屏幕阅读器识别，并以不同的语调发出。浏览器默认样式为斜体，但你不应该纯粹为了获得斜体风格而使用这个标签。如果仅仅为了获得斜体样式而不增加语义辅助，你应该使用 span 元素和一些 CSS，或者是 i 元素（见下文）。

着重强调

为了强调重要的词，在口语方面我们往往用重音强调，在书面用语中则是用粗体字来达到强调的效果。例如下面这段：

这杯液体毒性很大。

就指望你了，千万不要迟到！

在 HTML 中我们用 strong（strong importance）元素来标记这样的情况。除了使文档更有用之外，屏幕阅读器也能识别这些内容，并可将其配置为以不同的语音语调进行朗读。浏览器默认样式为粗体，但你不应该纯粹为了获得粗体风格而使用这个标签。如果仅仅为了获得粗体样式而不增加语义辅助，你应该使用 span 元素和一些 CSS，或者是 b 元素（见下文）。

斜体、粗体、下划线……

到目前为止，我们所讨论的元素都有明确的相关语义。<b>、<i> 和 <u> 的情况却有点复杂。它们出现于人们要在文本中使用粗体、斜体、下划线但 CSS 仍然不被完全支持的时期。像这样仅仅影响表象而且没有语义的元素，被称为表现元素（presentational element）并且不应该再被使用。因为正如我们在之前看到的，语义对无障碍、搜索引擎优化（SEO）等非常重要。

HTML5 重新定义了 <b>、<i> 和 <u>，赋予了它们新的但有点令人困惑的语义角色。

最好的经验法则是：只有在没有更合适的元素时，才适合使用 <b>、<i> 或 <u> 来表达传统上用粗体、斜体或下划线表达的意思；而通常情况下是有更合适的元素可供使用的。<strong>、<em>、<mark> 或 <span> 可能是更加合适的选择。

文档与网站架构

HTML 不仅能够定义网页的单独部分（例如“段落”或“图片”），还可以使用块级元素（例如“标题栏”、“导航菜单”、“主内容列”）来定义网站中的复合区域。本文将探讨如何规划基本的网站结构，并根据规划的结构来编写 HTML。

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

• 页眉

  通常横跨于整个页面顶部有一个大标题 和/或 一个标志。这是网站的主要一般信息，通常存在于所有网页。

• 导航栏

  指向网站各个主要区段的超链接。通常用菜单按钮、链接或标签页表示。类似于标题栏，导航栏通常应在所有网页之间保持一致，否则会让用户感到疑惑，甚至无所适从。许多 web 设计人员认为导航栏是标题栏的一部分，而不是独立的组件，但这并非绝对；还有人认为，两者独立可以提供更好的 无障碍访问特性，因为屏幕阅读器可以更清晰地分辨二者。

• 主内容

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

• 侧边栏

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

• 页脚

  横跨页面底部的狭长区域。和标题一样，页脚是放置公共信息（比如版权声明或联系方式）的，一般使用较小字体，且通常为次要内容。还可以通过提供快速访问链接来进行 SEO。

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

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

• <header>：页眉。
• <nav>：导航栏。
• <main>：主内容。主内容中还可以有各种子内容区段，可用](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/article)、[ 和 “ 等元素表示。
• <aside>：侧边栏，经常嵌套在 “ 中。
• <footer>：页脚。

理解所有 HTML 区段元素具体含义是很有益处的，这一点将随着个人 web 开发经验的逐渐丰富日趋显现。更多细节请查阅 HTML 元素参考。现在，你只需要理解以下主要元素的意义：

• <main> 存放每个页面独有的内容。每个页面上只能用一次 <main>，且直接位于 “ 中。最好不要把它嵌套进其他元素。
• article 包围的内容即一篇文章，与页面其他部分无关（比如一篇博文）。
• <section> 与 <article> 类似，但 <section> 更适用于组织页面使其按功能（比如迷你地图、一组文章标题和摘要）分块。一般的最佳用法是：以 标题 作为开头；也可以把一篇 <article> 分成若干部分并分别置于不同的 <section> 中，也可以把一个区段 <section> 分成若干部分并分别置于不同的 <article> 中，取决于上下文。
• aside 包含一些间接信息（术语条目、作者简介、相关链接，等等）。
• header 是简介形式的内容。如果它是 ](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/body) 的子元素，那么就是网站的全局页眉。如果它是 [ 或“ 的子元素，那么它是这些部分特有的页眉（此 <header> 非彼标题）。
• nav 包含页面主导航功能。其中不应包含二级链接等内容。
• footer 包含了页面的页脚部分。

无语义元素

有时你会发现，对于一些要组织的项目或要包装的内容，现有的语义元素均不能很好对应。有时候你可能只想将一组元素作为一个单独的实体来修饰来响应单一的用 CSS 或 JavaScript。为了应对这种情况，HTML 提供了 ](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/div) 和 [ 元素。应配合使用 class 属性提供一些标签，使这些元素能易于查询。

<span> 是一个内联的（inline）无语义元素，最好只用于无法找到更好的语义元素来包含内容时，或者不想增加特定的含义时。

<div>是一个块级无语义元素，应仅用于找不到更好的块级元素时，或者不想增加特定的意义时。

换行与水平分割线

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

<br>：换行元素

<hr>：主题性中断元素,在文档中生成一条水平分割线

标题标签

h1~h6 一到六级标题标签

属性

段落 换行 水平线

段落是通过段落标签定义的

想通过换行不产生新的段落就使用<br/>标签

图片

<img>标签定义 html 页面中的图像

<img src="" alt="" title="" width="" height="">

<img> 是单标签，不需要进行闭合操作

超链接

使用标签 <a> 来设置超链接

到链接可以是一个字，一个词或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档的某个部分。

<a href="url">链接文本</a>

target 属性是 <a> 标签中的一个属性，用于指定链接应该在何处打开。常见的取值有：

• _self: 在当前窗口打开链接（默认行为）
• _blank: 在新窗口或新标签页中打开链接
• _parent: 在父窗口中打开链接
• _top: 在最顶层窗口中打开链接

例如，如果我们希望链接在新窗口中打开，可以将 target="_blank" 添加到 <a> 标签中。

链接分类

1. 外部链接：例如<a href="http://www.baidu.com">文本</a>
2. 内部链接：网站内部页面之间的相互链接，直接链接内部页面名称即可<a href="./a.html">文本</a>
3. 空链接：如果当时没有确定链接目标时<a href="#">文本</a>
4. 下载链接：如果 href 里面的地址是一个文件或压缩包，会下载这个文件
5. 网页元素链接：在网页中的各种网页元素，如文本、图像、表格、音频视频等，都可以添加超链接
6. 锚点链接：我们点击链接，可以快速定位到页面中的某个位置
   • 在链接文本的 href 属性中设置属性值为#名字的形式，如<a href="#two">第二季</a>
   • 找到目标位置，标签里面添加一个 id =刚刚的名字，如<h3 id="two">第二季介绍</h3>

默认情况下，链接将以下列方式出现在浏览器里

1. 一个未访问过的链接显示为蓝色字体，并带有下划线
2. 访问过的链接显示为紫色，并带有下划线
3. 点击链接时，链接显示为红色，并带有下划线

超链接表现

当您把鼠标指针移动到网页的某个链接上时，箭头会变成一只小手

特殊字符

文本

常用文本标签

常用文本标签和段落是不一样的，段落代表一段文字，而文本标签一般表示文本词汇

有序列表

有序列表是一列项目，列表项目使用数字进行标记。有序列表，始于 ol 标签，每个标签项始于 li 标签

<ol>
	<li>开始</li>
	<li>退出</li>
<ol>

有序列表是可以嵌套的

无序列表

无序列表是一个项目的列表，此列项目使用粗体原点进行标记

无序列表始于 <ul> 标签，每个列表项始于<li>标签

<ul>
	<li>开始</li>
	<li>退出</li>
<ul>

无序列表也可以嵌套

<ul>
	<li>开始</li>
	<li>退出</li>
	<li>
		<ul>
			<li>开始</li>
			<li>退出</li>
		<ul>
	</li>
<ul>

自定义列表（描述列表）

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

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

浏览器的默认样式会在描述列表的术语及其定义之间产生缩进。

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

请注意，一个术语可以同时有多个描述，例如：

<dl>
  <dt>旁白</dt>
  <dd>
    戏剧中，为渲染幽默或戏剧性效果而进行的场景之外的补充注释念白，只面向观众，内容一般都是角色的感受、想法、以及一些背景信息等。
  </dd>
  <dd>
    写作中，指与当前主题相关的一段内容，通常不适于直接置于内容主线中，因此置于附近的其他位置（通常位于主线内容旁边一个文本框内）。
  </dd>
</dl>

表格

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

在继续阅读之前，我们将在本文介绍最后一个特性。HTML 有一种为整列数据的定义样式信息的方法：就是 col和<colgroup>元素。它们存在是因为如果你想让一列中的每个数据的样式都一样，那么你就要为每个数据都添加一个样式，这样的做法是令人厌烦和低效的。你通常需要在列中的每个 <td> 或 <th> 上定义样式，或者使用一个复杂的选择器，比如 :nth-child()。

这样设计列的样式仅限于几个属性：border、background、width 和 visibility。要设置其他属性，必须对列中的每个 <td> 或 <th> 进行样式设置，或者使用复杂的选择器，如 :nth-child。

没有的话，为单元格列设置样式：

<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>

这并不理想，因为必须在列中的所有三个单元格中重复样式信息（在实际项目中，可能会在所有单元格中设置一个 class，并在单独的样式表中指定样式）。

使用<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 需要一个无单位的数字值，用来指定让这个样式应用到表格中多少列。

进阶特性

你可以通过 <caption> 元素为你的表格增加一个标题，再把 <caption> 元素放入<table>元素中。你应该把它放在 <table> 开始标签的下面。

<table>
  <caption>
    侏罗纪时期的恐龙
  </caption>

  …
</table>

添加 <thead>、<tbody> 和 <tfoot> 结构

由于你的表格在结构上有点复杂，如果把它们定义得更加结构化，那会帮助我们更能了解结构。一个明确的方法是使用 、 和 ，这些元素允许你把表格中的部分标记为表头、表体和表尾三部分。

这些元素不会使表格更易于屏幕阅读器用户访问，也不会造成任何视觉上的改变。然而，它们在应用样式和布局上会起到作用，可以更好地让 CSS 应用到表格上。

要使用它们，应按以下顺序排列：

• <thead> 元素必须包住表格的表头部分。一般是第一行，往往都是每列的标题，但是不是每种情况都是这样的。如果你使用了 / 元素，那么 <thead> 元素就需要放在它们的下面。
• <tbody> 元素需要包住表格内容的主要部分（不是表头和表尾）。
• <tfoot> 元素需要包住表格的表尾部分。一般是最后一行，往往是对前面所有行的总结。

本篇文章的一个新话题是 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>

而每一行都可以有一个像这样定义的标题（如果我们把行的标题和列的标题都加上）：

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

屏幕阅读器会识别这种结构化的标记，并一次读出整列或整行。

scope 还有两个可选的值：colgroup 和 rowgroup。这些用于位于多个列或行的顶部的标题。如果你回顾这部分文章开始部分的“2016 年 8 月出售的物品”表格，你会看到“衣物”单元格在“长裤”、“裙子”和“连衣裙”单元格的上面。这几个单元格都应该被标记为标题（<th>），但是“衣物”是一个位于顶部且定义了其他三个子标题的标题。因此“衣物”应该有一个 scope="colgroup" 属性，而另外三个子标题应该有 scope="col" 属性：

表格（table）属性

表头单元格标签

一般表头单元格位于表格的第一行或第一列表，表头单元格里面的文本内容加粗居中显示

表格单元格合并

• 水平合并 colspan
• 垂直合并 rowspan

以上是 <td>的属性

<table border="2px">
			<tr>
				<td rowspan="2">1</td>
				<td>2</td>
				<td>3</td>
			</tr>
			<tr>
				
				<td>5</td>
				<td>6</td>
			</tr>
			<tr>
				<td>7</td>
				<td>8</td>
				<td>9</td>
			</tr>
</table>

Form表单

表单是由容器和控件组成一个表单，一般应该包含用户填写信息的输入框提交按钮，这些输入按按钮叫控件。表单就是容器，它能容纳各种各样的控件

<form action="url地址" method="get|post（提交方式）" name="表单域名称"></form>

action：服务器地址

name：表单名称，用来区分同一页面的多个表单域

表单元素

1. input 输入表单元素

   type属性值	含义
   button	定义可点击按钮
   checkbox	定义复选框
   file	定义输入字段和浏览按钮供文件上传
   hidden	定义隐藏的输入字段
   image	定义图像格式的提交按钮
   password	定义密码字段
   radio	定义单选按钮
   reset	定义重置按钮
   submit	定义提交按钮
   text	定义单行的输入字段，默认为20字符

   备注

   image提交按钮会提交点击图片的像素点位置，类似于&x=28&y=9

2. select 下拉菜单元素 <option>标签在其内部作为可选项，option属性中selected表示默认选中

3. textarea文本域元素 当用户输入内容较多的情况下，我们就可以使用该标签，应用于定义多行文本输入的控件 cols属性定义显示每行的字符数，rows表示显示的行数

   备注

   实际开发中都是用CSS来改变大小

一个完整的表单包含3个基本组成部分：表单标签、表单域、表单按钮

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

<form action="https://cn.bing.com/search?q=aewfw" method="get" name="CHRDEF">
			<input type="text" name="q">
			<input type="submit">
		</form>

文本框

文本域通过<input type="text">标签来设定，当用户要在表单中键入字母数字的内容时，就会用到文本域

placeholder属性设置提示语，在文本框内显示为灰色

密码框

<input type="password">

密码字段字符不会明文显示，而是以星号或原点替代

提交按钮

当用户点击按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名，由动作属性定义的这个文件通常会对收到的输入数据进行相关的处理

label

<label>标签用于绑定了一个表单元素，当点击label标签内的文本时，浏览器会自动将焦点转到对应的表单元素

<label>标签中的for属性用于明确指定与之关联的表单元素（input、textarea、select等）的id。这种显式的关联方式可以帮助屏幕阅读器和其他辅助技术更好地理解标签与表单控件之间的关系，从而提高网页的可访问性。通过设置for属性，我们可以实现以下目的：

1. 建立关联：将<label>标签与指定id的表单元素进行关联，从而确保点击<label>标签时能够准确操作对应的表单控件。
2. 提升可访问性：有助于辅助技术正确识别标签与表单控件之间的关系，使残障用户能够更便捷地与表单交互。

总之，使用for属性可以增强<label>标签和表单控件之间的连接，进而优化网页的可访问性和用户体验。

如果没有为<label>设置for属性来明确指定与之关联的<input>元素的id，那么<label>标签中的文本和内部的<input>元素会默认关联起来。这意味着无需显式设置for属性，点击<label>标签内的文本也会触发关联的输入元素，这是HTML的一个便利特性。

<label><input type="radio" name="gender" value="women" />女</label>

<input type="radio" name="gender" value="women" id="women" /><label for="women">女</label>

内联（行内）元素与块元素

内联元素与块元素的区别

常见块级元素

div form h1~h6 hr p table ul ol 等

常见内联元素

a,b,em,i,span,strong

行内 块级元素（特点：不换行，能够识别宽高）

button img input等

显示模式的转换

display=block

1. 把行内元素转化为块级元素：

a{
	display:block;
}

这样就会为行内元素设置宽高

2. 转化为行内元素

div{
	display:inline;
}

3. 转化为行内块display=inline-block

span{
	display:inline-block;
}

行内块元素可以设置宽高，又不独占一行

HTML新增元素

div 容器元素，也是页面中见到的最多的元素

div实现

HTML5新标签实现

新增的多媒体标签

1. 音频：<audio>
2. 视频：<video> 使用它们可以很方便在页面中嵌入音频和视频，而不再使用 flash 和其他浏览器插件

视频video

语法

<video src="视频文件路径.mp4" controls preload="metadata" style="width:100%"></video>

多种兼容性写法：

		<video controls>
			<source src="mv.ogg" type="video/ogg"/>
			<source src="mv.mp4" type="video/mp4"/>
		</video>

音频audio

新增的input类型

新增的表单属性

font标签

<font>标签：展示字体的样式

<font 属性名=”属性值”>文字</font>

size: 控制字体大小.最小1 ~ 最大7。 如果设置范围不在1~7之间，设置无效

color：控制字体颜色. 使用英文设置（例如：red,blue…）

face：控制字体类型。只能设置系统字库中存在的字体类型

cdata

创建原始快，在这里面就不用使用转义表示类似<这种标签

CDATA（Character Data）原始块（XML 里用来“原样放文本，不被当成标签解析”）

<![CDATA[
这里面的内容会原样保留，比如 <div> 不会被当成 XML 标签
& 也不会需要转义成 &amp;
]]>

CDATA 不能包含 字符串 ]]>（因为这就是结束符）。如果内容里真有它，需要拆开写，例如：

<![CDATA[abc]]]]><![CDATA[>def]]>

CDATA 只在 XML（例如：SVG、RSS、某些配置文件）里有；HTML 里没有 CDATA 语义（HTML5 会当普通文本/注释之类处理）。