选择题
1.以下哪个不属于Web前端开发的核心技术?( )。
A、HTML C、JavaScript |
B、CSS D、Java |
2.关于HTML说法错误的是( )。
A、HTML标签的嵌套结构可以描述成一个网状结构
B、在<title>和</title>标签之间的是标题信息
C、HTML是大小写无关的,<b>跟<B>表示的意思是一样的
D、标签表示网页元数据,是提供给浏览器和搜索引擎的关于网页的描述性数据
3.关于HTML文件类型,以下哪种说法是正确的?( )。
A.HTML文件后缀名既可以是.html也可以是.htm结尾
B.HTML文件后缀名只能是.html结尾
C.HTML文件可以没有后缀名
D.HTML文件后缀名是.txt
4.以下哪个标签显示出来的标题字体最大?( )。
A、 |
B、 |
C、 |
D、 |
5.下面标记中,( )在标记的位置添加一个回车符。
A、 |
B、 |
C、 |
D、 |
6.CSS样式表根据代码放置的位置共有3种形式,那么代码片段 测试
A、外部样式表 |
B、内部样式表 |
C、内联样式表 |
D、以上都不正确 |
7.超链接基本语法是:( )
A、 ... C、 ... |
B、 ... D、 ... |
8.引用外部样式表的格式是( )?
A、
B、
C、
9.以下哪个属性或属性值用于标记CSS样式的使用优先级?( )。
A、!important C、C.display |
B、B.z-index D、position |
10.下列哪个css属性能够更改文本字体( )。
A、text |
B、line-height |
C、font-family |
D、text-decoration |
11.下列样式定义字体为宋体、字体颜色为红色、斜体、大小20px、粗细800号,正确的定义是( )。
A、p{font-family:20px; font-size:宋体; font-weight:800; color: red; font-style:italic; }
B、p{font-family:宋体; font-size:20px; font-weight:800; color:red; font-style:italic; }
C、p{font-family:20px; font-size:800; font-weight:宋体; color:red; font-style:italic; }
D、p{font-family:800; font-size:20px; font-weight:red; color:italic; font-style:宋体; }
12.下面代码使用HTML元素的id属性,将样式应用于网页上的某个段落:
这是第一个段落
以下关于样式规则定义正确的是( )。
A、 p{color:red}
C、 .firstp {color:red}
|
B、 # firstp {color:red}
D、 p.firstp {color:red}
|
13.关于外部样式表的说法错误的是?( )。
A、文件扩展名为.CSS
B、外部样式表中的内容以结束
C、使用外部样式表可以使多个网页统一样式风格
D、同一个网页文档允许引用多个外部样式表
14.在JavaScript中使用( )来分隔两条语句。
A、逗号 |
B、句号 |
C、分号 |
D、括号 |
15.在CSS 中,为页面中的某个DIV标签设置以下样式,则该标签的占用宽度为( )。
div { width:200px; padding:0 20px; border:5px; } padding两个参数为上下,左右
boarder*2+width+padding*2
A、200px |
B、220px |
C、240px |
D、250px |
16.下面选项中,可以设置页面中某个DIV标签相对页面水平居中的CSS样式是( )。
A、margin : 0 auto C、padding : 0 auto |
B、text-align: center D、vertical-align : middle |
17.声明函数时,要使用一个关键词是( )。
A、console |
B、log |
C、function |
D、method |
18.下述关于循环语句的描述中,( )是错误的。
A、循环体内必须同时出现 break 语句和 continue 语句
B、循环体内可以出现条件语句
C、循环体内可以包含循环语句
D、循环体可以是空语句,即循环体中只出现一个分号
19.下面哪一个表达式的返回值为True。( )
A、!(3<=1) |
B、(1!=2)&&(2<0) |
C、!(20>3) |
D、(5!=3)&&(50<10) |
20.以下能正确保存字符串Today is a gift, that is why it is called “present”.的变量初始化的写法为 ( )。
A、var msg = ‘Today is a gift, that is why it is called “present”.’;
B、var msg = “Today is a gift, that is why it is called “present”.”;
C、var msg = “Today is a gift, that is why it is called \’present\’.”;
D、var msg = “Today is a gift, that is why it is called ‘present’.”;
21.下列哪个选项的CSS语法是正确的?( )
A、body:color=black
B、{body:color=black(body)}
C、body {color: black}
D、{body;color:black}
22.如何显示这样一个边框:顶边框8像素、底边框5像素、左边框20像素、右边框1像素( )
A、border-width:8px 1px 5px 20px
B、border-width:8px 20px 5px 1px
C、border-width:5px 20px 8px 1px
D、border-width:8px 5px 20px 1px
23.常用的网页图像格式有( )
A、gif,tiff |
B、tiff , jpg |
C、gif,jpg |
D、tiff, png |
24.向页面输出“Hello World"的正确javascript语法是?( )
A、document.write("Hello World")
B、"Hello World"
C、response.write("Hello World")
D、(Hello World")
25.已知var x=10; x+="1";此时x最终等于多少?( )数字与字符串相加会变成字符串
A、101 |
B、11 |
C、10”1” |
D、1 |
26.以下哪种JavaScript的变量声明是不规范的?( )
A、A. var hello; C、var $hello; |
B、var _hello; D、var %hello; |
27.已知, 以下哪句JavaScript代码可以获得该元素?( )
A. var x = document.createElement("test");
B. var x = document.createElement("style01");
C. var x = document.getElementById("test");
D. var x = document.getElementById(" style01");
28.下列哪种方式是用类选择器定义样式的( )
A、p{color:red;} C、#two{color:red;} |
B、.one{color:red;} D、p,h1{color:red;} |
29. 有如下JavaScript代码:
var a=1; a算全局变量
function sum(b){
console.log(a);
a+=2;
}
sum(a);
console.log(a);
此程序的最终结果为( )。
A、1 2 |
B、2 1 |
C、3 1 |
D、1 3 |
30.已知var x = 2e9000; 假设尝试执行alert(x);最终显示的结果是?( )
A、NaN C、Infinity |
B、2e9000 D、x |
1.在HTML中如何对元素标签以及其内部的内容(选项中用…表示)进行注释?( )
A、/*…*/ C、 |
B、//… D、“…” |
2.如果有函数定义function f(x.y){…},那么以下正确的函数调用是( )
。
A、f1,2 |
B、f(1) |
C、f(1,2) |
D、f(,2) |
3.如果希望在网页中内嵌其他网页内容,需要用到的标签是?( )
A、 |
B、 |
C、 |
D、 4.关于标签的说法,哪个不正确?( )。 A、是一个内联元素,即不会在前后放置换行符号,默认在同一行显示。 B、一般用作文本容器。 C、首尾标签括住的文本内容默认变为黄色背景。 D、本身没有任何样式,需要配合CSS样式代码才会有样式效果。 5.下列( )表示p元素中的字体是粗体。 A、p {text-size:bold} C、p {font-weight:bold} B、 D、 6.在JavaScript中,下列满足变量x大于等于20且小于100条件的正确表达式是( )。 A、(x>=20 & x<100) C、(x>=20 or x<=100) B、(x>=20 and x<100) D、(x>=20 && x<100) 7. 已知有字符串var s = "happy"; 那么以下哪句可以获取到里面的字符’a’?( ) A、s.charAt(1) B、s.charAt(2) C、s.charAt(-1) D、s.charAt(-2) String str = "leetcode"; str.charAt(0) 为"l" str.charAt(1) 为"e" 8.下列( )是正确的CSS规则。 A、div{color:#999999;} C、div:color=black B、{div;color:black} D、{div:color=black(body)} 9.在CSS样式中font-size属性用于设置字体大小,以下哪种写法单位不正确?( ) A、font-size: 30px; C、font-size: 30pt; B、font-size: 30deg; D、font-size: 30em; 10.下列表达式结果为真的是( )。 A、5>"5" false C、Math.round(10.5)>12 加上0.5后向下取整 B、1==true D、NaN==NaN false 11. 关于字体的样式风格,以下哪种说法是不正确的?( )。 A、font-variant: small-caps;用于设置字体中英文字母均为小写字母 B、font-family: "宋体";用于设置字体的系列为宋体字 C、font-size:16px;用于设置字体尺寸大小为16像素 D、font-weight: bold;用于设置字体加粗 12.标题标记包含6种标记,每一个级别的字体大小都有明显的区分,下面哪级标题的字号最大( )。 A、 B、 C、 D、 14.以下哪个常量值最大?( ) A、70 B、025 C、0x90 D、0x85 15.下面四个变量声明语句中,哪一个变量的命名是正确的? ( ) A、var for B、var txt_name C、var myname myval D、var 2s 16.有如下JavaScript代码: var i=0; while(i<5){ i++; if(i==3){ continue; } console.log(“*”); } 该程序最终输出几个*( )。 A、3 B、4 C、5 D、6 17. 参数之间必须用( )分隔。 A.逗号 B.句号 C.分号 D.空格 18.下面哪一个表达式的返回值为True。( ) A、!(3<=1) B、(1!=2)&&(2<0) false C、!(20>3) false D、(5!=3)&&(50<10) false 19.表达式160%9的计算结果是( )。 A、5 B、6 C、7 D、8 20.表达式"a90"+"90"的计算结果是( )。 A、a180 B、a9090 C、a90 D、180 21.为了标识一个HTML文件应该使用的HTML标记是( )。 A、 p> B、 |
C、
D、
22.下面不属于CSS插入形式的( )。
A、索引式 |
B、内联式 |
C、嵌入式 |
D、外部式 |
23.可以不用发布就能在本地计算机上浏览的页面编写语言是( )。
A、ASP |
B、HTML |
C、PHP |
D、JSP |
24.以下标记中,用于定义一个单元格的是( )
A |
B、 ...
D、
25. 以下哪个标签可以实现斜体字效果?( )。
A、 C、 |
B、 D、 |
26.若要产生一个4行30列的多行文本域,以下方法中,正确的是( )。
A、
B、
C、
D、
A、type="submit" C、type="image" ? |
B、type= "reset" D、D. type="button" |
28.在HTML中使用哪个标签定义样式信息,例如字体风格、背景颜色、文本对齐方式等?( )。
A、
行内引入方式" οnclick="alert(我是行内引入方式); "> 如何创建与调用自定义名称的JavaScript函数? 使用关键词function来创建自定义函数,例如: function welcome(){ alert("Welcome to JavaScript World"); } 函数可以通过使用函数名称的方法进行调用,例如welcome() 如何使用JavaScript对浮点数进行四舍五入获取最接近的整数值? Math.round() 如何使用JavaScript查找第一个出现的段落元素 ? 使用var p = document.getElementsByTagName(“p”)方法先获取全部的段落元素 ,其中第一个出现的段落元素 就是p[0] 构成 CSS 盒模型的属性有哪些?
请分别说出下列内容中变量x运算结果。
18 99 99
var str1,str2,str3,str4; str1="10.5"; str2="8"; str3=str1+str2; alert(str3); str4=Number(str1)+Number(str2); alert(str4); 运行以上程序后,弹出的对话框依次输出的值为10.58和18.5.
var x=prompt(“请输入1-5的数字!”,“”); switch (x) case “1”:alert(“one”); case “2”:alert(“two”); case “3”:alert(“three”); case “4”:alert(“four”); case “5”:alert(“five”); default:alert(“none”); 运行以上程序,在提示对话框中输入“4”,依次弹出的对话框将输出:four,five,none
var x,y; x=10; y=x++; 运行以上程序后,变量y的值为10
写出HTML、CSS、JavaScript三大部分程序注释的方法。
/*多行注释 location对象中可实现重新链接到其他网址的属性或方法
如何将指定元素设置为允许放置元素的目标区域? 作为可放置区域的元素必须带有ondragover事件 在进行本地文件的拖放时,DataTransfer对象中的哪个属性可以用于获取文件列表? 放置文件时使用DataTransfer对象的files属性可获取文件列表,里面包含所有文件。 按钮标签 有三种类型,分别是提交(submit)、重置(reset)或无动作按钮(button)类型。 提交(submit)用于提交表单数据;重置(reset)用于重置表单填写的内容;无动作按钮(button)本身没有任何动作,需要配合JavaScript代码使用。 标签的method属性可以取哪些属性值?分别表示什么含义? 表单的method属性用于规定了发送表单数据的两种HTTP方法:GET和POST方法。其中表单标签默认的提交方式为GET方法 GET方法:提交表单数据时,GET方法会将表单组件的数据名称和值转换为文本形式的参数并直接加原URL地址后面,点击提交按钮后可以直接从浏览器地址栏看到全部内容。这种方式适用于传递一些安全级别要求不高的数据,并且有传输大小限制,每次不能超过2KB。 POST方法:这种方法传递的表单数据会放在HTML的表头中,不会出现在浏览器地址栏里,用户无法直接看到参数内容,适用于安全级别相对较高的数据。并且对于客户端而言没有传递数据的容量限制,完全取决于服务器的限制要求,总体来说传输的数据量比GET方法大。 history对象中能实现网页后退效果的方法
//history.forward()是前进 HTML5中列表标签有哪些,它们之间有什么区别(列表标签的类型 包括有序标签,无序标签和定义列表标签三种。
CSS背景图像的平铺方式
如何使用CSS为列表选项设置自定义标志图标?
如何使用CSS实现表格为单线条框样式?
简述html文档基本结构 一个完整的HTML文件包含头部和主体两个部分的内容,在头部内容里,可定义标题、样式等,文档的主体内容就是要显示的信息。 标记通常会作为HTML文档的于千始代码,出现在文档的第一句,而标记通常作为HTML文档的结束代码,出现在文档的尾部,其他的所有的HTML代码都位于这两个标记之间,该标记用于告知浏览器或其他程序,这是一个Web文档,应该按照HTML语言规则对文档内容的标记进行解释: .../head>是HTML文档的头部标记; 5.常用浏览器 5个 HTML5新增文档结构标签 HTML5新增的格式标签有哪些? HTML5表单新增multiple属性可以用于何种类型的标签? 该属性只适用于2种类型的标签:email(电子邮箱)和file(上传文件控件) HTML5表单新增width和height属性可以用于何种类型的标签? width和height属性只能用于类型为image的标签。 如何使用HTML5表单新增pattern属性限制用户只允许输入6位阿拉伯数字? 关于正则表达式有多种用法,这里选择其中一种参考答案列举如下: 请输入6位数字" /> CSS颜色值表达方式 说明JavaScript中“==”和“===”的区别 例如: 要在网页中加入音乐或背景音乐,哪些标签可以实现 判断题 常见块级元素: div、form、footer、h1-h6、ol、ul、p、video 设置 display 属性为 display: block 可将元素转换为块级元素 常见行内元素: span、label、a、em、strong、img 设置 display 属性为 display: inline 可将元素转换为行内元素 常见行内块级元素: button、input、textarea、select 设置 display 属性为 display: inline-block 可将元素设置为行内块级元素 vertical-align:middle 只适用于内联元素的垂直居中(在需垂直居中的元素中设置) text-align:center 用于设置文本或img标签等一些内联对象(或与之类似的元素)的水平居中(在容器盒子中设置)。 margin:0 auto 设置块元素(或与之类似的元素)的居中。 background-position:100%0%是右上 margin-left:10px; 左外边距 margin-right:10px; 右外边距 margin-top:10px; 上外边距 margin-bottom:10px; 下外边距 margin:10px; 四边统一外边距 margin:10px 20px; 上下、左右外边距 margin:10px 20px 30px; 上、左右、下外边距 margin:10px 20px 30px 40px; 上、右、下、左外边距 〈table border=#〉 a:link,定义正常链接的样式 a:visited,定义已访问过链接的样式 a:hover,定义鼠标悬浮在链接上时的样式 a:active,定义鼠标点击链接时的样式 鼠标移过事件:onmouseout 鼠标移出事件:onmouseover 当输入焦点转移到 input 输入框时,将触发对象的 onFocus 事件 当输入焦点移出 input 输入框时,将触发对象的 onBlur 事件 标签的左边界为5px margin:0 5px margin:0 0 0 5px; 和之间添加映射区域,添加映射区域时使用标记符 编程题 用js计算正方形的面积
function area(radius) { var radius = document.getElementById("radius").value;//获取正方形的边长 var area = Math.pow(radius, 2);//计算正方形的面积 return area; } function show() { //输出正方形的面积 document.getElementById("area").value = area(radius); }
计算正方形的面积 正方形的边长: 正方形的面积: 计算" οnclick="show()" /> 重置" />
1.使用JavaScript脚本在页面上输出一个用#填充的正方形,要求如下。 (1)使用prompt()方法,让用户输入正方形的行数。 (2)无论输入的正方形行数是否大于10,输出的正方形最多为10行。 页面效果如图所示:
var n = prompt("请输入正方形的行数:", ""); for (var i = 0; i <= n - 1; i++) { for (var j = 0; j <= n - 1; j++) { if (n > 10) { n = 10 document.write(" # "); } else { document.write(" # "); } } document.write(" }
请设计一个内部超链接,显示的效果如下图所示。点击目录中的章节,就会跳转到内容章节。
内部超链接的应用 目录 HTML5 HTML5 CSS
请使用JavaScript语句设计代码实现弹出框效果,并且显示今天是星期几。其中请使用getDay()方法获取当前的日期
var a = new Array("日", "一", "二", "三", "四", "五", "六"); var week = new Date().getDay(); var str = "今天是星期" + a[week] +"。"; alert(str);
用Switch语句判断今天是星期几
使用switch语句判断今天是星期几。 //获取当前日期时间对象 var date = new Date(); //获取当前是一周中的第几天(0-6) var day = date.getDay(); //使用switch语句判断星期几 switch (day) { case 1: alert("今天是星期一。"); break; case 2: alert("今天是星期二。"); break; case 3: alert("今天是星期三。"); break; case 4: alert("今天是星期四。"); break; case 5: alert("今天是星期五。"); break; case 6: alert("今天是星期六。"); break; case 0: alert("今天是星期日。"); break; }
用if-else语句判断今天星期几
使用if-else if-else语句判断今天是星期几。 //获取当前日期时间对象 var date = new Date(); //获取当前是一周中的第几天(0-6) var day = date.getDay(); //使用if语句判断星期几 if (day == 1) { alert("今天是星期一。"); } else if (day == 2) { alert("今天是星期二。"); } else if (day == 3) { alert("今天是星期三。"); } else if (day == 4) { alert("今天是星期四。"); } else if (day == 5) { alert("今天是星期五。"); } else if (day == 6) { alert("今天是星期六。"); } else if (day == 0) { alert("今天是星期日。"); }
11.请编写代码实现按钮点击效果,例如今天是星期五,通过点击按钮显示如下。 点击这里 function myFunction() { var d = new Date(); var weekday = new Array(); weekday[0] = "星期天"; weekday[1] = "星期一"; weekday[2] = "星期二"; weekday[3] = "星期三"; weekday[4] = "星期四"; weekday[5] = "星期五"; weekday[6] = "星期六"; document.getElementById("demo").innerHTML = "今天是" + weekday[d.getDay()]; }
3.用switch函数编写JavaScript代码显示今天的星期名称。请注意使用Sunday=0, Monday=1, Tuesday=2, 等等。 var day = new Date().getDay(); switch (day) { case 0: x = "Today it's Sunday"; break; case 1: x = "Today it's Monday"; break; case 2: x = "Today it's Tuesday"; break; case 3: x = "Today it's Wednesday"; break; case 4: x = "Today it's Thursday"; break; case 5: x = "Today it's Friday"; break; case 6: x = "Today it's Saturday"; break; } 4.编写JavaScript在页面上弹出提示,根据每个用户输入的星期一至星期日的不同,弹出不同的信息。要求如下。 输入星期一时弹出“新的一周开始了” 输入星期二,星期三,星期四时弹出“努力学习吧!!” 输入星期五时弹出“明天就是周末了” 输入其他内容时弹出“放松休息” var n = window.prompt("请输入今天是星期几:"); switch (n) { case "星期一": window.alert("新的一周开始了"); break; case "星期二": window.alert("努力学习吧!!"); break; case "星期三": window.alert("努力学习吧!!"); break; case "星期四": window.alert("努力学习吧!!"); break; case "星期五": window.alert("明天就是周末了"); break; case "星期六": window.alert("放松休息"); break; case "星期日": window.alert("放松休息"); break; default: window.alert("输入的星期有误!"); break; } 请设计代码实现如下效果。其中黄色的框为p元素,宽度和高度为100px,五角星图标的路径为“image/star.jpg”
p { width: 100px; /*设置段落元素宽100像素*/ height: 100px; /*设置段落元素高100像素*/ background-color: yellow; /*设置段落元素背景色为黄色*/ }
这是一个可拖放的段落元素。 function drag(ev) { var img = new Image(); img.src = "image/star.jpg"; ev.dataTransfer.setDragImage(img, 5, 5); }
JS求出100-999之间的水仙花数(一行显示三个)
var j = 0 for (let i = 100; i < 1000; i++) { let ge = parseInt(i % 10); let shi = parseInt((i / 10) % 10); let bai = parseInt(i / 100); if (i == ge * ge * ge + shi * shi * shi + bai * bai * bai) { document.write(i + ' '); j++; if (j % 3 == 0) { document.write(' } } }
HTML显示3行3列的表格
表格标签的综合应用 成绩一览表
隐藏单元格边框效果
table { empty-cells: hide; }
问卷表格
问卷调查:您是通过何种方式了解XX产品? 朋友宣传 朋友宣传 朋友宣传 朋友宣传
2.在页面上编程输出0~100之间的所有素数,并要求每行显示5个素数。(素数一般指质数。质数是指在大于1的自然数中,除了1和它本身以外不再有其他因数的自然数)
document.write(' var num = 0; for (var i = 2, flag; i <= 100; i++) { flag = false; for (var j = 2; j < i; j++) { if (i % j === 0) { flag = true; break; } } if (!flag) { if (num != 0 && num % 5 == 0) { document.write(' } num++; document.write(' } } document.write('
6.请用JavaScript实现下面九九乘法表的效果。
for (var i = 1; i <= 9; i++) { for (var j = 1; j <= i; j++) { document.write(j + "x" + i + "=" + j * i, " ") } document.write(" }
7.编写JavaScript代码,实现交换两个变量的值。 //定义两个变量num1,num2,分别赋值5,6 var num1 = 5, num2 = 6; //在定义一个临时变量tmp var tmp; //将num1的值赋值给tmp tmp = num1; //num2的值赋值给num1 num1 = num2; //tmp的值赋值给num2 num2 = tmp; //打印输出 console.log(num1, num2); 8.使用JavaScript,实现 fizzBuzz 函数,参数 num 与返回值的关系如下: 如果 num 能同时被 3 和 5 整除,返回字符串 fizzbuzz 如果 num 能被 3 整除,返回字符串 fizz 如果 num 能被 5 整除,返回字符串 buzz 如果参数为空或者不是 Number 类型,返回 false 其余情况,返回参数 num function fizzBuzz(num) { if (num % 3 === 0 && num % 5 === 0) { return 'fizzbuzz'; } else if (num % 3 === 0) { return 'fizz'; } else if (num % 5 === 0) { return 'buzz'; } else if (num === null | typeof (num) != 'number') { return false; } else { return num; } } 10.编写一个函数 Min(x.y),求出x.y两个数中的最小值,要求x,y的值由用户通过提示对话框输入。 var x = prompt('输入数x'); var y = prompt('输入数y'); function min(x, y) { if (x < y) { console.log('最小值为' + x); } else if (x > y) { console.log('最小值为' + y); } } min(x, y);
|