一.你的第一个网页
😁新建一个.txt的文件，在其中添加一些文字，比如Hello World，保存文件，修改文件的扩展名为.html文件，使用浏览器打开页面。但是我们编写的这个网页的弊端是比较大的，它只能够显示一个普通的文本，浏览器不知道是否要对文字进行加粗，放大，段落之间的差距。
二.案例-显示一个新闻
而在上述的内容中我们编写的<p> <h2>标签就是HTML元素。
三.认识HTML
超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。
什么是标记语言？
由无数个标记（标签、tag)组成；
是对某些内容进行特殊的标记，以供其他解释器识别处理；
比如使用
h2标记的文本会被识别为“标题”进行加粗、文字放大显示；由标签和内容组成的称为元素（element）
什么是超文本哪？
表示不仅仅可以插入普通的文本（Text），还可以插入图片、音频、视频等内容；
还可以表示超链接（HyperLink），从一个网页跳转到另一个网页；
四.HTML文件的特点-后缀
😊HTML文件的拓展名是.htm.html，因历史遗留问题，Win95\Win98系统的文件拓展名不能超过3字符，所以使用.htm，现在统一使用 .html
💡需要注意的是，HTML是一门标记语言，但是在这个标记语言中，有一个最外层的标签就是html元素。
五.HTML文件的特点-结构
😗一个完整的HTML结构应该至少包含如下代码中的内容，最外层是html元素，然后内部包含头部和身体部分内容，头部中包含的内容为元数据，例如title
<html> <head> <title></title> </head> <body></body> </html>
但是如果我们每次都这样手写进行开发，其实开发的速度是比较慢的，所以，我们就需要使用我们的开发利器，直接去生成对应的代码。
六.开发工具的选择
🙂我们在上述的开发中使用了记事本来开发，但是记事本开发的缺点有很多，比如，创建和管理文件不方便，没有颜色标识/没有智能提示/无法调试程序。
😂我们经常使用的开发工具如下：WebStorm、Sublime Text、Visual Studio Code、Atom、HBuilder、IntelliJ IDEA、Dreamweaver 等等，他们的优点，智能提示、高亮识别、语法检测、集成环境、开发效率高。
😊我们在平时开发前端的时候基本使用的是如下的两种开发工具：
Webstorm 优点：集成开发工具，包罗万象，缺点：重（占用系统资源多），收费。
VSCode（微软开源）优点：轻（相当于一个编辑器），免费，缺点：需要安装一些插件来辅助开发。
七.VSCode的安装
VSCode编辑器下载-安装，安装插件（增加功能）：右侧图标最后一项，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 代码缩进
然后当我们进行HTML的编写的时候就可以直接使用!来生成完整的HTML文件结构。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> </body> </html>
八.认识元素
😁我们发现HTML本质上一由一系列元素组成的，什么是元素哪？元素是网页元素的一部分，一个元素可以包含一个数据项，或是一块文本，或是一张照片，亦或是什么也不包含。
☺️那么HTML有哪些元素呢？我们会发现元素非常非常的多，这么多能记得住吗？
常用的，用的多自然就记住了；
不常用的，知道在哪里查找即可
九.元素的组成
这个元素的主要部分有：
开始标签（Opening tag）：包含元素的名称（本例为 p），被左、右尖括号所包围。
结束标签（Closing tag）：与开始标签相似，只是其在元素名之前包含了一个斜杠。
内容（Content）：元素的内容，本例中就是所输入的文本本身。
元素（Element）：开始标签、结束标签与内容相结合，便是一个完整的元素
十.元素的属性
😉属性包含元素的额外信息，这些信息不会出现在实际的内容中。
一个属性必须包含如下内容：
一个空格，在属性和元素名称之间。(如果已经有一个或多个属性，就与前一个属性之间有一个空格。
属性名称，后面跟着一个等于号。
一个属性值，由一对引号“ ”引起来。
🤣创建一个超链接标签
<a href="http"//www.baidu.com"></a>
十一.属性的分类
😘有些属性是公共的，每一个元素都可以设置：比如class、id、title属性。
😒有些属性是元素特有的，不是每一个元素都可以设置：比如meta元素的charset属性、img元素的alt属性等。
十二.单标签和双标签元素
双标签元素：我们会发现前面大部分看到的元素都是双标签的：html body head h2 p a元素；
单标签元素：也有一些元素是只有一个标签：br img hr meta input；
十三.HTML元素结构总结
十四.元素的嵌套关系
😂某些元素的内容除了可以是文本之外，还可以去其他元素，这样就形成了元素的嵌套。
十五.为什么需要注释
😊随着学习的深入, 你的一个程序不再是几行代码就可以搞定的了，可能我们需要写出有上千行, 甚至上万行的程序，某些代码完成某个功能后, 你写的时候思路很清晰, 但是过段时间会出现忘记为什么这样写的情况, 这很正常。
🙂在实际工作中, 一个项目通常是多人协作完成的. 可能是几个或者十几个等等，这个时候, 你可能需要使用别人写出的代码功能, 别人也可能使用你的代码功能，如果你的代码自己都看不懂了, 更何况你的同事呢?
十六.HTML注释
<!-- HTML注释 -->
注释的意义:
帮助我们自己理清代码的思路, 方便以后进行查阅.
与别人合作开发时, 添加注释, 可以减少沟通成本.(同事之间分模块开发)
开发自己的框架时, 加入适当的注释, 方便别人使用和学习.(开源精神)
可以临时注释掉一段代码, 方便调试.
😁注释快捷键：Ctrl+/
