请先阅读:VSCode安装及后端开发必备插件安装
前言介绍
用户在互联网上浏览网页时,会听到各种文字信息、链接、图表、图片等,如图所示。
浏览器如何显示该页面的内容?
我们通过浏览器查看这个页面的源代码。 如图所示,这段源代码是一种浏览器可以理解并显示的计算机标签语言——HTML。
HTML 是超文本标记语言的缩写。 英文翻译是超文本标记语言。 它是制作网页最基本的语言。 其特点正如其名称所示。
什么是浏览器
浏览器是用于检索、显示和传递Web信息资源的应用程序。 Web信息资源由统一资源标识符(URI)来标记,它是网页、图片、视频或Web上呈现的任何内容。 用户可以通过浏览器使用超链接来浏览相关信息。
目前主流的浏览器有很多。 除了Windows系统自带的IE浏览器外,还推荐使用Chrome浏览器。 Chrome上可以安装各种常用的插件,对于美化和调试网页非常有用。
HTML的发展历史
HTML1.0
WWW 于 1991 年首次出现在 Internet 上,并很快变得非常流行。 1993年,ITEF(互联网工作组)发布了草案。 当时还没有官方的HTML文档,各种标签(Tag)也很混乱。
这个 HTMLtags 草案可以被视为 HTML 的第一个 1.0 版本。
1994年,蒂姆·伯纳斯·李创立了非营利性的W3C(worldwildwebconsortium万维网联盟),并邀请了当时的155家互联网巨头(如微软、IBM、APPLE等),推动WWW拥有日益标准化的体系。 只有通过合约,才能按照这套标准合约来处理和共享资源。 当时,W3C的根本目的是维护互联网的平等,使其保持在最低秩序。
HTML2.0
1995年,HTML2.0发布。
HTML3.2
1996年,Tim Berners-Lee组织的W3C对HTML语言进行了标准化,发布了HTML3.2。
HTML4.0
1997年发布W3C推荐标准。
HTML4.01
1999年,HTML4.01发布。 同年,W3C对HTML的未来做出了展望。 他们觉得HTML存在一些缺陷,比如HTML的形式和内容难以分离、标记单一等,未来不太光明。 于是W3C转向了XML这种日益标准化的语言来轻松填补HTML的缺点(XML的全称是Extensible Markup Language),而从1991年到1999年HTML出现在互联网上已经有8年了,而世界上已经有成千上万个网页是用HTML编写的,突然换一种语言是不现实的,所以W3C只能放慢脚步,开始从HTML向XML的过渡。 于是就有了XHTML。
XHTML1.0
2000年发布,XHTML1.0和HTML4.01的内容是一样的,XHTML采用新的句子规则:规定所有元素和属性必须使用大写字母,属性值必须添加破折号html设置字符集,每个标签必须有相应的结束标记。 与这个规则相比,HTML4.01的句型变得非常宽松。
XHTML1.1
XHTML1.1于2001年发布,一开始W3C的最终目标是推动HTML的完全标准化。 此版本的 XHTML 强制规定文档必须标记为 xml 而不是 html。
但是许多浏览器不能很好地解析 XML 格式的文档,尽管 W3C 迈出这一步的速度太快了。
XHTML2.0
继XHTML1.1之后,XHTML2.0也迅速发布。 在XHTML1.1的时候,浏览器无法解析XML文档的问题还没有得到很好的解决。 此版本故意不再与现有 HTML 版本兼容。 。 开发者和浏览器制造商已经逐渐放弃了xml。 事实上,xml过于标准化,与现实脱节,而且似乎是因为HTML生态系统实在是太大了。
2004年,各大浏览器厂商也纷纷脱离W3C,成立了一个新的团体WHATWG(世界超文本应用技术工作组),开始对HTML进行改造,开始了HTML5之路。 XHTML生态环境逐渐被打破。 2006年,XTML2没有实质性进展。 Tim Berners-Lee 反思后,决定重组 HTML 工作组。
HTML5.0
2007年,W3C工作组重新成立,在WHATWG的基础上继续研究,规范也交给WHATWG制定。 为此html设置字符集,就出现了“一种格式,两种版本(HTML/XHTML)”的现状。 不过,随着HTML5的到来,越来越简洁的doctype()逐渐被应用到各大网站上。 。 2009年,W3C也宣布停止XHTML2的研究工作。 HTML5是最新的HTML规范,早已被W3C所接受。 迄今为止,HTML5标准已逐渐被各大网站广泛采用。
HTML 开发工具
如果想做专业的后端开发,使用EditPlus等文本编辑器作为开发工具效率相对较低。 为了提高后端开发效率,建议使用JetBrainsWEBstrom、VSCode等专业且强大的网站开发工具。
这个专业工具不仅可以突出HTML代码中的关键字,还可以显示代码和浏览器,同时显示疗效。
这些所见即所得的工具可以在页面内容复杂时大大降低代码编译和维护的难度,从而提高程序员或美工开发和维护的效率,减少项目人力成本,是编译HTML文档所不可缺少的。 优秀的工具。
标签和属性标签
所有 HTML 标签都有一个标签名称,有些标签还有一个可选的属性列表。
这种标签使用时必须用尖括号“”括起来,但通常成对出现。 不带斜杠的标签表示该标签的功能是开始,带斜杠的标签表示该标签的功能是结束。
HTML 标签与大小写无关并且具有相同的含义。
但W3C(WorldWideWebConsortium,万维网联盟,制定Web规范的权威组织)标准建议使用大写字母。
HTML 标签有两种类型:
属性
HTML 属性通常出现在 HTML 标签中,并且是 HTML 标签的一部分。 属性可以补充标签。
例如,如果您在一行文本上使用标题标签。
<h1>学习“使用前端技术展现Web系统”课程</h1>
属性可用于进一步指定文本应居中。
<h1 align="center">学习“使用前端技术展现Web系统”课程</h1>
所有属性都放置在开始标记的尖括号内,并以空格分隔。 有些属性需要冒号,而其他属性则不需要。 大多数属性(仅包括字母、数字、连字符和句点)不需要它们。 冒号。
例如,可以写为align=center或align=“center”。 所有浏览器都可以以同样的方式显示,属性值包括空格、%、#等字符需要使用冒号。
例如,如果使用width属性来表示文档元素占文档窗口长度的百分比,则必须写为width=“100%”。 另外为了符合W3C标准,所有属性值都需要使用冒号。
一个标签内可以设置多个属性,句型如下:
<标签名 属性名1="属性值1" 属性名2="属性值2" ... 属性名N="属性值N">内容</标签名>
当有多个属性描述标签时,它们出现的顺序不影响页面显示的结果。
W3C 标准
W3C标准英文流程是:WorldWideWebConsortium。 万维网联盟标准不是单一标准,而是标准的集合。
一个网页主要由三部分组成:结构、表现和行为。
对应的标准有3个:结构标准主要包括XHTML和XML,性能标准语言主要包括CSS,行为标准主要包括(如W3CDOM)、ECMAScript等。这些标准大部分由W3C起草和发布,而有些是其他标准组织制定的标准。
常用标准及规范:
快速开始创建项目
了解了 HTML 文档的基本结构后,让我们来编译第一个也是最简单的 HTML 文档。
对于HTML文档的编译,可以使用记事本,也可以使用VSCode、WEBstrom、Hbuilder等工具。
这里使用的是VSCode
转到文件资源管理器中的任意位置并创建一个文件夹。 该文件夹将是您的项目文件夹。
然后使用VSCode打开该目录
找到刚刚创建的文件夹并选择它
创建 html 文件
然后在窗口中输入文件名,点击确认即可完成创建。
编译内容
在index.html中写入以下内容
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>我的第一个网页</title>
</head>
<body>
Hello World !
</body>
</html>
右键单击独立键盘即可打开直播服务。 如果没有,请安装插件。 详情请参见:VSCode安装及后端开发必备插件安装。
这样就创建成功了~
为了解释Java编译的源代码,Java语言有注释,HTML也是一种语言。 代码中还需要添加解释性文字,因此HTML也有注释。
另外,在HTML中,“”符号很早就被用作HTML句子符号,那么如果我们想要在页面上显示这个特殊的符号我们该怎么办呢?
笔记
在HTML文档中,可以通过注释标签插入注释,以便检测和维护代码。 在 HTML 文档的适当位置添加注释是一个好习惯。 一旦代码较长或者结构复杂,一段时间后,很可能连编辑者都很难快速回忆起当时的思路,所以适当的注释可以帮助理解源码。 代码理解。 注释部分不会被解析器解释和执行,它仅用作标记。
基本句型
作为程序员,在软件开发过程中,注释不仅仅用于程序解释,在调试程序的过程中也经常用到。 通过注释标签,可以注释掉一部分暂时不用的代码,进行调试并运行,直到达到预期的结果。
特殊符号
在 HTML 文档中,某些符号具有特殊含义。 这些符号可以直接写出来,方便浏览器在解释执行时根据其特殊含义进行解释。
如果要在页面上显示这个特殊符号,就需要在HTML文档中使用相应的代码标记。 该代码标记称为字符实体。
字符实体由三部分组成,即“&”符号、实体名称和“;” 象征。 下面列出了一些常用特殊符号对应的字符实体。
HTML原代码显示结果说明
<
大于号或显示标记
>
小于号或显示标记
&
可用于显示其他特殊字符
”
”
冒号
®
®
挂号的
©
©