前端校招面试题目合集-day02

说说你对HTML语义化的理解?

参考答案

(1)什么是 HTML 语义化？

<基本上都是围绕着几个主要的标签，像标题（ H1~H6 ）、列表（ li ）、强调（ strong em ）等等 >

根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。

(2)为什么要语义化？

为了在没有CSS的情况下，页面也能呈现出很好地内容结构、代码结构 : 为了裸奔时好看；

用户体验：例如title、 alt 用于解释名词或解释图片信息、 label 标签的活用；

有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；

方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；

便于团队开发和维护，语义化更具可读性，是下一步网页的重要动向，遵循W3C标准的团队都遵循这个标准，可以减少差异化。

(3) 语义化标签

<header></header>

<footer></footer>

<nav></nav>

<section></section>

<article></article> SM:用来在页面中表示一套结构完整且独立的内容部分

<aslde></aside> SM:主题的附属信息 ( 用途很广，主要就是一个附属内容 ) ，如果 article 里面为一篇文章的话，那么文章的作者以及信息内容就是这篇文章的附属内容了

<figure></figure>SM:媒体元素，比如一些视频，图片啊等等

<datalist></datalist>

SM:选项列表，与 input 元素配合使用，来定义 input 可能的值

<details></details>

SM:用于描述文档或者文档某个部分的细节 ~ 默认属性为 open~

ps:配合 summary 一起使用

 

link和@import的区别?

参考答案

XML/HTML代码

<link rel='stylesheet' rev='stylesheet' href='CSS文件 ' type='text/css' media='all' />

XML/HTML代码

<style type='text/css' media='screen'>

@import url('CSS文件 ');

</style>

两者都是外部引用CSS的方式，但是存在一定的区别：

区别1： link 是 XHTML 标签，除了加载 CSS 外，还可以定义 RSS 等其他事务； @import 属于 CSS 范畴，只能加载 CSS 。

区别2： link 引用 CSS 时，在页面载入时同时加载； @import 需要页面网页完全载入以后加载。

区别3： link 是 XHTML 标签，无兼容问题； @import 是在 CSS2.1 提出的，低版本的浏览器不支持。

区别4： link 支持使用 Javascript 控制 DOM 去改变样式；而 @import 不支持。

HTML全局属性(global attribute)有哪些?

参考答案

参考资料：MDN: html global attribute或者W3C HTML global-attributes accesskey:设置快捷键，提供快速访问元素如aaa在windows下的firefox中按alt + shift + a可激活元素 class:为元素设置类标识，多个类名用空格分开，CSS和javascript可通过class属性获取元素 contenteditable: 指定元素内容是否可编辑 contextmenu: 自定义鼠标右键弹出菜单内容 data-*: 为元素增加自定义属性 dir: 设置元素文本方向 draggable: 设置元素是否可拖拽 dropzone: 设置元素拖放类型： copy, move, link hidden: 表示一个元素是否与文档。样式上会导致元素不显示，但是不能用这个属性实现样式效果 id: 元素id，文档内唯一 lang: 元素内容的的语言 spellcheck: 是否启动拼写和语法检查 style: 行内css样式 tabindex: 设置元素可以获得焦点，通过tab可以导航 title: 元素相关的建议信息 translate: 元素和子孙节点内容是否需要本地化

说说超链接target属性的取值和作用？

参考答案

target这个属性指定所链接的页面在浏览器窗口中的打开方式。

它的参数值主要有：

a、 _blank ：在新浏览器窗口中打开链接文件

b、 _parent ：将链接的文件载入含有该链接框架的父框架集或父窗口中。如果含有该链接的框架不是嵌套的，则在浏览器全屏窗口中载入链接的文件，就象 _self 参数一。

c、 _self ：在同一框架或窗口中打开所链接的文档。此参数为默认值，通常不用指定。但是我不太理解。

d、 _top ：在当前的整个浏览器窗口中打开所链接的文档，因而会删除所有框架。

 

`data-`属性的作用是什么？

参考答案

`data-`为H5新增的为前端开发者提供自定义的属性，这些属性集可以通过对象的 `dataset` 属性获取，不支持该属性的浏览器可以通过 `getAttribute` 方法获取 :

 

需要注意的是：`data-`之后的以连字符分割的多个单词组成的属性，获取的时候使用驼峰风格。 所有主流浏览器都支持 data-* 属性。

即：当没有合适的属性和元素时，自定义的 data 属性是能够存储页面或 App 的私有的自定义数据。

 

介绍一下你对浏览器内核的理解？

参考答案

主要分成两部分：渲染引擎(layout engineer或 Rendering Engine) 和 JS 引擎。

渲染引擎：负责取得网页的内容（HTML、 XML 、图像等等）、整理讯息（例如加入 CSS 等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。

JS引擎则：解析和执行 javascript 来实现网页的动态效果。

最开始渲染引擎和JS引擎并没有区分的很明确，后来 JS 引擎越来越独立，内核就倾向于只指渲染引擎。

常见的浏览器内核有哪些？

参考答案

view sourceprint?

1. Trident内核： IE,MaxThon,TT,The World,360, 搜狗浏览器等。 [ 又称 MSHTML]

2. Gecko内核： Netscape6 及以上版本， FF,MozillaSuite/SeaMonkey 等

3. Presto内核： Opera7 及以上。       [Opera 内核原为： Presto ，现为： Blink;]

4. Webkit内核： Safari,Chrome 等。    [ Chrome 的： Blink （ WebKit 的分支） ]

iframe有那些缺点？

参考答案

*iframe会阻塞主页面的 Onload 事件；

*搜索引擎的检索程序无法解读这种页面，不利于 SEO;

*iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。

使用iframe之前需要考虑这两个缺点。如果需要使用 iframe ，最好是通过 javascript

动态给iframe添加 src 属性值，这样可以绕开以上两个问题。

Label的作用是什么，是怎么用的？

参考答案

label标签来定义表单控制间的关系 , 当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表单控件上。

<label for='Name'>Number:</label>

<input type=“ text “ name='Name' id='Name'/>

<label>Date:<input type='text' name='B'/></label>

注意:label的for属性值要与后面对应的input标签id属性值相同

<label for='Name'>Number:</label>

<input type=“ text “ name='Name' id='Name'/>

 

如何实现浏览器内多个标签页之间的通信?

参考答案

WebSocket、 SharedWorker ；

也可以调用localstorage、 cookies 等本地存储方式；

localstorage另一个浏览上下文里被添加、修改或删除时，它都会触发一个事件，

我们通过监听事件，控制它的值来进行页面信息通信；

注意quirks： Safari 在无痕模式下设置 localstorge 值时会抛出 QuotaExceededError 的异常；