HTML,CSS,JS练习题

1.与其他 IEEE 754 表示浮点数的编程语言一样,JavaScript 的 number 存在精度问题,比如 0.2 + 0.4 的结果是 0.6000000000000001。以下选项中,能得到 0.6 的是?
A.parseFloat(0.2 + 0.4)
B.parseFloat((0.2 + 0.4).toFixed(1))
C.Math.round(0.2 + 0.4)
D.parseFloat((0.2 + 0.6).toPrecision(1))

1.parseFloat 解析一个字符串,并返回一个浮点数
2.toFixed 把数字转换为字符串,结果的小数点后有指定位数的数字
3.Math.round 把一个数字舍入为最接近的整数
4.toPrecision 把数字格式化为指定的长度
对应数据
A 0.6000000000000001
B 0.6
C 1
D 0.8

// parseFloat(),解析一个字符串,并返回一个浮点数。
// toFixed把数字转换为字符,结果的小数点后有指定位数的数字,按四舍五入取值
var num = new Number(15.7857);
var a = num.toFixed(); //16 无参数,表示小数点后面位数为0位,然后四舍五入
var b = num.toFixed(1);//15.8
var c = num.toFixed(3);//15.786
var d = num.toFixed(10);  //多出的补0
 
//toPrecision()把数字格式化为指定长度
var f = num.toPrecision();//15.7857,无参数,返回原数字
var g = num.toPrecision(1);//2e+1,参数小于整数部分位数,返回科学计数
var h = num.toPrecision(3);//15.8,也是有四舍五入
var i = num.toPrecision(10);//15.78570000,长度不够补0

2.以下js操作Array的方法中不能添加元素的是:()
A.push
B.pop
C.unshift
D.splice
考察数组Array的方法


Array方法.png

3.关于 HTML ,以下说法错误的是:
A.<!DOCTYPE> 声明位于文档中的最前面,处于 <html> 标签之前。告知浏览器以何种模式来渲染文档。
B.HTML 语义化良好的页面丢失样式时也能呈现出清晰的结构。
C.HTML 语义化良好的页面有助于 SEO。
D.推荐使用 section 元素代替 article 元素及 nav 元素。

SEO是搜索引擎的英文缩写,中文译为“搜索引擎优化”。在了解搜索引擎自然排名机制的基础上,对网站进行内部及外部的调整优化,改进网站在搜索引擎中的关键词自然排名,获得更多流量,从而达成网站销售及品牌建设的预期目标。
在HTML5中,article元素可以看成是一种特殊类型的section元素,它比section元素更强调独立性。即section元素强调分段或分块,而article强调独立性。具体来说,如果一块内容相对来说比较独立的、完整的时候,应该使用article元素,但是如果你想将一块内容分成几段的时候,应该使用section元素。
4.如果需要匹配包含文本的元素,用下面哪种方法来实现?
A.text()
B.contains()
C.input()
D.attr(name)
text()是jQuery中的方法,可是设置或返回被选元素的文本内容
contains()选择器,选取包含指定字符串的元素,字符串也可以是文本
input()选择器,选取表单元素
attr(name,value)属性操作,设置或返回被选元素的属性和属性值
本题选B
5.哪个元素表示外部资源? 外部资源由 元素表示,该元素可以被视为图像、嵌套的浏览上下文或插件要处理的资源。它包括各种属性,如存档、边框、分类、代码库、代码类型等

正确答案: A 你的答案: A (正确)
A.<object>
B.<source>
C.<param>
D.<picture>

1.外部资源由 <object> 元素表示,该元素可以被视为图像、嵌套的浏览上下文或插件要处理的资源。它包括各种属性,如存档、边框、分类、代码库、代码类型等。
2.<source> 元素为 <audio>、<video> 和 <picture> 元素指定多个媒体资源
3.param 元素允许您为插入 XHTML 文档的对象规定 run-time 设置,也就是说,此标签可为包含它的 <object> 标签提供参数。
6.以下哪些方法可以优化滚动性能:ABCD
A.在滚动中对滚动函数进行节流处理
B,滚动中减少导致重绘的操作
C,滚动中减少导致重排的操作
D,通过给滚动内的子元素开启硬件加速
7.以下关于History对象的属性或方法描述正确的是(BCD )
A.go表示刷新当前页面。
B.back回到浏览器载入历史URL地址列表的当前URL的前一个URL。
C.forward转到浏览器载入历史URL地址列表的当前URL的下一个URL。
D.length保存历史URL地址列表的长度信息。

length 返回浏览器历史列表中的URL数量
back() 加载 history 列表中的前一个URL
forward() 加载 history 列表中的下一个URL
go() 加载history列表中的某个具体页面。
8.setTimeout(“go()”, 10);表示的意思是()
A.间隔10秒后,go()函数执行一次
B.go()函数持续调用10次
C.间隔10毫秒后,go()函数执行一次
D.间隔10分钟后,go()函数执行一次

