《《电子商务网站建设与管理》图文课件第三章.pptx》由会员分享，可在线阅读，更多相关《《电子商务网站建设与管理》图文课件第三章.pptx（77页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、第三章 HTML网页设计基础第一节 HTML简介一、电子商务的概念HTML是一种结构化的网页内容标记语言，使用各种不同的标签符号来分别标识和设定不同的网页元素。每一个网页元素通常都由开始标签、结束标签以及夹在这两个标签中的内容组成。每个HTML元素的开始标签和结束标签的名称相同，并且都用一对尖括号“”括起来，只是在结束标签的前面多了一个斜杠符号“/”。例如：这部分内容居中显示第一节 HTML简介一、电子商务的概念表示将网页中的文字居中显示。其中，为开始标签，为结束标签，“这部分内容居中显示”为该元素的内容。当浏览器在显示该网页的过程中，如果遇到center元素，就将该元素的内容居中显示在浏览器
2、的窗口中。并不是所有的网页标签都是如上例中那样成对出现的。有开始标签且一定有结束标签的标签叫双边标签，而有开始标签不需要结束标签的标签称为单边标签。例如，就是一个单边标签。另外，还有一些网页元素的结束标签可以自由取舍，如段落标签、选项标签等。第一节 HTML简介一、电子商务的概念许多元素的开始标签中还允许加入若干属性，用于进一步对该元素的特征进行说明或限定。通常用“属性名称=属性值”的方式来设定元素的属性，属性值可以用双引号引起来，也可以省略。例如，“”和“”效果相同，但如果属性值内有空格或特殊字符，则其两端双引号就不可以省略。此外，在一个元素的开始标签中各个属性设置的先后顺序是任意的。综上所
3、述，一个HTML元素可表示为：内容第二节 HTML的结构一、网页基本结构任意打开一个网页，查看它的源代码，就可以看到这个网页的HTML代码。无论该网页如何复杂，都是由最基本的HTML结构组成的。以下是HTML的基本结构。【例3-1】HTML文档的基本结构，效果如图31所示。第二节 HTML的结构一、网页基本结构网页标题这是显示在浏览器中的主要内容！第二节 HTML的结构一、网页基本结构用于指出HTML文档的开始与结束，标签中的内容是HTML文档的主体元素。中的内容只能有、3种下属的一级元素，但其中的与元素是不能共存的。第二节 HTML的结构一、网页基本结构这就是说，在中最多只能有两个下属一级元
4、素，其他的元素都包含在这两个元素之中。标签通常用于提供一些识别或补充的信息给浏览器，而浏览器不会把这些信息显示在网页中。理论上，在中至少必须包括标签元素，但在现实中并没有严格限定。第二节 HTML的结构一、网页基本结构标签用于指定浏览器所要显示的标题文字，原则上不能省略，因为它还有其他用途，如作为网页的标签或搜索引擎搜索时的索引等。用于显示网页的主要内容，其中可以包含多种不同的元素。与之相关的各种元素将在下一节中详细说明。第二节 HTML的结构一、网页基本结构下面是关于书写HTML文档的几点说明。（1）HTML文档的内容不区分字母大小写，包括属性和标签名称等。（2）对于连续的空格、Tab键和E
5、nter键，浏览器只会将其当成一个空格，除非置于预排版标签中。第二节 HTML的结构一、网页基本结构（3）在一个元素的开始标签中，元素名称及各个属性名称之间应该以空格、Tab键或Enter键隔开，因此某个元素的开始标签可能会跨越数行，而浏览器只认定“”记号。（4）含有空格或特殊符号的属性值需要用半角双引号引起来。第二节 HTML的结构一、网页基本结构（5）在HTML中采用“”进行注释，在该注释标签中的内容将不被处理和显示。（6）对于HTML文档中的错误元素及其属性，浏览器将会跳过而不予理会。第二节 HTML的结构一、网页基本结构（7）各元素之间可以嵌套，但不能交错。例如：是正确的。是错误的。（
6、8）HTML文档是一个纯文本文件，可用任何文本编辑工具（如Windows中的记事本）来创建和编辑，其扩展名为.htm或.html。第二节 HTML的结构二、标签标签主要用于包括该页面的一些基本描述语句。其语法格式如下：网页标题第二节 HTML的结构二、标签其中各项的含义如下：（1）标签又称为元标签，主要功能是对网页进行定义和说明。（2）描述型标签主要负责对网页的重要内容进行定义说明，从而方便搜索引擎的检索，通常不会在网页中显示。其语法格式为其中，name属性用于对网页中的重要内容进行说明，其属性值主要有description（对当前网页的描述）、keyword（网页关键词）、author（网页
7、作者）等。content属性用于设置与name属性值对应的内容。第二节 HTML的结构二、标签（3）动态控制型标签主要对网页的动态排列和动态链接进行控制。其语法格式为其中，httpequiv属性用于设置动态控制的类型，其属性值主要有两个：contenttype（动态排列）、refresh（动态链接）。content属性用于对httpequiv属性值进行详细描述。第二节 HTML的结构二、标签【例3-2】标签的基本结构实例。第二节 HTML的结构二、标签标签实例请注意元标签的使用第二节 HTML的结构二、标签【例3-2】代码运行效果表示当浏览器窗口大小改变时，文字的排版也会随着窗口大小的改变而改
8、变，以便让文字都显示在窗口中。其中，“text/html”表示当前文件为MIME类型中的text主类型下的html子类型，“charsetgb2312”表示当前文档的字符编码为国标2312，即支持简体中文。第二节 HTML的结构二、标签说明：MIME即多功能Internet邮件扩充服务，它是一种多用途网际邮件扩充协议，在1992年最早应用于电子邮件系统，但后来也应用到浏览器。服务器将MIME类型放入传送的数据中来告诉浏览器使用哪种插件读取相关文件，如设置为application/msword，则浏览器将调用Word来打开相关的数据文件。表示网页将动态刷新，其刷新时间设置为3 s，刷新后的链接U
9、RL为http:/，即3 s后，该网页将自动跳转到新浪的首页。第二节 HTML的结构三、标签标签用于设置网页的基本样式。其语法格式如下：其中，各属性的含义如下：（1）bgcolor属性设置网页背景颜色。（2）background属性设置网页的背景图像。第二节 HTML的结构三、标签（3）text属性设置网页文字颜色。（4）link属性设置未访问的超链接文字颜色。（5）vlink属性设置已访问过的超链接文字颜色。（6）alink属性设置超链接被激活时的颜色，即单击链接的瞬间链接文字的颜色。第二节 HTML的结构三、标签【例3-3】标签的使用实例。标签实例 第二节 HTML的结构三、标签背景颜色:
10、silver文字颜色:blue链接颜色:red已访问链接颜色:lime激活链接颜色:navy新浪第三节 HTML的主要标签一、段落标签（一）标题标签标题标签的语法格式如下：标题内容hx中的x表示标题级别，分为h1、h2、h3、h4、h5和h6，其中h1表示一级标题，以此类推。x的数值越小，字体越大。第三节 HTML的主要标签一、段落标签（一）标题标签align属性用于设置标题对齐方式，可供选择的属性值有3个：left（左对齐）、center（居中对齐）、right（右对齐）。默认为left。标签所表示的标题在网页中均独占一行。第三节 HTML的主要标签一、段落标签（二）分段标签分段标签的语法格
11、式如下：段落文字中的文字将另起一行输出，而且将在两个段落之间产生一个空行。align属性用于设置段落的对齐方式，可供选择的属性值有3个：left（左对齐）、center（居中对齐）、right（右对齐）。默认为left。分段结束标签可以省略。第三节 HTML的主要标签一、段落标签（三）换行标签换行标签用于强制中断当前文字行而从下一行开始显示，且在断行之间不产生空行（这与标签不同）。标签通常放在一行的末尾，其语法格式如下：文字第三节 HTML的主要标签一、段落标签（四）水平线标签水平线标签用于显示一条水平线。其语法格式如下：其中各属性的含义如下：（1）size属性用于设置水平线的粗细，以像素为单
12、位，默认值为2。第三节 HTML的主要标签一、段落标签（四）水平线标签（2）align属性用于设置水平线的对齐方式，属性值有left、center、right，默认为left。（3）width属性用于设置水平线的长度。其表示方式有两种：第一种为绝对数值，单位为像素，即水平线的长度是一个固定值；第二种为百分比，表示水平线相对于浏览器窗口的宽度的比例，当窗口的宽度改变时，此水平线的宽度会自动改变。第三节 HTML的主要标签一、段落标签（四）水平线标签若没有设置宽度，则该水平线将横穿整个浏览器窗口（即默认为width=100%）。（4）color属性用于设置水平线的颜色，默认为黑色。第三节 HTML
13、的主要标签一、段落标签（五）文本块标签文本块标签用于使其包括的文本自成一段，且以缩排方式显示。其语法格式如下：文字【例3-4】段落标签综合实例，效果如图34所示。第三节 HTML的主要标签一、段落标签（五）文本块标签段落标签综合实例HTML段落标签介绍第三节 HTML的主要标签一、段落标签（五）文本块标签HTML文档中采用不同的标签来标识相应的HTML元素这些标签包括段落、字体、列表、表格、表单等几大类。段落标签第三节 HTML的主要标签一、段落标签（五）文本块标签段落标签主要包括标题标签、分段标签、换行标签、水平线标签和文本块标签等几类。第三节 HTML的主要标签二、文字格式标签字体标签字体
14、标签可用于设置文本的字体、字形、字号和字符颜色等，是HTML文档中常用的标签。其语法格式如下：文字其中各属性的含义如下：（1）size属性用于设置字号，即文字的大小，取值范围为17，共7级字体，字级越大，文字越大。（一）第三节 HTML的主要标签二、文字格式标签（2）face属性用于设置字体名称。双击“控制面板”中的“字体”选项，能看到可以引用字体的名称，这些字体的名称都可以给face属性赋值。字体标签（一）第三节 HTML的主要标签二、文字格式标签（3）color属性用于设置文字颜色。color属性的颜色值可以用英文的颜色名称来表示，如red、green、blue等，也可以使用“#RRGGB
15、B”的方式来表示，其中R代表红色、G代表绿色、B代表蓝色，RR、GG、BB的取值范围为十六进制数的00FF（相当于十进制的0255）。字体标签（一）第三节 HTML的主要标签二、文字格式标签文字效果标签1.粗体标签2.斜体标签3.下划线标签4.删除线标签5.上标标签6.下标标签7.文字闪烁标签（二）第三节 HTML的主要标签二、文字格式标签特殊字符标签在HTML文档中，因为“”、“”、“&”等字符具有特殊意义，所以如果要在浏览器中显示这些字符本身就需要使用特殊的字符串。另外，由于HTML文档中多个空格、Tab键和Enter键均只能解释为一个空格，因此要表示多个空格也要用到特殊的字符串。（三）第
16、三节 HTML的主要标签三、列表标签无序列表标签无序列表标签用于创建一个无序列表，其语法格式如下：列表项1列表项2（一）第三节 HTML的主要标签三、列表标签列表项n其中各属性的含义如下：无序列表标签（一）第三节 HTML的主要标签三、列表标签（1）type属性用于指定该列表中的每一个列表项的项目符号，type属性的值可以是square（）、circle（）和disk（）等。（2）标签表示列表中的列表项，type属性用于指定该列表项的项目符号。无序列表标签（一）第三节 HTML的主要标签三、列表标签有序列表标签有序列表标签用于创建有序列表，其语法格式如下：列表项1列表项2（二）第三节 HTML
17、的主要标签三、列表标签列表项n其中各属性的含义如下：（1）标签表示有序列表，其中，type属性用于指定列表中每一个列表项的序号类型，允许的属性值有“1”、“A”、“a”、“”、“”5种。有序列表标签（二）第三节 HTML的主要标签三、列表标签其中，“1”表示用数字做序号，“A”表示用大写英文字母做序号，“a”表示用小写英文字母做序号，“”表示用大写罗马数字做序号，“”表示用小写罗马数字做序号。（2）标签表示列表中的列表项，其中，type属性用于指定该列表项的序号类型。（3）start属性用于设置序号的开始值，不管采用哪种列表序号，start属性的值统一用数字形式来设置起始序号。有序列表标签（二
18、）第三节 HTML的主要标签四、图像标签使用图像标签可将指定的图像添加到网页中。图像标签的语法格式如下：其中各属性的含义如下：第三节 HTML的主要标签四、图像标签（1）src属性的值为图像文件的URL，可以是本地文件，也可以是互联网上的文件。（2）border属性用于设置图像边框的宽度，单位为像素。（3）align属性用于设置图像的对齐方式，可选值为left、center、right，默认为left。（4）alt属性用于设置图像的说明性文字（也可以使用title属性来实现同样功能）。第三节 HTML的主要标签四、图像标签（5）height、width分别用于设置图像的高度和宽度，可以用绝对数
19、值表示，单位为像素，也可以使用百分比来设置，以浏览器窗口作为参照对象。通常使用前者，因为使用百分比显示图像会造成图像失真。（6）hspace、vspace分别用于设置图像与浏览器内容窗口的左边距和上边距，采用绝对数值表示，单位为像素。第三节 HTML的主要标签五、超链接标签HTML与文本最大的区别在于链接。由此可见超链接标签是HTML文档中一个十分重要的标签，使用它可链接到文档内的某个指定段落或图像，也可以链接到本地或远程计算机上的另一个文档或Web页。【例3-7】代码运行效果超链接标签的语法格式如下：第三节 HTML的主要标签五、超链接标签用做链接的文字或图像用做链接的文字在浏览器中通常以一
20、种特殊颜色并带下划线的方式显示，当鼠标指针指向超链接对象时会变成手形，表示此为一个链接。href属性用于指定此超链接被触发之后所转向的URL。第三节 HTML的主要标签六、表格标签表格在网页中是很重要的，它除了组织和显示数据之外，还具有布局页面的作用。表格可以将文本和图像等元素按行、列排列，实现网页的布局要求。表格标签的语法格式如下：标题1标题2单元格1单元格2第三节 HTML的主要标签六、表格标签和标签分别用于定义一个表格的开始和结束，标签可以包含多个属性，其中，align属性用于定义表格在浏览器中的对齐方式，可选值为left、center、right，默认为left;border属性用于定
21、义表格边框的粗细，单位为像素；bordercolor属性用于定义边框的颜色；bgcolor属性用于定义单元格的背景颜色；第三节 HTML的主要标签六、表格标签width属性用于定义表格的宽度，可以为像素值也可以为屏幕宽度的百分比值；height属性用于定义表格的高度；cellspacing属性用于定义各个单元格的间距，单位为像素（默认为2）；cellpadding属性用于定义单元格内数据内容与边框的间距，单位为像素（默认为1）。第三节 HTML的主要标签六、表格标签标签用于定义一个表格行的开始和结束，在一个表格中有几个标签就有几个表格行。标签用于定义表格标题行的各个单元格。其中的文字内容以加粗
22、且居中的方式显示，也可以使用align属性来设置对齐方式。此外，还可以通过width属性来指定单元格的宽度。第三节 HTML的主要标签六、表格标签标签用于定义表格内数据行的各个单元格。其内容默认左对齐，不使用粗体。可以使用align属性来设置横向对齐方式，其可选值为left、center、right。此外，还可以通过valign属性来设置纵向对齐方式，其可选值为top（顶端对齐）、middle（纵向居中）、bottom（底端对齐）。第三节 HTML的主要标签六、表格标签如果涉及单元格合并，可在或标签中使用colspan属性来设置纵向单元格合并，使用rowspan属性来设置水平单元格合并，其属性
23、值均为数值，表示要合并多少个单元格。第三节 HTML的主要标签七、表单元素标签（一）表单标签使用表单标签创建表单的语法格式如下：表单元素标签第三节 HTML的主要标签七、表单元素标签（一）表单标签method属性用于设置信息的传送方式，属性值可为post或get。post方式是一种邮寄的方式，在浏览器的地址栏中不显示提交的信息，这种方式对传送的数据量的大小没有限制；get方式将信息传递到浏览器的地址栏上（对于安全性要求较高的内容，如密码，不应该采用这种方式），最大传输的信息量是2 KB。当不指明是哪种方式时，默认为get方式。第三节 HTML的主要标签七、表单元素标签（二）输入标签输入标签是表
24、单中最常用的标签之一，用于创建提交与重置按钮、文本框和密码框、单选按钮和复选框等表单控件。是单边标签，没有对应的结束标签。标签的type属性用于设置表单元素的类型，value属性用于设置表单元素上显示的文字。第三节 HTML的主要标签七、表单元素标签（二）输入标签1.提交与重置按钮2.文本框和密码框3.单选按钮和复选框4.隐藏框标签第三节 HTML的主要标签七、表单元素标签（三）下拉列表框标签下拉列表框用于通过下拉列表的形式将一组选项提供给用户，以实现单选或多选的效果。下拉列表框标签的语法格式如下：选项标签1选项标签2第三节 HTML的主要标签七、表单元素标签（三）下拉列表框标签（1）name
25、属性用于设置控件名称。（2）size属性用于设置下拉列表框中同时显示的选项个数，默认属性值为1。如果允许用户在此列表框中选取多个选项，则可以通过增加multiple属性来实现。第三节 HTML的主要标签七、表单元素标签（三）下拉列表框标签（3）标签用于定义下拉列表框中的一个具体选项，value属性用于设置该选项所对应的值。标签之后的选项标签仅仅是对该选项进行的说明，没有其他意义。此外，在标签中允许有selected参数，用于表明该选项已被预先选中。第三节 HTML的主要标签七、表单元素标签（四）文本域标签文本域用于输入较长的文本信息。文本域类似于文本框，二者的区别在于文本域允许输入多行数据。创
26、建文本域的语法格式如下：文本域内容 第三节 HTML的主要标签七、表单元素标签（四）文本域标签rows属性用于设置可以同时显示在表单域中的文字行数，cols属性用于设置可以同时显示在表单域中的文字列数。第三节 HTML的主要标签八、框架标签框架也称为帧，用于将浏览器的窗口分成多个区域，每个区域可以单独显示一个HTML文档，各个区域也可相关联地显示某一个内容。使用框架标签创建框架的语法格式如下：第三节 HTML的主要标签八、框架标签用于定义一个框架集，即定义一个由若干框架构成的网页。标签中的cols属性将网页分为左右排列的多个框架，用各个框架在屏幕上横向所占宽度的百分比表示，或用像素值表示。第三
27、节 HTML的主要标签八、框架标签例如，“”表示这个框架集包含按列划分的两个子框架，其宽度分别占浏览器窗口的20%及80%（“*”表示剩下的全部）。rows属性将网页分为上下排列的多个框架，用各个框架在屏幕上纵向所占高度的百分比表示，也可用像素值表示。第三节 HTML的主要标签八、框架标签例如，“”表示这个框架集包含按行划分的3个子框架，其高度分别为120像素、250像素及剩下的全部。框架集可以嵌套使用。第三节 HTML的主要标签八、框架标签标签是单边标签，每一个标签用于具体定义一个框架。其name属性用于定义框架名称，target属性指定一个目标框架，该框架用于显示本框架内超链接被激活时所链
28、接的页面，src属性用于定义框架内所要显示网页的文件名或URL。第三节 HTML的主要标签一、简答题1.如何在网页中设置字体？字体大小的取值范围是多少？2.如何定义跨行的表格？如何将表格的字体和边框的距离加大？第三节 HTML的主要标签3.在HTML文档中应如何书写注释文字？另外，由于在HTML文档中多于一个的空格将被忽略，如何表示必要的空格字符？4.表单标签中的method属性的作用是什么？该属性指定为get和指定为post有什么区别？第三节 HTML的主要标签二、实践题1.通过在记事本中编写HTML源代码的方式创建一个“新客户注册”网页。2.编写HTML代码，制作一个由顶端、左侧、右侧、底端4个框架组成的网页，并在右侧框架中显示左侧框架的链接页面。THANK YOU