1. 技术文章
  2. 前端开发面试题－－html

前端开发面试题－－html

由 ☆樱花仙子☆ 提交于 2020-02-29 02:34:57

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

    1. doctype是告诉浏览器我的html使用哪个版本的html协议写的，让浏览器按照神明的协议执行。

    2. 区别：严格模式是浏览器根据规范去显示页面，混杂模式是一种向后兼容的方式去显示。

    3. 意义：决定浏览器如何去渲染网站即浏览器使用哪种规范去解析网页。触发：浏览器根据doctype是否存在和使用的是那种dtd来决定。

  2. HTML5 为什么只需要写 <!DOCTYPE HTML>？

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

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

    1. css中规定，每一个元素都有display属性。确定该元素的类型，每一个元素都有默认的display值，比如div的display为block：块级元素。span的display为inline：行内元素。

    2. 行内元素有：a b span img input select strong

    3. 块级元素：div ul li ol p dl dt dd h1 h2 h3…

    4.  知名的空元素：<br> <hr> <img> <input> <link> <meta>  鲜为人知的还有：<area> <base> <col> <command> <embed> <keygen> <param> <source> <track> <wbr>

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

    1. link属于XHTML标签，而@import是CSS提供的;

    2. 页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;

    3. import只在IE5以上才能识别，而link是XHTML标签，无兼容问题;

    4. link方式的样式的权重 高于@import的权重.

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

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

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

    1. 使用Trident的是internet explorer，国产的绝大部分浏览器。Trident是就是ie内核

    2. 使用Gecko的是Mozilla Firefox，使用 Gecko 内核的浏览器也有不少，如 Netscape MozillaSuite/SeaMonkey 等

    3. 使用Presto的是opera，这是目前公认网页浏览速度最快的浏览器内核

    4. 使用WebKit的有苹果的safari，谷歌的chrome，还有国产的大部分双核浏览器其中一核就是WebKit

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

    1. .IE8/IE7/IE6支持通过document.方法产生的标签，利用这一特性让这些浏览器支持HTML5新标签。

    2. 使用是html5shim框架

    3. html5的新特性：比如说其中的canvas绘图，新增的API包括canvas，geolocation，web socket，web storage，还有新增的若干标签：video，audio等

    4. 移除的元素

          font, center, strike, big, s, u, acronym, applet, dir...

          移除的属性

          如link和a元素的rev属性, link元素的target属性, td的scope属性，script元素的language属性, body元素的alink，link，text和vlink属性...

    5. 处理兼容问题有两种方式

    6. 另外，DOCTYPE声明的方式是区分HTML和HTML5标志的一个重要因素，此外，还可以根据新增的结构、功能元素来加以区分。（答案参考：http://toutiao.com/a6210139903877480705/）

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

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

    2. 语义化有利于SEO，有利于搜索引擎爬虫更好的理解我们的网页，从而获取更多的有效信息，提升网页的权重。

    3. 在没有CSS的时候能够清晰的看出网页的结构，增强可读性。

    4. 便于团队开发和维护，语义化的HTML可以让开发者更容易的看明白，从而提高团队的效率和协调能力。

    5. 支持多终端设备的浏览器渲染。

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

    1. sessionStorage 对象负责存储一个会话的数据。如果用户关闭了页面或浏览器，则会销毁数据

    2. The localStorage 对象负责存储没有到期的数据。当 Web 页面或浏览器关闭时，仍会保持数据的存储，当然这还取决于为此用户的浏览器设置的存储量。

    4. 内置到 HTML5 中的 Web 存储对象有两种类型：

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

    1. HTML5的离线存储使用一个manifest文件来标明哪些文件是需要被存储的，使用如 来引入一个manifest文件，这个文件的路径可以是相对的，也可以是绝对的，如果你的web应用很多，而且希望能集中管理manifest文件，那么静态文件服务器是个不错的选择

    2. 当用户本地再次联网的时候，本地的离线存储资源需要检查是否需要更新，这个更新过程，也是通过manifest的更新来控制的，更新了manifest文件，浏览器会自动的重新下载新的manifest文件并在下一次刷新页面的时候进行资源文件的重新请求(第三次刷新替换本地缓存为最新缓存)，而且这个请求是全局性的，也就是所有在manifest缓存列表中的文件都会被请求一次，而不是单独请求某个特定修改过的资源文件，因为manifest是不知道哪个文件被修改过了的。

    3. 所以控制离线存储的更新，需要2个步骤，一是更新资源文件，二是更新manifest文件，特别的，更新manifest文件是不需要修改什么特定内容的，只要是这个文件随意一处被修改，那么浏览器就会感知，对于我们的资源文件通常名称是固定的，比如**.css，更新内容不会带有文件名更新的情况下，需要更新manifest文件怎么操作呢?一个比较好的方式是更新任意一处# 开头的注释即可，其目的只是告诉浏览器这个manifest文件被更新过。

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

    1. 共同点：都是保存在浏览器端，且同源的。

    2. 区别：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 接口使用更方便。

  12. iframe有那些缺点？

    1. 会产生很多页面，不容易管理

    2. iframe框架结构有时会让人感到迷惑，如果框架个数多的话，可能会出现上下、左右滚动条，会分散访问者的注意力，用户体验度差

    3. 代码复杂，无法被一些搜索引擎索引到，这一点很关键，现在的搜索引擎爬虫还不能很好的处理iframe中的内容，所以使用iframe会不利于搜索引擎优化。

    4. 很多的移动设备（PDA 手机）无法完全显示框架，设备兼容性差

    5. iframe框架页面会增加服务器的http请求，对于大型网站是不可取的。

    6. iframe能够原封不动的把嵌入的网页展现出来

    7. 如果有多个网页引用iframe，那么你只需要修改iframe的内容，就可以实现调用的每一个页面内容的更改，方便快捷

    8. 网页如果为了统一风格，头部和版本都是一样的，就可以写成一个页面，用iframe来嵌套，可以增加代码的可重用。

    9. iframe是一种框架，也是一种很常见的网页嵌入方式

    10. iframe的优点：

    11. iframe的缺点：

    1. Label的作用是什么?是怎么用的?(加 for 或 包裹)

      1. FOR属性 
        功能：表示Label标签要绑定的HTML元素，你点击这个标签的时候，所绑定的元素将获取焦点。 
        用法：<Label FOR="InputBox">姓名</Label><input ID="InputBox" type="text"> 

      2. ACCESSKEY属性： 
        功能：表示访问Label标签所绑定的元素的热键，当您按下热键，所绑定的元素将获取焦点。 
        用法：<Label FOR="InputBox" ACCESSKEY＝"N">姓名</Label><input ID="InputBox" type="text">

      3. 局限性：accessKey属性所设置的快捷键不能与浏览器的快捷键冲突，否则将优先激活浏览器的快捷键。 

      4. 要将 LABEL 绑定到其它的控件，请将 LABEL 元素的 FOR 属性设置为与该控件的 ID 相同。将 LABEL 绑定到控件的 NAME 属性毫无用处。但是，要提交表单，你必须为 LABEL 元素所绑定到的控件指定 NAME。

      5. 如果用户单击 LABEL，则会先触发 LABEL 上的 onclick 事件，然后触发由 htmlFor 属性所指定的控件上的 onclick 事件。按下 LABEL 设定的快捷键将设置焦点但并不触发 onclick 事件。 

      6. 标签不允许嵌套

      7. Label 中有两个属性是非常有用的,一个是FOR、另外一个就是ACCESSKEY了。

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

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

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

      1. 这个功能可以通过 WebSocket API 来实现，不过这就有些小题大做了。毕竟杀鸡焉用牛刀，于是我开始寻找一些其它的跨标签页通信方式

      2. 我首先想到的就是使用 cookies 或者 localStorage ，来周期性地通过 setInterval 检查用户是否登录。对这个方案我并不满意，因为这样会把许多 CPU 周期耗费在检查一个可能自始至终都不会满足的条件上。

      3. 你知道 localStorage 会触发一个事件吗？具体地说，不论其中的哪一项在另一个浏览上下文里被添加、修改或删除时，它都会触发一个事件。实际上，这就意味着不论在哪个浏览器的标签页里访问了 localStorage

      4. window.addEventListener('storage', function (event) {

          console.log(event.key, event.newValue);

        });

      5. 不论某个标签页在何时修改了 localStorage，都会对其余的所有标签触发事件。这就意味着我们只要为 localStorage 赋值，就能够跨浏览器标签通信了

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

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

    5. 页面可见性（Page Visibility API） 可以有哪些用途？

      1. 该API可以用来检测页面对于用户的可见性，即返回用户当前浏览的页面或标签的状态变化

      2. 提高用户体验

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

      1. 爬虫脚本登录,比如登录之后批量发布不良信息.

      2. 扫号脚本暴力探测用户帐号,比如暴力破解某些用户的密码.

      3. 频繁的使用某一个涉及后台性能瓶颈的功能,导致系统负载过高.

      4. 增加验证码的主要目的是减少非正常的请求,以保护用户权益.所谓非正常的请求有以下:

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

      1. 从网站角度看，title网站标题能直接告诉搜索引擎和用户这个页面是关于什么主题和内容的网站。从文章的角度上看，用户进到内容页里，想看到的当然就是文章的内容，H1文章标题则是最重要的、最应该突出的。 一篇文章只能有一个标题，一个页面最好采用一个H1;多个H1会造成搜索引擎不知道这个页面哪个标题内容最重要，导致淡化这个页面标题和关键词，起不到突出主题的效果。从网站角度而言，title则重于网站信息标题;从文章角度而言，H1则概括的是文章主题。title与h1都归为代码优化，同为权重标签，要从范围来讲title传递给搜索引擎信号更强些，言外之意就是title要表达的权重在一定意义上高于h1。可以一起使用，在列表页时候两个权重标签就可以使用了，列表页使用title标签去诠释，列表页的每条信息就可以使用h1了。

      2. <b> 标签呈现粗体文本效果。<b> 标签是基于内容的样式标签 <strong> 的物理版本，但它没有后者的扩展意义。<b> 标签明确地将包括在它和其结束标签之间的字符或者文本变成粗体。如果某种加粗的字体不可用，浏览器将使用一些其他的表现方法，例如反相显示或者加下划线等。举一个例子，经常访问 W3school 的用户可以注意到了，许多教程页面的第一句摘要都是以粗体显示的，而实际上，我们对这一句摘要使用了 <strong> 标签。使用这个标签的理由是，我们认为教程摘要不仅概括了其所在页面的内容，而且位于页面的最重要的位置，其内容自然是非常重要的且值得强调的。

      3. <i>标签：显示斜体文本效果<i>标签告诉浏览器将包含其中的文本以斜体字（italic）或者倾斜（oblique）字体显示；<em>标签：
        <em>标签中的文本表示为强调的内容，对于所有浏览器的显示效果来说，是把这段文字用斜体来显示；简单的说一个是物理标记，一个逻辑标记


    标签
    前端开发
    面试题
    答案
    易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
    该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!