初识HTML - 技术栈

一.第一个网页

首先我们在自己的电脑上新建一个txt文件，命名为index.html文件的格式。
使用记事本打开在内部输入HelloWorld然后进行保存。
使用使用谷歌浏览器或者edge浏览器进行打开。
我们会看到网页中出现了HelloWorld字样，这就是我们的第一个网页。

🙈但是这样编写网页有很多弊端，只是一段普通的文本，浏览器不知道是否要进行加粗，放大，段落之间的间距，因为我们在平时使用的网页是各式各样的，比如如下的这个网页，浏览器其实是不知道哪些应该放置图片，哪里应该是某个段落，所以我们就需要标记来告诉浏览器一些东西该怎么显示。

二.认识HTML

🐳超文本标记语言，是一种用于创建网页的标准标记语言，HTML元素是创建网站的基石。

🙈什么是标记语言？

由无数个标签组成。
是对某些元素进行标记，以供其他解释器进行识别处理。
比如使用<h2></h2>标记文本会被识别为"标题"进行加粗和文字放大显示。
由文件和内容组成的称之为元素。

🐸什么是超文本哪？

表示不仅仅可以插入普通的文本，还可以插入图片，视频，音频等等。
还可以表示超链接，从一个网页跳转到另外一个网页。

😈HTML文件的特点

因为历史遗留问题，Win95/Win98系统的扩展名不能超过3个字符，所以使用.htm
现在统一使用.html

🐻‍❄️HTML文件的特点-结构

html 复制代码

<html>
    <head>
      <title>改进自己的网页</title>
      <!-- 还可以存放其他元数据 -->
    </head>
    <body>
      <!-- 网页的内容 -->
    </body>
</html>

👽改进自己的网页

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>改进自己的网页</title>
</head>

<body>
  <h1>我认为：15个值得去和不值得去的著名旅游目的地，你认为哪？</h1>
  <h3>1.泰国普吉岛真的不值得大肆宣扬</h3>
  <p>你可能听说过普吉岛，它被很多旅游团队和个人提到，列入名单是你应该去的地方</p>
  <p>然而这个地方真的不值得大肆宣传，因为旺季的时候会非常的拥挤，如果你打算放松一下，那就最好别去了</p>
  <h3>2.东非的塞舌尔，值得大肆宣传</h3>
  <p>赛舌尔是一个风景如画的热带群岛，由115个岛屿组成。</p>
  <p>这里有潜水，浮潜等等，各种让你喜欢的水上运动，它的海滩非常的迷人和美丽。</p>
</body>

</html>

三.开发工具

🐲记事本可以开发一个网页吗？答案：可以，但是有很多的缺点。

创建和管理文件不方便。
没有颜色标识/没有智能提示/无法调试程序。

🐔专业的前端开发工具。

Webstorm，Sublime Text，VsCode，IDEA。
智能提示，高亮识别，语法检测，集成环境，开发效率高。

🙈上课推荐开发工具

Webstorm：优点，集成开发工具，包罗万象，缺点，重，收费。
VsCode：上课使用，微软开源，优点，轻，免费，缺点，需要安装一些插件来辅助开发。

😬安装插件：左侧图标最后一项，查找需要的插件。

中文插件(chinese)
颜色主题（atom one dark）
文件夹图标（VsCode Great Icons）
在浏览器中打开网页（open In browser，Live Server）
自动重命名标签（auto rename tag）

👽VsCode的配置：

Auto Save 自动保存（点击文件-->点击自动保存）
Font Size 修改代码字体。
Word Wrap 代码自动换行。
Render Whitespace 空格的渲染方式。
Tab Size 代码缩进，推荐两个空格（公司开发项目基本都是两个空格）。

四.HTML元素(重点)

🙈我们会发现HTML本质上是由一系列的元素(Element)构成的。

👽什么是元素（Element）哪？

元素是网页的一部分；
一个元素可以包含一个数据项，或是一块文本，或者是一张图片，亦或什么都不包含。

😳那么HTML有哪些元素哪？

developer.mozilla.org/zh-CN/docs/...

😈我们会发现元素是非常非常多的，那么这么多的元素我们能记住吗？

常用的：用的多了自然就记住了。
不常用的：知道在哪里查找即可。

🐳剖析一个HTML元素的组成：

🐲这个元素的主要部分有：

开始标签：包含元素的标签，被左右尖括号所包裹，表示元素从这里开始或者从这里起作用。
结束标签：与开始标签相似，只不过相对而言在标签之前加了一个/表示元素的结尾。
元素的内容：本例中就是所输入文本的本身。
元素：开始标签结束标签与内容相结合，便是一个完整的元素。

🐸元素的属性：元素也是可以拥有属性的，属性包含元素的额外信息，这些信息不会出现在实际的内容中。

🐔一个属性必须包含如下内容：

一个空格，在属性和元素的名称之间（如果已经有一个或者多个属性，就在前一个属性之间有一个空格）。
属性的名称，后面跟着一个等于号。
一个属性值，由一对双引号""引起来。

😬元素属性的分类：

有些属性是公共的，每一个元素都可以设置的，比如class id title属性。
有些属性是元素特有的，不是每一个元素都可以设置，比如meta元素的charset属性。

👽单标签和双标签元素：

双标签元素：以后我们遇到的大多数元素都是双标签元素，比如div span等。
单标签元素：当然也有一些单标签元素，比如img input等。

🙈元素的结构总结：

😳元素的嵌套关系，某些元素的内容除了可以是文本之外，还可以去其他元素，这样就形成了元素的嵌套，元素进行嵌套后相应的位置关系就形成了，他们的关系形成可以使用树形结构来表示，也就是我们所说的DOM树；

🐳元素之间的关系：

父子关系：比如ul和li，li和div之间。
兄弟关系：比如两个div，两个span之间。

😬快速复制上述元素：alt + shift + 向下箭头。

五.注释编写

😈为什么需要注释？

在实际工作中，一个项目通常是多人协作完成的，可能是几个或者十几个等等。
这个时候你可能需要使用别人写的代码功能，别人也可能使用你的代码功能。
如果你自己的代码自己都看不懂了，更何况你的同事哪?

🐻‍❄️HTML注释：

简单来说，注释就是一段代码说明
注释内容
注释是只给开发者看的，浏览器并不会把注释显示给用户看。

😈注释的意义：

帮助我们理清代码的思路，方便以后查阅。
与别人合作开发时候，添加注释，可以减少沟通成本(同事之间分模块)
开发自己的框架时，加入适当的注释，方便别人使用和学习(开源精神)
可以临时注释掉一段代码，方便调试。
注释快捷键：crtl+/。