当前位置:首页 » 网页前端 » web期末题
扩展阅读
webinf下怎么引入js 2023-08-31 21:54:13
堡垒机怎么打开web 2023-08-31 21:54:11

web期末题

发布时间: 2023-03-24 00:39:50

‘壹’ 计算机二级《Web程序设计》试题及答案

计算机二级《Web程序设计》试题及答案

1在下列的HTML中,正确产生超链接的标记是()。

A.新浪网B.新浪网C.http:///WWW.sina.Corn.cnD.新浪网

参考答案:B

2下面协议中用于在Web浏览器和服务器之间传输Web文档的是()。

A.NFSB.FTPC.HTTPD.DNS

参考答案:C

3在HTTP响应的MIME消息体中,可以同时包含如下类型的数据()。

i .文本数据 ii.图片数据 iii.视频数据 iv.音频数据

A.仅iB.i和iiC.i、ii和iiiD.全都可以

参考答案:D

4HTTP协议是一种()协议。

A.文件传输协议B.邮件协议C.远程登录协议D.超文本传输协议

参考答案:D

5在HTML文档中使用的注释符号是()。

A.//…B./*……*/C.D.以上说法均错误

参考答案:C

6HTTP请求消息中可以不包含()。

i.开始行 ii.消息头iii.消息体实体数据

A.仅iB.i和iiC.ii和 iiiD.仅iii

参考答案:C

7下列技术中控制文档结构的.是()。

A.DOMB.CSSC.JavaScriptD.XMLHttpRequest

参考答案:A

8下列语言编写的代码中,在浏览器端执行的是()。

A.wt h页面中的c#代码

B.Web页面中的Java代码

C.Web页面中的PHP代码

D.Web页面中的JavaScript代码

参考答案:D

9在HTTP/1.1协议中,持久连接选项是()的。

A.默认关闭B.默认打开C.不可协商D.以上都不对

参考答案:B

10以下不是HTTP协议的特点的是()。

A.持久连接B.请求/响应模式C.只能传输文本数据D.简单、高效

参考答案:C

11下列语句中,正确打开名为“window2"的新窗口的JavaScript语句是()。

A.open.new("http://www.sina.COB.cn","window2")

B.new.window("http://www.sina.con.cn","window2")

C.new("http://www.sina.com.cn","window2")

D.window.open("http://www.sina.tom.cn","window2")

参考答案:D

12以下选项中,全部都是表格标记的是()。

参考答案:B

13下列关于ASP.NET的描述中,错误的是()。

A.ASP.NET依赖于微软的.NET框架

B.ASP.NET采用纯面向对象语言比采用脚本语言的执行效率高

C.ASP.NET采用代码分离技术有利于开发协作

D.ASP.NET和ASP都采用了JavaScript编程语言

参考答案:D

14下列函数中能够把6.25四舍五入为最接近的整数的是()。

A.round(6.25)B.rnd(6.25)C.Math.rnd(6.25)D.Math.round(6.25)

参考答案:D

15目前在Internet上应用最为广泛的服务是()。

A.FTP服务B.Web服务C.Telnet服务D.Gopher服务

参考答案:B

16下列正确地在CSS文件中插入注释的语句是()。

A.//this is a commentB.//this is a comment//C./*this is a comment*/D.'this is a comment

参考答案:C

17下列不属于动态网页格式的是()。

A.ASPB.JSPC.ASPXD.VBS

参考答案:D

18以下语句中,正确制作电子邮件链接的是()。

参考答案:C

19下列哪个样式能够显示这样一个边框:上边框10像素、下边框5像素、左边框20像素、右边框l像素?()

A.border—width:10px 5px 20px 1px

B.border—width:10px 20px 5px 1px

C.border—width:5px 20px l0px 1px

D.border—width:10px 1px 5px 20px

参考答案:D

20CSS 主要用下列哪个HTML标记构建页面布局?()

参考答案:B

21在下列选项中,正确地产生文本区(textarea)的标记是()。

参考答案:A

22在访问的URL http://Cms.bit.e.Cn:8080/login.aspx中,http表示()。

A.端口号B.文件名C.访问协议D.主机名

参考答案:C

23下列标记中不属于行内元素的是()。

参考答案:D

24在HTML文档中用于表示页面标题的标记对是()。

参考答案:D

25下列符合CSS语法的正确语句是()。

A.body:color=blackB.{body;color:black}C.body{color:black;}D.{body:color=black}

参考答案:C


