下载掌阅APP，畅读海量书库
立即打开
HTML是一种简单、通用的标记语言。之所以叫标记语言，是因为HTML通过不同的标签来标记文档的不同部分。用户看到的每个Web页面，都是由HTML通过一系列定义好的标签生成的。例如：
网页头部的HTML标签是<head>和</head>，用于存储网页描述信息，例如网页标题、字符集设置、网页关键词等。其中，<title>和</title>标签用于设置网页的标题，浏览该网页时将显示在浏览器的标题栏上。<meta>标签用于设置网页的类别和语言字符集，字符集可以有ISO-150、UTF-8、GBK、GB2312等。<meta>标签主要用于解决网页乱码问题，网页的中文编码格式为GB2312和GBK，但这两种编码缺乏国际通用性；UTF-8为国际标准编码，一般网页编码使用该编码。
网页主体的标签是<body>和</body>，包含所要描述网页的具体内容。HTML主体body标签的常用属性设置，如表1-1所示。
表1-1 <body>标签的主要属性
上述代码，从简单的文本编辑器，如Windows的记事本，到专业化的编辑工具，如NetBeans，都可以用来编辑HTML文档，编辑好的HTML文档必须按后缀.html或.htm来保存，最后，通过浏览器打开HTML文档，来查看页面效果。
在HTMI文档中，标签是包含在“<”和“>”之间的部分，如<p>就是一个标签。标签一般是成对使用的，如<b>和</b>会同时使用，其中<b>是开始标签，</b>是结束标签。HTML的标签不区分大小写，因此<B>和<b>表示的含义相同。
HTML元素由标签定义，标签所定义的内容就叫“元素”，元素包含在开始标签和结束标之间。
每一种HTML元素，一般都会有一个或数个属性，属性用来设置或表示元素的一些特性、名称或显示效果等。属性放在元素标签中，紧跟标签名称之后，它和标签名称之间有一个或数个空格。元素的每个属性都有一个值，属性值的设定使用“属性”=“值”的格式，可以为属性的值加上引号或不加引号。下面的HTML代码为标签<form>设置了name属性，其值为login，表示这个表单的名称为login。
1.网页头部元素
HTML使用标签<head>定义一个标头，结束标签是</head>。一般在<head>标签中设置文档的全局信息，如HTML文档的标题（title）、搜索引擎关键字（keyword）等。HTML文档的放在头元素里，使用<title>标签定义。
2.标题元素
标题是指HTML文档中内容的标题。标题元素由标签<h1>到<h6>定义。<h1>定义最大的标题，<h6>定义最小的标题。
3.段落元素
HTML中使用标签<p>和</p>定义一个段落。<p>表示段落的开始，</p>段落的结束。设置段落对齐方式：可以使用align属性对段落中的内容（文字、图片和表格等）进行对齐方式的设置，属性值有left（左对齐，默认值）、right（右对齐）、center（居中对齐）。
<br/>标签是换行符：<br/>标签可在Web页面上显示为另起一行。
4.设置文字样式
<font>和</font>标签用于设置文字的字体，被其包含的文字为样式作用区。也可以设置于包含文字的父级标签。主要有face、color、size 3个属性，<font>标签属性如表1-2所示。
表1-2 <font>标签的属性
文字其他修饰标签：
<h1></h1>…<h6></h6>：HTML提供了6种文本标题的标记，标记中h后面的数字越大，标题文本越小。
<b></b>、<i></i>、<u></u>：这3种标记分别是用于对文本进行加粗、斜体、下划线的修饰效果。
<tt></tt>、<cite></cite>、<em></em>、<strong></strong>：分别用于对文本进行打字机风格字体修饰、引用方式字体修饰（斜体）、强调字体（加粗并斜体）、加重文本（加粗）的修饰效果。
<sup></sup>为上标格式标签，多用于数学指数的表示，如某个数的平方或立方。
<sub></sub>为下标格式标签，多用于注释，如表示数学的底数。
<strike></strike>为删除线标签，实现删除效果。
5.列表
HTML的列表分为有序列表<ol></ol>和无序列表<ul></ul>，包含的列表项由<li></li>组成。
（1）无序列表
无序列表是指列表项之间没有先后顺序，列表标签为<ul></ul>，如下所示。
（2）有序列表
有序列表是指列表项之间有先后顺序，序列编号有5种，分别是1、2、3；a、b、c；A、B、C；i、ii、iii、iv；I、II、III、IV，列表标签为<ol></ol>，如下所示。
6.链接元素
HTML文档中指向其他Web资源，如另一个HTML页面、图片等的链接叫作“锚”。在HTML中使用标签<a>和</a>定义一个锚元素，即链接元素，也就是说，在<a>和</a>之间的内容，会成为一个超链接。
href属性：指定新页面的地址。（可使用相对地址，也可使用绝对地址）。
target属性：指定新页面的弹出位置：_self（本身）、_blank（新窗口）、_top（顶层）、_parent（父级框架）（用于框架）。
7.表格元素
使用标签<table>和</table>定义一个表格元素。一个表格由“行”构成，每一行由数据单元构成。表格的“行”用标签<tr>和</tr>定义，数据单元用标签<td>和</td>定义。
（1）控制表格的边框border
基本语法：<table border="边框大小值">。
语法解释：边框大小值由数字表示，如1，2，3，4。数值越大，边框越粗。
（2）控制表格的边框颜色bordercolor
基本语法：<table bordercolor="颜色值">。
语法解释：边框颜色属性值与定义网页的背景色相同。
（3）控制表格的宽度
基本语法：<table width="大小值">。
语法解释：表格宽度值以象素为单位。
（4）控制表格的高度
基本语法：<table height="大小值">。
语法解释：表格宽度值以象素为单位。
（5）控制表格的背景色
基本语法：<table bgcolor="颜色值">。
语法解释：颜色属性值与定义网页的背景色相同。
（6）控制表格的背景图片
基本语法：<table background="背景图片地址">。
语法解释：默认情况下，背景图片会根据表格大小进行平铺显示。
（7）合并多个单元格
为了更灵活地安排表格中的各种数据，表格提供了合并单元格的功能，在布局网页时非常有用。
colspan属性用于水平合并单元格，其值为水平合并单元格的数量。
rowspan属性用于垂直合并单元格，其值为垂直合并单元格的数量。
8.图像元素
<img/>单标签用于在网页中显示图片，通过设置属性来控制图片的显示效果。编码方法如下：
这时图片cau.jpg和HTML文档应在同一目录下。
9.多媒体
1）为网页添加背景音乐。<bgsound/>单标签用于为网页添加背景音乐，编码格式如下：
src：用于指定所链接的音乐文件路径。
loop：指定背景音乐的循环播放次数，如果设置为“-1”，则表示无限循环。
2）添加音乐、动画、视频播放器。<embed ></embed >标签用于为网页添加音乐动画和视频播放器，编码格式如下：
src：用于指定所链接的音乐文件路径。
width：播放器宽度。
heigh:：播放器高度。
autostart：设置是否自动播放，取值true或false。
10.制作滚动效果
<marquee></marquee>标签可以使包括在标签内的内容滚动，内容可以是文字、图片、表格、多媒体等所有内容，编码格式如下：
Web应用程序的开发中，通常使用表单来实现程序与用户输入的交互。用户通过在表单上输入数据，将一些信息传输给网站的程序以进行相应的处理。当用户在Web页面中的表单内填写好信息以后，可以通过单击按钮或链接来实现数据的提交。表单标签主要包括form、input、textarea、select和option等。
1.表单标签form
form标签是一个HTML表单必需的。一对<form>和</form>标签着表单的开始与结束。在form标签中，主要有两个参数：
action：用于指定表单数据的接收方。
method：用于指定表单数据的接收方法。
一个简单的表单实例的HTML代码：
功能描述：表单提交后，其中的数据将被shujuchuli.php程序接收，接收方法为post。
注意：form标签不能嵌套使用。
2.输入标签input与文本框
在input标签中通过type属性的值来区分所表示的表单元素。
input标签的type属性是text，用于表示文本框。
例如：<input name="txtname"type="text"value=""Size="20"maxlength="15">
name：用于表示表单元素的名称，接收程序将使用该名称来获取表单元素的值。
type：input标签的类型，这里text表示文本框。
value：页面打开时文本框中的初始值，这里为空。
size：表示文本框的长度。
maxlength：表示文本框中允许输入的最多字符数。
两种常见的类似于文本框的表单元素—密码框与隐藏框。它们的属性和作用与文本框相同，只是type的值不同。其中密码框type的值为password，隐藏框type的值为hidden。
例如：<input name="txtpwd"type="password"value=""Size="20"maxlength="15">
需要注意的是密码框只是在视觉上隐藏了用户的输入。在提交表单时，程序接收到的数据将仍然是用户的输入，而不是一连串的圆点。
例如：<input name="txtpwd"type="hidden"value=""Size="20"maxlength="15">
隐藏框不用于用户输入，只是用于存储初始信息，或接收来自页面脚本语言，在提交表单时，隐藏框中的数据与文本框一样都将被提交给用于接收数据的程序进行处理。
3.按钮
HTML表单中的按钮分为3种，即提交按钮、重置按钮和普通按钮。这3种按钮都是通过input标签实现的，其区别只在于type的值不同。
（1）提交按钮
用于将表单中的信息提交给相应的用于接收表单数据的页面。表单提交后，页面将跳转到用于接收表单数据的页面。提交按钮是通过type为submit的input标签来实现的。
例如：<input epub:type="submit"value="提交">注：value是按钮上显示的文字。
（2）重置按钮
重置按钮用于使表单中所有元素均恢复到初始状态。重置按钮是通过一个type为reset的input标签来实现的。
例如：<input epub:type="reset"value="重置">
（3）普通按钮
普通按钮一般在数据交互方面没有任何作用，通常用于页面脚本如JavaScript的调用。普通按钮是通过一个type为button的input标签来实现的。
例如：<input type=“button”value=“按钮”>
4.单选框与复选框
单选框和复选框都是通过input标签来实现的。
例如：<input name="radiobutton"type="radio"value="男">
注：name表示单选框的名称。
type的值为radio表示单选框，value是单选框的值。如果选中这个单选框则返回该单选框的值。
例如：<input name=“radiobutton”type=“radio”value=“女”>
一组name属性相同的单选框将构成一个单选框组。在一个单选框组中，只能有一个单选框被选中。
复选框的type为checkbox。
例如：<input type=“checkbox”name=“chk1”value=“游泳”>
5.多行文本域标签textarea
textarea标签用于定义一个文本域。文本域可以看作一个多行的文本框，与文本框实现着同样的功能——从用户浏览器接收输入的字符。
例如：<textarea name=“textareatest”cols=“50”rows=“10”>
注：name属性表示文本域的名称，cols用于表示文本域的列数，rows用于表示文本域的行数。
6.下拉框与列表框标签select
下拉框与列表框是通过select与option标签来实现的。上下拉框与列表框也是提供给用户供选择的信息。
一对<select >和</select>标签用于声明一个下拉框。其中的每一个option都是下拉框中的一个选项，选中后，下拉框的值将为选中的option中value属性所指定的值。在option标签中增加selected用于表示下拉框的初始选择。
接收表单数据主要用两种方法：GET和POST。
GET方法：HTML表单提交数据的默认方法。如果在form标签中不指定method属性，则使用GET方法来提交数据。
使用GET方法将使表单中的数据按照“表单元素名=值”的关联形式，添加到form标签中action属性所指向的URL后面，使用“？”连接，并且会将各个变量使用“&”连接。提交后，页面将跳转到这个新的地址。
在PHP中，使用$_GET[]数组来接收使用GET方法传递的数据。其中方括号内为表单元素的名称，相应的数组的值为用户的输入。例如：$_GET["txtname"]。
例如：<form method="get"action="register.php"></form>
POST方法：
使用POST方法来提交数据，必须在form标签中指定method属性为"POST"。
例如：<form method="post"action="register.php"></form>
使用POST方法会将表单中的数据放在表单的数据体中，并按照表单元素名称和值的对应关系将用户输入的数据传递到form标签中action属性所指向的URL地址。提交后，页面将跳转到这个地址。
在PHP中，使用$_POST[]数组来接收使用POST方法传递的数据。其中方括号内为表单元素的名称，相应的数组的值为用户的输入。例如，接收一个来自名为txtname的文本框的数据的PHP代码为：$_POST["txtname"]。
由于使用GET方法提交会将用户输入的数据全部显示在地址栏上，其他用户可以通过查询浏览器的历史浏览记录得到输入的数据。使用POST方法则不会将用户的输入保存在浏览器的历史中。因此，使用POST方法传输数据比GET更安全、可靠。