HTML 教程之 HTML 基本元素

  Web Sitean hour read (About 9393 words)

正式开始学习 HTML 中的基本元素。

你可以在 >>> HTML 元素和有效 DOCTYPES <<< 查询到所有的 HTML5/HTML 4.01/XHTML 元素，以及它们会出现在什么文档类型 (!DOCTYPE) 中。

HTML 标题

HTML 文档中，标题（Heading）很重要，可用来呈现文档结构。合理使用标题可以使网页的层次结构更加清晰，有利于用户浏览你的网页。

HTML 中的标题可帮助搜索引擎理解网页的结构和内容，多见于博文页面。

HTML 中，提供了从 <h1> 到 <h6> 六个级别的标题标签（Heading），<h1> 标签的级别最高，<h6> 标签的级别最低。

并且，在网页上使用标题标签时，浏览器会自动地对标题内容进行加粗、加大（由标题级别决定）、换行，并且会在每个标题的上下添加一定的空白区域（外边距，可以使用 CSS margin 属性来调整空白区域的大小）。

示例代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML 标题标签演示</title>
</head>
<body>
    <h1>h1 标题</h1>
    <h2>h2 标题</h2>
    <h3>h3 标题</h3>
    <h4>h4 标题</h4>
    <h5>h5 标题</h5>
    </br> <!-- 换行不代表添加空白行 -->
    <h6>h6 标题</h6>
</body>
</html>

关于标题标签的使用，你需要注意的是：

  • HTML 标题标签只能用来定义标题，不可以使用标题标签来对文本进行加粗、大号设计；
  • 搜索引擎会使用标题为网页的结构和内容编制索引；
  • 要根据具体的使用环境，按照级别由高到低的使用标题标签。
  • 应该使用 <h1> 标签来标记最重要的标题，该标题通常位于页面顶部，而且一个 HTML 文档中通常应该有且仅有一个 <h1> 标题；至于较低级别的标题标签（例如 <h2>、<h3>、<h4> 等）的使用则可以不加限制，但最多不要超过 4 层。

HTML 水平线

HTML 中，提供了一个自闭合标签 <hr /> 水平线标签（Horizontal），用于在 HTML 页面中创建水平线。

hr 元素可用于分隔内容，使用该标签产生的水平线可以在视觉上将文档分隔成各个部分。

示例代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML 水平线标签演示</title>
</head>
<body>
    <h1>h1 标题</h1>
    <h2>h2 标题</h2>
    <p>这是一个段落。</p>
    <hr />
    <h2>h2 标题</h2>
    <p>这是一个段落。</p>
</body>
</html>

HTML 段落

HTML 中，提供了 <p> 段落标签（Paragraph），用于将 HTML 文档分割为若干个段落层次。其语法格式如下：

1
<p>段落中的内容。</p>

并且，在网页上使用段落标签时，浏览器会自动地进行换行，并且会在每个段落的上下添加一定的空白区域（外边距，可以使用 CSS margin 属性来调整空白区域的大小）。

在 <p> 标签中的文本会自动换行，不在 <p> 标签中的，不会自动换行。示例代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML 段落标签演示</title>
</head>
<body>
    段落1 段落2 段落3
    <p>段落 4</p>
    <p>段落 5</p>
</body>
</html>

HTML 换行

HTML 中，提供了一个自闭合标签 <br /> 水平线标签（Barter Rabbet，更换槽口），用于实现换行功能。

br 元素可用于在不产生一个新起点（标签内容中）的情况下进行换行，否则可能产生一个空白行。

示例代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML 换行标签演示</title>
</head>
<body>
    <p>这个<br />段落<br />用于演示了分行的效果<br /></p>
    <br /> <!-- 这会生成一个空白行 -->
    <p>这是另一个段落</p>
</body>
</html>

HTML 格式化

HTML 中存在一些不仅具有语义（含义），且有默认样式（Style）的文本格式化标签，例如 <b>（加粗）、<em> 斜体、<blockquote> 引用等。

通过使用这些标签，无需借助 CSS 就可以为网页中的内容定义一些基本的样式。

这里，为了方便记忆，根据需要格式化的文本内容的不同，将格式化标签分为三类：

  1. 文本类格式化标签；
  2. 计算机类格式化标签；
  3. 引用定义类格式化标签。

文本类格式化标签

文本类格式化标签包括 11 个，分别为：<b> && <strong> && <em> && <i> && <small> && <big> && <sup> && <sub> && <ins> && <del> && <mark>。

[1] >>> 加粗（Bold）

<b> 元素用于将相关文本以 加粗（粗体）样式 显示（不暗示文本的重要性）。

示例代码如下：

1
<p>这是一个普通的文本- <b>这是一个加粗文本</b>。</p>

推荐：使用 CSS Font 的 font-weight 属性来设置粗体文本。

[2] >>> 粗体强调（Strong）

