HTML(超文本标记语言)是构建网页的基础语言。每个网站都是由 HTML 代码构成的,并且它能够决定网页的结构和内容。在深入学习其他前端技能(如 CSS 和 JavaScript)之前,掌握 HTML 是至关重要的。
0a320df2315b47faaf08d3a520f23c6c.png一、什么是 HTML?HTML,全称为 HyperText Markup Language,即超文本标记语言,是用于创建网页和用户界面的标准标记语言。HTML 通过使用标记(即标签)来定义网页的内容和结构。一个典型的 HTML 文档包括元素、属性和内容。
HTML 结构
在学习 HTML 的基础知识之前,让我们先看一下一个简单的 HTML 文档结构:
2dc846f29049d89491b9e3a51896caec.png代码语言:javascript代码运行次数:0运行复制
欢迎来到 HTML 学习之旅
这是一段介绍 HTML 的简单示例。
在这个示例中,我们可以看到以下几个部分:
: 声明文档类型,表示使用 HTML5: HTML 文档的根元素
: 包含文档的元数据,如标题和字符集: 包含网页的主要内容: 元素定义一个大标题
: 元素定义一个段落注:在浏览器的页面上使用键盘上的 F12 按键开启调试模式,就可以看到组成标签。
fce17b0318b283e4f38bbad892870ab9.png二、HTML 标签HTML 标签是网页内容的基石,用于构建和定义页面的结构和内容。每个标签都有其特定的功能和用途,通常以尖括号括起来,来表明其开始和结束。
HTML 标记标签通常被称为 HTML 标签 (HTML tag)
HTML 标签是由尖括号包围的关键词,比如 HTML 标签通常是成对出现的,比如 和 标签对中的第一个标签是开始标签,第二个标签是结束标签开始和结束标签也被称为开放标签和闭合标签<标签>内容标签>
三、HTML 元素"HTML 标签" 和 "HTML 元素" 通常都是描述同样的意思.
但是严格来讲, 一个 HTML 元素包含了开始标签与结束标签,如下实例:
HTML 元素:
这是一个段落。
四、Web 浏览器Web浏览器,如谷歌浏览器、Internet Explorer、Firefox和Safari等,负责解析HTML文件并将其呈现为用户可浏览和交互的网页形式。
浏览器不会直接显示HTML标签,而是根据标签的内容和结构来决定如何最佳呈现页面内容给用户。
9cf8cc6023fcbf4c1ab208a3fa4ffae4.png代码语言:javascript代码运行次数:0运行复制
这是我的第一个网页
我的第一个段落
五、HTML结构框架下面是一个可视化的HTML结构框架:
a52f48ee8566f61ca5751821bd133fcc.png注意:只有
区域 (白色部分) 才会在浏览器中显示。六、HTML版本差异HTML(HyperText Markup Language)是用于创建网页的标准语言,随着时间的推移,它经历了多个版本和更新。以下是一些主要HTML版本之间的差异对比:
HTML 2.0:发布于1995年11月。最早被广泛采用的HTML版本之一。引入了基本的文本和链接标记,如标题、段落、列表和链接等。HTML 3.2:发布于1997年1月。引入了表格、表单和图像等新元素和属性。对标准化HTML的发展起到了重要作用,是早期互联网内容的基础。HTML 4.01:分为严格(Strict)、过渡(Transitional)和框架集(Frameset)三种DTD(文档类型定义)。引入了样式表(CSS)的支持,使得页面布局和设计更加灵活。加强了表单的功能和多媒体支持,如音频和视频元素。XHTML 1.0:发布于2000年1月。XHTML是HTML的XML扩展,更加严格和模块化。引入了XML的语法要求,包括强制使用小写标签和关闭所有标签。HTML5:开始制定于2004年,最终标准发布于2014年。引入了许多新特性,如语义化标签(如
HTML5:代码语言:javascript代码运行次数:0运行复制这是HTML5的声明,它非常简洁,并且告知浏览器使用HTML5标准解析页面。
HTML 4.01 Strict:代码语言:javascript代码运行次数:0运行复制
"http://www.w3.org/TR/html4/strict.dtd">这是HTML 4.01 Strict DTD声明,指定了使用HTML 4.01严格规范解析页面。
XHTML 1.0 Transitional:代码语言:javascript代码运行次数:0运行复制
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">这是XHTML 1.0 Transitional的DTD声明,指定了使用XHTML 1.0过渡规范解析页面。
每个 声明都有一个对应的DTD(文档类型定义),它定义了允许在文档中使用的元素和属性,以及它们的结构规则。正确的 声明有助于确保浏览器正确解释和呈现HTML文档。
doctype 声明是不区分大小写的,用来告知 Web 浏览器页面使用了哪种 HTML 版本。
在HTML 4.01 中, 声明需引用 DTD (文档类型声明),因为 HTML 4.01 是基于 SGML(Standard Generalized Markup Language 标准通用标记语言)。
HTML 4.01 规定了三种不同的 声明,分别是:Strict、Transitional 和 Frameset。HTML5 不是基于 SGML,因此不要求引用 DTD。
八、中文编码目前在大部分浏览器中,直接输出中文会出现中文乱码的情况,这时候我们就需要在头部将字符声明为 UTF-8 或 GBK。
代码语言:javascript代码运行次数:0运行复制
这是我的第一个网页
我的第一个段落
字符编码声明:
在HTML文档的
部分添加字符编码声明是必要的。常见的字符编码是UTF-8,它支持几乎所有的字符集和符号。代码语言:javascript代码运行次数:0运行复制这行代码告诉浏览器使用UTF-8编码来解析页面内容,确保页面中包含的所有文本都能正确显示。
实体引用:
在HTML中,有一些字符具有特殊含义,例如 < 和 > 字符用于标签,如果直接使用这些字符作为文本内容可能会产生解析错误。可以使用实体引用来表示这些字符:
< 替换为 <> 替换为 >& 替换为 &" 替换为 "' 替换为 '这样可以确保浏览器正确解析这些字符而不会混淆为标签。
编辑器设置: 使用支持UTF-8编码的文本编辑器,例如Visual Studio Code、Sublime Text等,确保编辑和保存HTML文件时使用正确的字符编码。
数据库和服务器设置: 如果HTML内容是动态生成的,确保从数据库中检索和保存文本时,数据库和服务器使用UTF-8编码,以防止出现乱码问题。
中文文本的直接输入: 在HTML文件中直接使用中文文本是允许的,只需确保文件保存为UTF-8编码并且正确声明了字符编码即可。
对于中文网页需要使用 声明编码,否则会出现乱码。有些浏览器(如 360 浏览器)会设置 GBK 为默认编码,则你需要设置为 。
目前大部分浏览器中,直接输出中文会出现中文乱码的情况,这时候需要在头部将字符声明为 UTF-8。
如有表述错误及欠缺之处敬请批评指正。