当前位置:文档之家› html web重点

html web重点

html web重点
html web重点

WEB开发基础概念

1、WWW有哪些特点,它的基本工作原理是什么?

答:WWW的特点:(1).WWW是一个超文本链接信息系统(2).WWW是图形用户界面(3).WWW 与系统平台无关(4). WWW是分布式的(5). WWW是动态的(6). WWW采用交互浏览方式

WWW的工作原理:WWW使用HTML和HTTP,提供面向INTERNET服务器的、用户界面一致的信息浏览系统。WWW通常采用浏览器/服务器(B/S,BROWSER/SERVER)模式。信息资源以网页形式存储在WWW服务器中,用户在自己的计算机上通过客户端浏览某WWW服务器上的网页WWW工作步骤如下:

用户启动客户端浏览器,输入URL,浏览器软件通过HTTP向URL所在的WEB服务器发出服务请求。

服务器根据浏览器请求,把URL地址转化成页面所在服务器上的文件路径,找到相应的网页文件。

当网页中仅包含HTML标记时,服务器直接使用HTTP将该文档发送到客户端;如果HTML文档中还包含有JAVASCRIPT/VBSCRIPT等脚本程序代码,这些代码也将随同HTML文档一起下载,由浏览器执行脚本代码;如网页中嵌套有CGI或ASP程序,这些程序将由服务器执行,并将运行结果以HTML标记形式发给客户端。

浏览器解释HTML文档,并将结果在客户端浏览器上向用户显示

2、简要说明B/S系统的工作原理,试说明B/S对于传统C/S系统的优势。

答:

C/S架构和B/S架构最大的区别在于逻辑处理在哪端

纯C/S架构的大部分逻辑处理在客户端,所以服务器的负担很轻,可要修改逻辑处理的时候,就要把所有的客户端都改;纯B/S架构的大部分逻辑处理在服务端,所以服务器负担很重,可要修改逻辑处理的时候,只需修改服务端,不需修改客户端。

3、简要说明IP地址与域名的关系,域名解析服务器的作用是什么?

答:IP地址与域名的关系:一个IP地址对应多个域名。

域名解析服务器的作用是:域名服务器是装有域名系统的主机。它是一种能够实现名字解析的分层结构数据库。域名系统负责把域名翻译成IP地址。

4、目前进行网站开发有哪些主流平台和开发工具?

答:主流WEB开发技术与平台:ASP(动态服务器页面)与https://www.doczj.com/doc/fb3094340.html,、JSP、PHP(超文本预处理语言)。

5、WWW是World Wide Web (环球信息网)的缩写,也可以简称为Web,中文名字为“万维网”,用于检索和浏览链接到Internet服务器上的有关内容。它利用超文本(Hypertext)、超媒体(Hypermidia)等技术,使用户通过浏览器(如IE,FireFox)可以方便地检索远程服务器上的文本、图形、声音以及视频文件。

7、常用web术语

互联网:泛指由多个计算机网络相互连接而成的一个网络,它是在功能和逻辑上组成的一个大型网络,由美国阿帕网ARPANET发展而成,主要采用TCP/IP协议。

超文本(hypertext):一种全局性的信息结构,它将文档中的不同部分通过关键字建立链接,使信息得以用交互方式搜索。它是超级文本的简称。

超媒体是超文本(hypertext)和多媒体在信息浏览环境下的结合。它是超级媒体的简称。

域名:是internet上某一台或一组计算机的名称,用于在数据传输时标示计算机的电子方位。

域名服务器:是装有域名系统的主机。

电子邮件:用户或用户组之间通过计算机网络首发信息的服务。

浏览器:向万维网服务器发送各种请求,并对从服务器发来的由html语言定义的超文本信息和各种多媒体数据格式进行解释、显示和播放。

传输控制协议:是tcp/ip网络体系结构传输层的一个协议,用以提供可靠的数据传输。

文件传输协议:ftp是因特网上使用最广泛的文件传输协议,主要作用就是让用户连接上一个远程计算机,可以查看远程计算机上的文件,也可以复制远程计算机上的文件到本地计算机。

超文本传输协议:用于互联网上的浏览器和web服务器之间传输超文本的协议。

IP地址:也称作点数码组,是包含有四个由点号隔开的特定数字,每组数值由8个二进制位组成。

子网掩码:又称子网屏蔽。使用子网掩码可把一个网络分成若干个子网,每个子网使用不同的网络ID,主机IP分成两个部分,一部分用于标示作为唯一网络的子网,另一部分用于标示主机。

网关:又称协议转换器,连接两个或多个管理上相异的网络、子网的节点,是一种存储转发设备。

Applet(小程序):它与JAVA不同之处在于,他们不能访问本地计算机上的某些特定资源,也不能通过网络与其他大部分计算机通信。

ASP:采用面向对象的编程方法,无须编译和即可执行,还可以通过Active X控件扩充ASP 的功能。支持客户端和服务器端脚本,一般使用VBScript作为默认的脚本语言。

Cookie:是指www服务器发送给浏览器的一小段信息。

Session(会话):是服务器进程中存储一个客户端连接的信息,一个session对象的创建,是从一个客户连接开始。

URL:统一资源定位器,也称网页地址,是因特网上标准的资源的地址。

8、网页与网站

网页:当浏览者输入一个网站的网址或者单击某个链接,在浏览器里看到的文字、图片,可能还有动画、音频、视频等内容,承载这些内容的就是网页。

网站:就是各种各样内容网页的集合,有的网站内容庞杂,如新浪,网易这样的门户网站;有的网站可能只有几个页面,如小型的公司网站,但是它们都是由最基本的网页组合起来的。

首页:在网站中,有一个特殊的页面,它是浏览者输入某网站的去世后后看到的第一个页面,因此这个页面有一个专用的名称-Homepage,即首页,正因为主页浏览一个网站的起始页面,有的时候,“主页”也就成了“网站”的代名词,如“个人主页”。