<strong> 元素用于强调某些文本的重要性，且文本会以 加粗（粗体）样式 显示。

示例代码如下：

1
<strong>强调该部分文本的重要性（以加粗（粗体）样式显示）</strong>

推荐：如果只是为了达到某种视觉效果而使用的话，建议使用 CSS Font，可能会取得更丰富的效果。

<b> && <strong> 区别 >>> 虽然显示效果一样，但 <b> 元素不暗示文本的重要性，仅为了引起读者的注意。

[3] >>> 斜体（Italic）

<i> 元素用于将相关文本以 斜体样式 显示（不暗示文本的重要性）。

示例代码如下：

1
<p>He named his car <i>The lightning</i>, because it was very fast.</p>

推荐：使用 CSS Font 的 font-style 属性来设置斜体文本。

[4] >>> 斜体强调（Emphasized）

<em> 元素用于强调某些文本的重要性，且文本会以 斜体样式 显示。

示例代码如下：

1
<em>强调该部分文本的重要性（以斜体样式显示）</em>

推荐：如果只是为了达到某种视觉效果而使用的话，建议使用 CSS Font，可能会取得更丰富的效果。

<i> && <em> 区别 >>> 虽然显示效果一样，且被用来表示科技术语、其他语种的成语俗语、想法、宇宙飞船的名字等等，但 <i> 元素不暗示文本的重要性，仅为了引起读者的注意。

[5] >>> 字号缩小（small）

<small> 元素可以使显示在浏览器中的文本变为较小一号的字体文本。

示例代码如下（支持嵌套，字体达到最小字号时失效）：

1
2
<p>W3C - the world's largest web development site.</p>
<p><small>Copyright <small>1999-2050</small> by Refsnes Data</small></p>

HTML5 中该标签被重新定义，可以用来表示边注释或需要遵循的规则。

推荐：使用 CSS Font 的 font-size 属性来设置文本字体大小。

[6] >>> 字号放大（big）

HTML 4.01 支持 <big> 标签，但 HTML5 中已不再支持 <big> 标签，使用 CSS Font 的 font-size 属性来设置文本字体大小。

<big> 元素可以使显示在浏览器中的文本变为较大一号的字体文本。支持嵌套，字体达到最大字号时失效。

[7] >>> 上标（Superscripted）

<sup> 元素用来定义具有上标的文本，常用于数学公式或脚注，显示于。

示例代码如下：

1
2
3
<p>This text contains <sup>superscript</sup> text.</p>
<p>X<sup>2</sup></p>
<p>WWW<sup>1</sup></p>

[8] >>> 下标（Subscripted）

<sub> 元素用来定义具有下标的文本，常用于化学方程式。

示例代码如下：

1
2
<p>This text contains <sub>subscript</sub> text.</p>
<p>H<sub>2</sub>O</p>

上（下）标文本将会显示在当前文本流中字符高度的一半为基准线的上（下）方，但是与当前文本流中文字的字体和字号都是一样的。

[9] >>> 删除（Deleted）

<del> 元素用来定义，文档中已删除的文本。通常显示文本删除线效果，和 <ins> 元素搭配使用。

[10] >>> 插入（Inserted）

<ins> 元素用来定义，文档中更新和修正后插入文档中的文本。

对文档中的文本使用 <ins> 标签后，会显示文本下划线效果。

示例代码如下：

1
<p>My favorite color is <del>blue</del> <ins>red</ins>!</p>

注意：一般不要给普通文本加下划线，用户会误以为是一个超链接。

<del> 和 <ins> 一起搭配使用，描述文档中的更新和修正。浏览器通常会在已删除文本上添加一条删除线，在新插入文本下添加一条下划线。

[11] >>> 高亮标记（Mark）

<mark> 元素用来定义，带有记号（高亮）的文本，它是 HTML5 提供的新标签。

主流浏览器 Internet Explorer 9+（Internet Explorer 8 及更早版本不支持）、Firefox、Opera、Chrome 和 Safari 都支持 标签。

1
<p>My favorite color is <mark>blue</mark>!</p>

| >>> ============================================ Split Line ============================================ <<<

根据 HTML 5 的规范， <b> && <i> 标签应该做为最后的选择，只有在没有其他标记比较合适时才使用。

被强调的文本（术语）应该用 <em> 标签表示，重要的文本应该用 <strong> 标签表示，被标记的或者高亮显示的文本应该用 <mark> 标签表示。

计算机类格式化标签

计算机类格式化标签包括 5 个，分别为：<code> && <kbd> && <samp> && <var> && <pre>。

[1] >>> 代码（Code）

<code> 元素用于定义一段计算机代码文本，且文本会以 等宽字体样式 显示（以提示这段文本是源程序代码）。

示例代码如下：

1
<code>print("Hello, welcome to HTML world.")</code>

推荐：如果只是为了达到某种视觉效果而使用的话，建议使用 CSS，可能会取得更丰富的效果。

[2] >>> 样例（Sample）

