WebUnit03-HTML标记语言.ppt

《WebUnit03-HTML标记语言.ppt》由会员分享，可在线阅读，更多相关《WebUnit03-HTML标记语言.ppt（89页珍藏版）》请在三一办公上搜索。

1、Web技术导论,山东大学计算机科学与技术学院郝兴伟,课程目录,Web基础Web服务器的架设和管理HTML和XML标记语言网页设计与制作客户端编程服务端编程,Unit 1 Web基础,第3章 HTML与XML标记语言,目录,教学目标知识点重点难点问题思考,教学目标,了解标记语言的概念，各种标记语言的关系。深刻理解HTML标记语言的文档结构、标记、标记属性的概念熟悉常用的HTML标记的功能及属性理解CSS的概念，掌握样式表定义、选择符的概念及其应用理解、标记的概念及应用理解XML的数据表达核心思想了解XML文档的基本结构了解XML和HTML之间的关系,知识单元与知识点,重点难点,重点HTML和XM

2、L标记语言的本质区别标记的概念标记及其属性标记及其属性样式表定义表格标记CSS样式表，CSS选择符的分类和标记XML的和核心思想XML相关技术标准的功能及关系XML和HTML的关系,难点CSS样式，样式表div和span标记XML Schema,U31 标记语言的产生与发展,标准通用标记语言SGML 超文本标记语言HTML可扩展标记语言XML,标记语言的概念,标记语言的概念 广义上，标记语言可以理解为对内容进行描述的规范或标准。例如，在出版印刷行业，编辑人员在进行文档内容编辑时对内容所做的标记北大方正电子照排，华光照排，显示标记Word，所见即所得，不显示格式化标记标准通用标记语言SGMLSG

3、ML（Standard Generalized Markup Language，SGML）是一个用来定义在电子表格中如何对文件的结构和内容进行描述的国际标准（ISO-8879），1969年，IBMSGML设计的非常复杂，SGML的正式规范达500多页 意义SGML定义了标记语言的基本概念，奠定了标记语言的技术基础,超文本标记语言HTML,HTML 的诞生互联网发展历史上的第一个里程碑技术超文本标记语言HTML起源于通用标准标记语言SGML由世界上最大的粒子物理研究实验室欧洲核子研究中心CERN（the European Organization for Nuclear Research）于19

4、91年首先提出。HTML主要版本及发布时间 HTML 2.0，Internet工程任务组中的HTML工作组开发完成了HTML 2.0，于1996年发布 HTML3.2，W3C于1997年1月14日将其列为推荐版本，在HTML2.0标准中添加了诸如：字体、表格、Java程序、浮动、上标、下标等特征 HTML 4.0，W3C于1997年12月18日将其列为推荐版本，第二个稍作修正的HTML 4.0 版本与1998年12月24日发布。HTML4.0中最重要的特征是引入了样式表CSS技术。HTML 4.01，W3C于1999年12月24日将其列为推荐版本，是HTML 4.0的升级版本，它对原版本做出了

5、部分修正。HTML5.0,可扩展标记语言XML,可扩展标记语言XML互联网的未来XML（eXtensible Markup Language），1998年2月10日，XML工作组正式向W3C提交了XML的最终推荐标准，这就是XML 1.0标准。核心思想实现数据和显示的分离 XML的构成DTD、XML Schema等基本要素元规范 相关规范可扩展样式语言XSLXML路径语言XPathXML查询语言Xquery可扩展连接语言XLL及XML文档对象模型DOM简单应用程序接口SAX等,U32 超文本标记语言HTML,HTML文档结构和标记语法文件头标记及子标记文档体标记文档内容常用标记文本格式标记图片

