开始学习HTML

块级元素和内联元素

  • 块级元素在页面中以块的形式展现。一个块级元素出现在它前面的内容之后的新行上。任何跟在块级元素后面的内容也会出现在新的行上。

    块级元素通常是页面上的结构元素。例如，一个块级元素可能代表标题、段落、列表、导航菜单或页脚。一个块级元素不会嵌套在一个内联元素里面，但它可能嵌套在另一个块级元素里面。

  • 内联元素通常出现在块级元素中并环绕文档内容的一小部分，而不是一整个段落或者一组内容。

    内联元素不会导致文本换行。它通常与文本一起使用，例如，<a> 元素创建一个超链接，<em> 和 <strong>等元素创建强调。

例如：

1
2
3
4
5
<em>第一</em><em>第二</em><em>第三</em>

<p>第四</p>
<p>第五</p>
<p>第六</p>

<em>是一个内联元素，因此第一行代码中的三个元素都没有间隙的展示在了同一行。

<p>是一个块级元素，因此每个p元素都另起了新的一行展示，并且每个段落间都有一些间隔（默认的浏览器有着展示<p>元素的默认CSS样式）。

HTML标签不区分大小写，但最好仅使用小写字母。

属性

元素可以拥有属性，锚元素<a>的使用示例如下：

1
<p>A link to my <a href="https://www.bing.com" title="bing" target="_blank">favorite website</a>.</p>

href属性声明超链接的web地址。

title属性为声明额外的信息，当鼠标悬停在超链接上面时，这部分信息将提示显示。

target属性用于指定链接如何呈现。target="_blank" 将在新标签页中显示链接。如果你希望在当前标签页显示链接，忽略这个属性即可。

布尔属性

布尔属性只能有一个值，这个值一般与属性名称相同，并且可以省略，表现为没有值的属性。例如，考虑 disabled 属性，你可以将其分配给表单输入元素。用它来禁用表单输入元素，这样用户就不能输入了。被禁用的元素通常有一个灰色的外观。

1
<input type="text" disabled="disabled" />

可以这么写

1
2
3
4
<!-- 使用 disabled 属性来防止终端用户输入文本到输入框中 -->
<input type="text" disabled />
<!-- 下面这个输入框不包含 disabled 属性，所以用户可以向其中输入 -->
<input type="text" />

HTML注释用<!--与-->包裹注释内容。

HTML属性可以用双引号或者是单引号来包裹，但不能在一个属性值里面混用。

在一个HTML中已使用一种引号，你可以在此引号中嵌套另外一种引号。

无论你在 HTML 元素的内容中使用多少空格（包括一个或多个空白字符或换行），当渲染这些代码的时候，HTML 解释器会将连续出现的空白字符减少为一个单独的空格符。

下面两个代码片段是等价的：

1
2
3
4
<p>狗 狗 很 呆 萌。</p>

<p>狗 狗        很
         呆 萌。</p>

特殊字符

原义字符 等价字符引用
< &lt;
> &gt;
" &quot;
’ &apos;
& &amp;

元数据：元素

1
<meta charset="utf-8" />

utf-8 是一个通用的字符集，它包含了任何人类语言中的大部分的字符，意味着该 web 页面可以显示任意的语言。

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

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

例如：

1
2
3
4
5
6
<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." />

<title>与description<meta>会在搜索引擎结果中显示，并且收藏的书签名为title。

为站点添加自定义图标

将图标保存在与index.html相同的目录中，以.ico（.gif或.png）格式保存

在HTML的<head>块中添加以下代码：

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

为文档设定主语言

例如主语言设置为中文：

1
2
3
<html lang="zh-CN">
  …
</html>

可以将文档的分段设置为不同的语言，例如将日语部分设置为日语：

1
<p>Japanese example: <span lang="ja">ご飯が熱い。</span>.</p>

<span>是一个行级元素，通过使用class、id等属性，便于添加样式。

<span>与<div>非常类似，当<div>是块级元素。

下面这个示例将部分单词颜色变为红色：

1
2
3
4
5
<p>
  Add the <span class="ingredient">basil</span>, <span class="ingredient">pine nuts</span> and
  <span class="ingredient">garlic</span> to a blender and blend into a paste.
</p>
<p>Gradually add the <span class="ingredient">olive oil</span> while running the blender slowly.</p>
1
2
3
span.ingredient {
  color: #f00;
}

创建超链接

我们已经知道可以通过锚元素<a>的<href>属性创建链接，例如：

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

可以将标题元素变为链接：

1
2
3
<a href="https://developer.mozilla.org/zh-CN/">
  <h1>MDN Web 文档</h1>
