文章目录
-
- [什么是 HTML ？](#什么是 HTML ？)
- [HTML 的构成 ？](#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 的核心单位，它通常由一个开始标签 和一个结束标签构成，中间包含内容或其他嵌套的元素。每个元素定义了网页的一部分结构或功能。例如：
html
<p>这是一个段落。</p>在这个例子中，<p> 是段落标签，表示一个段落元素。标签之间的文本就是段落的内容。HTML 通过这样的元素来组织网页内容的层次和结构。
HTML 元素的组成部分
- 开始标签 ：标记元素的开始。例如，
<p>表示段落的开始。 - 内容 ：位于标签之间的文本或其他嵌套的HTML元素。例如，
这是一个段落是段落的内容。 - 结束标签 ：标记元素的结束。例如，
</p>表示段落的结束。
一些元素（如 <img> 和 <br> ）是自闭合标签，它们没有结束标签，仅包含属性，不需要包裹内容。例如：
html
<img src="image.jpg" alt="图片描述">HTML 元素的特点
- 层次性：HTML 元素可以相互嵌套，形成层次结构。浏览器会解析这些嵌套关系，以正确呈现内容。
- 语义化 ：HTML 提供了语义化标签，使页面结构和内容更具可读性和可访问性。例如，
<header>、<footer>等标签不仅用于布局，还传达了内容的意义。
HTML 元素使开发者能够灵活地组织内容，为网页的结构和表现提供了完整的基础。通过这些元素，浏览器可以理解并展示网页内容，从而实现更好的用户体验。
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"，即可在浏览器打开页面。
- 方法 1 ：直接双击
这样，您可以在浏览器中查看新建的HTML文件并检查内容效果。
代码查看
在浏览器中打开网页，右键选择"查看页面源码"（View Page Source）即可查看HTML文档的完整结构。这对了解网页的结构和调试代码非常有帮助。
