HTML入门指南：从零开始学习网页开发——（二）从标签到结构

GIS小白吃

已于 2025-02-21 11:40:03 修改

阅读量344

点赞数 4

CC 4.0 BY-SA版权

文章标签： html 学习前端

于 2025-02-15 11:34:21 首次发布

本文链接：https://blog.csdn.net/qq_42817318/article/details/145648077

一、HTML文档的基本结构

一个完整的HTML文档通常由以下几部分组成：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>网页标题</title>
  </head>
  <body>
    <h1>这是一个标题</h1>
    <p>这是一个段落。</p>
  </body>
</html>

<!DOCTYPE html>：声明文档类型为HTML5。
<html>：HTML文档的根元素，所有其他元素都包含在其中。
<head>：包含文档的元数据，例如标题、字符编码、样式表链接等，head 标签中的内容不会出现在网页中
<meta charset="UTF-8">：指定文档的字符编码为UTF-8，包含世界上所有语言的：所有文字与符号，存储时采用哪种方式编码，读取时就采用哪种方式解码，对应不上将会乱码。
<title>：定义网页的标题，显示在浏览器的标题栏或标签页上。
<body>：想要呈现在网页中的内容写在 body 标签中，包含网页的可见内容，例如标题、段落、图片、链接等。

二、HTML标签

HTML标签用于定义网页的结构和内容，标签又称元素，是HTML的基本组成单位，通常由尖括号包围，例如 <h1>、<p>、<img> 等。标签之间的关系包括，并列关系、嵌套关系。

标签分类：
- 双标签： 由开始标签和结束标签组成，例如 <h1>标题</h1>。
- 单标签： 只有开始标签，没有结束标签，例如 <img>。
常用标签：
- 标题标签：<h1> - <h6>，定义不同级别的标题。
- 段落标签：<p>，定义一个段落。
- 图片标签：<img>，插入一张图片。
- 链接标签：<a>，创建一个超链接。
- 列表标签：<ul>、<ol>、<li>，创建无序列表和有序列表。

三、HTML标签属性

HTML标签可以拥有属性，用于提供有关元素的附加信息。不同的标签，有不同的属性；也有一些通用属性。

属性语法： 属性位于开始标签中，由属性名和属性值组成，例如 <img src="image.jpg" alt="图片描述">。
常用属性：
- src：指定图片或脚本文件的路径。
- alt：为图片提供替代文本。
- href：指定链接的目标地址。
- class：为元素指定一个或多个类名。
- id：为元素指定唯一的标识符。

四、HTML注释

HTML注释用于在代码中添加说明或注释，不会被浏览器显示。

注释语法： 
示例：

<!-- 这是一个注释 -->
<p>这是一个段落。</p>

注意：注释不可以嵌套

五、HTML字符编码

HTML字符编码用于指定网页中使用的字符集。

常用字符编码：
- UTF-8： 一种通用的字符编码，支持世界上大多数语言。
- GBK： 主要用于简体中文。
指定字符编码： 在 <head> 标签中使用 <meta> 标签指定字符编码，例如 <meta charset="UTF-8">。

六、HTML`<meta>元信息`

<meta> 标签用于定义网页的元数据（即关于网页的信息）。这些元数据通常不会直接显示给用户，但它们对搜索引擎优化（SEO）、浏览器行为、页面内容的编码等方面非常重要。

（1）字符编码 (charset)

作用: 定义网页使用的字符编码，通常用于确保网页中文本正确显示，尤其是多语言支持时。
示例:
```
<meta charset="UTF-8">
```

（2）页面描述 (description)

作用: 提供网页内容的简短描述，搜索引擎会使用这个描述在搜索结果中显示相关信息。

示例:

<meta name="description" content="这是一个关于学习HTML和CSS的教程网站。">

（3）关键字 (keywords)

作用: 用于提供与页面内容相关的关键词，尽管现代搜索引擎不再像以前那样依赖这个标签，但它仍然可以为某些搜索引擎提供参考。

示例:

<meta name="keywords" content="HTML, CSS, 编程, 前端开发">

（4）作者 (author)

作用: 指定网页的作者。
示例:
```
<meta name="author" content="张三">
```

（5）视口设置 (viewport)

作用: 控制网页在移动设备上的显示方式。对于响应式网页设计非常重要。

示例:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

这个设置让网页适应不同设备的屏幕宽度，并设置页面的初始缩放比例。

（6）页面刷新 (refresh)

作用: 设置页面自动刷新或跳转到另一个 URL。
示例:
```
<meta http-equiv="refresh" content="2">
```

这会让页面每 2 秒刷新一次，或可以通过指定 URL 来实现跳转：

<meta http-equiv="refresh" content="2;url=https://www.example.com">

（7）版权 (copyright)

作用: 提供网页的版权信息。

示例:

<meta name="copyright" content="© 2025">

七、总结

本文介绍了HTML的基础知识，包括HTML文档的基本结构、HTML标签、HTML标签属性、HTML注释和HTML字符编码。掌握这些基础知识是学习HTML的第一步，希望本文能帮助你快速入门HTML。