setTimeout()方法接收两个参数,第一个参数可以是包含JavaScript代码的字符串,或者是一个函数。第二个参数表示等待多长时间的毫秒数将当前任务添加到队列中。
所以:
setTimeout(“go()”, 10); //等待10毫秒执行go函数
setTimeout(go, 10); //等待10毫秒执行go函数
setTimeout(go(), 10); //立即执行go函数

关于引号问题:
带引号,该方法在全局环境中寻找;
不带引号,该方法在局部环境中寻找。

(function () {
  function fn() {
    alert(2)
  }
  setTimeout('fn()', 1000); // 全局变量 打印1
  setTimeout(fn, 1000); // 局部变量 打印2
})()
 
function fn(){
  alert(1)
}

9.下面语法中,哪个可以定义一个带正方形的列表? ()
list-style-image: square
list-style-color: square
list-type: square
list-style-type: square


list.png

10.以下全部属于块级标签的是?
正确答案: D 你的答案: D (正确)
<div><p><input><span><img>
<div><h1><p><img><dl>
<span><h1><p><img><dl>
<div><p><form><ul><h1>


元素分类.png

11.如下代码输出的结果是什么:

console.log(1+ "2"+"2");
console.log(1+ +"2"+"2");
console.log("A"- "B"+"2");
console.log("A"- "B"+2);

A.122
122
NaN
NaN
B.122
32
NaN
NaN2
C.122
32
NaN2
NaN
D.122
32
NaN2
NaN2

console.log(1+ "2"+"2");

做加法时要注意双引号,当使用双引号时,JavaScript认为是字符串,字符串相加等于字符串合并。
因此,这里相当于字符串的合并,即为122.

console.log(1+ +"2"+"2");

第一个+"2"中的加号是一元加操作符,+"2"会变成数值2,因此1+ +"2"相当于1+2=3.
然后和后面的字符串“2”相合并,变成了字符串"32".

console.log("A"- "B"+"2");

"A"-"B"的运算中,需要先把"A"和"B"用Number函数转换为数值,其结果为NaN,在剪发操作中,如果有一个是NaN,则结果是NaN,因此"A"-"B"结果为NaN。
然后和"2"进行字符串合并,变成了NaN2.

console.log("A"- "B"+2);

根据上题所述,"A"-"B"结果为NaN,然后和数值2进行加法操作,在加法操作中,如果有一个操作数是NaN,则结果为NaN。

12.关于下述代码所实现的功能,以下说法正确的是( )。

<div>
 <input type="button" id ="button1" value="1" onclick="moveBtn(this);">
 <input type="button" id ="button2" value="2" />
 </div>
 <script type="text/javascript">
 function moveBtn(obj) {
 var clone = obj.cloneNode(true);
 var parent = obj.parentNode;
 parent.appendChild(clone);
 parent.removeChild(obj);
 }
 </script>

A.鼠标单击Button1后将Button1链接到Button2的后面
B.鼠标单击Button1后将Button1移动到Button2的后面
C.鼠标单击Button1后将Button2移动到Button1的后面
D.鼠标单击Button1后将Button2链接到Button1的后面

<div>
 <input type="button"id ="button1"value="1"onclick="moveBtn(this);">
 <input type="button"id ="button2"value="2"/>
 </div>
 <script type="text/javascript">
 function moveBtn(obj) {
     var clone = obj.cloneNode(true); // 复制一个button1结点
     var parent = obj.parentNode; // 找到button1的父节点
     parent.appendChild(clone); // 将复制的结点加入到父节点,也就是button1的复制结点现在在button2后面了
     parent.removeChild(obj); // 移除原来的button1
 }
 </script>

所以最终达到的效果,就是把button1结点移到button2结点后面

13.假设有如下代码,那么a(10)的返回结果是?(A )

function a(a)
{
  a^=(1<<4)-1;
   return a;
}
A.5
B.10
C.15
D.16

1<<4 左移相当于1*2^4=16
a^=16-1=15
a=a15=1015
^ 异或运算:
10的二进制00001010
15的二进制00001111
========>00000101 转成十进制:5
(按位异或运算,同为1或同为0取0,不同取1)

14.以下代码执行后, num 的值是?

var foo=function(x,y){
return x-y;
}
function foo(x,y){
return x+y;
}
var num=foo(1,2);

