html:(4):认识html文件基本结构和认识head标签

认识html文件基本结构

这一节中我们来学习html文件的结构：一个HTML文件是有自己固定的结构的。

<html><head>...</head><body>...</body>
</html>

代码讲解：

1. <html></html>称为根标签，所有的网页标签都在<html></html>中。

2. <head> 标签用于定义文档的头部，它是所有头部元素的容器。头部元素有<title>、<script>、 <style>、<link>、 <meta>等标签，头部标签在下一小节中会有详细介绍。

3. 在<body>和</body>标签之间的内容是网页的主要内容，如<h1>、<p>、<a>、<img>等网页内容标签，在这里的标签中的内容会在浏览器中显示出来。

<!DOCTYPE HTML>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>认识html文件基本结构</title></head><body><h1>在本小节中，你将学会认识html文件基本结构</h1></body>
</html>

运行结果

认识head标签

的文字内容是网页的标题信息，它会出现在浏览器的标题栏中。网页的title标签用于告诉用户和搜索引擎这个网页的主要内容是什么，搜索引擎可以通过网页标题，迅速的判断出网页的主题。每个网页的内容都是不同的，每个网页都应该有一个独一无二的title。

例如：

<head><title>hello world</title>
</head>

<title>标签的内容“hello world”会在浏览器中的标题栏上显示出来，如下图所示：

<head>标签中的其它标签内容的讲解，会在以后的章节中为大家一一讲解。

任务

我来试试：是否了解head标签

右部编辑器中有一个网页的代码，但第3行和第6行缺少代码，请补充。

<!DOCTYPE HTML>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>认识head标签</title></head><body><h1>欢迎来到歌谣的学习</h1></body>
</html>

运行结果