基本的 HTML

 

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

 

　　我是页面标题

 

　　我是页面内容

 

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

 

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

 

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

 

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

 

　　01

 

　　网页的顶部和头部

 

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

 

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

 

　　02

 

　　网页的主体内容

 

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

 

　　我是页面标题

 

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

 

　　下图是展示效果：

 

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

 

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

 

　　对 HTML 进行缩进

 

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

 

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

 

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