HTML+ css+javascript复习题.docx
- 文档编号:23479262
- 上传时间:2023-05-17
- 格式:DOCX
- 页数:16
- 大小:492.13KB
HTML+ css+javascript复习题.docx
《HTML+ css+javascript复习题.docx》由会员分享,可在线阅读,更多相关《HTML+ css+javascript复习题.docx(16页珍藏版)》请在冰豆网上搜索。
HTML+css+javascript复习题
1.为什么在网页中加入CSS?
在网页中加入CSS用于有效地设计和实现网页排版布局的一组描述或定义。
而CSS通过样式来表示网页的颜色,字体,背景色,边框线及网页内容的位置及大小尺寸等属性;可以精确地控制网页中各个元素的位置;简化代码,提高下载速度;可以和脚本语言相结合,从而使网页中的元素实现动态效果;代码兼容性更好。
2.在HTML网页中添加CSS有几种方法?
请分别介绍如何使用?
链入外部样式表、内部样式表、导入外表样式表,内嵌样式。
1.链入外部样式表
链入外部样式表是把样式表保存为一个样式表文件,然后在页面中用标记链接到这个样式表文件,这个标记必须放到页面的
区内,如下:„„
„„
上面这个例子表示浏览器从mystyle.css文件中以文档格式读出定义的样式表。
rel=”stylesheet”是指在页面中使用这个外部的样式表。
type=”text/css”是指文件的类型是样式表文本。
href=”mystyle.css”是文件所在的位置。
media是选择媒体类型,这些媒体包括:
屏幕,纸张,语音合成设备,盲文阅读设备等。
一个外部样式表文件可以应用于多个页面。
当你改变这个样式表文件时,所有页面的样式都随之而改变。
在制作大量相同样式页面的网站时,非常有用,不仅减少了重复的工作量,而且有利于以后的修改、编辑,浏览时也减少了重复下载代码。
样式表文件可以用任何文本编辑器(例如:
记事本)打开并编辑,一般样式表文件扩展名为.css。
内容是定义的样式表,不包含HTML标记,mystyle.css这个文件的内容如下:
hr {color:
sienna} p {margin-left:
20px}
body {background-image:
url("images/back40.gif")}
/*定义水平线的颜色为土黄;段落左边的空白边距为20象素;页面的背景图片为images目录下的back40.gif文件*/
2. 内部样式表
内部样式表是把样式表放到页面的
区里,这些定义的样式就应用到页面中了,样式表是用 „„注意:
有些低版本的浏览器不能识别style标记,这意味着低版本的浏览器会忽略style标记里的内容,并把style标记里的内容以文本直接显示到页面上。
为了避免这样的情况发生,我们用加HTML注释的方式(
-- 注释 -->)隐藏内容而不让它显示:
„„
„„
3. 导入外部样式表
导入外部样式表是指在内部样式表的 „„
例中@import “mystyle.css”表示导入mystyle.css样式表,注意使用时外部样式表的路径。
方法和链入样式表的方法很相似,但导入外部样式表输入方式更有优势。
实质上它相当于存在内部样式表中的。
注意:
导入外部样式表必须在样式表的开始部分,在其他内部样式表上面。
4. 内嵌样式
内嵌样式是混合在HTML标记里使用的,用这种方法,可以很简单的对某个元素单独定义样式。
内嵌样式的使用是直接将在HTML标记里加入style参数。
而style参数的内容就是CSS的属性和值,如下例:
sienna;margin-left:
20px;"> 这是一个段落
--这个段落颜色为土黄,左边距为20象素-->
在style参数后面的引号里的内容相当于在样式表大括号里的内容。
注意:
style参数可以应用于任意BODY内的元素(包括BODY本身),除了BASEFONT、PARAM和SCRIPT。
3.JavaScript的特点有哪些?
脚本编写语言,采用小程序段的方式实现编程,也是一种解释性语言,提供了一个简单的开发过程。
基于对象:
JavaScript是基于对象的脚本编程语言,同时还可以看做是一种面向对象的语言。
简单性:
JavaScript是一种基于语句和控制之上的简单而紧凑的设计,同时JavaScript的变量类型是弱类型,使用不严格。
相对安全性:
JavaScript是客户端脚本,通过浏览器解释执行。
它不允许直接访问本地计算机,并且不能将数据存到服务器上,它也不允许对网络文档进行修改和删除,只能通过浏览器实现信息浏览或动态交互,从而有效地防止数据的丢失。
动态性:
JavaScript提供简单高效的语言流程,灵活处理对象的各种方法和属性,同时及时响应文档页面事件,实现页面的交互性和动态性。
跨平台:
JavaScript脚本的正确运行依赖于浏览器,而与具体的操作系统无关。
只要客户端装有支持JavaScript脚本的浏览器,JavaScript脚本运行结果就能正确反映在客户端浏览器平台上。
4.CSS中margin和padding的区别
margin是 DIV与周边元素的距离
padding是 DIV里边内容与这个DIV的距离
5.css中id和class如何定义,哪个定义的优先级别高?
id选择器级别高于class选择器
在CSS文件中class选择器用
.style{
属性:
值;
}
id选择器为
#style
{
属性:
值;
}
其中style为CSS样式的名字
6.CSS中span和div的区别
SPAN和DIV的区别在于,DIV(division)是一个块级元素,可以包含段落、标题、表格,乃至诸如章节、摘要和备注等。
而SPAN是行内元素,SPAN的前后是不会换行的,它没有结构的意义,纯粹是应用样式,当其他行内元素都不合适时,可以使用SPAN。
P248
7.CSS+DIV布局的优点有哪些?
(1)结构清晰,容易被搜索引擎收集。
(2)与表格比能减少代码,实现表格布局的许多功能,从而提高页面的加载速度。
(3)能够在任何地方、任何设备上表现已经构建好的网页布局。
(4)可以实现和表现和内容数据的分离。
(5)能很好的控制页面的布局效果。
(6)拥有强大的字体控制和排版能力
8.CSS引入的方式有哪些?
link和@import的区别?
CSS有四种引入方式,分别如下:
1、外部链接一个CSS文件,我们在HTML头部分标明:
2、头部直接写入CSS:
3、外接多个CSS文件时:
4、直接在html标签里写入对这个标签的CSS控制,如:
1px solid red;">测试信息
link CSS 与@import CSS的本质区别
1.它们的作用是相同的.link 属于XHTML标签,而@import完全是CSS提供的一种方式。
link除了可以加载CSS外,还可以定义RSS,rel连接属性等。
而@import只能加载CSS了。
2.加载顺序的差别。
当一个页面被加载的时候,link 引用的CSS会同时被加载,而@import引用的CSS会等到页面全部被下载完再被加载。
3.兼容性的差别。
由于@import是CSS2.1提出的,所以老的浏览器不支持,@import只有在IE5以上的才能识别,而link标签无此问题。
4.使用dom 控制样式时的差别。
当使用javascript控制dom 去改变样式的时候,只能使用link标签,因为@import 不是dom可以控制的。
1,设计图`1中文本框样式.背景为黄色,文字为蓝色边框线为红色.写出样式代码
.wu{}
解答:
1. #FFF000; color: #0000ff;bordercolor: #FF0000;”/> 2. document.getElementById("input").style.backgroundColor="red"; 2.对于下面的HTML代码
其对应的样式表文件如下:
A)#menua{margin-right:
20px}
B)#menu{background:
#9bbb38;color:
#fff;padding:
4px10px}
C)#menuul{margin:
0;padding:
0;float:
left;width:
100%;background:
#9bbb38}
D)#menuli{padding:
0;margin:
0;list-style:
none;float:
left;}
E)#menulia{display:
block;margin:
01px00;padding:
4px10px;width:
60px;background:
#9bbb38;color:
#fff;text-align:
center;text-decoration:
none;}
#menulia:
hover{background:
#fff;color:
#9bbb38}
请说明ABCDE行所定义样式
A)#menua{margin-right:
20px}
链接右边距为20像素
B)#menu{background:
#9bbb38;color:
#fff;padding:
4px10px}
绿色白色上下间距为4像素,左右为10像素
C)#menuul{margin:
0;padding:
0;float:
left;width:
100%;background:
#9bbb38}
列表内间距,外边距为0像素左排列100%宽度
D)#menuli{padding:
0;margin:
0;list-style:
none;float:
left;}
菜单里的元素内间距,外边距为0像素取消列表样式(列表项符号)左排列
E)#menulia{display:
block;margin:
01px00;padding:
4px10px;width:
60px;
以块元素的方式显示上,下,左边距为0像素,右边距为1像素上下间距为4像素,左右为10像素宽度为60像素
background:
#9bbb38;color:
#fff;text-align:
center;text-decoration:
none;}
背景颜色为绿色文字颜色为白色文字居中对齐取消文字下划线
#menulia:
hover{background:
#fff;color:
#9bbb38}
鼠标在链接状态
1.在背景图像中,要实现图中效果,怎样设置CSS?
.TU{
background-image:
url(A.jpg);
background-repeat:
repeat-y;
}
2.下图中通过单击按钮来计算水果数。
请写出html和JavaScript代码。
functiondofruits(){
varapples=document.form1.apples.value;
varbananas=document.form1.bananas.value;
varfruits=parseInt(apples)+parseInt(bananas);
document.form1.fruits.value=fruits;
}
苹果数:
香蕉数:
水果数:
3,网页中实现一个计算当年还剩多少时间的倒数计时程序,要求网页上实时动态显示“××年还剩××天”写出代码:
functioncounter(){
vardate=newDate();
varyear=date.getFullYear();
vardate2=newDate(year,12,31,23,59,59);
vartime=(date2-date)/1000;
varday=Math.floor(time/(24*60*60))
varhour=Math.floor(time%(24*60*60)/(60*60))
varminute=Math.floor(time%(24*60*60)%(60*60)/60);
varsecond=Math.floor(time%(24*60*60)%(60*60)%60);
varstr=year+"年还剩"+day+"天"+hour+"时"+minute+"分"+second+"秒";
document.getElementById("input").value=str;
}
window.setInterval("counter()",1000);
4.函数的变量的定义方式
varcircularityArea=newFunction("r","returnr*r*Math.PI");
varrCircle=8;
vararea=circularityArea(rCircle);
alert("半径为8的圆面积为:
"+area);
5题
.
functionstudent(name,address,phone)
{
this.name=name;
this.address=address;
this.phone=phone;
this.printstudent=function()
{line1="Name:
"+this.name+"
\n";
line2="Address:
"+this.address+"
\n";
line3="Phone:
"+this.phone+"
\n"
document.writeln(line1,line2,line3);
}
}
Tom=newstudent("王芳","南京路56号","010-1238685");
Tom.printstudent()
6.题
functionMM_openBrWindow(theURL,winName,features){//v2.0
window.open(theURL,winName,features);
}
('第2题.html','打开浏览器窗口','width=400,height=500')">
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- HTML+ css+javascript复习题 HTML css javascript 复习题