6、标记超链接标记表格（table）表单（form）span标记和div标记层叠样式表CSS技术 对象和脚本程序标记帧（frame）,HTML标记的概念及认知,标记的语法,什么是HTML标记标记是对内容的标记标记内容在浏览器中的现实样式。例如，要文字“您好”红色显示，在HTML中可标记为：您好HTML标记语法标记由封装在小于号（）构成的一对尖括号之中 一般形式：文档内容 标记类型单标记，不标记任何内容，例如，双标记，首标记，开启某种形式的显示，未标记，结束某种形式的显示标记属性分类：一般属性，事件属性 例如：,以下通过例题讲解,HTML文档结构,文档头标记（文档内容标记）,文件头标记及子标记,文件

7、头及其功能标记对之间的部分称为文件头功能告诉浏览器如何显示页面，例如字符集，有效期为搜索引擎提供支持子标记标记 标记 标记 标记 标记,标记,关于meta的意义 meta即“元”的意思，meta data元数据，即关于数据的数据例如：一篇paper，它的正文是文章本身的数据。但作者、出版社、出版日期等即可看成是paper的元数据标记为单标记，没有尾标记两类元数据描述，一类是关于HTTP头的描述，向浏览器传回信息，以正确显示网页内容；另一类是关于页面内容的描述，用于搜索引擎。标记的形式,标记HTTP头,HTTP头HTTP头是Web服务器向浏览器传回的信息，以正确显示网页内容，即可以在Web服务器

8、的配置中设置，也可以通过网页设置。http-equiv属性，即HTTP头域content-type，指定页面内容及所使用的字符集。expires，用于设定网页的到期时间 pragma，禁止浏览器从本地计算机的缓存中访问页面内容，该种设定访问者将无法使用脱机浏览功能 refresh，自动刷新并指向新页面。window-target，显示窗口的设定，例如：强制页面在当前窗口以独立页面显示，可以用来防止别人在框架里调用自己的页面,练习一下刷新，本页刷新及刷新指向新页面。,要求：可以理解，读懂！简单的能写出！,expire expire|kspav.期满,断气,呼气;呼出,pragmatic prgm

9、tkadj.忙碌的,实际的,活跃的Pragmatical adj.独断的,标记-name属性,name属性主要用于描述网页，主要用于搜索引擎查找信息和分类信息用的。name属性参数值keywords，keywords用来告诉搜索引擎该网页的关键字是什么。description（网站内容描述），description用来告诉搜索引擎网站的主要内容 author（作者），标注网页的作者 robots（机器人向导），robots用来告诉搜索机器人需要索引的页面有哪些。,标记注：教材P87勘误，第五行代码为相对路径参见网页设计基础与上机指导（缪亮等）3.2.2相对路径相对路径又分为根目录相对的路径与文

10、档相对的路径两种。相对路径适合于创建网站的内部链接，一个相对路径不包括协议和主机信息，因为它的路径与当前文档的访问协议和主机相同，甚至有相同的目录路径，所以通常只包含文件夹名和文件名，有时甚至只有文件名。（1）根目录相对路径：是从当前站点的根目录开始的路径。站点上所有可公开的文件都存放在站点的根目录下。和根目录相对的路径使用斜杠以告诉服务器从根目录开始。例如，如果一个站点的根目录在D:Program FilesApache Software FoundationTomcat 6.0webappsROOT下，ROOT目录下存在文件31.html文件和子目录part3，在part3下存在子目录1，

11、子目录1下存在文件32.html，文件32.html中有链接访问文件31.html，那么单击该文件的显示的链接就会跳转到文件31.html。,Href，指向，超链接时会详细讲。注意，容易与URL用混，看上面的勘误！,（2）文档相对路径：是指和当前文档所在的文件夹相对的路径。这种路径通常是最简单的路径，可以用来链接和当前文档处于同一文件夹下的文档。下面举例说明。如果链接到同一目录下的文件part3.html，只需要指定链接文件的名称即可href=”part3.html”。如果要链接上一级目录中的文件part3.html，则要输入“./”然后再输入文件名href=”./part3.html”。如果

