网页设计基础HTML语言PPT教学课件.ppt

标记语言:HTML,HTML语言概述HTML的基本语法HTML的基本标记HTML的标记及其属性,2,6系统设计_6.5数据存储设计,一.HTML语言概述1.超文本标记语言HTML(HyperTextMarkupLanguage)是WEB世界的通用“语言”；2.WEB服务器与浏览器之间通过它互相沟通，WEB中的信息可以通过它来表现；没有HTML就没有WWW“世界”3.HTML不是程序设计语言，而是一种结构语言；4.HTML与平台无关，只要是相同的浏览器；,3,6系统设计_6.5数据存储设计,5.HTML有许多元素，文档通过元素标记就形成所谓的HTML文档；6.HTML是文本文件，可以用纯文本编辑器来编辑(如Windows的记事本、写字板)；7.其文件后缀名必须是.html或.htm；8.只有通过浏览器才可以对HTML文档进行相应的解释。,4,6系统设计_6.5数据存储设计,HTML语言概述HTML的基本语法HTML的基本标记HTML的标记及其属性,5,6系统设计_6.5数据存储设计,二、HTML的基本语法HTML的主要语法是标记、标记属性和内容注释：1.标记用于描述功能的符号，如：一个HTML实例2.标记属性HTML语言的的标记具有一定的属性，如：3.内容注释基本格式：,6,6系统设计_6.5数据存储设计,HTML文档的基本结构网页的标题网页的内容，很多标记都作用于此。,7,6系统设计_6.5数据存储设计,1.文档标记：文档处于标记与之间，用以声明这是HTML文件，便于浏览器正确处理。2.头部与体部：文件分两部分，由至称为头部，至称体部(头部用以存载重要信息，而只有体部会被显示，所以大部分标记会运用于体部)。基本上两者各有适用的标记，如只可出现于开头部分。3.标记：标示文件标题，显示于浏览器标题栏，每页应有明确的标题。,特点解说：,8,6系统设计_6.5数据存储设计,HTML语言概述HTML的基本语法HTML的基本标记HTML的标记及其属性,9,6系统设计_6.5数据存储设计,三.HTML的基本标记1.HTML的基本标记文档标记：文档标记2.HTML的基本标记头部标记：头部标记头部标题标记,10,6系统设计_6.5数据存储设计,3.HTML的基本标记体部标记：(1)正文标记(2)换行(ForcedLineBreaks)标记(3)标题(Heading)标记(n为层次标号)(4)段落(Paragraphs)标记(5)水平线(HorizontalRules)标记(6)字符格式标记：BoldItalicUnderlined(7)字体(Font)标记属性：Face-字体Size-字号Color-颜色,11,6系统设计_6.5数据存储设计,(8)图像标记属性列表：SRC、BORDER、WIDTH、HEIGHT、ALIGN、ALT(9)超链接标记.属性列表：HREF、NAME、TARGET(10)列表(Lists)标记、(11)表格标记(12)表单标记(13)框架标记,12,6系统设计_6.5数据存储设计,HTML语言概述HTML的基本语法HTML的基本标记HTML的标记及其属性,13,6系统设计_6.5数据存储设计,四.HTML的标记及其属性1.-Bgcolor-背景色Text-文本色Link-超级链接对象的颜色Alink-连接中对象的颜色Vlink-连接后对象的颜色Background-背景文件bgproperties-定义了背景属性，fixed就是设定固定的效果。,14,6系统设计_6.5数据存储设计,四.HTML的标记及其属性2.换行标记Break单独出现,用于使网页文本另起一行。,15,6系统设计_6.5数据存储设计,四.HTML的标记及其属性3.标题标记(i=1,2,3,4,5,6)用于设标记题，隐含换行的作用，H1最大，H6最小，align属性用于对齐。,16,6系统设计_6.5数据存储设计,四.HTML的标记及其属性4.段落标记-用于在网页内插入新的段落，可以成对也可以不成对，具有align属性。,17,6系统设计_6.5数据存储设计,四.HTML的标记及其属性5.水平线标记单独使用，属性：SizeWidthAlign,18,6系统设计_6.5数据存储设计,四.HTML的标记及其属性6.字符格式标记BoldItalicUnderlined,19,6系统设计_6.5数据存储设计,四.HTML的标记及其属性7.字体标记属性：Face-字体Size-字号Color-颜色,20,6系统设计_6.5数据存储设计,四.HTML的标记及其属性标记及其属性综合例子文字显示和段落控制一级标题这是黑体，大小为7号字，蓝色,21,6系统设计_6.5数据存储设计,四.HTML的标记及其属性标记及其属性综合例子(续)这是一个段落这是斜体这是粗体这是下划线字体这是大字体这是小字体这是下标字体1,22,6系统设计_6.5数据存储设计,四.HTML的标记及其属性标记及其属性综合例子(续)这是上标字体2这些标记还可以混合使用这是另一个段落b,23,6系统设计_6.5数据存储设计,四.HTML的标记及其属性8.图像标记SRC：指明图像文件的地址，可使用本地文件名，也可使用URL形式；WIDTH：图像宽度，值为整数，单位为屏幕像素点；HEIGHT：图像高度，值为整数，单位为屏幕像素点；ALIGN：图像对齐方式；ALT：以小标签显示该属性值；BORDER：指明图像边框粗细。,24,6系统设计_6.5数据存储设计,图像标记案例,25,6系统设计_6.5数据存储设计,四.HTML的标记及其属性9.超链接标记.基本链接的分类:外部链接链接至网络的某个URL网址或文件内部链接链接本HTML文件的某个区段常用链接标记.链接指令。相关属性:HREF链接的URL位址或文件NAME名称TARGET指定链接的URL位址或文件显示于哪个窗口外部链接：,26,6系统设计_6.5数据存储设计,超链接标记.案例超链接URL点击这里可以见我的照片点击这里可以进入金陵热线点击这里可以给我发信点击这里可以到我的简历我的简历：,27,6系统设计_6.5数据存储设计,四.HTML的标记及其属性10.HTML的列表标记列表类型：无序列表(unorderedList)有序列表(orderedlist)定义列表(definitionlist)列表标记：无序列表标记：列表项有序列表标记：列表项定义列表标记：列表项,28,6系统设计_6.5数据存储设计,四.HTML的标记及其属性10.HTML的列表标记(1)无序列表(ul)无序列表用(ul)开始，每一个列表条目用引导，最后是，注意列表条目不需要结尾标记。输出时每一列表条目缩进，并且以圆点标示。例如：TodayTommorow输出为TodayTommorow,29,6系统设计_6.5数据存储设计,四.HTML的标记及其属性10.HTML的列表标记(2)有序列表有序列表与无序列表相比，只是在输出时列表条目用数字标示，下面是一个例子及其输出：例如：TodayTommorow输出为：1.Today2.Tommorow,30,6系统设计_6.5数据存储设计,四.HTML的标记及其属性10.HTML的列表标记(3)定义列表定义列表用于对列表条目进行简短说明的场合，用开始，列表条目用引导，它的说明用引导。Item1Thedefinitionofitem1Item2Definitionorexplainationofitem2输出为：Item1Thedefinitionofitem1Item2Definitonorexplainationofitem2,31,6系统设计_6.5数据存储设计,HTML的列表标记案例课表今天我要上以下的课局域网工程操作系统数据结构今天我要上以下的课,32,6系统设计_6.5数据存储设计,HTML的列表标记案例(续)局域网工程操作系统数据结构局域网局域网是指将小范围内的数据设备经过通信系统连接起来的计算机网络,33,6系统设计_6.5数据存储设计,表格的基本构成：标题(Caption)：指示表格的含义；可有可无数据项名(标记)：指示行、列存放内容的说明表格数据：表格中存放的信息表格单元：表格中各个独立的区域,34,6系统设计_6.5数据存储设计,四.HTML的标记及其属性11.表格的基本标记.HTML要求一个表格的全部内容要包含在该标记中；其border属性用来控制表格边框的宽度，无border时为表格没有边框。-定义表行：用和表示表格每一行的开始与结束；-定义表头：用和表示数据标记(数据项名)-定义表元(表格的具体数据)：用和表示数据项，用于存放数据和标记将产生不同的显示效果。,35,6系统设计_6.5数据存储设计,四.HTML的标记及其属性11.表格的基本标记.(1)表格的对齐表格的对齐是指规定表格在网页上的位置。使用标记的ALIGN属性可以将表格定位在网页的左端、右端或居中。(2)表格单元的对齐指规定表格数据在表格单元中的位置。表格单元的对齐方向有：水平和垂直。用Align和Valign控制。,36,6系统设计_6.5数据存储设计,(3)表格的大小及间距表格的宽度可以用WIDTH属性来定义，有两种方法：绝对定义和相对定义。相对定义是用屏幕的宽度的百分比来定义如60%。表格的间距通过标记的几个属性定义：border属性：表格边框宽度；cellspacing属性：表格单元之间的距离；cellpadding属性：表格单元边缘与单元内容之间的距离。,37,6系统设计_6.5数据存储设计,表格的基本标记案例1物资列表商品类别数量日用百货10电器20轿车5,38,6系统设计_6.5数据存储设计,表格的基本标记案例2表格中使用链接,39,6系统设计_6.5数据存储设计,练习,制作一个简单的通迅录,40,6系统设计_6.5数据存储设计,四.HTML的标记及其属性11.表格的基本标记.(4)跨多列的单元格A.有横向通栏的表用属性说明：colspan表示横向栏距，#代表通栏占据的网格数，它是一个小于表的横向网格数的整数。跨多列的单元格MorningMenuFoodDrinkSweet食物饮料糕点,41,6系统设计_6.5数据存储设计,B.有纵向通栏的表用rowspan=#属性说明：rowspan表示纵向栏距，#表示通栏占据的网格数，应小于纵向网络数。需要说明的是有纵向通栏的表，每一行必须用明确给出一横向栏目结束,这是和表的基本形式不同的。跨多行的单元格MorningMenuFoodADrinkBSweetC,42,6系统设计_6.5数据存储设计,四.HTML的标记及其属性11.表格的基本标记.(4)单元格的背景色彩和背景图象#=rrggbb16进制RGB数码,或者是下列预定义色彩名称。FoodDrinkSweetAB,43,6系统设计_6.5数据存储设计,表单在Web网页中用来给访问者填写信息，从而能获得用户信息，使网页具有交互的功能。一般是将表单设计在一个Html文档中，当用户填写完信息后做提交(submit)操作。提交后表单的内容就从客户端的浏览器传送到服务器上。经过服务器上的ASP或CGI等处理程序处理后，将用户所需信息传送回客户端的浏览器上，这样网页就具有了交互性。,44,6系统设计_6.5数据存储设计,四.HTML的标记及其属性(2007.3.19)12.表单定义语法如下：定义定义用来创建一个表单，也即定义表单的开始和结束位置，在标志对之间的一切都属于表单的内容。,45,6系统设计_6.5数据存储设计,四.HTML的标记及其属性表单具有action、method等属性：(1)action值是处理程序的程序名(包括网络路径:网址或相对路径)如：，当用户提交表单时，服务器将执行网址,46,6系统设计_6.5数据存储设计,四.HTML的标记及其属性如果将表单的method属性设为POST，则浏览器会将表单的值包括在发送给服务器的消息的正文中。2)post方式，与get方式相反，它是当前的Html文档把数据传送给处理程序，传送的数据量要比使用GET方式的大的多。如果将表单的method属性设为GET，则浏览器会将表单值追加到action属性中指定的URL中，并将信息发送给服务器。,47,6系统设计_6.5数据存储设计,四.HTML的标记及其属性表单的输入域：以标记定义的多种输入域，包括text，radio，checkbox，password，hidden，button，submit和reset等；以标记定义的文本域；以标记和定义的下拉列表框。,48,6系统设计_6.5数据存储设计,四.HTML的标记及其属性(1)用来定义用户输入区，用户可在其中输入信息。该标记必须放在标记对之间。标记中共提供了八种输入区域，具体是哪一种类型由type属性来决定。,49,6系统设计_6.5数据存储设计,四.HTML的标记及其属性请看下边列表：,50,6系统设计_6.5数据存储设计,四.HTML的标记及其属性1)文字输入和密码输入，其中，type=text，password你的姓名:您的主页的网址:密码:,51,6系统设计_6.5数据存储设计,四.HTML的标记及其属性,52,6系统设计_6.5数据存储设计,四.HTML的标记及其属性2)复选框(Checkbox)和单选框(RadioButton)BananaAppleOrange,53,6系统设计_6.5数据存储设计,四.HTML的标记及其属性BananaAppleOrange,54,6系统设计_6.5数据存储设计,四.HTML的标记及其属性3)图像和隐藏文本Hereisahiddenelement.,55,6系统设计_6.5数据存储设计,四.HTML的标记及其属性(2)用来创建一个下拉列表框或复选列表框，具有multiple、name和size属性：1)multiple属性不用赋值，直接加入标记中即可使用，加入了此属性后列表框可多选；2)name是此列表框的名字；3)size属性用来设置列表的高度，缺省时值为1，若没有设置(加入)multiple属性，显示的将是一个弹出式的列表框。,56,6系统设计_6.5数据存储设计,四.HTML的标记及其属性(3)标记用来指定列表框中的一个选项，它放在标记对之间。标记具有selected和value属性，selected用来指定默认选项，value属性用来给指定的那一个选项赋值，这个值是要传送到服务器上的，服务器正是通过调用区域的名字的value属性来获得该区域选中的数据项的。请看下例：,57,6系统设计_6.5数据存储设计,四.HTML的标记及其属性,58,6系统设计_6.5数据存储设计,四.HTML的标记及其属性BananaAppleOrangeC程序WEB程序高数软件工程,59,6系统设计_6.5数据存储设计,四.HTML的标记及其属性(3)用来创建一个可以输入多行的文本框，此标记对用于标志对之间。具有name、cols和rows属性。cols和rows属性分别用来设置文本框的列数和行数，这里列与行是以字符数为单位的。,60,6系统设计_6.5数据存储设计,四.HTML的标记及其属性,61,6系统设计_6.5数据存储设计,四.HTML的标记及其属性表单举例：表单使用请选择您学习的方式全日制在读走读函授请选择您所要学习的课程局域网工程,62,6系统设计_6.5数据存储设计,四.HTML的标记及其属性操作系统数据结构请输入您的要求,63,6系统设计_6.5数据存储设计,四.HTML的标记及其属性13.框架框架的基本常识前面我们学习的HTML文件，当用户用浏览器阅读时，都是在单一窗口中显示。即如果用户正在阅读某个网页，再调用另一个网页时，则前一个网页自动关闭。这里介绍几个新的标记，用它们书写的HTML文件，可以对屏幕进行横向或纵向的分割，在同一屏幕上出现多个窗口，每个窗口上显示不同的网页内容，并且可以独立变化。使用多窗口技术，可以使屏幕的信息量增大，使Web网页更加吸引读者。多窗口（FRAMESET）HTML书写并不复杂，只是多了几个标记。,64,6系统设计_6.5数据存储设计,四.HTML的标记及其属性框架及基本格式1)框架将流览器窗口分成多个区域，每个区域可以单独显示一个html文件，各个区域也可相关连地显示某一个内容2)框架由指定，并且可以嵌签，分区部分显示的内容用指定。可以将窗口横向分成几个部分，也可以分成纵向几个部分。,65,6系统设计_6.5数据存储设计,四.HTML的标记及其属性框架及基本格式3)框架的基本结构如下：.,66,6系统设计_6.5数据存储设计,四.HTML的标记及其属性框架的基本种类1)横向分割窗口(横向帧结构)横向帧结构用指定，#可以是一个百分数，也可以是一整数。前者规定各帧占窗口的百分数，后者指定各帧的绝对大小。例如，下面的例子将窗口分成30%、20%、50%的几个区域，各区域的内容分别为A.html，B.html，C.html。横向排列多个窗口：,67,6系统设计_6.5数据存储设计,四.HTML的标记及其属性框架的基本种类2)纵向分割窗口(纵向帧结构)纵向帧结构用指定，参见下例，纵向排列多个窗口：,68,6系统设计_6.5数据存储设计,四.HTML的标记及其属性框架的基本种类3)纵横分割窗口(混合帧结构)将窗口分成横纵几个区域时，用代替链接至即可将原的分好的区域再次分割。下面的例子先将窗口分成20%,80%，然后将右边的区域再分成分别占40%和60%的上下两个区域，纵横排列多个窗口：,69,6系统设计_6.5数据存储设计,四.HTML的标记及