前端学习 - 小红帽学前端 | 1.1 HTML 简介 - 个人文章

前言从今天开始，小红帽开始了学习前端的道路（假装从头开始）。开始第一天，定个小目标，理清 HTML 是一门怎么样的东西。知道他里面有什么玩意，在自己整一个「Hello World ！」的 HTML 文本出来先。

1 HTML 是啥？

老套路，学啥东西先看看人家是啥玩意，这里的话。
HTML 全称 HyperText Markup Language，翻译成中文是「超文本标记语言」。看翻译就知道，他并不是一门编程语言，而是一种标记语言，一种告知浏览器如何组织页面的标记语言。

啥玩意，你可以理解这玩意是一个文本，然后咧，我们在这里文本外面套层皮下去，做点小标记，来告诉浏览器去渲染解析他的时候，知道这个标记的渲染出来是一个标题，那个文本渲染出来的是一个加粗的文本。眼熟不，像不像大学期末考在书上画重点，做满了标记，你像浏览器一样，一翻书，看到这些标记的文本，就知道「哦，这玩意是重点，搞出来的要不一样」

现在我们整一个 HTML 文件出来，开始我们对 HTML 的摸索。我们先右键新建一个文本文档，然后吧他的后缀名 .txt 改为 .html（不知道改后缀名自个百度去），然后用 notepad++ 打开进行编辑。下面所展示的代码均在我们现在创建的 HTML 文件中编写。开始我们对 HTML 的摸索之旅吧。

这边一开始，大家就先老老实实用个 notepad++ 或者直接记事本来写代码啦，就不要用啥子 IDE，有点杀鸡用牛刀的感觉。此外大家刚开始学，不要偷懒，认真打好每一串代码，不要用 IDE 偷懒。这样对刚开始的学习才好。等到你学入门知识的时候就可以用那些 IDE 去帮你偷懒啦。当然现在你要用也随你。建议用 VSCode 等这种轻量级的 IDE，Webstorm 这种就算了，好用！但是是真的浪费，且那玩意真的很吃内存。

2 剖析 HTML 元素

2.1 元素组成要素

HTML 是由一个个 HTML 元素组成的，那么我们看看一个 HTML 元素是怎么样的。我们就拿一个段落元素为例吧。

<p>我是一个段落</p>

这上面这个元素主要有下面几个部分

开始标签（Opening tag）

他由一个小于号 < 和一个大于号 >，包裹这一个元素名称（本例为 p）组成。本例中 <p> 就是我们的开始标签。他告诉浏览器「兄弟，注意啦，从这开始这是一个段落，你要按照段落的样子渲染」

结束标签（Closing tag）

与开始标签一样，只是在其元素名前面加了一个斜杠，表示元素的结尾。也就是本例中的 </p>。他就告诉浏览器「大兄弟，段落渲染在这边就可以啦。后面的咋渲染就不关我的事情啦」

内容（Content）

元素的内容啊，就是被标签包裹住的东西。这边的话就是中间的那段文本。但他也可以是另外一个元素，这个是可以层层嵌套的。

元素（Element）

上面的东西凑起来就是一个元素啦。

当然不一定每个元素都是有这些构成要素的，例如我们的 空元素 就只有标签举例的话就是我们的图片标签 img 了，如下：

<img src="xxx.jpg">

他整个元素就这么一点东西。就只有一个标签。

2.2 元素属性

元素也有着属性的，属性里面包含元素的额外信息，这些信息不会显示在实际的内容中。我们看下面的代码。写法也简单，就是在开始标签里面加 属性名=“属性值” 的这种写法，就是要注意互相之间要有个空格，不然就不知道会出现什么奇怪的情况了。

<p class="desc" id=“de2”>描述</p>

这上面 p 元素有两个属性，分别是 id 和 class。其中 class 的属性，值为 desc，在页面中我们是看不到这些东西，这个 class 属性一般是用来识别此元素的样式信息或者也可以用于识别元素等作用。

元素的属性太多了，这边就不想一一说了，到时候用多了就知道了。

3 创建一个完整的 HTML 文件

学习了一些 HTML 元素的基础知识，但是这些元素单独是没有意义的。HTML 是有自己的一套规则的。我们就看一下一个完整的 HTML 文件是怎么样的。我们再搞一个 HTML 文件，然后把下面的代码放到里面去。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>demo</title>
  </head>
  <body>
    <p>Hello World!</p>
  </body>
</html>

看起来一堆代码，其实我们用浏览器打开他的话就只有一句 Hello World! 显示在我们的页面上。为啥子咧。我们分析一下他的组成你就知道为啥了。

1 <!DOCTYPE html>

声明文档类型。他的作用就是告诉我们的语言解析器，也就是我们的浏览器要用什么样的文档类型定义来解析下面的文档。之前声明这个的时候贼多东西，现在你知道直接第一行加 <!DOCTYPE html> 这个就行啦。

2 <html></html>

html 元素。这个元素包裹了整个完整的页面，是一个根元素，前期基本不用去理他。后面用到的时候再说。

3 <head></head>

头元素。这个元素是一个容器，它包含了所有你想包含在HTML页面中但不想在HTML页面中显示的内容。这些内容包括你想在搜索结果中出现的关键字和页面描述，CSS样式，字符集声明等等。这块内容很重要，所以我们在在下一篇文章里面去介绍他。

4 <body></body>

body 元素。包含了你访问页面时所有显示在页面上的内容，文本，图片，音频，游戏等等。反正你在页面上看到的东西全在这里面就对啦。

所有 HTML 都应该要有上面的那些东西，我们要搞事的地方基本就在 body 元素里面。现在你可以尝试自己搞一个 HTML 文件，搞点事情。例如一级标题的元素名是 h1,段落的元素名是 p。先拿这两个元素去玩一下。或者自己再去找找其他元素玩玩。

4 写在最后

重学之后发现其实自己还是不懂这些基础的东西，因为发现自己会用但是不知道如何说出来。果然还是一个小辣鸡。这边的话，如果大家想学前端的话可以去 MDN 找教程好好看，如果觉得看文字教程觉得有点难消化的，可以我公众号那边回复「前端」，就会有一些前端的视频教程，大家可以结合着来学习。咋说咧，自己当初学前端的时候没有踏实学好，现在我真的是一个初学者了，如果有啥不懂或者我哪边理解错了，欢迎留言指正，大家一起学习进步啦。

小红帽学前端 | 1.1 HTML 简介