最新 uploadifive html5版_HTML5与CSS3课堂

导语

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

基本的 HTML

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

我是页面标题

我是页面内容

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

和 之间的文字，三是body之间的内容(包含文字和代码)。

HTML 使用 < 和 > 包围 HTML 标签。开始标签(如

)用于标记元素的开始，结束标签(如 )用于标记元素的结束。有的元素没有结束标签，如 meta。在html中没有结束标签的元素少之又少，后面会一一介绍。

01

网页的顶部和头部

前面提到，页面内容位于主体部分，那么其他的代码有什么作用呢？实际上，

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

02

网页的主体内容

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

我是页面标题

我是h1标签

前端全栈开发，面向前端爱好者提供前端最新信息，React，Antd，小程序等一列教程，同时也提供Java开发，交流经验。互惠互利，共同学习进步。

下图是展示效果：

上面的代码中包含了本章开头提到的三种成分：文本内容、对其他文件的引用(图像的 src 值和链接的 href 值)及标记。使用浏览器查看网页时，不会显示包围文本内容的标记。不过这些标记是非常有用的，我们就是使用它们来描述内容的。例如，

标记用于表示段落的开始。

对 HTML 进行缩进

代码的缩进与内容在浏览器中的显示效果没有任何关系(但是pre 元素是一个例外)。不过，对嵌套在父元素中的代码进行缩进是一种惯例，这样我们在编写和阅读代码时就会更容易看出元素之间的层级关系。

HTML 提供了很多这样的元素。上面的例子演示了几种最为常见的元素： h1、 img 和 p。每个元素都有各自的含义，例如， h1 是标题， img是图像。在这里不会对示例代码做过多的讲解。

好了，今天的课程就到这里。