<samp> 元素用于定义计算机程序的样例，且样例文本会以 浏览器默认的 monotype 字体 显示（以提示这段文本是源程序代码样本）。

示例代码如下：

1
2
3
4
<!-- 比较一下显示效果 -->
<code>print("Hello, welcome to HTML4.01 world.")</code>
<samp>print("Hello, welcome to HTML5 world.")</samp>
<samp>print("Hello, welcome to XHTML1 world.")</samp>

推荐：如果只是为了达到某种视觉效果而使用的话，建议使用 CSS，可能会取得更丰富的效果。

[3] >>> 变量（Variable）

<var> 元素用于定义数学表达式或编程上下文中的变量，且文本会以 斜体样式 显示。

示例代码如下：

1
<p><var>X</var>+<var>Y</var>=<var>Z</var></p>

推荐：如果只是为了达到某种视觉效果而使用的话，建议使用 CSS，可能会取得更丰富的效果。

[4] >>> 变量（Preformatted）

<pre> 元素用于定义预格式化的文本，且文本会以 等宽字体样式 显示，会保留文本中的空格和换行符。

<pre> 标签与 <code> && <var> 标签配合使用，常用来预格式计算机源代码文本。

示例代码如下（预格式化一段 Java 代码）：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<p>这里是没有用预格式的情况：</p>

public class HelloWorld {

public static void main(String[] args) {
    System.out.println("Hello World");
}
}

<br/>
<br/>

<p>使用预格式的情况:</p>

<pre>
public class HelloWorld {

public static void main(String[] args) {
    System.out.println("Hello World");
}
}
</pre>

需要注意的是，<pre> 元素是块级元素，但是只能包含文本或行内元素，任何块级元素都不能位于 <pre> 元素中。

[5] >>> 键盘码（Keyboard）

<kbd> 元素用于定义键盘输入文本，且文本会以 等宽字体样式 显示。

需要注意的是，<kbd> 标签已废弃，不推荐使用，如果只是为了达到某种视觉效果而使用的话，建议使用 CSS，可能会取得更丰富的效果。

引用定义类格式化标签

计算机类格式化标签包括 7 个，分别为：<abbr> && <address> && <blockquote> && <q> && <cite> && <bdo> && <dfn>。

[1] >>> 首字母缩略（Abbreviation）

<abbr> 元素用于定义文本为其缩写词或者首字母缩略词，如 “WWW”（”World Wide Web”） && “WHO”（”World Health Organization”）。

示例代码如下：

1
<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>

其中，<abbr> 标签的 title 属性，可被用来展示缩写词/首字母缩略词的完整版本。在某些浏览器中，缩略词文本会以 下划虚线样式 显示，且当你把鼠标移至缩写词/上时，会根据 title 属性值来展示其缩略词的完整形式。

该标签最初是在 HTML 4.0 中引入的，IE 6 或更早版本的 IE 浏览器不支持 <abbr> 标签。

[2] >>> 作者联系信息（Address）

<address> 元素用于定义作者的联系信息文本，例如：地址、名称、邮箱等，且文本会以 斜体样式 自动换行 显示。

示例代码如下：

1
2
3
4
5
6
7
<address>
Written by <a href="mailto:webmaster@example.com">Jon Doe</a>.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>

<address> 元素通常被包围在 <footer> 元素的其他信息中，用于描述站点作者信息。事实上，如果 <address> 元素位于 <body>元素内部，则它表示该文档作者/所有者的联系信息（同页脚）；如果 <address> 元素位于 <article> 元素内部，则它表示该文章作者/所有者的联系信息。

HTML 4.01 不支持 <article> 标签，因此在 HTML 4.01 中 <address> 标签总是定义文档的作者/所有者的联系信息。

[3] >>> 块引用（Block Quotation）

<blockquote> 元素用于定义一段长引用文本，且文本会以 块缩进样式 自动换行 显示。

示例代码如下：

1
2
3
<blockquote cite="http://www.worldwildlife.org/who/index.html">
For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.
</blockquote>

其中，<blockquote> 标签的 cite 属性表示引用源的 URL。

[4] >>> 短引用（Quotation）

<q> 元素用于定义一段短引用文本，且文本会以 引号包围样式 显示。

示例代码如下：

1
2
3
<p>WWF's goal is to:
<q cite="http://www.xxxxxxxxxx">Build a future where people live in harmony with nature.</q>
We hope they succeed.</p>

其中，<q> 标签的 cite 属性表示引用源的 URL。

| >>> ============================================ Split Line ============================================ <<<

注意事项 >>>>

1）<q> 元素表示不需要段落分隔的短引用，为行内元素；<blockquote> 元素表示块引用，为块元素；

2）HTML 4.01 中，<blockquote> 标签定义一段长引用。而在 HTML5 中，<blockquote> 标签定义摘自另一个网页源的块引用（指定 cite）；