更多计算机二级试题推荐:

1. 2016年9月计算机二级web考试试题及答案

2. 计算机二级《Web程序设计》试题及答案

3. 计算机二级考试WEB试题及答案

4. 2016计算机二级考试《Web程序设计》练习题模拟

5. 2016计算机二级考试高级Office试题及答案

6. 2016最新计算机二级考试试题及答案

7. 2016年计算机二级office高级应用试题【题库】

8. 2016计算机二级等级考试题型分析

9. 2016下半年计算机二级ps试题及答案

10. 计算机二级Office考试试题及答案

;

‘贰’ web程序设计 期末的大作业 具体要求在下面

可惜现在asp用的 越来越少,学校还没有跟上企业要求,现在PHP用的很多,asp无能为力啊!

‘叁’ Java web期末大作业

语法不一样吧。php和java都比较流行。java比较老牌咯 我是一名JAVA工程师,就JAVA而言,他孝亩的优势在于适用平台广,也就是说 所有的操作系统都支哪慎指持JAVA!PHP主要用于开发网页,最近PHP比较火爆,JAVA可李配以编程网...

‘肆’ web前端笔试题(HTML/CSS篇)

web前端笔试题集锦(HTML/CSS篇)

导读:网页不再只是承载单一的文字和图片,各种富媒体让网页的内容更加生动,网页上软件化的交互形式为用户提供了更好的使用体验,这些都是基于前端技术实现的。以下是由我J.L为您整理推荐的前端开发笔试题目,欢迎参考阅读。

一、HTML/CSS

1,让一个input的背景颜色变成红色

2,div的高宽等于浏览器可见区域的高宽,浏览器滚动,div始终覆盖浏览器的整个可见区域

思路:

(1)先放置一个div1,浮动:position:absolute;top:0px;left:0px;

(2)再放置一个div2,浮动:position:absolute;top:0px;left:0px;width:100%;height:100%;

(3)在div2中放置一个div3,令其高度超过浏览器高度,使div2产生滚动条

(4)对html,body进行样式设置:width:100%;height:100%;overflow:hidden->不让浏览器产生滚动条,避免页面出现两个滚动条

(5)编写JavaScript,另div2的高度等于页面可见高度,宽度等于页面可见宽度,注意,在计算完可见高度height和可见宽度width后,要对这两个值做处理,可见宽度-div2的滚动条的宽度,滚动条的宽度我这里假设是20px

这样题目基本就完成了,不过浏览器的兼容性还不是很好。

3,IE、FF下面CSS的解释区别

(1) 让页面元素居中

ff{margin-left:0px;margin-right:0px;width:***}

ie上面的设置+text-align:center

(2) ff:不支持滤镜

ie:支持滤镜

(3) ff:支持!important

ie支持*,ie6支持_

(4) min-width,min-height

FF支持,IE不支持,IE可以用css expression来替代

(5) Css Expression

FF不支持,IE支持

(6) cursor:hand

IE下可以显示手指状,FF下不行

(7) UL的默认padding和margin

IE下ul默认有margin,FF下ul默认有padding

(8) FORM的默认margin

IE下FORM有默认margin,FF下margin默认为0

4,一个定宽元素在浏览器(IE6,IE7,Firefox)中横向居中对齐的布局,请写出主要的.HTML标签及CSS

思路:

IE6/7:text-align:center

Firefox:margin:0 auto(margin-top和margin-bottom也可以为其他数字,关键是margin-left,margin-right为auto)

5,CSS中margin和padding的区别

margin是元素的外边框,是元素边框和相邻元素的距离

Padding是元素的内边框,是元素边框和子元素的距离

6,最后一个问题是,如何制作一个combo选项,就是可以输入可以下拉菜单选择。

思路:

(1)布局select和input,让input覆盖select,除了select的下拉图标,以方便select选择

(2)编写JS,为select添加onchange事件,onchange时将input的value置成select选中的指

7,

中alt和tittle的区别

alt:图片显示不出来了就提示alt

title:鼠标划过图片显示的提示

8,用css、html编写一个两列布局的网页,要求右侧宽度为200px,左侧自动扩展。

在这里我使用了两种方式:

(1)使用position

HTML:

left

right

(2) 使用float

HTML:

固定宽度

自适应

二者的CSS公用,如下:

html,body{width:100%;height:100%;margin:0px;padding:0px;}

.container {width:100%;height:400px;position:relative;}

.fl1 {float:left;}