12、要链接上两级目录中的文件part3.html，则要输入“././”然后再输入文件名href=”././part3.html”。如果链接到当前目录的下一级子目录web下的文件part3.html，则要输入目录名“web/”然后再输入文件名href=”web/part3.html”。,参见例题2-242-27，练习！,文档体标记及主要属性,标记在标记对之间的部分称为html文档的文件体。文件体中描述的是浏览器中显示的内容。在标记对之间包含文档内容标记，例如：文本、图像以及超链接、表格、表单等。标记主要属性一般属性设置页边距，设置页面内容和上下左右四个边框的距离设置背景颜色，背景图片文本颜色超链接事

13、件属性打开页面，关闭页面窗口移动、改变大小鼠标操作,property prp(r)t/pr-n.财产,性质,所有权,margin mdnn.v页边的空白;极限;边缘,教材P88，表3-1,教材P88，表3-2,事件属性的值往往是一个JavaScript函数,例题3-2.html,文档体,文本内容图片超链接表格表单其他标记,文本内容标记,标题、段落标记文本格式标记字体标记 粗体、斜体和下划线标记,图像标记,图像标记 单标记，用以插入图像 一般属性src：设置插入图像的url地址，即插入图像的路径和文件名。align：设置图像的对齐方式，取值left、right、center、absmiddle等

14、id：指定的图片id号，用于对图像的程序访问name：用于设定图像的名称，用于对图像的程序访问。title：属性值为一字符串，鼠标指向图片时，鼠标右下角显示标题文本。alt：图像的替代文字 border：设置图片边框。height和width：分别用于设置图像的高度和宽度 hspace和vspace：分别用于设置图像的左右边框大小和上下边框大小。ismap和usemap：在应用图像地图（map）时使用。事件属性 重点难点src属性的值，相对路径和绝对路径问题title属性，文本的回车换行“泰山风光height和width，正确方式是使用ps压缩图，提高下载速度，例如一些网上商店的图片,vert

15、ical vrtkl/vt-n.垂直线,竖向,垂直面adj.垂直的,顶点的,horizontal horizontal|hrzntl/hrzntln.水平线,水平面adj.地平线的;水平的,例题3-3图像属性.htm,border bdn.边缘,边沿;边界,国界,边境;饰边,滚边;,AbsBottom 图像的下边缘与同一行中最大元素的下边缘对齐。AbsMiddle 图像的中间与同一行中最大元素的中间对齐。Baseline 图像的下边缘与第一行文本的下边缘对齐。Bottom 图像的下边缘与第一行文本的下边缘对齐。Left 图像沿网页的左边缘对齐，文字在图像右边换行。Middle 图像的中间与第一

16、行文本的下边缘对齐。NotSet 未设定对齐方式。Right 图像沿网页的右边缘对齐，文字在图像左边换行。TextTop 图像的上边缘与同一行上最高文本的上边缘对齐。Top 图像的上边缘与同一行上最高元素的上边缘对齐。,图文混排align属性取值,练习一下吧！,参见例题，程序2-18.html,参见课件P33例题，体会absmiddle与middle异同！,举例,在一个网页中，插入一副图片dog.jpg，要去当鼠标移到图片上的时候，显示另一幅图片cat.jpg，鼠标移走后重新显示图片dog.jpg。代码清单 问题改变图片文件路径到images文件夹,参见例题与练习例题3-3图像属性.htm,超

17、链接标记,概念及功能分类文本超链接一般形式字符串图片超链接一般形式定义书签书签文本,例题3-4系列；补充下载、邮件、锚点等链接。,超链接标记的属性,href属性取值一个网址，例如首页一段javascript代码，例如：下一步 关闭onclick属性接受鼠标单击，如果返回true,则页面跳转到href指定的网页，否则，不执行href属性所定义的网页。例如：bbb target属性_self（相同框架），_blank（新建窗口），_top（整页），_parent（父窗口），帧名title属性Disabled使（超链接）失能（灰化，不可用）,超链接标记的重点难点,href和onclick的联合使用显

