全国计算机等级考试二级Web程序设计

xm1107

已于 2024-02-21 09:31:04 修改

阅读量1.2k

点赞数 7

分类专栏：考证文章标签：前端 web

于 2023-08-16 18:05:03 首次发布

本文链接：https://blog.csdn.net/weixin_49346672/article/details/131962065

版权

考证专栏收录该内容

1 篇文章 1 订阅

订阅专栏

全国计算机等级考试二级Web程序设计

考试大纲

考试大纲

基本要求

理解Web基本工作原理，掌握 Web技术的基本概念和基础。
理解超文本传输协议HTTP的基本概念和模型，掌握HTTP的消息格式、常用消息头、请求消息和常用请求方法、响应消息和常用响应状态。
熟练掌握超文本标记语言HTML文档的结构、常用文档元素的含义和基本使用方法。
理解样式表语言CSS的基本概念和作用，掌握CSS的基本语法和基本使用方法。
掌握脚本语言JavaScript的基本概念和语法，掌握JavaScript对常用HTML文档元素的操作方法。
了解文档对象模型DOM的基本概念和作用。了解主要动态网页技术的基本概念。

考试内容

一、Web技术基础

1. Internet 与Web 技术的基本概念。

Internet( 因特网 )，全球性的计算互联网络“信息共享“。

因特网(Internet)是一组全球信息资源的总汇。有一种粗略的说法，认为INTERNET是由于许多小的网络(子网)互联而成的一个逻辑网，每个子网中连接着若干台计算机(主机)Internet以相互交流信息资源为目的，基于一些共同的协议，并通过许多路由器和公共互联网而成它是一个信息资源和资源共享的集合。

web的本意是蜘蛛网和网的意思，在网页设计中我们称为网页的意思。现广泛译作网络、互联网等技术领域。表现为三种形式，即超文本(hypertext )、超媒体(超文本，图片，视频)(hypermedia )、**超文本传输协议(HTTP)**等，简单的讲就是把各种类型的信息和服务无缝连接，提供生动的图形用户界面。

WEB技术指的是开发互联网应用的技术总称，一般包括WEB服务端技术和WEB客户端技术。

两者间的关系：
web是Internet上最流行的应用之一，Internet为web提供了网络运行环境web的出现极大地推动了Internet的普及和推广。

补充：
协议用的最多的就是http和https，http和https都是协议，区别在于https比http更安全，https中的s代表多了个加密层，他的传输过程更安全

2. Web技术的主要组成。

1.本地计算机和远程服务器
本地计算机：用户自己浏览站点的本地机器

远程服务器：为客户端(用户)计算机提供各种服务的高性能计算机，主要功能是接受客户浏览器发送的请求，分析请求并给予响应，相应的结果发送给客户端的浏览器。

2.静态页面和动态页面
静态页面：HTML页面文件，所有的代码都在网页中，不需要执行动态程序(访问数据库)来生成客户想要的网页

动态页面：页面的内容是动态交互的，可以根据系统的设置显示不同的页面。因为随着网站的数据量日益庞大，人们对站点的要求越来越高，希望有更快的速度，更加高效的访问查找，所以动态网页技术便应运而生。现实中常用的动态网页开发技术有:ASP，JSP，PHP，.NET等是主角)

3.Web应用程序的工作原理
浏览器的访问过程如下(用户想要访问网页，需要先获取网站首页的站点信息 )：
(1) 浏览器地址栏输入想要访问网站首页的地址
(2) 用户向浏览器发送访问首页的请求
(3) 服务器收取客户端的的访问请求
(4) 服务器处理请求( 若首页动态文档需要经过数据处理再返回，若为静态文档直接返回该文档即可)
(5) 服务器将请求的处理结果在客户端的浏览器显示

4.常用的WEB开发技术
静态web开发技术:
html静态网页开发技术(超文本标记语言)

动态web开发技术:
ASP(微软推出)
ASP.NET
PHP
JSP
…

3. Web浏览器与服务器的基本概念和工作原理。

1.web浏览器的基本概念
浏览器的含义：它是一个软件。浏览器是指运行在用户的机器上用来展现和浏览来自web服务器或者本地文件系统中HTML页面，并让用户和这些页面交互的一种客户机软件。

Pc端常见的浏览器：internet Explorer( 微软 ) ; Firefox(火狐) ; Opera ; chrome ; Safari ; 360浏览器 ; 搜狗浏览器等

手机端常见的浏览器：UC浏览器 ; Safari ; QQ浏览器 ; 百度浏览器 ; 360浏览器;

2.web浏览器的工作原理
浏览器主要通过HTTP协议与web服务器交互并获取网页，这些网页由URL指定，文件格式通常为HTML。

3.web服务器的基本概念
web服务器含义:提供web服务的服务器
常见的web服务器有 : window平台下IIS，Apache，Tomcat等

4.web基本架构
c/s的含义：Client/Server。服务器安装高性能PC、工作站、并采用大型数据库系统。客户机安装专用的客户机端软件、服务器安装专门的服务器软件。

B/S的含义：Browser/Server。客户机仅仅安装一个浏览器。服务器安装1IS或者Apache、或者数据库。目前常用。

三层架构：含义是在客户机端浏览器与数据库中间加入了一个中间层。分类：系统部署三层结构和软件开发三层结构。

5.web技术的发展历史
三个阶段:静态文档、动态网页(交互)、web2.0( 每个人都是主角 )

4. Web 应用开发构架和开发技术。

Web 应用架构可以划分为两大子系统：前端子系统和后台子系统

前端子系统
1.基础技术:Html / CSS / Javascript
2.开发框架:jQuery, Extjs,Flex 等

后台子系统
1.基础技术: Java Servlet ;
2.开发框架 : Struts, Spring, Hibernate, ibatis等 ;
应用服务器: Tomcat /Jetty

5. 测试题讲解

[单选题] 下列关于Internet和Web的说法中，正确的是( B )
A.Web就是Internet的别称¹
B.Web是基于Internet之上的一个应用服务
C.Internet是基于Web之上的一个信息系统
D.Internet与Web没有任何关系²
[单选题] 目前在Internet上应用最为广泛的服务是(B )
A.FTP服务
B.Web服务
C.InTelnet服务
D.Gopher服务
[单选题] FTP协议是一种( A )协议
A.文件传输协议³
B.远程登录协议
C.邮件协议
D.超文本传输协议
[单选题] Internet使用的网络协议是( B )
A.3CP协议
B.TCP/IP协议⁴
C.UDP协议
D.IP协议
[单选题] HTTP协议是一种( D )协议
A.文件传输协议
B.邮件协议
C.远程登录协议
D.超文本传输协议
[单选题] 浏览器中用于负责向用户显示数据的是( C )
A.WWW⁵
B.IP地址
C.HTML
D.DNS
[单选题] 下面协议中用于在Web浏览器和服务器之间传输Web文档的是( C )
A.NFS
B.FTP⁶
C.HTTP
D.DNS
[单选题] Web上的任何信息，包括文档，图像，图片、视频或音频都被视为资源。为便于引用资源，应给它们分配一个唯一的际识来描述该资源存放于何处及如何对它进行存取，当前使用的命名机制称为( A )
A.URL⁷
B.WWW
C.DNS
D.FTP
[单选题] 下面的技术中，属于客户机脚本语言的是( A )
A.ASP⁸
B.PHP
C.Perl
D.VBSCript
[单选题] 在URL中，默认的Web服务器的端口⁹是( A )
A.80
B.8080
C.1024
D.2048
[单选题] 利用 ASP.NET开发的网页，其文件扩展名应命名为( B )
A..htm¹⁰
B..aspx
C..asp
D.无严格限制
[单造题] Web的工作模式是( B )
A.客户机/服务器
B.浏览器/服务器
C.浏览器/浏览器
D.浏览器/客户机
[单选题] 城名系统能够实现( D )
A.域名转换,成主机名
B.主机名转换成域名
C.主机名转换成IP地址
D.域名转换成IP地址¹¹
[单选题] 在访问的URL http : / /Cms .bit .edu .Cn : 8080 / login .aspx中, http表示( C )
A.端口号
B.文件名
C.访同协议
D.主机名
[单选题] 下列关于HTML的说法中，正确的是( C )
A.编制HTML文件时不需要加入任何际记(tag)¹²
B.HTML网页的核心，是一种超文本标记的程序设计语言
C.HTML是网页的核心，是一种超文本标记的页面描述语言
D.通过网页浏览器阅读HTML文件时，Web服务器负责解样插入到HTML文本中的各种标记

