电子商务网站建设之HTML语言高级19233

Click to edit Master title style,Click to edit Master text styles,Second level,Third level,Fourth level,Fifth level,*,*,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,*,*,电子商务网站建设,第4章 HTML语言高级,4.1 创建超链接,4.2 创建表格,4.3 创建表单,4.4 帧标签,4.5 分区标签,10/1/2024,1,超链接标签,超链接标记的格式如下：,超链接文本或图像,超链接标记除了必备的href属性外，还有一个属性target，它指明目标页面显示的窗口,target的默认值是本页面所在的浏览器窗口,target=_blank,表示目标页面显示于一个新的浏览器窗口中,target=_top,表示目标页面显示于整个浏览器窗口中，而不是显示在帧所在窗口中,target=帧名,表示目标页面显示于指定帧所在的窗口中,10/1/2024,2,10/1/2024,3,超链接标签,根据目标页面的位置不同，href属性的URL信息构成分为以下3种情况：,目标页面位于另外的主机或采用非http协议，此时URL采用绝对路径，即使用如下格式：,协议名:/主机名/目录信息,若目标页面位于本主机，此时URL采用相对路径：,超链接文本,或超链接文本,超链接的目标不仅可以指向HTML文件的头部，也可以指向某个文件的特定位置（称为“锚点”，anchor），其格式如下：,文本或图像等页面元素,10/1/2024,4,10/1/2024,5,创建表格,表格标签,标题内容,表格内标题,表格内容,表格内容,10/1/2024,6,表格标签,创建表格,创建表格中的一行，一般包括一个或多个列元素,创建表格中的一列,标签，定义表格的标题,可以是表格中的第一个标签，作为表格内的标题行,10/1/2024,7,标签的属性,10/1/2024,8,标签的属性,10/1/2024,9,标签的属性,10/1/2024,10,例3.10 若要在网页上显示如下效果的表格，考虑该如何设计HTML文件代码,查看源代码,10/1/2024,11,利用表格进行网页布局,表格标签除了绘制文本表格外，还经常用来进行网页布局。,表格是最常用的页面元素，可以用来固定文本或图像的显示位置。,通常我们使用、标记及其属性对网页内容进行分块显示。,在Internet上浏览的许多页面都大量使用了表格，很多较复杂的页面布局就是利用表格来完成的。,10/1/2024,12,例3.12 使用表格标签设计如下页面结构。,查看源代码,10/1/2024,13,例3.13 试用HTML表格结构设计如下网站截图的右下角目录部分。,查看源代码,10/1/2024,14,利用表格进行网页布局,10/1/2024,15,什么是表单？,10/1/2024,16,什么是表单？,表单是实现图形用户界面的基本元素，它包括按钮、文本框、单选框、复选框等，它们是HTML实现交互功能的主要接口。用户通过表单向服务器提交数据。表单的使用包括两个部分：一部分是,用户界面，提供用户输入数据的元件,；另一部分是处理程序，可以是客户端程序，在浏览器中执行；也可以是服务器处理程序，处理用户提交的数据，返回处理结果。,10/1/2024,17,表单的定义,定义表单的语法如下：,textarea定义,select定义,标签对用来创建一个表单，即定义表单的开始和结束位置，具有action、method、target、title、enctype等属性。,10/1/2024,18,表单的输入域,不同类型的输入域为用户提供灵活多样的数据输入方式。表单的输入域有如下3大类：,以标记定义的多种输入域，包括text，radio，checkbox，password，hidden，button，submit和reset等。,以标记定义的文本域。,以标记和定义的下拉列表框。,10/1/2024,19,常用的表单输入域,10/1/2024,20,表单输入标记,标记在表单中使用频繁，大部分表单内容需要用到此标记。其语法如下：,其中value：用于设定表单默认值；,checked：表示选择框中，此项被默认选中；maxlength：表示在输入单行文本的时候，最大允许字符数；,size：用于设定表单框的尺寸；,onclick：表示在按下按钮时调用指定的子程序；,onselect：表示当前项被选择时调用指定的子程序。,10/1/2024,21,标签举例,姓名：,密码：,性别：男 女,兴趣爱好：音乐,运动,看书,10/1/2024,22,例3.14 一个简单的标签实例,标签举例,姓名：,密码：,性别：男 女,兴趣爱好：音乐,运动,看书,上网,旅游,10/1/2024,23,标签,用标记可以在表单中插入一个下拉菜单，其语法如下：,表项内容 ,表项内容 ,其中name：设定下拉菜单的名称；size：设定菜单框的高度，也就是一次显示几个菜单项；multiple：是可选项，若定义该属性，则下拉列表中的内容允许进行多选。,10/1/2024,24,标签举例,例3.15 下拉菜单举例,标签举例,请选择你所在的年级：,大一,大二,大三,大四,10/1/2024,25,将下面两个例子分别与例3.15进行比较,例3.16,标签举例,请选择日期：,星期日,星期一,星期二,星期三,星期四,星期五,星期六,例3.17,标签举例,请选择你喜欢的球类运动：,足球,篮球,排球,乒乓球,羽毛球,台球,网球,10/1/2024,26,标签,标签中包含了多个标签，标签有两个常用的属性：value和selected,value用来指定控制操作的初始值，缺省时初值为option的内容,selected设定时表明该项内容被预置,10/1/2024,27,标签举例,例3.18 一段简单的包含下拉菜单的页面代码，注意标签的属性,请选择你最喜欢的颜色：,-放弃选择-,红色,黄色,蓝色,绿色,紫色,黑色,白色,10/1/2024,28,标签,在表单中创建一个能够输入多行文本的文本框,属性：cols(列数)，rows(行数)，单位是字符数,标签语法如下：,此处显示在文本框外的提示信息,此处显示在文本框里的预留信息,10/1/2024,29,例3.19 一段简单的包含多行文本框的页面代码,您的意见对我很重要：,请将您的建议输入到此区域,10/1/2024,30,帧标签,框架(Frame)又常被称为帧，利用框架可以将浏览器显示窗口分割成多个相互独立的区域，每个区域可以显示独立的HTML页面。,以下是使用框架的一个简例,查看代码,10/1/2024,31,帧标签,框架的定义较为特殊，首先确定如何划分窗口，然后建立描述窗口分割的主文件，再为每个框架建立相应的HTML文件。,主文件的定义方法：,头部标记,.,字符串,10/1/2024,32,标签的属性,10/1/2024,33,标签的属性,10/1/2024,34,例3.21 设计如图所示的框架页面，利用帧标签将页面分成3个子窗口。,查看代码,10/1/2024,35,分区标签,区域标签，用于将若干相邻的HTML元素组合成一个区域块，对的操作就应用于这个区域内的所有HTML标签。,例如要将某段落（文本或图片）的内容全部居中显示，只需用设置组合，添加一个align=center即可，无需逐个设置。在各段落中起始段落前设置，结束段落后设置即可。,分区标签在网页设计中的应用非常频繁，留意网页中部分块结构的统一对齐显示，尤其是整个网页内容的居中显示。,10/1/2024,36,分区标签举例,例3.22 一个简单的分区标签的应用,分区标签效果演示,段落1,段落2,段落3,其中标签中的代码等价于:,段落1,段落2,段落3,10/1/2024,37,