.left {width:100%;height:400px;background:#AFFFD0;position:absolute;}

.right {width:200px;height:400px;background:#F9AFFF;position:absolute;right:0px;top:0px;}

.clear {clear:both;overflow:hidden;height:0px;}

.container2 {width:100%;height:400px;margin-top:100px;}

.left2 {background:#afffd0;height:400px;width:200px;margin-right:-3px;}

.right2 {height:400px;background:#f9afff;}

9,解释document.getElementByIdx_x_x_x("ElementID").style.fontSize="1.5em"

em是相对长度单位,相当于当前对象内文本的字体尺寸,如果当前行内文本的字体尺寸未被指定,则相对于浏览器的默认字体尺寸。

该语句将id为ElementID的元素的字体设置为当前对象内文本的字体尺寸的1.5倍

10,Doctype? 严格模式与混杂模式-如何触发这两种模式,区分它们有何意义? 行内元素有哪些?块级元素有哪些?CSS的盒模型?

DOCTYPE是文档类型,用来说明使用的HTML或者XHTML是什么版本,其中的DTD叫文档类型定义,里面包含了文档规则,浏览器根据定义的DTD来解析页面的标识并展现出来

DOCTYPE有两种用途:一个可以进行页面的有效性验证,另一个可以区分浏览器使用严格模式还是混杂模式来解析CSS。

严格模式和混杂模式是浏览器解析CSS的两种模式,目前使用的大部分浏览器对这两种模式都支持,但是IE5只支持混杂模式。

可那个过DOCTYPE声明来判断哪种模式被触发

(1) 没有DOCTYPE声明的网页采用混杂模式解析

(2) 对使用DOCTYPE声明的网页视不同浏览器进行解析

(3) 对于浏览器不能识别的DOCTYPE声明,浏览器采用严格模式解析

(4) 在ie6下,如果在DOCTYPE声明之前有一个xml声明比如

,采用混杂模式解析,在IE7,IE8中这条规则不生效。

(5) 在ie下,如果DOCTYPE之前有任何字符,都会导致它进入混杂模式,如:

区分这两种模式可以理解浏览器解析CSS的区别,主要是在盒模式的解释上。

常见的块级元素有:DIV,FORM,TABLE,P,PRE,H1~H6,DL,OL,UL等

常见的内联元素:SPAN,A,STRONG,EM,LABEL,INPUT,SELECT,TEXTAREA,IMG,BR等

CSS盒模型用于描述为一个HTML元素形成的矩形盒子,盒模型还涉及元素的外边距,内边距,边框和内容,具体来讲最里面的内容是元素内容,直接包围元素内容的是内边距,包围内边距的是边框,包围边框的是外边距。内边距,外边距,边框默认为0。

11,CSS引入的方式有哪些? link和@import的区别?

引入css的方式有下面四种

(1) 使用style属性

(2) 使用style标签

(3) 使用link标签

(4) 使用@import引入

Link和@import区别:

(1) link属于XHTML标签,@import是CSS提供的一种方式。Link除了加载CSS外,还可以做很多事情,如定义RSS,rel连接属性等;@import只能加载CSS

(2)加载顺序不同,当页面被加载的时候,link加载的CSS随之加载,而@import引用的CSS会等到页面完全下载完之后才会加载

(3)兼容性差别,由于@import是CSS2.1提出的,所以老的浏览器不支持,IE系列的浏览器IE5以上才能识别,而link没有这个问题

使用DOM控制样式的差别,使用JavaScript控制DOM去改变样式的时候,只能操作link,@import不可以被DOM操作。

12,如何居中一个浮动元素?

一个浮动元素里面包含的元素可以水平居中,原理如下:

让浮动元素left相对于父元素container右移50%,浮动元素left的子元素left-child相对于left左移50%就可以实现left-child相对于container水平居中

垂直居中类似,不过操作的不是left而是top

13,HTML5和CSS3的了解情况

有所了解

HTML5和CSS3分别是新推出的HTML和CSS规范,前世是XHTML2和CSS2,目前还在草案阶段,不过得到了Apple,Opera,Mozilla,Google,Microsoft不同程度的支持,也开发出了不少基于他们的应用。

HTML5相对于原来的HTML规范有一些变化:

(1)DOCTYPE更简洁

(2)新增了一些语义化标签,如article,header,footer,dialog等

(3)新增了一些高级标签,如,,

CSS3相对于CSS2也新增了不少功能

(1) 选择器更加丰富

(2) 支持为元素设置阴影

(3) 无需图片能提供圆角

14,你怎么来实现下面这个设计图

(1) 切图

(2) 布局,采用两栏布局,分别左浮动

(3) 编写css代码

15,css 中id和class如何定义,哪个定义的优先级别高?

id:#***,***为HTML中定义的id属性

class:.***,***为HTML中定义的class属性

id比class的优先级高

16,用html实现如下表格(不如嵌套实用表格)

三行三列,其中第一行第一列和第二行第一列合并; 第二行第二列和第二行第三列合并(现场画表)

运行结果如下:

17,web标准网站有那些优点

(1) Web标准网站结构和布局分离,使网站的访问和维护更加容易

(2) Web标准网站结构,布局以及页面访问都标准化,使网站能在更多的web标准设备中访问,兼容性更好

(3) Web标准网站语义化更好,语义化的XHTML不仅对用户友好,对搜索引擎也友好。

;

‘伍’ Web应用开发技术题目 拜托了 做的好追加100分 谢谢

1-8 badabdab
9 ad 10 abcd 11 abcd 12 ac 13 c 14acd 15 a
16 2
17 1
18 1
19 1
20 2

我自己做的,不敢保证全对,如果你有答案的话发一份给我,谢谢...

‘陆’ 河南大学java web考试卷,是题库也可以!谢谢啦😘

《JAVA WEB开发应用》 第 1 页 共 6 页

期末考试卷(卷)
课程名称: JAVA WEB 考试方式:开卷( )闭卷(√)

题号 一 二 三 四 五 六 总分
统分人签名
得分

考生注意事项:1、本试卷共 4 页,请查看试卷中是否有缺页。 2、考试结束后,考生不得将试卷、答题纸带出考场。
一、 选择题(每小题1分,共20分)
得分 评卷人

1. 表单中的数据要提交到的处理文件由表单的( )属性指定。
A.method B. name C. action D. 以上都不对 2. 要运行JSP程序,下列说法不正确的是( )
A. 服务器端需要安装Servlet容器,如Tomcat等。 B. 客户端需要安装Servlet容器,如Tomcat等。 C. 服务器端需要安装JDK。
D. 客户端需要安装浏览器,如IE等。
3. 当发布Web应用程序时,通常把Web应用程序的目录及文件放到Tomcat
的( )目录下。
A.work B. temp C. webapps D. conf 4. 下面有关HTTP协议的说法不正确的是( )
A. HTTP协议是Web应用所使用的主要协议
B. HTTP协议是一种超文本传输协议(Hypertext Transfer Protocol),
是基于请求/响应模式的
C. HTTP是无状态协议
D. HTTP的请求和响应消息如果没有发送并传递成功的话,HTTP可以保存
已传递的信息
5. 下面有关Servlet的描述错误的是( )。
A. 一个Servlet就是Java中的一个类
B. Servlet是位于Web 服务器内部的服务器端的Java应用程序 C. Servlet可以由客户端的浏览器解释执行
D. 加载Servlet的Web服务器必须包含支持Servlet的Java虚拟机 6. 下面不属于JSP指令的是:( )
A. include B. import C. page D. taglib 7. ( )动作用于转向另一个页面。
A. next B. forward C. include D. param 8. 在项目中已经建立了一个JavaBean,该类为:bean.Student,该bean具
有name属性,则下面标签用法正确的是:( )
A.<jsp:useBean id="student" class="Student" scope="session">
</jsp:useBean>
B.<jsp:useBean id="student" class="Student" scope="session">
</jsp:useBean>
C.<jsp:useBean id="student" class="bean.Student" scope="session">
</jsp:useBean>
D.<jsp:getProperty name="name" property="student"/>
9. 下列选项中,( )可以准确地获取请求页面的一个文本框的输入(文本框的名称为name)。
A. request.getParameter(name) B. request.getParameter(”name”) C. request.getParameterValues(name)
《JAVA WEB开发应用》 第 2 页 共 6 页
D. request.getParameterValues(“name”)
10. 使用response对象进行重定向时,使用的方法是( )。
A. getAttribute B. setContentType C. sendRedirect D. setAttribute
11. session对象中用于设定指定名字的属性值,并且把它存储在session对
象中的方法是( )。
A. setAttribute B. getAttributeNames C. getValue D. getAttribute
12. 在application对象中用( )方法可以获得application对象中的所有
变量名。
A. getServerInfo B. nextElements() C. removeAttribute D. getRealPath 13. 有关struts 2的说法不正确的是( )
A. Struts是一个用于简化MVC框架(Framework)开发的Web应用框架 B. 应用Struts 2不需要进行配置 C. Struts 2 含有丰富的标签
D. Struts2采用了WebWork的核心技术 14. Web应用的数据共享方式不包括( )。
A.基于请求的共享 B.基于会话的共享 C.基于页面的共享 D.基于应用的共享
15. 要在页面上输出2+3=${2+3},则对应的程序代码应为( )。
A. 2+3=\${2+3} B. 2+3=${2+3} C. 2+3=/${2+3} D. 以上都不对
16. 下面有关EL中“.“和“[ ]“两种存取运算符的说法不正确的是( )
A. 两者在某些情况下是等效的
B. “[ ]“运算符主要用来访问数组、列表或其他集合 C. 如果要动态取值时,两者都可以实现
D. 当要存取的属性名称中包含一些特殊字符,如.或?等并非字母或数字
的符号,就一定要使用“[ ]“
17. 要使用JSTL的核心标签库,需要在JSP源文件的首部加入如下声明语句
( )
A. <%@ taglib prefix="c"
uri="http://java.sun.com/jsp/jstl/core" %> B. <%@ taglib prefix=”x”
uri=”http://java.sun.com/jsp/jstl/xml”%> C. <%@ taglib prefix=”fmt”
uri=”http://java.sun.com/jsp/jstl/fmt”%> D. <%@ taglib prefix=”sql
uri=”http://java.sun.com/jsp/jstl/sql”%>
18. 以下( )标签用于实现循环功能,类似与Java语句中的for循环。
A. <c:set> B. <c:forEach> B. <c:Tokens> D. <c:import> 19. 以下URL中语法不正确的是( )
A.http://www.bta.net.cn:80/software/home.html B.telnet://bdysseu.bbb.com:70 C.ftp://ftp.btbu.e.cn D.www0.btbu.e.cn
20. page指令用于定义JSP文件中的全局属性,下列关于该指令用法的描述不
正确的是:( )
A. <%@ page %>作用于整个JSP页面。
B. 可以在一个页面中使用多个<%@ page %>指令
《JAVA WEB开发应用》 第 3 页 共 6 页
C. 为增强程序的可读性,建议将<%@ page %>指令放在JSP文件的开头,但不是必须的。
D. <%@ page %>指令中的属性只能出现一次。
二、 填空题(每空2分,共20分)
得分 评卷人

1.在编写Servlet时,需要继承 类,在Servlet中声明doGet()和doPost()需要 和 类型的两个参数。
2.jsp主要内置对象有: 、exception、 pageContext、 request 、 、_____ __、out、config、page。 3.使用useBean动作标记的时候scope属性有4种选项,作用范围由小到大是_________、_________、_________、_________,其中_________是指当关闭浏览器的时候这个javabean失效, ____ _____是指当关闭服务器的时候这个javabean失效。
4.三种常用的动态网页技术是_________、_________、_________,简称3P技术。
5.JSP利用JDBC操作数据库的步骤:(1)加载驱动程序,调用___________将自动加载驱动程序类;(2)建立连接,若连接字符串为:
String url = "jdbc:mysql://localhost/" + dbName +"?user=" +userName +"&password=" +userPwd,其中dbName、userName和userPwd 3个分别代表 、数据库的 和 ,(3)建立StateMent;(4) 、执行sql语句,其中,查询数据库里的表内容是Statement接口使用__ __________方法;(5)关闭数据库。 三、 简答题:(每小题6分,共30 分)
得分 评卷人

1. Tomcat服务器的默认端口是多少?怎样修改tomcat的端口
2.什么是cookie? cookie有什么作用?。

3. 简述JSP中动态include与静态include的区别?
4. 简述表单中POST和GET的区别。
5、MVC中的M、V、C各指的是什么?请述其各自的作用。 四、编程题(每小题15分,共30分)
《JAVA WEB开发应用》 第 4 页 共 6 页
得分 评卷人

1、编写一个简单的JavaBean,通过EL的存取运算符访问其属性。 答案:文件userLogin.java定义了一个用户Bean,包含姓名、密码和电子邮件3个属性,其代码如下:
package bean;
public class userLogin { private String userName; private String (1) private String email; public userLogin() { userName = "李平"; password = "123";
email = "[email protected]";
}
public void setuserName(String userName) { this.userName = userName; }
public String getuserName() { return this.userName; }
public void setpassword(String password) { this.password = password; }

public String getpassword() {
return this.password;
}
public void setemail(String email) { this.email = email;
}
public String getemail() { return this.email; }
}
文件accessBean.jsp使用EL的存取运算符获取JavaBean的属性,其代码如下:
<%@ page contentType="text/html; charset=gb2312"%> (2)
<jsp:useBean id="user" class="bean.userLogin" scope="session"> </jsp:useBean> <html> <head>
<title>使用存取运算符访问JavaBean的属性</title>
</head> <body> <!--通过EL存取运算符访问JavaBean的属性--> 用户名:(3) <br>
密码:(4)

<br>
电子邮箱:(5)
《JAVA WEB开发应用》 第 5 页 共 6 页

‘柒’ Web前端5道面试题

1.请说明ECMAScript,JavaScript,Jscript之间的关系?

ECMAScript提供脚本语言必须遵守的规则、

细节和准则,是脚本语言的规范。

比如:ES5,ES6就是具体的一js版本。

JavaScript是ECMAScript的一个分支版本,

JavaScript实现了多数ECMA-262中

描述的ECMAScript规范,但存在少数差异。

JScript是微软公司对ECMA-262语言规范的

一种实现,除了少数例外(这是为了保持向后兼容),

微软公司宣称JScript完全实现了ECMA标准.

关系:

JavaScript和JScript都是ECMAScript的版本分支,

二者在语法上没有多大的区别;

只不过一个是NetScape公司的,一个是微软的;

IE系列默认是JScript,其它的则反之用JavaScript。


2.页面加载过程中可能触发哪些事件?它们的顺序是?

页面加载时,大致可以分为以下几个步骤:1)开始解析HTML文档结构2)加载外部样式表及JavaScript脚本3)解析执行JavaScript脚本4)DOM树渲染完成5)加载未完成的外部资源6)页面加载成功

