HTML简介：想成为前端开发者？先从掌握HTML开始！

这里是云端源想IT，帮你轻松学IT”

嗨~ 今天的你过得还好吗？

谁见过风呢

勿论你和我

但当树木俯首

风正经过

- 2024.03.05 -

在这个数字化的时代，我们每天都在与网页打交道。你是否曾经好奇过，这些充满魔力的网页是如何诞生的呢？今天，我们就来揭开构成这些网页的神秘面纱——HTML（超文本标记语言）。

一、什么是HTML

网页的基本组成

网页是构成网站的基本元素，通常由图片、链接、文字、声音、视频等元素组成，通常我们看见的网页都是.htm和.html后缀结尾的文件，因为都称为HTML文件。

什么是HTML

HTML 英文全称是 Hyper Text Markup Language，中文译为“超文本标记语言”，专门用来设计和编辑网页。

使用 HTML 编写的文件称为“HTML 文档”，一般后缀为.html（也可以使用.htm，不过比较少见）。HTML 文档是一种纯文本文件，您可以使用 Windows 记事本、Linux Vim、Notepad++、Sublime Text、VS Code 等文本编辑来打开或者创建。

每个网页都是一个 HTML 文档，使用浏览器访问一个链接（URL），实际上就是下载、解析和显示 HTML 文档的过程。将众多 HTML 文档放在一个文件夹中，然后提供对外访问权限，就构成了一个网站。

二、HTML的历史

HTML的故事始于1989年，当时蒂姆·伯纳斯-李在欧洲核子研究中心（CERN）提出了一个名为“万维网”的概念。

为了实现这一概念，他发明了HTML，并随后与罗伯特·卡里奥一起发明了HTTP协议。从那时起，HTML就成为了互联网不可或缺的一部分。

上图简单罗列了HTML的发展历史，大家可以简单了解一下。

三、HTML相关概念

什么是标签

HTML 标记通常被称为 HTML 标签 (HTML tag)。 HTML 标签是由尖括号包围的关键词，比如<html/>。

封闭类型标记（也叫双标记），必须成对出现,如<p></p> 。

标签对中的第一个标签是开始标签，第二个标签是结束标签，开始和结束标签也被称为开放标签和闭合标签。

非封闭类型标记，也叫作空标记，或者单标记，如<br/>

<标签>内容<标签/>

什么是元素

"HTML 标签" 和 "HTML 元素" 通常都是描述同样的意思。但是严格来讲，一个HTML 元素包含了开始标签与结束标签，如下实例。

HTML 元素：

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

web浏览器

Web 浏览器（如谷歌浏览器，Internet Explorer，Firefox，Safari）是用于读取 HTML 文件，并将其作为网页显示。浏览器并不是直接显示的 HTML 标签，但可以使用标签来决定如何展现 HTML页面的内容给用户：

HTML 属性

属性是用来修饰元素的，属性必须位于开始标签里，一个元素的属性可能不止一个，多个属性之间用空格隔开，多个属性之间不区分先后顺序。

每个属性都有值，属性和属性的值之间用等号链接，属性的值包含在引号当中，属性总是以名称/值对的形式出现。

四、HTML的基本结构

一个典型的HTML文档由以下几个基本元素构成：

<!DOCTYPE html>

这是文档类型声明，告诉浏览器这个文档使用的是HTML5标准。

<html>

这是整个HTML文档的根元素，其他所有元素都包含在这个标签内。

<head>

这个部分包含了所有关于网页的元信息，如标题、字符集声明、引入的CSS样式表和JavaScript文件等。

<title>

这个标签定义了网页的标题，它显示在浏览器的标题栏或标签页上。

<body>

这个部分包含了网页的所有内容，如文本、图片、链接、表格、列表等。

HTML的结构示例

让我们通过一个简单的例子来具体了解HTML的结构：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>我的第一个HTML页面</title>
</head>
<body>
<h1>欢迎来到我的网页！</h1>
<p>这是一个简单的段落。</p>
<a href="https://www.example.com">点击这里访问示例网站</a>
</body>
</html>

在这个例子中，我们可以看到一个完整的HTML文档结构，从<!DOCTYPE html>开始，到最后一个</html>结束。