正确答案: A 你的答案: B (错误)
-1
3
1
2
规则

  1. 变量声明、函数声明都会被提升到作用域顶处;
  2. 当出现相同名称时,优先级为:变量声明(foo#1) < 函数声明(foo#2) < 变量赋值(foo#3)

因此,num计算时是用的foo#3。答案为-1。

15.向当前#list的最后元素之后添加100个新的li节点,合理的操作方式是?
正确答案: D 你的答案: C (错误)
A.通过循环方式创建新的li节点,并依次添加到#list中
B.先将#list节点的display设置为none,通过循环方式创建新的li节点,并依次添加到#list中,最后再将#list节点的display设置为block
C.取出#list中现有的li节点的html,将它与新增的li节点对应的html代码拼接成字符串,一次性插入到#list中
D.创建Fragment,通过循环方式创建新的li节点,添加到Fragment中,最后再将Fragment添加到#list中

合理的方式应当是在保证性能的同时避免安全问题。
A 显然不行,每次插入都会触发重绘和重排;
B 也不行,虽然因为隐藏避免了重绘,但因为没有脱离文档流,每次插入时重排还是会发生;
CD 可能有争议,因为都只会触发一次重绘和重排。按理来说直接操作HTML是性能最好的手段,因为就是一个简单的字符串操作,但是可能存在XSS攻击的风险,就不如 Fragment 安全。

createdocumentfragment()方法创建了一虚拟的节点对象,节点对象包含所有属性和方法。
当你想提取文档的一部分,改变,增加,或删除某些内容及插入到文档末尾可以使用createDocumentFragment() 方法。
你也可以使用文档的文档对象来执行这些变化,但要防止文件结构被破坏,createDocumentFragment() 方法可以更安全改变文档的结构及节点。
估计是因为createDocumentFragment() 方法可以更安全改变文档的结构及节点。所以答案才会是D吧
16.哪个 HTML5 内建对象用于在画布上绘制?
getContext用于在画布上绘制

16.对于代码 var a = 10.42; 取出 a 的整数部分,以下代码哪些是正确的?
正确答案: A B 你的答案: C (错误)
A.parseInt(a);
B.Math.floor(a);
C.Math.ceil(a);
D.a.split('.')[0];
A. parseInt转换为整数,默认为10进制,结果为10
B. floor向下取整,结果为10
C. ceil向上取整,结果为11
D. split操作数必需为正则或字符串,结果为TypeError

17.以下哪些语句触发了隐式的类型转换?
正确答案: A B D 你的答案: D (错误)
A.parseInt(12.34, 10)
B.0 ? 1 : 2
C.2e1 * 0xaa
D.1 + '1'

答案:ABD
parseInt() 函数可解析一个字符串,并返回一个整数。
所以说,number类型的12.34发生隐式转换为string。
三元运算符,会判断?前的表达式为true或者false。所以number类型的0发生了隐式转换为boolean。
+运算发生了字符串的隐式转化。原本number类型的1,和string类型的'1'进行了+运算,连接了字符串。返回'11'。
C选项:
e是js里面指数的一种表示形式。也就是10的多少次方。
2e1 等价于 2 *(10^1) = 20
2e2 等价于 2 (10^2)= 200
0xaa是16进制的表示方法。相当于十进制的170。
这里都是number类型,发生了数字的乘法运算:20
170,没有发生类型转换。

18.以下哪些CSS颜色表示红色?
正确答案: A B C D 你的答案: A C (错误)
A.red
B.#f00f
C.rgb(100%,0%,0%)
D.hsl(0, 100%, 50%)

1、颜色名
如:red,blue,green
2、十六进制(红绿蓝)

f00、#ff0000表示红色

一般为3或者6位数字,题目4位
4位的十六进制中前3位表示rgb三颜色,最后一位表示透明度。 换句话说,4位的十六进制颜色代码里的每一位其实就分别代表了rgba里的r,g,b,a。本题的#f00f,其实等于rgba(255, 0, 0, 1)
3、rgb(r,g,b)
如:rgb(255,0,0)表示红色
4、hsl(Hue,Saturation,Lightness)/(色调、饱和度、亮度)
hsl(0,100%,100%)
0:红色
120:绿色,
240: 蓝色

19.以下结果里,返回 false 的是?
正确答案: A C 你的答案: A C D (错误)
A.[] == true
B.!![]
C.NaN == NaN
D.null == undefined
符号==存在隐式类型转换,会把空数组[]转换成数字0,true转换成数字1,所以两者比较返回false。
null, undefined不会再进行转换,但null == undefined 是true;
[ ]不转换是true: if([]) 是 true ;
[ ]隐式转换成0, if(0) 是 false ;

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 205,132评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,802评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,566评论 0 338
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,858评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,867评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,695评论 1 282
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,064评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,705评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 42,915评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,677评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,796评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,432评论 4 322
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,041评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,992评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,223评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,185评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,535评论 2 343

推荐阅读更多精彩内容

  • 1.给出一个数组,求出数组中总成绩和平均成绩,数组在图里; 2.给出一个数组,随机出来数组中3个内容,数组如下图;...
    含含要暴怒阅读 1,600评论 0 1
  • HTMl,CSS,JAVASCRIPT(HTMl书写网页内容,CSS用来修饰网页效果,JS添加网页功能) HTML...
    AAnna珠阅读 490评论 0 0
  • 1.行级元素有哪些?块级元素有哪些?行级元素如何转换成块级元素? block元素的特点: 1.总在新行开始,2.高...
    我的天气很好啦阅读 1,521评论 2 9
  • 讲述一下标准的CSS的盒子模型? 标准的css盒子模型:他的宽度=内容的宽度+边框的宽度+加上内边具的宽度 比如:...
    is_ygm阅读 1,375评论 0 2
  • 一 HEML简要分析 1.HTML介绍 HTML:超文本标记语言,主要作用是用来编写网站页面。 超文本:文本是含有...
    我是李楠啊阅读 614评论 0 4