二、HTTP协议基础

1. HTTP的基本概念与交互模型。

HTTP是Hyper Text Transfer Protocol( 超文本传输协议)的缩写。它是一个应用层协议，由请求和响应构成，是一个标准的客户端服务器模型。HTTP是一个无状态的协议。

HTTP 协议的特点
1.无连接—限制每次连接只处理一个请求
2.无状态—协议对于事务处理没有记忆能力
3.简单快速—客户向服务器请求服务时，只需传送请求方法和路径
4.灵活—HTTP允许传输任意类型的数据对象。正在传输的类型由Content-Type加以标记

交互模型
在这里插入图片描述

2. HTTP消息格式。

HTTP消息格式分为两种：请求消息（request）、响应消息（respose）

请求消息：包括三个部分，请求方法URL协议、请求头、请求体等

响应消息：状态行、消息报头，响应正文等

3. HTTP请求消息和常用请求方法。

HTTP请求消息
Cookie：浏览器用这个属性向服务器发送Cookie。Cookie是在浏览器中寄存的小型数据体，它可以记载和服务器相关的用户信息，也可以用来实现会话功能。

Referer：表明产生请求的网页URL。如比从网页/icconcept/index.jsp中点击一个链接到网页/icwork/search，在向服务器发送的
GET/icwork/search中的请求中，Referer是http://hostname:8080/icconcept/index.jsp。这个属性可以用来跟踪Web请求是从什么网站来的。

User-Agent：是客户浏览器名称。

Content-Type：用来表名request的内容类型。可以用HttpServletRequest的getContentType()方法取得。

Accept-Charset：指出浏览器可以接受的字符编码。英文浏览器的默认值是ISO-8859-1.

Accept-Encoding：指出浏览器可以接受的编码方式。编码方式不同于文件格式，它是为了压缩文件并加速文件传递速度。浏览器在接收到web响应之后先解码，然后再检查文件格式。

HTTP常用请求方法
1.GET方法
GET方法用于使用给定的URI从给定服务器中检索信息，即从指定资源中请求数据。使用GET方法的请求应该只是检索数据,并且不应对数据产生其他影响。

在GET请求的URL中发送查询字符串(名称/值对)，需要这样写：
/test/demo_form.php?name1=value1&name2=value2

说明：
GET请求是可以缓存的，我们可以从浏览器历史记录中查找到GET请求，还可以把它收藏到书签中，且GET请求有长度限制仅用于请求数据(不修改)。

注:因GET请求的不安全性，在处理敏感数据时，绝不可以使用GET请求。

2.POST方法
POST方法用于将数据发送到服务器以创建或更新资源，它要求服务器确认请求中包含的内容作为由URI区分的Web资源的另一个下属。

POST请求永远不会被缓存，且对数据长度没有限制;我们无法从浏览器历史记录中查找到POST请求。

3.HEAD方法
HEAD方法与GET方法相同，但没有响应体，仅传输状态行和标题部分。这对于恢复相应头部编写的元数据非常有用，而无传输整个内容。

4.PUT方法
PUT方法用于将数据发送到服务器以创建或更新资源，它可以用上传的内容替换目标资源中的所有当前内容。
它会将包含的元素放在所提供的URI下，如果URI指示的是当前资源，则会被改变。如果URI未指示当前资源，则服务器可以使用该URI创建资源。

5.DELETE方法
DELETE方法用来删除指定的资源，它会删除URI给出的目标资源的所有当前内容。

6.CONNECT方法
CONNECT方法用来建立到给定URI标识的服务器的隧道;它通过简单的TCP /IP隧道更改请求连接，通常实使用解码的HTTP代理来进行SSL编码的通信(HTTPS )。

7.OPTIONS方法
OPTIONS方法用来描述了目标资源的通信选项，会返回服务器支持预定义URL的HTTP策略。

8.TRACE方法
TRACE方法用于沿着目标资源的路径执行消息环回测试，它回应收到的请求，以便客户可以看到中间服务器进行了哪些(假设任何)进度或增量。

4. HTTP响应消息和常用响应状态。

HTTP响应消息
1.HTTP/1.1 200 0K // 响应状态行

2.Date: Mon,30Jul 2018 02:50:55 GMT // 服务端发送资源时的服务器时间

3.Expires: Wed,31 Dec 1969 23:59:59 GMT // 比较过时的一种验证缓存的方式，与浏览器(客户端)的时间比较，超过这个时间就不用缓存(不和服务器进行验证)，适合版本比较稳定的网页

4.Cache-Control: no-cache // 现在最多使用的控制缓存的方式，会和服务器进行缓存验证，具体见博文“Cache-Control”

5.etag:"fb8ba2f80b1d324bb997cbe188f28187-ssI-d” // 一般是Nginx静态服务器发来的静态文件签名，浏览在没有“Disabled”

6.cache情况下，接收到etag后，同一个url第二次请求就会自动带上“lf-None-Match”

7.Last-Modified: Fri,27 Jul 2018 11:04:55 GMT // 是服务器发来的当前资源最后一次修改的时间，下次请求时，如果服务器上前资源的修改时间大于这个时间，就返回新的资源内容

8.Content-Type: text/html; charset=utf-8 // 如果返回是流式的数据，我们就必须告诉浏览器这个头，不然浏览器会下载这个页面，同时告诉浏览器是utf8编码，否则可能出现乱码

9.Content-Encoding: gzip // 告诉客户端，应该采用gzip对资源进行解码

10.Connection: keep-alive // 告诉客户端服务器的tcp连接也是一个长连接1

HTTP常用响应状态
HTTP状态码分类
HTTP状态码由三个十进制数字组成，第一个十进制数字定义了状态码的类型，后两个数字没有分类的作用。HTTP状态码共分为5种类型:
1**：信息，服务器收到请求，需要请求者继续执行操作
2**：成功，操作被成功接收并处理
3**：重定向，需要进一步的操作以完成请求
4**：客户端错误，请求包含语法错误或者无法完成请求
5**：服务器错误，服务器在处理请求的过程中发生了错误

HTTP常用响应状态码介绍
200 ok,请求已成功，请求所希望的响应头或数据体将随此响应返回。出现此状态码是表示正常状态。

304 Not Modified,如果客户端发送了一个带条件的GET 请求且该请求已被允许，而文档的内容(自上次访问以来或者根据请求的条件)并则服务器应当返回这个状态码。

403 Forbidden 服务器已经理解请求，但是拒绝执行它。

404 Not Found 请求失败，请求所希望得到的资源未被在服务器上发现。

500 Internal Server Error 服务器遇到了一个未曾预料的状况，导致了它无法完成对请求的处理。一般来说，这个问题都会在服务器端的源
错误时出现。

501 Not lmplemented 服务器不支持当前请求所需要的某个功能。当服务器无法识别请求的方法，并且无法支持其对任何资源的请求。

502 Bad Gateway 作为网关或者代理工作的服务器尝试执行请求时，从上游服务器接收到无效的响应。

503 Service Unavailable 由于临时的服务器维护或者过载，服务器当前无法处理请求。这个状况是临时的，并且将在一段时间以后恢复。

301 Moved Permanently 被请求的资源已永久移动到新位置。

302 Move Temporarily 请求的资源临时从不同的 URI响应请求。由于这样的重定向是临时的，客户端应当继续向原有地址发送以后的请求。

5. HTTP常用消息头。

Request Header:
GET/sample.Jsp HTTP/1.1 //请求行

Host: www.uuid.online/ //请求的目标域名和端口号

