《电子商务网站建设二.ppt》由会员分享，可在线阅读，更多相关《电子商务网站建设二.ppt（60页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、HTML基础知识及使用第五章 第一节HTML概念n nHTML（Hyper Text Markup Language 超文本标识语言）l l是一种描述文档结构的语言。它使是一种描述文档结构的语言。它使用描述性的标签来规定显示信息的用描述性的标签来规定显示信息的结构和格式结构和格式l l它只是一种标记语言，不用编译它只是一种标记语言，不用编译HTML文档的编写方法1.1.手工直接编写l l记事本等，存成记事本等，存成.htmhtm.html.html格式格式2.2.使用可视化HTML编 辑 器l lFrontpageFrontpage、DreamweaverDreamweaver等等网页文件命名
2、1.1.*.htm或*.html2.2.无空格3.3.无特殊符号（例如&符号），只可以有下划线“_”，只可以为英文、数字4.4.区分大小写5.5.首页文件名默认为：index.htm 或 index.htmlHTML 文件结构.n n标签：是HTML语言的基本部分。标签总是成对出现，每一对元素一般都有一个开始的标记（如），也有一个结束的标记（如）。标签的标记要用一对尖括号括起来，并且结束的标记总是在开始的标记前加一个斜杠。HTML 文件结构(Document Structures)l l n nl ll ln nn nl l HTML HTML 文件的正文文件的正文文件的正文文件的正文n nl
3、 l HTML文档的特点l l通用性通用性通用性通用性l l简单性简单性简单性简单性l l可扩展性可扩展性可扩展性可扩展性l l平台无关性平台无关性平台无关性平台无关性l l编辑器无关性编辑器无关性编辑器无关性编辑器无关性第一部分n n文档标签的使用第一张网页（01.htm）my first page This is my first homepage!第二张网页（02.htm）my first page my first page p This is my first This is my first homepage!homepage!基本组成部分HTML标签属性n nHTML标签可以有自
4、己的相关属性，每一个属性还可以由我们网页编制者赋一定的值。标签属性出现在标签的内，并且和元素名之间有一个空格分隔；属性值用“”引起来。HTML标签的特点：n n标签往往成对出现标签往往成对出现n n标签名与小于号之间不能留有空白字标签名与小于号之间不能留有空白字符符n n有些标签要加上属性，有些则不必有些标签要加上属性，有些则不必n n属性只可加于起始标签中属性只可加于起始标签中n n不同标签之间可以嵌套，但不能交叉不同标签之间可以嵌套，但不能交叉n n标签对大小写不敏感标签对大小写不敏感对HTML的描述，下面哪些说法是正确的？(1分)P135n nAHTML的所有标记都必须放在符号中n nB
5、HTML(HyperText Markup Language)叫超文本制造语言n nCHTML语言的所有标记都必须成对使用n nDHTML文件中的标记是区分大小写的HTML基本结构的有关标签和标签属性n nHEAD标签1 元素出现在文档的开头部分。与之间的内容不会在浏览器的文档窗口显示，但是其间的元素有特殊重要的意义。n n 元素定义元素定义HTMLHTML文档的标题。文档的标题。与与之间的内容将显示之间的内容将显示在浏览器窗口的标题栏。在浏览器窗口的标题栏。HTML基本结构的有关标签和标签属性n nHEAD标签2n n标签 n n标签下面可以插入很多很有用的标签属性。下面介绍四种：l lme
6、ta n n用来标记搜索引擎在搜索你的页面时用来标记搜索引擎在搜索你的页面时所取出的关键词。所取出的关键词。HTML基本结构的有关元素和元素属性n nHEAD元素3n n元素 l lmeta l l用来标记文档的作者。用来标记文档的作者。元素及元素属性1n n标签表明是HTML文档的主体部分。在与之间，通常都会有很多其它元素；这些标签和标签属性构成HTML文档的主体部分。元素及元素属性2元素中有下列属性：l l(1)bgcolor(1)bgcolorn nbgcolorbgcolor属性标志属性标志HTMLHTML文档的背景颜文档的背景颜色。如色。如：bgcolorbgcolor=#CCFFC
7、C=#CCFFCC。n n例：例：04.htm04.htmHTML对颜色的控制n nHTML对颜色的控制也有自己的语法。HTML使用16进制的RGB颜色值对颜色进行控制。n n16 进制的数码有:0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f.颜色颜色名和RGB值黑色黑色Black=”#000000”Black=”#000000”银色银色Silver=”#c0c0c0”Silver=”#c0c0c0”红色红色Red=”#ff0000”Red=”#ff0000”蓝色蓝色Blue=”#0000ff”Blue=”#0000ff”白色白色White=”#White=”#ffffffff
8、ffff”黄色黄色Yellow=”ffff00”Yellow=”ffff00”绿色绿色Green=”#00ff00”Green=”#00ff00”海蓝色海蓝色Aqua=”#00ffff”Aqua=”#00ffff”常见颜色的代码元素及元素属性3n n标签中有下列属性：l l(2)(2)backgroundbackgroundn nbackgroundbackground属性标志属性标志HTMLHTML文档的背文档的背景图片。如：景图片。如：background=“images/background=“images/bg.gifbg.gif。n n可以使用的图片格式为可以使用的图片格式为GIFG
9、IF，JPGJPG例：例：05.htm05.htm、06.htm06.htm元素及元素属性4n n标签中有下列属性：l l(3)(3)bgproperties=fixedbgproperties=fixedn nbgpropertiesbgproperties=fixed=fixed使背景图片成水印使背景图片成水印效果，即图片不随着滚动条的滚动而效果，即图片不随着滚动条的滚动而滚动。滚动。例：例：07.htm07.htm和和08.htm08.htm对比对比元素及元素属性5n n中有下列元素属性：l l(4)text(4)textn ntexttext属性标志属性标志HTMLHTML文档的正文文
10、字颜文档的正文文字颜色。如：色。如：text=“#FF6666”text=“#FF6666”。TextText元素元素定义的颜色将应用于整篇文档。定义的颜色将应用于整篇文档。n n例：例：09.htm09.htm元素及元素属性6n n元素中有下列元素属性：l l(5)(5)超级链接颜色超级链接颜色n nlinklink、vlinkvlink、alinkalink分别控制普通超级链分别控制普通超级链接、访问过的超级链接、当前活动超接、访问过的超级链接、当前活动超级链接颜色。级链接颜色。n n例：例：10.htm10.htm元素及元素属性7n n中有下列元素属性：l l(6)left margin
11、(6)left margin和和top margintop marginn n设置网页主体内容距离网页顶端和左设置网页主体内容距离网页顶端和左端的距离如：端的距离如：leftmarginleftmargin=20=20 topmargintopmargin=30“=30“n n例：例：11.htm11.htm第二部分n n排版标签文字布局文字布局n n段落标签，作用是为文字、图像、表格之间留一空白行例：例：05.htm05.htm文字布局文字布局n n行的控制行的控制 n nHTMLHTML的段落与段落之间有一定的空的段落与段落之间有一定的空隔。如果不希望出现空隔而只想换行隔。如果不希望出现空
12、隔而只想换行的话，就要用到另一个元素，即的话，就要用到另一个元素，即 元素。元素。标签可以使所在的位置出标签可以使所在的位置出现换行。这种换行和浏览器的自动换现换行。这种换行和浏览器的自动换行的效果类似。行的效果类似。标签不是成对出标签不是成对出现的。现的。例：例：02.htm02.htm HTMLHTML文字与段落格式控制文字与段落格式控制 倾斜文本 粗体文本 下划线文本 删除线文本 例：02.htm基本组成部分HTML注释n nHTML文档可以插入注释。注释内容不会在浏览器窗口显示n nHTML注释的格式为：例：例：12.htm12.htm基本组成部分直线n n标签：水平线标签，作用是在网
13、页中插入水平线例：例：13.htm13.htm第三部分n n链接标签4.超级链接普通超级链接1n n超级链接是整个WWW应用的核心和基础。如果没有超级链接的概念，那么，我们现在所有的WWW的应用将不复存在。所以，对超级链接的掌握具有特殊重要的意义。4.超级链接普通超级链接2超级链接是用锚元素定义的 n n在元素下，有元素属性href,href的属性值为一个URL地址n n如：指向学院的超级链接 n n如：普通超级链接例：21.htm4.超级链接新开链接窗口n n开一个新的(浏览器)窗口(Target Window).例：26.htm4.超级链接内部链接(书签)1 n nn n指向本页面锚点aa
14、的超级链接例：23.htmn n指向23页面的锚点top的超级链接例：24.htm第三部分n n图片标签HTML对图片的控制-1n n基本语法基本语法:n n l l引用图片必须用引用图片必须用 元素标志。元素标志。元素下的基本元素属性是元素下的基本元素属性是srcsrc属性，属性，srcsrc的的属性值为所引用的图片的属性值为所引用的图片的URLURL地址。地址。l lsrcsrc属性是必须的。属性是必须的。SrcSrc的的URLURL可以是可以是绝对绝对地址地址，也可以是，也可以是相对地址相对地址例：例：28.htm28.htmHTML对图片的控制-2n n所谓图片的替代文本，指图片不能显
15、示时在图片所在位置显示的一段文本或当鼠标移到图片上时也会显示替代文本。n n定义图片替代文本的方法是：l l 例：例：28.htm28.htmHTML对图片的控制-3n n图片的显示大小图片的显示大小我们可以指定一幅图片在浏览器窗口里的我们可以指定一幅图片在浏览器窗口里的显示大小。显示大小。l l定义图片的显示大小的方法是：定义图片的显示大小的方法是：l lwidthwidth指定图片的宽度，指定图片的宽度，heightheight指定高度。指定高度。例：例：29.htm29.htmHTML对图片的控制-4n n图片的边框l l我们可以为一幅图片加一个边框以我们可以为一幅图片加一个边框以突出显
16、示：突出显示：l l 2 n nborderborder的属性值为象素数的属性值为象素数例：30.htmHTML对图片的控制-5n n图片的对齐方式图片的对齐方式图片可以相对于页面或单元格有一个对齐图片可以相对于页面或单元格有一个对齐方式。方式。定义水平对齐方式的方法是：定义水平对齐方式的方法是：l l=“left”l l=“right”例：例：31.htm31.htmHTML对图片的控制-7n n定义图片与左、右的文本之间的间距定义图片与左、右的文本之间的间距l l图片在显示时，与左右的文本之间可以图片在显示时，与左右的文本之间可以有一定的间距有一定的间距 l lHspace(horizon
17、talHspace(horizontal)定义定义水平间距水平间距；Vspace(verticalVspace(vertical)定义定义垂直间距垂直间距。单位都。单位都是象素数是象素数.例：例：33.htm33.htmHTML对图片的控制-8n n图象的超级链接图象的超级链接 l l图象的超级链接是指整个图象的超级链图象的超级链接是指整个图象的超级链接，当点击图象的任何部分时，都会打接，当点击图象的任何部分时，都会打开这个超级链接。定义默认超级链接的开这个超级链接。定义默认超级链接的方法是：方法是：a”l l所以，所谓超级链接实际上就是用所以，所谓超级链接实际上就是用元元素标志一个图象的引用
18、素标志一个图象的引用;例：例：34.htm34.htm第四部分n n表格一月二月三月120012001000100015001500单元格（用单元格（用来表来表示，每个单示，每个单元格可以有元格可以有背景颜色和背景颜色和背景图片）背景图片）表格（用表格（用来表来表示，表格可以有背景颜示，表格可以有背景颜色、背景图片）色、背景图片）表格边框表格边框每一行可以用每一行可以用来表示，来表示，单元格放在行单元格放在行中，每行可以中，每行可以有很多的单元有很多的单元格。格。表头（用表头（用来来表示，表头是特表示，表头是特殊的单元格，其殊的单元格，其中的文字加进去中的文字加进去之后默认是居中之后默认是居中
19、并且加粗）并且加粗）表格(TABLE)标记-1n n 元素：定义一个表格。每一元素：定义一个表格。每一个表格只有一对个表格只有一对和和，一张页面中可以有多个表格。一张页面中可以有多个表格。n n 元素：定义表格的行，一个表格元素：定义表格的行，一个表格可以有多行，所以可以有多行，所以 对于一个表格对于一个表格来说不是唯一的。来说不是唯一的。n n元素：定义表格的一个单元格。元素：定义表格的一个单元格。每行可以有不同数量的单元格，在每行可以有不同数量的单元格，在和和之间是单元格的具体内容。之间是单元格的具体内容。n n需要注意的是：上述的需要注意的是：上述的三个元素必须、三个元素必须、而且只能够
20、配对使用而且只能够配对使用。缺少任何一个。缺少任何一个元素，都无法定义出一个表格。元素，都无法定义出一个表格。表格(TABLE)标记-2n n表格的基本结构表格的基本结构定义表格定义表格 定义表头定义表头/定义表行定义表行定义单元格定义单元格/例：例：02.htm02.htm表格(TABLE)标记-3n n表格的属性 1l lwidthwidth属性：指定表格或某一个表属性：指定表格或某一个表格单元格的宽度。单位可以是格单元格的宽度。单位可以是%或或者象素。者象素。l lheightheight属性：指定表格或某一个表属性：指定表格或某一个表格单元格的高度。单位可以是格单元格的高度。单位可以是
21、%或或者象素。者象素。l lborderborder属性：表格边线粗细属性：表格边线粗细n n例03.htm、04.htm、05.htm表单(FORM)标记n nHTML表单是HTML页面与浏览器端实现交互的重要手段。利用表单可以收集客户端提交的有关信息。n n在HTML里，我们可以定义表单，并且使表单与CGI或ASP等服务器端的表单处理程序配合。我们在网页设计课程中不会涉及程序编制。表单(FORM)标记n n表单是网页上的一个特定区域。这个区域是由一对元素定义的。n n元素l lactionaction属性属性：用来定义表单处理程：用来定义表单处理程序（一个序（一个ASPASP、CGICGI
22、等程序）的位等程序）的位置置(相对地址或绝对地址相对地址或绝对地址)。l lMethodMethod定义表单结果从浏览器传送定义表单结果从浏览器传送到服务器的方法，一般有两种方法：到服务器的方法，一般有两种方法：getget、postpost。表单(FORM)标记n n表单的基本语法:form type=text/plain.表单(FORM)标记4.4.按钮l l包括普通按钮、重置按钮和提交包括普通按钮、重置按钮和提交按钮按钮input type=name=“B1input type=name=“B2表单(FORM)标记5.复选框(Checkbox)l l在一个表单里的所有多选框可以有在一个表
23、单里的所有多选框可以有一个或多个被选中。一个或多个被选中。input input type=checkbox input type=checkbox 表单(FORM)标记n n6.6.单选框单选框(RadioButtonRadioButton)l l一个表单里的所有变量名相同的单选框一个表单里的所有变量名相同的单选框只能够有一个被选中。只能够有一个被选中。input type=value=*input type=l l各个选项的各个选项的namename必须一样必须一样才能达到预期才能达到预期效果效果表单(FORM)标记n n7.下拉列表l l基本语法基本语法option 说明说明option
24、 说明说明2 2 第五部分n n框架网页网页中的框架n n制作框架页面的步骤：制作框架页面的步骤：l l1.1.编写所有子框架页面编写所有子框架页面l l2.2.编写主框架页面编写主框架页面l l3.3.在主框架页面中设定子框架名称在主框架页面中设定子框架名称l l4.4.如果框架页面之间存在链接，在子框架如果框架页面之间存在链接，在子框架中设定链接。中设定链接。注意：框架页面是注意：框架页面是不含不含标签标签的的网页中的框架1.1.基本语法frame 您的浏览器不支持框架，请考虑升级您的浏览器！您的浏览器不支持框架，请考虑升级您的浏览器！网页中的框架n n定义框架的基本语法定义框架的基本语法l l框架由一对框架由一对定义定义l l有两个属性：有两个属性：rowsrows和和colscolsRowsRows定义上下分割的框架的大小；定义上下分割的框架的大小；colscols定义左右分割的框架的大小；定义左右分割的框架的大小；在定义大小时，在定义大小时，rowsrows和和colscols可以使用相对大可以使用相对大小或以百分比为单位。小或以百分比为单位。34.Html34.Html35.html35.html