WEB前台技术专题.docx
- 文档编号:11750548
- 上传时间:2023-03-31
- 格式:DOCX
- 页数:59
- 大小:541.88KB
WEB前台技术专题.docx
《WEB前台技术专题.docx》由会员分享,可在线阅读,更多相关《WEB前台技术专题.docx(59页珍藏版)》请在冰豆网上搜索。
WEB前台技术专题
1HTML技术
1.1基本概念
什么是HTML?
-HTML是用来描述网页的一种语言。
∙HTML指的是超文本标记语言(HyperTextMarkupLanguage)
∙标记语言是一套标记标签(markuptag)
∙HTML标签是由尖括号包围的关键词,比如
∙HTML标签通常是成对出现的,比如和
∙标签对中的第一个标签是开始标签,第二个标签是结束标签
∙开始和结束标签也被称为开放标签和闭合标签
∙Web浏览器的作用是读取HTML文档,并以网页的形式显示出它们。
∙浏览器不会显示HTML标签,而是根据标签来解释页面的内容。
什么是DHTML?
-不是W3C标准。
∙DHTML指动态HTML(DynamicHTML)。
DHTML不是由万维网联盟(W3C)规定的标准。
DHTML被网景公司(Netscape)和微软公司用来描述4.x代浏览器应当支持的新技术。
DHTML是一种用来创建动态站点的技术组合物。
∙对大多数人来说,DHTML意味着HTML4.0、样式表以及JavaScript的结合物。
W3C曾讲过:
“动态HTML是一个被某些厂商用来描述可使文档动态性更强的HTML、样式表以及脚本的结合物的术语。
”
∙通过HTML4.0,所有的格式化(信息)可移出HTML文档,并写入一个独立的样式表中。
因为HTML4.0可以把文档的表现从其结构中分离,我们可以在不搞乱文档内容的情况下完全地控制表现层。
∙由于CSS使开发者有能力同时控制多个网页的样式和布局,CSS可以称作Web设计领域的一个突破。
作为开发者,您可以为每个HTML元素定义样式,并把它应用到您希望的任意多的页面上。
如果需要做一个全局的改变,只需简单地改变样式,Web中所有的元素都会被自动地更新。
∙HTMLDOM定义了针对HTML的一套标准的对象,以及访问和处理HTML对象的标准方法。
“W3C文档对象模型(DOM)是一个中立于语言和平台的接口,它允许程序和脚本动态地访问和更新文档的内容、结构以及样式”。
∙使您有能力编写可控制所有HTML元素的代码。
什么是XHTML?
-是HTML与XML(扩展标记语言)的结合物。
∙XHTML包含了所有与XML语法结合的HTML4.01元素。
∙XHTML与HTML最主要的不同:
ØXHTML元素必须被正确地嵌套。
ØXHTML元素必须被关闭。
Ø标签名必须用小写字母。
ØXHTML文档必须拥有根元素。
Ø属性名称必须小写
Ø属性值必须加引号
Ø属性不能简写
Ø用Id属性代替name属性
ØXHTMLDTD定义了强制使用的HTML元素
∙存在三种XHTML文档类型:
ØSTRICT(严格类型)-
DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN""http:
//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">在此情况下使用:
需要干净的标记,避免表现上的混乱。
请与层叠样式表配合使用。
ØTRANSITIONAL(过渡类型)-
DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http:
//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">在此情况下使用:
当需要利用HTML在表现上的特性时,并且当需要为那些不支持层叠样式表的浏览器编写XHTML时。
ØFRAMESET(框架类型)-
DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Frameset//EN""http:
//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部分通过
∙内联样式
当特殊的样式需要应用到个别元素时,就可以使用内联样式。
使用内联样式的方法是在相关的标签中使用样式属性。
样式属性可以包含任何CSS属性。
以下实例显示出如何改变段落的颜色和左外边距。
red;margin-left: 20px"> Thisisaparagraph
1.2.4DIV和SPAN标签
它可以用作严格的组织工具,并且不使用任何格式与其关联。
这意味着它的内容自动地开始一个新行。
实际上,换行是
可以通过
不必为每一个
标签被用来组合文档中的行内元素。
可以通过样式来格式化它们。
span没有固定的格式表现。
当对它应用样式时,它才会产生视觉上的变化。
可以为span应用id或class属性,这样既可以增加适当的语义,又便于对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"?
>
创建XSL样式表
然后创建一个带有转换模板的XSL样式表("cdcatalog.xsl"):
xmlversion="1.0"encoding="ISO-8859-1"?
>
stylesheetversion="1.0"xmlns: xsl="http: //www.w3.org/1999/XSL/Transform"> templatematch="/">MyCDCollection
for-eachselect="catalog/cd"> value-ofselect="title"/> value-ofselect="artist"/>
for-each>
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{
color:
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;
font-weight:
normal;
}
id选择器
id选择器可以为标有特定id的HTML元素指定特定的样式。
id选择器以"#"来定义。
下面的两个id选择器,第一个可以定义元素的颜色为红色,第二个定义元素的颜色为绿色:
#red{color:
red;}
#green{color:
green;}
下面的HTML代码中,id属性为red的p元素显示为红色,而id属性为green的p元素显示为绿色。
id选择器和派生选择器
在现代布局中,id选择器常常用于建立派生选择器。
#sidebarp{
font-style:
italic;
text-align:
right;
margin-top:
0.5em;
}
上面的样式只会应用于出现在id是sidebar的元素内的段落。
这个元素很可能是div或者是表格单元,尽管它也可能是一个表格或者其他块级元素。
CSS类选择器
在CSS中,类选择器以一个点号显示:
.center{text-align:
center}
在上面的例子中,所有拥有center类的HTML元素均为居中。
在下面的HTML代码中,h1和p元素都有center类。
这意味着两者都将遵守".center"选择器中的规则。
Thisheadingwillbecenter-aligned
Thisparagraphwillalsobecenter-aligned.
和id一样,class也可被用作派生选择器:
.fancytd{
color:
#f60;
background:
#666;
}
在上面这个例子中,类名为fancy的更大的元素内部的表格单元都会以灰色背景显示橙色文字。
(名为fancy的更大的元素可能是一个表格或者一个div)
元素也可以基于它们的类而被选择:
td.fancy{
color:
#f60;
background:
#666;
}
在上面的例子中,类名为fancy的表格单元将是带有灰色背景的橙色。
属性选择器
下面的例子为带有title属性的所有元素设置样式:
[title]
{
color:
red;
}
属性和值选择器
下面的例子为title="W3School"的所有元素设置样式:
[title=W3School]
{
border:
5pxsolidblue;
}
属性选择器在为不带有class或id的表单设置样式时特别有用:
input[type="text"]
{
width:
150px;
display:
block;
margin-bottom:
10px;
background-color:
yellow;
font-family:
Verdana,Arial;
}
input[type="button"]
{
width:
120px;
margin-left:
35px;
display:
block;
font-family:
Verdana,Arial;
}
3.2.3CSS框模型
元素框的最内部分是实际的内容,直接包围内容的是内边距。
内边距呈现了元素的背景。
内边距的边缘是边框。
边框以外是外边距,外边距默认是透明的,因此不会遮挡其后的任何元素。
提示:
背景应用于由内容和内边距组成的区域。
内边距、边框和外边距都是可选的,默认值是零。
但是,许多元素将由用户样式表设置外边距和内边距。
可以通过将元素的margin和padding设置为零来覆盖这些浏览器样式。
这可以分别进行,也可以使用通用选择器对所有元素进行设置:
*{
margin:
0;
padding:
0;
}
在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,可以让行内元素(比如元素)表现得像块级元素一样。
还可以通过把display设置为none,让生成的元素根本没有框。
这样的话,该框及其所有内容就不再显示,不占用文档中的空间。
但是在一种情况下,即使没有进行显式定义,也会创建块级元素。
这种情况发生在把一些文本添加到一个块级元素(比如div)的开头。
即使没有把这些文本定义为段落,它也会被当作段落对待:
sometext
Somemoretext.
在这种情况下,这个框称为无名块框,因为它不与专门定义的元素相关联。
块级元素的文本行也会发生类似的情况。
假设有一个包含三行文本的段落。
每行文本形成一个无名框。
无法直接对无名块或行框应用样式,因为没有可以应用样式的地方(注意,行框和行内框是两个概念)。
但是,这有助于理解在屏幕上看到的所有东西都形成某种框。
CSS定位机制
CSS有三种基本的定位机制:
普通流、浮动和绝对定位。
除非专门指定,否则所有框都在普通流中定位。
也就是说,普通流中的元素的位置由元素在(X)HTML中的位置决定。
块级框从上到下一个接一个地排列,框之间的垂直距离是由框的垂直外边距计算出来。
行内框在一行中水平布置。
可以使用水平内边距、边框和外边距调整它们的间距。
但是,垂直内边距、边框和外边距不影响行内框的高度。
由一行形成的水平框称为行框(LineBox),行框的高度总是足以容纳它包含的所有行内框。
不过,设置行高可以增加这个框的高度。
CSSposition属性
通过使用position属性,我们可以选择4种不同类型的定位,这会影响元素框生成的方式。
position属性值的含义:
∙static
元素框正常生成。
块级元素生成一个矩形框,作为文档流的一部分,行内元素则会创建一
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- WEB 前台 技术 专题
copyright@ 2008-2022 冰点文档网站版权所有
经营许可证编号:鄂ICP备2022015515号-1