您的位置: 首页  >  文章  >  前端习题总结

前端习题总结

分类: 文章 • 2024-07-15 13:16:16

哪一个不是浏览器默认的天生inline-block标签（拥有内在尺寸，可设置高宽，不会自动换行）？

1.常见的块级元素(自动换行， 可设置高宽 )有：
       div,h1-h6,p,pre,ul,ol,li,form,table,label等
2。常见的行内元素（无法自动换行，无法设置宽高）有：
       a,img,span，i（斜体）,em（强调）,sub(下标)，sup（上标）等。
3.常见的行块级元素(拥有内在尺寸，可设置高宽，不会自动换行 )有：
     (button,input，textarea,select), img等
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
4.label元素不会是浏览器默认的行块级元素，实践出真知
   图1： input默认情况下可以设置可设置高宽，不会自动换行。但是label并没有变化（为了看的更加明显，所以给label加了边框）。
前端习题总结 
 图2：手动设置label的display属性为inline-block，才能实现可设置高宽，不会自动换行的效果。
前端习题总结

HTML中的标签分为闭合标签和自闭合标签。 自闭合标签有

  1. 简洁的 DOCTYPE HTML5 只需一个简洁的文档类型：<!DOCTYPE html>。它有意不使用版本，因此文档将会适用所有版本的HTML。
  2. 简单易记的语言标签 你并不需要在 <html> 中使用 xmlns 或 xml:lang 标记。 <html lang=”en”> 将对 HTML5 有效。
  3. 简单易记的编码类型 你现在可以在 meta 标签中使用 “charset”：<meta charset=”utf-8″ />
  4. 不需要闭合标签 在 HTML5 中，空标签（如：br、img 和 input ）并不需要闭合标签。
  5. 新增标签 新增的语义化标签 
    header, hgroup, nav, section, article, details, figure, figcaption, aside, time, mark, audio, video, source, track, bdi, canvas, command, datalist, summary, embed, ******, meter, output, progress, rp, rt, ruby,
  6. 废弃的标签 下面这些标签并不被 HTML5 支持： <acronym>、<applet>、<basefont>、<big>、<center>、<dir>、<font>、<frame>、<frameset>、<noframes>、<s>[删除线]、<strike>[删除线]、<tt>[定义打字机文本]、<u>[下划线文本]; 和 <xmp>[和pre类似];
  7. 新增属性 在 HTML5 中，增加了很多form表单属性，当然还有其他属性。 
    required, from, pattern, placeholder, email, range[min, max, step], url, date, time, datetime, datetime-local, month, week, tel, number, search, --, contentcontenteditableable, contextmenu, data-yourvalue, draggable, item, itemprop, spellcheck, subject


下述有关border:none以及border:0的区别，描述错误的是？ 

 1.效果
   border-style:none;//无边框         
   border-width:0;//边框宽度为0px  
 2.区别
 （1）性能差异
    border:0;浏览器对border-width、border-color进行渲染，占用内存。
    border:none;浏览器不进行渲染，不占用内存。
  Chrome：
  border:none;>> border:initial none initial;
  border:0;>> border:0 initial  initial ;
  Firefox、360：
  border:none; >>border:medium none;
  border:0;>> border:0 none;
 计算出的样式：
 border:0px none 元素color属性值;
 （2）浏览器兼容
   IE7-不支持border:none;
   W3C提示：请始终把border-style属性声明到border-color属性之前，元素必须在改变颜色之前获得边框。


对于border-radius

Internet Explorer 9+ 支持 border-radius 和 box-shadow 属性。

Firefox 、 Chrome 以及 Safari 支持所有新的边框属性。

注释：对于 border-image ， Safari 5 以及更老的版本需要前缀 -webkit- 。

Opera 支持 border-radius 和 box-shadow 属性，但是对于 border-image 需要前缀 -o-
前端习题总结


假设一个搜索结果展示页面，需要把搜索关键词高亮显示

<mark> 标签定义带有记号的文本。请在需要突出显示文本时使用 <m> 标签。 <em> 把文本定义为强调的内容。 <strong> 把文本定义为语气更强的强调的内容。 <dfn> 定义一个定义项目。 <code> 定义计算机代码文本。 <samp> 定义样本文本。 <kbd> 定义键盘文本。它表示文本是从键盘上键入的。它经常用在与计算机相关的文档或手册中。 <var> 定义变量。您可以将此标签与 <pre> 及 <code> 标签配合使用。 <cite> 定义引用。可使用该标签对参考文献的引用进行定义，比如书籍或杂志的标题。 CSS字体加粗的方法： font-weight 属性设置文本的粗细。使用 bold 关键字可以将文本设置为粗体 highlight 该属性用来高亮显示指定的代码行。可以通过单个数字来高亮显示单行，或者传入一个类似 [1, 2, 3] 的数组来高亮显示指定的多行。

换行：

1.word-break  文字换行   http://www.w3school.com.cn/cssref/pr_word-break.asp
2. white-space  空白处换行（默认下会自动换行，nowrap即使超出了浏览器也不换行）
3.word-spacing  单词之间的间距 
 letter-spacing 字母之间的间距

js表达式返回false，比较