18、示样式的定义超链接的显示活动超链接的显示已经访问过的超链接的显示,表格（Table）,表格及其功能数据组织页面布局表格、行、单元格标记表格、单元格属性重点难点表格的宽度设置，百分比 or 像素值定义行高，height属性用于，尽量不在定义单元格宽度，只在表格第一行的中使用width属性，最后一个单元格不设置表格、单元格表格线（上、下、左、右）的定义单元格间距(cellspacing)、衬距(cellpadding)问题表格的水平、垂直居中，表格嵌套,caption(图片)说明文字，(电影)字幕,margin n.页边空白；差额；余地，余裕；边，边缘,举例1-表格的嵌套,单元格中定义表格举例表格

19、居中,实战，体会本题表格嵌套的目的！,举例2单元格中图片和文字的垂直居中,在表格的单元格中，如果存在文字和图片混合内容，默认的显示是下边对齐。设置的valign=center,不起作用设置的align=“absmiddle”（非middle）即可解决,教材例题3-5,举例3表格的tbody与标签式表格,标签式表格标记,详解此题，代码见“例题3-6交互式标签表格.html”！,Cursor krsn.指针;游标,此题有相当难度，要求：1.全面读懂，不仅仅是字面的解释，明确程序的执行细节！2.写程序实现局部功能！,作业：模仿此题实战，内容变为班级同学介绍！,思考：这个题可以将导航标签竖着放吗？为什

20、么？,代码-表格标记-1tbody.htm,cursor krsn.指针;游标,表单Form,表单的概念及功能用户输入数据标记用户交互表单标记 标记主要属性name属性，给出表单的名称，用于脚本编程 method属性，定义服务器表单处理程序从表单中获得信息的方式get方法将数据打包放置在环境变量QUERY_STRING中作为URL整体的一部分传递给服务器。post方法，使用HTTP实体头域发送数据到Web服务器，没有数量限制action属性，设置表单处理程序的网络路径和程序名，当用户提交表单时，服务器将执行action属性所设置的程序。target属性，设置action页面输出的窗口重点难点使

21、用表格进行表单布局Form标记target属性,教材勘误：p101例题3-7代码中，radio之name不一致！,表单输入域,单行文本框输入密码文本框输入 多行文本框输入 button按钮输入 radio单选钮输入 复选框输入复选列表框输入hidden隐藏元素 文件上传 表单提交按钮标记submit/reset,表单举例1上传文件,表单输入页面news-add.jsp服务端处理程序页面news-addfilesave.jsp,表单页面news-add.jsp,表单处理程序news-addfilesave.jsp,层叠样式表CSS技术,CSS样式属性CSS对网页的控制是通过CSS属性实现的，这些

22、属性可以分为以下几类字体属性颜色和背景属性文本间距与文本对齐属性容器属性列表属性鼠标状态属性定位属性滤镜属性CSS样式表定义HTML选择符类选择符ID选择符关联选择符组合选择符伪元素选择符修改标记的默认显示样式在内定义样式，嵌入式样式表使用标记内连样式style属性，缺点是内容和样式混合，难于维护。使用标记的class属性Id属性,CSS属性-1字体属性,CSS属性-2颜色和背景属性,CSS属性-3文本间距与文本对齐属性,CSS属性-4容器属性,容器是指其中可以包含内部元素、对象或数据的元素，如表格、单元格等，页面也是容器对象。CSS中对这样的对象都统一用容器属性来控制。它包括以下子类：边距属

23、性、衬距属性、边框属性和图文混排属性。,CSS属性-4容器属性(Cont.),CSS属性-5列表属性,CSS属性-6鼠标状态属性,CSS属性-7定位属性,CSS属性-8滤镜属性,在网页显示时，常常希望所显示的图像或文字有一些特殊的效果，CSS中的滤镜属性就可以实现这一要求。滤镜的书写格式如下：filter:filtername(parameters)其中filtername为滤镜名，parameters为参数表，不同的滤镜，所允许使用的参数也不同。,CSS样式表定义,CSS表定义的一般形式CSS选择符HTML选择符类选择符ID选择符关联选择符组合选择符伪元素选择符,CSS样式表定义的一般形式,

