文章目录
- 前言
- 壹、基本语法
- 1.1 含义
- 1.2 注释
- 1.3 HTML文档的标准结构
- 贰、基本的文本标记
- 2.1 段落
- 2.2 保留空白字符
- 2.3 标题
- 2.4 水平线
前言
HTML是一种标记语言,这意味着它用来标记文档中的各个部分，已指定文档在打印件或者显示器上的显示方式。简单来说，HTML就是超文本标记语言。
这里补充一些东西，可能大家初学不知道，html在哪里运行的，我习惯在vscode上面写该语言。当然，也可以在记事本里面运行。还有一点，HTML文档中大小写无严格规定。
壹、基本语法
1.1 含义
HTML中的基本语法单位称为标签。一般来说，标签用于指定内容的类别。标签的语法是利用一对尖括号“<>”将标签名称包围起来。
注意：大部分标签都是成对出现，当然也有单标签，后面我们会学到。
如下是一行简单的代码：<p>This is simple stuff.</p>
解释：
（1）<p>即为开始标签，</p>为结束标签；
（2）由上可知，结束标签里面带有“/”符号；
（3）在开始标签和结束标签，中间的就是标签的内容；
（4）运行之后，我们会发现，浏览器上面的内容，就是代码标签之间的内容。
1.2 注释
格式：
HTML文档和程序里面注释一样重要。浏览器会忽略掉HTML注释，这些注释只对人有用。注释的格式，如上图所示，可以单行和多行。
注意：除注释外，还有一些其他类型的文本出现在文档中，也会被浏览器忽视。会忽略掉无法识别 的标签，这里的标签就像其他高级语言里面的关键字，是规定约束好 的。此外还忽略掉 空行，如果要在显示结果里面显示空行，需要加上特定的标签。
1.3 HTML文档的标准结构
1、每个HTML文档的第一行都是一个DOCTYPE命令，它指定了该文档所遵循的特定SGML文档类型定义，这个地方，不是很好理解，通俗的来讲，就是在这个命令里面定义许多规则，写完整体代码之后，它会把代码和命令里面定义对比一下，看看有没有错误。
<!DOCTYPE html>
2、文档中必须有以下四个标签：<html> <head> <title> <body>。
<html>：在最开始的部分，</html>：在末尾部分。
而在<html>里面会有一个特性lang，用于指定当前所用的语言，英语是“en”，中文简体是“zh-cn”，这里的cn也是域名，这里在计算机网络里面会讲。
演示：
解释：
一个HTML文档包含两部分，头(head)部分和主体(body)部分。<head>元素包多了文档的头部分，该部分提供了文档的相关信息，而没有提供文档内容。它总是包含两个简单元素:一个标题元素和一个meta元素。meta元素用来提供关于文档的额外信息。它不包含任何内容，而是通过特性指定信息。也就是所能表达的范围是8位，通常表达是UTF-8，也可以是16为32位，分别把8换成16和32。
<meta charset="utf-8">
这里面的反斜杠表示没有结束标签——开始标签和结束标签合为一个，即为我们之前提到的单标签。注意，也可以把斜杠去了。
我们来看一个基本的格式：
<!DOCTYPE html>
<html>
<head>
<title> 标题 </title>
<meta charset="utf-8">
...
</head>
<body>
...
</body>
</html>
贰、基本的文本标记
我们来学习一些有哪些标签，它们是什么意思，又怎么用。
2.1 段落
在文本前后加上<p></p>即可。
演示：
<!DOCTYPE html>
<html>
<head>
<title> 标题 </title>
<meta charset="utf-8">
</head>
<body>
<p>
hello everyone
we begin to study
</p>
</body>
</html>
大家有没有发现一个奇怪的现象，我在代码中打的既有多个空格，又有换行但是只显示空格，并且是一个空。这里就是我们之前讲的，在浏览器显示时候，会忽略掉HTML文档里面的空格和换行，需要用特定的标签来约定。
大家可以把下面代码写在自己的环境下试一下：
<!DOCTYPE html>
<html>
<head>
<title> 标题 </title>
<meta charset="utf-8">
</head>
<body>
<p>
<i>Hello,everyone.</i> <!--<i></i>:表示将包含的内容变成斜体字-->
</p>
<!--<p></p>:这对标签，可以将段落段落之间换行-->
<p>
<b>Hello, <br>ereryone </b> <!--<b></b>:表示将包含的内容编程粗体字-->
<!--<br>:表示行中断，这里是单标签-->
</p>
</body>
</html>
结果：
2.2 保留空白字符
那么怎么样可以将文本原封不动的打印出来呢，我们引入pre标签。
来看下面代码：
<!DOCTYPE html>
<html>
<head>
<title> Hi </title>
<meta charset="utf-8">
</head>
<body>
<pre>
<b> <!--加粗标签-->
你
们
好
啊
!</b>
</pre>
</body>
</html>
效果：
2.3 标题
👀注意：我们要区分两个标签，一个是title，另一个就是我们现在讲的标题——<h>.
这里的标签，最后显示出来的效果在这个位置：
而我们现在讲的标签，标题一共分为六级，它们按照数字的变化而导致字号的改变，来看一下代码：
<!DOCTYPE html>
<html>
<head>
<title> Hi </title>
<meta charset="utf-8">
</head>
<body>
<h1>hanmz</h1>
<h2>hanmz</h2>
<h3>hanmz</h3>
<h4>hanmz</h4>
<h5>hanmz</h5>
<h6>hanmz</h6>
</body>
</html>
效果图：
比如你想要强调某一行或者某个字，可以用以下方法：
<body>
<p>
<font size="5"> hanmzhi</font>
</p>
<p>
<font size="20"> hanmzhi</font>
</p>
</body>
运用<font size=" 字号">来加强字体，来看一下效果：
2.4 水平线
利用<hr>标签，注意，这里依然是单标签，我们到现在，已经学到了两种单标签了，一个是行中断：<br>，另一个就是现在这个。
