HTML语言.ppt

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,HTML,语言,*,第三章,HTML,语言,主要内容,3.1,基本概念,3.2,我的第一张网页,3.3,各个标签,2,HTML,语言,3.1,基本概念,HTML,文档的概念,HyperText,Markup Language,，即,超文本标记语言,。由万维网联盟负责制订和更新。,HTML,是一种描述语言，对,WEB,页面中显示内容的属性以,标签,Tag,的形式进行描述。使用该语言可将,文本,、,图像,、,声音,等结合在一张网页文件中。,客户机上的,浏览器,(,browser,),对这些描述进行,解释,将相应页面内容正确显示在显示器上。,一个,WEB,页面就是一个,HTML,文档,。,HTML,是一种解释语言，可以直接运行；,C,、,Basic,、,Java,等都是编译语言，需要经过编译才能运行。,3,HTML,语言,3.2,我的第一张网页,网页实例：,我的主页,我的第一张网页,第三章实例,文件头部,文件主体,标签，表示网页的开始,属性，进一步控制标签作用的内容,属性值,4,HTML,语言,3.1,我的第一张网页,几点说明,1,、,HTML,的标签：识别网上元素、描述元素的样式、指向其它资源，不分大小写。不同的标签可,嵌套使用,，但不可交叉。,2,、标签的属性：要放在,开始标签,的尖括号中，可以有多个属性，用空格分隔，通常不分大小写。,受影响的内容,5,HTML,语言,3.1,我的第一张网页,3,、属性值：前后要加双引号，某些情况下可省略,P16,。值应在预先定义的范围内选取，不能自己定义。,4,、,和,标签：网页文档的开始和结束标签。告诉浏览器是网页文档。,5,、,和,标签：设置,web,页的一些特定信息。,6,、,和,标签：设置,web,页的主体信息。,7,、可以采用存文本文件编辑,HTML,文件。例如记事本。,html,的基本概念,6,HTML,语言,3.3 HTML,的各个标签介绍,3.3.1,文件标签,3.3.2,排版标签,3.3.3,字体标签,3.3.4,表格和清单,3.3.5在网页中建立超链接,3.3.6,多媒体标签,3.3.7,框架标签,3.3.8,表单标签,3.3.9,其它标签,7,HTML,语言,3.3.1,文件标签,文件标签共四种：,类型声明标签,文件头标签,标题标签,正体标签,注：作为完整的,html,文件，文件标签不可缺少。,8,HTML,语言,3.3.1,文件标签,1.,标签,类型声明标签：用于告诉浏览器这个文件是,HTML,文件。,如果将,标签删去，不会影响,html,文件在浏览器中的显示效果。,浏览器的容错功能,9,HTML,语言,3.3.1,文件标签,2.,标签,放在,标签之后，用以描述,html,文件整体的一些信息。,标签对中的内容不会显示在浏览器页面上。只为,html,的解释器服务。,与,构成了,HTML,文件的两大主要部分。,10,HTML,语言,文件头的,(),相关标记应用,1.,标识网页主体的标记,2,.,标记,3.,注释标记,11,HTML,语言,1.,标识网页主体的标记,标识网页的主题，其中的内容将在浏览器的标题栏中显示，不出现在页面内！,例如：,欢迎光临,网站,12,HTML,语言,2,.,标记,是一个辅助性标记，且没有结束标记。主要用于设置网页的一些属性。,标记共有两个重要的属性，分别为：,name,：,用于描述网页，对应的参数值则用,content,标示。,一大应用：告诉搜索引擎改网页的关键字,http-equiv,：,相当于,HTTP,的文件头的作用，可以向浏览器传回一些有用的信息，以帮助正确显示网页内容。与“,name”,属性一样，其参数值用,content,标示。,一大应用，设置自动刷新并指向新页面。,例如：,13,HTML,语言,3.3.1,文件标签,3.,标签,标签对中的内容将显示在网页文件上。所以网页文件的大部分信息内容都位于,标签的包围之中。,与,这些文件标签不同，,body,标签支持属性。,14,HTML,语言,3.3.1,文件标签,3.,标签,(1)text,属性,设定网页上的文字颜色,COLOR,的值,可以是,以十六进制表示,的颜色，或者是,16,种颜色,中的一种。,名称,|,颜色,|,名称,|,颜色,black|,黑色,|Red|,红色,Line|,石灰色,|Maroon|,栗色,Gray|,灰色,|Silver|,银白色,Navy|,海军蓝,|Olive|,橄榄绿,Purple|,紫色,|Yellow|,黄色,Aqua|,浅绿色,|Blue|,蓝色,Green|,绿色,|Fuchsia|,紫红色,White|,白色,|Teal|,暗蓝绿,15,HTML,语言,3.3.1,文件标签,3.,标签,(2),bgcolor,属性,设定网页上的背景色,16,HTML,语言,3.3.1,文件标签,3.,标签,(3)link,、,alink,、,vlink,属性,设定超级链接不同状态的颜色,link,：,指定,html,文档中,访问之前的超链接,的颜色,alink,:,指定,html,文档中,正在按下的超链接,的颜色。,vlink,:,指定,html,文档中,访问之后的超链接,的颜色,若,body,属性中不指定，则使用默认值，分别为：,link=“#0000ff”(,蓝色）,alink,=“#ff0000”,（红色）,vlink,=“#800080”,（紫色）,17,HTML,语言,3.3.1,文件标签,3.,标签,(4)background,属性,设定背景图片,选择图片,保存图片,编写,html,代码,(5)scroll,属性,设定隐藏浏览器的滚动条,常用于弹出性页面（广告弹出窗口、弹出最新通知等）,scroll=“no”,即可隐藏滚动条。,18,HTML,语言,3.3.2,排版标签,排版标签主要为以下几种：,：注释,：段落,：换行,：水平线,：预设格式,：区段,：不折行,：建议折行,19,HTML,语言,1.,注释标记,用于在,HTML,文档中书写说明性的文字，内容在浏览器中不显示。,格式：,20,HTML,语言,2,、段落、换行编辑,分段标签,和,强制换行标签,分段标签用于将文档,划分为段落,，标签为,，,效果相当于在段间插入一个硬回车，段间,有空行,。,要将文字,强制换行,，而不是另起段落，可以用换行标签,实现该功能。换行后，,与前一行间无空行,注意，,仅单独使用，而非成对出现。即非,围堵标签,。,21,HTML,语言,2,、段落、换行编辑,续,段落对齐的方法,align,属性：用于设置段落的对齐方式，其常见取值有,4,种：,right,（右对齐）,left,（左对齐）,center,（居中对齐）,justify,（两端对齐）,例如：,center,标签：,.,用以居中,22,HTML,语言,3,、水平线,（,hr,horizon,）,用于在标签所在位置,插入一条水平线,，可以美化网页。,与,类似，,也无结束标签。,属性,size,（粗细）,像素，值应为整数，默认为,2,。,width,（宽度）,值可用百分比和像素两种方式表示。,color,（颜色）,值为颜色,align,（对齐方式）,left/right/center,noshade,（无阴影）,无需值，用以指定没有阴影的水平线,title,（标题）,设定标题，当鼠标移至水平线时才显示。,3,hr.htm,23,HTML,语言,4.,预设格式和区段标签,（,1,）,预格式化文本,html,源代码中书写的空格、回车等字符在版式输出时均无效，必须用特殊的字符串来代替。如空格,&,nbsp,;,。,采用,标签可使源文件中的,空格、回车,等版式符号正常地在浏览器中显示。,3,pre.htm,24,HTML,语言,4.,预设格式和区段标签,（,2,）,设置区段,P32,主要用于,文件分节,，位于,标签对,内的多段文本被认为一节，可设置一致的对齐方式。,应与,align,联用。,在,Dreamweaver,中，用该标签对设置,层,。,25,HTML,语言,5.,不折行和,建议折行,详见,P33,自学,26,HTML,语言,3.3.3,字体标签,均为,围堵标签,（即有开始标签和结束标签），有,实体标签,（显示效果绝对）和,逻辑标签,（浏览器是否支持）之分。,用于设置字符的风格。详见表,2-1(P37),和,：加粗字体,/,：倾斜字体,：标题标签,：字体设置,：字体设置,/,：设置字符串宽度等宽,和,：下划线和删除线,和,：字体变大和变小,和,：下标和上标,需要设置其具体属性。,3 font.html,27,HTML,语言,3.3.3,字体标签,font,标签：,.,size,属性：,控制文字的大小,（,17,，默认,3,）；或用”,+”,、”,-”,前缀，表示相对于,标签所设定的字体大小。,color,属性：,控制文字的颜色,（,#,rrggbb,16,进制数码，或者是下列预定义色彩：,black,olive,teal,red,blue,maroon,navy,gray,lime,fuchsia,white,green,purple,silver,yellow,aqua,）,face,属性：,指定字体样式,，可指定多种，用逗号分隔，哪种字体被安装，即以哪种字体显示。,28,HTML,语言,颜色的英文单词,名称,|,颜色,|,名称,|,颜色,black|,黑色,|Red|,红色,Line|,石灰色,|Maroon|,栗色,Gray|,灰色,|Silver|,银白色,Navy|,海军蓝,|Olive|,橄榄绿,Purple|,紫色,|Yellow|,黄色,Aqua|,浅绿色,|Blue|,蓝色,Green|,绿色,|Fuchsia|,紫红色,White|,白色,|Teal|,暗蓝绿,29,HTML,语言,3.3.3,字体标签,basefont,标签：,.,设定页面基本字体的显示大小,。若某段文字未被,标签包含，则其输出风格为,所设定的风格。,其属性设置基本与,标签相同，但,size,属性,必须设定一个绝对的,size,大小。,不能用“”和“”前缀,。,size,属性：,color,属性：,face,属性：,30,HTML,语言,3.3.4,、表格与清单,1,、清单,、,、,标签,（,1,）有序清单定义：,定义有序清单那需要使用有序清单标签,和列表项（,list item,）标签,，,语法如下：,list item1,list item2,另：,#=a,a,i,i,1,3,ul.html,31,HTML,语言,3.3.4,、表格与清单,（,2,）无序清单定义,要使用无序清单标签,和列表项标签,语法如下：,list item1,list item2,li,的属性,type,的应用：,disp,；,square,；,circle,32,HTML,语言,2,、表格标签,、,、,（,1,）,标签,声明表格，其他表格标签应在该标签范围内容使用。,属性,P43,border,cellpadding,cellspacing,cols,width,height,3.3.4,、表格与清单,align,valign,bgcolor,bordercolor,borderColorLight,和,borderColorDark,background,33,HTML,语言,（,2,）,标签和,标签,（,P43,，最后一行错误修正）,：表示表格的行；,：表示表格的单元格,常用属性：,width,height,align,：文字水平对齐（,left,、,center,、,right,）,valign,：文字垂直对齐（,top,、,middle,、,bottom,）,bgcolor,bordercolor,borderColorLight,和,borderColorDark,background,3.3.4,、表格与清单,34,HTML,语言,（,3,）,表格的应用,页面显示表格的需要,嵌入表格,排版,排版布局、对齐某些文字。,3.3.4,、表格与清单,35,HTML,语言,3.3.5,在网页中建立超链接,P50,超链接标签,（围堵标签）,a,是anchor,的首字母，,标签的,最基本属性,是,href,和,name,。,href,：,值为一个有效的,URL,，表明标签围堵的字符串是一个超链接。,若用户单击该超链接，则会转向,href,属性所指定的,URL,地址。,36,HTML,语言,3.3.5,在网页中建立超链接,P50,href,属性值的常用的几种形式,1,指向,本地网页,的链接：,若链接至相同文件夹的文件：指定文件名即可,若链接至不同文件夹的文件：指定文件的具体路径,2,链接至,WWW,服务器上的某文件：,3,链接至,URL,指定的,FTP,站点：,4,链接至,E-mail,地址：,37,HTML,语言,3.3.5,在网页中建立超链接,P50,name,属性,建立指向页面特定部分的链接,若网页的内容众多，需要多屏来显示（拖动滚动条），可利用,name,属性对同一页面的不同部分进行链接。,步骤：,(1),用,name,属性在特定部分做标记,(,类似书签的作用,),。,例如：,(2),在长文档顶部以超链接的方式显示一个目录，将内容链接至本页的具体内容中去。,例如：,第一章,38,HTML,语言,3.3.6,多媒体标签,1,、插入图像,P54,用,标签在,html,文件中插入图片，,标签常用的属性,src,width,、,height,alt,align,border,hspace,、,vspace,name,usemap,longdesc,lowsrc,例如：,39,HTML,语言,2,、嵌入其他媒体,P54,背景音乐：,标记（支持,midi,、,wav,、,au,格式的文件）,#=WAV,文件的,URL,#=,循环数,插入视频剪辑：,src,：视频的封面的,URL(,在浏览器尚未完全读入视频,文件时显示的内容,),dynsrc,：视频文件的,URL,；,start,：何时播放,(,fileopen,/,mouseover,),controls:,是否使用控制条,(,无属性值,),loop,：循环次数,(,数值,;infinite,无限循环,),loopdelay,：延时（毫秒数）,标签：嵌入文件（显示文件的控制板）。,3.3.6,多媒体标签,40,HTML,语言,3.3.7,框架设计,(P34),允许设计者在多个视图内放置页面。,框架标签主要包括：,、,、,标签。,1,、,：围堵标签，所有其他框架标签应包含在该标签对内。,常用属性：,rows,：横行排列多个窗口，指定每个窗口的高度,cols,：纵向排列多个窗口，指定每个窗口的宽度,border,：设定窗口边界值，单位为像素,bordercolor,：窗口边界颜色,41,HTML,语言,3.3.7,框架设计,(P34),2,、,：具体定义每个窗口，包括窗口显示的网页文件。,常用属性：,src,：,设定该窗口显示的页面。,src,=“,url,name,：,设定窗口的唯一的名字，用作标识。,scrolling,：是否显示滚动条（,yes,no,auto,）,noresize,：设定窗口大小禁止被改变。无属性值。,42,HTML,语言,3.3.8,表单设计,(P45),用于实现与服务器端的交互。,如上网注册时用于填写个人资料，而后按,递交,按钮，这样，服务器即可处理递交的信息，这个页面即为表单。,主要包括：,、,、,、,、,等标签。,43,HTML,语言,3.3.8,表单设计,(P45),1,、,标签,围堵标签，所有其他的表单标签应写作,标签包含的范围内。,主要属性：,action,：值为,URL,，指向处理表单的程序。,method,：设定数据的传送方式。,get,或,post,。,name,：设定表单的名字，在处理表单时可能会用到。,44,HTML,语言,3.3.8,表单设计,(P45),2,、,标签,用于制作各种表单输入元素、如文本框、单选框、复选框等。,主要属性：,type,：设置输出形式。属性值详见,P45,value,：设定表单元素的初始值，显示在页面上。,disabled,：用于设定表单元素不被输入和修改。无属性值。,readonly,：只读。无属性值。,45,HTML,语言,3.3.8,表单设计,(P45),3,、,标签和,标签,用于形成下拉列表，必须与,标签结合使用。,标签是围堵标签，被,标签包围用于设置下拉列表每个选项的内容。,主要属性：,selected,：用于设定下拉列表的初始选择状况。,value,：若设置了,value,属性，则表单提交的内容即为,value,属性中设定的内容，而非下拉列表中显示的内容。,46,HTML,语言,3.3.8,表单设计,(P45),4,、,标签,围堵标签，是多行文本输入框标签。,主要属性：,rows,：用于设定多行文本输入框的最大行数。,cols,：用于设定多行文本输入框的最大列数。,wrap,：用于设定是否转行方式。,off/virtual/physical,accesskey,：用于设定一个激活文本框的快捷键，激活时要按住,Alt,键，再按设定的键即可。,47,HTML,语言,3.3.9,其他标签：会移动的文字,(Marquee),基本语法：,.,文字移动属性的设置：,方向,#=left,right,方式,#=scroll,slide,alternate,循环,#=,次数；若未指定则循环不止,速度,：值越大越快,延时,：值越大时延越长,外观,(Layout),设置,对齐方式,(Align)#=top,middle,bottom,底色,面积,48,HTML,语言,