美文网首页
HTML,CSS,JS练习题

HTML,CSS,JS练习题

作者: 小铮冲冲冲 | 来源:发表于2021-01-22 17:07 被阅读0次

    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 ;

    相关文章

      网友评论

          本文标题:HTML,CSS,JS练习题

          本文链接:https://www.haomeiwen.com/subject/mvoszktx.html