Origin: http://localhost:8081/ //请求的来源域名和端口号( 跨域请求时，浏览器会自动带上这个头信息)

Referer: https:/localhost:8081/link?query=xxxxx //请求资源的完整URI

User-Agent: Mozila/5.0 (Windows NT 10.0; Win64; x64) AppleWebkit/537.36 (KHTML, ike Geko) Chrome/7.0.3396.99 Safari/537.36 //浏院器信息

Cookie: BAIDUID=FA89F036:FG=1; BD HOME=1; sugstore=0 //当前域名下的Cookie

Accept: text/htmlimage/apng //代表客户端希望接受的数据类型是html或者是png图片类型

Accept-Encoding: gzip,deflate //代表客户端能支持gzip和deflate格式的压缩

Acept-language:zh-CN,z;g=0.9 //代表客户端可以支持语言-CN或者zh(值得一提的是q(0~1)是优先级权重的意思，不写默认为1，这里zh-CN是1，zh是0.9)

Connection: keep-alive //告诉服务器，客户端需要的tcp连接是一个长连接

Response Header:
HTTP/1.1 2000K // 响应状态行

Date: Mon,30Jul 2018 02:50:55 GMT //服务端发送资源时的服务器时间

Expires: Wed,31 Dec 1969 23:59:59 GMT //比较过时的一种验证缓存的方式，与浏览器(客户端)的时间比较，超过这个时间就不用缓存(不和服务器进行验证)，适合版本比较稳定的网页

Cache-Control: no-cache // 现在最多使用的控制缓存的方式，会和服务器进行缓存验证，具体见博文”Cache-Control”

Last-Modified:Fri,27u 2018 11:04:55 GMT //是服务器发来的前资源最后一次修改的时间，下次请求时，如果服务器上当前资源的修改时间大于这个时间，就返回新的资源内容

Content-Type: text/html; charset=utf-8 //如果返回是流式的数据，我们就必须告诉浏览器这个头，不然浏览器会下载这个页面，同时告诉浏览器是utf8编码，否则可能出现乱码

Content-Encoding: gzip //告诉客户端，应该采用gzip对资源进行解码

Connection: keep-alive //告诉客户端服务器的tcp连接也是一个长连接

5. 测试题讲解

[单选题] HTTP协议是运行于( C )协议之上的应用层协议。
A.FTP¹³
B.SMTP
C.TCP
D.UDP
[单选题] HTTP协议的消息有( B )两种类型。
A.发送消息和接收消息
B.请求消息和响应消息
C.消息头和消息体
D.实体消息和控制消息
[单选题] URI的全称是( D )。
A.标准资源描述符
B.标准资源标识符
C.通用资源描述符
D.通用资源标识符¹⁴
[单选题] HTTP协议采用的默认TCP端口是( A )。
A.80
8.443¹⁵
C.8080
D.1080
[单选题] 在HTTP /11协议中，持久连接选项是( B )的。
A.默认关闭
B.默认打开
C.不可协商
D.以上都不对
[单选题] 以下不是HTTP协议的特点的是( C )。
A.持久连接
B.请求/响应模式
C.只能传输文本数据¹⁶
D.简单、高效
[单选题] 以下不属于HTTP请求方法的是( B )。
A GET
B.SET
C.PUT
D.POST
[单选题] HTTP协议的交互过程不包含( D )步骤。
A.建立连接
B.关闭连接
C.发送请求
D.下载数据
[单选题] HTTP在可靠的( C )协议之上提供一种传输信息的机制。
A.物理层
B.网络层
C.传输层
D.应用层
[单选题] 以下( A )不是标准的HTTP消息头字段。
A.Status
B.Host
C.Accept
D.Referer
[单选题] HTTP协议的GET请求方法可以获取( D )类型的数据。
A.HTML文档
B.图片
C.视频
D.以上都可以
[单选题] HTTP请求消息中可以不包含( C )。
i.开始行 ii.消息头 iii.消息体实体数据
A.仅i
B.i和ii
C.ii和iii
D.仅iii
[单选题] HTTP协议的内容协商消息头包括( B )。
i.内容协商消息头 ii.缓存控制消息头 iii.条件控制消息头 iv.服务器状态消息头
A.i和ii
B.i、ii和iii
C.ii和iii
D.iii和iv
[单选题] 在HTTP响应的MIME消息体中，可以同时包含如下类型的数据( D )。
i.文本数据 ii.图片数据 iii.视频数据 iv.音频数据
A.仅i
B.i和ii
C.i、ii和iii
D.全都可以
[单选题] 在HTTP协议的“请求响应”交互模型中，以下说法中错误的是( D )。
A.客户机在发送请求之前需要主动与服务器建立连接
B.服务器无法主动向客户机发起连接
C.服务器无法主动向客户机发送数据
D.以上都错

三、HTML基础

1. HTML文档的基本结构和语法。

1.HTML的概念
HTML(Hyper Text Markup Language)称为超文本标记语言1990年创立的，是一种标识性的语言。它包括一系列标签通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML标记组成的描述性文本，HTML标记可以说明文字，图形、动画、声音、表格、链接等。

HTML文档也叫WEB页面，通过一系列标签，来显示网页的不同效果，不同部分，浏览器是html的解析器,解析html的文件然后在浏览器窗口中展示解析页面

2.HTML的文档结构
HTML文档结构一般包括标记(Html)、头部( Head )、主体( Body)三部分。

标记：说明该文件是用超文本标记语言来描述的，它是文件的开头，而则表示该文件的结尾它们是超文本标记语言文件的开始标记和结尾标记。

头部:表示头部信息的开始和结尾。头部中包合的标记是页面的标题、序言、说明等内容，它本身不作为内容来显示，但影响网页显示的效果。

主体:网页中显示的实际内容均包含在这2个正文标记符之间。正文标记符又称为实体标记。

3.HTML代码的规范
HTML的注释：

注释的原则是有助于对程序的阅读理解，注释语言必须准确、易懂、简洁。

HTML标记不分大小写，建议小写。如 : ,,

HTML标记属性可有可无，有的标记没有属性。如:,,等

双标签的内容在开始和结束标签之间，单标签没有内容

HTML标签可以互相嵌套，但一定要注意顺序嵌套，外层套内层，一层套一层

4.标记分类
单标记：标记只有一个，不是修饰内容的而是显示某个功能的，如果有图片，设置编码，设置关键字等。

双标记：是修饰内容的标记，有开始有结束标记，中间要写修饰内容

5.行内元素和块级元素
行内元素：标签范围在一行显示，超出换行a、b、span、img、input、strong、select、em、button 、textarea

块级元素：标签范围占据一行，div、ul、li、dl、dt、dd、p、h1-h6等

空元素：即没有内容的HTML元素，例如 : br、meta、hr、link、input、img

2. HTML 常用元素及其基本属性。

在这里插入图片描述

3. HTML 表单与常用控件。

在这里插入图片描述

4. 测试题讲解

