![剑指JavaWeb:技术详解与应用实践](https://wfqqreader-1252317822.image.myqcloud.com/cover/457/51089457/b_51089457.jpg)
2.1 HTML简介
HTML已经在1.2.1节介绍了,接下来我们看一下HTML的基本结构:
![](https://epubservercos.yuewen.com/B84C2D/30120995704540106/epubprivate/OEBPS/Images/48021_20_3.jpg?sign=1739892709-vRcRxA9vOfJd8AVgcIppFb91QHWffOUq-0-be2750d66a5b2607ee7fa911b7807907)
● <!DOCTYPE>,文档版本声明,就是告诉浏览器应该以什么方式来解释这个 HTML 文件。需要注意的是,文档版本声明语句必须放在第一行,而且不需要区分大小写。“<!DOCTYPE html>”是基于HTML5而言的,主要作用是告诉浏览器本网页的文档模式为标准模式。
● <html>标签,在文档头的下方会有一组<html></html>标签成对出现。这个标签对是唯一的,它是最外层的标签,所有的其他标签都应该在这对<html></html>标签中。简单地说,所有的网页内容都需要编写到<html></html>标签中。
● <head>标签,头标签,其标签内放置的是当前网页的一些描述性信息,并且一个网页只能有一对<head></head>标签。
● <body>标签,主体标签,其标签中放置的是网页的具体内容,如文字、图片等。
例如,创建HelloWorld.html文件,编写代码实现在页面中输出“Hello,World!”字符串。
在IDEA中创建HTML文件的步骤如图2-5所示,右键单击该模块,选择“New”,然后选择“HTML File”进行创建。
![](https://epubservercos.yuewen.com/B84C2D/30120995704540106/epubprivate/OEBPS/Images/48021_21_1.jpg?sign=1739892709-woRHnUgQ77DqBqczRs2TOt9EMfw82kz6-0-d16cb5370bca56355f5241fd291826a4)
图2-5 在IDEA中创建HTML文件的步骤
代码如下。
![](https://epubservercos.yuewen.com/B84C2D/30120995704540106/epubprivate/OEBPS/Images/48021_21_2.jpg?sign=1739892709-JGGJhtQ7yRa0Ops8FJZ4xC7tjcNcf3gz-0-2e54ec383bbd95a6a328d4d02f6e4fc7)
使用浏览器运行HelloWorld.html文件如图2-6所示,结果是成功显示“Hello,World!”。
![](https://epubservercos.yuewen.com/B84C2D/30120995704540106/epubprivate/OEBPS/Images/48021_21_3.jpg?sign=1739892709-UN1Ohob3o9EYJ1ekPLRwWZVuyfOkfgS6-0-12b93dbe5a386b93e9b54c18c200ce3e)
图2-6 使用浏览器运行HelloWorld.html文件
注意,HTML 文件的运行方式有两种。一种是针对本地 HTML 文件,直接左键双击该文件,自动跳转浏览器,如图2-7所示。另一种是借助IDEA工具打开HTML文件,如图2-8所示,选择文件右侧的浏览器,单击即可。由于涉及文件路径的问题,我们暂时选择第一种,直接双击HTML文件。
![](https://epubservercos.yuewen.com/B84C2D/30120995704540106/epubprivate/OEBPS/Images/48021_21_4.jpg?sign=1739892709-CJe6wTDJ8QCaejIZVU3y7Bldb6Ao4QQK-0-31a5020390a4b8003c0d4f6320019259)
图2-7 双击本地文件打开HTML文件
![](https://epubservercos.yuewen.com/B84C2D/30120995704540106/epubprivate/OEBPS/Images/48021_22_1.jpg?sign=1739892709-20Xy8ZlOv7lwFIRK4xw3v1R84Yxgfe0q-0-a1036da4dfc192d6acad3bf39b46e6fa)
图2-8 借助IDEA打开HTML文件
另外,HTML文件的扩展名可以是“.html”或“.htm”,这是两种常见的命名约定。“.html”扩展名使用长文件名格式,而“.htm”扩展名是为了与过去的DOS命名格式兼容而存在的。从使用效果上来说,无论是“.html”还是“.htm”扩展名,浏览器都可以正常解析和显示HTML文件,它们没有实质上的区别。