文章目录
- 什么是 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”,即可在浏览器打开页面。
- 方法 1:直接双击
这样,您可以在浏览器中查看新建的HTML文件并检查内容效果。
代码查看
在浏览器中打开网页,右键选择“查看页面源码”(View Page Source)即可查看HTML文档的完整结构。这对了解网页的结构和调试代码非常有帮助。