第七章 WEB标准与页面布局基础(理论)

WEB标准与页面布局基础第七章本章单词Structure（体系，构造，结构）Presentation（介绍，演示，外观，表象）Behavior（反应，行为，举止）XML（ExtensibleMarkupLanguage，即可扩展标记语言）DTD（DocumentTypeDefinition，文档类型定义）Transitional（过渡性的）Strict（严格的）margin（外边的空白，外边距，外补丁）padding（填充物，内边距，内补丁）block（街区，块）inline（内联，行内）overflow（泛滥，溢出）relative（相对的）absolute（绝对的）vertical（垂直的，竖直的）预习检查3预习检查当使用margin属性对元素的四个外边距进行设置，依次的顺序为()。A.topbottomleftrightB.leftrighttopbottomC.topleftbottomrightD.toprightbottomleft使用position属性可设置元素的定位机制。要使元素以它的父元素为参照，进行相对定位，应为postion属性赋以下（）的值。A.staticB.absoluteC.relativeD.fixed预习检查当页面中有多个元素在垂直于浏览器窗口的方向上发生层叠时，可使用()属性设置它们的层叠顺序，此属性的值越()则此元素就越接近浏览者。A.z大B.index小C.z-index大D.z-number大要将一个元素隐藏，并且要求此元素原来占据的页面空间被释放，应为此元素设置()属性，并赋值为()。A.visibilitynoneB.visibilityhiddenC.displayhiddenD.displaynone预习检查CSS盒状模型规定盒子由四个content,margin,padding,border部分组成。由盒子的外部到盒子内部，这四个部分的顺序依次是()。A.borderpaddingmargincontentB.marginborderpaddingcontentC.contentpaddingbordermarginD.bordermargincontentpadding网站重构与WEB标准网站重构把“未采用CSS，大量使用HTML进行定位、布局，或者虽然已经采用CSS，但是未遵循HTML结构化标准的站点”变成“让标记回归标记的原本意义。通过在HTML文档中使用结构化的标记以及用CSS控制页面表现，使页面的实际内容与它们呈现的格式相分离的站点。”的过程就是网站重构。网站重构WEB标准WEB标准网页主要由三个部分构成：结构（Structure）、表现（Presentation）和行为（Behavior）。它们都有各自的标准。结构–结构是指一个网页有哪些内容以及这些内容如何被清晰地组织在一起。–网页结构的标准主要是XML语言和XHTML语言。表现–表现是指一个网页的内容以何种样式来展现。–网页表现的标准是CSS语言。行为–行为是指一个网页及其所它包含的网页元素以及它所属的浏览器窗口如何与用户交互。–网页行为由JavaScript脚本语言来实现。XHTMLXHTML是HTML的替代者，它是从HTML继承而来，但使用了XML的规则进行严格规范。XHTML与传统的HTML的不同之处，主要来自于XML语法规范的格式要求，即要求“格式良好”。必须有且仅能有一个根元素html/html标签必须正确地嵌套标签必须关闭标签名和属性名必须使用小写属性必须赋值属性值必须包含在引号内特殊字符必须用实体编码来表示图片必须有替代文字注释的内容中不能包含”--”DTDXHTML文档的有效性网页文档中可以使用的标签有哪些，标签有哪些可用的属性，属性可用哪些值，标签之间如何嵌套，特殊字符如何表示等等。XHTML文档的有效性通过DTD（DocumentTypeDefinition，文档类型定义）来定义和验证。在文档第一行（html标签开始之前）添加DOCTYPE即文档类型声明。万维网联盟（W3C）为XHTML制定了三种DTD过渡的(Transitional)!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Transitional//EN“url严格的(Strict)!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Strict//EN“url框架集的(Frameset)!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Frameset//ENurl结构与表现分离CSS的出现，使得网页的结构与表现比较清晰地分离成为可能。对于网页包含的数据内容，由HTML标签负责承载，同时，文档内众多标签的先后顺序和嵌套关系，也说明了这些数据内容的结构。对于网页中的每一个元素最终在浏览器中以何种样式来呈现，则由CSS的样式规则来负责定义。CSS样式规则一般编写在网页的头部head/head中，这样可使得用来承载数据和描述结构的HTML代码与控制样式的CSS代码分离开来。如果需要二者更进一步地分离，则可将CSS样式规则转移到独立的外部样式表文件中。网页的结构与表现分离，带来的好处。WEB标准与CSS实现网页布局网页布局又可理解为网页排版。简单地说就是：网页中的某一块内容应该放置在网页的哪个位置，占用多大的面积。大量使用表格实现页面布局，不符合WEB标准。目前普遍采用CSS结合div标签来实现网页的布局。将整个网页的所有内容分割成为相对独立的内容块，这些内容块分别用一个div标签来包裹，再使用CSS的属性分别设置这些内容块的位置和尺寸。这样整个页面的版式就受到了控制，从而实现了网页的布局。CSS的盒状模型CSS的盒状模型（BoxModel），是使用CSS实现网页布局的基础。页面中可放置内容的窗口元素称为盒子即Box，盒子就是一个矩形区域。每个盒子都有内容Content，内边距Padding，边框Border，外边距Margin。盒状模型用于描述它们之间的层次，关系与相互的影响。margin：外边距border：边框padding：内边距，又称内补丁或间隙content：内容两种盒子盒子还有块级盒子(blockbox)和内联盒子(inlinebox)之分。这两种盒子分别是块级元素与内联元素的默认盒状模型。块级元素div、table、form、fieldset、h1~h6、p、ol、ul、li、hr等。内联元素span、a、label、input、select、textarea、img、embed、br等。块级元素显示为独立的一块（矩形区域），它的前后都会换行；内联元素不会导致换行，它会和其他内联元素一起在一行内显示。内联元素只能包含文本和其他内联元素；而块级元素则能包含内联元素和其他块级元素。标准文档流盒状模型的转换CSS属性display可以设置网页元素使用的盒状模型。为块级元素的display属性赋值为inline，那么这个块级元素转变为内联元素；为内联元素的display属性赋值为block，则这个内联元素转变为块级元素。divid=firstDivpclass=myp第一个段落/ppclass=myp第二个段落/p/divulid=myulli列表项目/lili列表项目/lili列表项目/li/uldivid=secondDivsecondDiv/divdivid=thirdDivthirdDiv/div演示例7-1盒状模型的转换style#firstDiv,#secondDiv,#thirdDiv{border:1pxsolidgray;}#myulli{display:inline;}.myp{display:inline;}#secondDiv,#thirdDiv{display:inline;}/style演示例7-1外边距CSS外边距属性用来设置一个元素所占空间的边缘到相邻元素之间的距离。使用margin属性来设置外边距。属性意义取值margin-topmargin-rightmargin-bottommargin-left设置元素的顶外边距。设置元素的右外边距。设置元素的底外边距。设置元素的左外边距。可使用像素单位的数字或百分比，也可使用auto。margin简写属性。在一个声明中设置外边距属性。依次设置顶外边距、右外边距、底外边距、左外边距。marginbodydivid=outerDivp外部DIV块/pp这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。/pdivid=innerDivp内部DIV块/pp这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。/p/div/div/bodystyletype=text/css*{margin:0;padding:0;}body{background-color:#fedcba;}#outerDiv{border:1pxsolidblue;width:400px;margin:0px;background-color:#abcdef;}#innerDiv{border:1pxsolidred;width:300px;margin:20px;background-color:#cccccc;}p{border:1pxdashedgreen;}/style演示例7-2内边距CSS内边距属性是用来设置元素内容到元素边框的距离。使用padding属性来设置内边距。属性意义取值padding-toppadding-rightpadding-bottompadding-left设置元素的顶内边距。设置元素的右内边距。设置元素的底内边距。设置元素的左内边距。可使用像素单位的数字或百分比，也可使用auto。padding简写属性。作用是在一个声明中设置元素的内边距属性。依次设置顶内边距、右内边距、底内边距、左内边距。paddingbodydivid=outerDivp外部DIV块/pp这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。divid=innerDivp内部DIV块/pp这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。/p/div/div/bodystyletype=text/css*{margin:0;padding:0;}body{background-color:#fedcba;}#outerDiv{border:1pxsolidblue;width:400px;padding:10px;background-color:#abcdef;}#innerDiv{border:1pxsolidred;width:300px;padding:10px;background-color:#cccccc;}p{border:1pxdashedgreen;}/style演示例7-3尺寸CSS尺寸属性指的是content内容区域的宽和高。使用width和height属性来设置内容区域的宽度和高度。属性意义取值width设置元素内容区域的宽度。可使用px像素单位或%百分比。height设置元素内容区域的高度。可使用px像素单位或%百分比。width和heightstyletype=text/css#mytable{height:120px;border:4pxdoubleblack;border-collapse:collapse;}#mytabletd{wid