想象一下，如果HTML是一棵树，那么<html>就是树干，<head>和<body>就像是树的两个主要分支。<head>中的标签好比是树叶，它们虽然不起眼，但却至关重要，为树木提供营养。而<body>中的标签则像是树枝和果实，它们构成了树的主体，吸引人们的目光。

想要快速入门HTML吗？推荐一个前端开发基础课程，这个老师讲的特别好，零基础学习无压力，知识点结合代码，边学边练，可以免费试看试学，还有各种辅助工具和资料，非常适合新手！搜索【云端源想】前往学习哦！

五、HTML的特点

HTML的特点主要包括简易性、可扩展性、平台无关性和通用性等。具体如下：

1、简易性：

HTML是一种相对容易学习和使用的语言，它的版本升级通常采用超集方式，使得新版本能够兼容旧版本的标签和功能，这样既保持了向后兼容性，又能够灵活方便地引入新的功能。

2、可扩展性：

随着互联网的发展，HTML也在不断增加新的元素和属性来满足新的需求，如支持多媒体内容的嵌入、更丰富的表单控件等。这种设计使得HTML能够适应不断变化的网络环境。

3、平台无关性：

HTML编写的网页可以在不同的操作系统和浏览器上显示，这是因为HTML是一种与平台无关的语言。这意味着无论用户使用什么设备或浏览器，都能够访问和浏览HTML页面。

4、通用性：

HTML是网络的通用语言，它是一种简单的标记语言，用于创建和结构化网页内容。由于其广泛的支持和普及，几乎所有的设备和浏览器都能够解析和显示HTML内容。

5、支持多种媒体格式：

HTML不仅支持文本内容，还能够嵌入图片、音频、视频等多种媒体格式，这使得网页可以提供丰富的用户体验。

6、标准化：

HTML遵循万维网联盟（W3C）制定的国际标准，这意味着网页开发者可以根据这些标准来创建网页，确保网页的互操作性和可访问性。

7、标签丰富：

HTML提供了一系列的标签，如标题、列表、链接、表格等，这些标签使得开发者能够创建出结构清晰、功能丰富的网页。

综上所述，HTML作为一种基础的网页开发语言，因其易学易用、跨平台、多功能和高度标准化的特点，成为了构建现代网络内容的核心工具。

HTML作为连接世界的纽带，其重要性不言而喻。它是数字世界的基石，也是每个想要进入互联网领域的人必须掌握的技能。无论你是梦想成为前端开发者，还是仅仅想要更好地理解这个由代码构成的世界，学习HTML都是一个不错的开始。

今天就先讲到这里了，

更多前端开发基础知识点击文末阅读原文查看哦！

记得关注【云端源想IT】一起学编程！

我们下期再见！

END

文案编辑|云端学长

文案配图|云端学长

内容由：云端源想分享

.行内式

直接在标签后面添加该标签的属性值

例如:

二.嵌入式

在title标签后添加<style type="text/css"></style>

注意：需要将样式放入<head></head>中

例如：

<!DOCTYPE html>

<head>

<title>css样式使用</title>

body{

background-color: antiquewhite;

}

background-color: aqua;

}

</style>

</head>

<body>

<h1>CSS使用规则</h1>

<p>CSS使用规则/p>

</body>

三.导入式

创建css样式表如mystyle.css，再在HTML中链接此mystyle.css样式表。

@import"mystyle.css"

</style>

四.链接式

创建css样式表如style.css，再在HTML中链接此style.css样式表。

例如：

HTML例子：

<!DOCTYPE html>

<head>

<title>css样式使用</title>

</head>

<body>

<h1>CSS使用规则</h1>

<p>CSS使用规则/p>

</body>

</html>

CSS例子：

body{

background-color: antiquewhite;

font-size: 17px;

}

结果图：

五.采用导入式和链接式还是有不同的区别的：

1.使用链接式时，会在加载页面主体部分之前装载CSS文件，这样显示出来页面一开始就是带有样式效果的；

