详解 HMTL 结构

瑶琴AI前端

已于 2024-04-05 16:16:46 修改

阅读量496

点赞数 8

分类专栏： HTML 文章标签： html 前端

于 2024-04-05 16:13:58 首次发布

本文链接：https://blog.csdn.net/weixin_40348267/article/details/137402497

版权

23 篇文章 0 订阅

订阅专栏

文章导读：AI 辅助学习前端，包含入门、进阶、高级部分前端系列内容，公众号会持续更新，适合零基础的朋友，已有前端工作经验的可以不看，也可以当作基础知识回顾。

作为前端初学者，写页面之前要了解 HTML 的基本结构，知道每个标签的含义是非常有必要的。接下来开始学习。

HTML是超文本标记语言，用于描述网页的结构和内容。下面详细解释HTML的基本结构，包括每一个标签的含义：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>网页标题</title>
</head>
<body>
    <!-- 网页内容在这里添加 -->
</body>
</html>

1.<!DOCTYPE html>：这是文档类型声明，用于指定当前文档使用的HTML版本。!DOCTYPE html声明表示文档是HTML5类型的文档，HTML5是最新的HTML标准，广泛应用于现代网页开发。

2.<.html>：这是整个HTML文档的根元素。所有HTML内容都包含在html标签之内。该标签包含两个部分：<head>和<body>。

3.<head>：这是文档的头部部分，用于包含与文档相关的元信息，如页面标题、字符编码等。在<head>标签内，可以使用<meta>标签设置网页的字符编码和其他元信息。

4.<meta charset="UTF-8">：这是用于指定字符编码的元标签。UTF-8是一种通用的字符编码，支持多种语言和字符集，一般在网页开发中使用它。

5.<title>：定义网页的标题，显示在浏览器的标签页或窗口标题栏上。在<head>标签中，通常有一个<title>标签用于指定网页的标题。

6.<body>：主体标签用于定义文档的主体部分，其中包含了所有在网页上显示的内容。网页的内容，例如文本、图像、链接等，都应该放在<body>标签中。

那么 head 标签作为文档的头部，还可以放哪些内容呢？

1.<meta> 标签：用于定义文档的元信息，如字符编码、网页描述、作者等。例如：

<meta charset="UTF-8">
<meta name="description" content="这是一个示例网页">
<meta name="author" content="John Doe">

2.<title> 标签：用于定义网页的标题，将显示在浏览器的标签页上。例如：

<title>网页标题</title>

3.<link> 标签：用于引入外部资源，如 CSS 文件、图标文件等。例如：

<link rel="stylesheet" href="styles.css">
<link rel="icon" href="favicon.ico" type="image/x-icon">

4.<script> 标签：用于引入 JavaScript 脚本文件。例如：

<script src="script.js"></script>

5.<base> 标签：用于指定基准 URL，用于解析相对路径。例如：

<base href="https://www.example.com/">

6.<style> 标签：用于定义内部样式表，将 CSS 样式直接嵌入到文档中。例如：

<style>
  body {
    font-family: Arial, sans-serif;
    background-color: #f1f1f1;
  }
</style>

7.<noscript> 标签：用于在浏览器不支持脚本或脚本被禁用时提供替代内容。例如：

<noscript>
  <p>您的浏览器不支持 JavaScript，请启用 JavaScript 或更换其他浏览器以获得更好的体验。</p>
</noscript>

8.<meta http-equiv> 标签：用于指定文档的 HTTP 头部信息。例如：


<meta http-equiv="X-UA-Compatible" content="IE=edge">

根据需求在标签中添加不同的元素，以达到更好的网页效果和用户体验。

这里瑶琴补充一点，如何在代码中动态修改网页的title值呢?

document.title = 'HTML 基本结构学习'

以上就是今天学习的内容了

看到这里的朋友可以回顾下，HTML 的基本结构，每个标签的含义和用法你掌握了吗，好了，希望今天的内容对你有帮助，学习是一个持续的过程，不断学习和实践将使你逐渐成为一名出色的前端开发者。加油

最后啰嗦一句，所谓，好记性不如烂笔头，希望大家在学习的过程中养成做笔记的习惯，形成自己的知识体系。

关注