前端HTML 笔试易错题 知识点

下列关于使用link和@import，说法不正确的是（）

正确答案: B 你的答案: B (正确)
页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载
link、@import均支持使用js控制DOM去改变样式
@import就只能加载CSS ，link标签还可以定义RSS等
import是CSS2.1 提出的，只在IE5以上才能被识别，而link是XHTML标签，无兼容问题

解答：

1.**从属关系区别 @import是 CSS 提供的语法规则，只有导入样式表的作用；link是HTML提供的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等。
2.加载顺序区别 加载页面时，link标签引入的 CSS 被同时加载；@import引入的 CSS 将在页面加载完毕后被加载。
3.兼容性区别 @import是 CSS2.1 才有的语法，故只可在 IE5+ 才能识别；link标签作为 HTML 元素，不存在兼容性问题。
4.DOM可控性区别 可以通过 JS 操作 DOM ，插入link标签来改变样式；由于 DOM 方法是基于文档的，无法使用@import的方式插入样式。
5.权重区别 link引入的样式权重大于@import引入的样式

在 HTML5 中，哪个元素用于组合标题元素？

正确答案: D
group
header
headings
hgroup

解答：

hgroup元素是将标题及其子标题进行分组的元素，hgroup元素通常会将h1-h6元素进行分组，比如内容区块的标题及其子元素算一组

<ul>
 <li>click me</li>
 <li>click me</li>
 <li>click me</li>
 <li>click me</li>
</ul>

var elements=document.getElementsByTagName('li');
var length=elements.length;
for(var i=0;i<length;i++){
    elements[i].onclick=function(){
    alert(i);
} }

依次点击4个li标签，哪一个选项是正确的运行结果（D）

依次弹出1，2，3，4
依次弹出0，1，2，3
依次弹出3，3，3，3
依次弹出4，4，4，4

解答：

第一种、
一般是先渲染Dom元素，然后绑定事件；所以元素渲染完后，就会立即绑定事件，即执行代码
用户触发onclick事件时，这段绑定事件的方法肯定执行完啦，此时，这个for循环是不是已经结束了呢，并且i的值是不是刚好为4，并退出了循环

第二种、
每个li标签的onclick事件执行时，
本身onclick绑定的function的作用域中没有变量i,则解析引擎会寻找父级作用域，
发现父级作用域中有i，且for循环绑定事件结束后，i已经赋值为4，所以每个li标签的onclick事件执行时，alert的都是父作用域中的i，也就是4。
这是作用域的问题。

HTML5常用新标签：

详细说明：https://zhuanlan.zhihu.com/p/25445181

关于XML和JSON区别的描述正确的是

正确答案: A B D
JSON相对于XML来讲，数据的体积小，传递的速度更快些
JSON与JavaScript的交互更加方便，更容易解析处理，更好的数据交互
JSON对数据的描述性比XML较好
JSON的速度要远远快于XML

解答：
JSON 和 XML 优缺点的比较
（1）【XML】的优缺点
优点： （1）格式统一，符合标准； （2）容易与其他系统进行远程交互，数据传输比较方便。
缺点： （1）XML文件庞大，文件格式复杂，传输占带宽；
（2）服务器端和客户端都需要花费大量代码来解析XML，导致服务器端和客户端代码变得异常复杂且不易维护；
（3）客户端不同浏览器之间解析XML的方式不一致，需要重复编写很多代码；
（4）服务器端和客户端解析XML花费较多的资源和时间。 那么除了XML格式，还有一种叫JSON

（2）【JSON】的优缺点
优点： （1）数据格式比较简单，易于读写，格式都是压缩的，占用带宽小；
（2）易于解析，客户端JavaScript可以简单的通过eval_r()进行JSON数据的读取；
（3）支持多种语言，包括ActionScript, C, C#, ColdFusion, Java, JavaScript, Perl, PHP, Python, Ruby等服务器端语言，便于服务器端的解析；
（4）在PHP世界，已经有PHP-JSON和JSON-PHP出现了，偏于PHP序列化后的程序直接调用，PHP服务器端的对象、数组等能直接生成JSON格式，便于客户端的访问提取；
（5）因为JSON格式能直接为服务器端代码使用，大大简化了服务器端和客户端的代码开发量，且完成任务不变，并且易于维护。
缺点： （1） 没有XML格式这么推广的深入人心和喜用广泛，没有XML那么通用性；
（2）JSON格式目前在Web Service中推广还属于初级阶段

向当前#list的最后元素之后添加100个新的li节点，合理的操作方式是？

正确答案: D
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 安全。

HTML5提供的数据存储有哪些？

正确答案: A B D 你的答案: A B D (正确)
localStorage
sessionStorage
cookieStorage
webStorage

HTML5中增加了两种全新的数据存储方式：WebStorage和WebSQLDatabase。
1、WebStorage可用于临时或永久保存客户端的少量数据，WebSQLDatabase是客户端本地化的一套数据库系统，可以将大量的数据保存在客户端，无须与服务器端进行交互，极大地减轻了服务器端的压力。
2、WebStorage存储是HTML5为数据存储在客户端提供的一项重要功能，分为两种：sessionStorage(保存会话数据)和localStorage(在客户端长期保存数据)。
3、 sessionStorage对象：使用sessionStorage对象在客户端保存的数据时间非常短暂，该数据实质上还是被保存在session对象中。用户在打开浏览器时，可以查看操作过程中要求临时保存的数据，一旦关闭浏览器，所有使用sessionStorage对象保存的数据将全部丢失。
4、保存：保存数据只需调用setItem()方法，格式：sessionStorage.setItem(key,value)。参数key表示被保存内容的键名，参数value表示被保存的内容。一旦键名设置成功，则不允许修改，不能重复，如果有重复的键名，只能修改对应的键值。
5、读取：读取被保存的数据，应该调用sessionStorage对象中getItem()方法，格式：sessionStorage.getItem(key)。该方法将返回一个指定键名对应的键值，如果不存在，则返回一个null值。
6、localStorage对象：长期在客户端保存数据，应该使用localStorage对象，使用该对象可以将数据长期保存在客户端，直至人工清除为止。
7、保存：保存数据调用对象中的setItem()方法，格式：localStorage.setItem(key,value)。
8、读取：与sessionStorage对象保存数据一样。 读取数据调用对象中的getItem()方法，格式：localStorage.getItem(key)。与sessionStorage对象读取数据一样。 localStorage对象可以将内容长期保9、存在客户端，即使是重新打开浏览器也不会丢失。
10、清除：如果需要清除localStorage对象保存的内容，应该调用该对象的另一个方法removeItem()，格式：localStorage.removeItem(key)。一旦删除成功，与键名对应的相应数据将全部被删除。

以下那些操作调用的是拷贝构造函数（）。

正确答案: A B

ClassA a1;
ClassA a2(a1);

ClassA a1;
ClassA a2=a1;

ClassA a1, a2;
a1 = a2;

ClassAa1 = new ClassA();
ClassAa2 = a1;

在什么情况下系统会调用拷贝构造函数：（三种情况）

（1）用类的一个对象去初始化另一个对象时

（2）当函数的形参是类的对象时（也就是值传递时），如果是引用传递则不会调用

（3）当函数的返回值是类的对象或引用时