[单选题] HTML是一种标记语言，它是由( C )解释执行的。
A.点不需要解释
B.Windows
C.浏览器
D.标记语言处理软件
[单选题] 在HTML文档中用于表示页面标题的标记对是( D )。
A.<head></head>
B.<header></header>
C.<Caption></Caption>¹⁷
D.<title></title>
[单选题] 在HTML文档中用于表示表格的标记对是( C )。
A.<head</head>
B.<header></header>
C.<table></table>
D.<Caption></Caption>
[单选题] 在HTML文档中使用的注释符号是( C )。
A.//
B./.../
C.
D.以上说法均错误
[单选题] 为了标识一个HTML文件，应该使用的HTML标记是( C )。
A.<p></p>
B.<head></head>
C.<html> </html>
D.<form></form>
[单选题] 在下列的HTML中，哪个是最大的标题?( D )。
A.<h6>
B.<head>
C.<heading>
D.<h1>
[单选题] 在HTML中要定义一个书签，应该使用的语句是( B )。
A.<l href="#object_01">text</a>
B.<a name="object_01">text</a>
C.<a target="#object_01">text</a>
D.<a link="#object_01">text</a>
[单选题] 如果要在表单中创建一个普通文本框，下列标记中正确的是( A )。
A. <input type="text">
B.<input type="password">
C.<input type="CheCkbox">
D.<input type="radio">
[单选题] 下列标记中不属于行内元案的是( D )。
A.<em>
B.<font>
C.<input>
D.<div>
[单选题] 以下关于JavaBeans的说法中，错误的是( B )。
A.JavaBeans是基于JAVA语言的
B.JavaBeans是JSP的内置对象之一
C.JavaBeans是一种Java类
D.JavaBeans是一个可重复使用的软件组件
[单选题] 在下列的HTML中，正确产生超链接的标记是( B )。
A.<a url="http://www.sina.COB.an">新浪网</a>
B.<a href="http://www.sina.con.cn">新浪网</a>
C.<a>http:///WWW.sina.Corn.cn</a>
D.<a name="bttp://www.sina.COB.cn">新浪网</a>
[单选题] 以下语句中，正确制作电子邮件链接的是( C )。
A.<a href="xxx@yyy">
B.<mail href="xxx@YYY">
C.<a href="mailto:xxx@YYY">
D.<mail>xxx@yyy</mail>
[单选题] 以下选项中，全部都是表格标记的是( B )。
A.<table> <head><tfoot>
B.<table><tr><td>
C.</tr> </table>
D.<thead><body><tr>
[单选题] 下列语句中，能产生带有数字列表符号的列表标记是( C )。
A.<ul>
B.<dl>
C.<ol>
D.<list>
[单选题] 在下列选项中，正确地产生文本区(textarea)的标记是( A )。
A.<textarea>
B.<input type="textarea">
C.<input type="textbox">
D.<input type="text:" >

四、CSS基础

1. CSS的基本概念和作用。

在这里插入图片描述
CSS中文意思叫层叠样式表(英文全称Cascading Style Sheets)是一种用来表现HTML等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
1.几乎所有的浏览器上都可以使用。

2.以前一些非得通过图片转换实现的功能，现在只要用CSS就可以轻松实现，从而更快地下载页面。

3.使页面的字体变得更漂亮，更容易编排，使页面真正赏心悦目。

4.你可以轻松地控制页面的布局。

5.你可以将许多网页的风格格式同时更新，不用再一页一页地更新了

2. CSS的基本语法和基本使用方法。

1)每个CSS样式由两部分组成，即选择符和声明，声明又分为属性和属性值;
选择符 {属性: 属性值; 属性 : 属性值 ;…}
选择符:表示要定义样式的对象

2)属性必须放在{ }内

3)属性与属性值用冒号连接

4)当一个选择符有多个属性时，用分号隔开

5)当一个属性有多个属性值时，用空格分隔

6)使用空格、换行不影响css样式的显示

CSS的引入方式
CSS的引入方式共有三种:行内样式、内部样式表、外部样式表。
1、行内样式：使用style属性引入CSS样式。
<p style="font-size:14px;color:green;">直接在HTML标签中设置的样式</p>
实际在写页面时不提倡使用，在测试的时候可以使用。

2、内部样式表
在style标签中书写CSS代码。style标签写在head标签中。
<style>.box[ width:100px }</style>

3、外部样式表
CSS代码保存在扩展名为.css的样式表中，HTML文件引用扩展名为.css的样式表
<link rel="stylesheet" href="index.css">
优先级行内样式>内部样式>外部样式(后两者是就近原则)

