前言
🤡大家好我是一溪风月一位秉持着，务实，求真，耐心的前端开发攻城狮(王阳明忠实粉丝)，今天是我打算从头到尾把前端目前应该学习的技术以文章的方式分享出来，也许这些文章对你来说太过于基础，但是请各位大佬莫怪，可以根据自己的水平直接跳过~
一.第一个网页
🤗了解了前端和Web的基本内容之后，我们就要开始学习我们前端的基本内容了，任何事情都有一个开始，就像春天到了，是一年的开始，在此时此刻我们就开始我们前端的开始吧，你的第一个网页。
- 使用记事本新建一个以
.txt结尾的文件。 - 向其中添加一些文字，比如
Hello-World。 - 保存文件。
- 修改文件的后缀名，后缀名更改为
.html。 - 使用浏览器打开文件。
😬我们会发现浏览器上面显示了我们刚才写的内容，这个其实就是一个网页，因为网页的本质就是像我们这样一个一个的HTML文档。
🥰这样我们就完成了我们的第一个网页，但是回想一下我们在平时浏览的网站一般从内容和各种样式上讲都是比较复杂的，像我们这样写会有很多缺点，因为这样仅仅只能展示普通的文本，浏览器并不知道是否要对这段文本 进行加粗，放大，段落之间的间距。
二.基本案例
🤢那既然这样我们就来看下下面这个案例，思考下可以通过那种元素让浏览器识别不同的段落。
🐳我们会发现要实现左边的新闻的内容我们需要使用p元素和h2元素，其实这些元素就是HTML元素。
三.认识HTML
😈首先我们来看下官方对HTML的定义：超文本标记语言(英语：HyperText Markup Language，简称：HTML)是一种用来创建网站的标准标记语言，HTML是创建网站的基石。
🐸可能概念比较难以理解，那么我们来思考下，什么是标记语言？
- 由无数个标记（标签，tag）组成；
- 是对某些内容进行特殊的标记，以供其他解释器进行识别处理。
- 比如使用
h2标记的文本会被识别为标题进行加粗，文字放大显示。 - 由标签和内容组成的称为元素。
🐲我们知道我们平时经常会接触文本，那么什么是超文本哪？
- 表示不仅仅可以插入普通的文本，还可以插入图片，音频，视频等内容。
- 还可以表示超链接，从一个网页跳转到另外一个网页。
四.HTML的特点
👽HTML的特点–文件扩展名，HTML文件的扩展名是.html.htm，那么为什么后缀有的是三个后缀，有的是四个后缀哪？其实这是一个历史遗留问题，因为在win98\win95里面文件的后缀名最多三个，所以就造成了html的在那个时代的后缀是.htm，现在统一使用.html.
🙈HTML的特点–结构，HTML文件的整体包含三个部分，分别是头部部分，title部分，主体部分。
🤗我们可以按照HTML的标准格式对我们的网页进行改造。
<html>
<head>
<title>你的第一个网页</title>
</head>
<body>
<h2>页面的主体部分</h2>
<p>Hello World</p>
</body>
</html>
五.开发工具的选择
🥰刚才我们在使用记事本开发我们的网页，我们会发现是比较困难的，首先我们在写代码的时候没有代码文件的合理组织，其次我们在写代码的时候没有内容的高亮，这就导致我们进行网页的开发的时候造成很多不必要的问题并且开发速度也会比较慢，所以我们一般在进行代码的开发的时候我们都会使用编辑器进行开发。
🤡进行前端开发我们一般会选择如下两种编辑器：WebStorm VSCode他们的优缺点如下，WebStorm：优点是集成开发工具，包罗万象，缺点是比较大，比较占内存。VSCode：优先是比较轻量，免费，缺点是需要安装插件进行协助开发，我们推荐使用VSCode。
六.VSCode工具的安装
🙈VSCode编辑器下载-安装：code.visualstudio.com/
🥰安装插件（增加功能）：右侧图标最后一项，Extensions，查找需要的插件（联网）
- 中文插件：Chinese
- 颜色主题：atom one dark
- 文件夹图标：VSCode Great Icons
- 在浏览器中打开网页：open in browser、Live Sever
- 自动重命名标签：auto rename tag
🤢VSCode的配置：
- Auto Save 自动保存
- Font Size 修改代码字体大小
- Word Wrap 代码自动换行
- Render Whitespace 空格的渲染方式(个人推荐)
- Tab Size 代码缩进， 推荐2个空格（公司开发项目基本都是2个空格）
七.认识元素
😈在进行了上述知识的学习我们可能会发现，实际上HTML本质上就是一系列元素组成的，那么什么是元素哪？
- 元素是网页的一部分。
- 一个元素可以包含一个数据项，或者一个文本，或者一张照片，亦或者什么都不包括。
🦄那么HTML都包括哪些元素哪？developer.mozilla.org/zh-CN/docs/…
八.元素的组成
🐸我们来剖析一个元素的组成，这个元素的组成部分有：
- 开始标签（Opening tag）：包含元素的名称（本例为 p），被左、右尖括号所包围。表示元素从这里开始或者开始起作用，在本例中即段落由此开始。
- 结束标签（Closing tag）：与开始标签相似，只是其在元素名之前包含了一个斜杠。这表示着元素的结尾，在本例中即段落在此结束。初学者常常会犯忘记包含结束标签的错误，这可能会产生一些奇怪的结果
- 内容（Content）：元素的内容，本例中就是所输入的文本本身。
- 元素（Element）：开始标签、结束标签与内容相结合，便是一个完整的元素。
九.元素的属性
🐳元素也可以拥有属性，属性包含元素的额外信息，这些信息不会再实际的内容中，一个属性必须包含如下内容
- 一个空格，在属性和元素名称之间。(如果已经有一个或多个属性，就与前一个属性之间有一个空格。)
- 属性名称，后面跟着一个等于号。
- 一个属性值，由一对引号“ ”引起来。
十.属性的分类
👽有些属性是公共的属性，有些属性仅仅是私有的属性，不是每个元素都能够设置。
- 常见的公共的属性如：
titleclassid属性。 - 私有属性：比如
meta元素的charset，img元素的alt元素。
十一.单标签元素和双标签
🤡我们日常使用的时候基本使用的就是双标签元素比如：div body head h2 p a标签等几个标签。
🤗单标签元素：也有一些元素只有一个标签，比如br img hr meta input
十二.元素的结构总结
十三.元素的嵌套关系
十四.总结与内容扩展
🙈在实际工作中, 一个项目通常是多人协作完成的. 可能是几个或者十几个等等，这个时候, 你可能需要使用别人写出的代码功能, 别人也可能使用你的代码功能，如果你的代码自己都看不懂了, 更何况你的同事呢?
😬随着学习的深入, 你的一个程序不再是几行代码就可以搞定的了，可能我们需要写出有上千行, 甚至上万行的程序，某些代码完成某个功能后, 你写的时候思路很清晰, 但是过段时间会出现忘记为什么这样写的情况, 这很正常。
😈没错，前面我们会遇到的情况也有相应的解决办法，那就是给代码添加注释，那我们来看下什么是注释，HTML的注释：简单来说，注释就是一段代码说明<!-- 注释内容 -->，注释是只给开发者看的，浏览器并不会把注释显示给用户看，注释的意义是帮助我们自己理清代码的思路, 方便以后进行查阅，与别人合作开发时, 添加注释, 可以减少沟通成本.(同事之间分模块开发)，开发自己的框架时, 加入适当的注释, 方便别人使用和学习.(开源精神)，可以临时注释掉一段代码, 方便调试。
🐸HTML的注释的快捷键：ctrl+/
🐳到此，这篇文章就暂时告一段落了，我们这篇文章进行我们第一个网页的开发，并且进行了VSCode工具的安装，然后学习了HTML的常见的元素，分析了HTML常见元素的组成，总结了元素的属性，公共属性和私有属性，元素的嵌套和元素的结构总结，后续我们会HTML的补充的知识，字符实体等等内容，同时我会保证每日一更，这样在日积月累中，轻轻松松的把前端的体系知识给逐渐掌握，成为一名合格的前端开发工程师~
原文链接：https://juejin.cn/post/7347668434447155210 作者：一溪风月