</a>

可以将图片元素变为链接：

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

属性href的值可以是相对路径，遵循路径规则。

超链接不仅可以链接到文档，也可以链接到文档的特定部分，通过给链接到的元素分配id属性即可实现。

例如，在与index.html同级的contacts.html文件里的标题元素添加id属性

1
<h2 id="Mailing_address">邮寄地址</h2>

要在index.html中链接到此标题，可以

1
<p>要提供意见和建议，请将信件邮寄至<a href="contacts.html#Mailing_address">我们的地址</a>。</p>

甚至可以在同一份文档下，链接到当前文档的另一部分

1
<p>本页面底部可以找到<a href="#Mailing_address">公司邮寄地址</a>。</p>

绝对URL：指向在Web上定义的绝对位置，包括协议和域名。

相对URL：指向与你链接的文件相关的位置。

在下载链接时使用download属性，可以提供一个默认的保存文件名，下面是一个 Firefox 的 Windows 最新版本下载链接的示例：

1
2
3
4
5
<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>

描述列表

描述列表（description list）可以用来标记一组项目及其相关描述，例如术语或定义、问题或答案等。

描述列表使用标签<dl>，每一项使用标签<dt>（description term），每个描述使用标签<dd>（description definition），一个术语（dt）可以有多个描述（dd）。例如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<dl>
  <dt>内心独白</dt>
  <dd>
    戏剧中，某个角色对自己的内心活动或感受进行念白表演，这些台词只面向观众，而其他角色不会听到。
  </dd>
  <dt>语言独白</dt>
  <dd>
    戏剧中，某个角色把自己的想法直接进行念白表演，观众和其他角色都可以听到。
  </dd>
  <dt>旁白</dt>
  <dd>
    戏剧中，为渲染幽默或戏剧性效果而进行的场景之外的补充注释念白，只面向观众，内容一般都是角色的感受、想法、以及一些背景信息等。
  </dd>
    <dd>
    写作中，指与当前主题相关的一段内容，通常不适于直接置于内容主线中，因此置于附近的其他位置（通常位于主线内容旁边一个文本框内）。
  </dd>
</dl>

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

引用

块引用

使用<blockquote>元素将需要引用的块（段落、列表等）包裹起来，并在cite属性里用URL来指向引用的资源。

1
2
3
4
5
6
7
8
9
10
<p>Here is a blockquote:</p>
<blockquote
  cite="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/blockquote">
  <p>
    The <strong>HTML <code><blockquote></code> Element</strong> (or
    <em>HTML Block Quotation Element</em>) indicates that the enclosed text is
    an extended quotation.
  </p>
</blockquote>
</p>

浏览器的默认样式会将其呈现为缩进的段落，作为引用的指示。

行内引用

使用<q>元素进行行内引用，浏览器默认将其作为普通文本放入引号内表示引用。

1
2
3
4
5
6
<p>
  The quote element — <code><q></code> — is
  <q cite="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/q"
    >intended for short quotations that don't require paragraph breaks.</q
  >
</p>

使用<cite>元素包含引用资源标题，并通过<a>元素链接到引用源。

引文默认的字体样式为斜体。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<p>
  According to the
  <a href="/zh-CN/docs/Web/HTML/Element/blockquote">
    <cite>MDN blockquote page</cite></a
  >:
</p>

<blockquote
  cite="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/blockquote">
  <p>
    The <strong>HTML <code><blockquote></code> Element</strong> (or
    <em>HTML Block Quotation Element</em>) indicates that the enclosed text is
    an extended quotation.
  </p>
</blockquote>

<p>
  The quote element — <code><q></code> — is
  <q cite="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/q"
    >intended for short quotations that don't require paragraph breaks.</q
  >
  — <a href="/zh-CN/docs/Web/HTML/Element/q"> <cite>MDN q page</cite></a
  >.
</p>

缩略语

<abbr>元素用来包裹一个缩略语或缩写，并且提供缩写的解释，例如：

1
2
3
4
5
6
7
8
<p>
  我们使用
  <abbr title="超文本标记语言（Hyper text Markup Language）">HTML</abbr>来组织网页文档。
</p>

<p>
  第 33 届<abbr title="夏季奥林匹克运动会">奥运会</abbr>将于 2024 年 8月在法国巴黎举行。
</p>

标记联系方式

1
2
3
4
5
6
7
8
9
10
11
12
13
<address>
  <p>
    Chris Mills<br />
    Manchester<br />
    The Grim North<br />
    UK
  </p>

  <ul>
    <li>Tel: 01234 567 890</li>
    <li>Email: me@grim-north.co.uk</li>
  </ul>
