网页由哪些部分组成？

htmlhtml5

网页主要由以下几个部分组成：

  1. 文档类型声明（Doctype）：它告诉浏览器当前文档使用的是哪个版本的HTML。例如，<!DOCTYPE html> 用于声明这是一个HTML5文档。

  2. HTML元素：

    • <html>：这是HTML文档的根元素，所有的内容都包含在这个元素内。
    • <head>：包含了文档的元（meta）数据，如文档的标题（<title>）、字符集声明（<meta charset="UTF-8">）、链接到外部资源（如CSS文件，<link>）以及脚本（<script>）等。
    • <body>：包含了网页的所有可见内容，如文本、图片、音频、视频、链接、列表、表格、表单等。

  3. 头部内容（Head Content）：

    • <title>：定义浏览器工具栏的标题，当网页添加到收藏夹时的标题。
    • <meta>：提供有关HTML文档的元信息，例如字符集、页面描述、关键词等。
    • <link>：链接到外部资源，如CSS文件。
    • <style>：用于包含页面的CSS样式信息，当样式信息较少时，可以写在这里。
    • <script>：用于加载JavaScript代码或链接到外部JavaScript文件。

  4. 主体内容（Body Content）：这是网页上用户实际看到的内容，可以包含各种HTML元素，如段落（<p>）、标题（<h1> 到 <h6>）、列表（<ul>, <ol>, <li>）、表格（<table>, <tr>, <th>, <td>）、表单（<form>）、图片（<img>）、链接（<a>）、区块（<div>）等。

以下是一个简单的HTML文件示例，展示了这些组成部分：

示例效果与源代码：

运行效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的网页示例</title>
    <style>
        /* 这里可以写CSS样式 */
    </style>
</head>
<body>
    <header>
        <h1>欢迎来到我的网站</h1>
    </header>
    <nav>
        <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">关于我们</a></li>
            <li><a href="#">服务</a></li>
        </ul>
    </nav>
    <main>
        <article>
            <h2>文章标题</h2>
            <p>这是一段示例文本。</p>
        </article>
    </main>
    <footer>
        <p>版权所有 &copy; 2024</p>
    </footer>
    <script>
        // 这里可以写JavaScript代码
    </script>
</body>
</html>

这个示例展示了如何使用HTML的基本组成部分来创建一个简单的网页结构。

上一篇：我们看到网页背后本质是什么？

下一篇：Canvas中裁切是指什么？