4.4.2 HTML常用标签
1.标题、段落、换行、水平线及文本格式化
(1)标题
标题是通过h1～h6等标签进行定义的。其中h1定义最大的标题,h6定义最小的标题。
【例4-5】标题标签示例。
显示效果如图4-9所示。
图4-9 HTML中的标题
(2)段落
段落是通过p标签定义的。通过段落标签可以把HTML文档分割为若干段落。
【例4-6】段落标签示例。
显示效果如图4-10所示,浏览器会自动地在段落的前后添加空行。
图4-10 HTML中的段落
(3)br/标签
该标签用来换行,类似回车符。这个标签是一个空的HTML元素,需要在开始标签中关闭,即br/。
【例4-7】换行标签示例。
显示效果如图4-11所示。
图4-11 HTML中的br/标签
(4)hr/标签
这个标签用来画一条水平线。
【例4-8】水平线标签示例。
显示效果如图4-12所示。
图4-12 HTML中的hr/标签
(5)文本格式化标签
HTML可使用很多供格式化输出的元素,如粗体、斜体字、下划线等。表4-5所示是一些常用的文本格式化标签。
表4-5 文本格式化标签
续表
以下的例子显示了各种文本格式化标签的应用。
【例4-9】文本格式化标签示例。
显示效果如图4-13所示。
图4-13 HTML中的文本格式化标签
2.HTML超链接
超链接标签是HTML中使用非常广泛的一种标签,它可以将当前的文档链接到
·Internet中的其他文档;
·同一主机的其他文档;
·同一文档的其他位置。
正是由于它的存在,Web不再局限为储存大量单独文档的网络信息系统,其中的信息组织得像一个Web(原意是蜘蛛网、网),便于页面之间实现信息共享,用户也能从一个页面/位置跳到另一个页面/位置。
实现超链接的标签是a标签,a元素最重要的属性是href属性,其属性值为URL,它指示链接的目标。a元素内容可以是文本,也可以是图像或其他HTML元素等。基本语法结构为
a href=“链接目标的URL“元素内容/a
【例4-10】链接到Internet中的其他文档的示例,其中URL是一个完整的绝对地址。
显示效果如图4-14所示。
可以看到浏览器将a元素的内容作为超链接显示,当点击此链接时,将跳转到http://www.bestbook.com/booklist/index.html这个页面。
图4-14 HTML中的超链接
【例4-11】链接到本机的其他文档的例子,其中URL指向本机的相对地址。
当点击“请查看图书列表”时,链接到本机的booklist.html页面。
下面给出链接到同一文档中的另一个位置的示例。制作此类超链接时,需要利用a标签的name属性或id属性创建书签或锚点。书签不会以任何特殊方式显示,它对用户是不可见的。而a标签的href属性创建了指向该书签或锚点的链接。这种定义方法常常用在较长文档的开始位置创建目录,便于浏览时从一点快速地跳转到另一点。
【例4-12】链接到同一文档中的另一个位置的示例。
a id=“contact”alice@bestbook.com/a这句代码定义了一个锚点(文档中的位置)。a href=“#contact”联系方式/a创建了到“contact”这个锚点的超链接,当点击该链接时会跳转到本页面alice@bestbook.com这个位置。
显示效果如图4-15所示。
图4-15 到本文档其他位置的超链接
3.HTML多媒体
HTML中的多媒体可以由包括图像、音视频等的多个标签呈现。不同浏览器类型和HTML标准版本对不同的多媒体标签支持程度不同。本小节仅对常见的几种标签做简单介绍。
(1)图像标签img
该标签为空标签,它只包含属性,并且没有闭合标签。其语法为
img src=“图像URL“al t=“图像替用文本描述“ width=“宽度“height=“高度“/
常用的属性说明如下。
·src:图像文件的URL,它可以是一个本机资源地址,也可以是一个网络资源地址。例如src=“imgfile/jordan.jpg”或者是src=“http://d2.sina.com.cn/201203/398.jpg”。
·alt:由于网络阻塞或者其他原因图像无法调入时,用来给出图像的替代描述,此时浏览器将显示的是这个替代描述而不是图像。该替代描述也可以为视力障碍的用户使用屏幕阅读器服务。
·width:宽度,可以指定图像的显示宽度,单位是像素。
·height:高度,可以指定图像的显示高度,单位是像素。
值得注意的是,虽然可以通过设置高度和宽度来控制图片的显示尺寸,但图片文件的实际大小不会因此而发生变化。所以,不推荐通过设置图片的宽度和高度来减小图片文件的大小。
HTML页面中并没有图像的内容,图像文件是独立存放在HTML文档外部的。浏览器读到图像标签时按照src属性指示的URL引用图像文件,并在出现图像标签的位置插入图像。
【例4-13】一个完整的图像标签示例。
显示效果如图4-16所示。
图4-16 图像标签示例
这个实例中图像的文件名为bestbook.gif,以100×100的大小显示,如果没有指定大小,则图像以实际大小显示。如果图像不能正常调入,则显示“书店logo”四个字。
(2)播放标签embed
embed标签用于播放一个多媒体对象。embed元素用于播放多媒体对象,包括Flash、音频、视频等。如果用embed元素播放音频或视频,在页面上会显示一个播放器,供用户进行播放控制。该标签是HTML5的标签,其基本语法结构为
embed src=“多媒体文件URL“属性=“属性值“元素内容/embed
除了src属性外,还有以下常用属性。
·width:宽度。
·height:高度。
·loop:是否重复。
·autostart:是否自动开始。
【例4-14】播放标签示例。
显示效果如图4-17所示。
图4-17 embed标签使用示例
(3)音频标签audio
audio标签是HTML5新增的标签,它用于向页面插入声音,如音乐或其他音频流。基本语法结构为
audio src=“音频文件URL“属性=“属性值“文本内容/audio
当音频无法正确加载时,旧版浏览器会显示“文本内容”的信息。常见属性如下。
·src:定义播放音频的URL。
·controls:是否显示播放按钮等控件。
·loop:是否结束后重新播放。
·autoplay:音频就绪后是否自动开始。
标签使用举例如下:
此外,还可以在audio元素中嵌套source元素。该标签是HTML5的新标签,它为媒体元素提供媒体资源,允许指定可替换的视频/音频文件供浏览器根据它对媒体类型或者编解码器的支持进行选择。src属性用于指定媒体文件的URL,type属性用于规定媒体资源的MIME类型。
【例4-15】音频标签示例。
上面的例子在页面中插入了一个mp3文件,在Internet Explorer、Chrome以及Safari中是有效的。为了使这段音频在Firefox和Opera中同样有效,添加了一个ogg类型的文件。如果加载失败,则会显示错误消息。
成功加载的显示效果如图4-18所示。
图4-18 audio标签使用示例
(4)视频标签video
video标签是HTML5的新标签,用于定义视频,如向页面插入电影或视频片段。基本语法结构为
video src=“视频文件URL“属性=“属性值“文本内容/video
当视频无法正确加载时,旧版浏览器会显示“文本内容”的信息。常见属性如下。
·src:定义播放视频的URL。
·controls:是否显示播放按钮等控件。
·loop:是否结束后重新播放。
·autoplay:音频就绪后是否自动开始。
·width:以像素为单位定义播放器宽度。
·height:以像素为单位定义播放器高度。
同样也可以在video元素中嵌套source元素。
【例4-16】视频标签示例。
以上video元素会显示一段嵌入网页的ogg、mp4或webm格式的视频。显示效果如图4-19所示。
图4-19 video标签使用示例
4.HTML表格
表格由table标签来定义,每个表格均有若干行(由tr标签定义),每行被分割为若干单元格(由td标签定义)。常用的表格标签说明如下。
·开始标签table和结束标签/table分别表示一个表格的开始和结束。
·tr标签用于表示一行的开始和结束,其中的tr是“table row(表格行)”的缩写。
·td标签用于表示行中各个单元格(cell)的开始和结束。字母td指表格数据(table data),即数据单元格的内容,可以包含文本、图片、列表、段落、表单、水平线、表格等。
·th标签定义表格的表头。
·caption标签定义表格的标题。
表格中还可以加入一些属性来控制表格的显示、排列、边界等。常见的属性如下。
·width:表格的宽度。
·border:表格边框的宽度。
·cellpadding:单元格边沿与其内容之间的空白。
·cellspacing:单元格之间的空白。
【例4-17】简单的表格示例。
显示效果如图4-20所示。
图4-20 HTML表格示例
5.HTML表单
在Web应用中,经常会需要浏览器搜集用户的输入信息,再一并提交给服务器。常见的情形包括以下几种。
(1)用户登录
需要用户输入用户名、密码,提交给服务器验证是否正确,如果正确,允许进入系统。
(2)用户调查
提供多个选项,让用户选择其中的一项或者多项,提交给服务器,记录用户的选择情况。
(3)信息搜索
用户输入搜索关键字,由浏览器提交给服务器查找相关信息。
为了解决以上的这些问题,常常需要使用HTML中的表单。表单用于收集用户的输入数据,是一个包含表单元素的区域。表单元素是允许用户在表单中输入信息的元素,如文本域、下拉列表、单选框、复选框,等等。
表单使用表单标签form定义,其功能是为用户输入创建HTML表单,并向服务器提交数据。form元素可以定义属性,常用属性说明如下。
·action:以URL形式规定当提交表单时向何处发送表单数据。
·method:规定用于发送表单数据的HTTP方法,常见属性值为GET或POST。
·name:规定表单名称。
当使用GET时,表单数据追加在URL查询部分即问号之后,在页面地址栏中是可见的。如果表单数据不包含敏感信息且数据量较少时,如搜索引擎查询的关键字,可以使用GET方法。当使用POST方法时,表单数据存放在请求报文的实体主体中,在页面地址栏中被提交的数据是不可见的。因此表单数据包含敏感信息且数据量较大时,建议使用POST方法。
表单中常用的表单元素如表4-6所示。
表4-6 常用的表单元素
其中input元素是最常用的,根据不同的type属性值,input元素的输入类型有多种形式,如表4-7所示。
表4-7 input元素的输入类型
除type属性外,input元素还可以拥有其他属性。常用的name属性规定了input元素的名称,value属性规定了该元素的初始值。
【例4-18】一个表单的示例。
上述代码片段定义了名为data的表单,表单元素使用了input、textarea和select几个标签定义了单行/多行文本输入框、下拉菜单、单选框、复选框以及按钮。当用户输入完毕点击确认按钮时,表单数据将以POST方法提交给服务器程序requestSubmit.jsp处理。显示效果如图4-21所示。
图4-21 HTML表单示例
6.HTML框架
使用框架(frame)可以在浏览器窗口同时显示多个页面。每个frame里设定一个页面,其中的页面相互独立。
(1)框架结构标签frameset
frameset定义如何将窗口分割为框架。每个frameset定义了一系列行或列,有cols属性和rows属性。使用cols属性,表示按列分布frame;使用rows属性,表示按行分布frame。rows/columns的值规定了每行或每列占据屏幕的面积。注意frameset/frameset标签不能和body/body标签一起使用。
(2)框架标签frame
用frame这个标签定义了放置在每个框架中的HTML文档。frame里有src属性,src值是页面的路径和文件名。
下面代码的目的是:将frameset分成2列,第1列25%,表示第1列的宽度是窗口宽度的25%;第2列75%,表示第2列的宽度是窗口宽度的75%。第1列中显示a.html,第2列中显示b.html。
【例4-19】一个框架的示例。
显示效果如图4-22所示。
图4-22 HTML框架示例