</address>

上标和下标

<sup>元素：上标

<sub>元素：下标

1
2
3
4
<p>
  咖啡因的化学方程式是 C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub>。
</p>
<p>如果 x<sup>2</sup> 的值为 9，那么 x 的值必为 3 或 -3。</p>

展示计算机代码

  • <code>：用于标记计算机通用代码。
  • <pre>：用于保留空白字符（通常用于代码块）——如果文本中使用了缩进或多余的空白，浏览器将忽略它，你将不会在呈现的页面上看到它。但是，如果你将文本包含在 <pre></pre> 标签中，那么空白将会以与你在文本编辑器中看到的相同的方式渲染出来。
  • <var>：用于标记具体变量名。
  • <kbd>：用于标记输入电脑的键盘（或其他类型）输入。
  • <samp>：用于标记计算机程序的输出。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<pre><code>const para = document.querySelector('p');

para.onclick = function() {
  alert('噢，噢，噢，别点我了。');
}</code></pre>

<p>
  请不要使用 <code><font></code> 、
  <code><center></code> 等表象元素。
</p>

<p>在上述的 JavaScript 示例中，<var>para</var> 表示一个段落元素。</p>

<p>按 <kbd>Ctrl</kbd>/<kbd>Cmd</kbd> + <kbd>A</kbd> 选择全部内容。</p>

<pre>$ <kbd>ping mozilla.org</kbd>
<samp>PING mozilla.org (63.245.215.20): 56 data bytes
64 bytes from 63.245.215.20: icmp_seq=0 ttl=40 time=158.233 ms</samp></pre>

标记时间和日期

HTML 还支持将时间和日期标记为可供机器识别的格式的<time>元素。例如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!-- 标准简单日期 -->
<time datetime="2016-01-20">20 January 2016</time>
<!-- 只包含年份和月份-->
<time datetime="2016-01">January 2016</time>
<!-- 只包含月份和日期 -->
<time datetime="01-20">20 January</time>
<!-- 只包含时间，小时和分钟数 -->
<time datetime="19:30">19:30</time>
<!-- 还可包含秒和毫秒 -->
<time datetime="19:30:01.856">19:30:01.856</time>
<!-- 日期和时间 -->
<time datetime="2016-01-20T19:30">7.30pm, 20 January 2016</time>
<!-- 含有时区偏移值的日期时间 -->
<time datetime="2016-01-20T19:30+01:00">7.30pm, 20 January 2016 is 8.30pm in France</time>
<!-- 提及特定周 -->
<time datetime="2016-W04">The fourth week of 2016</time>

文档与网站架构

网页组成

网页通常包含以下组成，并且HTML对于这些组分提供了明确的标签：

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

  • 导航栏<nav>：指向网站各个主要区段的超链接。通常用菜单按钮、链接或标签页表示。类似于标题栏，导航栏通常应在所有网页之间保持一致。

  • 主内容<main>：中心的大部分区域是当前网页大多数的独有内容。各种子内容可通过元素<article>、<section>和<div>等表示。

  • 侧边栏<aside>：一些外围信息、链接、引用、广告等。经常嵌套在<main>中。

  • 页脚<footer>：横跨页面底部的狭长区域。页脚是放置公共信息（比如版权声明或联系方式）的，一般使用较小字体。

示例代码参见 GitHub ，对于这些元素的意义：

  • <main>存放每个页面独有的内容。每个页面上只能用一次 <main>，且直接位于 <body>中。最好不要把它嵌套进其他元素。

  • <article> 包围的内容即一篇文章，与页面其他部分无关。

  • <section> 与 <article> 类似，但 <section> 更适用于组织页面使其按功能（比如迷你地图、一组文章标题和摘要）分块。一般的最佳用法是：以标题作为开头；也可以把一篇 <article> 分成若干部分并分别置于不同的 <section> 中，也可以把一个区段 <section> 分成若干部分并分别置于不同的 <article> 中，取决于上下文。

  • <aside>包含一些间接信息（术语条目、作者简介、相关链接，等等）。

  • <header>是简介形式的内容。如果它是 <body>的子元素，那么就是网站的全局页眉。如果它是 <article> 或<section> 的子元素，那么它是这些部分特有的页眉。

  • <nav>包含页面主导航功能。其中不应包含二级链接等内容。

  • <footer>包含了页面的页脚部分。

HTML 提供了 <div>和 <span> 元素。应配合使用 class属性提供一些标签，使这些元素能易于查询。

换行与水平分割线

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

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

<hr> 元素在文档中生成一条水平分割线。

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