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
规则
- 变量声明、函数声明都会被提升到作用域顶处；
- 当出现相同名称时，优先级为：变量声明(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类型，发生了数字的乘法运算：20170，没有发生类型转换。
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 ;