24、样式表定义的一般形式是：选择符属性名:属性值;属性名:属性值;,HTML选择符,选择符为标记名，此时样式定义将替换标记的默认显示，任何HTML标记都可以作为CSS选择符。举例 body margin-top:20px;overflow-x:hidden;pmargin:2px 4px,类选择符,一般形式HTML标记.属性:属性值;属性:属性内值.例子.word1 color:lime;background:#ff80c0 p.warning font-weight:bold;color:red;background:white 应用警告：Please turn off the power fi

25、rst,ID选择符,一般形式HTML标记#属性:属性值;属性:属性内值.例子#help-table border:1px solid#0163A2;cellspacing:5px;cellpadding:px;font-family:宋体;font-size:12px;color:#FF0000;line-height:150%;应用,在HTML页面中ID参数指定了某个单一元素，ID选择符是用来对这个单一元素定义单独的样式。ID选择符的应用和类选择符类似，只要把CLASS换成ID即可。将上例中的类用ID代替：这个段落左对齐定义ID选择符要在ID名称前面加上一个“#”号。和类选择符相同，定义ID

26、选择符的属性也有两种方法。下面这个例子，ID属性将匹配所有id=“left”的元素：#leftfont-size:100%;font-weight:bold;color:Purple;background-color:transparent下面这个例子，ID属性只匹配id=“left”的段落元素：p#leftfont-size:100%;font-weight:bold;color:Purple;background-color:transparent,关联（包含）选择符,概念关联选择符是有两个或更多的单个选择符组成的串，由于层叠顺序的关系，关联选择符的优先权更大。关联选择符只对选择符的最内层

27、元素起作用，对单独的外层元素无定义。定义关联选择符时，单独的选择符之间用空格分开。例子table acolor:red他定义了内的超链接标记的样式，对于标记本身，以及标记外的没有影响。,组合选择符,概念将多个选择符共用一个样式表定义，避免样式表定义的重复，这就是组合选择符。定义组合选择符，单个选择符之间用西文的“,”分割。例子h1,h2color:red则和标记定义为红色字。,伪（类）元素选择符,概念主要定义超链接标记，目的是定义不同状态下同一个HTML元素的形态。例如，点击前、点击后、光标移动到超链接文本上时，这些不同的状态超链接显示不同。个性化超连接的显示，可以定义下面的样式。a colo

28、r:#0000FF;font-size:12px;text-decoration:nonea:link color:#00FF00;text-decoration:nonea:visited color:#00FF00;text-decoration:nonea:hover color:#FF0000;font-weight:bold;text-decoration:nonea:active color:#0000FF;text-decoration:none 特别说明：在CSS 定义中，a:hover 必须位于 a:link 和 a:visited 之后，才能生效；a:active 必须位于

29、a:hover 之后，才能生效。,hover hv(r)v.盘旋,徘徊,翱翔,修改标记的默认显示样式,在文档头部定义标记，定义标记的显示样式（嵌入式）在标记中使用style属性（内联样式）在标记中使用class属性（自定义样式类）class属性和id属性的不同,此部分参见“CSS样式讲稿.doc”,方法1修改默认显示,在文档头部定义标记，定义标记的显示样式 标记 属性名:属性值;属性名:属性值;.例如：body margin-top:30px;color:black;background:white;a color:#0000FF;text-decoration:none;font-size:

30、14pxa:link color:#00FF00;text-decoration:nonea:visited color:#00FF00;text-decoration:nonea:hover color:#FF0000;text-decoration:none;font-weight:bolda:active color:#0000FF;text-decoration:none特别说明：a:hover 必须位于 a:link 和 a:visited 之后，才能生效；a:active 必须位于a:hover 之后，才能生效。,方法2使用内联样式,使用内联样式style属性我们看下面的文字格式化

