电子商务第3章.ppt

《电子商务第3章.ppt》由会员分享，可在线阅读，更多相关《电子商务第3章.ppt（76页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、第第3章章超文本标记语言超文本标记语言(HTML)3.1基本结构标记基本结构标记3.2文本格式标记文本格式标记3.3超链接标记超链接标记3.4图象标记图象标记3.5表格标记表格标记3.6地址标记地址标记3.7表单标记表单标记第第3章章超文本标记语言超文本标记语言(HTML)返回主目录返回主目录第第3章章超文本标记语言超文本标记语言(HTML)第第3章章超文本标记语言（超文本标记语言（HTML）3.1基本结构标记基本结构标记3.1.1开始与结束标记开始与结束标记HTML文档的开始标记是，它告诉浏览器下面的内容是HTML文档；在HTML文档结束处要有对应的标记，它告诉浏览器HTML文档结束了。开始

2、与结束标记语法格式为：这里开始的内容为HTML文档。第第3章章超文本标记语言超文本标记语言(HTML)3.1.2头部标记头部标记头部标记语法格式为：HTML文档的头部内容。头部内容里面一般包括标题。第第3章章超文本标记语言超文本标记语言(HTML)3.1.3标题标记标题标记和标记中间所包含的文字，就是这个Web页面的标题，它写在头部标记之中。标题会显示在Web浏览器最上面的title（标题）栏的位置。用户可以把标题加入书签（Bookmark）中，还 可 以 提 供 加 入 列 表（Hostlist、Bookmark）的文本，所以一定要使标题标记文本有明确的意义，最好用中文。标题标记语法格式为：

3、Web页面的标题第第3章章超文本标记语言超文本标记语言(HTML)3.1.4主体标记主体标记标记是Web页面主体的开始，对应结束符号是。Web页面的主要内容都在标记之中。还有一些属性可以设定背景色、背景图形等。主体标记语法格式为：这里是HTML文档的主体内容。第第3章章超文本标记语言超文本标记语言(HTML)3.1.5基本结构举例基本结构举例下面我们以一个简单的例子说明如何用HTML语言来编写Web页面程序的。这里3-1.HTML是一个文本文件，可以用任何编辑软件来编写。如果使用Word编辑软件，保存文件时在“保存类型”中选择“纯文本”。例3-1.HTML，电子商务系统页面。电子商务系统页面第

4、第3章章超文本标记语言超文本标记语言(HTML)看看电子商务系统页面使用电子商务系统，了解电子商务系统在IE浏览器的地址栏中直接输入要打开的文件名（如G:dzsw3-1.HTML），按回车键或者在IE浏览器菜单文件的下拉菜单中选择“打开”命令，在弹出窗口中按浏览按钮，通过“搜寻”窗口找到要打开的文件（如G:dzsw3-1.HTML），然后单击打开按钮、确定按钮，即可在浏览器中看到图3-1所示的页面。第第3章章超文本标记语言超文本标记语言(HTML)图3-1电子商务系统页面第第3章章超文本标记语言超文本标记语言(HTML)3.2文本格式标记文本格式标记3.2.1标题字体标题字体从图3-1中可以发

5、现，头部和主体内容连在一起，而且字体大小也一样。HTML语言如何解决这个问题呢？它是通过标题字体来处理的。标题字体可以自动放在指定位置，且显示不同的黑体字。标题字体是通过标记实现的。被和夹在中间的文字，是文章里的大号字标题字体。从、到，可以依次标注出六个层级的子标题，各子标题的差别在于，标题数字小的标题文字比数字大的标题文字更大、更粗、更显眼。每遇到一个标题，当前段落就会终止，标题前后自动留出一定的空白，文本自动从下一行开始。第第3章章超文本标记语言超文本标记语言(HTML)标题字体语法格式为：标题文字(i=1,6)例3-2.HTML，不同的标题字体。电子商务系统（1号字体）！电子商务系统（2

