在进入正题之前,我们要先理解一些基本概念。网页是指在互联网上发布的文本、图像、视频、音频等多媒体内容的集合。它们是用HTML(HyperText Markup Language)语言编写的,被称为HTML页面。一个网页由两个主要部分组成:头部(head)和主体(body)。其中,头部包含的文本信息在浏览器里不会显示,用于给浏览器提供一些指导性信息。而主体则是网页的“主角”,是实际呈现给用户的可见内容。接下来,我们将详细介绍这两个部分。
2. 头部
头部是网页最重要的组成部分之一,包括了各种指令、参数、标签等,用于告诉浏览器如何处理HTML文档的各个方面。它通常放置在HTML标记的起始位置,反映于HTML代码的最前面。
2.1 基本结构
HTML头部基本上由三个部分组成:
(1)HTML声明(Document Type Declaration,简称DTD):告诉浏览器我们使用的是哪一种HTML版本。在HTML5中,这个声明一般是。如果我们使用的是旧版本的HTML,则需要使用对应的DTD声明。
(2)头部标签(
):头部标签是头部的容器。所有放在头部标签内的元素都不会被浏览器渲染出来,但它们仍然是HTML文档的一部分,是存放各种类型标签和信息的地方。(3)元数据(Metadata):元数据是HTML头部的主要组成部分。它包含了关于页面的各种信息,如页面标题、作者、关键字、描述等等。
2.2 元数据
元数据包含了用于描述网页信息的各种标签和属性,如:
(1)标题标签(
(2)关键字标签(<meta name=\"keywords\" content=\"关键字1,关键字2...\">):这个标签定义了HTML文档中使用的关键字,以便让搜索引擎更好的索引和理解网页内容。value属性定义了一系列用逗号隔开的关键字。
(3)描述标签(<meta name=\"description\" content=\"描述内容\">):这个标签提供了关于页面内容的简短描述,用于搜索引擎显示网页的概述。
(4)字符集标签(<meta charset=\"UTF-8\">):这个标签定义了网页的字符集。如果不定义,则浏览器会尝试猜测所使用的字符集。
(5)视口标签(<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">):这个标签定义了网页在不同设备上的显示效果,包括布局、缩放等特性。
2.3 别的标签
头部也经常包含其他的标签,如:
(1)CSS(Cascading Style Sheets)链接标签(<link rel=\"stylesheet\" href=\"style.css\">):这个标签把一个外部的CSS文档链接到HTML页面上。CSS用于控制页面的布局和样式。
(2)JavaScript(JS)链接标签(<script src=\"script.js\"></script>):这个标签把一个外部的JS文件链接到HTML页面上。JS用于添加动态效果和交互性。
(3)图标标签(<link rel=\"icon\" href=\"favicon.ico\">):这个标签定义在浏览器标题栏和书签中的小图标。它需要是.ico文件格式。
3. 主体
主体是网页中最重要的部分,包含了实际的内容,是呈现给用户的可见页面区域。它一般包含了各种HTML标签和文本、图像、视频、音频等多种元素。
3.1 基本结构
HTML主体包含一个主题标签,<body>。这个标签包含了网页的各种内容,如文本、图像、超链接、表格等。
3.2 常见的标签
HTML主体中使用的标签非常丰富,一些常见的标签如下:
(1)段落标签(
):用于定义一段文本。
(2)标题标签(
、、、、、):用于定义文档或节段的标题。
、、、):用于定义文档或节段的标题。
、):用于定义文档或节段的标题。
(3)图片标签:用于在文档中插入图像。
(4)超链接标签(链接文本):用于在文档中插入链接。
(5)列表标签(、、):用于定义无序和有序的列表。
(6)表格标签(、、
(7)表单标签(