3）如需把页面作为 XHTML 进行验证，那么 <blockquote> 元素必须包含块级元素，比如：

1
2
3
<blockquote>
<p>Here is a long quotation here is a long quotation.</p>
</blockquote>

[5] >>> 引用（Citation）

<cite> 元素用于定义作品（比如书籍、杂志、歌曲、电影、电视节目、绘画、雕塑等等）的名称引用，且文本会以 斜体样式 显示。

示例代码如下：

1
<p><cite>The Scream</cite> by Edward Munch. Painted in 1893.</p>

HTML 4.01 中， <cite> 标签定义一个引用，而在 HTML5 中， <cite> 标签定义作品的标题。

[6] >>> 文本方向（Bi-Directional Override）

<bdo> 元素用于定义文本排序的显示方向，且文本会以 从左到右（从右到左） 进行显示。

示例代码如下：

1
2
<p>该段落文字从左到右显示。</p>
<p><bdo dir="rtl">该段落文字从右到左显示。</bdo></p>

其中，<bdo> 标签的 dir 属性排序方向，属性值有 “ltr”（Left to Right）&& “rtl”（Right to Left）。

[7] >>> 术语（Defines Nomenclature）

<dfn> 元素用于定义术语文本，且文本会以 斜体样式 显示。

示例代码如下：

1
<p><dfn>Deep Learning</dfn></p>

推荐：如果只是为了达到某种视觉效果而使用的话，建议使用 CSS，可能会取得更丰富的效果。

HTML 图像

一图胜千言，图片比文字更具表现力，恰当地使用图片可以让网页更加精美。

HTML 中，为我们提供了一个 <img> 自闭合标签（包含属性，XHTML 需要强制关闭），用于向 HTML 页面插入图片（Image）。

图像虽好，但仍慎用 >>> 假如某个 HTML 页面包含十个图像，那么为了正确显示这个页面，需要加载 11 个图像资源文件。而加载图片是需要时间的，消耗网络资源的。

需要注意的是：img 元素是一个内联元素，无法自动换行。

实际上，HTML 中对 <img> 标签的使用，就是合理设置各种图像标签支持的属性来实现不同的图像效果：

图像源属性

想要在页面上显示图像，你只需要在 <img> 标签中使用源属性（Src）即可。其语法格式如下：

1
2
<!-- 包含一个必要的 `src` 属性 -->
<img src="url">

源属性（Source）的值是图像的 URL 地址，用来指明 想要插入的图像的存储位置（地址或者路径），可以是相对路径或者绝对路径。并且，Src 支持多种图片格式，比如 JPG、JPEG、PNG、GIF 等。

下面来看几种应用实例：

[1] >>> 插入网络图像资源

我们知道，图像也是一种网络资源，就如你在网上冲浪时看到的图片，这些图片都是存储在全网可访问的 Web 服务器或者图床上的。你可以通过相应图像的 URL 插入到你的网页文档中。代码示例如下：

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>HTML 图像演示</title>
</head>
<body>
    <p>这是一个插入网络图像资源的演示</p>
    <img src="https://cdn.jsdelivr.net/gh/TheNightIsYoung/HexoImageBed0/Img/markdown_logo.jpeg">
</body>
</html>

[2] >>> 插入本地图像资源

如果你仅仅想通过本地存储的一些图片资源进行 HTML 图像测试，这也是可以的。

假设此时，你的本地路径：E:\HTMLDemo\images 下有一个图片 kawayi.jpg，插入代码示例如下：

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>HTML 图像演示</title>
</head>
<body>
    <p>这是一个插入本地图像资源的演示</p>
    <img src="file://E:/HTMLDemo/images/kawayi.jpg">
</body>
</html>

URL 前面的 file:// 表示当前访问资源是一个本地文件，当然你也可以不加尝试一下。

[3] >>> 相对路径 && 绝对路径

绝对路径好理解，就是图片在计算机中的实际存储路径，例如 E:/HTMLDemo/images/kawayi.jpg。而对于网络图片资源而言，绝对路径就是图片的 URL 链接。

而绝对路径是指，图片相对于当前 HTML 网页文档的路径。

假设，图片资源和 HTML 文档位于同一文件夹下，你可以通过如下代码使用图片：

1
<img src="kawayi.jpg">

假设，图片资源位于 HTML 文档的上一级目录中，你可以通过如下代码使用图片：

1
<img src="../kawayi.jpg">

同理，上上级就是 ../../kawayi.jpg，同级 images 目录下就是 images/kawayi.jpg（相当于下级目录）。

需要注意的是，并不是只有本地图片资源才可以使用相对路径！！！

前面提到过，网站可以看作是一个绑定了特定域名的顶级目录，该目录位于提供 Web 服务的远程服务器上，故该网站中的网页可以访问到该顶级目录下的资源（图片、文件等）。

故，当你有了一个自己的 Web 站点之后，你在 Web 站点中的网页中插入图片时，也可以使用 Src 相对路径的定义方法。