9、网页基本元素

文本:包括字体、字型、颜色、段落设置以及对齐方式等。

图片:GIF、JPEG、PNG,矢量格式

超级链接:包括文字链接和图片链接,只要浏览者单击带链接的图片或文字,就可以自动链接上对应的其它文件。

动画:包括GIF动画和Flash动画。

网页特效:网页中使用JavaScript、VBScript等脚本语言实现的各种特殊动态效果,如跟随鼠标移动的文字或图像、下拉菜单、自动弹出窗口等,网页特效倒网页活泼、表现力更强。

表单:是一种可以在浏览者与服务器之间进行信息“交流”的东西,使用表单可以完成搜索、论坛、发送电子邮件、在线购物等交互功能。

音/视频:随着网络技术的发展,网页上面不再是单调的MIDI背景音乐,丰富多彩的网络电视、博客等已经开始成为网络新潮流。

10、网站常用功能

信息发布:企业/事业单位网站/

信息服务:信息查询服务:https://www.doczj.com/doc/fb3094340.html,、https://www.doczj.com/doc/fb3094340.html,

业务运营:学校信息系统:学籍管理/成绩查询/校园卡服务

电子商务:电信话费查询/网上购物平台(e-buy)

11、网站开发一般流程

(1)、前期规划:明确网站的目标和用户需求

(2)、网站素材的组织与准备:1)详细调查,广泛与有关人员接触,使其尽可能充分地提供一些详尽的资料与素材,尽可能多获取第一手的感性材料;2)多方听取意见;3)资料整理。

(3)、站点结构规划:1)站点逻辑结构:页面导航结构设计;2)站点目录结构设计。

(4)、界面设计、数据库设计、业务设计

(5)、页面制作、编程开发

(6)、站点测试、发布推广

12、目前主流web服务器

Microsoft IIS

Microsoft的Web服务器产品为Internet Information Server (IIS), IIS 是允许在公共Intranet或Internet上发布信息的Web服务器。IIS是目前最流行的Web服务器产品之一,很多著名的网站都是建立在IIS的平台上。IIS提供了一个图形界面的管理工具,称为 Internet 服务管理器,可用于监视配置和控制Internet服务。

IIS是一种Web服务组件,其中包括Web服务器、FTP服务器、NNTP服务器和SMTP服务器,分别用于网页浏览、文件传输、新闻服务和邮件发送等方面,它使得在网络(包括互联网和局域网)上发布信息成了一件很容易的事。它提供ISAPI(Intranet Server API)作为扩展Web服务器功能的编程接口;同时,它还提供一个Internet数据库连接器,可以实现对数据库的查询和更新。

Apache

Apache源于NCSAhttpd服务器,经过多次修改,成为世界上最流行的Web服务器软件之一。Apache 是自由软件,所以不断有人来为它开发新的功能、新的特性、修改原来的缺陷。Apache的特点是简单、速度快、性能稳定,并可做代理服务器来使用。本来它只用于小型或试验Internet网络,后来逐步扩充到各种Unix系统中,尤其对Linux的支持相当完美。

Tomcat

Tomcat是一个开放源代码、运行servlet和JSP Web应用软件的基于Java的Web应用软件容器。Tomcat Server是根据servlet和JSP规范进行执行的,因此我们就可以说Tomcat Server 也实行了Apache-Jakarta规范且比绝大多数商业应用软件服务器要好。

HTML语言基础

1、HTML语法规则:

(1)HTML标签由成对的尖括号“<>”、标签名及属性组成。

(2)标签可以嵌套使用,但不能交错嵌套

(3)HTML不严格区分大小写,但W3W(World Wide Web Consortium,万维网联盟)的Web标准中大小写意义不同,建议小写。

2、常用HTML标签:

标题(Headings)标签有6个级别,从

,逐步减小。

分段标记

align=”center”(居中)

换行标记

文字样式控制

标签

Size:设置

size:设置字体大小,默认值3,可以取1到7,取值越大,文字显示越大相对值,+1表示比默认值大1号字体,反之亦然。

color:设置文字颜色,默认值为黑色,其值可取颜色名称或十六进制

face:设置字体样式。可指定一个或几个字体名称(用逗号格开),中文默认字体为“宋体”、英文默认为“Times New Roman”。

文字显示效果

字体样式

常用逻辑字符样式:

指定网页设计者或维护者的信息,通常显示为斜体

表示文本属于引用,通常显示为

表示程序代码,通常显示为固体宽度字体

表示定义了的术语,通常显示为黑体或斜体

强调某些词,通常显示为斜体

表示用户的键盘输入,通常显示为固定计划调节字体

表示文本样本,通常显示为固定宽度字体

特别强调某些字词,通常显示为粗体

表示变量,通常显示为斜体

常用物理字符样式:

粗体

斜体

下划线

大字体

小字体

删除线

删除线

下标

上标

固定宽度字体

图片标签

图像(Images)是由标签定义的,通常用来定义一个图片,scr属性用来指定图件路径。如果图片路径不对或者不支持图像的浏览器(如手机),图片就不能正常显示,通常给标签加上alt属性,当不能正确显示图片的时候,alt的值就能作为文字显示出来。标签还有width、height、align、border等属性分别表示宽度、高度、对齐方式、边线宽度等。

超链接

超链接是实现不同页面之间或者不同Web站点之间信息浏览的主要手段。

基本语法:超链接显示的文字 表格:table

表格具有以下属性:

border 表格边线

width/height 表格宽度/高度,可以设置为相对值或绝对值

align 水平对齐方式,可以设置center、left、right几种值

cellpadding 变单元格内容和单元格边界之间的距离

cellspacing 单元格之间的距离

和还可以设置垂直对齐属性:

valign 垂直对齐方式,baseline、bottom、middle、top

