WEB前台技术专题Word格式文档下载.docx
《WEB前台技术专题Word格式文档下载.docx》由会员分享，可在线阅读，更多相关《WEB前台技术专题Word格式文档下载.docx（59页珍藏版）》请在冰点文库上搜索。
属性不能简写
用Id属性代替name属性
XHTMLDTD定义了强制使用的HTML元素
∙存在三种XHTML文档类型：
STRICT（严格类型）-<
!
DOCTYPEhtmlPUBLIC"
-//W3C//DTDXHTML1.0Strict//EN"
"
http:
//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
>
在此情况下使用：
需要干净的标记，避免表现上的混乱。
请与层叠样式表配合使用。
TRANSITIONAL（过渡类型）-<
-//W3C//DTDXHTML1.0Transitional//EN"
//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
当需要利用HTML在表现上的特性时，并且当需要为那些不支持层叠样式表的浏览器编写XHTML时。
FRAMESET（框架类型）-<
-//W3C//DTDXHTML1.0Frameset//EN"
//www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"
在此的情况下使用：
需要使用HTML框架将浏览器窗口分割为两部分或更多框架时。
什么是HTML5?
–是W3C与WHATWG合作的结果
∙W3C指WorldWideWebConsortium，万维网联盟。
∙WHATWG指WebHypertextApplicationTechnologyWorkingGroup。
∙WHATWG致力于web表单和应用程序，而W3C专注于XHTML2.0。
在2006年，双方决定进行合作，来创建一个新版本的HTML。
∙为HTML5建立的一些规则：
新特性应该基于HTML、CSS、DOM以及JavaScript。
减少对外部插件的需求（比如Flash）
更优秀的错误处理
更多取代脚本的标记
HTML5应该独立于设备
开发进程应对公众透明
∙HTML5中的一些有趣的新特性：
用于绘画的canvas元素
用于媒介回放的video和audio元素
对本地离线存储的更好的支持
新的特殊内容元素，比如article、footer、header、nav、section
新的表单控件，比如calendar、date、time、email、url、search
1.2关键内容
1.2.1HTML属性
1.2.2HTML事件
1.2.3HTML样式
当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化。
有以下三种方式来插入样式表：
∙外部样式表
当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。
使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。
<
head>
linkrel="
stylesheet"
type="
text/css"
href="
mystyle.css"
/head>
∙内部样式表
当单个文件需要特别样式时，就可以使用内部样式表。
你可以在head部分通过<
style>
标签定义内部样式表。
styletype="
body{background-color:
red}
p{margin-left:
20px}
/style>
∙内联样式
当特殊的样式需要应用到个别元素时，就可以使用内联样式。
使用内联样式的方法是在相关的标签中使用样式属性。
样式属性可以包含任何CSS属性。
以下实例显示出如何改变段落的颜色和左外边距。
pstyle="
color:
red;
margin-left:
20px"
Thisisaparagraph
/p>
1.2.4DIV和SPAN标签
div>
可定义文档中的分区或节（division/section）。
标签可以把文档分割为独立的、不同的部分。
它可以用作严格的组织工具，并且不使用任何格式与其关联。
是一个块级元素。
这意味着它的内容自动地开始一个新行。
实际上，换行是<
固有的唯一格式表现。
可以通过<
的class或id应用额外的样式。
不必为每一个<
都加上类或id，虽然这样做也有一定的好处。
span>
标签被用来组合文档中的行内元素。
可以通过样式来格式化它们。
span没有固定的格式表现。
当对它应用样式时，它才会产生视觉上的变化。
可以为span应用id或class属性，这样既可以增加适当的语义，又便于对span应用样式。
pclass="
tip"
提示：
/span>
.........<
CSS:
p.tipspan{
font-weight:
bold;
color:
#ff9955;
}
2XML-XSLT技术
2.1基本概念
XSL指扩展样式表语言（EXtensibleStylesheetLanguage）。
XSL-不仅仅是样式表语言。
包括三部分：
∙XSLT一种用于转换XML文档的语言。
∙XPath一种用于在XML文档中导航的语言。
∙XSL-FO一种用于格式化XML文档的语言。
什么是XSLT？
∙XSLT指XSL转换（XSLTransformations）。
∙XSLT是XSL中最重要的部分。
∙XSLT可将一种XML文档转换为另外一种XML文档。
∙XSLT使用XPath在XML文档中进行导航。
2.2关键内容
2.2.1XSLT将XML转换为XHTML
从一个原始的XML文档开始
我们现在要把下面这个XML文档（"
cdcatalog.xml"
）转换为XHTML：
?
xmlversion="
1.0"
encoding="
ISO-8859-1"
catalog>
<
cd>
title>
EmpireBurlesque<
/title>
artist>
BobDylan<
/artist>
country>
USA<
/country>
company>
Columbia<
/company>
price>
10.90<
/price>
year>
1985<
/year>
/cd>
/catalog>
创建XSL样式表
然后创建一个带有转换模板的XSL样式表（"
cdcatalog.xsl"
）：
xsl:
stylesheetversion="
xmlns:
xsl="
//www.w3.org/1999/XSL/Transform"
templatematch="
/"
body>
h2>
MyCDCollection<
/h2>
tableborder="
1"
trbgcolor="
#9acd32"
thalign="
left"
Title<
/th>
Artist<
/tr>
for-eachselect="
catalog/cd"
tr>
td>
value-ofselect="
title"
/>
/td>
artist"
/xsl:
for-each>
/table>
/body>
/html>
template>
stylesheet>
3CSS技术
3.1基本概念
CSS指层叠样式表（CascadingStyleSheets）
∙样式定义如何显示HTML元素
∙样式通常存储在样式表中
∙把样式添加到HTML4.0中，是为了解决内容与表现分离的问题
∙外部样式表可以极大提高工作效率
∙外部样式表通常存储在CSS文件中
∙多个样式定义可层叠为一
样式层叠次序
当同一个HTML元素被不止一个样式定义时，会使用哪个样式呢？
一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字4拥有最高的优先权。
∙浏览器缺省设置
∙外部样式表
∙内部样式表（位于<
标签内部）
∙内联样式（在HTML元素内部）
3.2关键内容
3.2.1CSS语法
CSS规则由两个主要的部分构成：
选择器，以及一条或多条声明。
selector{declaration1;
declaration2;
...declarationN}
选择器通常是您需要改变样式的HTML元素。
每条声明由一个属性和一个值组成。
属性（property）是您希望设置的样式属性（styleattribute）。
每个属性有一个值。
属性和值被冒号分开。
多重声明
如果要定义不止一个声明，则需要用分号将每个声明分开。
最后一条规则是不需要加分号的，因为分号在英语中是一个分隔符号，不是结束符号。
然而，大多数有经验的设计师会在每条声明的末尾都加上分号，这么的好处是，当你从现有的规则中增减声明时，会尽可能的减少出错的可能性。
空格和大小写
大多数样式表包含不止一条规则，而大多数规则包含不止一个声明。
多重声明和空格的使用使得样式表更容易被编辑：
是否包含空格不会影响CSS在浏览器的工作效果，同样，与XHTML不同，CSS对大小写不敏感。
不过存在一个例外：
如果涉及到与HTML文档一起工作的话，class和id名称对大小写是敏感的。
选择器的分组
你可以对选择器进行分组，这样，被分组的选择器就可以分享相同的声明。
用逗号将需要分组的选择器分开。
在下面的例子中，我们对所有的标题元素进行了分组。
所有的标题元素都是绿色的。
h1,h2,h3,h4,h5,h6{
green;
继承及其问题
根据CSS，子元素从父元素继承属性。
但是它并不总是按此方式工作。
看看下面这条规则：
body{
font-family:
Verdana,sans-serif;
根据上面这条规则，站点的body元素将使用Verdana字体（假如访问者的系统中存在该字体的话）。
通过CSS继承，子元素将继承最高级元素（在本例中是body）所拥有的属性（这些子元素诸如p,td,ul,ol,ul,li,dl,dt,和dd）。
不需要另外的规则，所有body的子元素都应该显示Verdana字体，子元素的子元素也一样。
并且在大部分的现代浏览器中，也确实是这样的。
但是在那个浏览器大战的血腥年代里，这种情况就未必会发生，那时候对标准的支持并不是企业的优先选择。
比方说，Netscape4就不支持继承，它不仅忽略继承，而且也忽略应用于body元素的规则。
IE/Windows直到IE6还存在相关的问题，在表格内的字体样式会被忽略。
3.2.2CSS选择器
派生选择器
通过依据元素在其位置的上下文关系来定义样式，你可以使标记更加简洁。
在CSS1中，通过这种方式来应用规则的选择器被称为上下文选择器（contextualselectors），这是由于它们依赖于上下文关系来应用或者避免某项规则。
在CSS2中，它们称为派生选择器，但是无论你如何称呼它们，它们的作用都是相同的。
派生选择器允许你根据文档的上下文关系来确定某个标签的样式。
通过合理地使用派生选择器，我们可以使HTML代码变得更加整洁。
比方说，你希望列表中的strong元素变为斜体字，而不是通常的粗体字，可以这样定义一个派生选择器：
listrong{
font-style:
italic;
normal;
id选择器
id选择器可以为标有特定id的HTML元素指定特定的样式。
id选择器以"
#"
来定义。
下面的两个id选择器，第一个可以定义元素的颜色为红色，第二个定义元素的颜色为绿色：
#red{color:
red;
}
#green{color:
green;
下面的HTML代码中，id属性为red的p元素显示为红色，而id属性为green的p元素显示为绿色。
pid="
red"
这个段落是红色。
green"
这个段落是绿色。
id选择器和派生选择器
在现代布局中，id选择器常常用于建立派生选择器。
#sidebarp{
text-align:
right;
margin-top:
0.5em;
上面的样式只会应用于出现在id是sidebar的元素内的段落。
这个元素很可能是div或者是表格单元，尽管它也可能是一个表格或者其他块级元素。
CSS类选择器
在CSS中，类选择器以一个点号显示：
.center{text-align:
center}
在上面的例子中，所有拥有center类的HTML元素均为居中。
在下面的HTML代码中，h1和p元素都有center类。
这意味着两者都将遵守"
.center"
选择器中的规则。
h1class="
center"
Thisheadingwillbecenter-aligned
/h1>
Thisparagraphwillalsobecenter-aligned.
和id一样，class也可被用作派生选择器：
.fancytd{
#f60;
background:
#666;
在上面这个例子中，类名为fancy的更大的元素内部的表格单元都会以灰色背景显示橙色文字。
（名为fancy的更大的元素可能是一个表格或者一个div）
元素也可以基于它们的类而被选择：
td.fancy{
在上面的例子中，类名为fancy的表格单元将是带有灰色背景的橙色。
属性选择器
下面的例子为带有title属性的所有元素设置样式：
[title]
{
属性和值选择器
下面的例子为title="
W3School"
的所有元素设置样式：
[title=W3School]
border:
5pxsolidblue;
属性选择器在为不带有class或id的表单设置样式时特别有用：
input[type="
text"
]
width:
150px;
display:
block;
margin-bottom:
10px;
background-color:
yellow;
Verdana,Arial;
button"
120px;
35px;
3.2.3CSS框模型
元素框的最内部分是实际的内容，直接包围内容的是内边距。
内边距呈现了元素的背景。
内边距的边缘是边框。
边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。
背景应用于由内容和内边距组成的区域。
内边距、边框和外边距都是可选的，默认值是零。
但是，许多元素将由用户样式表设置外边距和内边距。
可以通过将元素的margin和padding设置为零来覆盖这些浏览器样式。
这可以分别进行，也可以使用通用选择器对所有元素进行设置：
*{
margin:
0;
padding:
在CSS中，width和height指的是内容区域的宽度和高度。
增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。
内边距、边框和外边距可以应用于一个元素的所有边，也可以应用于单独的边。
外边距可以是负值，而且在很多情况下都要使用负值的外边距。
浏览器兼容性
一旦为页面设置了恰当的DTD，大多数浏览器都会按照上面的图示来呈现内容。
然而IE5和6的呈现却是不正确的。
根据W3C的规范，元素内容占据的空间是由width属性设置的，而内容周围的padding和border值是另外计算的。
不幸的是，IE5.X和6在怪异模式中使用自己的非标准模型。
这些浏览器的width属性不是内容的宽度，而是内容、内边距和边框的宽度的总和。
虽然有方法解决这个问题。
但是目前最好的解决方案是回避这个问题。
也就是，不要给元素添加具有指定宽度的内边距，而是尝试将内边距或外边距添加到元素的父元素和子元素。
3.2.4CSS定位
CSS定位（Positioning）属性允许你对元素进行定位。
CSS定位和浮动
CSS为定位和浮动提供了一些属性，利用这些属性，可以建立列式布局，将布局的一部分与另一部分重叠，还可以完成多年来通常需要使用多个表格才能完成的任务。
定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。
显然，这个功能非常强大，也很让人吃惊。
要知道，用户代理对CSS2中定位的支持远胜于对其它方面的支持，对此不应感到奇怪。
另一方面，CSS1中首次提出了浮动，它以Netscape在Web发展初期增加的一个功能为基础。
浮动不完全是定位，不过，它当然也不是正常流布局。
一切皆为框
div、h1或p元素常常被称为块级元素。
这意味着这些元素显示为一块内容，即“块框”。
与之相反，span和strong等元素称为“行内元素”，这是因为它们的内容显示在行中，即“行内框”。
您可以使用display属性改变生成的框的类型。
这意味着，通过将display属性设置为block，可以让行内元素（比如<
a>
元素）表现得像块级元素一样。
还可以通过把display设置为none，让生成的元素根本没有框。
这样的话，该框及其所有内容就不再显示，不占用文档中的空间。
但是在一种情况下，即使没有进行显式定义，也会创建块级元素。
这种情况发生在把一些文本添加到一个块级元素（比如div）的开头。
即使没有把这些文本定义为段落，它也会被当作段落对待：
sometext
p>
Somemoretext.<
/div>
在这种情况下，这个框称为无名块框，因为它不与专门定义的元素相关联。
块级元素的文本行也会发生类似的情况。
假设有一个包含三行文本的段落。
每行文本形成一个无名框。
无法直接对无名块或行框应用样式，因为没有可以应用样式的地方（注意，行框和行内框是两个概念）。
但是，这有助于理解在屏幕上看到的所有东西都形成某种框。
CSS定位机制
CSS有三种基本的定位机制：
普通流、浮动和绝对定位。
除非专门指定，否则所有框都在普通流中定位。
也就是说，普通流中的元素的位置由元素在（X）HTML中的位置决定。
块级框从上到下一个接一个地排列，框之间的垂直距离是由框的垂直外边距计算出来。
行内框在一行中水平布置。
可以使用水平内边距、边框和外边距调整它们的间距。
但是，垂直内边距、边框和外边距不影响行内框的高度。
由一行形成的水平框称为行框（LineBox），行框的高度总是足以容纳它包含的所有行内框。
不过，设置行高可以增加这个框的高度。
CSSposition属性
通过使用position属性，我们可以选择4种不同类型的定位，这会影响元素框生成的方式。
position属性值的含义：
∙static
元素框正常生成。
块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一
升级会员 