31、要求：仿宋体，6号字，蓝色泰山加粗泰山斜体泰山上述格式化使用了三种标记标记内联样式-style属性设置内联样式 style=属性名:属性值;属性名:属性值;.例如：泰山缺点内容和显示混杂,方法3使用自定义样式类,使用用户自定义样式类class属性CLASS属性用于指定标记使用的样式类。样式类可以关联一个标准的标记，也可以用于任何标记。用户样式类的定义（类选择符）.属性名:属性值;属性名:属性值不指定标记的样式类为全局样式类，可以为所有标记的class属性使用。指定标记的样式类只适用于该标记。例如.word1 color:lime;background:#ff80c0 p.warning fon

32、t-weight:bolder;color:red;background:white 举例Please turn off the power first警告：,方法4-使用ID选择符,id属性ID属性用于定义一个元素的独特的样式。ID值可以关联一个标准的标记，也可以用于任何标记。一般形式#属性名:属性值;属性名:属性值例如#location-table border:0px;cellspacing:0px;cellpadding:0px;#help-table border-left:1px solid#0163A2;border-bottom:1px solid#0163A2;border-

33、top:1px solid#0163A2;border-right:1px solid#0163A2;cellspacing:5px;cellpadding:px;font-family:宋体;font-size:12px;color:#FF0000;line-height:150%;,#foot-tablemargin-top:15px;height:65px;font-family:宋体;font-size:12px;color:#FFFFFF;text-align:center;line-height:150%;background-color:#d0d0cf;举例上述id设定用于每一个

34、页面中的当前位置、帮助信息以及版权页角的设定。在每一个页面中，这是一样的,页面设计效果,使用id选择符和class选择符的不同,class属性值为一个用户自定义的样式类，一个用户自定义的样式类可以在多个标记中使用id属性，用于标识一个标记，在一个HTML文档中，不能有相同的id号。这就如标记的name属性，不能重名，这可以从DOM模型来很容易理解，通过getElementById 方法可以访问id所识别的对象。在布局思路上，一般坚持这样的原则：id是先确定页面的结构和内容，然后再为它定义样式：而class相反，它先定义好一类样式，然后再页面中根据需要把类样式应用到不同的元素和内容上面。在实际应

35、用时，class更多的被应用到文字版块以及页面修饰等方面，而id更多地被用来实现宏伟布局和设计包含块，或包含框的样式。,样式（.css）文件,样式（.css）文件如果要将这些样式应用到其他HTML文档中，应该使用样式文件。即，将这些样式定义存储在一个扩展名为.css的样式文件中，css文件可以是一个标准的HTML文件，只不过为空。使用css文件重点难点文件命名要规范，例如：通用的样式文件mycommon.css,关于表格的样式定义文件mytable.css样式名要规范，便于阅读,要在文档中引用外部样式，这个（在头部）必须有！,将某文件连接包含进来，属性”rel”是“关联”的类型,举例1定义通用

36、样式文件mycommon.css,文件名mycommon.css包含页面中常用的标记样式类定义，包括：标记、各种文本样式定义网页文件使用CSS样式类的好处：（1）内容与显示的分离,举例2定义关于table的样式文件mytable.css,文件名mytable.css包含在表格中使用的表格标记、单元格标记、单元格内容、单元格文本等各类样式,表格样式的使用,span标记,span元素不同于一般的HTML元素，它没有自己的显示内容和显示特性。引入标记的目的是：定义一个行内区域，可以给这个区域一个id属性，结合CSS，对该区域设定特定的样式，以得到需要的显示效果。也可以使span标记的区域响应鼠标或键

