专栏：JavaEE 进阶跃迁营
个人主页：手握风云
一、HTML基础
1.1. 什么是HTML
HTML(Hyper Text Markup Language)，超文本标记语言。
超文本：比文本要强大，通过链接和交互式方式来组织和呈现信息的文本形式。不仅仅有文本，还可能包含图片，音频，或者自已经审阅过它的学者所加的评注、补充或脚注等等。
标记语言：由标签构成的语言。HTML的标签都是提前定义好的，使用不同的标签，表示不同的内容。比如在Word文档中的正文、一级标题、二级标题等，提前定义好的格式。
我们在任意路径下，新建一个文本文档，然后将“txt”后缀改为“html”。推荐大家下载文本编辑器：VS Code、Sublime Text、Notepad++都可以。
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>经过浏览器(Chrome、Edge、Firefox都可以)的解析，就会产生如下效果：
1.2. HTML标签
HTML的代码是由标签构成的，形如：
<h3>三级标题</h3>标签名(body)放到<>中；大部分标签成对出现，<h3>是开始标签，</h3>为结束标签；少数标签只有开始标签，称为单标签；开始标签和结束标签之间写的是标签的内容。
1.3. HTML文件基本结构
<html>
<head>
<title>第一个页面</title>
</head>
<body>
<h1>一级标题</h1>
<h2>二级标题</h2>
</body>
</html>html里面分为两部分：head和body。head里面是页面的整体内容，，比如标题、编码。body里面是页面显示的内容。
1.4. 标签层次结构
- 父子关系
head和title、html和head、html和body。
- 兄弟关系
head和body。
二、HTML快速入门
2.1. 开发工具
HTML可以使用系统自带的记事本来编写，但是非常不方便，我们课程中使用前端专业的开发工具：VS Code或者Trae都可以。
2.2. 快速开发
在Trae中创建文件"Demo1.html"，! + tab / enter，就可以直接生成html的结构。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
我们可以点击右键，查看网页源代码。我们也可以按F12，打开开发者工具，就可以查看整个网页的结构。
如果使用注释，直接快捷键 ctrl + /。按一次，添加注释，再按一次，取消注释。
三、HTML常见标签页
3.1. 标题标签
6个，从h1到h6，数字越大，字体越小。
<!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>
<h1>111</h1>
<h2>222</h2>
<h3>333</h3>
<h4>444</h4>
<h5>555</h5>
<h6>666</h6>
</body>
</html>
3.2. 段落标签
在HTML中，段落、换行符、空格都会失效，如果需要分成段落，需要使用专门的标签。p标签就可以表示一个段落。
<!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>
<p>这是第一个段落</p>
<p>这是第二个段落</p>
<p>这是第三个段落</p>
</body>
</html>