「从零入门HTML」一文带你了解HTML及基本骨架
🎟️序言
大家都知道入门前端，首先需要学的就是 HTML 这门语言,你会学习到各种各样的标签和属性，很多人一上来就被许多的标签弄晕了：我该怎么去记忆他们😣！
先别着急，我们先去了解HTML是什么，并且从 语义化 的角度介绍它，以及它的发展历程，再去了解HTML骨架中的含义，带你引入 HTML 的大门。
准备好开始学习了吗😉↓
🎨一、引入
1. 前端三件套
入门前端，首先离不开 HTML , CSS , JS 这三件套，而 HTML 就是我们前端学习的第一个内容，让我们看看这三件套都是啥↓
HTML： 超文本标记语言(HyperTextMarkedLanguage)
用于页面的结构CSS：层叠样式表(CascadingStyleSheets)
用于页面的修饰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
下面的文章详细介绍了 HTML 的常用标签以及用法👇！
「从零入门HTML」从语义化角度探索HTML常用标签
1216
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