执行顺序:1)documentreadystatechange事件2)documentDOMContentLoaded事件3)windowload事件


3.函数中在声明变量a前使用a会产生错误吗?为什么?

不会,JS中能够进行变量作用域提升,

把所有变量、函数的声明提升到当前

作用域的最前面,但不进行赋值操作;

所以可能造成获取的值是undefined。


4.什么是hash,以及hashchange事件?

先了解下什么是hash:hash即URL中"#"字符后面的部分。

a)使用浏览器访问网页时,

如果网页URL中带有hash,

页面就会定位到id(或name)

与hash值一样的元素的位置;

b)hash还有另一个特点,

它的改变不会导致页面重新加载如橡尺;

c)hash值浏如清览器是不会随请求发送到服务器端的;

d)通过window.location.hash属性获取和设置hash值。

window.location.hash值的变化会直渣高接

反应到浏览器地址栏(#后面的部分会发生变化),同时,浏览器地址栏hash值的变化也会触发

window.location.hash值的变化,

从而触发onhashchange事件。

再来了解下什么是hashchange事件:

a)当URL的片段标识符更改时,

将触发hashchange事件(跟在#符号后面的URL部分,包括#符号)b)

hashchange事件触发时,

事件对象会有hash改变前的URL(oldURL)和hash改变后的URL(newURL)两个属性。


5.什么是CDN,CDN对于网站有什么意义,它有什么样的缺点?

CDN又称为内容分发网络;本意在于

尽可能避开互联网上有可能影响数据

传输速度和稳定性的瓶颈和环节,

使内容传输的更快、更稳定。

主要目的:

解决因分布、带宽、服务器性能带来的访问延迟问题,

适用于站点加速、点播、直播等场景。

使用户可就近取得所需内容,解决Internet网络拥挤的状况,

提高用户访问网站的响应速度和成功率。

缺点:

a)实施复杂,投资大;