如果你想深入了解 URL 的内容，可以参考博文系列中 >>> 网站基础之 URL 全结构解析 一文。

图像替换属性

加载页面时，要注意插入页面图像的路径，如果不能正确设置图像的地址或网络连接失败时，浏览器无法加载图片，图像标签就会显示一个破碎的图片。

浏览器无法加载图片（无法访问图片资源），不仅仅由于图片 URL 错误或者网络连接失败，还可能是本地图片资源被删除，或者之前提供网络图片资源的服务器不再提供访问了，这都可能导致。

当页面图片丢失时，仅提供一个图片缺省图标是不友好的。

HTML 页面中支持为丢失图片提供丢失信息描述，你需要在 <img> 标签中使用替换属性（Alt）。其语法格式如下：

1
2
<!-- 包含一个必要的 `src` 属性 -->
<img src="url" alt="image description text">

这样，当图片资源无法访问时，就会显示丢失的图像信息描述。图片可以访问时不显示。

代码示例（插入一个不存在图片）：

1
<img src="../alt_test.jpg" alt="Lost-picture description text">

图像宽度和高度属性

事实上，计算机中我们常说的某张图片的大小是 800 * 640 的，指的是图片宽度是 800 像素（px），高度是 640 像素（px）。

HTML 中，你可以在 <img> 标签中使用宽度（Width）和高度（Height）属性来设定图片的宽度和高度，其属性值的单位也是像素（px）。语法格式如下：

1
2
<!-- 图像缩小为一半 -->
<img src="images/kawayi.jpg" alt="Lost-picture description text" width="400" height="320">

此外，也可以使用前面提到过的 style 通用属性来指定图片的宽度和高度（CSS 样式）：

1
2
<!-- 图像缩小为一半 -->
<img src="images/kawayi.jpg" alt="Lost-picture description text" style="width: 400px; height: 320px;">

图像大小设置建议 >>>

  • 为了防止 HTML 页面加载的原始图片过大或过小影响页面展示（页面布局失真或闪烁），所以插入图片时必须要控制图片的显示尺寸;
  • 图片设置大于原始图片像素时，会导致图片失真，但并不会改变原始图片文件的像素大小；
  • 设置时，为了防止图片变形（宽高像素比例发生变化），你可以只设置一个属性即可（Width 或者 Height），另一个会根据原始图像的像素比例进行显示;
  • 设置时，要考虑页面布局空间。页面中图片设置过大或过小均影响页面显示（页面布局失真或闪烁）；
  • 推荐页面使用 CSS 响应式布局（自适应布局），建议在上传图片之前裁剪好尺寸，而不要设置 Width 和 Height 属性，这样图片能够跟随屏幕宽度自动改变尺寸，从而不会变形，或者超出屏幕宽度。

图像映射属性

HTML 中，你可以在 <img> 标签中使用其映射（Usemap）属性，来创建带有可供点击区域的 图像地图，每个可点击区域都是一个超链接。

例如，我们可以按照地图的划分，为每个国家或城市所在的区域定义超链接，通过点击相应的区域链接，你可以下钻到相应的地图区域。

图像地图的定义，需要三个标签的共同配合：<img> && <map> && <area>。其中，<area> 标签用于定义某个可点击区域，图像地图中存在多少个有效点击区域就应该设计多少个 <area> 元素，它们共同构成了一个图像地图（<map>）元素。故，<area> 元素永远嵌套在 <map> 元素内部一起使用，以实现图像地图（映射）定义。

其语法格式如下：

1
2
3
4
5
6
7
8
<!-- 预先定义当前图像是一个图像地图，图像地图名称为："chinamap" -->
<img src="images/kawayi.jpg" alt="China Map" width="400" usemap="#chinamap">

<!-- 定义存在两个映射区域的图像地图，其名称使用 `name` 属性定义为："chinamap" -->
<map id="chinamap" name="chinamap">
    <area shape="poly" coords="180,139,14" href ="url1" alt="Shanxi" />
    <area shape="poly" coords="129,161,10" href ="url2" alt="Shanghai" />
</map>

属性说明 >>>

[1] >>> usemap

<img> 标签中的 usemap 属性表示当前图像存在图像地图，其属性值为图像地图的名称。

[2] >>> id && name

  • <img> 标签中的 usemap 属性可引用 <map> 中的 id 或 name 属性（取决于浏览器），推荐同时向 <map> 标签中添加 id 和 name 属性。

HTML5 中, 如果 id 属性在 <map> 标签中指定, 则你必须同样指定 name 属性。这也是同时添加两个属性的原因。而在 XHTML 中，name 属性已经废弃，使用 id 属性即可。

[3] >>> shape && coords && href && alt

<area> 标签中的 shape 和 coords（Coordinates）属性搭配使用，分别用来规定映射区域的形状和坐标。