6、号字体）！电子商务系统（3号字体）！电子商务系统（4号字体）！第第3章章超文本标记语言超文本标记语言(HTML)电子商务系统（5号字体）！电子商务系统（6号字体）！例3-2.HTML显示结果如图3-2所示。第第3章章超文本标记语言超文本标记语言(HTML)图3-2不同标题的字体第第3章章超文本标记语言超文本标记语言(HTML)3.2.2字体大小标记字体大小标记普 通 的 字 体 也 可 以 改 变，使 用 字 体 大 小 标 记能够改变包含的字符、单词、短语或者指定范围文本的字号大小。字体大小标记语法格式为：文字#=1,2,3,4,5,6,7或+#,-#,缺省时为3号字体。例3-3.HTML，

7、基本文字字体的大小。第第3章章超文本标记语言超文本标记语言(HTML)商务系统设计（7号字体）商务系统设计（5号字体）商务系统设计（3号字体）商务系统设计（2号字体）商务系统设计（1号字体）例3-3.HTML显示结果如图3-3所示。第第3章章超文本标记语言超文本标记语言(HTML)图3-3不同大小字体的文字第第3章章超文本标记语言超文本标记语言(HTML)3.2.3段落标记段落标记与换行标记与换行标记是HTML格式中特有的段落元素。在HTML格式里我们不必关心文章的每行宽度，即不用担心每行文字太长而被截掉，HTML会根据窗口的宽度将行内过长文字自动转折到下一行。在原始文件中的段落标记，将指出在

8、此告一段落，下面的文字应另起一段。如果没有遇到，就会把所有的文字都挤到一个段落里。另外一个类似的标记元素是。标记用来标识一个换行动作，相当于字处理文件中的回车键功能，在HTML文件中可以用它来调整行间距。注意：标记是单独使用的。段落标记语法格式为：文字文本第第3章章超文本标记语言超文本标记语言(HTML)例3-4.HTML，段落标记和换行标记。在HTML格式里我们不必关心文章的每行宽度，即不用担心每行文字太长而被截掉。（没加标记）在HTML格式里我们不必关心文章的每行宽度，不用担心每行文字太长而被截掉。（加标记）在HTML格式里我们不必关心文章的每行宽度，不用担心每行文字太长而被截掉第第3章章

9、超文本标记语言超文本标记语言(HTML)例3-4.HTML显示结果如图3-4所示。图3-4使用段落标记和换行标记的结果第第3章章超文本标记语言超文本标记语言(HTML)3.3超链接标记超链接标记3.3.1链接到本机另一链接到本机另一Web页面页面链接到本机上的Web页面很简单，只要把文件名和路径赋给href就可以了。语法格式为：链接到文件名在浏览器中将看到“链接到文件名”下底线，当鼠标移到它上面时，鼠标的箭头变成小手，在此单击鼠标，便可将其链接到同一机器的名为文件名.HTML文件上。例如，这里是3-2.HTML页面。在浏览器中单击这里是3-2.HTML页面，浏览器将打开3-2.HTML文件。第

10、第3章章超文本标记语言超文本标记语言(HTML)3.3.2链接到另一机器的链接到另一机器的Web页面页面链接到另一台机器的Web页面也很简单，只要把目的地的URL地址赋给href就可以了。语法格式为：这里是某地方例如，想链接到“新浪”主页，可以写成：这里是新浪网主页例3-5.HTML，链接到其它计算机中的Web页面。第第3章章超文本标记语言超文本标记语言(HTML)Web页面制作例如，可以链接到本机的3-2.HTML页面链接到另一台机器的Web页面也很简单，只要把目的地的URL地址赋给href就可以了。例如，想链接到“新浪”主页在这里点一下即可进入新浪网页第第3章章超文本标记语言超文本标记语言

11、(HTML)例3-5.HTML显示结果如图3-5所示。第第3章章超文本标记语言超文本标记语言(HTML)图3-5两种不同的超链接第第3章章超文本标记语言超文本标记语言(HTML)3.3.3链接到同一链接到同一Web页面的其它段落页面的其它段落除了链接到另一个HTML文件之外，也可以在一篇文章内随意地链接。这和前面两种链接稍有不同，需要先做出一个“锚”标记，即链接的目标地，再做“锚”的链接。例如，先在文章中选择“第一章”做“锚”标记，第一章；再做“锚”的链接链接到第一章，则“链接到第一章”会变色。并加有下底线，在此单击鼠标，便可将其链接到本文章中标有第一章的地方。例3-6.HTML，看看是如何链