使用导入式时，会在整个页面装载完成后在装载CSS文件，对于有的浏览器来说，在一些情况下，如果网页文件体积比较大的的时候，则会出现先显示无样式的页面，闪烁一下在出现设置样式后的效果，对于浏览者的感受，这是导入式的一个缺陷。

2.对于一些较大的网站，为了便于维护，可能会希望把所有的CSS样式分类别放到几个CSS文件中，如果这样使用链接式引入，就需要几个语句分别导入CSS文件。如果要调整CSS文件的分类，就需要同时调整HTML文件。这对于维护工作来说，是一个巨大的缺陷。如果使用导入式，则可以只引进一个总的CSS文件，在这个文件中在导入其他独立的CSS文件；而链接式则不具备这个功能。

因此，建议如果需要引入一个CSS文件，则使用链接方式；如果需要引入多个CSS文件，则首先用链接方式引入一个“目录”CSS文化，在这个“目录”CSS文件中再使用导入式引入其他CSS文件。

但是，若是希望通过JavaScript来动态决定引入哪个CSS文件，则必须使用链接方式才能实现。

tml概述和基本结构

html概述

HTML是 HyperText Mark-up Language 的首字母简写，意思是超文本标记语言，超文本指的是超链接，标记指的是标签，是一种用来制作网页的语言，这种语言由一个个的标签组成，用这种语言制作的文件保存的是一个文本文件，文件的扩展名为html或者htm，一个html文件就是一个网页，html文件用编辑器打开显示的是文本，可以用文本的方式编辑它，如果用浏览器打开，浏览器会按照标签描述内容将文件渲染成网页，显示的网页可以从一个网页链接跳转到另外一个网页。

html基本结构

一个html的基本结构如下：

<!DOCTYPE html>
<html lang="en">
 <head> 
 <meta charset="UTF-8">
 <title>网页标题</title>
 </head>
 <body>
 网页显示内容
 </body>
</html>

第一行是文档声明，第二行“”标签和最后一行“”定义html文档的整体，“”标签中的‘lang=“en”’定义网页的语言为英文，定义成中文是’lang=“zh-CN”’,不定义也没什么影响，它一般作为分析统计用。 “”标签和“”标签是它的第一层子元素，“”标签里面负责对网页进行一些设置以及定义标题，设置包括定义网页的编码格式，外链css样式文件和javascript文件等，设置的内容不会显示在网页上，标题的内容会显示在标题栏，“”内编写网页上显示的内容。

HTML文档类型

目前常用的两种文档类型是xhtml 1.0和html5

xhtml 1.0

xhtml 1.0 是html5之前的一个常用的版本，目前许多网站仍然使用此版本。

此版本文档用sublime text创建方法： html:xt + tab

文档示例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
 <title> xhtml 1.0 文档类型 </title>
</head>
<body>
</body>
</html>

html5

pc端可以使用xhtml 1.0，也可以使用html5，html5是向下兼容的

此版本文档用sublime text创建方法： html:5 + tab 或者 ! + tab

文档示例：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title> html5文档类型 </title>
</head>
<body>
</body>
</html>

两种文档的区别

1、文档声明和编码声明

2、html5新增了标签元素以及元素属性

html注释：

html文档代码中可以插入注释，注释是对代码的说明和解释，注释的内容不会显示在页面上，html代码中插入注释的方法是：

<!-- 这是一段注释 -->

html标题标签

通过

、

,标签可以在网页上定义6种级别的标题。6种级别的标题表示文档的6级目录层级关系，比如说：

用作主标题，其后是

，再其次是

，以此类推。搜索引擎会使用标题将网页的结构和内容编制索引，所以网页上使用标题是很重要的。

<h1>这是一级标题</h1>
<h2>这是二级标题</h2>
<h3>这是三级标题</h3>

html段落标签、换行标签与字符实体

html段落标签

标签定义一个文本段落，一个段落含有默认的上下间距，段落之间会用这种默认间距隔开，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>段落</title>
</head>
<body>
 <p>HTML是 HyperText Mark-up Language 的首字母简写，意思是超文本标记语言，超
 文本指的是超链接，标记指的是标签，是一种用来制作网页的语言，这种语言由一个个的
 标签组成，用这种语言制作的文件保存的是一个文本文件，文件的扩展名为html或者htm。
 </p>
 <p>一个html文件就是一个网页，html文件用编辑器打开显示的是文本，可以用文本的方
 式编辑它，如果用浏览器打开，浏览器会按照标签描述内容将文件渲染成网页，显示的网
 页可以从一个网页链接跳转到另外一个网页。</p>
