你的第一个网页

前言

👽了解了前端的大致内容我们就要进行实际的开发了，首先我们会从HTML进行学习，然后在此基础上学习其他的东西，本文章属于个人学习笔记性质，前端老鸟建议绕路~

一.第一个网页

🐲在开发编写我们第一个网页之前我们首先看下网页到底是什么东西，我们拿掘金网站为例，我们会发现网页本质就是这样的一个文件在浏览器里面被解析了，解析后在浏览器就看到了一个页面，所以网页的本质就是一个文件

🤠既然这样我们就来新建一个文件来编写一个属于自己的第一个网页。

首先新建一个index.txt的记事本文件，然后在里面书写HelloWorld。
然后将txt的文件后缀更改为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>
  <h2>百科核心用户编写的优秀词条</h2>
  <p>特色词条，曾定名为"优秀词条"，是由百科蝌蚪团评审员评审并授予"特色词条"徽帜的词条，它是百科词条的优秀之作，具有较强的知识性和专业性，且用词规范、行文有据、阐释适度、通俗易懂、排版美观，符合互联网阅读习惯。</p>
  <p>
    特色词条是百度百科继优质版本系列（图片、初级、中级、高级）之后，推出的授予较高质量词条的一种荣誉称号，与之前针对"版本"的评价方式不同，特色词条的评选标准，将针对整个词条，不再要求某一个用户贡献的多寡，而是对一个词条内容积累的肯定。
  </p>
  <p>各分类词条编辑指南的拓展、维护和管理工作由百科分类拓展委员会负责。</p>
  <p>各分类特色词条的组织生产和质量监督由百科任务评审团委员会和百科监察委员会负责。</p>
</body>

</html>

🦮其实我们代码中编写的内容P H1这样的标签就是HTML元素。

二.认识HTML

🦝HTML被称为超文本标记语言，是网站构建的基石，我们来看下什么是标记语言

由无数个标签组成。
是对某些内容进行特殊的标记，以供其他解释器解释处理。
比如使用H2标签会被识别为二级标题。
由标签和内容组成的称为元素。

🤖什么是超文本哪？

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

👾HTML文件的扩展名为.html或者.htm后一个主要是历史遗留问题，因为win98扩展最多三个字符。

🐽HTML文件的结构：

三.开发工具

👺我们进行代码的开发一般都会使用开发工具，常用的开发工具包括如下这些：Webstorm VSCode等等

WebStorm：优点是包罗万象，功能强大，内置了很多东西，但是缺点是过重，太耗费内存。
VSCode：轻量，免费，可以安装一些插件帮助开发。

🤣VSCode的安装以及插件的安装：链接

插件推荐：中文插件Chinese，颜色主题atom one dark，文件夹图标VSCode Great Icons,在浏览器中打开open in browser Live Sever，自动重命名标签auto rename tag。
VSCode的配置：Auto Save自动保存，Word Wrap代码自动换行，Render Whitespace空格的渲染方式，Tab Size代码缩进(推荐两个空格)

四.HTML元素

🐽我们发现HTML的本质就是一系列元素组成的，那么什么是元素哪？元素是网页的一部分，一个元素可以包含一个数据项，或是一块文本，或是一张照片，亦或是什么也不包含。

🐣HTML元素的元素有很多这些元素常用的熟练记忆使用，不常用的知道有它知道在哪找就行了：链接

🙈元素的组成：

这些元素的主要部分包括：

开始标签：包含元素的名称（本例为 p）被左、右尖括号所包围。表示元素从这里开始或者开始起作用。
结束标签：与开始标签相似，只是其在元素名之前包含了一个斜杠。这表示着元素的结尾 ------ 在本例中即段落在此结束。初学者常常会犯忘记包含结束标签的错误，这可能会产生一些奇怪的结果。
内容：元素的内容，本例中就是所输入的文本本身。
元素：开始标签、结束标签与内容相结合，便是一个完整的元素。

😳元素的属性：元素也是可以拥有属性的，属性包含的是元素的额外信息这些信息不会出现在页面中去。

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

一个空格，在属性和元素名称之间。(如果已经有一个或多个属性，就与前一个属性之间有一个空格)
属性名称，后边跟着一个等号。
一个属性值，由""引起来。

🤠元素属性的分类：元素的属性分为两类，一类是公共属性比如，class id title另外一类是特有属性比如，meta charset等。

👾单标签元素和双标签元素：我们发现在HTML中大部分都是双标签元素，比如html div span等等，在HTML中也有一些单标签元素比如，br img等等。

👺元素的嵌套关系：元素的内容除了可以是文本之外还可以是其他的元素，这样就形成了元素的嵌套。

五.HTML注释

😗首先考虑一下为什么我们需要注释？我们来看一个冷笑话，在我写代码的时候只有我和上帝知道我的代码什么意思，等过了一段时间只有上帝知道我的代码什么意思~

🤣为什么会出现这种情况？因为随着学习的深入你的代码不会仅仅只有几行就能够搞定，你会发现在开发的时候你的思路很清晰，但是过了一段时间就会忘记了为什么这么写，这种情况是很正常的，同事在很多时候需要协同开发，你自己的代码自己都看不懂，更何况你的同事哪？所以我们就需要注释。

🐣HTML注释的写法：注释是只给开发者看的，浏览器并不会把注释显示给用户看

html 复制代码

<!-- 注释内容 -->

🙈注释的意义：

帮助我们理清自己代码的思路，方便以后查阅。
与别人协作开发的时候，添加注释可以降低沟通成本。
开发自己的框架的时候添加注释方便别人查阅，开源精神。
可以临时注释掉一些代码，方便调试。

🐓注释的快捷键：ctrl+/

六.总结

😳这篇文章我们学习了网页的基本编写，并且学习了HTML元素的基本组成，理清了元素的两类属性，分别是通用的属性和特有的属性，并且了解了元素的嵌套，HTML是网站构建的基石是后续学习的基础~