跳转至

Lecture 1：HTML 简介

1 什么是 HTML

HTML 的全称是 HyperText Markup Language，即超文本标记语言。它是一种用于创建网页的标记语言，由一系列的元素组成，这些元素可以用来包裹文本、图片、视频等内容。

也就是说 HTML 描述页面里面的内容。

2 准备学习用的软件

分为两部分：

  • 文本编辑器
  • 浏览器

你甚至可以使用记事本来写 HTML，但是注意保存格式为 .html。

.htm 是什么？

.htm 是 HTML 的缩写，是早期浏览器对文件名长度的限制，现在已经不再使用。这两个东西是一样的。

现在可以写一个最简单的 HTML 页面：

HTML
1
我的第一个 HTML 页面

保存之后用浏览器打开，就可以看到这个页面了。

3 HTML 文件框架

作为一种标记语言，需要有能够被识别为【标记】的符号，在这里是尖括号 <>。

例如我们在上面的例子中，在那句话前面加上一个标记：

HTML
1
2
<html>
我的第一个 HTML 页面

这对尖括号中的东西就是标记，不会在页面上显示出来。尖括号中的 html 代表着：从这里开始是一个 HTML 页面。

既然有开始，那么就有结束：

HTML
1
2
3
<html>
我的第一个 HTML 页面
</html>

绝大多数 HTML 的标记都长成这个样子，有开始有结束。

除了 html 标记外，HTML 页面还经常有以下两种标记：

  • head 标记：用于存放一些页面的元信息，比如标题、字符集等配置，不是正文内容。
  • body 标记：用于存放页面的主要内容。
HTML
1
2
3
4
5
6
7
8
9
<html>
<head>
    <title>我的页面</title>
    <meta charset=utf-8>
</head>
<body>
    这是我的第一个 HTML 页面
</body>
</html>

<title> 标记用于设置页面的标题，这个标题会显示在浏览器的标签页上。

<meta charset=utf-8> 标记用于设置页面的字符集，这里设置为 utf-8，表示使用 UTF-8 编码。

我们将上面的代码保存为 .html 文件，然后用浏览器打开，就可以看到一个简单的 HTML 页面了，如下图所示：

image-html

对于 HTML 5 来说，需要在文档前面加上一行

HTML
1
<!DOCTYPE html>

以表示该文档使用 HTML 5 规范。

评论