1.4.4 HTML基础知识：HTML的基本元素
元素是组成HTML文档的关键，本节介绍HTML常用的几种基本元素。
1.标头元素
HTML使用标签＜head＞定义一个标头，结束标签是＜/head＞。一般在＜head＞标签中设置文档的全局信息，如HTML文档的标题（title）、搜索引擎关键字（keyword）等。HTML文档的标题放在头元素里，使用＜title＞标签定义。下面的代码1-2是一个只有文档标题的HTML文档。
代码1-2 只有文档标题的HTML文档1-2.html
01 ＜html＞
02 ＜head＞＜title＞HTML文档示例＜/title＞＜/head＞
03 ＜body＞
04 ＜/body＞
05 ＜/html＞
【代码解析】用浏览器访问1-2.html，将看到一个空白的HTML页面，但在浏览器窗口上，可以看到HTML的标题。显示效果如图1-5所示。
2.标题元素
这里的标题是指HTML文档中内容的标题。标题元素由标签＜h1＞到＜h6＞定义。＜h1＞定义最大的标题，＜h6＞定义最小的标题。下面的示例代码1-3显示了所有的HTML标题，显示效果如图1-6所示。
代码1-3 HTML标题元素1-3.html
01 ＜h1＞标题1＜/h1＞
02 ＜h2＞标题2＜/h2＞
03 ＜h3＞标题3＜/h3＞
04 ＜h4＞标题4＜/h4＞
05 ＜h5＞标题5＜/h5＞
06 ＜h6＞标题6＜/h6＞
【代码解析】上述代码一次输出从大到小的标题。
3.段落元素
HTML中使用标签＜p＞和定义一个段落。代码1-4显示了两个段落，显示效果如图1-7所示。＜/p＞
代码1-4 HTML的段落元素1-4.html
＜p＞这段文字构成了一个段落元素＜/p＞
＜p＞这段文字构成了另一个段落元素＜/p＞
4.字形元素
使用标签＜b＞和＜/b＞定义一个粗体字形元素，如代码1-5中使用＜b＞Some Text＜/b＞显示一个粗体字体。
代码1-5 粗体字形标签＜b＞和＜/b＞1-5.html
01 ＜html＞
02 ＜head＞＜title＞HTML文档示例＜/title＞＜/head＞
03 ＜body＞
04 ＜b＞Some Text＜/b＞
05 ＜/body＞
06 ＜/html＞
【代码解析】第4行使用了粗体字标签，这个元素要放在＜body＞标签内。显示效果如图1-8所示。
使用标签＜u＞和＜/u＞定义一个下划线字形元素，如代码1-6中使用＜u＞Some Text＜/u＞显示一个带下划线的字体。
代码1-6 下划线字形标签＜u＞和＜/u＞1-6.html
01 ＜html＞
02 ＜head＞＜title＞HTML文档示例＜/title＞＜/head＞
03 ＜body＞
04 ＜u＞Some Text＜/u＞
05 ＜/body＞
06 ＜/html＞
【代码解析】第4行应用了下划线标签，显示效果如图1-9所示。
使用标签＜i＞和＜/i＞定义一个斜体字形元素，如代码1-7中使用＜i＞Some Text＜/i＞显示一个斜体字形。
代码1-7 斜体字形标签＜i＞和＜/i＞1-7.html
01 ＜html＞
02 ＜head＞＜title＞HTML文档示例＜/title＞＜/head＞
03 ＜body＞
04 ＜i＞Some Text＜/i＞
05 ＜/body＞
06 ＜/html＞
【代码解析】第4行应用了斜体字标签，显示效果如图1-10所示。
5.链接元素
HTML文档中指向其他Web资源，如另一个HTML页面、图片等的链接叫做“锚”。在HTML中使用标签＜a＞和＜/a＞定义一个锚元素，即链接元素，也就是说，在＜a＞和＜/a＞之间的内容，会成为一个超链接。
6.图像元素
使用标签＜img＞定义一个图像元素，在标签中使用属性src来指向一个图像资源，像这样＜img src="url"＞，其中url是指向资源所在位置。这个位置可以是一个URL，也可以是一个相对地址，如＜img src="one.gif"＞，这时，图片one.gif和HTML文档应在同一目录下。
7.表格元素
使用标签＜table＞和＜/table＞定义一个表格元素。一个表格由“行”构成，每一行由数据单元构成。表格的“行”用标签＜tr＞和＜/tr＞定义，数据单元用标签＜td＞和＜/td＞定义。代码1-8所演示的HTML文档显示了一个完整的表格，显示效果如图1-11所示。
代码1-8 HTML的表格元素1-8.html
01 ＜table border="1"＞
02 ＜tr＞
03 ＜td＞第一行数据单元1＜/td＞
04 ＜td＞第一行数据单元2＜/td＞
05 ＜/tr＞
06 ＜tr＞
07 ＜td＞第二行数据单元1＜/td＞
08 ＜td＞第二行数据单元2＜/td＞
09 ＜/tr＞
10 ＜/table＞
【代码解析】第2、5、6、9行是控制表格的行，第3、4、7、8行是控制代码的列。
8.列表元素
说明 HTML的列表分为无序列表和有序列表。
无序列表用标签＜ul＞和＜/ul＞定义，每一个列表项用标签＜li＞和＜/li＞定义。代码1-9所演示的HTML文档显示了一个无序列表，它有3个列表项。显示效果如图1-12所示。
代码1-9 HTML的无序列表元素1-9.html
01 ＜ul＞
02 ＜li＞PHP＜/li＞
03 ＜li＞Python＜/li＞
04 ＜li＞Perl＜/li＞
05 ＜/ul＞
【代码解析】＜li＞和＜/li＞标签用来定义每一个列表，内容的外围用＜ul＞和＜/ul＞表示这是一个无序列表。
有序列表用标签＜ol＞和＜/ol＞定义，每一个列表项用标签＜li＞和＜/li＞定义。代码1-10所演示的HTML文档显示了一个有序列表，它有3个列表项，显示效果如图1-13所示。
代码1-10 HTML的有序列表元素1-10.html
01 ＜ol＞
02 ＜li＞C++＜/li＞
03 ＜li＞Java＜/li＞
04 ＜li＞Pascal＜/li＞
05 ＜/ol＞
【代码解析】与无序列表＜ul＞＜/ul＞相对的就是有序列表＜ol＞＜/ol＞。代码第1～5行就是一个有序列表。
9.表单元素
HTML表单是一个包含表单元素的区域，表单元素一般会作为数据提交给后台服务器做处理。表单域用标签＜form＞和＜/form＞定义。表单元素是那些定义在表单域里，可以输入信息的元素，如文本框、单选按钮、下拉列表等。
最常用的表单标签是＜input＞，标签的类型由标签属性type决定，不同的标签类型，显示出不同的表单元素。代码1-11所演示的HTML文档显示一个文本输入框和一个密码输入框，显示效果如图1-14所示。
代码1-11 HTML表单元素之文本输入框1-11.html
01 ＜form＞
02 用户名：＜input type="text"name="user_name"＞
03 ＜br/＞
04 密码：＜input type="password"name="pwd"＞
05 ＜/form＞
【代码解析】用＜input＞的属性“type="text"”来定义普通文本输入框，属性“type="password"”来定义密码输入框。
代码1-12所演示的HTML文档显示一组单选按钮，显示效果如图1-15所示。
代码1-12 HTML表单元素之单选按钮1-12.html
01 ＜form＞
02 男＜input type="radio"name="sex"value="male"＞
03 女＜input type="radio"name="sex"value="female"＞
04 ＜/form＞
【代码解析】用＜input＞的属性“type="radio"”来定义单选按钮。
注意 要在多个单选按钮中实现单选效果，那么这几个单选按钮name属性的值必须相同，即定义为同一组单选按钮。
代码1-13所演示的HTML文档显示一组复选框，显示效果如图1-16所示。
代码1-13 HTML表单元素之复选框1-13.html
01 ＜form＞
02 我喜欢PHP＜input type="checkbox"name="script"value="PHP"＞
03 我喜欢JSP＜input type="checkbox"name="script"value="JSP"＞
04 我喜欢ASP＜input type="checkbox"name="script"value="ASP"＞
05 ＜/form＞
【代码解析】用＜input＞的属性“type="checkbox"”定义复选框。
表单元素的值一般都会被提交到后台服务器的某个程序做处理。这个提交的动作，由表单域的提交按钮完成。代码1-14所演示的HTML文档显示一个表单域，其中包含了一个提交按钮，显示效果如图1-17所示。
代码1-14 HTML表单元素之提交按钮1-14.html
01 ＜form name="form_1"action="afile.php"method="post"＞
02 用户名：＜input type="text"name="user_name"＞＜br/＞
03 ＜input type="submit"value="提交"＞
04 ＜/form＞
【代码解析】用＜input＞的属性“type="submit"”来定义一个提交按钮。