1、基本标签

Twistzp2024-12-292024-12-29

在编写 HTML 页面时，最基本的结构通常由以下四个部分组成：

文档声明（<!DOCTYPE html>）
用于告诉浏览器当前文档使用的是 HTML5 标准。
<html></html> 标签对
告诉浏览器，整个页面的内容从 <html> 开始到 </html> 结束。通常会在 <html> 标签中添加语言属性（如 lang="zh-CN"），表示这是一个中文网页。
<head></head> 标签对
网页的头部，用于定义页面标题、关键字、描述、引用外部文件等信息。通常对浏览器或搜索引擎的行为有影响，但不会直接显示在网页中。
<body></body> 标签对
网页的“身体”，绝大部分可见内容都在此标签对中编写，包括文本、图片、表单、按钮等。

下面是一段最简洁的示例代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>这是网页的标题</title>
</head>
<body>
    <p>这是网页的内容</p>
</body>
</html>

1.1 `<head>` 标签

<head> 标签用于存放对页面结构和功能有影响的配置信息，一般情况下，浏览器并不会直接渲染其中的内容。它可以包含以下常见标签：

**<title>**：定义网页标题，显示在浏览器的标签栏或浏览器窗口标题上。
**<meta>**：定义元信息，如编码格式、关键字、描述等。
**<link>**：链接外部资源，如外部 CSS 文件。
**<script>**：嵌入或引用 JavaScript 脚本。
**<style>**：内部样式定义。
**<base>**：用于指定页面中所有相对链接的基准 URL（在一般项目中不常使用）。

下面是一个示例的 <head> 部分：

<head>
    <title>示例标题</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="styles.css">
    <script src="script.js"></script>
</head>

1.1.1 `<title>` 标签

定义网页标题，要求在每个页面都编写合适的 title，这样不仅方便搜索引擎收录，也有助于用户区分浏览器不同的标签页。

1.1.2 `<meta>` 标签

<meta> 标签通常提供搜索引擎及浏览器所需的额外信息，比如关键字、描述、作者、版权、编码格式、页面刷新等。

1）`name` 属性

用于定义页面的描述性信息，例如关键字、描述、作者、版权等。
常见的 name 属性取值：
- keywords：定义网页关键字。
- description：定义网页描述。
- author：定义页面作者。
- copyright：定义页面的版权信息。

<!DOCTYPE html>
<html>
<head>
    <!-- 网页关键字 -->
    <meta name="keywords" content="绿叶学习网,前端开发,后端开发">
    <!-- 网页描述 -->
    <meta name="description" content="绿叶学习网是一个最富有活力的Web技术学习网站">
    <!-- 本页作者 -->
    <meta name="author" content="helicopter">
    <!-- 版权声明 -->
    <meta name="copyright" 
          content="本站所有教程均为原创，版权所有，禁止转载。否则必将追究法律责任。">
</head>
<body>
</body>
</html>

注意： 在实际开发中，最常用的 name 属性取值是 keywords 和 description，可以满足大部分 SEO 需求。

2）`http-equiv` 属性

用于定义页面的技术性信息，例如编码方式、自动刷新跳转等。

定义网页使用的编码（HTML5 推荐直接使用 <meta charset="UTF-8">）：
1
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
实现自动刷新或跳转：
- content="6;url=http://www.baidu.com" 表示页面将于 6 秒后跳转到百度首页：
  1
  <meta http-equiv="refresh" content="6;url=http://www.baidu.com">

1.1.3 `<style>` 标签

用于在 HTML 文档中直接编写 CSS 样式。
一般在现代开发中多使用外部样式表（<link rel="stylesheet">）以保持代码整洁，但有时也可在项目中快速测试或编写局部样式。

1.1.4 `<script>` 标签

用于嵌入或引用 JavaScript 代码。
一般放置在 <head> 中或页面底部 <body> 结束前，具体位置与执行逻辑需求相关。

1.1.5 `<link>` 标签

引入外部样式表文件（CSS 文件）或其他与页面相关的外部资源（如网页图标 favicon 等）。

1.1.6 `<base>` 标签

用于指定页面中所有相对链接的基准 URL。
在大多数项目中并不常用，如果不需要统一调整所有相对路径的引用，可以忽略。

1.2 `<body>` 标签

<body> 标签包含页面的主要内容部分，用户在浏览器中看到的绝大多数内容都放置在此处，包括文本、图片、表单、按钮等页面元素。示例：

<body>
    <h1>欢迎来到我的网页</h1>
    <p>这是一个段落。</p>
    <img src="image.jpg" alt="示例图片">
    <button>点击我</button>
</body>

在此标签中可以自由地嵌套其他各类 HTML 标签，根据需求来布局和展示网页内容。

[up主专用，视频内嵌代码贴在这]

1.1 <head> 标签

1.1.1 <title> 标签

1.1.2 <meta> 标签

1）name 属性

2）http-equiv 属性

1.1.3 <style> 标签

1.1.4 <script> 标签

1.1.5 <link> 标签

1.1.6 <base> 标签

1.2 <body> 标签

Twistzp