</body>
</html>

html换行标签

代码中成段的文字，直接在代码中回车换行，在渲染成网页时候不认这种换行，如果真想换行，可以在代码的段落中插入

来强制换行，代码如下：

<p>
一个html文件就是一个网页，html文件用编辑器打开显示的是文本，可以用<br />
文本的方式编辑它，如果用浏览器打开，浏览器会按照标签描述内容将文件<br />
渲染成网页，显示的网页可以从一个网页链接跳转到另外一个网页。
</p>

html字符实体

代码中成段的文字，如果文字间想空多个空格，在代码中空多个空格，在渲染成网页时只会显示一个空格，如果想显示多个空格，可以使用空格的字符实体,代码如下：

<!-- 在段落前想缩进两个文字的空格，使用空格的字符实体： -->
<p>
 一个html文件就是一个网页，html文件用编辑器打开显示的是文本，可以用<br />
文本的方式编辑它，如果用浏览器打开，浏览器会按照标签描述内容将文件<br />
渲染成网页，显示的网页可以从一个网页链接跳转到另外一个网页。</p>

在网页上显示 “<” 和 “>” 会误认为是标签，想在网页上显示“<”和“>”可以使用它们的字符实体，比如：

<!-- “<” 和 “>” 的字符实体为 < 和 > -->
<p>
 3 < 5 <br>
 10 > 5
</p>

html块标签、含样式的标签

html块标签

1、

标签块元素，表示一块内容，没有具体的语义。

2、标签行内元素，表示一行中的一小段内容，没有具体的语义。

含样式和语义的标签

1、 标签行内元素，表示语气中的强调词

2、标签行内元素，表示专业词汇

3、 标签行内元素，表示文档中的关键字或者产品名

4、标签行内元素，表示非常重要的内容

语义化的标签

语义化的标签，就是在布局的时候多使用有语义的标签，搜索引擎在爬网的时候能认识这些标签，理解文档的结构，方便网站的收录。比如：h1标签是表示标题，p标签是表示段落，ul、li标签是表示列表，a标签表示链接，dl、dt、dd表示定义列表等，语义化的标签不多。

html图像标签、绝对路径和相对路径

html图像标签

标签可以在网页上插入一张图片，它是独立使用的标签，它的常用属性有：

src属性定义图片的引用地址

alt属性定义图片加载失败时显示的文字，搜索引擎会使用这个文字收录图片、盲人读屏软件会读取这个文字让盲人识别图片，所以此属性非常重要。

<img src="images/pic.jpg" alt="产品图片" />

绝对路径和相对路径

像网页上插入图片这种外部文件，需要定义文件的引用地址，引用外部文件还包括引用外部样式表，javascript等等，引用地址分为绝对地址和相对地址。

绝对地址：相对于磁盘的位置去定位文件的地址

相对地址：相对于引用文件本身去定位被引用的文件地址

绝对地址在整体文件迁移时会因为磁盘和顶层目录的改变而找不到文件，相对路径就没有这个问题。相对路径的定义技巧：

“ ./ ” 表示当前文件所在目录下，比如：“./pic.jpg” 表示当前目录下的pic.jpg的图片，这个使用时可以省略。

“ …/ ” 表示当前文件所在目录下的上一级目录，比如：“…/images/pic.jpg” 表示当前目录下的上一级目录下的images文件夹中的pic.jpg的图片。

html链接标签

标签可以在网页上定义一个链接地址，它的常用属性有：

href属性定义跳转的地址

title属性定义鼠标悬停时弹出的提示文字框

target属性定义链接窗口打开的位置

target="_self" 缺省值，新页面替换原来的页面，在原来位置打开

target="_blank" 新页面会在新开的一个浏览器窗口打开

在线咨询

上一篇：如何才能导出和打印 Echarts 图形？
下一篇：Vue进阶课堂之《从HTML到Pug》

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商