一、HTML概念简介
我们经常会听到“HTML”这个词语,那到底什么是“HTML”呢?
HTML其实是“Hyper Text Markup Language”的首字母缩写,顾名思义就是超文本标记语言,“超文本”是指超出文本限制范畴的其他格式的文件,比如音频、视频、图片等,“标记语言”可以理解为是一种用来描述一个文档语义的标记或者标签语言。
说到语言,我们都知道,中国讲中国话,漂亮国讲英语,俄罗斯讲俄罗斯语,一种语言的诞生一定是服务于沟通交流的,那么HTML这种语言是为了跟谁进行交流的呢?答案是浏览器。
HTML这种语言不同于编程语言,它是不需要我们进行编译的,只要你编写好了一份HTML文件,直接把这份文件用浏览器打开,浏览器就会进行解析识别,因为对于浏览器来说,这种语言就是它所能识别和理解的。
我们平常在浏览器上打开一个网页,网页上的界面有图片、有标题、有视频等等,那么浏览器怎么知道这个东西是图片,这个东西应该展示成视频,这个东西是一个大标题呢?这全是HTML的功劳,HTML会利用它的标签来为不同格式的东西进行标记,而这些标记的标签就是HTML跟浏览器约定好的记号,浏览器识别到对应的HTML标签,就会知道包在这个标签里的东西应该是怎样的展示形式。
因此,简而言之,HTML是一种可以用来描述文档语义的标签语言,其实就是一种与浏览器的语法规则,浏览器是HTML的知音,能知它所言,能懂它所意。
二、HTML规范
HTML既然是一种语言,是一种语法规则,那它有那些特点呢?
首先HTML对于我们那些平常敲word文档习惯性使用的换行、空白格、Tab键缩进这些操作都是不敏感的,也就是说你把所有HTML标签全部一口气堆一起写完,中间不用任何换行、空白格、缩进等都没关系,浏览器还是可以解析翻译并且成功展示页面效果,因为HTML关注的只是标签之间的嵌套关系,这种嵌套关系是通过标签闭合来展示的。
但是我们平常自己编写HTML文件时,还是要养成一些正确缩进的习惯,这样子可以增强我们的代码可读性,提高编写效率,排查问题时也更快速。
其次就是HTML的标签一定是要闭合的,如果没有闭合,会导致整个HTML文件的标签结构紊乱,嵌套关系也会混乱,会出现难以预估的错误。
那么HTML的标签到底是啥样的呢?
一般HTML的标签都是用“<”和“>”包起来的,比如<html>
标签是开始标签,然后它的闭合标签就是</html>
,其实就是在原来基础上加上了个“/”作为闭合标识。<html></html>
这种成对出现的标签就是双边标记的标签,表示文件的开头和结尾。也有不成对出现的标签比如<br/>
、<hr/>
等,这种单个出现且自带闭合叫做单边标记标签。也有少数不带闭合而单独出现的标签如<meta>
。
这些标签还可以加上对应的属性,如下图所示,“content”就是标签<meta>
的属性之一。
“标签+标签属性+标签所包裹的内容”这个结构的单元我们叫做一个HTML元素。无论是哪种标签,标签本身和标签属性是不会作为网页内容出现的,但是他们会影响所展示内容的展示效果。
除了这些外,就要说说HTML的字符集了,就像中国话有新华字典一样,HTML也要有对应的字符集。字符集的作用在于,要告诉计算机如何去存储和识别各种文字。HTML文件编写完成后,最终要存储在计算机上,是要进行字符编码,转换成计算机能识别的方式进行存储,因此我们还得为HTML选择对应的字符集。
目前用的比较广泛的字符集是UTF-8,其他字符集小伙伴有兴趣的可以自行去了解,我们后续所有的编码都是基于UTF-8字符集进行的,也就是让HTML文件按照UTF-8字符集的字符编码规范进行编码存储。
三、HTML结构解剖
介绍了那么多HTML的概念,那么HTML文件到底长什么样子呢?
在开始HTML的正式内容前,我们还需要写一个DOCTYPE
标签,它是一种用来声明文档类型的标准通用标记语言,它会告诉标准通用标记语言解析器,应该使用什么样的文档类型定义(DTD)来解析这个文档。大家要注意的是,<!DOCTYPE>
声明必须是放在整个文档的第一行,即放在 <html>
标签之前。
HTML文件是具有一套标准的结构的,我们可以将它大概解剖为三部分,分别是<html></html>
标签标记的开始和结束、头部标签<head></head>
包裹的头部部分和主体标签<body></body>
部分包裹的主体部分,如下图所示:
1、根标签<html></html>
标签说明这个文件是一个HTML类型的文件,<html>
表示这个文件的开始,</html>
表示这个文件的结束,而包裹在他们之间的内容就是这个HTML文件(网页文件)的全部内容。
2、头部标签<head></head>
里面包裹的是这个HTML文件的头部信息内容,一般头部里面包裹的内容会有以下这些元素:
(1)<title>
:用来定义当前文档的标题;
(2)<base>
:用来定义当前页面链接的默认链接地址;
(3)<link>
:用来定义当前文档和外部资源之间的关系,这个标签其实不是必须放在在头部里面的,有时也可以放在主体部分,但是我们还是推荐放置头部的;
(4)<meta>
:用来定义当前文档中的元数据,比如当前HTML文档要用的字符集是什么,就是做一些基础参数配置。
(5)<script>
:用来定义客户端的脚本文件,一般是一些网页的js代码,可以丰富网页的交互、动效等。
(6)<style>
:用来定义当前文档的样式文件,就是可以引入一些样式文件来装饰你的网页。
我们可以看看百度网页介绍HTML的网页头部代码:
3、主体标签<body></body>
里面包裹的内容就是整个网页的主体内容了,又称作实体内容,整个网页所展示内容就是这部分内容。这部分内容里面可以包裹嵌套的标签元素非常多,这里先给大家上个开胃菜,先介绍一下几个简单的元素:
(1)标题
标题总共有6个等级,分别是<h1></h1>
(一级标题)、<h2></h2>
(二级标题)、<h3></h3>
(三级标题)、<h4></h4>
(四级标题)、<h5></h5>
(五级标题)、<h6></h6>
(六级标题),其中一级标题是最大的字号,依次类推,逐级减小。
(2)文本
文本标签是<p></p>
,我们可以在中间写上一堆文本内容,它会将我们所写的文本都展示在网页上。
(3)换行符
换行符是<br/>
,前面我们说过HTML对于我们键盘上的换行、Tab键等是不敏感的,那如果要在网页上实现最终换行的效果,就需要用到换行符<br/>
。
四、HTML小试牛刀
讲了那么多的理论知识,让我们来实操一下吧!
有小伙伴可能还不知道上面提到的网页的HTML代码怎么看,其实很简单的!大家在打开一个网页的时候,单击鼠标右键,选择“检查”,就可以打开网页代码进行查看啦。如果你使用的是Chrome浏览器,也可以直接按F12快速打开。
接下来,我们来实际操作一下,要创建一个HTML文件。创建方式有很多种,最简单的是直接打开记事本,然后在记事本里面编写我们的HTML代码。
1、记事本创建
(1)我们打开记事本,然后跟普通编写文档一样,编写我们的HTML代码,如下图所示,简单写了一些:
(2)保存,修改文件后缀“txt”为“html”,然后鼠标右键单击该文件,“打开方式”选择一个你喜欢的浏览器,然后就可以在浏览器里面看见你写的HTML文件的展示效果啦!
打开网页的检查,我们也可以看到我们所编写的HTML结构:
2、代码编辑器Visual Studio创建
我们用记事本编写HTML代码时,感受很明显的一点就是代码不会缩进,就是纯文本编辑,可读性不强,编写体验也不太好,还得去改文件类型。所以我们建议可以采用一些代码编辑器来编写,体验会有质的飞跃!
(1)安装代码编辑器:我这里采用的是Visual Studio代码编辑器,大家可以去官网上选择对应的安装包下载安装即可,网络上也有很多安装教程,基本都是傻瓜式安装,跟着安装助手提示就可以了。
**(2)创建html文件:安装好后,我们先创建一个文件夹,然后用vscode打开这个文件夹,再用vscode创建一个html类型的文件,在里面编写代码,可读性大大增强,而且编辑器会给你提供提示,很多闭合标签也不需要你再手动编写,它会自动补齐,大大提升编码效率。
(3)安装open in browser插件:我们在拓展处搜索“open in browser”这个插件,并且安装,它可以让html文件用浏览器打开并运行。
(4)在浏览器中打开:我们安装好“open in browser”这个插件后,鼠标右键单击我们编写好并保存成功的html文件,选择“Open in Other Browsers”打开浏览器选择栏,我这里选择了Chrome浏览器打开。
最后,我们就可以在浏览器上看到我们编写的效果啦!
五、总结
好啦,对于HTML的初步了解和学习就到这里啦,从理论到实际操作,一点点慢慢学习和深入,这样子才会有所进步,下次会针对HTML的标签进行详细介绍,敬请期待。
- 欢迎关注我的公众号,不仅为你推荐最新的博文,还有更多惊喜和资源在等着你!一起学习共同进步!