b)目前大部分的CDN还只是对静态内容加速,

对动态加速效果不好;

而双线对动态加速的效果跟静态是一样的。

‘捌’ Web前端面试的常见面试题汇总

今天小编要跟大家分享的文章是关于参加Web前端面试的常见面试题汇总。准备参加Web前端面试的小伙伴们来和小编一起看一看吧,希望则宽本篇文章能够对大家有所帮助。

1.渐进增强与优雅降级


渐进增强
并不是一种技术,而是一种设计思想。各个浏览器的渲染能力各不相同,要做一个每个人都能看到的网页、感受到的体验都一致的网站几乎不可能。但还是得网站的可访问性,保证用户在任何环境下都能正常访问网页得核心内容或能使用基本功能(避免网页打不开、排版错误等),并为他们提供当前条件下最好的体验,这就是渐进增强得核心思想。


优雅降级也是一种设计思想,为了保证在高版本浏览器中提供最好的体验,碰到低版本浏览器再降级进行兼容处理,使其能正常浏览。


这两种思想的区别在于:


1.渐进增强是向上兼容,优雅降级是向下兼容;


2.渐进增强是从简单到复杂,优雅降级是从复杂到简单;


3.渐进增强关注的是内容(保证核心内容),优雅降级关注的是浏览体验(为了兼容低版本浏览器)


