1. 前端碎碎念

超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。说人话的话，标签就是指定元素的摆放位置的，写html代码就像收拾桌子一样，浏览器界面就是桌面，使用标签把各种元素定位在他应该在的位置。

web标准主要包括三个方面，一是结构，用于对网页元素进行分类和整理，主要使用HTML；二是表现，或者说外观，指的是美化HTML摆放好的各种元素，主要使用CSS；三是行为，让网页动起来，能够进行交互，主要使用JS。

先从HTML标签开始学，这个页面展示显示效果直接用了wordpress里的自定义html功能，因为懒得在浏览器打开截图了

2. 标签概述

标签一般值成对出现的<><>，这种叫做双标签，后标签括号里要有个斜杠/，比如head标签，除了双标签外还有单标签，仅有一个<>，数量较少

一个页面最基本的结构是

1
2
3
4
5
6
7
8
9
10
<html>

<head>
    <title>标题</title>
</head>

<body>
    主体
</body>
</html>

其中是整个网页最大的标签，所有内容都要写在这个标签内部，称之为根标签，它指定了这个网页的显示范围。

标签是头部标签，这部分内容不会在页面中显示，但是在其中我们必须设置网页的标签，也就是网页的标题 标签是网页的主体，所有网页显示的内容全部包含在其中，内部再用其他标签设置各种结构

这个网页主体可以在vscode中直接自动生成，在空白的html文档里打一个!，然后按回车或者tab，直接能生成下面那一串（我自己补了个body）

Document （第一个页面）

它在浏览器中打开是这样子的

3. 基本常用标签

3.1 标题标签

标题标签有6个等级，很直观地命名为

到

，文字大小和重量以此递减，可以用来表示不同的标题或者重要性

1
<h1>我是一级标题</h1>

显示效果为

我是一级标题

1
<h2>我是二级标题</h2>

显示效果为

我是二级标题

值得说明的是，每个标题标签都要独占一行，即使代码里把两个标题标签写在了同一行里，在网页上还是显示两行，就比如

1
<h1>我是一级标题</h1><h2>我是二级标题</h2>

显示出来依然是

我是一级标题

我是二级标题

3.2 段落标签

段落标签

用来给大段文字分段，每一个p标签其中的部分都会在网页上显示成一段，并且段落与段落之间会有一行空行，任一段落都能根据浏览器大小来自动换行

3.3 换行标签

在html代码中，手动给文字打一个回车，即使在编辑器里显示文字换行了，但是在浏览器中显示还是没有换行的，如果要实现对文字换行，就要使用换行标签

换行标签
，这是一个单标签，用来给文字强制换行，在网页显示中，只要代码中出现换行标签，就会强制给文字换行，其中
这几个字符是不会显示出来的

3.4 文本格式化标签

文本格式化标签用来给文字添加格式（粗体，斜体，下划线，删除线），来进行突出显示

加粗使用标签或者标签，其中前者语义更加强烈，显示效果是这样的

我是没加粗的
我是加粗标签

倾斜使用或者标签，其中前者语义更加强烈，显示效果为

我是正常的的
我是倾斜标签

下划线使用或者标签，其中前者语义更加强烈，显示效果为

我是正常的的
我是下划线标签

删除线使用或者标签，其中前者语义更加强烈，显示效果为

我是正常的的
我是删除线标签

3.5 盒子标签

标签和标签称为盒子标签，标签中的内容就像是放在同一个盒子一样，网页显示一般都是分区域的，这两种标签用来指定整个网页各区域的基本结构，功能相似，但是显示效果有所区别

div盒子比较大，一个div就占一整行，或者说同一行只能显示一个div

span盒子比较小，可以在同一行显示多个span

1
2
3
4
<div>一行</div>
<div>另一行</div>
<span>一行</span>
<span>同一行</span>

上面的代码显示效果是这样的

一行

另一行

一行 同一行

剩下的下次再写