网页布局关系到网页的视觉效果与用户的审美感受,一个好的网页布局往往是网站成功的起点。

网页布局的方法很多,不用设计人员有不同的偏好,通常使用表格、DIV+CSS或者框架进行网页的布局。

表单

单行文本:


多行文本:

密码文本:

单选按钮:
复选按钮:读书运动

下拉列表:


按钮: 提交:

重置:

1、网页表单元素:文本框,单选按钮,复选按钮,下拉列表,按钮等。

2、HTML文档基本结构

整个HTML文档是一个层层嵌套的树形结构,最外层标签,整个文档由头部和正文组成,HTML文档的扩展名为.html或.htm。

头部:由标签组成,标签内还可以嵌套其他头部标签。

正文:由标签组成,标签中又可以嵌套其他页面标签。

3、超链接常用属性

Target(链接对象打开的窗口位置,_blank:新窗口打开,_parent:父窗口打开,_self:本窗口打开

Title:当鼠标悬停的在超链接上时,显示超链接的文字注释,可以使用“ ;”作为换行符

Href:超链接资源路径

name:使用name属性,可以跳转到一个文件的指定部位。

CSS样式表

1.与直接设置HTML属性控制样式相比,使用CSS有哪些优势?

答:(1)CSS使样式代码独立于网页HTML代码,简化网页格式设计,增强了网页的可维护性。

(2)样式与内容分离,可使用程序控制样式,增强了网页的表现能力。

(3)CSS文件可被浏览器缓存、加载和刷新网页时,只需要传送页面内容,就可以节省带宽,提高访问速度。

(4)内容与样式设计分离,有利于开发团队分工合作,提高代码重用性,提高开发效率。

(5)网页内容与外观代码分离,提高了页面的兼容性,不同的浏览器与设备可根据实际情况对同一站点的页面样式进行选择和处理。

2.CSS有哪些选择器,试通过实例说明它们的优先级和相互作用原理。

答:HTML标签作样式选择器、类作样式选择器、ID作样式选择器、层次样式选择器、超链接专用选择器、通配选择器

优先级从高到低依次:ID、类、HTML标签

使用类选择器和ID选择器区别:

(1)类选择器可以重复使用,且可以用在任意元素上,使用任意次;

(2)页面中HTML标签的ID属性应该是唯一的,拥有ID的元素才会应用该样式;

(3)ID选择器的优先权高于类选择器

3.试说明CSS盒模型。

答:盒模型是WEB页面一个非常重要的概念,网页文档流中的所有元素都可以看成是一个盒子,每个盒子在页面中占据一定的空间。

可以通过一幅画来理解盒模型,对于挂在墙上的一幅画来说,有画框,画与画框之间有距离,画框与画框之间也会有一定距离,即外边距,在网页盒模型中,外边距(margin)、边框(border)、内边框(padding)以及盒子的长(width)与高(height)共同组成了盒子模型。

4.欲制作一个网页相册,试用CSS说明带边框、多行多列图片列表的实现方式。

答:

5.掌握CSS的语法规则及各种属性的定义方法:

答:CSS由样式规则组成,以告诉浏览器怎样去显示一个文档。样式规则一般由样式符与属性组成。常用的样式符有HTML标签、用户自定义类和用户自定义ID等。

CSS样式语法规则:

样式符{attributes1:values1;attributes2:values2;…}

其中“样式符”表示要定义样式的类型,样式符可以包括HTML标签符、用户自主义类class 或用户自定义ID。“属性(attributes)”表示由CSS标准定义的样式属性,“属性值(values)”为样式属性的值。

样式规则:

样式选择器{

属性1:属性值;

属性2:属性值;

。。。

属性N:属性值;

}

关于样式表的语法,要注意以下几个问题:(1)属性必须包含在{}号之中;(2)属性和属性值之间用“:”分隔;(3)当有多个属性时,用“;”进行区分;(4)如果一个属性有几个值,则每个属性值之间用空格分隔开;(5)CSS语言对于属性值要求很严格,如果CSS规范中没有或者不符合要求,CSS语句都不能正常作用。

6.了解在网页中使用CSS的常用方法;

答:第一种是把CSS文档放到文档中,第二种方法是把CSS样式表写在HTML的行内第三种方法是:把您编辑好的CSS文档保存成“.CSS”文件,然后在中定义。

7.理解样式选择符及其作用原理

答:

8.CSS全称是Cascading Style Sheet,中文称为层叠样式表,它是一种标记性语言,配合HTML语言进行页面外观控制。CSS技术诞生于1996年。CSS是由W3C组织负责制定和颁布的,1996年12月发布的

9.类作为样式符

定义格式:

样式符.类名{ attributes1:values1;attributes2:values2;…},例:

span.blue{color:#0000FF}

span.red{color:red}

应用样式时在对应的HTML标签中加入class属性,属性值为样式表的类名。例:

这是一个引用两个不同span样式的例子,蓝色span红色span

类的声名也可以不针对具体的HTML标记符,这样定义的类可以被应用于任何HTML标签,通常称为在。

格式:

。类名{ attributes1:values1;attributes2:values2;…}

引用时在标签属性内加上class属性,属性值为类名。

10.样式符为HTML标记

利用用户自定义类可以实现所有的HTML标签的样式选择,当要达到复杂的样式效果时,可以采用样式分类的方法实现。

11.用户自定义ID作为样式符

用户自主义ID与用户自定义类的功能相同,其区别仅为定义语法与引用方法不同。

定义格式如下:#ID名{ attributes1:values1;attributes2:values2;…}

12.超链接专用选择器

a:link(没有接触过的链接),用于定义了链接的常规状态。

a:hover(鼠标放在链接上的状态),用于产生视觉效果。

a:visited(访问过的链接),用于阅读文章,能清楚的判断已经访问过的链接。

a:active(在链接上按下鼠标时的状态),用于表现鼠标按下时的链接状态。

13. CSS样式表的引用方式有内部嵌套和引用外部样式表文件几种基本方式。

html标签中以style属性引用样式

示例:

这是一个直接书写样式的段落

头部标签嵌套引用

网页之间插入样式表代码:

引用外部样式表文件

之间通过link引用外部文件:

文章标题

14. CSS属性具有继承、层叠等特性。

CSS继承原则决定HTML子标签会继承父标签的样式风格,并可以在父标签的基础上加以修改,产生新的样式,而子标签的样式风格不会影响父标签的样式。利用这一原则,可以将公共的样式写在父标签的样式中,从而节省CSS代码编写量。

就近原则:当多个样式都对某个标签起作用时,如果多个样式中的属性互不冲突,则这些样式共同作用于标签,也称层叠性。如果定义的样式属性有冲突,在优先级相同的前提下,这些样式中发生冲突的属性就按就近原则对标签作用。

15.CSS属性:

(1)长度单位,有相对单位与绝对单位。

相对长度:px,em,%

绝对长度:in,cm,mm,pt,pc

(2)颜色值

(3)字体属性

Font-family属性:用来设置HTML元素的字体列表,可设置多个值,浏览器由前向后依次选择字体

Font-size属性:用来控制字体显示的大小,取值有相对取值有相对取值和绝对取值,相对取值可使用%或相对值larger、x-large、small、smaller等,绝对取值是指使用绝对长度单位,如:px、pt等

Font-style属性:用来设置指定元素的显示字形样式,font-style属性有normal(普通)、italic(斜体)、oblique(倾斜)三种取值,默认值为normal

Font-weight属性:设置字体的粗细,属性取值可为normal bold bolder light lighter 100 200 … 900 , 100至900依次最细渐变到最粗

Font-variant属性:设置字体异体,具有normal与small-caps两种取值

注意:small-caps只是将小写字母显示成大写格式,但不是字母转换,本质上仍是小写字母。

Font属性:设置字体属性的一种简略写法,设置时可以省略某些属性,应按font-weight font-variant font-style font-size font-family的顺序依次出现(4)文本属性:

Letter-spacing属性:设置字符间距,属性值可为具体长度,并可取负值,用来紧缩字符间距。

Word-spacing属性:设置文本中单词(汉字)间的距离

Line-height属性:控制标记符中文本行高。其取值可以是数字、度或百分比,normal 为默认值。

Text-decoration属性:文本修饰属性,包括none 、underline(下划线)、overline(上划线)、line-through(删除线)、以及闪烁(blink)等值,none为默认值,IE中不支持blink效果,在Firefox浏览器中可以看到闪烁效果。

Text-align/vertical-align属性:设置文本的水平对齐/垂直对齐,text-align取值为left 、right、center、justify,默认值为left,vertical-align的取值为baseline 、sub 、super 、top 、text-top、 middle 、bottom 、text-bottom等值,baseline为默认值。

Text-transform属性:用来设置文本格式转换,取值有none(默认值)、capitalize(首字母大写)、uppercase(字母大写)、lowercase(字母小写)。

Text-index属性:设置首行缩进,取值可以为数值或百分比,可取正值或负值,默认值为0,表示无缩进。

(5)颜色和背景

1、颜色属性

2、背景属性:网页中可以设置背景颜色background-color和背景图案background-image属性。

Background-image可以为HTML标签指定背景图片,url用来设置背景图片路径,一般来说,网页背景不需要和页面等大,通过background-repeat实现图片在页面中的平铺,从而节省带宽,background-repeat有repeat(水平与垂直平铺)repeat-x(水平方向平铺)repeat-y(垂直方向平铺)no-repeat(不平铺)等取值方式,repeat为默认值。

Background-image属性控制指定的背景图案是否跟随内容一起滚动,取值为scroll(拉动滚动条时,背景图片随内容一齐滚动)、fixed

(6)定位属性:用于控制元素在页面上的位置,实现页面内元素之间的重叠

Position属性:设置元素在页面的定位方式,值可以是static(按html格式规则正常定位)、relative(定位在于页面前一个元素的末端位置)、absolute(定位在框架或浏览器窗口本身左上角的绝对位置),默认值为static。

top和left属性:规定某个元素与其他元素之间的距离,按像素来设定元素位置往下或往

右的距离。

例:p { position: absolute; top: 20px }(段落的顶部边缘设置到距离窗口顶部边缘的下方20像素)

z-index属性,解决元素的重叠问题,相当于某些编辑软件中“层”的概念。取值为大于等于-1的自然数,当图片作为背景时,可使用值-1

overflow属性,溢出,设置当元素内容溢出其区域时如何对内容进行管理,取值可为visible、hidden 、scroll 、auto。

(7)浮动属性与文档流

Float属性:将元素的内容浮动到页面的左边缘或右边缘,取值为left 、right、none,默认值为none。

Clear属性:指定一个元素是否允许有元素漂浮在它的旁边,取值为none、 left、 right、both,默认值none

(8)Cursor鼠标属性

url:需要被使用自定义光标的URL,一般图片格式为jpg

default:默认光标(通常是一个箭头)

auto:默认。浏览器设置一种光标

crosshair:光标呈现为十字线

pointer:光标呈现为指示某个链接的指针

move:此光标可指示某对象可被移动

e-resize:此光标可指示某个矩形框的边缘可被向右(东)移动。

(9)边框属性

边界属性(margin):margin-left、margin-right、margin-top、margin-bottom分别设置页面元素左、右、上、下边界的宽度,取值可以为长度、百分比或auto。使用margin可以同时设置四个方向的边界宽度。

边框属性:边框宽度:border-left-width、border -right-width、border -top-width、border -bottom-width分别用来设置左、右、上、下4个边框的宽度,取值可以是thin、medium、thick、length、medium。 border-width可以同时设置四个方向的边框宽度。

边框颜色:border-left-color、border -right-color、border -top-color、border -bottom-color分别用来设置左、右、上、下4个边框的颜色。border-color可以同时设置四个方向的边框颜色

JavaScript基础

1.JavaScript是由Netscape公司开发并随Navigator

2.0一起发布的一种基于对象(Object)和事件驱动(Event Driven)的客户端脚本语言。(客户端语言,解释型语言, 面向对象, 事件驱动)

2.JavaScript功能:控制网页的外观与内容;与网页表单进行交互;与用户进行交互;对浏览器进行控制;AJAX功能。

3. JavaScript特点:简单性;动态性;跨平台性。

4. JavaScript与Java语言有什么区别和联系?

答:1)Java是由SunW公司推出,主要用于网络程序设计,对于非程序设计人员来说不易掌握;而JavaScript主要用于编写网页中的脚本,易于学习和掌握。

2)Javat程序可以单独执行,但JavaScript程序只能嵌入HTML中,不能单独运行。

