HTML语言与网页设计

97,单击此处编辑母版标题样式,单击此处编辑母版文本样式,2.HTML,语言与网页设计,复习要点：,HTML,通用标记结构、,HTML,文档的基本结构、,meta,标记、超链接标记、字符实体、各种表单标记,什么是,CSS,样式表定义语法、,CSS,选择符,样式引用的基本方式,样式的优先级,html,与,xhtml,的主要区别,2.HTML,语言与网页设计,2.1 HTML,语言简介,HTML,，即超文本标记语言，是英文,HyperText,Markup Language,的缩写，是一种独立于操作系统的网页编写语言。,HTML,的最大特点就是用标记描述和表现信息的显示格式和内容。所谓标记就是采用一系列的指令符号来控制输出的效果，,通用标记结构,为：,内容,元素名即预定义的标记（签）,属性：用来指定标记的行为确定元素内容的显示方式，如果标记有属性，则将跟在元素名后，属性之间用一个或多个制表符、空格、回车符分开，不区分出现的顺序。,：把标记和标记所描述的内容区分开，一般成对出现，结束标记没有属性,HTML,的元素名、属性不区分大小写（,xHTML,区分且只能用小写），但,最好用小写,（有的操作系统大小敏感，如,unix,）,HTML,的源文件是纯文本文件，可以用任何一种文本编辑器来编写，但后缀应用,.,htm,或,.html,。,2.2,HTML,文档,的基本结构,HTML,文档包含定义文档内容的文本和定义文档结构及外观的标记，基本结构如下：,：容器标记,头标记，用于定义文档标题及其它可能会用于控制文档显示或访问的参数，如,、,、,、,、,等,正文，包括要显示的文本和文档的控制标记,：容器结束标记,2.3,HTML,的常用元素和标记,2.3.1 HTML,结构标记,（,1,）,标记,功能：界定一个完整的,HTML,文档,属性：,dir,lang, version,结束标记：,包含,:,head_tag,body_tag, frames,dir,属性：内容的显示方式，用于本标记用于决定整个文档的显示方向，默认为”,ltr,”,，用于其它标记则用于决定该标记内的内容的显示方向,lang,属性：文档或文本的显示语言,version,属性：说明支持的,html,标准的版本，在,HTML4,中已弃用，并用,标记来代替,.,例,：, ,如,yahoo,（,2,）,标记,功能：定义文档头区,属性：,dir,lang, profile,结束标记：,包含,:,head_content,，如,base,、,object,、,link,、,style,、,script,、,meta,使用范围：,html_tag,（,3,）,标记,功能：定义文档标题,属性：,dir,lang,结束标记：,包含,:,plain_text,使用范围：,head_content,说明：,此标记只能在,head,标记内出现,.,title,的内容通常在浏览器的标题栏中显示,.,浏览器中收藏夹内书签的名称是,title,的内容,.,title,的内容可以方便搜索引擎索引页面,.,从搜索引擎搜索到的内容的标题往往是网页,title,的内容,.,示例,：,当当,标记,功能：提供用户不可见信息，为其它应用程序和搜索引擎访问提供可用信息,属性：,meta,属性主要分为两组,name,属性与,content,属性,name,属性用于是以名称,/,值形式的名称描述网页,name,属性的值所描述的内容,(,值,),通过,content,属性表示,便于搜索引擎机器人查找,分类,.,其中最重要的是,description,keywords,和,robots,.,http-equiv,属性与,content,属性,http-equiv,属性用于提供,HTTP,协议的响应头报文,(MIME,文档头,),它是以名称,/,值形式的名称,http-equiv,属性的值所描述的内容,(,值,),通过,content,属性表示,通常为网页加载前提供给浏览器等设备使用,.,其中最重要的是,content-type,charset,提供编码信息,refresh,刷新与跳转页面,no-cache,页面缓存,expires,网页缓存过期时间,.,结束标记：无,使用范围：,head_content,标记应用：,name,属性与,content,属性组合,定义网页关键词,阿里巴巴,定义网页简短描述,定义搜索引擎索引要求,robotterms,是一组使用逗号,(,),分割的值，通常有如下几种取值：,none,，,noindex,，,nofollow,，,all,，,index,和,follow,。,sciencedirect,标记应用：,http-equiv,属性与,content,属性组合,定义文件内容类型及编码信息,type,的常见取值为,application, audio, image, message ,multipart, text, video,示例：,阿里巴巴,Alibaba,设置网页缓存过期时间,用法：,说明：指定网页在缓存中的过期时间，一旦网页过期，必须到服务器上重新加载。,注意：必须使用,GMT,的时间格式，或直接设为,0(,数字表示多少时间后过期,),。,定义页面缓存,说明,:,为了提高速度一些浏览器会缓存浏览者浏览过的页面,通过上面的定义,浏览器一般不会缓存页面,而且浏览器无法脱机浏览,.,重定向,:,刷新与跳转页面,标记,功能,:,定义基,URL,用于页面的链接与引用,属性,:,href,target,结束标记,:,单独出现,使用范围,:head,区,href,属性,:,当前文档的完整,URL,target,属性,:,指定目标窗口或框架,网易,说明,:,当使用,相对路径,定义链接时，可以使用,base,标记定义基,URL,解析所有文档中定义的相对路径的,URL,。,Our Products, Have you seen our Bird Cages? ,其它常用,head,区标记,:,在文档中声明使用外部资源,阿里巴巴,:,声明样式,用来创建,CSS,属性，以控制整个文档主体内容的显示特性,:,在文档中使用脚本,:,定义浏览器输出非标准对象的方法,在网页中嵌入除图片外的多媒体,标记,功能：定义文档主体,属性：控制文档外观的属性；将文档自身与其它可编程功能相联系的属性；标记和说明文档主体以供将来参考的属性,结束标记：,包含,:,body_content,使用范围：,html_tag,注释标记,:,描述文档的各个部分要做什么,解释为什么要这样编写某段代码,包含不想在文件中显示的信息,标示文件的禁用部分,2.3.2,字符实体,用于标识特殊字符：不可见字符和特殊用途字符,格式,：,&#,：,#,代表字符实体名称或者字符的,ASCII,码值,http:/www.w3.org/TR/html4/sgml/entities.html,显示方式,数字标识符,实体名称,对象,注释, ,Tab,键, ,回车键, ,&,nbsp,空格,!,!,惊叹号,“,",&,quot,引号,在脚本中很有用,/,/,斜线（斜杠）,>,&,gt,大于号,\,反斜线（反斜杠）,…,省略号,TM,™,商标, ,&,amp,位与运算符,(&),©,©,版权,®,&,reg,注册商标,±,&,plusmn,加号或减号,2.3.3,对象与多媒体标记,标记,标记,object,标记,object,标记是成对出现的,以,开始，,结束,使用,object,标记可以在网页中嵌入各种多媒体或复杂外部应用即对象，例如,Flash,Java,Applets,MP3,QuickTime Movies,等,object,标记通常配合,param,标记一同使用,后者用于对象初始化,在网页中嵌入图像，一般使用,img,标记,object,可以完全代替标准不赞成使用的,applet,embed, bgsound,标记,Object,标记的属性,一般属性,archive -,包含多个使用逗号,(,),分割的,Java,类或外部资源，用于增强,applet,的功能，定义,applet,代码,border -,边框,classid,-,关联一个应用程序，执行嵌入内容的应用程序在,windows,系统中的唯一,id(,不能改变此,id,，否则程序将出现异常,),，,例如,clsid:D27CDB6E-AE6D-11cf-96B8-444553540000 - Flash,codebase,-,为,相对路径,提供基,URL,，,IE,浏览器通常将此属性中的内容定义为运行嵌入内容所要加载的插件，,例如, - Flash,codetype,-,嵌入内容的,MIME,类型,，,例如,application/java - Java,application/x-shockwave-flash - Flash,declare,-,声明没有实例化的嵌入对象，此对象通常在加载后，或者当嵌入对象的某些参数将使用其它嵌入对象时可以使用,即实例化以后使用,.,此时对象需指定,id,data,-,嵌入内容,(,实例对象,),的,URL,，可以是基于,codebase,属性的,相对路径,height -,嵌入内容的高度，单位像素,hspace,-,嵌入内容水平方向的空白，应使用,CSS,margin,代替,standby -,文档加载时显示的文本信息,tabindex,-,使用,Tab,键的遍历顺序,usemap,-,定义图像点击区域,vspace,-,嵌入内容垂直方向的空白，应使用,CSS,margin,代替,width -,嵌入内容的宽度，单位像素,param,标签,:,初始化对象,为,object,标签提供嵌入内容的运行时参数的,name,与,value,对,param,标签是单独出现的,param,标签用于定义网页中嵌入内容的运行时参数,param,标签应使用在,object,或,applet,标签内,属性,id,-,唯一标识符,name,-,名称，,name,与,value,属性组成一对,type -,嵌入内容的,MIME,类型,value - name,的对应值,valuetype,-,指定参数类型,data -,参数是一个简单的字符串，默认值,ref -,参数是,URL,object -,参数是另一个嵌入式对象声明的,id,示例,:,嵌入,MediaPlayer,播放器,示例,:,嵌入,flash,广东商学院,标记,导入图像,img,标签是单独出现的,.,属性,:,一般属性,alt -,代表图像的替代文字,src,说明图像源,(,就是图像的保存地点,),height -,图像的高度,width -,图像的宽度,usemap,:,定义图像点击区域,语法,: ,2.3.4,超链接标记,显示的文本或图像内容,常用属性,name =,cdata,:,指定锚点,(,目标链接,),的名称,id,=name:,指定锚点的元素标识符,class,=,classname,:,指定锚点的类名,href =,uri,:,指定超链接的目标地址,rel,=,link-types,:,指定前向链接类型,rev=,link-types,:,指定后向链接类型,target,=,frame-target,:,指定目标窗口或框架,:_,blank,_self,_parent,_top,tabindex,=,number,:,遍历链接焦点,title=text:,显示提示信息,(2),图像地图标记,功能,:,用于热区超链接,语法,:, ,map,基本属性,:,name,id,area,基本属性,:,shape:,指定热区形状,coords,:,指定热区坐标,其值个数取决于,shape,属性,href:,指定热区链接目标地址,target:,指定热区链接显示窗口或框架,示例,:,指定位置链接, ,链接到页面下部, ,链接到页面上部,.,.more document.,.,示例,2:,打开指定邮件链接,This is a navigation bar.,2.3.5,版式控制标记：页面布局设计,列表,表格,框架,列表,1.,无序列表,:,项目符号,.,列表项,列表项,列表项,.,例,:,当当,新浪,2.,有序列表,:,连续标号,.,列表项,列表项,列表项,.,如何设计列表样式？,CSS list-style-type,、,list-style-image,、,list-style-position,属性,表格：数据表、控制网页布局, ,属性,：,align,：页面对齐方式，,left, right, center,width:,整个表格的宽度，可以是像素值或百分比,height,：整个表格的高度，可以是像素值或百分比，通常可省略，浏览器会自动调整,border:,边框的宽度，以像素为单位，缺省值为,0,，用于排版时通常取,0,值。,cellpadding,:,单元格与边框之间的距离，以像素为单位，缺省值为,0,cellspacing,:,单元格之间的距离，以像素为单位，缺省值为,2,、,、,、, :,嵌在, ,内，表示表格体, :,嵌在, ,内，表示表格的一行,属性：对齐方式，,left, right, center,align:,行内单元格水平对齐方式，,left, right, center,valign,：行内单元格垂直对齐方式，,top, middle, bottom, :,嵌在, ,内，表示在当前行内增加一个单元格,属性：,align:,行内单元格水平对齐方式，,left, right, center,valign,：行内单元格垂直对齐方式，,top, middle, bottom,nowrap,:,表示单元格内的文本段只有出现显式换行标记时才中断,rowspan,:,指定该单元格所跨的行数,colspan,:,指定该单元格所跨的列数, :,用法同,标记，惟一区别在于这个元素是用来标记“头单元格”的，所谓头单元格是指表格中位于第一行或第一列用来指示其余各行或各列内容的单元格,表格应用例,:,佳能报价单,佳能, Canon,型号,像素,/,变焦,/,屏幕,/,存储介质,本周报价,IXUS 60,600,万,3X2.5SD,2150,IXUS 65,600,万,3X3SD,2350,IXUS I ZOOM,500,万,2.4X2.5SD,1570,EOS 30D(,套,),800,万,EFS17-852.5CF,13400,表作为版式工具示例,Listing 3-6,Page Using Tables,Listings,Listing 3-1,Listing 3-2,Listing 3-3,Listing 3-4,This page demonstrates using a table for page layout.,It is organized with local links on the left, external links,on the right, content in the center, and a header at the top.,Organizations,Microsoft,Microsoft Press,W3C,Useful Sites,SBN Workshop,MSDN,WebR,WebR,表作为版式工具示例,表作为版式工具示例,卓越亚马逊,yahoo,框架,它是一个标准的,HTML,文件，只包括如何分割网页和文件在每个区域如何显示的信息,Listing 3-8,/,定义框架页面,/,定义一个框架,/,对不支持框架的设备进行提示,或相关操作,浏览器不支持框架,!,框架示例,嵌套框架：多级版式,Listing 3-9,嵌套框架示例,跨框架定位,增加导航框架（包括其它框架的链接，目标框架的定位属性）,Listing 3-10,导航栏（框架）：,Go to Frame 1,Go to Frame 2,Go to Frame 3,导航框架示例,2.3.6,表单：互动,表单是网页上的一个特定区域。这个区域是由一对,元素定义的。其间是各种接受用户输入的控件,HTML,表单是,HTML,页面与浏览器端实现交互的重要手段。利用表单可以收集客户端提交的有关信息。,在,HTML,里，我们可以定义表单，并且使表单与,CGI,或,ASP,等服务器端的表单处理程序配合。,什么时候用到表单？,搜索、注册、登陆、论坛、交易、调查,2.3.6.1,表单的基本语法结构, ., ., . ,action,属性,：用来定义表单处理程序（,ASP,、,JSP,或,CGI,程序）的位置,(,相对地址或绝对地址,),。,method,属性,定义表单结果从浏览器传送到服务器的方法，一般有两种方法：,get,、,post,。,示例,1,，,示例,2,，,3,2.3.6.2,简单文本输入标记,type=*,决定控件类型，分为输入型,选择型,点击型。每个控件都应该包含,type,和,name,属性，并且大多数都包括,value,属性。,1),按钮：激活某个操作,普通按钮,提交按钮,重置按钮,2),复选框,(Checkbox),：选择多个项目,在一个表单里的所有多选框可以有一个或多个被选中。,3),单选按钮,(,RadioButton,),：只能选择一项,一个表单里的所有变量名相同的单选框只能够有一个被选中。,各个选项的,name,必须一样,4),文本输入框：输入单行文本,?,文本框的名字,*,text,或,password,*,默认值或为空,* 长度,?,最大输入字符数,5),图象域：图像按钮,6),文件域：上传文件,7),隐藏域,示例,2.3.6.3,文本域,:,多行多列的文本输入框, .,*,文本域的名字,* 行数或列数,*,off,soft,hard,：不换行、自动换行、强制换行,2.3.6.4,下拉列表：从列表中选择一个或多个选项,基本语法,说明,说明,2 ,multiple,：有该项说明可以选择多项,示例,表单示例：代码, ,Listing 4-2,/,由网站,http:/,的,jsp,目录下的,prc.jsp,程序处理。,/,控件类型,This text is next to check box 1.,This text is next to check box 2.,/,name,值必须一致,This text is next to the first radio button.,This text is next to the second radio button.,/,自动换行的文本域,This text is inside TEXTAREA 1. Note how lines of code are,automatically wrapped and how line breaks in the code cause breaks.,表单示例：图示,文本输入框：普通文本,文本输入框：密码,复选框,单选按钮,普通按钮,文件域,重置按钮,提交按钮,图像域,文本域示例：代码,Listing 4-3,This text is inside TEXTAREA 1. Note how lines of code are,automatically wrapped and how line breaks in the code cause breaks.,This text is inside TEXTAREA 2. Note how lines of code are,not automatically wrapped and how line breaks in the code cause breaks.,文本域示例：图示,自动换行的文本域,不自动换行的文本域,下拉列表示例：代码,Listing 4-4,Select one item:,Text of option 1,Text of option 2,Text of option 3,Text of option 4,Text of option 5,Select one item:,Text of option 1,Text of option 2,Text of option 3,Text of option 4,Text of option 5,Select multiple items:,Text of option 1,Text of option 2,Text of option 3,Text of option 4,Text of option 5,下拉列表示例：图示,显示选中选项，由用户打开列表,定位反显选中选项且自动打开列表，用滚动条上下移动,定位反显选中选项且自动打开列表，用滚动条上下移动，且可选择多个目标选项：,连续选择：按,shift,键并连续选择目标选项,不连续选择：按,Ctrl,键单击目标选项,2.4 CSS,技术：数据与表现分离,CSS,（,Cascading Style Sheet,，层叠样式表）是一种格式化网页的标准方式,，它扩展了,HTML,的功能，使网页设计者能够以更有效的方式设置网页格式。,CSS,是一种分离,web,文档内容与格式的技术,，可以控制,web,文档的外观和版式，使用,CSS,可以改变：文本的大小、格式、颜色、字间距、边框、元素周围的补白，乃至网页上对象的精确位置。,共享样式设定,个性化的标准网页：,CSS+DIV=web,标准,？,两个简单例子,使用,HTML,方式,一级标题,.,其他正文,.,一级标题,H1text-,align:center,; font-family:,楷体,_GB2312,使用,CSS,方式,一级标题,.,其他正文,.,一级标题,2.4.1,样式表定义语法,样式表：也称样式定义，或样式规则，可包含于文档中，也可保存于,.,css,文件中。基本结构为：,Selectorproperty1:value1;property2:value2;property3:value3;,Selector,定义样式作用的对象，称为选择器，花括号中为样式声明块，其中,property,为,CSS,属性，,value,为属性对应的值，各样式声明之间用分号隔开。,示例,H1 text-align:center; font-family:,黑体,选择器,样式定义,样式属性,属性取值,常用,Selector,类型,HTML,标记符,用户定义的类,用户定义的,ID,伪类,HTML Selector,不带尖括号的标记名作选择符,HTML,标记符是最常用的,selector,，,它重新定义了,HTML,标记符的显示效果。例如：,H1text-align:center;color:red,使所有用,H1,标记符修饰的内容都居中和用红色显示,body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,divmargin:0;padding:0;border:0;,ul,ollist-style-type:none,;,选择符应用示例基本清单,New Port Richey,* font-family: Verdana ,The New Port Richey Dog Show,Show Date: 7/31/2001,New Port Richey, FL,Best In Show:,CH Sarahs,Razzle,Dazzle (Yorkshire Terrier),Complete results,Herding Group:,German Shepherd Dog,CH,Sabre,Dawn ,Toy Group: ,Yorkshire Terrier,CH Sarahs,Razzle,Dazzle ,Sporting Group: ,Golden Retriever,CH Chases Golden Chance ,Non-Sporting Group: ,Tibetan Terrier,CH Winston of Sunny Brook Lane ,选择符应用示例基本清单代码运行页面,标记选择符应用示例清单,.,* font-family: Verdana ,td font-size: 10pt ,.,标记选择符应用示例运行结果,Selector:,用户定义类,.,classnameproperty:value,表示任何,class,属性为,classname,的标记符都采用所定义的样式。,类选择符的语法是在类名前面加一个点号（,.,）,类是一种增强页面可管理性的出色方法，因为只需定义和修改样式表，就可以对站点的外观进行全面定义和修改。,类选择符应用示例清单,., font-family: Verdana ,td font-size: 10pt ,.category font-weight: bold; ,td.category, font-style: italic ,.,类选择符应用示例运行结果,Selector:,用户定义的,ID,#,idnameproperty:value,表示任何,ID,属性为,idname,的标记符都采用所定义的样式。,ID,选择符的语法是在类名前面加一个,#,号（,#,）,用户定义,ID,与,class,的作用完全相同，但,ID,在一个文档中应该是惟一的。,ID,选择符应用示例,., font-family: Verdana ,td font-size: 10pt ,.category font-weight: bold; ,td.category, font-style: italic ,#,bestinshow, color: red ,.,ID,选择符应用示例运行结果,Selector:,伪类,伪类的语法是在原有的语法里加上一个伪类（,pseudo-class,）：,selector:pseudo,-class property: value,（选择符,:,伪类,属性,:,值,）伪类和类不同，是,CSS,已经定义好的，不能象类选择符一样随意用别的名字，根据上面的语法可以解释为对象（选择符）在某个特殊状态下（伪类）的样式。,常用的伪类,:link,未访问过的超链接,:visited,访问过的超链接,:hover,悬停状态的超链接,:active,活动超链接,伪类选择符应用示例清单,.,* font-family: Verdana ,td font-size: 10pt ,.category font-weight: bold; ,td.category, font-style: italic ,#,bestinshow, color: red ,:hover background-color: red ,.,伪类选择符应用示例运行结果,Selector:,后代、子、同胞,CSS,不但允许根据元素名应用规则，还允许根据元素在整个文档中的位置应用规则。例如，一个规则可以只选择段落标记内的链接。,继承,：嵌套的子对象（嵌套元素）继承外部元素或父元素的格式，除非子对象另有格式定义,后代：空格连接,子：大于号连接,同胞：加号连接,层次结构关系选择符应用示例清单,., font-family: Verdana ,td font-size: 10pt ,.category font-weight: bold; ,td.category, font-style: italic ,#,bestinshow, color: red ,p a text-decoration: none ,h4 + h4 font-style: italic ,:hover background-color: red ,.,后代,同胞,2.4.2,样式引用,嵌入式样式,：内联引用,样式表,全局样式表：,内部引用,链接的格式页：,外部引用,嵌入式样式,使用,style,属性将样式应用于单个元素上，实现对特定元素的精确控制，优先于样式表控制，可以应用于任何标记，并且只影响所应用的标记,style=”,单个或以分号分隔的若干样式声明（声明块）”,样式声明,:,属性：属性值,Listing 11-2,This text is in a SPAN.,This text is not in a SPAN.,全局样式表,通过将样式表嵌入,标记内的,标记对内实现，控制文档中相应标记的样式,标记的格式,样式表,Listing 11-7,H1 font-size: 16pt; font-weight: bold; color: red,H2 font-style: italic; font-size: 24pt; color: green,SPAN font-weight: bold; font-style: italic,.,adivheight:52px;width:145px,:,hoverbackground-color:red,/,本文档悬停状态的超接链的背景色为红色,This text is in a SPAN.,This text is in an H1.,This text is in an H2., /,本块的高度为,52px,宽度为,145px,Herding Group:,Toy Group:,This is modified H2 text./,本块的高度为,52px,，宽度为,145px,全局样式表示例,链接的样式表,以,.,css,为扩展名的包含格式定义的文本文件，可用来控制若干个网页或整,web,站点的样式。使用方法为在文档的,区使用,标记引用：,H1 font-size: 16pt; font-weight: bold; color: red,（,styles.css,）