2.DOCTYPE














作用


DTD(DocumentTypeDefinition,文档类型定义)是一系列的语法规则,用来定义XML或(X)HTML
的文档类型。浏览器会使用它来判断文档类型,决定何种协议来解析,以及切换浏览模式。


DOCTYPE是用来声明文档类型和DTD
规范的,一个主要的用途便是文件的合法性验证。如果文档代码不合法,那么浏览器解析时便会出现一些差错。


HTML5的文档类型声明:





HTML4.01Strict(HTML4.01严格模式)的DTD包含所有HTML
元素和属性,但不包括展示性的和弃用的元素(如font),它的文档类型声明:


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


标准模式与怪异模式


怪异模式(Quirks
Mode)用于模拟旧浏览器的行为。早期的网站并不会遵循完整的规好卜范,随着浏览器支持越来越多的规范,在那些旧的浏览器中开发的页面在显示时会友盯穗被破坏。为了向后兼容,浏览器发明了怪异模式,一行错误或无效的
DOCTYPE都会触发怪异模式。


浏览器使用文件开头的DOCTYPE来决定用怪异模式处理或标准模式处理。DOCTYPE
可以确保不同浏览器以相同的方式解析文档,以及执行相同的渲染模式。


怪异模式与标准模式的主要区别:


1.怪异模式的宽度和高度会包含padding和border。标准模式不包含,标准模式下可以通过设置box-sizing:
border-box将标准盒模型转化成怪异模式下的盒模型。


