1. 概论
1-1 Web前端开发概述随堂测验
1、web系统前端是指系统中用户接触到的部分。
2、web系统后端主要负责完成系统功能,包括数据存取、系统安全等。
3、网页对应着的源文件包含一些代码,而浏览器可以解析这些代码,呈现出来。
1-2 网站与网页随堂测验
1、以下关于浏览器的描述错误的是:
A、主流的浏览器有Chrome,Firefox,IE等。
B、不同浏览器厂商的浏览器,一定有不同的内核。
C、不同版本的浏览器差别可能很大,对Web技术的支持度也会不同。
D、Chrome浏览器可以在进行web前端开发时,用于调试和测试。
2、网页的导航栏是超链接的集合,可以由此进入不同版块或页面。
3、网站中的网页是逻辑相关的,可以通过超链接的方式被组织在一起。
1-3 Web前端开发技术随堂测验
1、以下说法错误的是( )。
A、HTML与CSS配合使用,是为了内容与样式分离。
B、如果只使用HTML而不使用CSS,网页是不可能有样式的。
C、JavaScript可以嵌入在HTML语言中,作为网页源文件的一部分存在。
D、CSS表示层叠样式表,可以添加页面的样式,规定网页的布局。
2、关于内容、结构和表现说法正确的是( )。
A、内容是页面传达信息的基础
B、表现使得内容的传达变得更加明晰和方便
C、结构就是对内容的交互及操作效果
D、内容就是网页实际要传达的信息,包括文本、图片、音乐、视频、数据、文档等
3、关于 web 标准以下说法正确的是( )。
A、Web 标准是一个复杂的概念集合,它由一系列标准组成
B、这些标准全部都由 W3C 起草与发布
C、Web 标准可以分为 3 个方面
D、Web 标准里的表现标准语言主要包括 CSS
4、HTML是超文本标记语言,是制作网页的标准语言。
5、CSS负责网页的结构,JavaScript负责网页的行为,也就是跟用户的一些交互。
6、w3c组织制定关于web技术的一些标准,例如HTML、CSS、JS等。
2.网站前台页面设计
实验一作业:网站主页版面的设计
1、按照实验指导书要求,完成实验一。 请提交.psd和.jpg两种格式的作业效果图,两个效果图压缩上传(.rar,.zip)。
实验二作业: 网站前台页面设计
1、自行选题,可以按照不同的行业或企业确定主题, 从某网站结构分析入手,自行下载素材(或从网上搜集相关素材或主题内容), 先设计出网站结构图,细化完成主页与内容页的效果图设计。 上传.psd+.jpg两种格式的图片,压缩上传附件。
3. HTML基础标签
3-1 HTML概述随堂测验
1、网页是由HTML语言来实现的,HTML语言是()。
A、大型数据库
B、网页源文件中出现的唯一一种语言
C、网络通信协议
D、超文本标记语言
2、HTML文档中的元素分为()两部分。
A、内容文本、标签
B、文本、多媒体元素
C、超文本、多媒体元素
D、标签、框架
3、以下关于HTML标签叙述错误的是()。
A、可以单独出现,也可以成对出现
B、必须正确嵌套
C、标签可以带有属性,属性的顺序无关
D、标签和其属性构成了HTML元素
4、HTML的标签一定是成对出现的,否则无法完成嵌套关系。
5、HTML不区分大小写。
6、所有HTML标签都有开始标签和结束标签构成。
7、HTML的注释语句格式为:/* */。
3-2 HTML文件结构随堂测验
1、关于HTML说法错误的是()。
A、HTMLS标签的嵌套结构可以描述成一个网状结构。
B、在和标签之间的是标题信息
C、HTML是大小写无关的,和表示的意思是一样的。
D、 标签表示网页元数据,是提供给浏览器和搜索引擎关于网页的描述性数据。
2、下面语句中,()将HTML页面的标题设置为“HTML练习 ”
A、HTML练习
B、HTML练习
C、HTML练习
D、HTML练习
3、字符与编码说法错误的是()。
A、字符集是字符的集合
B、字符集通常与某种语言文字相关。
C、编码可以完成字符的唯一的映射。
D、编码方式有很多种,ASCII编码包含了所有语言文字中出现的字符。
4、为了标识一个HTML文件,应该使用的标签()。
A、
B、
C、
D、
5、以下不是元素作用的是()
A、该元素用来定义文档类型
B、该元素用来声明命名空间
C、该元素用来向搜索引擎声明网站关键字
D、该元素用来向搜索引擎声明网站作者
6、Unicode编码与UTF-8编码都涵盖了所有语言文字
7、网页源文件本身的编码方式与浏览器解读的编码方式如果不同,就会再现乱码。
3-3 HTML标签(1) h1~h6、p、br、pre、span、hr随堂测验
1、表示水平分割线的HTML代码是()
A、
B、
C、
D、
2、下面标记中,()在标记的位置添加一个回车符。
A、
B、C、
D、
3、创建最小标题的文本标签是()
A、
B、
C、
D、
4、在HTML中,标记 的作用是 ( ).
A、标题标签
B、预排版标签
C、换行标签
D、文字效果标签
5、默认情况下,h1标签的文字字号,要远小于h6标签。
3-4 HTML标签(2) a随堂测验
1、超级链接的基础语法是:()
A、
B、
C、
D、
2、超文本标记语言央视国际的作用是()
A、插入一段央视国际网站的文字
B、插入一幅央视国际网站的图片
C、创建一个指向央视国际网站的电子邮件
D、创建一个指向央视国际网站的链接
3、以下说法正确的是()
A、标签是页面链接标签,只能用来链接到其它页面
B、标签是页面链接标签,只能用来链接到本页面的其它位置
C、标签的src属性用于指定要链接的地址
D、标签的href属性用于指定要链接的地址
4、a标签可以跳转到外部站点的页面,例如跳转到新浪网首页,可以写如下代码:新浪首页
实验三:HTML页面制作
1、编写页面代码 完成页面效果
4.HTML5标签
4-3HTML5标签(3)form、input、select、textarea随堂测验
1、在HTML中,,action表示:
A、提交的方式
B、表单所用的脚本语言
C、提交的URL地址
D、表单的形式
2、增加表单的输入框的HTML代码是:
A、
B、
C、
D、
3、增加表单的复选框的HTML代码是:
A、
B、
C、
D、
4、增加表单的文本域的HTML代码是:
A、
B、
C、
D、
5、增加表单的密码域的HTML代码是:
A、
B、
C、
D、
实验四:HTML5页面设计
1、完成3个页面
实验五:表单的设计与制作
1、要求的页面完成设计与制作
5. CSS样式
实验六:CSS的编写与调用
1、完成所有页面的效果设计
实验六:CSS的编写与调用
1、每个页面50分
6.CSS布局与定位
6-1 布局与定位概述随堂测验
1、盒子模型中的盒子,可以是任何页面元素。
2、盒子模型中的盒子是可以逐层嵌套的。
3、CSS进行布局与定位,首先用盒子将元素大小、边距等信息确定下来,然后用定位方式决定盒子的位置。
4、定位机制分为三种:盒子定位、文档流定位、浮动定位。
6-2 盒子模型(I)随堂测验
1、下列( )表示上边框线宽10px,下边框线宽5px,左边框线宽20px,右边框线宽1px。
A、border-width:10px 1px 5px 20px
B、border-width:10px 5px 20px 1px
C、border-width:5px 20px 10px 1px
D、border-width:10px 20px 5px 1px
2、在CSS语言中下列哪一项是"左边框"的语法( )。
A、border-left-width:
B、border-top-width:
C、border-left:
D、border-bottom-width:
3、CSS中,盒模型的属性包括( ) 。
A、border
B、padding
C、content
D、margin
4、下列哪些是设置有关边框的属性( )。
A、border-color
B、border-style
C、border-width
D、border-back
5、以下哪个选项是设置边框的( )。
A、border-bottom
B、border-top
C、border-left
D、border-right
6、盒子模型中,边框的属性是可以分为4个方向分别设置的。
7、溢出盒子的部分,可以使用overflow属性,将其设置为hidden隐藏起来。
6-3盒子模型(II)随堂测验
1、下列哪个属性能够设置盒模型的左侧外边距( )。
A、margin
B、indent
C、margin-left
D、padding-left
2、下列哪个CSS属性能够设置盒子模型的内边距为10、20、30、40、(顺时针方向)( ) 。
A、padding:10px 20px 30px 40px
B、padding:40px 30px 20px 10px
C、padding:10px 40px 30px 20px
D、padding:20px 10px 40px 30px
3、阅读下面HTML代码,两个div之间的垂直空白距离是( )。 ......
A、0px
B、10px
C、15px
D、25px
4、阅读下面CSS代码,下面选项中与该代码段效果等同的是( )。 .box { margin:10px 5px; margin-right:10px; margin-top:5px; }
A、.box { margin:5px 10px 0px 0px; }
B、.box { margin:5px 10px 10px 5px; }
C、.box { margin:5px 10px; }
D、.box { margin:10px 5px 10px 5px; }
5、利用以下什么代码可以设置div区域的水平居中( )。
A、div{margin:0}
B、div{margin:auto 100px}
C、div{margin:100px auto}
D、div{margin:100px 100px }
6、文字、图片、div区域水平居中,都可以使用text-align:center进行设置。
7、margin:1px 2px 1px 3px; 可以缩写成 margin:1px 2px 3px;
6-6 浮动定位随堂测验
1、clear属性取值说法正确的是( )。
A、取值为all表示四周浮动元素被删除
B、取值为left表示左侧浮动元素被删除
C、取值为right表示右侧浮动元素被删除
D、取值为both表示清除两侧浮动
2、float属性说法不正确的是( )。
A、该属性可以用于图文混排
B、该属性可以用于网页分栏
C、该属性可以用于盒子层叠
D、该属性可以用于浮动定位
3、浮动元素在文档流中的原位置依然保留。
4、利用float属性将3个div盒子水平排列,可以将3个盒子都设置float:right。
5、如果一个父元素的所有子元素都浮动起来,则这个父元素默认高度坍缩为0。
实验七:CSS盒子模型
1、每个页面50分
实验八:网页布局中的CSS应用
1、完成页面结构及效果的设计
实验九:CSS+DIV企业网站布局
1、完成首页+4个内容页的设计与制作
7网页综合设计案例
实验十 资讯门户类网站设计
1、完成HTML及CSS代码,实现网页效果
9.JQuery
实验十二 jQuery选择器实验
1、每题50分
实验十三jQuery操作实验
1、2题
8 JavaScript基础
实验十一 jQuery基础语法
1、1题20分 2题40分 3题40分
实验报告册
实验报告
1、13个实验都要完成
期末大作业考试
1、请仔细阅读大作业考核要求。
2、课程设计报告模板
值> 值> 值> 值>