下载掌阅APP，畅读海量书库
立即打开
在互联网高速发展的今天，网站已经成为一个展示与宣传自我的通信工具，公司或个人可以通过网站介绍公司的服务与产品或介绍自己。这些都离不开网站中的网页，而网页的内容主要是通过文字、超链接和图像等来体现的。
HTML文档包含了HTML标签及文本内容，HTML文档也叫作Web页面。HTML可以使用文本编辑器（例如，Windows系统中的记事本程序）打开它，查看其中的HTML源代码，也可以在使用浏览器打开网页时，右击，在弹出的快捷菜单中选择“查看网页源代码”菜单命令，查看网页的HTML代码，如图3-11所示。
图3-11 查看网页源代码
HTML文档最基本的结构主要包括文档类型说明、HTML文档开始标记、元信息、主体标记和页面注释标记等，下面是一段基于HTML 5设计准则的代码，可以看出在文件的开始标记<html>前添加了文档类型说明。
<!DOCTYPE html>
<html>
<head>
<title>页面标题</title>
</head>
<body>
<h1>这是一个标题</h1>
<p>这是一个段落。</p>
<p>这是另外一个段落。</p>
</body>
</html>
文字和图像是网页中最主要、最常用的元素。在HTML中用于设置文本样式的标签有很多种，如标题标签<h1>、段落标签<p>等，还包括用户设置文本样式的font-family属性。
下面给出一个实例，通过设置网页中的文字样式，创意显示老码识途课堂，打开记事本，在其中输入如下代码。
<!DOCTYPE html>
<html>
<head>
<title>创意显示老码识途课堂</title>
</head>
<body>
<p>****************************************老
码识途课堂******************************</p>
<p> 老码识途课
堂专注编程开发和图书出版18年，致力打造零基础在线
IT技术学习</p>
<p>平台。通过全程技能跟踪，实现1对1高效技
能培训。目前，老码识途课堂主要为零</p>
<p>基础读者提供优质的课程，课程内容新颖，模
拟现实开发中的项目流程，快速积累</p>
<p>行业开发经验，为读者提供一站式服务，培养
学生的编程思想。</p>
<p>******************************微信公众
号：老码识途课堂**************************</p>
</html>
运行效果如图3-12所示。
图3-12 运行效果——网页中的文字
图像可以美化网页，插入图像使用单标签<img>。img标签的属性及描述如表3-1所示。
表3-1 img标签的属性及描述
src属性用于指定图片源文件的路径，它是img标签必不可少的属性。语法格式如下。
<img src="图片路径">
图片的路径可以是绝对路径，也可以是相对路径。下面的实例是在网页中插入图片，通过图像标签，设计一个象棋游戏的来源介绍。打开记事本，在其中输入如下代码：
<!DOCTYPE html>
<html >
<head>
<title>插入图片</title>
</head>
<body>
<h2 align="center">象棋的来源</h2>
<p>    中国象棋是起源
于中国的一种棋戏，象棋的“象”是一个人，相传象是
舜的弟弟，他喜欢打打杀杀，他发明了一种用来模拟战
争的游戏，因为是他发明的，很自然也把这种游戏叫作
“象棋”。到了秦朝末年西汉开国，韩信把象棋进行一
番大改，有了楚河汉界，有了王不见王，名字还叫作
“象棋”。然后经过后世的不断修正，一直到宋朝，把
红棋的“卒”改为“兵”，黑棋的“仕”改为“士”，
“相”改为“象”，象棋的样子基本完善。棋盘里的河
界，又名“楚河汉界”。</p>
<!--插入象棋的游戏图片，并且设置水平间距为
200像素-->
<img src="pic/xiangqi.gif"
hspace="200">
</body>
</html>
在网页中插入象棋图像，其运行效果如图3-13所示。
图3-13 在网页中插入象棋图像
除了可以在本地插入图片以外，还可以插入网络资源上的图片，例如，插入百度图库中的图片，插入代码如下：
<img src="http://www.baidu.com/img/
图片名称.gif" />
使用表格显示数据，可以更直观和清晰。在HTML文档中，表格主要用于显示数据，在HTML 5中，用于创建表格的标记如下。
（1）<table>：用于标识一个表格对象的开始，</table>标记标识一个表格对象的结束。一个表格中，只允许出现一对<table>标记。HTML 5中不再支持它的任何属性。
（2）<tr>：用于标识表格一行的开始，</tr>标记用于标识表格一行的结束。表格内有多少对<tr></tr>标记，就表示表格中有多少行。HTML 5中不再支持它的任何属性。
（3）<td>：用于标识表格某行中的一个单元格的开始，</td>标记用于标识表格某行中一个单元格的结束。<td></td>标记应书写在<tr></tr>标记内，一对<tr></tr>标记内有多少对<td></td>标记，就表示该行有多少个单元格。HTML 5中，<td>仅有colspan和rowspan两个属性。
最基本的表格，必须包含一对<table></table>标记、一对或几对<tr></tr>标记及一对或几对<td></td>标记。一对<table></table>标记定义一个表格，一对<tr></tr>标记定义一行，一对<td></td>标记定义一个单元格。
下面通过表格标签，编写一个简单的公司销售表。打开记事本，在其中输入如下代码：
公司销售表运行效果如图3-14所示。
图3-14 公司销售表
表单主要用于收集网页上浏览者的相关信息。其标签为<form></form>。表单的基本语法格式如下：
<form action="url" method="get|post"
enctype="mime"></form>
其中，action=“url”指定处理提交表单的格式，它可以是一个URL地址或一个电子邮件地址。method=“get”或“post”指明提交表单的HTTP方法。enctype=“mime”指明用来把表单提交给服务器时的互联网媒体形式。
表单是一个能够包含表单元素的区域，通过添加不同的表单元素，将显示不同的效果。下面创建一个网站会员登录页面，打开记事本，在其中输入如下代码：
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form>
网站会员登录
<br/>
用户名称
<input type="text" name="user">
<br/>
用户密码
<input type="password"
name="password"><br/>
<input type="submit" value="登录">
</form>
</body>
</html>
运行效果如图3-15所示，可以看到用户登录信息页面。
图3-15 用户登录窗口