JavaEE 进阶第一期：开启前端入门之旅(上)

专栏：JavaEE 进阶跃迁营

个人主页：手握风云

一、HTML基础

1.1. 什么是HTML

HTML(Hyper Text Markup Language)，超文本标记语言。

超文本：比文本要强大，通过链接和交互式方式来组织和呈现信息的文本形式。不仅仅有文本，还可能包含图片，音频，或者自已经审阅过它的学者所加的评注、补充或脚注等等。

标记语言：由标签构成的语言。HTML的标签都是提前定义好的，使用不同的标签，表示不同的内容。比如在Word文档中的正文、一级标题、二级标题等，提前定义好的格式。

我们在任意路径下，新建一个文本文档，然后将"txt"后缀改为"html"。推荐大家下载文本编辑器：VS Code、Sublime Text、Notepad++都可以。

html 复制代码

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>

经过浏览器(Chrome、Edge、Firefox都可以)的解析，就会产生如下效果：

1.2. HTML标签

HTML的代码是由标签构成的，形如：

html 复制代码

<h3>三级标题</h3>

标签名(body)放到<>中；大部分标签成对出现，<h3>是开始标签，</h3>为结束标签；少数标签只有开始标签，称为单标签；开始标签和结束标签之间写的是标签的内容。

1.3. HTML文件基本结构

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的结构。

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，数字越大，字体越小。

html 复制代码

<!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标签就可以表示一个段落。

html 复制代码

<!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>