HTML 基础概念：什么是 HTML ? HTML 的构成与 HTML 基本文档结构

文章目录

- 什么是 HTML ？
- HTML 的构成？
- - 什么是 HTML 元素？
  - HTML 元素的组成部分
  - HTML 元素的特点
- HTML 基本文档结构
- - 如何打开新建的 HTML 文件
  - 代码查看

在这里插入图片描述

什么是 HTML ？

HTML（超文本标记语言，HyperText Markup Language）是一种用来告知浏览器如何组织页面的标记语言。它定义了网页的内容结构，通过不同的标签，HTML 可以定义网页内容的结构和层次，包括文本、图片、视频、表格等。每个标签都有特定的语义和功能，能够帮助浏览器正确显示网页内容。

HTML 是上个世纪90年代由欧洲核子研究中心的物理学家 蒂姆·伯纳斯-李（Tim Berners-Lee）发明。它的最大特点就是支持超链接，点击链接就可以跳转到其他网页，从而构成了整个互联网。

可以说，HTML是所有网页的骨架，并且与 CSS 和 JavaScript 组合使用，能够实现网页的样式设计和交互功能。

在这里插入图片描述

1999年，HTML 4.01 版发布，成为广泛接受的 HTML 标准。2014年，HTML 5 发布，这是目前正在使用的版本。

浏览器的网页开发，涉及三种技术：HTML、CSS 和 JavaScript。

HTML 语言定义网页的结构和内容，CSS 样式表定义网页的样式，JavaScript 语言定义网页与用户的互动行为。

HTML 语言是网页开发的基础，相当于网页的“骨架”，CSS 和 JavaScript 都是基于 HTML 才能生效，但即使没有这两者，HTML 本身也能使用，可以完成基本的内容展示。

HTML 的构成？

HTML 由一系列的元素组成，这些元素可以用来包围或标记不同部分的内容，使其以某种方式呈现或者工作。

元素是网页的一部分。在 XML 和 HTML 中，一个元素可以包含一个数据项，或是一块文本，或是一张照片，亦或是什么也不包含。一个典型的元素包括一个具有一些属性的开始标签，中间的文本内容和一个结束标签。

HTML 的关键特性：

超文本（HyperText）意味着它可以在不同页面之间建立链接。
标记语言（Markup Language）意味着它使用标签来标记文本，定义网页的结构。

什么是 HTML 元素？

元素是 HTML 的核心单位，它通常由一个开始标签和一个结束标签构成，中间包含内容或其他嵌套的元素。每个元素定义了网页的一部分结构或功能。例如：

<p>这是一个段落。</p>

在这个例子中，<p> 是段落标签，表示一个段落元素。标签之间的文本就是段落的内容。HTML 通过这样的元素来组织网页内容的层次和结构。

HTML 元素的组成部分

开始标签：标记元素的开始。例如，<p> 表示段落的开始。
内容：位于标签之间的文本或其他嵌套的HTML元素。例如，这是一个段落是段落的内容。
结束标签：标记元素的结束。例如，</p> 表示段落的结束。

一些元素（如 <img> 和 <br> ）是自闭合标签，它们没有结束标签，仅包含属性，不需要包裹内容。例如：

<img src="image.jpg" alt="图片描述">

HTML 元素的特点

层次性：HTML 元素可以相互嵌套，形成层次结构。浏览器会解析这些嵌套关系，以正确呈现内容。
语义化：HTML 提供了语义化标签，使页面结构和内容更具可读性和可访问性。例如，<header>、<footer>等标签不仅用于布局，还传达了内容的意义。

HTML 元素使开发者能够灵活地组织内容，为网页的结构和表现提供了完整的基础。通过这些元素，浏览器可以理解并展示网页内容，从而实现更好的用户体验。

HTML 基本文档结构

一个标准的 HTML 文档具有以下基本结构：

<!DOCTYPE html>
<html>
  <head>
    <title>网页标题</title>
    <meta charset="UTF-8">
  </head>
  <body>
    <!-- 网页的主要内容 -->
  </body>
</html>

<!DOCTYPE html>: 声明文档的类型，确保浏览器按照 HTML 规范解析页面内容。
<html>: HTML 文档的根元素，所有 HTML 内容都嵌套在其中。
<head>: 包含网页的元数据，例如字符编码、页面标题、CSS 样式和脚本的引入等。
<meta charset="UTF-8">: 声明文档使用的字符集为 UTF-8，这几乎是所有现代网页的标准。
<title>: 定义网页的标题，这个标题将显示在浏览器标签页上。
<body>: 包含网页的主要可见内容，如文本、图像、表格和表单等。

在 VS Code 中创建一个新 HTML 文件时（如 01.html），可以利用内置的 Emmet 快捷方式来生成基本结构。只需输入 ! 并按下 Tab 键，即可自动生成如下 HTML 基础模板：

在这里插入图片描述

如何打开新建的 HTML 文件

创建 HTML 文件：在代码编辑器（如 VS Code 或者是 Webstorm ）中新建一个 HTML 文件，命名为 01.html，并将 HTML 基础结构输入其中。
保存文件：保存文件后，确保文件扩展名为 .html，以便浏览器能够识别它是网页文件。
在浏览器中打开文件：
- 方法 1：直接双击 01.html 文件，它会在默认浏览器中打开。
- 方法 2：在文件上右键选择“用浏览器打开”或“Open with”选项，然后选择所需的浏览器。
- 方法 3 ( VS Code 内置功能)： 在 VS Code 中安装 “Live Server” 扩展。安装完成后，右键点击文件并选择 “Open with Live Server”，即可在本地服务器上实时查看文件，并且每次保存都会自动刷新页面。
- 方法 4 ( Webstorm 内置功能)： 在 Webstorm 中，html 文件的右上角会出现 “内置预览”、“Chrome”等小图标，点击即可打开，或者是右键菜单中选择 “运行 01.html”，即可在浏览器打开页面。