2.怪异模式下,当内容超出容器高度时,会将容器拉伸,而不是溢出。


3.怪异模式下,在表格中的字体样式(如font-size)不会继承。


4.怪异模式下颜色值必须使用十六进制标记法。


3.语义化


HTML5
中的语义化就是让元素、属性或属性值有含义,更准确地标记特定类型的内容。对元素语义化的目的是为了让元素的语义和呈现分离,元素只负责文档内容的结构与含义,而CSS
样式控制内容的呈现,像元素,没有语义但却能将字体变粗,这类元素违背了语义化的目的,将会被废弃。


优点


·使得HTML文档结构清晰、布局合理、主体突出、可读性更强。


·有利于SEO,搜索引擎根据标签来确定上下文和各个关键字的权重。


·方便其他设备解析,如盲人阅读器根据语义渲染网页。


·有利于开发和维护,语义化更具可读性,代码更好维护,与CSS3关系更和谐。


语义化标签


·
定义文档的页眉区域,应作为介绍内容或者导航链接栏的容器;


·footer内容的页脚,通常包含该章节作者、版权数据或者与文档相关的链接等信息;


·article
文档、页面、应用或网站中的独立结构,是可独立分配的、可复用的结构,如在发布中,它可能是论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组件,或者其他独立的内容项目;


·nav描述一个含有多个超链接的区域,该区域包含跳转到其他页面或页面内部其他部分的链接列表;


·section表示文档中的一个区域(或节),比如,内容中的一个专题组;


·main定义文档的主要内容,该内容在文档中应当是独一无二的,不包含任何在文档中重复的内容,比如侧边栏,导航栏链接,版权信息,网站
logo,搜索框(搜索框作为文档的主要内容);


·aside
表示一个和其余页面内容几乎无关的部分,被认为是独立于该内容的一部分且可以被单独的拆分出来而不会影响整体。通常表现为侧边栏或嵌入内容。


4.超链接伪类


:link、:visited、:active和:hover的声明顺序是怎样的?


:link表示未访问的链接状态;


:visited表示已访问状态;:active表示激活状态(鼠标按下);:hover表示悬停状态。


推荐顺序是LVHA,即:link:visited:hover:active。理由如下:


·当鼠标悬停在未访问的链接上时,:link和:hover都会命中,如果:hover在:link
之前声明,那么(:hover)就会被覆盖;