12、接到同一Web页的其它段落。第第3章章超文本标记语言超文本标记语言(HTML)Web页面制作例如：可以链接到本机的第一章为“锚”标记。除了链接到另一个HTML文件之外，也可以在一篇文章内随意地链接。这和前面两种链接稍有不同，需要先做出一个“锚”标记，即链接的目标地，第第3章章超文本标记语言超文本标记语言(HTML)再做“锚”的链接。在这里点一下即可进入第一章例3-6.HTML显示结果如图3-6所示。第第3章章超文本标记语言超文本标记语言(HTML)图3-6在同一页面上建立链接第第3章章超文本标记语言超文本标记语言(HTML)3.3.4链接到不同文件的另一个段落链接到不同文件的另一个段落如果链接

13、到不同文件的某一个段落，则其表示方法需做改变。假如在B1文件里建立链接链接到第一章，而锚标记第一章在B2文件中，则可写成：链接文字这样，当在B1文件中点击链接到第一章，就会跳到B2文件的第一章的位置，而不是文件中的其它地方。例3-7.HTML，链接到别的Web页的某一锚位置。第第3章章超文本标记语言超文本标记语言(HTML)Web页面制作在这里点一下就会跳到3-6.html文章的“第一章”这个位置。例3-7.HTML显示结果如图3-7所示。注意，这里假定例3-6.html文件的第一章是已经建立了“锚”标记的。第第3章章超文本标记语言超文本标记语言(HTML)图3-7在不同页面上建立链接第第3章

14、章超文本标记语言超文本标记语言(HTML)3.4图像标记图像标记如果Web页面上全是文字，会使人觉得很单调。怎样才能使页面活泼一点呢？我们可以插入一些图像，从而使页面变得图文并茂。插入图像的语法格式如下：img提示下面要将插入一个图像，src指出图像的来源URL地址。注意，图像标记没有结束标记。第第3章章超文本标记语言超文本标记语言(HTML)例3-8.html，在Web页面中插入一个图像。Web页面制作这里要插入一个图像第第3章章超文本标记语言超文本标记语言(HTML)例3-8.HTML显示结果如图3-8所示。图3-8插入图像第第3章章超文本标记语言超文本标记语言(HTML)3.5表格标记表

15、格标记加入表格可使页面整齐直观。但写起来非常麻烦，这里只介绍其部分语法格式。其语法格式可分为以下五部分：1.表格标记表格标记表示下面是一个表格的内容的开始，表示表格结束。2.表格标题标记表格标题标记表格标题第第3章章超文本标记语言超文本标记语言(HTML)这是表示一个表格的标题。表格的标题也可不要。Align可选择top（标题放在表格上面居中），bottom（标题放在表格下面居中），缺省时，标题放在表格上面居中。3.表格行标记表格行标记此标记表示表格一行的开始和结束。4.字段名标记字段名标记字段名在中间加入字段名，有几个字段名就加入几个标记。第第3章章超文本标记语言超文本标记语言(HTML)5

16、.数据标记数据标记数据在中间加入数据，一般有几个字段名就加入几个标记。其属性有：border=#表示表的边框，取像素值，缺省时，表格没有边框。例3-9.html,这是两个普通的表格，一个不带边框，一个带边框。caption商品价格表日 期 白 菜 鸡 蛋第第3章章超文本标记语言超文本标记语言(HTML)6.11.204.806.21.005.00caption商品价格表日期白菜鸡蛋6.11.204.806.21.005.00第第3章章超文本标记语言超文本标记语言(HTML)显示结果如图3-9所示。图3-9带框和不带框的表格第第3章章超文本标记语言超文本标记语言(HTML)3.6地址标记地址标记