CSS的常用选择器及其优先级
1.标签选择器(如：body,div,p,ul,li)
2.类选择器(如：class=“head”,class=“head_logo”)
3.ID选择器(如：d=“name”,id=“name_txt”)
4.后代选择器(如 : #head .nav ul li 从父集到子孙集的选择器)
5.群组选择器 div,span,img {color:red} 即具有相同样式的标签分组显示
6.伪类选择器(如 : 就是链接样式,a元素的伪类，4种不同的状态: link、visited、active、hover。)
总结排序：!important>行内样式>ID选择器>类选择器>标签>通配符>继承>浏览器默认属性

3. CSS的层次及其作用优先级。

元素：
1.在正常情况下，层级的大小由顺序决定，后面的元素要比前面的元素的层级要高
2.有定位元素的层级要比没有定位元素层级要高
3.在都有定位的情况下，层级还是取决于书写顺序

Css：
所谓CSS优先级，即是指CSS样式在浏览器中被解析的先后顺序。当同一个元素( 或内容)被多个CSS选择符选中时，就要按照优先权取舍不同的CSS规则。

CSS的单位
在网页设计css中，经常用到字体大小的设置单位，有2种: px、pt。

px就是表示pixel，像索，是屏幕上显示数据的最基本的点。

pt就是point，英文音译为“磅“中文读作“点”，是排版印刷中常用的文字大小单位。

pc绝对长度单位。派卡(Pica )。相当于我国新四号铅字的尺寸1in = 2.54cm = 25.4 mm = 72pt= 6pc
1pc = 12pt(考试真题)
在这里插入图片描述

CSS的常用属性介绍
CSS属性和属性值的定义
属性：属性是指定选择符所具有的属性，它是css的核心，css2共有150多个属性
属性值: 属性值包括法定压性值及常见的数值加单位，如25px，或颜色值等。

一、CSS文本属性
1.文本大小：{font-size:12px;} 单位还可以是em，系统默认的字号大小为16px

2.文本字体：{font-family:字体1,字体2,字体3;}

3.文本颜色：{color:颜色值;} red/#f00/rgb(255,0,0)

4.文字加粗：font-weight:bolder(更粗的)/bold (加粗 )/normal( 常规)/100-900:

5.文本倾斜：font-style:italic/oblique/normal( 取消倾斜，常规显示);

6.水平对齐：{text-align:left左/right右/center居中/justify两端对齐(在部分浏览器中，对于中文不起作用);}

7.文字行高：{line-height:normal/value;}line-height:20px; line-height:2em;(当行高的单位省略时，默认为em)

8.文本修饰：{text-decoration:none/underline/overline/line-through}

9.首行缩进：{text-indent:value;}

10.检索英文字母大小写：{text-transform:none无转换/capitalize首字母大写/uppercase全大写/lowercase全小写;}

11.字间距：{letter-spacing:value;} 控制英文字母或汉字的字距

12.词间距：{word-spacing:value;} 控制英文单词词距。

二、CSS列表属性
1.HTML列表属性
type 属性规定有序列表的项目符号的类型。
在这里插入图片描述
2.CSS列表属性
CSS 列表属性允许你放置、改变列表项标志，或者将图像作为列表项标志

三、边框的属性和属性值
border：边框宽度边框风格边框颜色;
例如：border:5px solid #ff0000;
边框宽度：border-width:
边框颜色：border-color:

边框样式：border-style:solid(实线)/dashed(虚线)dotted(点划线)double(双线)none(去掉边掴);

可单独设置一方向边框:
border-top:边框宽度边框风格边框颜色; 上边框
border-bottom:边框宽度边框风格边框颜色; 底边框
border-left:边框宽度边框风格边框颜色; 左边框
border-right:边框宽度边框风格边框颜色; 右边框

四、CSS背景属性
1.背景颜色{background-color:颜色值;}

2.背景图片的设置 background-image: url(背景图片的路径及全称);

3.背聚图片平铺属{background-repeat:no-repeat 不平铺/repeat 平铺/repeat-x X轴平铺/repeat-y Y轴平铺}

4.背聚图的位置{background-position:left/center/right/数值 top/center/bottom/数值;}

5.背景综合写法{background: 颜色图片平铺位管;}

五、定位
CSS 定位(Positioning) 属性允许你对元素进行定位。
定位的基本思想很简单，它允许你定义元素框相对于其正常位置进行偏移，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。
在这里插入图片描述

4. 测试题讲解

[单选题] 在CSS的长度单位中，1 pc等于多少pt?( C )
A.8
B.10
C.12
D.14

五、JavsScript程序设计基础

1. JavsScript的基本概念和作用。

JavaScript 诞生于1995 年。布兰登艾奇( Brendan Eich )开发

JavaScript( 简称S”)是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发We页面的脚本语言而出名的，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式和声明式(如函数式编程)风格。

脚本语言:VBscript /JavaScript

JavaScript组成：
ECMAScript，描述了该语言的语法和基本对象
文档对象模型(DOM)，描述处理网页内容的方法和接口。
浏览器对象模型(BOM)，描述与浏览器进行交互的方法和接口。

2. JavsScript的基本语法。

一、与HTML结合方式
1.内部JS：定义<script>，标签体内容就是js代码

2.外部JS：定义<script>，通过src属性引入外部的js文件
注意：<script>可以定义在html页面的任何地方。但是定义的位置会影响执行顺序，<script>可以定义多个。

二、注释：
注释就是对代码的解释和说明，其目的是让人们能够更加轻松地了解代码。注释是编写程序时，写程序的人给一个语句、程序段、函数等的解释或提示，能提高程序代码的可读性。
注释只是为了提高可读性，不会被计算机编译
1.单行注释：//注释内容
2.多行注释：/*注释内容*/

三.变量
变量：所谓变量，就是特定时间用于保存特定值的一个名字而已，并且初始化后可以再次改变的量。ECMAScript 的变量是松散类型的，所谓松散类型就是可以用来保存任何类型的数据。

命名规则：数字、字母、下划线、$符号组成，其中数字不能做开头。并且变量名应做到见名知意。

语法:
var 变量名 = 初始化值;

常用的变量声明方式有驼峰命名法
大驼峰:第一个单词的首字母大写 UserName
小驼峰: 第二个单词开始首字母大写 userName /getElementById()

四.数据类型
1.原始数据类型(基本数据类型)：
number：数字
string：字符串。字符串“abc" “a” ‘abc’
boolean：布尔类型true和false
null：一个对象为空的占位符
undefined：未定义。如果一个变量没有给初始化值，则会被默认赋值为undefined

2.引用数据类型：
object: 对象类型

3.检测变量的数据类型：
typeof运算符：获取变量的类型。注:null类型得到的是object

五.系统提供的默认方法
类:类就是一类事物，而对象就是一个事物，一类事物中包含若干的事物(而这其中的具体的事物就是对象)

对象:类是对象的抽象，而对象是类的具体实例。类是抽象的，不占用内存，而对象是具体的，占用存储空间

属性: 描述对象，修饰对象，对象的特点

方法:对象具有的功能

默认方法以及如何访问默认方法
1.window.alert
2.document.write
3.console.log

Javascript 的基本语法运算符
1.赋值运算符
赋值运算符 = 将等式右边的结果赋值给左边
复合赋值操作 +=、-=、*=、/=、%= 带操作的复合赋值运算。(更快捷，更优 )

2.算术(数学)运算符 + - * / %
+：求和，连接字符作用(字符串和变量之间使用+号进行拼接
%：求余数(求模)

3.关系运算符
关系运算符(结果为布尔值)<、>、<=、>=、==(相等 )、===(全等)、!=(不相等) !==(不全等)
==(相等)：值相等，具有隐式转换
===(全等)：值和类型相等，不具有隐式转换

4.逻辑运算符
&& 与、Il 或、!非
逻辑与(&8)操作可以应用于任何类型的操作数，而不仅仅是布尔值。在有一个操作数不是布尔值的情况下，逻辑与操作就不一定返回布尔值。逻辑与操作属于短路操作，即如果第一个操作数能够决定结果，那么就不会再对第二个操作数求值。

逻辑或(||)和逻辑与操作相似，如果有一个操作数不是布尔值，逻辑或也不一定返回布尔值，逻辑或操作符也是短路操作符。也就是说，如果第一个操作数的求值结果为true ，就不会对第二个操作数求值了。

逻非操作符由一个叹号(!)表示，可以应用于 ECMAScript 中的任何值。无论这个值是什么数据类型，这个操作符会返回一个布尔值。逻辑非操作符首先会将它的操作数转换为一个布尔值，然后再对其求反。

5.一元运算符
只能操作一个值的操作符叫做一元操作符，是 ECMAScript 中最简单的操作符。

前置型应该位于要操作的变量之前，先将操作数+1或者减1，再参与运算。

后置型则应该位于要操作的变量之后，先参与运算后自身再+1或者减1。

程序的三大结构
一、顺序结构
顺序结构表示程序中的各操作是按照它们出现的先后顺序执行的。
程序按照从上到下的顺序执行。

二、选择结构
if语句：
在这里插入图片描述
switch语句：
switch语句适合用于多条件、多分支的情况
switch比较的核心是恒等关系
switch里面的default可以省略
case具有穿透力，不能省略break

三目运算符：

三、循环结构
while循环：
在这里插入图片描述

do…while循环：条件在循环体的后面，循环体内的代码至少会执行一次

for循环、退出循环：
在这里插入图片描述

3. JavsScript常用内置对象。

内置对象
在js中万物皆对象

类：一类事物，大范围的概念，不占据内存的，js里而的类也叫做构造函数
对象：类下面的具体的事物，对象来自于类，通过类创建对象。
对象的组成：属性和方法
属性：描述对象的特点或者特征。通过(对象。属性)进行访问或者设置对象的属性值。
方法：描述对象的功能。通过(对象.方法())进行使用。
// window.alert();
// document .write();
// console.log();

本地对象
ECMA把本地对象定义为“独立于宿主环境的 ECMAScript 实现提供的对象”。简单来说，本地对象就是 ECMA定义的类(引用类型 )，它们包括 :
Function Array Object String Boolean Number Date Math

宿主对象
所有非本地对象都是宿主对象，即由 ECMAScript 实现的宿主环境提供的对象。所有 BOM 和 DOM 对象都是宿主对象

内置对象-函数对象
JavaScript 函数是被设计为执行特定任务的代码块
JavaScript 函数会在某代码调用它时被执行
JavaScript 函数属于对象同时也是对象的构造器

1.函数的创建
ECMAScript 中的函数使用 function 关键字来声明，后跟一组参数以及函数体。
声明式：普通函数，一定有函数名称
赋值式：函数表达式

// 声明式创建函数并调用
function fn() {
  console.log("aaa");
}
fn();
// 赋值式创建函数并调用
var fn2 = function () {
  console.log("bbb");
};
fn2();

2.参数的声明
函数的参数包括形参和实参
形参出现在函数定义中，在整个函数体内都可以使用实参则出现在主调函数中，实参将值传递给形参。实参是具体的值。

// 声明式创建函数并调用
function fn() {
  console.log(1 + 2 + 3);
}
fn();
// 赋值式创建函数并调用
var fn2 = function (a, b, c) {
  console.log(a + b + c);
};
fn2(1, 2, 3);

3.函数的返回值
函数都有一条return语句，return语句导致函数停止执行，并返回它的表达式的值给调用者。如果return语句没有相关的表达式，则返回undefined。

4.函数的好处及注意事项
函数是用来帮助我们封装、重用、扩展及调用代码的最方便的工具!（封装: 函数内部可以包含多条语句，重用:函数可以反复使用，扩展:通过函数的参数使函数变得更灵活）

函数的类型是function

声明的函数如果不调用，函数相当于不存在。通过调用找函数

5.作用域
简单的说，作用域就是变量与函数的可访问范围，即作用域控制着变量与函数的可见性和生命周期。

在JavaScript中，作用域有全局作用域和局部作用域两种。

全局作用域(变量)：整个程序都有效，即整个代码中都可以调用。

局部作用域(变量)：只对函数内部有效，即只能在本变量声明的函数内部调用

内置对象-数组对象
数组：一组任意类型或者相同类型的数据。
1.数组的创建方式
第一种：new 运算符(类或者构造函数 )
第二种：字面量表示法
在计算机科学中，字面量是用于表达源代码中一个固定值的表示法。

// 利用类来创建（构造函数）
var arr = new Array(1, 2, 3);
console.log(arr);
// 利用字面量创建
var arr1 = [1, 2, 3];
console.log(arr1);

2.数组的操作
使用索引(index)下标来读取数组的值–下标是固定的，从0开始

数组的length属性，代表长度，通过设置这个属性，可以从数组的末尾移除项或向数组中添加新项

3.数组的方法
push()方法可以接收任意数量的参数，把它们逐个添加到数组末尾，并返回修改后数组的长度

pop()方法从数组末尾移除最后一项，减少数组的length值，然后返回移除的项

sort()方法按字母表升序排列数组项

splice()方法对数组进行删除、插入、替换，是最强大的数组方法，返回值是数组，改变原数组（第一个参数：开始删除的索引；第二个参数：删除的长度；第三个参数往后：插入到数组的数据项）

join()方法，将数组转换成对应的字符串，参数就是连接符

内置对象-自定义对象
1.对象的概念
对象是javascript的数据类型。对象是一种复合值，它将很多值聚合在一起，可通过名字访问这些值。对象也看做是属性的无序集合，每个属性都是一个键/值对。

2.对象(自定义对象)的两种创建方式
构造函数创建对象
var obj=new Object()
字面量创建对象
var obj=()

// 构造函数创建对象 - Object类（构造函数）
var obj = new Object();
obj.name = "xiaohe";
obj.age = 23;
console.log(obj.name); // 访问对象的属性
// 字面量创建对象
var obj1 = {
  name: "xiaohe",
  age: 23,
  show: function () {
    return "姓名：" + obj1.name + " 年龄：" + obj1.age;
  },
};
console.log(obj1.show()); // 访问对象的方法

3.对象属性和值的读写
点操作符
中括号

// 对象的属性一定是字符串，系统默认调用toString方法，将对象的属性转换成字符串，
// 意味着设置对象的属性名无法添加引号（对象的属性名称一定是字符串，引号可有可无）
// 读：利用中括号和点操作符，中括号里面可以放置字符串和变量，点操作符后面跟的一定是字符串
console.log(obj["name"]);
console.log(obj1.name);

内置对象-数组和对象的遍历
for循环：只能够遍历数组
for…in循环：可以遍历数组和对象，最好遍历对象

var obj = {
  name: "xiaohe",
  age: 24,
  sex: "女",
};
for (var attr in obj) { // attr表示对象的属性名
  console.log(attr);
  // console.log(obj.attr); // 无法获取，点操作符后面只能跟字符串
  console.log(obj[attr]);
}

内置对象-字符串对象
1.字符串的两种创建方式（字面量和构造函数）
var str = new String(“abc”); --object
var str= "abc; --string

// 构造函数创建，当我们使用字符串的方法和属性时，系统临时创建
var str = new String("hello"); 
// 字面量方式创建（经常采用的方式）
var str1 = "hello";
console.log(typeof str); // object
console.log(typeof str1); // string
console.log(str == str1); // true

2.字符串属于类数组
类数组的概念：也叫伪数组，在js中有一些对象它也拥有length属性，且拥有为非负整数的属性(索引)，但是它又不能调用数组的方法，这种对象被称为类数组对象。

3.字符串的方法
trim()：创建一个字符串的副本，删除前置及后缀的所有空格，然后返回结果

split()：根据分隔符、将字符串拆分成数组

substring()：用来截取字符串的内容（没有参数：全部截取；第一个参数：截取起始位置的索引；第二个参数：截取结束位置的索引，不包括结束位置）

toUpperCase()：转换成大写

toLowerCase()：转换成小写

内置对象-数学对象
1.数学方法
Math内置对象的常见API

Math.round()：将括号里面的数字采用四舍五入形式取整

Math.ceil()：将括号里面的小数采用向上取整

Math.floor()：将括号里面的小数采用向下取整

Math.pow()：求幕，第一个参数是底数，第二个参数是指数

Math.max()：求括号里面数字的最大值，数字之间逗号隔开

Math.min()：求括号里面数字的最小值，数字之间逗号隔开

Math.random()：随机数 – [0,1)，不包括1

内置对象-日期对象
1.日期对象创建
var d = new Date(); 创建日期

2.日期对象的方法
年：getFullYear()
月：getMonth()+1 0–11表示十二个月
日：getDate()
星期：getDay() 0-6表示星期日-星期六
时分秒：getHours() / getMinutes() / getSeconds()

var date = new Date();
console.log(date);
console.log(date.toLocaleString()); // 本地字符串格式输出 2023/8/14 17:58:17
// 年 月 日
console.log(date.getFullYear());
console.log(date.getMonth() + 1);
console.log(date.getDate());
// 星期 0-6：星期日-星期六
console.log(date.getDay());
// 时 分 秒
console.log(date.getHours());
console.log(date.getMinutes());
console.log(date.getSeconds());

// 设置日期对象
// 数字设置注意月份自动+1
var d = new Date(2023, 8, 14, 17, 58, 17);
console.log(d.toLocaleString()); // 2023/9/14 17:58:17
// 字符串设置
var d = new Date('2023-8-14 17:58:17');
console.log(d.toLocaleString()); // 2023/8/14 17:58:17
// 利用相应方法进行设置
// 数字设置注意月份自动+1
date.setMonth(2)
console.log(date.toLocaleString()); // 2023/3/14 17:58:17

4. 浏览器对象模型BOM的基本概念和作用。

一、js核心的组成部分
1.ECMAscript:控制js基本语法和一些内置对象
2.BOM:浏览器对象模型
3.DOM:文档对象模型

二、BOM对象的基本概念和特点
BOM：Browser object Model 浏览器对象模型，用来描述与浏览器进行交互的方法和接口。
BOM提供了很多对象，用于访问浏览器的功能，这些功能与任何网页内容无关。
BOM 的核心对象是window，它表示浏览器的一个实例。window对象有双重角色，它既是通过JavaScript访问浏览器窗口的一个接口，又是ECMAScript规定的全局对象。这意味着在网页中定义的任何一个对象、变量和函数，都以window作为其全局对象。

三、BOM下面的子对象
1.location
href属性控制浏览器地址栏的内容
reload(true)方法 刷新页面,如果参数为true,通过缓存刷新

2.history 操作历史记录
history.back(); 历史记录后退一步
history.forword; 历史记录前进一步

四、BOM的相关事件
1.BOM的常用事件
onload事件：页面内容加载完成后触发此事件(DOM结构，图片等内容…)
onscroll事件：拖动浏览器的滚动条触发此事件
onresize事件：浏览器窗口缩放所触发的事件

2.可视区的宽高：浏览器内部看得见的区域
document.documentElement.clientWidth / document.documentElement.clientHeight

// 浏览器窗口缩放时间，改变浏览器窗口，触发后面的函数
window.onresize = function () {
  console.log(
    document.documentElement.clientWidth,
    document.documentElement.clientHeight
  );
};

3.滚动条距离( 某些浏览器下面做兼容 )
document.documentElement.scrollTop / document.documentElement.scrollLeft

// 触发浏览器的滚动，执行后面的函数，滚动条事件
window.onscroll = function () {
  console.log(
    document.documentElement.scrollTop,
    document.documentElement.scrollLeft
  );
};
// 点击文档区域，触发后面的函数
window.onclick = function () {
  document.documentElement.scrollTop = 0;
};

4.定时器
setinterval(函数名称，时间); 间隔定时器，反复调用
clearInterval( 定时器的返回值); 停止定时器

var num = 0;
var timer = null;
timer = window.setInterval(function () {
  console.log(num);
  num++;
  if (num === 10) {
    clearInterval(timer);
  }
}, 1000);

setTimeout(函数名称，时间); 延时定时器，执行一次
clearTimeout( 定时器的返回值); 停止定时器

window.setTimeout(function() {
  location.href = "http://www.taobao.com";
}, 3000);

5.open()和close()
open(地址默认是空白页面，打开方式默认新窗口)方法：打开一个新窗口

document.onclick = function () {
  // _blank 打开一个新窗口
  window.open("html表单控件.html", "_blank");
  // _self 在本界面打开
  window.open("html表单控件.html", "_self");
};

close()方法：关闭一个窗口

document.onclick = function () {
  if (window.confirm("你确定要关闭吗")) {
    window.close();
  }
};

5. 文档对象模型DOM的基本概念和作用。

DOM元素的基本概念
DOM是”Document object Model"的首字母缩写，即文档对象模型。用来描绘一个层次化的节点树，允许开发人员获取添加、移除和修改页面的某一部分元素。

DOM元素的获取
1.获取页面基本控制结构里面的元素（元素/标签/节点）
页面基本控制结构里面的元素，通过document.元素名称进行获取：
document 获取整个文档对象document
document.documentElement 获取的html标签元素
document.title 获取title标题元素
document.head获取head标题元素
document.body 获取body标题元素

2.获取页面的其他元素
通过id选择器获取 - id选择器具有唯一性 - 最快的方式
console.log(id名称) — 直接通过id名称进行获取
document.getElementByld(‘id名称’) — 通过document下面的方法进行获取

通过classname类名获取元素 - 类选择器可以重用，界面中可以给多个元素设置相同的类名
获取的是一个类数组（集合），通过length和下标操作
document.getElementByClassName(‘class名称’)
document.getElementByClassName(‘class名称’)[0]

通过标签名获取，是一个类数组，必须通过下标获取
document.getElementByTagName(‘标签名称’)
document.getElementByTagName(‘标签名称’)[0]

DOM元素的创建、追加、插入、删除
createElement()创建一个元素节点
appendchild() 把元素节点插入到父节点的内部最后的位置
insertBefore(新的节点,存在节点) 把元素节点插入到父节点中某个子节点的前面
removeChild(node) 删除父节点内部的子节点

<html>
  <body>
    <div id="box">
      <hr />
    </div>
    <div class="cont"></div>
  </body>
</html>

<script>
  var oBox = document.getElementById("box");
  var oCont = document.getElementsByClassName("cont")[0];
  var oHr = document.getElementsByTagName("hr")[0];
  // 创建一个元素节点，只能插入到一个地方
  var cp = document.createElement("p");
  // 插入不生效
  oCont.appendChild(cp);
  // box节点里面必须有hr节点，才能插入
  oBox.insertBefore(cp, oHr);
  console.log(document.body);
</script>

DOM元素内部内容操作
innerHTML：读写元素节点里的内容( 包括元素),从节点起始位置到终止位置的全部内容,包括内部的元素。

document.onclick = function () {
  var oBox = document.createElement("div");
  oBox.innerHTML = "<strong>我是改变后的内容</strong>";
  document.body.appendChild(oBox);
};

parentNode：获取当前节点的父节点

var oBox = document.getElementById("box");
console.log(oBox.parentNode) // body
console.log(oBox.parentNode.parentNode) // html
console.log(oBox.parentNode.parentNode.parentNode) // document

CSS属性的读写
获取css属性值：offsetWidth、 offsetHeight、 offsetLeft、 offsetTop、 offsetParent (定位父级)

// 上面的属性是只读的（仅用来获取css属性）
var oBox = document.getElementById("box");
console.log(oBox.offsetWidth)
console.log(oBox.offsetHeight)
// offsetTop、offsetLeft 无论是否有定位都能获取盒子对应的位置，没有单位
console.log(oBox.offsetTop)
console.log(oBox.offsetLeft)
// 获取盒子的父级定位，如果父级没有定位，以body为基准
console.log(oBox.offsetParent)

获取样式及兼容问题：
getComputedStyle - 标准浏览器 - 非IE浏览器
currentStyle - ie浏览器

// getComputedStyle:标准浏览器 - 非IE浏览器
var oBox = document.getElementById("box");
console.log(window.getComputedStyle(oBox)["width"]);
console.log(window.getComputedStyle(oBox)["backgroundColor"]);
// currentstyle:ie浏览器
alert(oBox.currentStyle["width"]);
alert(oBox.currentStyle["backgroundColor"]);

设置css属性和值

var oBox = document.getElementById("box");
// 逐个属性进行赋值
oBox.style.width = '200px'
oBox.style.height = '400px'
oBox.style.background = 'orange'
// 直接将css代码复制给cssText，整体的操作
oBox.style.cssText = "width:400px;height:200px;background:pink;";

DOM元素类型
节点可以分为元素节点、属性节点和文本节点…，他们分别用不同的数字代表类型。
每个节点又有三个非常有用的属性，分别为:nodeName、nodeType、nodeValue

var oBox = document.getElementById("box");
console.log(oBox.nodeName); // DIV 元素的节点名称，大写
console.log(oBox.nodeType); // 节点类型：元素节点1 属性节点2 文本节点3
console.log(oBox.nodeValue); // null 元素节点不存在节点值

常见的事件类型
表单：
onblur 在对象失去输入焦点时触发
onfocus 当对象获得焦点时触发
onsubmit 表单提交事件
鼠标：
onclick 在用户用鼠标左键单击对象时触发
onmousedown 当用户用任何鼠标按钮单击对象时触发
onmouseup 当用户在鼠标位于对象之上时释放鼠标按钮时触发onmousemove 当用户将鼠标划过对象时触发
onmouseout 当用户将鼠标指针移出对象边界时触发
键盘：
onkeydown 当用户按下键盘按键时触发
onkeyup 当用户释放键盘按键时触发

6. 测试题讲解

[单选题] 在以下选项中，能IE确声明数组并进行初始化的语句是( D )。
A.str=new Dimension(1’ , ‘2’ , ‘3’);
B.str=new dimension(1’ , 2’ , ‘3’);
C.str : new Array(1’ , 2’ , ‘3’);
D.str=new Array(1’ , 2’ , ‘3’);
[单选题] 关于浏览器对象之间的从属关系，正确的说法是( C )。
A.window对象从属于document对象
B.document对象从属于window对象
C.window对象和document互不从属
D.以上选项均错
[单选题] 在JavaScript语言中，要定义局部变量则可以( C )。
A.由关键字private在函数内定义
B.由关键字private在函数外定义
C.由var在函数内定义
D.由关键字var在函数外定义
[单选题] 在JavaScript语言中，拥有onsubmit事件的对象是( D )。
A.document
B.event
C.window
D.form
[单选题] 在JavaScript中，表示释放鼠标上的任何一个键时发生的事件是( A )。
A.mouseUp事件
B.mouseDown事件¹⁸
C.mouseMove事件
D.mouseOver事件
[单选题] 下列语句中，正确打开名为“window2”的新窗口的JavaScript语句是( D )。
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.com.cn" , "window2")
[单选题] 下列哪个不属于DOM元素结点类型( D )。
A.元素结点
B.文本结点
C.属性结点
D.样式结点

六、动态网页技术概述

1. Java Servlet和JSP基本概念和原理。

Java servlet是什么?
在Web服务器端加载并运行的Java应用程序具体运行在Servet引]擎管理的JVM上,Servet是开发服务器端应用程序的一个很好选择，Servlet与JSP结合使用，能提供更强大的服务器端功能。

JSP 简介 :JSP 与PHP、ASP、ASP.NET 等语言类似，运行在服务端的语言。

原理:
JSP全称Java Server Pages，是一种动态网页开发技术。它使用JSP标签在HTML网页中插入Java代码。标签通常以<%开头以%>结束。

JSP通过网页表单获取用户输入数据、访问数据库及其他数据源，然后动态地创建网页。

JSP有多种功能，比如访问数据库、记录用户选择信息、访问JavaBeans组件等，还可以在不同的网页中传递控制信息和共享信息。

2. ASP.NET基本概念和原理。

ASP.NET技术是Microsoft Web开发史上一个重要的里程碑，使用ASP.NET开发Web应用程序并维持其运行，比其他开发语言更加简单。与Java、PHP和Perl等高级技术相比，ASP.NET具有方便性、灵活性、生产效率高、安全性高及面向对象等优点，是目前主流的网络编程技术之一。

ASP.NET是Microsoft公司推出的新一代建立动态Web应用程序的开发平台，是一种建立动态Web应用程序的新技术。ASP.NET是.NET框架的一部分，可以使用任何.NET兼容的语言(如Visual Basic、C#)来编写ASP.NET应用程序。

ASP.NET是Microsoft.NET的一部分，是Active Server Page (简称ASP)的另一个版本，ASP.NET提供了一个统一的Web开发模型，其中包括开发人员生成企业级Web应用程序所需的各种服务。ASP.NET的语法在很大程度上与ASP兼容，同时还提供一种新的编程模型和结构，可生成伸缩性和稳定性更好的应用程序，并提供更好的安全保护。

3. PHP基本概念和原理。

PHP即“超文本预处理器”，是一种通用开源脚本语言。PHP是在服务器端执行的脚本语言，与C语言类似，是常用的网站编程语言。PHP独特的语法混合了C、Java、 Perl以及 PHP 自创的语法。利于学习，使用广泛，主要适用于Web开发领域。

PHP、Apache和MysQL的组合已经成为Web服务器的标配，php可以做很多事情，PHP是服务端的脚本程序，需要安装php应用程序去解释执行，简单来说php是web服务器(lis、apache)功能扩展，这种结构更加适合网站原理，php需要和web服务器数据库一块才能发挥功能。

4. AJAX基本概念和原理。

AJAX即“Asynchronous Javascript And XML"(异步JavaScript和XML )，是指一种创建交互式网页应用的网页开发技术。

通过在后端与服务器进行少量数据交换，AJAX 可以使网页实现异步(局部)更新。

可以把一部分以前由服务器负担的工作转移到客户端，利用客户端的闲置的资源进行处理，减轻服务器和带宽的负担，节约空间和成本。

Ajax的工作原理相当于在用户和服务器之间加了一个中间层(AJAX引擎),使用户操作与服务器响应异步化。并不是所有的用户清求都提交给服务器,像一些数据验证和数据处理等都交给 Ajax擎自己来做,只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求。

Ajax其核心有JavaScript、XMLHTTPRequest、DOM对象组成，通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用JavaScript来操作DOM而更新页面。这其中最关键的一步就是从服务器获得请求数据。
在这里插入图片描述

5. 测试题讲解

[单选题] 下列不属于动态网页格式的是( D )。
A.ASP
B.JSP
C.ASPX
D.VBS¹⁹
[单选题] 相对比较早出现的服务器端动态网页技术是( B )。
A.ASP
B.CGI²⁰
C.JSP
D.JavaScript
[单选题] PHP 中采用的模板技术是( A )。
A.Smarty
B.Smart
C.Templet
D.Cache
[单选题] 下列技术中控制文档结构的是( A )。
A.DOM
B.CSS
C.JavaScript
D.XMLHttpRequest²¹
[单选题] 在Ajax的组成技术中，XMLHttpRequest的主要作用是( C )。
A.控制责面显示风格
B.控制文档结构
C.控制通信
D.控制其他的三个对象
[单选题] 下列语言中，不属于客户机端脚本语言的是( B )。
A.JavaScript
B.PHP
C.VBScript
D.ActionScript
[单选题] 下列构建Web网站的组合中，性价比最高的是( C )。
A.JSP +IIS+Oracle²²
B,ASP.NET+IIS+Microsoft SQL Server
C.PHP++Apache+MySQL
D.PHP+IIS+Oracle
[单选题]下列语言编写的代码中，在浏览器端执行的是( D )。
A.Web页面中的c#代码
B.Web页面中的Java代码
C.Web页面中的PHP代码
D.Web页面中的JavaScript代码
[单选题]在ASP.NET中采用Code Behind 代码购蒙技术分离HTML显示代码和业务逻辑代码，在PHP中采用的技术是( A )。
A.模板技术
B,静态缓存技术
C.PHP引擎技术
D.后台编译技术
[单选题] 下列关于静态网页和动态网页的描述中，错误的是( D )。
A.判断网页是静态还是动态的重要标志是看代码是否在服务器端运行
B.静态网页不依赖数据库
C.静态网页适合搜索引擎发现
D.动态网页不依赖数据库
[单选题] 下列关于ASP NET的描述中，错误的是( D )。
A.ASP.NET依赖于微软的.NET框架
B.ASP.NET采用纯面向对象语言比采用脚本语言的执行效率高
C.ASP.ET采用代码分离技术有利于开发协作
D.ASP.NET和ASP都采用了JavaScript编程语言
[单选题] 关于微软的，NET框架的描述中，正确的是( A )。
A..NET框架提供了一个公共语言运行时环境，提供内存管理
B..NET框架中的服务框架提供内存管理
C..NET框架提供标准语言库，从而提供内存管理
D..NET框架提供Windows应用程序模板，从而提供内存管理

考试方式

上机考试，考试时长120分钟，满分100分。

题型及分值
单项选择题40分（含公共基础知识部分10分）。
操作题60分（包括基本操作题、简单应用题及综合应用题）。
考试环境
NetBeans中国教育考试版（2007）。
IE6.0及以上。

Internet的别称是因特网，他跟Web是两个东西 ↩︎
Web是Internet上最流行的应用之一 ↩︎
FTP第一个字母F代表file（文件），所以我们称它为文件传输协议。FTP也是最早的协议，发展过程为：FTP>HTTP>HTTPS ↩︎
两台电脑要通信，一定要有http，电脑要联网必须要有TCP/IP协议 ↩︎
WWW：万维网，一个标准；IP地址：电脑的唯一标识；DNS：配置网络的；HTML：显示数据的 ↩︎
FTP文件传输协议，文件传输协议指的是文件之间的一个上传下载主要的一个协议，HTTP是通讯的一个协议 ↩︎
URL统一资源定位符，统一资源定位符就是一个完整的路径 ↩︎
ASP服务器端，要装IIS；PHP服务器端，要装Apache；Perl也是一个后端语言；VBSCript里面的script代表脚本语言，它是基于一种叫VB的脚本语言，目前已经被淘汰的差不多了 ↩︎
一个服务器里面有三个项目，通过端口来指代我们访问的是哪个项目 ↩︎
.htm是html的拓展名；.asp是服务器开发技术asp的拓展名 ↩︎
域名找服务器，服务器相当于一台昂贵的电脑，电脑有唯一的表示叫做ip ↩︎
编制HTML文件时需要加入任何标记（tag），它是由“<>”尖括号这种标签构成的；HTML是一种标记语言不是程序语言，HTML中的M代表mark标记的意思；HTML是不需要服务器的，他只需要有浏览器就够了 ↩︎
这四个选项FTP、SMTP、TCP、UDP都跟传输控制协议有关，HTTP协议是运行在传输控制协议之上的，这里面最具有代表性的就是TCP，经常有一个叫法是TCP/IP，称为传输控制协议也叫网际协议 ↩︎
URI 统一资源标识符，一般用于标识某一互联网资源的名称；URL 统一资源定位符 ↩︎
https的端口是443 ↩︎
HTTP协议能传输的数据类型有很多 ↩︎
Caption：表格标题 head：标题在head里面，和页面信息相关内容没关系的都在head里面 ↩︎
mouseDown按下、mouseMove移动、mouseOver悬停 ↩︎
VBS是脚本语言，跟javaScript类似 ↩︎
CGI（通用网关接口），是Web 服务器运行时外部程序的规范 ↩︎
XMLHttpRequest是ajsx的属性对象 ↩︎
IIS是跟ASP.NET配合的，Apache是跟PHP配合的，排除A和D，在配合上B、C都是成立的，但是Microsoft SQL Server 比MySQL贵 ↩︎

xm1107

关注

7
点赞
踩
25

收藏

觉得还不错? 一键收藏
1
评论
全国计算机等级考试二级Web程序设计

Java servlet是什么?在Web服务器端加载并运行的Java应用程序具体运行在Servet引]擎管理的JVM上,Servet是开发服务器端应用程序的一个很好选择，Servlet与JSP结合使用，能提供更强大的服务器端功能。JSP 简介 :JSP 与PHP、ASP、ASP.NET 等语言类似，运行在服务端的语言。原理:JSP全称Java Server Pages，是一种动态网页开发技术。它使用JSP标签在HTML网页中插入Java代码。标签通常以结束。
复制链接

扫一扫