·当鼠标悬停在已访问的连接上时,:visited和:hover都会命中,如果:hover在:visited
之前声明,那么(:hover)就会被覆盖;


·当鼠标单击链接时,:active和:hover都会命中,我们大多是想让:hover只在悬停时展示样式,按下鼠标时使用:active
样式,因此:active在:hover之后声明;


·综上,:hover应在:link和:visited之后,在:active之前,因此active在最后。而:link和
:visited两者的顺序无所谓,互不影响。


5.CSS常见的长度单位


CSS中除了px长度单位之外,还有下面几个长度单位:


·pc六分之一英寸,1pc=12pt=1/6*1in=16px;


·pt一磅,72分之一英寸。1pt=1/12_1pc=1/72_1in≈1.33px;


·in一英寸,1in=2.54cm=96px;


·ex在含有“X”字母的字体中,它是该字体的小写字母的高度。对于很多字体来说,1ex≈0.5em;


·em1em等于父级元素的字体大小,2em就是父级元素字体大小的二倍;


·rem当用在根元素()的font-size上面时,它代表了它的初始值;


·ch代表元素所用字体font中“0”这一字形的宽度;


·vh1vh相当于视口高度的1%,100vh就是视口的高度;


·vw1vw相当于视口宽度的1%,100vw就是视口的宽度;


·vmax视口高度vw和宽度vh两者中的最小值


·vmin视口高度vw和宽度vh两种中的最大值;


·%相对于父级元素的大小来确定;


参考:CSS[1]


CSSpercentage[2]


6.事件对象


冒泡与捕获


事件冒泡与捕获是事件处理的两种机制,主要描述当在一个元素上有两个相同类型的事件处理器被激活会发生什么。


在点击子元素时,浏览器运行了两种不同的阶段:捕获阶段和冒泡阶段。捕获阶段的行为:


·浏览器检查元素的最外层祖先,是否在捕获阶段中注册了一个onclick事件处理程序,如果是,则运行它;


·
然后,它移动到中单击元素的下一个祖先元素,并执行相同的操作,然后是单击元素再下一个祖先元素,依此类推,直到到达实际点击的元素;


而冒泡与捕获恰恰相反:


·浏览器检查实际点击的元素是否在冒泡阶段中注册了一个onclick事件处理程序,如果是,则运行它;


·然后它移动到下一个直接的祖先元素,并做同样的事情,然后是下一个,等等,直到它到达元素;


而现代浏览器在默认情况下,所有事件处理程序都在冒泡阶段进行注册。因此上面代码在点击子元素时会先执行子元素绑定的事件,然后向上冒泡,触发父元素绑定的事件。


addEventListener函数的第三个参数是个布尔值。含义:


·当布尔值是false时(这也是默认值),表示向上冒泡触发事件;


·当布尔值是true时,表示向下捕获触发事件;


不能冒泡的事件


有些事件是不会冒泡的。比如:


·blur元素失去焦点时触发,focusout事件也是失去焦点时触发,但可以冒泡;


·focus元素获取焦点时触发;


·mouseenter鼠标移动到元素上时会触发该事件,与之对应的是mouseover事件,但会冒泡;


·mouseleave鼠标离开元素时触发,与之对应的是mouseout,但会冒泡;


事件冒泡可以让我们利用事件委托,尤其是处理大量子元素时,如果给每个子元素都绑定事件,这是不优雅的,可以将事件绑定到父元素上,并让子节点上发生的事件冒泡到父节点上,利用
e.target属性可以获取到当前触发事件的子元素。


事件对象中的方法


·stopPropagation()阻止事件冒泡,当设置后,点击该元素时父元素绑定的事件就不会再触发;


·preventDefault()阻止默认事件的发生;


·stopImmediatePropagation()它用来阻止监听同一事件的其他事件监听器被调用以及阻止事件冒泡,比如给同一个div
元素绑定多个click事件(使用addEventListener方法可以注册多个),当在第二个事件函数中调用
stopImmediatePropagation方法时,点击div元素时,后面注册的click将不会被触发,而且还会阻止事件冒泡;


比如下面的例子,给p绑定多个click事件,在第二个事件函数中调用stopImmediatePropagation,第三个click
事件就不会触发,因为也阻止了冒泡,因此父元素的click事件也不会触发。





paragraph




‘玖’ web期末大作业去哪找比较好

题库中。web指的是Web前端开发软件,该软件期末大作业比较好的地方是题库中。期末指的是学期将结束的一段时间。