17、这个标记通常用来告诉读者本文作者的联系地址、电话、E-mail信 箱。经 常 是 将 E-mail地 址 放 在 文 件 的 最 后 面。之间的字是斜体。例3-10.html，留地址。地址联系第第3章章超文本标记语言超文本标记语言(HTML)地址：湖南大学北校区信息管理系电话：0731-8684785E-mail信箱：HDXGZSQSOHU.COM第第3章章超文本标记语言超文本标记语言(HTML)显示结果如图3-10所示。图3-10留地址的方法第第3章章超文本标记语言超文本标记语言(HTML)3.7表单标记表单标记服务器将处理过的用户信息的HTML文件返回到客户端的浏览器中显示出来。Form的

18、基本语法格式为：method说明和服务器交换信息时所使用的方式，一般选择post或者get。第第3章章超文本标记语言超文本标记语言(HTML)3.7.1简单输入文本框简单输入文本框简单输入文本框给用户提供输入一行简短的回答方式。其HTML语 言 十 分 简 单，只 要 在 标 记 后 加 入，并以结束即可。如果想控制文本框的窗口大小，可以输入属性size=N，N以字节为单位；否则，浏览器就以缺省值20设置。如果输入的字超过显示区域，会自动向左滚动，还可以用属性maxlength=N限制最多输入的字节。其中属性Name的属性值“X”是将输入值传给服务器时使用的输入信息的名字。例3-11.html

19、，输入文本框。第第3章章超文本标记语言超文本标记语言(HTML)这是一个文本框显示结果如图3-11所示。输入文本框语法格式为：第第3章章超文本标记语言超文本标记语言(HTML)图3-11输入文本框第第3章章超文本标记语言超文本标记语言(HTML)3.7.2显示初始值的多个文本框显示初始值的多个文本框文字作为初始值可以出现在文本框里面，只需在标记中加入属性value=显示的文字即可。中的字可以随意选择。可以随意加入几个文本框。排列的方式可以用前面的标记来确定，否则将排在一行。例3-12.html，显示初始值的多个文本框。电 话 号 码：第第3章章超文本标记语言超文本标记语言(HTML)姓名：出生

20、日期：显示结果如图3-12所示。第第3章章超文本标记语言超文本标记语言(HTML)图3-12具有初始值的文本框第第3章章超文本标记语言超文本标记语言(HTML)3.7.3输入口令的文本框输入口令的文本框例3-13.html，输入口令，这个口令的长度为8。口 令：第第3章章超文本标记语言超文本标记语言(HTML)显示结果如图3-13所示。输入口令语法格式为：第第3章章超文本标记语言超文本标记语言(HTML)图3-13输入口令的文本框第第3章章超文本标记语言超文本标记语言(HTML)3.7.4输入一个多行多列的文本框输入一个多行多列的文本框如果希望用户多输入一些内容，以便回答问题或者进行讨论，可建

21、立一个多行多列的文本框。只要在标记后，插入一个这样的标记：，而后，照常加上和标记。属性cols确定文本框的宽度，它指的是多行多列文本框的一行同时出现多少个文字；属性rows确定多行多列文本框的高度，即有多少行文字一次出现。例3-14.html，输入一个多行多列的文本框。第第3章章超文本标记语言超文本标记语言(HTML)一个多行多列的文本框显示结果如图3-14所示。第第3章章超文本标记语言超文本标记语言(HTML)图3-14多行多列文本框第第3章章超文本标记语言超文本标记语言(HTML)输入多行多列的文本框语法格式为：第第3章章超文本标记语言超文本标记语言(HTML)3.7.5提交按钮及重置按钮

22、提交按钮及重置按钮怎样把输入的信息传递出去呢？可利用提交及重置按钮来完成。提交按钮（SubmitButton）是把用户输入的内容提交给服务器进行处理。重置按钮（ResetButton）是把用户输入的内容清除掉，重新输入。这两个按钮的建立也很容易，在标记下面再加入和即可。在input标记里，输入value的属性值可改变按钮上的字，否则它自动写上submit和reset。上面介绍的文本框都需要配上提交按钮和重置按钮才算完整。第第3章章超文本标记语言超文本标记语言(HTML)例3-15.html，创建提交和重置。电话号码：姓名：出生日期：第第3章章超文本标记语言超文本标记语言(HTML)显示结果如图

