人人都能看懂的 HTML 教程

本文最后更新于 <span id="expire-date"></span> 天前，文中部分描述可能已经过时。

何为 HTML

HTML ，即超文本标记语言，你看到的所有网页都由 HTML 构成，他负责描述一个网页显示的内容（包括文字、图片、表格、按钮等等）和格式（文本加粗、斜体、文本和图片大小等等）。浏览器就是用于分析 HTML 文件的结构，然后渲染出网页的工具（当然，浏览器在背后做的事情远不止这些）。

HTML 跟人类平时说的自然语言很像，只是多了很多用于描述网站结构和格式的，形如 <h1></h1> 的标签，标签有两种，单标签和双标签。双标签是 <h1></h1> 这样把内容包裹起来的，单标签则只有简单的一个标签，例如 <meta>。

被标签包裹住的内容（单标签则没有内容），和标签本身一起被称为元素，如下代码就代表了一个 HTML 元素，这是一个标题元素，因此会比其他文字大很多：

<h1>测试</h1>

元素还支持添加属性，来更具体的描述元素，比如下面这个：

<meta charset="utf-8">

meta 是这个标签的名字，用属性名 (比如这里的 charset) 加等于号（=）再加一个双冒号里头写属性的内容（比如这里的 “utf-8”）就能为标签赋予属性。

了解了最基础的知识，我们来看一个最简单的 HTML 文档。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文档标题</title>
</head>

<body>
文档内容
</body>

</html>

现在我们来一点点解析。

<!DOCTYPE html> 这行的意义是，告诉浏览器这是个 HTML 文档，因为在十几年前，一个网页可以是由别的标记语言（比如已经消失的 XHTML）编写的。在 2021 年，这行代码可以不写，只要你用的是现代浏览器。
<html></html> 上面的代码告诉你了这是一个 HTML 编写的网页，那么这一行便是告诉浏览器，后面是 HTML 代码了。
<head></head> 这个元素内，通常包含网页的基本信息，例如网站的名称、简介之类的，还会包含网站引入的样式表，关于样式表是什么，我之后再赘述。
<meta charset="utf-8"> 告诉浏览器这是个 utf-8 编码的页面，编码这个不需要了解，而且事实上你删去了也不会有问题，因为现代浏览器默认认为页面是 utf-8 编码。
<title>文档标题</title> 告诉浏览器这个页面的标题是啥，一般会显示在浏览器地址栏上边。
<body>文档内容</body> 上面的代码都是告诉浏览器这个页面的相关信息，在这个元素里，才是编写网站内容的地方，如何编写内容，等我一会再讲～

在上一小节里，我阐述了一个 HTML 文档的基本结构，至于如何编写内容，听我细细道来。

首先，上边我讲到，你需要在 <body></body> 标签内部编写代码，你写在外边也行，只是写法不标准而已，因为 HTML （或者说浏览器）非常宽容，只要不是什么逆天的大错，不会给你爆好几行 error 搞你心态。

编写内容则非常简单，当然你需要知道几个最基本的标签：

<h1-6></h1-6> 分别代表了一级标题到六级标题，一级最大，六级最小。
<p></p> 代表了一行文字，如果文字超过了屏幕边缘会自动换行
<input/> 显示一个输入框，注意，这是一个单标签。
<a></a> 点击 a 标签包裹的内容，会自动跳转到相应页面，添加一个 href 属性，双引号里写跳转的链接，就像这样 <a href="https://baidu.com">点我跳转到百度</a>
<img></img> 同样的，给 img 标签添加 src 属性，双引号里写图片的链接，就能在 HTML 里添加链接。

那么，来写一个登录界面吧，以下的代码默认认为包含在 body 标签内部。

<h1>登录窗口</h1>
<p>登录发现更大世界</p>
<input placeholder="这里输入账号"/>
<input placeholder="这里输入密码" />
<a>登录</a>

本文作者：AkaraChen

本文链接： https://blog.akr.moe/html.html

更新于 2021-10-24