3)Java具有严格的类型限制,JavaScript则比较宽轻。

4)Java程序编译执行需要专门的虚拟机才能实现,JavaScript程序在一般浏览器中即可运行。

5.简述DOM模型,JavaScript如何根据DOC模型操纵网页元素?

答:文档对象模型DOC全称是Document Object Model,DOM定义了操作文档对象的接口,

主要用来处理HTML文档的DOM结构。

DOM模型可以理解成一个树形结构,例如HTML文档中,html是根结点document的子对象,而head和body又是html的子对象,两者又有各自的子对象。

可以使用以下方式实现对一个结点的引用:

1)使用docment.getElementById() 引用指定的ID的结点

2)使用getElementByName()获取具有相同name属性的元素集合

3)使用getElementByTagName()获取具有相同标签名的元素集合

6.在网页中使用JavaScript的方法:

1)在HTML标记中直接写入JavaScript代码

2)将JavaScript代码嵌入标记中

3)调用外部JS文件:将在网页中可能会被重复使用的JavavScript代码独立存一个扩展名为.js的文件,在当前网页中利用

7.对象(Ojbect)是面向对象程序设计的核心。要理解面向对象编程,必须理解类和对象两个概念。

类:简单地说就是模板,是一类具有某种性质的物体的集合

对象:就是类的具体实现。

