前端刷题 Day1

Posted 2022-05-30 白瑕

文章目录

• 前言
• 一、HTML
• • HTML5 中不再支持下面哪个元素？
  • html5的跨文档消息传输说法错误的是：
  • 属于HTML5标签语意化的元素有 ()
• 二、CSS
• • 1.关于 link 和 @import 区别说法错误的是（）
  • 下面哪些技术可用于优化 CSS 图片加载
  • 关于浮动元素，下面说法错误的是()
• 三、JS
• • 请问以下JS代码的输出结果以及变量i的值是？
  • 下列哪几项可以创建函数？

---

前言

一年多的学习, 我暴露出一个大缺点, 基础不扎实 ,而且我发现我对算法…那是相当的不敏感啊…希望多做题能够有所改善.
定个小目标, 每天刷html，CSS，JS各十道(太多怕是坚持不下去啊).
我会把每天的错题记在这里, 当然, 也包括那些有意义的题.

---

一、HTML

HTML5 中不再支持下面哪个元素？

1. <cite>
2. <acronym>
3. <abbr>
4. <base>
5. 选B， 我选了C
   这个我是真的一个都不认识。。。
   <cite>:用来定义作品的标题；
   <abbr>:用来指示标签简写；
   <base>:为页面上的所有的相对链接规定默认URL或者默认目标；
   <arconym>已经抛弃。

html5的跨文档消息传输说法错误的是：

1. 可以实现同域内的 web 页面之间可以互相通信
2. 缺点是不能实现跨域通信
3. 可以相互传递字符串和对象
4. 使用这个功能，需要获取到网页所在窗口对象的实例
   选B, 我选了D
   还是没听说过这个.
   h5提供了网页文档之间发送信息和互相接收的功能。使用这个功能，只要获得网页窗口所在对象的实例，即可以同域（端口号+域）可以相互通信，跨域也可以相互通信。

属于HTML5标签语意化的元素有 ()

1. article、footer
2. block
3. section、banner
4. header、nav
   选AD, 我选了ACD
   没有banner这个标签.

二、CSS

1.关于 link 和 @import 区别说法错误的是（）

1. link 是 XTHML 标签，无兼容问题
2. 两者均属于 CSS 范畴
3. link 可以使用 javascript 控制 DOM 改变样式，@import 不支持
4. link 引用 CSS 时，页面加载同时加载样式，@import 需要页面完全载入以后加载
   选B，
   link除了引用样式还可以引用其他的资源文件， 而@import只能引用样式；
   link不存在兼容性问题， @import是css2.1新增， 仅在IE5以上支持；
   link引用CSS时，在页面载入时同时加载，@import需要页面网页完全载入以后加载；
   link支持使用Javascript控制DOM去改变样式，@import不支持；

下面哪些技术可用于优化 CSS 图片加载

1. CSSSprite
2. SVGSprite
3. Iconfont
4. Base64
   选ABCD。。。。
   CSSSprite：精灵图、雪碧图，将一个页面涉及到的所有零星图片都包含到一张大图中去，当访问页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示。减少网页http请求提高页面性能。
   SVG Sprite：与雪碧图类似。另外一种实现思路 + 。用于定义可复用的形状，定义的现状不会展示出来，而是通过use元素引用来显示
   Icon font图标字体，也叫字体图标，就是字体做的图标。能自由变化大小，且不会模糊。比图片小，加载快。可以任意改变颜色。
   Base64: 将图片数据编码成字符串，使用该字符串代替图像地址。图片的下载始终都要向服务器发出请求，而通过base64编码后可以随着 HTML的下载同时下载到本地，减少 http 请求。

关于浮动元素，下面说法错误的是()

1. 如果有多个浮动元素，浮动元素会按顺序排下来而不会发生重叠的现象
2. 浮动元素会尽可能地向顶端对齐、向左或向右对齐
3. 如果有非浮动元素和浮动元素同时存在，并且非浮动元素在前，则浮动元素不会高于非浮动元素
4. 行内元素与浮动元素发生重叠，其边框，背景和内容都会显示在浮动元素之下

选D，我选了C

1. 行内元素与浮动元素发生重叠，边框、背景、内容都会显示在浮动元素之上
2. 块级元素与浮动元素发生重叠，边框、背景会显示在浮动元素之下，内容会显示在浮动元素之上
3. 若不浮动的是块级元素，那么浮动的元素将显示在其上方
4. 若不浮动的是行内元素或者行内块元素，那么浮动的元素不会覆盖它，而是将其挤往左方

三、JS

请问以下JS代码的输出结果以及变量i的值是？

var i = 100;
function foo() 
    bbb: try 
        console.log("position1");
        return i++;  
    finally 
        break bbb;
    
    console.log("position2");
    return i;

foo();

1. position1、position2、100
2. position1、position2、101
3. position1、101
4. 100
   选B, 我选了C
   常用的是try-catch语句, 还有一种try-finally的组合, 这种组合与try-catch的区别是, finally中的语句是必执行的, 在try结束后必执行finally, 有finally需要执行的情况下try也不会因为return或者break导致跳出.
   finally里如果return, try-catch结构之外的return将都不执行.
   但是本题在finally中break:

bbb: try 
        console.log("position1");
        return i++;  
    finally 
        break bbb;
    

break: xxx, 意思是跳出"xxx"代码块, 这里也就是跳出bbb代码块即跳出try-finally, 而使用break进行跳出并不会导致后续代码无法执行, 所以"position2"可以正常输出.

下列哪几项可以创建函数？

1. function=myFunction()………
2. function myFunction()……
3. myfunction = function()…….
4. myFunction()….
   答案BC, 我选了BCD
   D选项声明的是"方法", 其实我一直不是很清楚"函数", "方法"的区别, 很多时候都在混着称呼, 想称呼函数的时候就称呼函数, 想称呼为方法就称呼方法.
   虽然我知道这俩是真的有区别, 但是并不能说清区别在何处.
   函数（function）是可以执行的javascript代码块，由javascript程序定义或javascript实现预定义。函数可以带有实际参数或者形式参数，用于指定这个函数执行计算要使用的一个或多个值，而且还可以返回值，以表示计算的结果。
   方法（method）是通过对象调用的javascript函数。也就是说，方法也是函数，只是比较特殊的函数。假设有一个函数是fn，有一个对象是obj，那么就可以定义一个method。

函数是一段代码，通过名字来进行调用。它能将一些数据（参数）传递进去进行处理，然后返回一些数据（返回值），也可以没有返回值。
所有传递给函数的数据都是显式传递的。
方法也是一段代码，也通过名字来进行调用，但它跟一个对象相关联。方法和函数大致上是相同的，但有两个主要的不同之处：
方法中的数据是隐式传递的。
方法可以操作类内部的数据。（对象是类的实例化，类定义了一个数据类型，而对象是该数据类型的一个实例化）

方法和对象相关；
函数和对象无关。

---