轻松上手HTML：基本结构元素

郎哥
前端
2024-05-31
340热度
0评论

HTML基本结构元素主要有html（HTML文档元素）元素、head（HTML文档头部）和body（HTML主体）元素。每个HTML网页文件一般都包含这三个元素，而且只能出现一次。

html元素

html元素是网页文件的根元素，所有网页文件内容都要放置在html的起始标签和结束标签内，浏览器通过该标签确认读取的文档是HTML文档，并按照HTML规范解析并显示HTML文件。例如下面的HTML文档：

<html>
<head>
<title>我的第一个网页</title>
</head>
<body>
<h1>这是第一个网页</h1>
<hr>
<p>这是一个段落</p>
</boyd>
</html>

head元素

head元素包含网页的头部信息，它主要包括网页的标题、网页介绍、关键词、样式文件、脚本文件、字符编码等内容。这些内容主要被浏览器所用，不会显示在网页内容中。head常用元素说明如下：

title元素

title元素内的内容是网页的标题，标题主要显示在浏览器的标题栏或状态栏上，当用户收藏该网页文件或加入书签列表时，标题将成为该网页文档链接的默认名称。title标签必须放置在head标签内。例如下面的网页文档。

该网页的标题是“我的第一个网页”，在浏览器中它将显示在浏览器的标题栏中，如下图所示。

link元素

link元素用于网页文档引入外部样式文件，样式文件是CSS文件，CSS文件描述了网页的外观。例如网页的背景颜色、段落的字体字号、网页元素之间排版位置等内容。关于样式文件后面CSS课程会讨论。例如，下面的网页文档引入了theme.css文件。

<head>
<link rel="stylesheet" type="text/css" href="theme.css" />
</head>

link元素的href属性的值为链接样式文件的名称，type属性指定链接文件的类型，一般是样式文件，type属性的值为“text/css”，rel属性指定当前网页文档与被链接文档之间的关系，rel属性的值为“stylesheet”，表示链接的是样式表。

script元素

script元素用于网页文档引入外部脚本文件和内置脚本，脚本文件是js文件，脚本文件是用javaScript语言编写的程序，这些被引入的程序可以在网页中调用。关于脚本文件后面javaScript课程会讨论。例如，下面的网页文档引入了do.js文件。

script元素的src属性值为脚本文件的名称，type属性指定链接文件的类型，一般是脚本，type属性的值为“text/javascript”。script元素也可以内置脚本，如下面的网页文档内置了脚本。

<script type="text/javascript">
alert("Hello World!")
</script>

meta元素

met作者、显示字符集等信息，利用meta元素可以进行网页的SEO优化，特别是关键词和网页描述。当网页需要进行SEO优化时，meta元素是非常重要的，搜索引擎会通过meta元素提供的网页关键词及网页描述，再综合网页内容对网页质量进行评估。

meta元素共有两个属性，分别是http-equiv和name属性。http-equiv属性向浏览器提供一些网页控制信息，如网页采用的字符集等，与之对应的属性值为content；name属性描述网页关键词、网页描述等网页内容信息，与之对应的属性值为content。例如，下面的网页文档给出了网页内容使用的字符集、关键词、网页描述信息。

<html>
<head>
<title>测试网页</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name=”keyword” content="测试，网页">
<meta name="description” content="测试网页的meta元素">
</head>
<body>
<p>测试网页的meta元素</p>
<p>本网页字符集采用utf-8</p>
</body>
</html>

使用记事本编辑保存该网页文档时，保存编码应选择utf-8，不要使用默认的ANSI编码，如果使用非utf-8编码保存网页文档，浏览器显示网页

时会出现乱码。网页显示效果如下图所示。

body元素

body元素包含网页文档的所有内容，是网页文档的主体元素，前面介绍的网页块元素和行元素都要放置在body元素内。a元素用于设置网页关键词、网页描述、