对一个对象一般包括以下两种基本操作:即属性和方法。

对象的属性和方法使用一般格式:对象名.属性对象名.方法

9.事件与事件驱动

事件驱动是网页设计者实现网页动态效果的切入点,事件驱动包括事件和事件处理程序两个基本概念。

事件(EVENT)是指用户在某个对象上所作的动作。

事件处理程序,是指当某个事件发生时,通过程序作出的相应响应。

onabort 图像加载被中断

onblur元素失去焦点

onchange用户改变域的内容

onclick鼠标点击某个对象

ondblclick鼠标双击某个对象

onerror当加载文档或图像时发生某个错误

onfocus元素获得焦点

onkeydown某个键盘的键被按下

onkeypress某个键盘的键被按下或按住

onkeyup某个键盘的键被松开

onload某个页面或图像被完成加载

onmousedown某个鼠标按键被按下

onmousemove鼠标被移动

onmouseout鼠标从某元素移开

onmouseover鼠标被移到某元素之上

onmouseup某个鼠标按键被松开

onreset重置按钮被点击

onresize窗口或框架被调整尺寸

onselect文本被选定

onsubmit提交按钮被点击

onunload用户退出页面

10.浏览器对象

moveBy()可相对窗口的当前坐标把它移动指定的像素

moveTo()把窗口的左上角移动到一个指定的坐标。

open()打开一个新的浏览器窗口或查找一个已命名的窗口

print()打印当前窗口的内容

prompt()显示可提示用户输入的对话框。

resizeBy()按照指定的像素调整窗口的大小

resizeTo()把窗口的大小调整到指定的宽度和高度。

scrollBy()按照指定的像素值来滚动内容

scrollTo()把内容滚动到指定的坐标

setInterval()按照指定的周期(毫秒计)来调用函数或计算表达式

setTimeout()在指定的毫秒数后调用函数或计算表达式

XML基础

1.XML是Extensible Markup Language的缩写,意为可扩展的标记语言。与HTML结构相似,但XML是一种专门表示数据的标记语言。XML是Internet环境中跨平台的、依赖于内容的技术,是当前处理结构化文档信息的有力工具。

2.XML的特点

●XML使用有意义的标记(TAG),具有语义。

●XML是描述数据内容的语言,本身并不决定数据该如何显示,数据的显示由

XSL决定。

●XML可自定义标记,可由用户按需要增加标记。

●XML对语法有严格的要求,所有XML的文件都必须经过严格的“验证”过程

才算完成,文件格式容易转换。

3.XML的优势

(1)、数据的检索(2)、数据的显示(3)、数据的交换

4.XML相关技术

DTD(Documentation Type Definition,文档类型定义)

XSD(XML Schema Definition,XML模式定义)

CSS(Cascading Style Sheets,级联样式表)

XSL(Extensible Stylesheet Language,可扩展样式语言)

XLL(Extensible Linking Language,可扩展链接语言)

5.XML语法:XML语言对格式有着严格的要求,主要包括格式良好和有效性两种要求。

6.XML文档的组成:

1)XML的声明

Version表示XML的版本号;standalone表示文档是否附带DTD文件,默认为no;

encoding表示文档的编码方式,默认是“UTF-8”

2)处理指令PI

3)DTD样式

4)注释

5)元素、属性、文本

6)CDATA

7)实体

7.内部的DOCTYPE(文档)声明

语法:<!DOCTYPE根元素[元素声明]>

8.外部的DOCTYPE(文档)声明

