第2章 HTML¶
第 2 章¶
HTML¶
Web 开发既包括前端页面开发，又包括后端接口实现。本书内容由浅入深，从前端知识入手讲解。众所周知，前端开发的 “三剑客” HTML、CSS 和 JavaScript 中，HTML 负责页面的整体骨架和整体内容展示，CSS 负责美化页面，让内容展示得更美观，JavaScript 则负责页面的逻辑代码部分，如页面的动态修改行为等。学习了这三项技术就能搭建出简单的静态页面，本章主要介绍 HTML 相关知识，第 3 章和第 10 章将分别对 CSS、JavaScript 展开介绍。
本书基于 IDEA2022.3 版本，创建 JavaWeb 项目来实现所有代码，并在该项目下创建多个模块，其中第 2 章到第 13 章各对应一个单独的模块。
首先，创建 JavaWeb 项目，具体步骤如下。
（1）单击菜单栏的 “File” 选项，选择 “New”，然后选择下一级 “Project...”，如图 2-1 所示。
（2）进入 New Project 新窗口，填写项目名称、路径等信息，填写完成后单击 “Create” 即可创建完成，如图 2-2 所示。
然后，在 JavaWeb 项目中，创建 chaper02_html 模块来存放本章的所有代码。创建项目和创建模块的步骤类似，具体如下。
（1）单击菜单栏的 “File” 选项，选择 “New”，然后选择下一级 “Module...”，如图 2-3 所示。
（2）进入 New Module 新窗口，填写模块名称、路径等信息，然后单击 “Create” 即可创建完成，如图 2-4 所示。
创建完项目及模块后，下面将正式进入本章 HTML 的学习。
2.1 HTML 简介¶
HTML 已经在 1.2.1 节介绍了，接下来我们看一下 HTML 的基本结构：
例如，创建 HelloWorld.html 文件，编写代码实现在页面中输出 “Hello, World!” 字符串。
在 IDEA 中创建 HTML 文件的步骤如图 2-5 所示，右键单击该模块，选择 “New”，然后选择 “HTML File” 进行创建。
代码如下。
使用浏览器运行 HelloWorld.html 文件如图 2-6 所示，结果是成功显示 “Hello, World!”。
注意，HTML 文件的运行方式有两种。一种是针对本地 HTML 文件，直接左键双击该文件，自动跳转浏览器，如图 2-7 所示。另一种是借助 IDEA 工具打开 HTML 文件，如图 2-8 所示，选择文件右侧的浏览器，单击即可。由于涉及文件路径的问题，我们暂时选择第一种，直接双击 HTML 文件。
另外，HTML 文件的扩展名可以是 “.html” 或 “.htm”，这是两种常见的命名约定。“.html” 扩展名使用长文件名格式，而 “.htm” 扩展名是为了与过去的 DOS 命名格式兼容而存在的。从使用效果上来说，无论是 “.html” 还是 “.htm” 扩展名，浏览器都可以正常解析和显示 HTML 文件，它们没有实质上的区别。
2.2 基本语法¶
学习 HTML 就是学习 HTML 预先设定好的标签和效果。对于前端页面而言，“万物皆标签”。标签，即标记，也就是超文本，指特殊格式和固定命名的字符串。每个标签都有自己的显示效果，例如，“” 变成一个输入框，而 “
标签是由 “<” 开始、由 “>” 结束的，并且标签名不区分大小写。标签可以分为双标签和单标签（也叫自结束标签）。
双标签就是 2.1 节案例中所使用的标签的形式，由两个标签组成，一个代表开始，一个代表结束。结束的标签中要使用斜杠 “/” 并在其后加标签名，如 “
