《电子商务实用基础 教学课件 ppt 作者 闵敏 第1章 HTML语言基础》由会员分享，可在线阅读，更多相关《电子商务实用基础 教学课件 ppt 作者 闵敏 第1章 HTML语言基础（53页珍藏版）》请在金锄头文库上搜索。
1、第1章 HTML语言基础,电子商务设计实务 第二版,主要内容,1.什么是HTML语言,HTML是Hypertext Markup Language的缩写，意思是超文本标识语言，用来描述WWW上超文本内容。它主要是在文本文件的基础上，加上一系列特殊标识符形成所谓的超文本文件。当用户使用浏览器访问服务器上的超文本文件时，浏览器就把获取的文件按照HTML语法解释并显示在屏幕上，而HTML的标记符本身并不显示。 HTML文件可以用两种方式来创建：用文档工具编写。由于HTML文件是一种纯文本文件，故可用任何文本编辑器来编辑它。用专用的HTML编辑器编写。,一、什么是HTML语言,一、什么是HTML语言,
2、对HTML文件扩展名的默认规则为：在DOS操作系统下，其扩展名为.htm；在UNIX操作系统下，扩展名常常为.html。其实不管在那个系统下，以上两种扩展名均可使用。 我们来看一个最简单的HTML文件。（例1-1-1）,一、什么是HTML语言,2. HTML的工作原理,浏览器发送请求,服务器响应请求,图1-1 web服务器工作原理,一、什么是HTML语言,统一资源定位器URL：Internet是一个相当庞大的网络系统，当访问Internet上的资源时，必须有一个标识符来唯一标识这些资源，这个标识符就是Internet的统一资源定位器（Uniform Resource Locator，URL），
3、也就是人们常说的网址。每个URL都包括一些特定的部分以标识网页所在的具体位置。URL的格式为：,协议/服务器：端口/路径/文件,二、HTML基本结构,1.HTML 的结构框架, 表示HTML文件的开始 表示HTML文件的结束,二、HTML基本结构,HTML标记； HEAD标记； TITLE 标记； BODY标记； META标记。 下面给出几个常见的Meta用法： 自动转到其它网站（例1-2-1） 定时刷新网页（例1-2-2 ） 实现网页过渡效果 HTML中的注释,二、HTML基本结构,2. HTML标记的组成,内容,HTML标记的基本格式为：,三、HTML中常用标记,1.超级链接,链接显示文字
4、,1）超级链接标记 超级链接标记的基本格式如下：,三、HTML中常用标记,1.超级链接,书签显示内容,2）用书签链接到网页内部 建立书签的格式为：,链接到书签的格式为：,超级链接文字,链接到其它网站的某个网页内部的某个书签的格式为：,超级链接文字,三、HTML中常用标记,1.超级链接,浏览北大图书馆,3）链接到其它网站,三、HTML中常用标记,1.超级链接,链接显示,4）链接到某个文件 链接到本地磁盘文件的URL格式为：,链接到远程服务器资源的URL格式为：,链接显示,三、HTML中常用标记,1.超级链接,链接提示,5）链接到电子邮件 格式如下：,三、HTML中常用标记,1.超级链接,匿名FT
5、P站点,6）链接到FTP服务器 格式如下：,三、HTML中常用标记,2.列表, 列表项1 列表项2 ,1）无序列表 格式如下：,一个无序列表的例子（例1-3-1 ）,三、HTML中常用标记,2.列表, 列表项1 列表项2 列表项3 ,2）有序列表 格式如下：,一个有序列表的例子（例1-3-2 ）,三、HTML中常用标记,2.列表,3）组合列表：将一个列表嵌入另一个列表中，作为另一个列表的一部分，称之为组合列表（亦称列表嵌套）。组合列表有四种嵌套方式：有序列表嵌入有序列表、有序列表嵌入无序列表、无序列表嵌入有序列表、无序列表嵌入无序列表。HTML允许用层层嵌套的方式来实现多层列表，而且层数不受限
6、制。,一个组合列表的例子（例1-3-3 ）,三、HTML中常用标记,3.段落分隔,1）段落标记 段落标记用法是在段落的开始处写上标记，在段落的结束处写上。其实标记从设置到下一个标记都认为是同一个段落。所以只需要指定，而无须设置。,一个带ALIGN属性的标记的例子。（例1-3-4 ）,三、HTML中常用标记,3.段落分隔,2）硬换行 标记也能实现换行功能。除了和标记以外，与段落相关的常用标记还有。使标记中的内容居中对齐。具体公式如下用法：, .要居中对齐的内容 ,三、HTML中常用标记,4.字体,1）字体设置 字体设置使用的标记是标记。标记的格式如下：,下面是一个字体设置的例子。（例1-3-5
7、）,三、HTML中常用标记,4.字体,2）文字大小设置 用于设置标题文字大小。其方法为：, (n的值为16，n值愈大，字愈小),标记或标记，相对于当前字号放大或缩小，其方法为：, (n的值为17，默认值为3，n值愈大，字愈小),对文档中的某些文本字号，可使用带SIZE属性的标记，格式为：,三、HTML中常用标记, (n的值为17，其默认值为3。),下面的例子是不同字号的设置。（例1-3-6 ）,三、HTML中常用标记,4.字体,3）文字颜色设置 为整个网页文本指定颜色 。其方法为：,， 或,为指定文本设置颜色，其方法为：,文字部分， 或文字部分,为文档所有文本预定义缺省颜色，其方法为：,三、H
8、TML中常用标记,4.字体,4）HTML中的颜色,三、HTML中常用标记,4.字体,5）使用特殊符号,三、HTML中常用标记,5.表格,其格式为：, 表格标题 这里是第一行的开始 单元格 这里是一个单元格，内容放在即可 单元格 这里是另一行的开始 单元格 这里是另一行的开始 单元格 ,三、HTML中常用标记,5.表格,1)表格标题，其格式为：, 表格标题 ,2)创建列，其格式为：, （其中标记可省略）,3)创建列，其格式为：,下面是一个表格的实例。（例1-3-7 ）,三、HTML中常用标记,5.表格,4)表格边框设置 包括宽度设置、颜色设置、外边框类型设置、内边框类型设置等。 边框线宽度设置，
9、格式为 ； 边框的颜色设置，可用BorderColor、BorderColorDark和BorderColorLight三个属性； 表格外边框设置，其基本用法为：； 表格内边框设置，其基本用法为：。,三、HTML中常用标记,5.表格,5)对齐单元格内容 单元格数据对齐属性有ALIGN(设置水平方向对齐)和VALIGN(设置垂直方向对齐)，ALIGN和VALIGN默认分别为LEFT和 MIDDLE 。在或中，ALIGN可水平地齐某一单元格中的内容。其基本用法如下：,或,下面是单元格数据对齐方式的实例 。（例1-3-8 ）,三、HTML中常用标记,5.表格,6)表格大小设置 表格的大小可以由系统按
10、其默认值设置，在此情况下，表格的尺寸会自动根据单元格中内容的多少进行调整。也可以使用表格的HEIGHT和WIDTH属性自定义表格大小，格式为：,下面是一个具体的例子。（例1-3-9 ）,三、HTML中常用标记,5.表格,7)表格背景颜色 表格的背景色可以用标记的BGCOLOR属性来设定。其方法如下：,或,三、HTML中常用标记,5.表格,8)表格边界和间隔 表格的格线形成了表格的边界，格与格之间的间隔宽度用标记的CELLSPACING属性来定义。方法如下：,三、HTML中常用标记,5.表格,9)跨行与跨列单元格的创建 跨行单元格的创建，用或的ROWSPAN属性。格式为：,或,跨列单元格的创建，
11、用或的COLSPAN属性。格式为：,或,下面是一个跨行与跨列单元格的建立例子。（例1-3-10）,三、HTML中常用标记,5.表格,10)嵌套表格 嵌套表格的基本形式如下：, 被嵌套的表格 被嵌套的表格 ,下面是一个嵌套表格的例子 。（例1-3-11 ）,三、HTML中常用标记,5.表格,11)创建三维表格 其用法为：, 或 ,三、HTML中常用标记,5.表格,12)添加表格背景图像 表格的背景除了可以设定成一定的颜色以外，还可以设置为背景图像。其用法为：,这里的Image_file是背景图片的文件名。只要是HTML文件支持的格式均可使用，不过要写上文件名的全称，当此图片文件不在当前目录下时，
12、必须指明路径。,三、HTML中常用标记,6.框架,1)创建框架 框架是用标记和标记来配合实现的。其用法为：, ,下面实例中，将窗口分割成左右两区域。（例1-3-12 ）,三、HTML中常用标记,6.框架,2)框架初始页 框架初始页，即框架出现时，其中显示的内容。由位于与间的标记的SRC属性设定。其用法为：,三、HTML中常用标记,6.框架,3)框架的目标页 当框架单元中含有高亮度链接时，用户单击此链接之后，被链接的内容显示在那个框架单元中，可以用TARGET属性设定。其用法为：,超链接文字,三、HTML中常用标记,6.框架,4)框架边框粗细 框架的框线宽度属性，BORDER、FRAMESPAC
13、ING属性设置，格式如下 ：,或,框架的框线颜色属性，BORDERCOLOR属性，格式如下：,打开、关闭框架边框属性，FRAMEBORDER属性，格式如下：,框架的大小，HEIGHT属性和WIDTH属性设定，格式如下：,三、HTML中常用标记,7.表单,1)表单的基本结构, ,三、HTML中常用标记,7.表单,2) ACTION、METHOD和ENCTYPE属性 ACTION属性给出服务器上处理该表单的程序的URL地址； METHOD属性用于指定向服务器发送表单所使用的方法。有POST和GET两种； ENCTYPE属性用于指定表单数据传送时的编码方式。只有在使用POST方法时，此属性才适用 。
14、,三、HTML中常用标记,7.表单,3) 表格的元素 标记，基本语法为：,三、HTML中常用标记,7.表单,3) 表格的元素 单行文本域，单行文本域是表单界面中最常使用的一种输入项，它允许输入单行的文字或密码。基本语法：,下面是单行文本域一个实例。（例1-3-14）,三、HTML中常用标记,7.表单,3) 表格的元素 多行文本域，表单不仅能够输入单行文本，同时也支持输入多行文本。这项功能是由多行文本域标记实现的。基本语法：,三、HTML中常用标记,7.表单,3) 表格的元素 复选框 ，复选框的形状为方格，选准时方格中会有一勾（“”）或叉（“”），它是一个反复开关。基本语法为：,注意：默认所有的
15、复选框采用横向排列，如果需要纵向排列，只需在每个选项名称之后加上标记即可。,三、HTML中常用标记,7.表单,3) 表格的元素 单选框，单选框也称单选按钮或波段按钮。单选框的形状为圆圈，选中时圆圈中有一黑点。与复选框不同，它为用户提供的是多选一的功能。在表单中增加单选按钮的方法与增加复选按钮的方法特别相似，只需将标记中的TYPE属性值设置为“radio”，其余规定与复选框相似。,三、HTML中常用标记,7.表单,3) 表格的元素 一般按钮，主要是配合VBScript等客户端的Scrip语言，可进行表单栏位的计算或处理。基本语法：,三、HTML中常用标记,7.表单,3) 表格的元素 图片按钮，将
16、表单数据提交给Web服务器，可以用两种方法实现：一是用前面已讲过的提交按钮SUBMIT；另一种是采用图片按钮，两种方法的提交效果是等价的。基本语法是：,三、HTML中常用标记,7.表单,3) 表格的元素 隐藏式输入项，当表单中必须包含一些数据，但又不希望浏览者看到这些数据，此时可以采用隐藏式输入项，由设计者用VALUE属性直接将值确定好，然后随同浏览者填好的其它数据一同提交给Web服务器进行处理。利用隐藏式输入项可以实现表单间的数据传递。基本语法格式为：,三、HTML中常用标记,7.表单,3) 表格的元素 文件选择对话框，它具有从浏览器中选择文件的功能。主要用于浏览客户端的文件列表，选择好客户端的文件列表后，按“提交”按钮，则选中的文件被传送到Web服务器上。基本语法：,,Thank You !,