shape 属性的可选值有三个，分别是 rect（矩形）、circle（圆形）和 poly（多边形），coords 属性中坐标的值则取决于可点击区域的形状。

注意，这里的坐标都是相对于图片的左上角（0, 0）来计算的。

假如定义一个矩形的可点击区域，示例代码如下：

1
<area shape="rect" coords="x1, y1, x2, y2" href="url" alt="description">

其中 x1、y1 代表矩形的左上角坐标，x2、y2 代表矩形的右下角坐标。

假如定义一个圆形的可点击区域，示例代码如下：

1
<area shape="circle" coords="x, y, radius" href="url" alt="description">

其中 x、y 代表圆心的坐标，而 radius 则是圆的半径。

假如定义一个多边形的可点击区域，示例代码如下：

1
<area shape="poly" coords="x1, y1, x2, y2, x3, y3, ..., xn, yn" href="url" alt="description">

其中每对 x 和 y 的值都代表一个多边形的顶点坐标。并且，如果第一个坐标和最后一个坐标不一致，那么为了关闭多边形，浏览器必须添加最后一对坐标。

<area> 标签中的 href（Hypertext Reference）定义区域 URL，使用 href 属性必须添加 alt 属性搭配使用，作为替代文本。

HTML 4.01 中，以下属性：align && border && hspace && vspace && longdesc 已废弃。HTML5 中不再支持以下属性：align && border && hspace && vspace && longdesc。

HTML 超链接

HTML 文档中，超链接（Hyperlink）很重要。超链接使得网页之间不再独立，它就像一根线，把网页连接在一起，形成一个网状结构。互联网之所以能够称之为“网”，就是因为有超链接的存在。

超链接，是指从当前网页指向另一个目标的连接关系，这个目标可以是另一个网页（或网络资源，例如图片，文件等），也可以是当前网页中的其它位置。链接的两端分别称为源锚点（Source Anchor）和目标锚点（Target Anchor），通过点击源锚点即可以跳转到目标锚点。

在 HTML 中使用 <a> 标签（Anchor）来定义超链接文本，其基本语法格式如下：

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

其中，href 属性（Hypertext Reference）用来指明要跳转到的 URL，target 属性用来指明新页面的打开方式。链接文本 不必一定是文本。图片或其他 HTML 元素都可以成为链接。

示例代码如下：

1
2
3
4
5
<!-- 链接到百度搜索 -->
<a href="https://www.baidu.com" target="_target">百度一下，你就知道</a>

<!-- 图片链接 -->
<a href="https://www.baidu.com" target="_target" title="百度一下，你就知道"><img src="images/kawayi.jpg" alt="Kawayi" width="400" /></a>

你可以也可以通过 title 通用属性为 链接文本 添加描述内容信息。

链接超文本引用属性

href 超文本引用属性，指定链接的目标，也就是要跳转到什么位置。既然是超文本引用，说明其可以指向网页（.html、.php、.jsp、.asp …） && 图片（.jpg、.gif、.png …） && 音频（.mp3、.wav …）、视频（.mp4、.mkv …） && 一些下载网站的链接【压缩文件（.zip、.rar …）、可执行程序（.exe .air …）】。

href 本质上就是指向一个网络资源，这个网络资源（网页、图片、媒体、文件）几乎可以是任意格式的。如果浏览器支持这种格式，那么它就可以在浏览器上显示，比如常见的图片、音频、视频等，如果浏览器不支持这种格式，那么就提示用户下载。

链接打开方式属性

HTML 链接中，提供有用于指明链接的打开方式的 target 属性，支持：

  • _self：默认打开方式，在当前窗口中打开新页面，原窗口将被覆盖；
  • _blank：在新窗口中打开新页面，原窗口将被保留；
  • _parent：在当前框架的上一层打开新页面；
  • _top：在顶层框架中打开新页面。

绝大部分情况下，target 属性要么不写，保持默认的 _self，要么将它的值设置为 _blank，在新窗口中打开页面。

链接默认样式

浏览器会为 <a> 标签设置一些默认样式。

[1] >>> 鼠标样式

当你把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手（表示此处是一个链接）。

[2] >>> 颜色及下划线

超链接被点击之前为 蓝色，超链接被点击之后变成 紫色。超链接默认带有下划线，下划线颜色和文本颜色保持一致。

浏览器根据历史记录来判断超链接是否被点击过，如果 href 属性和历史记录中的某条 URL 重合，那么说明该链接被点击了。清空浏览器的历史记录会让超链接的颜色再次变回蓝色。

HTML 页面书签

HTML 页面可以通过 <a> 标签和 id 属性实现页面书签功能，实现页面内滚动。

示例代码如下：

1
2
3
4
5
6
7
8
9
10
<!-- 创建一个书签 -->
<h1 id="tips">Chapter 4</h1>

<!-- 向上述书签，添加一个链接 >>> 用于滚动到书签 "第四章（Chapter 4）" 处 -->
<a href="#tips">Visit the Useful Tips Section</a>