作比较关系时：任何类型转换number类型，true的number为1；false的number为0； boolean类型：空字符、NaN、0、空、未定义，这几个值初始值就==false undefind本身就是Null延伸出来的类型对象，undefind不能严格等于“===”Null

Promise对象只有三种状态

异步操作“未完成”（pending）
异步操作“已完成”（resolved，又称fulfilled）
异步操作“失败”（rejected）
这三种的状态的变化途径只有两种。

异步操作从“未完成”到“已完成”
异步操作从“未完成”到“失败”。
这种变化只能发生一次，一旦当前状态变为“已完成”或“失败”，就意味着不会再有新的状态变化了。因此，Promise对象的最终结果只有两种。

异步操作成功，Promise对象传回一个值，状态变为resolved。
异步操作失败，Promise对象抛出一个错误，状态变为rejected。

下面这段javascript代码,

1
2
3
4
5
6
class="lang-js">var msg='hello';
for(var i=0; i<10; i++)
{
    var msg='hello'+i*2+i;
}
alert(msg);
最后一句alert的输出结果是？
var可以多次声明一个变量，并且没有块作用域概念，在for循环里，每次循环重新赋值，后一个循环结果会覆盖前一个，直到执行大i=9时，循环停止，msg='hello'+9*2+9='hello189'.

innerHTML

在 HTML 页面上包含如下所示的层对象，则 javascript 语句 document.getElementById(“info”).innerHTML 的值是（）
<div id=”info” style=”display:block”><p> 请填写 </p></div>
答案：<p>请填写</p>
innerHTML 属性设置或返回表格行的开始和结束标签之间的 HTML。

for-in

下列代码
1
2
3
4
5
6
7
var person={fname:"John",lname:"Doe",age:25};
var txt="";
for(x in person)
{
  txt=txt + person[x];
}
alert(txt);
输出为？
答案：JohnDoe25
for in 中 x代表key值，所以取出的值为value
for-in语句，用来枚举person对象的属性。
for-in语句能够枚举对象的自定义属性和原型链属性，而hasOwnProperty只能获取自定义的属性

javascript内置对象

JS中，可以将对象分为“内部对象”、“宿主对象”和“自定义对象”三种。
1，内部对象
js中的内部对象包括Array、Boolean、Date、Function、Global、Math、Number、Object、RegExp、String以及各种错误类对象，包括Error、EvalError、RangeError、ReferenceError、SyntaxError和TypeError。
其中Global和Math这两个对象又被称为“内置对象”，这两个对象在脚本程序初始化时被创建，不必实例化这两个对象。

2.宿主对象

宿主对象就是执行JS脚本的环境提供的对象。对于嵌入到网页中的JS来说，其宿主对象就是浏览器提供的对象，所以又称为浏览器对象，如IE、Firefox等浏览器提供的对象。不同的浏览器提供的宿主对象可能不同，即使提供的对象相同，其实现方式也大相径庭！这会带来浏览器兼容问题，增加开发难度。
浏览器对象有很多，如Window和Documen，Element，form，image，等等。

3.自定义对象
顾名思义，就是开发人员自己定义的对象。JS允许使用自定义对象，使JS应用及功能得到扩充

字符串拼接

以下为一段浏览器中可运行的Javascript 代码，则运行该段Javascript代码的页面弹出框中显示的结果是：（）
1
2
3
4
var obj = {"key":"1","value":"2"};
var newObj = obj;
newObj.value += obj.key;
alert(obj.value);

答案：21
newObj.value += obj.key; 这里是字符串拼接，obj.key为‘2’，newObj.value为‘1’,处理后就是‘21’重新赋给newObj.value，由于指向的是同一地址，所以obj.vaule也是'21'

AMD是"Asynchronous Module Definition"的缩写，意思就是"异步模块定义"。它采用异步方式加载模块，模块的加载不影响它后面语句的运行。所有依赖这个模块的语句，都定义在一个回调函数中，等到加载完成之后，这个回调函数才会运行。
AMD也采用require()语句加载模块，但是不同于CommonJS。
主要有两个Javascript库实现了AMD规范：require.js和curl.js。
参考链接：http://www.ruanyifeng.com/blog/2012/10/asynchronous_module_definition.html

AMD 是 RequireJS 在推广过程中对模块定义的规范化产出。
CMD 是 SeaJS 在推广过程中对模块定义的规范化产出。
区别：
1. 对于依赖的模块，AMD 是提前执行，CMD 是延迟执行。
2. CMD 推崇依赖就近，AMD 推崇依赖前置。
// CMD
define(function(require, exports, module) {
var a = require('./a')
a.doSomething()
// 此处略去 100 行
var b = require('./b') // 依赖可以就近书写
b.doSomething()
// ... 
})

// AMD 默认推荐的是
define(['./a', './b'], function(a, b) { // 依赖必须一开始就写好
a.doSomething()
// 此处略去 100 行
b.doSomething()
...
})


iframe可用在以下几个场景中：
1：典型系统结构，左侧是功能树，右侧就是一些常见的table或者表单之类的。为了每一个功能，单独分离出来，采用iframe。 
2：ajax上传文件。 
3：加载别的网站内容，例如google广告，网站流量分析。
4： 在上传图片时，不用flash实现无刷新。
5： 跨域访问的时候可以用到iframe，使用iframe请求不同域名下的资源。

(持续更新...)

相关推荐