语法:<!DOCTYPE 根元素SYSTEM“文件名”>

9.在DTD中,元素的声明语法为:

<!ELEMENT DESCRIPTION(#PCDATA,DEFINITION)*>

10.在DTD中,属性的声明语法为:

<!ATTLIST元素名称属性名称属性类型默认值>

11.XML文档实质上是一个个实体组合,或者说,实体(entities)在XML文档中是一种数据单位。实体只有在DTD文件中声明后,才可以在其他地方被用。

12.XML实体从不同角度有不同的表达,如通用实体和参数实体,内部实体和外部实体。

内部实体与XML文档存储在一起,而外部实体则存放在其他文件内,通过URL来存取。

声明内部实体语法:<!ENTITY entity_name entity_value>

13、声明外部实体语法:<!ENTITY entity_name SYSTEM url_uri>

其中:entity_name:实体名称;entity_value:实体所代表的数据内容;url_uri:实体参考文件的地址路径。

14、所谓内部实体指的是实体引用值属于一个字符串的文本字符内容。

15、XSL文档显示的方法有:CSS样式、XSL

16、在XML文档中,CSS的使用方式用两种:引用式和内嵌式。

1)引用式是指XML文档本身不含有样式信息,而通过引用外部独立的CSS文件来定

义文档的表现形式。

2)内嵌式是指将CSS样式指令直接嵌入到XML文档内部,为元素设置style属性,

并在属性值中给出对其样式的定义。

其语法格式:

type属性:指出所使用的样式表种类

href属性:指定外部CSS文件路径

17、XSL是XML专属的样式语言。它从功能上分为两部分:一是转换XML文档,二是格式化XML文档。

18、XSL样式表的基本结构是一个树状结构,该结构的根元素名称为stylesheet。

其语法格式:

version="1.0" xmlns:xls="https://www.doczj.com/doc/fb3094340.html,/1999/XSL/Transform">

version属性:表示XSLT的版本号,用于指出该XSLT文档遵从哪个标准

xmlns属性:作用是声明XSLT所使用的命名空间

19、一个XSL文档主要由一条模板规则构成,一条模板规则有一个模式,该模式指定了它能够作用的树状结构,当模式匹配时就会按照模板样式输出。

XSL中每一条模板规则就是一个xsl:template元素,该元素的内容定义了将源文档转换到结果所需要的规则。在这个元素中,有一个match属性,它的作用就是指出一种模式,用以标示出可以应用该规则的节点。

实验:

个人简历

