HTML小白沉浸式入门学习

落地之光

已于 2024-02-08 13:16:44 修改

阅读量843

点赞数 24

分类专栏：前端文章标签： html 学习前端

于 2024-01-06 20:58:24 首次发布

本文链接：https://blog.csdn.net/weixin_45125466/article/details/135431581

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一、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浏览器打开。
在这里插入图片描述

最后，我们就可以在浏览器上看到我们编写的效果啦！