前端开发面试题－－html

时间 2019-11-10

标签前端开发面试 html 栏目快乐工作繁體版

原文原文链接

Doctype做用？严格模式与混杂模式如何区分？它们有何意义?css

doctype是告诉浏览器个人html使用哪一个版本的html协议写的，让浏览器按照神明的协议执行。html
区别：严格模式是浏览器根据规范去显示页面，混杂模式是一种向后兼容的方式去显示。html5
意义：决定浏览器如何去渲染网站即浏览器使用哪一种规范去解析网页。触发：浏览器根据doctype是否存在和使用的是那种dtd来决定。web

HTML5 为何只须要写 <!DOCTYPE HTML>？chrome

由于h5不基于SGML，所以不须要对DTD进行引用。可是须要doctype来规范浏览器的行为（让浏览器按照他的方式来运行）。而html4.0.1基于SGML，须要对DTD进行引用，才能告知浏览器文档所使用的文档类型canvas

行内元素有哪些？块级元素有哪些？空(void)元素有那些？api

css中规定，每个元素都有display属性。肯定该元素的类型，每个元素都有默认的display值，好比div的display为block：块级元素。span的display为inline：行内元素。跨域
行内元素有：a b span img input select strong浏览器
块级元素：div ul li ol p dl dt dd h1 h2 h3…缓存
知名的空元素：<br> <hr> <img> <input> <link> <meta> 不为人知的还有：<area> <base> <col> <command> <embed> <keygen> <param> <source> <track> <wbr>

页面导入样式时，使用link和@import有什么区别？

link属于XHTML标签，而@import是CSS提供的;
页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;
import只在IE5以上才能识别，而link是XHTML标签，无兼容问题;
link方式的样式的权重高于@import的权重.

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

内核只是一个通俗的说法，其英文名称为“Layout engine”，翻译过来就是“排版引擎”，也被称为“页面渲染引擎”（下文中各类说法通用）。它负责取得网页的内容（HTML、XML、图像等等）、整理信息（例如加入CSS等），以及计算网页的显示方式，而后会输出至显示器或打印机。全部网页浏览器、电子邮件客户端以及其它须要编辑、显示网络内容的应用程序都须要排版引擎。不一样的浏览器内核对网页编写语法的解释也有不一样，所以同一网页在不一样的内核的浏览器里的渲染（显示）效果也可能不一样，这也是网页编写者须要在不一样内核的浏览器中测试网页显示效果的缘由。
这就是编写网页的麻烦所在啊。。。要让全部浏览器显示大概一致，有时候很麻烦。

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

使用Trident的是internet explorer，国产的绝大部分浏览器。Trident是就是ie内核
使用Gecko的是Mozilla Firefox，使用 Gecko 内核的浏览器也有很多，如 Netscape MozillaSuite/SeaMonkey 等
使用Presto的是opera，这是目前公认网页浏览速度最快的浏览器内核
使用WebKit的有苹果的safari，谷歌的chrome，还有国产的大部分双核浏览器其中一核就是WebKit

html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？

.IE8/IE7/IE6支持经过document.方法产生的标签，利用这一特性让这些浏览器支持HTML5新标签。
使用是html5shim框架
html5的新特性：好比说其中的canvas绘图，新增的API包括canvas，geolocation，web socket，web storage，还有新增的若干标签：video，audio等
移除的元素
    font, center, strike, big, s, u, acronym, applet, dir...
    移除的属性
    如link和a元素的rev属性, link元素的target属性, td的scope属性，script元素的language属性, body元素的alink，link，text和vlink属性...
处理兼容问题有两种方式
另外，DOCTYPE声明的方式是区分HTML和HTML5标志的一个重要因素，此外，还能够根据新增的结构、功能元素来加以区分。（答案参考：http://toutiao.com/a6210139903877480705/）

简述一下你对HTML语义化的理解（参考http://www.cnblogs.com/freeyiyi1993/p/3615179.html）

语义化的HTML就是写出的HTML代码，符合内容的结构化（内容语义化），选择合适的标签（代码语义化），可以便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。
语义化有利于SEO，有利于搜索引擎爬虫更好的理解咱们的网页，从而获取更多的有效信息，提高网页的权重。
在没有CSS的时候可以清晰的看出网页的结构，加强可读性。
便于团队开发和维护，语义化的HTML可让开发者更容易的看明白，从而提升团队的效率和协调能力。
支持多终端设备的浏览器渲染。

HTML5的离线储存怎么使用，工做原理能不能解释一下？

