跳转至

HTML 语言基础

初始 HTML

HTML 的全称为 Hyper Text Markup Language(超文本标记语言),是一种用于描述网页的标记语言。互联网上五彩缤纷的网页就是使用 HTML 进行描述的。

这是最简单的 HTML 文本:

1
2
3
4
5
<body>
    <h1>这是标题</h1>
    <p>这是段落。和我一起读:</p>
    <p>你——好——世——界——</p>
</body>

你可以点击 链接 在浏览器中预览这段 HTML 文本。

不难发现,HTML 文本由层级结构组成。每一级内容被一对 HTML 标签包围,构成一个 HTML 元素。元素之间可以嵌套

1
<标签>内容</标签>

在这段最简单的 HTML 文本中,我们已经见到了三种不同的 HTML 元素:

  • <body> 元素表示网页的主体内容,用来容纳网页上所有可见元素;
  • <h1> 元素表示一级标题;
  • <p> 元素表示段落。

当然,这段最简单的 HTML 文本并不足以描述一个完整的网页。我们来看下面的示例:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="utf-8">
        <title>HTML 示例</title>
    </head>
    <body>
        <h1>这是标题</h1>
        <p>这是段落。和我一起读:</p>
        <p>你——好——世——界——</p>
    </body>
</html>

你可以在自己的电脑上新建一个文件 index.html,将上面这段文本粘贴进去,保存后使用浏览器打开 index.html

相比于最简单的 HTML 文本,这段完整的 HTML 网页多出了以下元素:

  • <!DOCTYPE html> 用于表示这是一段 HTML 文本;
  • <html> 元素是一个完整的 HTML 网页的根元素;
  • <head> 元素用来容纳这个完整的 HTML 网页的一些元信息(meta information);
  • <meta> 元素用来表示这个完整的 HTML 网页的元信息;
  • <title> 元素用来表示这个网页的标题。

这些元素看起来复杂,但它们是每个 HTML 网页的固定组成部分。你可以将它们视为一套固定的框架,当你想要书写新的 HTML 页面时,只需填写 <body> 元素的内容即可。

学会模仿

HTML 并不需要刻意学习。观察示例,理解 HTML 的结构,具备基本的阅读能力,能够动手魔改、仿写简单的页面即可。

典型的 HTML 元素与属性

HTML 可以满足绝大多数文本排版需求。

1
2
3
4
5
<body>
    <p>HTML 文本具有丰富的格式,如<b>加粗</b><i>斜体</i><del>删除</del></p>
    <p>标签之间可以嵌套,<b>以表达<i>更为<del>花哨</del>多样</i>的格式</b></p>
    <p>你还可以在 HTML 文本中插入<a href="https://www.baidu.com">链接</a></p>
</body>

你可以点击 链接 在浏览器中预览这段 HTML 文本。

元素的属性

在上面的示例中,元素 <a> 较为特殊。从形式上看,它多出一个 href="...",用来描述该链接的目标地址。这里的 html 称为元素 <a> 的属性。

HTML 可以描述有序和无序列表。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
<body>
    <p>这是 HTML 无序列表:</p>
    <ul>
        <li>第一项</li>
        <li>第二项</li>
        <li>第三项</li>
    </ul>
    <p>这是 HTML 有序列表:</p>
    <ol>
        <li>第一项</li>
        <li>第二项</li>
        <li>第三项</li>
    </ol>
</body>

你可以点击 链接 在浏览器中预览这段 HTML 文本。

你可以在 HTML 文本中添加互联网上的图片。

1
2
3
4
<body>
    <p>你也可以添加图片。</p>
    <img src="替换为你的图片地址" alt="Loading..." />
</body>

你可以点击 链接 在浏览器中预览这段 HTML 文本。

你可以在 HTML 文本中插入表格。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
<body>
    <table>
        <tr>
            <td>(1, 1)</td>
            <td>(1, 2)</td>
        </tr>
        <tr>
            <td>(2, 1)</td>
            <td>(2, 2)</td>
        </tr>
    </table>
</body>

你可以点击 链接 在浏览器中预览这段 HTML 文本。

阅读学习了上述示例代码后,我们可以总结一下我们所学到的典型的 HTML 元素与属性。

名称 含义 属性
<p> 段落
<h1> 一级标题
<h2> 二级标题
<div> 分组
<a> 链接 href="链接目标"
<img> 图片 src="图片地址"
alt="占位文本"
<b> 粗体
<i> 斜体
<br /> 段落内换行
<table> 表格
<tr> 表格行
<td> 表格元素

当然,在实际开发中,我们很可能用到更多丰富多样的 HTML 元素。这篇文档无意于穷举所有的 HTML 元素。当你需要查找某个特定的 HTML 元素的用法时,可以借助搜索引擎,或者参见这份文档最后列出的资源链接。

后续拓展

现在,你已经学会了基本的 HTML 文本的编写。在 Web 开发中,HTML 通常用于描述网页的内容。至于页面的布局和页面的动态行为,则需要 CSS 和 JavaScript 的辅助。

后续可以阅读的文档有:

资源链接

评论

作者: Ashitemaru (4.88%), UNIDY2002 (95.12%)