个人简历

  • 个人资料

  • 姓名:陈湘军年龄:21 性别:女联系方式:139XXXXXXXX

  • 兴趣爱好:看书,听音乐

  • 所在学校
  • 江苏技术师范学院


  • 校园地图
  • 盒子模型(相册)

    相册

    调用样式表

    .css文件

    body {text-align: left;background:url(images/bg.gif ) top center repeat;}

    #left{float: left;margin: 0 0 0 6px;}

    #foot{clear: both;margin-left: 12px;width: 95%;}

    #main {float: right;border: 1;}

    a:link { color: #339933; text-decoration: none}

    a:visited { color:#gray; text-decoration:line-through}

    a:active { color: #ff0000; text-decoration: underline}

    a:hover { color: #ff0000; text-decoration: underline}

    调用.css时在head中的格式:

    实验六

    1、在页面上生成一个如下图所示的菜单,当鼠标移动菜单上时,切换成红色背景的图片,当鼠标移开时恢复原样,图片位于images文件夹下

    JavaScript

    2、当鼠标单击菜单时,弹出对话框:你点击了工具栏菜单一,你工具栏菜单二……

    id=sub1

    style="cursor:hand;"onmouseover="this.background='images/1.gif'"onmouseout="thi s.background='images/2.gif'">

    子栏目一

    id=sub2 style="cursor:hand;" onmouseover="dispsub(2,5)">

    子栏目二

    3、在页面上放置一个问卷调查,包含多个复选框,并有一个“全选”,当点击“全选”时,所有选项将被选中,“全选”按钮的文字变成“清空”,反之亦然

    function CheckAll()

    {

    //alert("Ok");

    var btn=document.getElementsByName("interest");

    var btnA=document.getElementById("btnCheckAll");

    var cheched=true;

    document.getElementById("SpanA").innerHTML="清空 ";

    if(btnA.checked)

    {

    cheched=false;

    document.getElementById("SpanA").innerHTML="全选";

    }

    for(var i=0;i

    {

    btn.item(i).checked=cheched;

    }

    }

    假如你突然得到十万块钱,你用这些钱来干什么?清空

    买汽车买房子

    4、跑马灯效果:动态文字(由本人学号 +姓名图中文字组成:00001 陈湘军,这是我做!

    var msg="00001 陈湘军,这是我做的跑马灯效果,请注意浏览器状态栏变化!";

    var interval = 300;

    seq = 0;

    function Scroll() {

    len = msg.length;

    window.status = msg.substring(0, seq+1);

    seq++;

    if ( seq >= len ) { seq = 0 };

    window.setTimeout("Scroll();", interval );

    }

    实验七

    三个文本框,其中第一个用来接收用户名,第二个、第三个输入密码(以*或圆点的方式显示),两个按钮。

    姓名:

    输入密码:

    重新输入:

    动态时钟

    动态时钟

      

    ;

    点击显示

    徐小凤

    25.表示标尺线的大小的HTML代码是() A.
    B.
    C.
    D.
    26.
    表示() A.页面的颜色是红色 B.水平线的颜色是红色 C.框架颜色是红色 D.页面顶部是红色 27.表示水平线对齐方式为左对齐的HTML代码是() A.
    B.
    C.
    D.
    28.
    表示() A.表示水平线没有阴影 B.表示水平线没有边框 C.表示页面边界没有阴影 D.表示水平线不显视 29.下列表示下标的是() A.. B. C. D.< 下列说法错误的是() A.表示上标 B.表示下划线 C.表示删除线

    HTML5与CSS3 web前端开发技术习题答案

    第一章 1.简答题 (1)在Web前端开发方面,HTML5与HTML4比较,主要解决哪几方面的问题? HTML5的核心在于解决当前Web开发中存在的各种问题。 一是解决Web浏览器之间的兼容性问题。在一个浏览器上正常显示的网页(或运行的Web 应用程序),很可能在另一个浏览器上不能显示或显示效果不一致; 二是文档结构描述的问题。HTML4之前的各版本中,HTML文档的结构一般用div元素描述,文档元素的结构含义不够清晰; 三是使用HTML+CSS+JavaScript开发Web应用程序时,开发功能受到很大的限制,比如本地数据存储功能、多线程访问、获取地理位置信息等,这些都影响了用户的体验。 (2)HTML5新增的全局属性有哪几个?描述其主要功能。 HTML5新增的全局属性,是指可以对任何元素都使用的属性。功能如下所示。

    (3)HTML5是下一代Web语言的开发框架,典型特性有哪些? HTML5从标记语言的功能提升到下一代Web语言的开发框架,他集成了HTML+CSS3+JavaScript的Web应用框架。。 良好的语义特性。HTML5支持微数据与微格式,增加的各种元素赋予网页更好的意义和结构,适于构建对程序、对用户都更有价值的数据驱动的Web应用。HTML5增加了section元素、article元素、nav元素以及aside元素等结构元素。 强大的绘图功能。通过使用Canvas API动态地绘制各种效果精美的图形,也可以通过SVG 绘制可伸缩矢量图形。 增强的音视频播放和控制功能。新增了audio和video 元素,可以不依赖任何插件而播放音频和视频。 HTML5的数据存储和数据处理的功能。 包括离线应用、Web通信、本地存储等功能,HTML5还支持WebSQL和IndexedDB等轻量级数据库,增强了数据存储和数据检索能力。 获取地理位置信息。HTML5新增了Geolocation API规范,应用于移动设备中的地理定位。 提高页面响应的多线程。HTML5新增了Web Workers来实现多线程功能。通过Web Workers,将耗时较长的处理交给后台线程,降低Web服务的响应时间,有利于增强用户体验。 方便用户处理文件和访问文件系统的文件文件API 。HTML5的文件API包括FileReader API 和File SystemAPI。 除了上面介绍的HTML5的特性之外,HTML5还有管理浏览器历史记录的History API。HTML5可以通过脚本语言在浏览器历史记录中添加项目,以及在不刷新页面的前提下显示地改变浏览器地址栏中的URL地址;而HTML5的拖放功能可以使用mousedown、mousemove、mouseup等方法来实现拖放操作。

    JS跳转页面参考代码大全

    JS跳转页面参考代码 第一种: 第二种: 第三种: 第四种: 第五种: =====javascript中弹出选择框跳转到其他页面===== =====javascript中弹出提示框跳转到其他页面===== ================================= 按钮式: 链接式: 返回上一步 ">返回上一步 直接跳转式: 开新窗口:

    vip.html页面实现过程

    vip.html页面实现过程 目标效果: 功能描述:在vip.html页面中只能实现头部栏和底部栏,中间的弹性区域需要在centent页面中实现。 实现过程: 头部栏 一、头部栏标题修改 将头部栏标题改成“会员中心” 二、修改头部栏右图标改成登陆按钮图标,并定义一个id,代码如下:

    改成 三、登陆按钮的页面跳转(跳转到登陆页面) appcan.button("#login", "btn-act", function() { appcan.window.open({ name : 'login', data : 'login.html' }); appcan.locStorage.setVal('vip', 'vip'); })

    底部栏 一、底部栏UI设计 该页面的底部栏UI设计实现过程与主页一致。可以从主页的底部栏直接复制。 注意不要忘记引用my.css文件:二、底部导航跳转页面链接(分别跳转至“主页”和“更多”页面) //底部导航 appcan.button("#v_more", 'btn-act', function() { appcan.window.open({ name : 'more', data : 'more.html', aniId : '10' }) }) appcan.button("#v_index", 'btn-act', function() { appcan.window.open({ name : 'index', data : 'index.html', aniId : '10' }) })

    Web前端——静态页面制作

    静态页面制作(排版) 通过在伽然这段时间工作经历的总结,发现前端排版工作中存在下问题: 1.缺乏高端技术人才; 2.缺乏开发标准; 3.代码复用性低; 4.技术风险难于把控; 归结以上问题原因: 1.所掌握的知识与项目实际所需的不匹配; 2.知识面狭窄; 3.动手能力差; 4.逻辑思维不缜密; 这是一个恶性循环,无型中增加了研发成本。 对于这样的现状经过思考,在这里阐述一下自己的想法,大家共同去考量研究一下:分工明确精细,责任到人。 大致分为这样几个步骤: 1.阅读设计稿 a)纵观设计稿。迅速阅读设计稿,脑子里迅速形成整个网站展示出来的效果。 b)逐个审查。仔细检查设计稿,记录所有设计问题、效果质疑。 c)提交确认阅读结果。 2.分析/拆分页面 a)整理设计稿,做到一一详尽。 b)提出设计稿中共通点。 字体、大小、颜色 按钮样式 边框粗细、样式 存在几种公用页面布局框架样式 命名各个页面 文档方式注明,确定各个样式className(涉及到的每个页面标注清楚) c)逐个分析每个页面的具体模块,提出简单思路、注意事项以及存在的技术难点。

    标注该模块排版时需要注意的事项: 模块的名称定义(CSS样式名称、其他素材名称前缀) 标注可用到的公用样式className 需要添加的页面效果(逻辑复杂需要提供简单的书写思路以及技术支持) 3.搭建项目框架 a)新建一个项目文件夹 b)在项目文件夹中分别新建css、images、js、html文件夹 c)在css文件夹里面创建公用样式文件、以及涉及团队成员的私有样式集 d)页面分类。在html页面内分别创建同类页面的文件夹 e)根据提前确定的名称在各类文件夹中添加各个空页面,引用公用样式 f)临时添加以团队成员名字命名的文件夹,用来存放单个模块代码 4.分工制作 a)页面类型 b)根据团队成员实际工作水平 c)根据掌握知识点层级程度 这里需要增加一项工作:过代码。这在一个团队开始阶段我感觉是必须的,在开始的时候严格把控。 5.页面整合 注意的样式之间的冲突、仔细调试 6.整体测试 7.提交结果 8.总结优劣 总结这样做优点: 易于学习,易于使用 提高代码复用 从细节规范开发 封装技术细节,降低技术难度

    HTML经典试题及答案

    1.在HTML中,表示页面背景的是() A. B. C. D. A 2.HTML中,表示() A.正在点击文字的色彩是红色。 B.可可链接文字的色彩是红色。 C.非可链接文字的色彩是红色。 D.已链接文字的色彩是红色。 C 3.下列表示,可链接文字的颜色是黑色的是() A. B. C. D. A 4.下列表示,已经点击(访问)过的可链接文字的的颜色是黑色的是() A. B. C. D. C 5.下列表示,正被点击的可链接文字的颜色是白色的是() A. B. C. D. C 6.,表示() A.页面左边的表格大小 B.页面左边的空白大小 C.页面左边的可用区域大小 D.页面左边的可编辑区域大小 B 7.,表示() A.页面上边的表格大小 B.页面上边的空白大小 C.页面上边的可用区域大小 D.页面上边的可编辑区域大小 B 8.链接(Link)基本语法是() A....

    JSP页面跳转大全

    JSP页面跳转大全 https://www.doczj.com/doc/fb3094340.html,/yuxiangtong0524@126/blog/static/8008616320103215348290/JSP中的跳转:(1). forward()方法 使用到javax.servlet.RequestDispatcher类 RequestDispatcher rd = getServletContext().getRequestDispatcher("url"); rd.forward(requestVar,requestVar); //传递servlet的入口参数 /*forward函数已经把原页面的request,response对象传入新的页面,因此这新旧页面拥有相同的request,response对象。request.getparameter("var")就可以得到相应的值.*/ /*forward()是直接在server做的,浏览器并不知道,也不和浏览器打交道,浏览器的地址不变化。*/ 即: getServletContext().getRequestDispatcher("url").forward(requestVar,responseVar); 服务器端Servlet进行转向的4种方法: 1.ServletContext的getRequestDispatcher() 2.ServletContext的getNamedDispatcher() 3.ServletRequest的getRequestDispatcher() 4.ServletResponse的sendredirect()进行转向。 forward方法,因为这些这样比较高效。只有在forward方法不能使用时,再使用servletresponse的sendredirect()方法。 (2).response.sendRedirect(url); 其实是向浏览器发送一个特殊的Header,然后由浏览器来做转向,转到指定的页面,所以用sendRedirect时,浏览器的地址栏上可以看到地址的变化。新页面不能处理旧页面的pagecontext (request,response,...)对象. 在response.sendRedirect之后,应该紧跟一句return; (3).HTML语言的自动跳转 0是等待时间,如果设置为5表示等待5s后开始跳转 ………… (4).JavaScript跳转 A: B: 也可以直接给window.location属性赋值,window.location="url",与A不同的是有历史记录 C: 对于document,location不是不是对象,document.location=document.url

    Web前端开发简明教程(HTML+CSS+JavaScript+jQuery)教学大纲

    高级网页设计与制作 Advanced Web Design and Implementation 一、课程编号: 二、课程类别: 三、课程性质:选修课 四、学时: 48(讲课学时:24 实验学时:上机学时:24 课外学时:) 五、学分: 3 六、先修课程要求:无 七、适用专业:计算机相关专业 八、适用年级、学期:二年级第1学期 九、课程目的及任务: 本课程是面向计算机相关专业学生开设的一门专业选修课程,培养学生WEB 开发中的前端界面设计能力,为后续课程的学习奠定基础。 本课程的主要任务是介绍利用Dreamweaver开发工具进行网页设计,包括如何在网页上显示文字、图片、表格、表单等;利用CSS技术对网页上内容进行排版,并设置相关格式;利用JavaScript技术对网页内容进行操作,实现一些动态效果。目的是通过本课程的学习,培养学生的实际动手能力和计算机的操作能力,能够运用所学的知识进行网页设计。 十、课程内容及基本要求(重点、难点、知识掌握程度及考核要求): 第1部分 HTML 第 1 章 HTML 概述 第 2 章 HTML 文本与图像 第 3 章 HTML 列表 第 4 章 HTML 表格 第 5 章 HTML 表单 第 6 章 HTML 5 要求:掌握HTML文档的结果,掌握标签、属性等的使用;掌握在页面上输出文字、段落,设置字体;掌握有序列表、无序列表的使用,能制作简单导航栏;掌握图片、背景与颜色的使用;掌握链接的使用,能使用超链接下载文件;掌握使用表格来表示数据和布局,用CSS对表格进行美化;掌握使用表单来与用户交互。第2部分 CSS语法基础 第 7 章 CSS 基础 第 8 章 CSS 盒子模型 第 9 章 CSS 字体与文本 第 10 章 CSS 列表与表格 第 11 章 CSS 定位 要求:掌握CSS的基本语法,掌握伪类与伪元素的使用;掌握CSS属性的使用,重点掌握定位、边距、填充属性。

    网页自动跳转代码html

    网页自动跳转代码html 方案一 方案二 正在进入

    正在进入,请稍等...