第1章 网页开发基础
学习目标
- 熟悉HTML标签的使用
- 掌握CSS样式的引用方式
- 掌握CSS选择器和常用属性
- 熟悉DOM与BOM的相关知识
- 掌握JavaScript的使用
- 熟悉Bootstrap框架的下载与使用
- 掌握Bootstrap框架的常用组件
在学习Java Web开发之前，读者需要了解一些网页开发的基础知识。网页是我们日常上网时经常接触到的，通过它我们可以查询信息。网页可以看作是承载各种网站应用和信息的容器，网站的所有可视化内容都会通过网页展示给用户。本章将会对HTML技术、CSS技术、JavaScript技术和Bootstrap框架的相关网页开发基础知识进行讲解。
1.1 HTML基础
1.1.1 HTML简介
HTML是英文Hyper Text Markup Language的缩写，中文译为“超文本标记语言”。HTML的主要作用是通过HTML标签对网页中的文本、图片、声音等内容进行描述。HTML网页是一个扩展名为“html”或“htm”的文件，它可以用记事本打开，因此简单的HTML代码可以在记事本中编写。编写完成后，将文件扩展名修改为“html”或“htm”即可生成一个HTML网页。
在实际开发中，项目的静态页面通常由网页制作人员设计和制作，开发人员只需了解页面元素，能够使用和修改页面中的元素，并在项目运行时能够展示出相应的后台数据即可。网页制作人员通常会使用一些专业软件创建HTML页面。由于在本书中HTML技术只作为Java Web学习的辅助技术，这里不介绍如何使用专业工具制作网页，读者只需要了解页面元素的构成，会调试基本的页面效果即可。
学习任何一门语言，首先要掌握它的基本格式，下面通过一个基本的HTML文档讲解HTML内部的构成。HTML文档的内容如文件1-1所示。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>htmlDemo01</title>
</head>
<body>
</body>
</html>
在文件1-1中，带有“<>”符号的元素被称为HTML标签，如<html>、<head>、<body>都是HTML标签。标签名存放在“<>”中，表示某个功能的编码命令，也称为HTML标签或HTML元素，本书统一称作HTML标签。
文件1-1包含了<!DOCTYPE>声明、<html>标签、<head>标签和<body>标签，下面分别对它们进行介绍。
1. <!DOCTYPE>声明
<!DOCTYPE>声明必须位于HTML文档的第一行，且在<html>标签之前。<!DOCTYPE>声明不是HTML标签，是一条指令，它用于向浏览器说明当前文档使用哪种HTML标准规范，例如文件1-1中使用的是HTML 4.01版本。网页在开头处使用<!DOCTYPE>声明为所有的HTML文档指定HTML版本和类型，这样浏览器会将该网页作为有效的HTML文档，并按指定的文档类型进行解析。<!DOCTYPE>声明与浏览器的兼容性相关，<!DOCTYPE>声明被删除后，如何展示HTML页面的权利就交给了浏览器，即页面的显示效果由浏览器决定。
2. <html>标签
<html>标签位于<!DOCTYPE>声明之后，被称为根标签。根标签主要用于告知浏览器该文档是一个HTML文档。其中，<html>标签标志着HTML文档的开始，</html>标签则标志着HTML文档的结束，它们之间包含了文档的头部和主体内容。
3. <head>标签
<head>标签用于定义HTML文档的头部信息，也被称为头部标签。<head>标签紧跟在<html>之后，主要用于封装其他位于文档头部的标签，如<title>、<meta>、<link>和<style>等标签。
4. <body>标签
<body>标签用于定义HTML文档所要显示的内容，也被称为主体标签。浏览器中显示的所有文本、图像、音频和视频等信息都必须位于<body>标签内，才能最终展示给用户。
需要注意的是，一个HTML文档只能含有一对<body></body>标签，且<body>标签必须在<html>标签内，位于<head>标签之后，与<head>标签是并列关系。
了解文件1-1中的HTML标签后，下面以htmlDemo01.html文件为例讲解HTML文件的创建和运行。首先，创建一个名称为chapter01的文件夹，然后在该文件夹中新建一个文本文件（以.txt为扩展名），将文件1-1中的内容写入该文件中并保存，最后将文件的名称更改为htmlDemo01，扩展名改为.html，更改之后该文件即是一个HTML文件，如图1-1所示。
<body>
这是我的第一个HTML页面。
</body>
上述代码添加完成后保存文件，使用浏览器再次打开htmlDemo01.html文件，浏览器的显示结果如图1-2所示。
由图1-2可以看出，网页中打印了“这是我的第一个HTML页面”内容，这正是在<body>标签中所写的内容。读者在编写HTML文件时，可以使用系统自带的记事本，也可以使用Notepad++、UltraEdit或IDEA等工具。当使用工具创建HTML文件时，文件中的基本标签会被自动创建，这些工具还具有代码颜色和代码提示功能，开发者只需根据需求完善功能代码即可。工具的使用有助于提高编码效率，减少出错率。
1.1.2 HTML标签概述
根据标签的组成特点，通常将HTML标签分为3类，分别是单标签、双标签和注释标签。下面对这3类标签进行详细介绍。
1. 单标签
单标签也被称为“空标签”，是指用一个标签就可以完整地描述某个功能。单标签的基本语法格式如下：
<标签名/>
例如，标签<hr/>就是单标签，该标签用于定义一条水平线。需要注意的是，在标签名与“/”之间有一个空格，虽然在显示效果上有无空格都一样，但是按照规范的要求，建议加上空格。
2. 双标签
双标签也称体标签，由开始标签和结束标签组成。双标签的基本语法格式如下：
<标签名>内容</标签名>
例如，文件1-1中的<html>和</html>、<body>和</body>等都属于双标签。
3. 注释标签
在HTML中还有一种特殊的标签——注释标签。如果需要在HTML文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字，就需要使用注释标签。注释标签的基本语法格式如下：
<!-- 注释语句 -->
需要注意的是，注释内容不会显示在浏览器窗口中，但是作为HTML文档内容的一部分，注释标签可以被下载到用户的计算机上，或者用户查看源代码时也可以看到注释标签。
多学一招：为什么要有单标签?
HTML标签的作用原理是选择网页内容进行描述，也就是说需要描述谁就选择谁，所以才会有双标签的出现。双标签有开始标签和结束标签，而单标签本身就可以描述一个功能，不需要选择谁。例如水平线标签<hr/>，按照双标签的语法，它应该写成<hr></hr>，但是水平线标签不需要选择谁，它本身就代表一条水平线，此时写成双标签就显得有些多余，但是又不能没有结束符号，所以单标签的语法格式就是在标签名称后面加一个关闭符，即<标签名/>。
了解了HTML的基础后，我们将在后续章节中继续探讨CSS样式、JavaScript交互和Bootstrap框架的使用。
4759
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