sessionStorage 对象负责存储一个会话的数据。若是用户关闭了页面或浏览器，则会销毁数据
The localStorage 对象负责存储没有到期的数据。当 Web 页面或浏览器关闭时，仍会保持数据的存储，固然这还取决于为此用户的浏览器设置的存储量。
内置到 HTML5 中的 Web 存储对象有两种类型：

浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢？

HTML5的离线存储使用一个manifest文件来标明哪些文件是须要被存储的，使用如来引入一个manifest文件，这个文件的路径能够是相对的，也能够是绝对的，若是你的web应用不少，并且但愿能集中管理manifest文件，那么静态文件服务器是个不错的选择
当用户本地再次联网的时候，本地的离线存储资源须要检查是否须要更新，这个更新过程，也是经过manifest的更新来控制的，更新了manifest文件，浏览器会自动的从新下载新的manifest文件并在下一次刷新页面的时候进行资源文件的从新请求(第三次刷新替换本地缓存为最新缓存)，并且这个请求是全局性的，也就是全部在manifest缓存列表中的文件都会被请求一次，而不是单独请求某个特定修改过的资源文件，由于manifest是不知道哪一个文件被修改过了的。
因此控制离线存储的更新，须要2个步骤，一是更新资源文件，二是更新manifest文件，特别的，更新manifest文件是不须要修改什么特定内容的，只要是这个文件随意一处被修改，那么浏览器就会感知，对于咱们的资源文件一般名称是固定的，好比**.css，更新内容不会带有文件名更新的状况下，须要更新manifest文件怎么操做呢?一个比较好的方式是更新任意一处# 开头的注释便可，其目的只是告诉浏览器这个manifest文件被更新过。

请描述一下 cookies，sessionStorage 和 localStorage 的区别？

共同点：都是保存在浏览器端，且同源的。
区别：cookie数据始终在同源的http请求中携带（即便不须要），即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。cookie数据还有路径（path）的概念，能够限制cookie只属于某个路径下。存储大小限制也不一样，cookie数据不能超过4k，同时由于每次http请求都会携带cookie，因此cookie只适合保存很小的数据，如会话标识。sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，能够达到5M或更大。数据有效期不一样，sessionStorage：仅在当前浏览器窗口关闭前有效，天然也就不可能持久保持；localStorage：始终有效，窗口或浏览器关闭也一直保存，所以用做持久数据；cookie只在设置的cookie过时时间以前一直有效，即便窗口或浏览器关闭。做用域不一样，sessionStorage不在不一样的浏览器窗口中共享，即便是同一个页面；localStorage 在全部同源窗口中都是共享的；cookie也是在全部同源窗口中都是共享的。Web Storage 支持事件通知机制，能够将数据更新的通知发送给监听者。Web Storage 的 api 接口使用更方便。

iframe有那些缺点？

会产生不少页面，不容易管理
iframe框架结构有时会让人感到迷惑，若是框架个数多的话，可能会出现上下、左右滚动条，会分散访问者的注意力，用户体验度差
代码复杂，没法被一些搜索引擎索引到，这一点很关键，如今的搜索引擎爬虫还不能很好的处理iframe中的内容，因此使用iframe会不利于搜索引擎优化。
不少的移动设备（PDA 手机）没法彻底显示框架，设备兼容性差
iframe框架页面会增长服务器的http请求，对于大型网站是不可取的。
iframe可以原封不动的把嵌入的网页展示出来
若是有多个网页引用iframe，那么你只须要修改iframe的内容，就能够实现调用的每个页面内容的更改，方便快捷
网页若是为了统一风格，头部和版本都是同样的，就能够写成一个页面，用iframe来嵌套，能够增长代码的可重用。
iframe是一种框架，也是一种很常见的网页嵌入方式
iframe的优势：
iframe的缺点：

Label的做用是什么?是怎么用的?(加 for 或包裹)

FOR属性
功能：表示Label标签要绑定的HTML元素，你点击这个标签的时候，所绑定的元素将获取焦点。
用法：<Label FOR="InputBox">姓名</Label><input ID="InputBox" type="text">
ACCESSKEY属性：
功能：表示访问Label标签所绑定的元素的热键，当您按下热键，所绑定的元素将获取焦点。
用法：<Label FOR="InputBox" ACCESSKEY＝"N">姓名</Label><input ID="InputBox" type="text">
局限性：accessKey属性所设置的快捷键不能与浏览器的快捷键冲突，不然将优先激活浏览器的快捷键。
要将 LABEL 绑定到其它的控件，请将 LABEL 元素的 FOR 属性设置为与该控件的 ID 相同。将 LABEL 绑定到控件的 NAME 属性毫无用处。可是，要提交表单，你必须为 LABEL 元素所绑定到的控件指定 NAME。
若是用户单击 LABEL，则会先触发 LABEL 上的 onclick 事件，而后触发由 htmlFor 属性所指定的控件上的 onclick 事件。按下 LABEL 设定的快捷键将设置焦点但并不触发 onclick 事件。
标签不容许嵌套
Label 中有两个属性是很是有用的,一个是FOR、另一个就是ACCESSKEY了。