<!-- 或者 -->

<!-- 在另一张页面中，添加指向当前页面这个书签（Chapter 4）的链接 -->
<a href="demo.html#tips"> Visit Chapter 4 in `demo.html` page</a>

对于很长的页面（博文），书签可能很有用，可以帮助你快速跳转到特定部分（例如博文中特定章节）。当单击链接时，页面将滚动到带有书签的位置。

HTML 表格

HTML 页面中，使用 <table> 标签来定义表格，类似于 Excel 中表格都包括行（row）、列（cell）、单元格（cell）、表头（table heading）等概念。

每个表格均有若干行（由 <tr> 标签（TableRow）定义）构成，每行被分割为若干单元格（由 <td> 标签（TableDataCell）定义）。其中，表头单元格由 <th> 标签定义，是一种特殊的数据单元格（粗体、居中显示），其它数据单元格为标准单元格。数据单元格内容可以是文本、图片、列表、段落、表单、水平线、表格等等。

其语法格式如下(三行三列)：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<table>
    <tr>
        <th>名称</th>
        <th>描述</th>
        <th>补充</th>
    </tr>
    <tr>
        <td>Python</td>
        <td>1</td>
        <td>description</td>
    </tr>
    <tr>
        <td>Java</td>
        <td>2</td>
        <td>description</td>
    </tr>
</table>

浏览器中已显示出了一个表格样式的数据，但默认情况下，表格是没有边框的。

表格边框

你可以使用 <table> 标签中的 border 属性来设置表格的边框宽度，单默认位是像素（px），不用显式指明。

你可以尝试使用边框属性为上述表格样式添加宽度为 1 像素的边框：

1
2
3
<table border="1">
    ...
</table>

HTML5 中，border 属性仅用于指示表格是否用于布局目的，且只允许属性值 "" 或 "1"。”” 表格单元周围没有边框（表格可用于布局目的）。”1” 在表格单元周围添加边框（表格不用于布局目的）。

合并单元格

HTML 中表格，也支持单元格的合并操作，包括跨行合并和跨列合并两种：

  • rowspan：数据单元格跨行合并属性；
  • colspan：数据单元格跨列合并属性。

注意，不论是 rowspan 还是 colspan 都是 数据单元格（<td> && <th>） 标签的属性。

示例代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<table border="1">
    <tr>
        <th>名称</th>
        <th>描述</th>
        <th>补充</th>
    </tr>
    <tr>
        <td>Python</td>
        <td>1</td>
        <td>description1</td>
    </tr>
    <tr>
        <td rowspan="2">Java</td>
        <td>2</td>
        <td>description2</td>
    </tr>
    <tr>
        <td>3</td>
        <td>description3</td>
    </tr>
    <tr>
            <td colspan="3">External PHP</td>
        </tr>
</table>

需要注意的是，即使一个单元格中没有任何内容，仍推荐使用 <td> 或 <th> 元素来表示一个空单元格的存在，建议在内容中加入 &nbsp;（空格），否则低版本的 IE 可能无法显示出这个单元格的边框。

更复杂的 HTML 表格也可能包括需要使用 <caption> && <col> && <colgroup> && <thead> && <tfoot> && <tbody> 元素。

表格完整格式

HTML 表格可以分为三个部分：头部（Table Header） && 主体（Table Body） && 页脚（Table Footer），功能类似 Word 中的页眉、正文、页脚。

头部，主体和页脚的对应的三个标签是：

  • <thead>：创建单独的表头；
  • <tbody>：表示表格的主体，用于存放表格中的行（tr）和数据单元格（td）；
  • <tfoot>：创建一个单独的表页脚。

示例代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<table border="1">
    <!-- Table Header -->
    <thead>
        <tr>
            <td colspan="3">This is the head of the table</td>
        </tr>
    </thead>
    <!-- Table Footer -->
    <tfoot>
        <tr>
            <td colspan="3">This is the foot of the table</td>
        </tr>
    </tfoot>

    <!-- Table Body -->
    <tbody>
        <tr>
            <th>名称</th>
            <th>描述</th>
            <th>补充</th>
        </tr>
        <tr>
            <td>Python</td>
            <td>1</td>
            <td>description1</td>
        </tr>
        <tr>
            <td rowspan="2">Java</td>
            <td>2</td>
            <td>description2</td>
        </tr>
        <tr>
            <td>3</td>
            <td>description3</td>
        </tr>
    </tbody>
</table>

HTML 5 中，不再支持 HTML 4.01 中 <thead> && <tbody> && <tfoot> 标签的任何属性。并且需要注意的是 <thead> && <tfoot> 标签应出现在 <tbody> 之前。

表格标题

HTML 允许使用 <caption> 标签来为表格设置标题，用来描述表格的内容。

