🎟️序言

大家都知道入门前端，首先需要学的就是 HTML 这门语言,你会学习到各种各样的标签和属性，很多人一上来就被许多的标签弄晕了：我该怎么去记忆他们😣！先别着急，我们先去了解HTML是什么，并且从 语义化 的角度介绍它，以及它的发展历程，再去了解HTML骨架中的含义，带你引入 HTML 的大门。准备好开始学习了吗😉↓

🎨一、引入

1. 前端三件套

入门前端，首先离不开 HTML , CSS , JS 这三件套，而 HTML 就是我们前端学习的第一个内容，让我们看看这三件套都是啥↓

HTML ：超文本标记语言(HyperText MarkedLanguage) 用于页面的结构
CSS ：层叠样式表(Cascading Style Sheets) 用于页面的修饰
JS ：JavaScript 用于页面的动态效果

🎉二、HTML

1. 简介

HTML 是一种超文本标记语言，可能你一下懵了，这是什么意思？我下面将以通俗的语言介绍。

超文本：不只显示文字，可以显示超出文本之外的内容，如：图片，视频。

标记语言：使用标记，比如你在 HTML 中使用的标签，告诉网页该做什么。

还记得之前说的 语义化 吗， HTML 全称(HyperText MarkedLanguage)开头的四个字母正是 语义化 的证明， html标签 就是语义化的证明，开发者可以根据标签名知道标签的作用，本文将重点介绍 HTML 。

2. HTML发展历史

1980年 蒂姆·伯纳斯-李 提出并创建原型系统ENQUIRE
1989年 伯纳斯-李 提出一个基于互联网的超文本系统，规定 HTML 并在1990年底写出浏览器和服务器软件，自此 HTML 诞生了
1993年 IETF (互联网工程工作小组)发布 HTML 1.0
1995年 IETF 发布 HTML 2.0 大幅度的提高了Web性能，追加RFC的附加功能
1994年 W3C (万维网联盟) 成立，随后接管 HTML 的标准化工作，并在1997年发布了 HTML3.2 添加了新的、被广泛运用的特性
1997年 W3C 发布 HTML 4.0 加入了 CSS 样式表
2008年 W3C 发布 HTML 5.0 将 Web 带入一个成熟的应用平台，在这个平台上，视频、音频、图像、动画以及与设备的交互都进行了规范，并且不断发展，我们现在使用的就是 HTML5标准

🧭三、编译器选择

想要编写你的 HTML 代码，首先需要选择一款编译器，我推荐vscode编译器。优点有很多，比如轻量化和拓展性等等，vscode中你的"可玩性"很高，这也是我推荐他的原因😳。

vscode编译器

下载地址：vscode下载

🛎️四、HTML结构

1. 骨架

工具：vscode

在vscode中新建一个以.html后缀的文件，输入!(英文)再按回车或Tab即可生成骨架。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
</body>
</html>

🤓哇！怎么蹦出来这么多的代码！这都是啥意思啊？别急别急，下面我将为你一一介绍。

（1）!DOCTYPE

你看它，长得像一个标签，但其实，它并不是个标签，这句话用于声明网站用的是什么HTML标准，必须放在第一行，<!DOCTYPE html> 意思为使用HTML5标准。

（2）html

用户不可见，该标签向搜索引擎表示该页面是 html语言 ，en意味着该网站语言为英文网站,这使得网页会提示你是否需要翻译，如果将 <html lang="en"> 中的"en"改为"zh"意味着这是个中文网站。

（3）head

用户不可见，<head> 标签可以包括面向搜索引擎的关键字、页面描述、字符编码声明、CSS样式等内容。

（4）meta

<meta charset="UTF-8">
定义文档字符编码
<meta http-equiv="X-UA-Compatible" content="IE=edge">
解决兼容性
<meta name="viewport" content="width=device-width, initial-scale=1.0">
解决移动端适配，定义屏幕显示网页的区域

（5）title

表示网页标题，显示在标签页上。

（6）body

用户可见，表示网页的主体部分，可以包含文本、图片、音频、视频等各种内容。

说完了这些，相信大家对骨架已经有了了解，以上介绍的标签，构成了 HTML 的结构，我们再给他添加一个标签吧！😉

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>结构演示</title>
</head>
<body>
  <p style="color: skyblue;">今天的心情是天蓝色的！</p>
</body>
</html>

演示结果：在这里插入图片描述

是不是发现了什么——文字变成了天蓝色，你可能会奇怪🤔，这是怎么实现的呢，下面我将给你介绍 HTML 的几个特点。

2. 特点

HTML 文档包含多个 HTML 元素。
HTML 元素指的是从开始标签到结束标签的所有代码。一些元素只有一个标签，如 <br> , <hr> 。
HTML 元素可以嵌套。
HTML 元素标签不区分大小写。
元素可以拥有属性，属性包含元素的额外信息。

🧮五、快捷键

上面给大家介绍了"!"，立马就出现了一个 HTML骨架 ，是不是很心动💓，其实 HTML 中有很多常用的快捷键，快🐴住！

1. 注释

Ctrl+/：注释一整行。 Shift+Alt+A：注释一块内容。

2. 快速打出标签

当出现代码提示，按空格或者Tab，即可完整打出代码提示中的第一个。

3. 打出多个相同标签

例如：打出5个p标签，输入p*5即可。

4. 选中多个相同内容

选中其中一个内容，按下Ctrl+D，每按一次可以多选中一个内容。

5. 跳转到行末

按下键盘上的End键。

6. 选中多列

按住Shift+Alt并上下拖动鼠标，即可选中上下的几个列。

7. 保存

Ctrl+S：保存，建议经常使用。

8. 撤销文本

Ctrl+Z：撤回这次输入。

9. 剪切

Ctrl+X。

10. 复制这一行并粘贴到下一行

Shift+Alt+↓

以上就是常用的几个快捷键，学会这些会让你敲代码的效率超级加倍😀。

🎗️六、结束语

这篇文章带你快速了解了 HTML 是什么， HTML 的发展历程，以及用什么编译器去写 HTML ， HTML 骨架是什么，骨架的内容的含义，以及常用的快捷键，相信你以及对 HTML 有了印象，并且能用快捷键提高自己的开发效率🆙🆙。

关于 HTML 的介绍到这里就结束啦，希望对大家有所帮助~

⭐Extra

指路作者的 CSDN 👉三角冻干咖啡的博客

「从零入门HTML」一文带你了解HTML及基本骨架