HTML5与CSS3课堂

八卦谈佚名 ▪ 2022-12-04 18:44:23

导语

从今日起计划推出系列课程《HTML5和CSS课程》。内容来源于《HTML5与CSS3基础教程（第8版）》。如果你喜欢看书，请购买正版书籍。以下内容均来源于对该本书的解读。

基本的 HTML

每个网页都由如下代码构成的。所有的不管简单还是复杂的页面都离不开如下的及部分。

<!DOCTYPE html>

<head>

<title>我是页面标题</title>

</head>

<body>

我是页面内容

</body>

</html>

每个网页都包含 DOCTYPE、 html、 head 和body 元素，它们是网页的基础。在这个页面中，可以定制的内容包括两项，一是赋予 lang 属性的语言代码，二是 <title> 和 </title> 之间的文字，三是body之间的内容（包含文字和代码）。

HTML 使用 < 和 > 包围 HTML 标签。开始标签（如 <head>）用于标记元素的开始，结束标签（如 </head>）用于标记元素的结束。有的元素没有结束标签，如 meta。在html中没有结束标签的元素少之又少，后面会一一介绍。

网页的顶部和头部

前面提到，页面内容位于主体部分，那么其他的代码有什么作用呢？实际上， <body>开始标签以上的内容都是为浏览器和搜索引擎准备的。 <!DOCTYPE html> 部分（称为DOCTYPE）告诉浏览器这是一个 HTML5 页面。 DOCTYPE 应该始终位于页面的第一行。接下来是 html 元素，它包着页面的其余部分，即 <html> 和 </html> 结束标签（表示页面的结尾）之间的内容。在这里可以为网页指定其他语言，比如css，js或者其他语言。再接下来是文档的头部，即 <head> 和</head> 之间的区域。 <meta charset="utf-8"/> 。主体前面的代码中，有一部分是用户可见的，即 <title> 和</title> 之间的文本。这些文本会出现在浏览器标签页中，对于某些浏览器，这些文本还会出现在浏览器窗口的顶部，作为网页的标题。此外，这些文本通常还是浏览器书签的默认名称，它们对搜索引擎来说也是非常重要的信息。

网页的主体内容

接下来为页面添加一些内容。