37、盘事件，制作菜单、树形结构目录、列表框及下拉列表框项目。在行内定义一个区域，也就是一行内可以被划分成好几个区域，从而实现某种特定效果。和标记相比，在CSS定义中属于一个行内元素，而是块级元素,span举例span标记区的访问方法,function setspan(spid,flag)if(flag=1)/使用函数参数访问span对象 document.all.item(spid).innerHTML=Hao;/直接使用标记的id号访问对象 sp2.style.display=inline;sp3.style.display=none;if(flag=2)document.all.item(sp

38、id).innerHTML=Jiang;sp2.style.display=none;sp3.style.display=inline;Mr.HaoMiss.Jiang亲爱的xxx先生女士,span举例常见应用,在页面内容见留出空白定义区域，接受鼠标事件块级元素的相对定位问题：margin-left:-4px是什么意思？块级元素的相对定位p.pos_left position:relative;left:-20px段落的正常输出位置段落在输出时相对于其正常位置向左移动相对定位会按照元素的原始位置对该元素进行移动。,图层标记div,层次块标记div层次块标记用于定义网页上的一个矩形块，中间可以包

39、含引起行中断的标记，如标记等。层次块标记的一般形式是：标记属性id，属性，用于标记一个块，以便引用该块。style属性，和没有默认的显示样式，必须使用style属性和class样式类定义图层块的位置、大小、显示属性等。图层内容超过图层height和width时，出现滚动条，如何不显示滚动条？例如：style=“border:solid 1px#0163A2;padding:5px;display:none”,可以显示图层的边框style=width:100px;height:100px;overflow-x:hidden;overflow-y:hidden;,举例图层的显示和隐藏,页面设计效果

40、,代码,function showorhide_div(menu)if(document.all.item(menu).style.display=none)document.all.item(menu).style.display=block;else document.all.item(menu).style.display=none;,代码（续1）,您的位置：教学计划管理教学计划列表 添加班级|添加单个学生,代码（续2）,系统帮助：r 一项教学计划对应一个教学班，教学班可以包括多个不同的物理班；对于选修课，一个教学计划的教学班，可以是某些班的部分同学。每一个教学计划都有一个唯一的教学计划

41、号，教学计划号=课程代码+课程顺序号。,使用帧,帧（Frame）帧（Frame）可以用来将浏览器窗口划分为多个区域（子窗口），每个子窗口中装载一个HTML文件。一般形式,帧的应用页面设计,代码index.htm,Welcome to Lavenders class,代码-scrollleft.html,浮动帧标记,浮动帧单元格内部背景色浮动帧周边为什么没有全部遮挡所在的单元格背景？,代码-myiframe.htm（1）,bodymargin:0 auto;font-size:12px;text-align:center;background:#CCCCCC;font-family:宋体,Hel

42、vetica,sans-serif;background-image:url(./images/bg.gif);#leftmenuborder-top:1px solid#CCCCCC;border-bottom:1px solid#CCCCCC;border-right:1px solid#CCCCCC;height:550px;background:#FF0000;padding-left:0px;#centerborder-top:1px solid#CCCCCC;border-bottom:1px solid#CCCCCC;height:550px;text-align:center;

43、vertical-align:middle;background:#E9A75D;#rightborder-top:1px solid#CCCCCC;border-bottom:1px solid#CCCCCC;text-align:left;vertical-align:top;background:url(./images/right_bg.jpg);,代码-myiframe.htm（2）,function switchSysBar()if(switchPoint.innerText=关闭左侧菜单栏)switchPoint.innerText=打开左侧菜单栏;/document.all(l

44、eftmenu).style.display=none;/document.all.item(leftmenu).style.display=none;leftmenu.style.display=none;else switchPoint.innerText=关闭左侧菜单栏 document.all(leftmenu).style.display=if(self!=top)top.location=self.location;,代码-myiframe.htm（3）,关闭左侧菜单栏 Copyright;if(window.screen.width,问题思考,在HTML规范中，有哪几个属性是大部分标记都有的？为什么？对于标记，为什么在有时侯伪元素选择符样式定义不起作用？在、等标记中margin-left等设置一个负数是什么意思？,Unit 1 Web基础,谢谢大家,