HTML5的form如何关闭自动完成功能

设置Form的autocomplete为"on"或者"off"来开启或者关闭自动完成功能

如何实现浏览器内多个标签页之间的通讯? (阿里)

这个功能能够经过 WebSocket API 来实现，不过这就有些小题大作了。毕竟杀鸡焉用牛刀，因而我开始寻找一些其它的跨标签页通讯方式
我首先想到的就是使用 cookies 或者 localStorage ，来周期性地经过 setInterval 检查用户是否登陆。对这个方案我并不满意，由于这样会把许多 CPU 周期耗费在检查一个可能自始至终都不会知足的条件上。
你知道 localStorage 会触发一个事件吗？具体地说，不论其中的哪一项在另外一个浏览上下文里被添加、修改或删除时，它都会触发一个事件。实际上，这就意味着不论在哪一个浏览器的标签页里访问了 localStorage
window.addEventListener('storage', function (event) {
console.log(event.key, event.newValue);
});
不论某个标签页在什么时候修改了 localStorage，都会对其他的全部标签触发事件。这就意味着咱们只要为 localStorage 赋值，就可以跨浏览器标签通讯了

webSocket如何兼容低浏览器？(阿里)

WebSocket API是下一代客户端-服务器的异步通讯方法。WebSocket API最伟大之处在于服务器和客户端能够在给定的时间范围内的任意时刻，相互推送信息。Ajax技术须要客户端发起请求，而WebSocket服务器和客户端能够彼此相互推送信息；XHR受到域的限制，而WebSocket容许跨域通讯。

页面可见性（Page Visibility API）能够有哪些用途？

该API能够用来检测页面对于用户的可见性，即返回用户当前浏览的页面或标签的状态变化
提升用户体验

网页验证码是干吗的，是为了解决什么安全问题？

爬虫脚本登陆,好比登陆以后批量发布不良信息.
扫号脚本暴力探测用户账号,好比暴力破解某些用户的密码.
频繁的使用某一个涉及后台性能瓶颈的功能,致使系统负载太高.
增长验证码的主要目的是减小非正常的请求,以保护用户权益.所谓非正常的请求有如下:

title与h1的区别、b与strong的区别、i与em的区别？

从网站角度看，title网站标题能直接告诉搜索引擎和用户这个页面是关于什么主题和内容的网站。从文章的角度上看，用户进到内容页里，想看到的固然就是文章的内容，H1文章标题则是最重要的、最应该突出的。一篇文章只能有一个标题，一个页面最好采用一个H1;多个H1会形成搜索引擎不知道这个页面哪一个标题内容最重要，致使淡化这个页面标题和关键词，起不到突出主题的效果。从网站角度而言，title则重于网站信息标题;从文章角度而言，H1则归纳的是文章主题。title与h1都归为代码优化，同为权重标签，要从范围来说title传递给搜索引擎信号更强些，言外之意就是title要表达的权重在必定意义上高于h1。能够一块儿使用，在列表页时候两个权重标签就可使用了，列表页使用title标签去诠释，列表页的每条信息就可使用h1了。
<b> 标签呈现粗体文本效果。<b> 标签是基于内容的样式标签 <strong> 的物理版本，但它没有后者的扩展意义。<b> 标签明确地将包括在它和其结束标签之间的字符或者文本变成粗体。若是某种加粗的字体不可用，浏览器将使用一些其余的表现方法，例如反相显示或者加下划线等。举一个例子，常常访问 W3school 的用户能够注意到了，许多教程页面的第一句摘要都是以粗体显示的，而实际上，咱们对这一句摘要使用了 <strong> 标签。使用这个标签的理由是，咱们认为教程摘要不只归纳了其所在页面的内容，并且位于页面的最重要的位置，其内容天然是很是重要的且值得强调的。
<i>标签：显示斜体文本效果<i>标签告诉浏览器将包含其中的文本以斜体字（italic）或者倾斜（oblique）字体显示；<em>标签：
<em>标签中的文本表示为强调的内容，对于全部浏览器的显示效果来讲，是把这段文字用斜体来显示；简单的说一个是物理标记，一个逻辑标记