<caption> 标签必须直接放置到 <table> 标签之后，这个标题会被居中于表格之上。示例代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<table border="1">
    <caption>Language Description</caption>
    <tr>
        <th>名称</th>
        <th>描述</th>
        <th>补充</th>
    </tr>
    <tr>
        <td>Python</td>
        <td>1</td>
        <td>description</td>
    </tr>
    <tr>
        <td>Java</td>
        <td>2</td>
        <td>description</td>
    </tr>
</table>

表格列样式设置

为了方便对表格中的列的样式进行设置，HTML 中提供了 <colgroup> 标签（列组），来为某个或某几个列（<col>）应用某种样式（列标签（<col>）需要包围在列组（<colgroup>）标签中使用），而不需要重复为每个单元格或每一行设置样式。

需要注意的是，列组（<colgroup>）标签只能在 <table> 元素之内，在任何一个 <caption> 元素之后，在任何一个 <thead> && <tbody> && <tfoot> && <tr> 元素之前使用。

示例代码如下（为三个列设置了背景色）：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<table border="1">
    <caption>Language Description</caption>
    <colgroup>
        <col span="2" style="background-color: red;" />
        <col style="background-color: blue;" />
    </colgroup>
    <tr>
        <th>名称</th>
        <th>描述</th>
        <th>补充</th>
    </tr>
    <tr>
        <td>Python</td>
        <td>1</td>
        <td>description</td>
    </tr>
    <tr>
        <td>Java</td>
        <td>2</td>
        <td>description</td>
    </tr>
</table>

其中，span 属性表示跨列的列数。

对于表格（Table）的更多样式设置，你可以使用 CSS 样式表进行设置。

表格嵌套

你可以在一个表格中使用另一个表。可以使用 <table> 内的几乎所有标签（以上）。

HTML 列表

HTML 中支持定义列表（List），列表中你可以放置​​文本、图像、链接等，也可以在一个列表中定义另一个列表（列表嵌套）。

HTML 中支持三种不同形式的列表定义：

  • 有序列表（Ordered List）：使用 <ol> && <li> 标签；
  • 无序列表（Unordered List）：使用 <ul> && <li> 标签；
  • 自定义列表（Definition List）：使用 <dl> && <dt> && <dd> 标签。

有序列表

有序列表适合各项目之间存在顺序关系的情况。

<ol>（Ordered List） 一般和 <li>（List Item） 配合使用，不会单独出现，而且不建议在 <ol> 中直接使用除 <li> 之外的其他标签。有序列表的项目编号默认从数字 1 开始。

示例代码如下：

1
2
3
4
5
6
7
8
<!-- Ordered List -->
<p>To Cook Rice: </p>
<ol>
    <li>bring water to a boil</li>
    <li>add a teaspoon of rice</li>
    <li>stir well</li>
    <li>continue to cook for 10 minutes</li>
</ol>

无序列表

无序列表适合各项目之间无级别顺序关系的情况。

<ul>（Unordered List） 一般和 <li>（List Item） 配合使用，不会单独出现，而且不建议在 <ul> 中直接使用除 <li> 之外的其他标签。默认情况下，无序列表的每一项都使用 ● 符号表示。

示例代码如下：

1
2
3
4
5
6
7
8
<!-- Unordered List -->
<p>Breakfast: </p>
<ul>
    <li>Eggs</li>
    <li>Milk</li>
    <li>Bread</li>
    <li>Lettuce</li>
</ul>

自定义列表

自定义列表不仅仅是一列项目，而是项目及其描述的组合。

自定义列表使用 <dl>（Definition List）标签定义，<dt>（Definition Term）和 <dd>（Definition Description）是同级标签，它们都是 <dl> 的子标签。一般情况下，每个 <dt> 搭配一个 <dd> 用于定义一个项目以及其描述，一个 <dl> 可以包含多对 <dt> 和 <dd>（多个项目）。

示例代码如下：

1
2
3
4
5
6
7
<!-- Definition List -->
<dl>
    <dt>Coffee</dt>
    <dd>- black hot drink</dd>
    <dt>Milk</dt>
    <dd>- white cold drink</dd>
</dl>

需要注意的是：<dt> 和 <dd> 虽然是同级标签，但是它们的默认显示样式不同，<dd> 带有一段缩进，而 <dt> 顶格显示，这样层次更加分明。

并且，自定义列表中的一个术语名（Term）可以对应多重定义或者多个术语名对应同一个定义（Description），对应关系不限。

列表样式

对于列表杨样式，外边距、内边距和列表项标记等，你可以通过 CSS 样式表属性来修改。

HTML 教程之 HTML 基本元素

https://www.orangeshare.cn/2019/01/02/html-jiao-cheng-zhi-html-ji-ben-yuan-su/

Author

Waldeinsamkeit

Posted on

2019-01-02

Updated on

2022-12-13

Licensed under

#
You need to set install_url to use ShareThis. Please set it in _config.yml.

Like this article? Support the author with

Comments

You forgot to set the shortname for Disqus. Please set it in _config.yml.
×