23、3-15所示。第第3章章超文本标记语言超文本标记语言(HTML)图3-15创建提交与重置按钮第第3章章超文本标记语言超文本标记语言(HTML)3.7.6单选框单选框单选框是给用户提供一些可选的内容，让用户选择，但只能选择其中的一项。要创建一个单选框（radiobutton），只需在标记后加上，再以结束即可。还可以在每一个按钮后加上要选的内容，并插入间隔线或者分段标记。如果想让其中的按钮默认为选中，只要在input标记中加入checked属性就可以了。例3-16.html，创建单选框。第第3章章超文本标记语言超文本标记语言(HTML)单选框YesNo多选一香蕉苹果第第3章章超文本标记语言超文本标

24、记语言(HTML)李子显示结果如图3-16所示。第第3章章超文本标记语言超文本标记语言(HTML)图3-16创建单选框第第3章章超文本标记语言超文本标记语言(HTML)创建单选框语法格式为：注意，单选框的属性name的属性值NAME是相同的，因为只需选一个输入信息。第第3章章超文本标记语言超文本标记语言(HTML)3.7.7多选框多选框多选框是给用户提供选择多项内容。要创建一个多选框，只 需 在 标 记 后 加 上，再 以结束即可，在每一个“checkbox”后跟有要用于选择的文本内容或者图像。可以再插入间隔划线或者分段标记。例3-17.html，创建多选框。多选框北京第第3章章超文本标记语言

25、超文本标记语言(HTML)上海西安广州(已被选择)显示结果如图3-17所示。第第3章章超文本标记语言超文本标记语言(HTML)图3-17创建多选框第第3章章超文本标记语言超文本标记语言(HTML)创建多选框的语法格式为：注意，多选框的属性Name的属性值X是不同的，因为可以选择多个输入信息。第第3章章超文本标记语言超文本标记语言(HTML)3.7.8下拉菜单及滚动菜单下拉菜单及滚动菜单下拉菜单是以标记开始，再接标记。标记表示可以在一个给定的选择项范围内进行选择，因此，接着就给出每一个选择项。选择项采用标记，标记需放在每个选择项之前。滚动菜单只是在标记中加入mutiple属性，允许一次选多个选项

26、，类似多选框，如。如果缺省mutiple，一次只能选择一项，类似单选框。其中size=x是一次同时显示在菜单里的选择项（或者选择行）数。菜单的宽度由最长的选择项确定。例3-18.html，创建下拉菜单。第第3章章超文本标记语言超文本标记语言(HTML)下拉菜单中任选一个钢笔铅笔书籍纸张第第3章章超文本标记语言超文本标记语言(HTML)显示结果如图3-18所示。例3-19.html，创建滚动菜单。滚动菜单可多选第第3章章超文本标记语言超文本标记语言(HTML)图3-18创建下拉菜单第第3章章超文本标记语言超文本标记语言(HTML)香蕉葡萄桃子梨子第第3章章超文本标记语言超文本标记语言(HTML)

27、显示结果如图3-19所示。关于表单标记，需要注意的是：所有的form都是以标记开始，以标记结束。每新加入一个标记，浏览器就产生一个新的段落。因此，如果想将一个下拉菜单或者radiobutton放到语句的中间，应将标记放在段落的开始处，而不是放在段落中。第第3章章超文本标记语言超文本标记语言(HTML)图3-19创建滚动菜单第第3章章超文本标记语言超文本标记语言(HTML)可以将多个form元素（如checkboxes，下拉菜单等）放在同一对标记中，而不必加入一个元素就放上一对标记。在编写完下拉式菜单时，每个下拉菜单以标记结束。HTML语言的标记还有很多，这里介绍的只是一些基本的标记，读者如果有兴趣，可以参阅专门的HTML语言资料。掌握了HTML语言，就具备了设计电子商务系统的基础。目前，HTML语言正向着XML语言的方向发展，将使网络语言更加标准化。