前端学习笔记一：HTML（1）预备知识及一个简单的网页

先唠唠嗑：
选择计算机相关的专业纯粹是因为爱屋及乌(x 。因此在之前的大学学习生涯中就没有专业方向的概念，（虽然代班在班会上提到过，但是大学新生嘛，都懂得(划掉）。所上过的课程都是老师教什么就学什么，完成作业实验和课程设计并顺利结课拿学分之后也就没下文了。
但是眼下也快大四了，也该决定了专业方向了，经过一番权衡考虑决定从前端开始。听取了比我大一届的堂哥的建议决定开一个博客来监督自己学习。
首先就先按顺序学习前端入门三件套：HTML、CSS和JavaScript，并且目前先开始系统学习HTML。
这前几篇内容就尽量回忆之前学过的内容吧。
又想了一会儿，干脆就以每次学习的过程中打出来的一个个代码作为示例来讲解知识点吧。
再开始讲解标签内容前一些基本的概念还是要先讲清楚的：

关于HTML

（1）HTML即指“超文本标记语言”（HyperText Markup Language），是一种用于创建网页的标准标记语言。
（2）HTML是一种标记语言而非编程语言。
（3）如上所述，因为是标记语言，所以HTML的语法由一套标记标签（markup tag）组成。
（4）HTML使用标记标签来描述网页，注意是描述（既设定网页的格式，例如一段文字的样式格式，一个网页的背景设计，文字与图片等要素之间的结合样式等）而非表达（既网页具体显示什么内容，例如要显示什么文字图片或者播放什么样的音频和视频）。
通俗来讲，就是说HTML只管怎样让一个网页变得好看实用，但是好看实用的网页里面具体塞什么东西就管不到了，因为前端只负责把既定的内容塞进这个好看实用的网站里。可能整个前端大方向都是这样子的吧（个人理解）。
（5）HTML文档包含了HTML和文本内容。
（6）综上所述，HTML文档也叫做web页面。

HTML标记标签（简称HTML标签）

（晕，才发现csdn博客居然也是一个类编译器，想单独表示个标签居然直接给我运行出来了，因此在本笔记内除代码段之外的标签内容用csdn博客默认的C/C++代码块来表示【对，就是粉底红字的那种】，敬请留意）
（1）HTML标签是由尖括号包围的关键词，例如“html”
（2）HTML标签通常是成对出现的，例如“a”“/a”（既然把通常加粗了，就表明了也有部分标签因为标签本身就是一个内容并不需要后者标签）。
（3）如上所述的标签对中，前者为开始标签，后者为结束标签，标签之间的内容就是网站要显示的文本内容。
基础知识大概就这些，现在开始正式学习HTML的语法内容。
首先是第一篇代码，我管它叫做blog。

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1"><title></title></head><body><h1>&nbsp;&nbsp;幻&nbsp;想&nbsp;乡&nbsp;Quiz&nbsp;大&nbsp;会&nbsp;&nbsp;</h1><i>2020.05.21</i><hr ><p>请问灵乌路空是啥物种？</p><p>八咫乌</p><p>就是一种鸟类咯？</p><p>sodayo~</p><p>那她最喜欢吃啥？</p><p>好像是鸟蛋。</p><p>诶？！</p><p>她不会觉得奇怪吗！？</p><p>应该不会<br><b>毕竟鸟类都是笨蛋嘛</b></p></body>
</html>

这个网页的显示结果如下所示（如果看上去尺寸怪怪的，是因为这个页面我只用了桌面的一半尺寸来显示，以后的笔记里的图片也有这样的，敬请留意）：

以上就是一个最简单的网页。
可以明显的看出来一个网页的基本结构框架有：

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1"><title></title></head><body></body>
</html>

各个标签的定义为（从这一行开始一直到以后的博客内容中，在单独讲述一个标签的定义时，如果这个标签是标签对，则以“/html”的格式来显示，而不单独把标签对都写出来；若该标签不包含结束标签，则由“html”来展示）：
<!DOCTYPE html>：声明一个HTML文档为 HTML5文档
</html>：一个HTML页面的根元素。
</head>：该元素包含了文档的元数据（）和标题（）。
<meta>：定义一个HTML文档所包含的元数据，例如该网页的编码格式等。
另外提一下，要想在网页内显示中文是需在元数据内添加charset="utf-8"属性。
</title>：描述一个HTML文档的标题，即显示在浏览器上方的标题内容，如下图所示：

</body>：这个元素包含了一个HTML文档的网页可见内容。

框架打完了，接下来以及在以后的HTML学习笔记中的知识点应该对一个标签属性的定义占了相当的内容。

在第一个示例中的其他标签的用法如下：
</h>：定义一个网页内的标题，HTML一共有分6级标题，即<h1></h1>到<h6></h6>。
<hr>：给网页一个横划线。
<p>：给HTML网页定义一个段落，一个段落内的文字独占一行。若一个文档内有多个段落，则段落之间会自动调整行距。
<br>：相当于换行符。
</b>：把一段文字加粗。
类似加粗标签的标签还有斜体标签</i>、上标字</sub>、下标字</sup>等，其余的等到用到的时候再作说明。
哦，还有一个 ，就是一个空格，输一个给一个空格，但也有特殊情况（如在某些属性的内容内多次插入该空格标签结果却只显示一个），不过到时候再另行说明解决方法。

最后再对HTML的元素标签语法进行说明（另外再说明一下，标签与元素在大多数情况下都是一个意思，非要深究区别就是元素包含标签，在以后相关的表述时用哪一个看我的当时心情(划掉）：
（1）HTML元素以开始标签起始，以结束标签终止。
（2）元素的内容（即显示在浏览器页面里的内容）是开始标签与结束标签之间的内容。
（3）某些HTML元素具有空内容（如前文所述的那些不包含结束标签的元素）。
（4）空元素在开始标签中进行关闭。
（5）大多数HTML元素可拥有属性。

关于属性也有如下说明：
5.1设置元素内的属性的功能是在元素中添加附加信息
5.2属性一般在开始标签内描述
5.3属性总是以“名称/值”对的形式出现，例如： name="value"
5.4元素的属性值应该始终被包围在引号内，大部分情况都使用双引号。但若属性值本身就包含双引号，属性值就可以用单引号表示。
5.5大多数HTML元素的适用属性有：
（不知道第几次说明：本笔记内的元素的属性名也采用默认代码段来表示）
①class：为HTML元素定义一个或多个类名；
②id：定义元素单独唯一id；
③style：规定元素的行内样式；
④title：描述元素的额外信息。
其它属性在用到的时候另行说明。

（6）大多数HTML元素之间可以嵌套。这进一步的说明一个HTML文档实际是由相互嵌套的HTML元素构成。