前端面试题之HTML(一）

2017-07-26 本文已影响0人庄海鑫

1.常见浏览器有哪些？哪些内核？

Trident(IE内核）
（1）、IE6、IE7、IE8（Trident 4.0）、IE9（Trident 5.0）、IE10（Trident 6.0）；
（2）、猎豹安全浏览器：1.0-4.2版本为Trident+Webkit，4.3版本为Trident+Blink；
（3）、360安全浏览器：1.0-5.0为Trident，6.0为Trident+Webkit，7.0为Trident+Blink；
（4）、360极速浏览器：7.5之前为Trident+Webkit,7.5为Trident+Blink；
（5）、傲游浏览器：傲游1.x、2.x为IE内核，3.x为IE与Webkit双核；
（6）、搜狗高速浏览器：1.x为Trident，2.0及以后版本为Trident+Webkit；
Gecko(Firefox内核）
火狐浏览器（Firefox）
Webkit(Safari内核,Chrome内核原型,开源)
Google Chrome、360极速浏览器以及搜狗浏览器高速模式也使用webkit作为内核
WebKit内核常见的浏览器：
Apple Safari (Win/Mac/iPhone/iPad)、Symbian手机浏览器、Android 默认浏览器、Google Chrome
Blink(WebkitWebCore组件分支,Google与Opera Software共同开发)
在Chrome（28及往后版本）、Opera（15及往后版本）和Yandex浏览器中使用。
Presto(Opera前内核) (已废弃)

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

只是一个通俗的说法，其英文名称为“Layout engine”，翻译过来就是“排版引擎”，也被称为“页面渲染引擎”。它负责取得网页的内容（HTML、XML、图像等等）、整理信息（例如加入CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要排版引擎。
至于众多的浏览器，他们只不过是：{不同浏览器的外壳+内核=浏览器}。外壳指的是浏览器界面上的菜单，工具栏，那些让用户操作的，而他们都是调用内核来实现各种功能。

不同的浏览器内核对网页编写语法的解释也有不同，因此同一网页在不同的内核的浏览器里的渲染（显示）效果也可能不同，这也是网页编写者需要在不同内核的浏览器中测试网页显示效果的原因。

3.doctype有什么作用？怎么写？

它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令，以决定其需要采用的渲染模式

HTML5及以上	<！DOCTYPE HTML>
HTML 4.01严格	<！DOCTYPE HTML PUBLIC“ - // W3C // DTD HTML 4.01 // EN” “http://www.w3.org/TR/html4/strict.dtd”>
HTML 4.01过渡	<！DOCTYPE HTML PUBLIC“ - // W3C // DTD HTML 4.01 Transitional // EN”“http://www.w3.org/TR/html4/loose.dtd”>
HTML 4.01框架集	<！DOCTYPE HTML PUBLIC“ - // W3C // DTD HTML 4.01 Frameset //

4.页面出现了乱码，是怎么回事？如何解决？

比如网页源代码是gbk的编码，而内容中的中文字是utf-8编码的，这样浏览器打开即会出现html乱码。反之网页是编码utf-8，内容是gbk也会出现乱码。
浏览器不能自动检测网页编码，造成网页乱码。
如果自己开发网页，必须网页加入meta charset编码标签，使浏览器和网页源码编码格式相同 <meta charset="UTF-8"> <meta charset="GBK">。
如果浏览器浏览时候出现网页乱码，在浏览器中找到转换编码的菜单。

5.meta 有哪些常见的值？

charset：此特性声明当前文档所使用的字符编码，但该声明可以被任何一个元素的 lang 特性的值覆盖。
content：基于内容，这个属性为 http-equiv或 name 属性提供了与其相关的值的定义.
http-equiv：这个枚举属性定义了能改变服务器和用户引擎行为的编译。

<meta content="value">	描述
content-language	定义页面的默认语言。它可以被任何元素上的lang属性所覆盖。
content-security-policy	允许页面作者定义当前页面的内容策略。内容策略主要指定允许的服务器起始和脚本端点，这有助于防止跨站点脚本攻击。
content-type	定义文档的MIME类型，后跟其字符编码。它遵循与HTTP content-type实体头字段相同的语法，但是像在HTML页面中一样，大多数值text/html是不可能的。因此，它的有效语法content是字符串“ text/html'后跟一个具有以下语法的字符集：' '，其中是IANA定义的字符集的首选MIME名称;
refresh	该指令指定：直到页面重新加载的秒数，如果该content属性只包含一个正整数。页面重定向到另一个页面的秒数，如果该content属性包含一个正整数，后跟字符串' ;url='，那么一个有效的URL。
set-cookie	定义页面的Cookie。其内容必须遵循IETF HTTP Cookie规范中定义的方法。

name：此属性定义一段文档级元数据的名称

<meta name="value">	描述
application-name	规定页面所代表的 Web 应用程序的名称。
author	规定文档的作者的名字。实例： <meta name="author" content="Hege Refsnes">
description	规定页面的描述。搜索引擎会把这个描述显示在搜索结果中。实例： <meta name="description" content="Free web tutorials">
generator	规定用于生成文档的一个软件包（不用于手写页面）。实例： <meta name="generator" content="FrontPage 4.0">
keywords	规定一个逗号分隔的关键词列表 - 相关的网页（告诉搜索引擎页面是与什么相关的）。提示：总是规定关键词（对于搜索引擎进行页面分类是必要的）。实例： <meta name="keywords" content="HTML, meta tag, tag reference">

scheme （过时）：该属性定义了描述元数据的方案。

6.label的作用是什么？是怎么用的？

-功能：表示Label标签要绑定的HTML元素，你点击这个标签的时候，所绑定的元素将获取焦点。

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

<label>Click me <input type="text"></label>

<label for="username">Click me</label>
<input type="text" id="username">

用法：<Label FOR="InputBox" ACCESSKEY＝"N">姓名</Label><input ID="InputBox" type="text">局限性：accessKey属性所设置的快捷键不能与浏览器的快捷键冲突，否则将优先激活浏览器的快捷键。

7.简述一下你对HTML语义化的理解？

用正确的标签做正确的事情，让页面的内容结构化，便于浏览器、搜索引擎解析。
在没有CSS样式情况下也以一种文档格式显示且易读。
搜索引擎的爬虫依赖于标记来确认上下文和各个关键字的权重，利于SEO。
便于开发与维护。
使阅读源代码的人对网站更容易将网站分块，便于阅读理解。

8.iframe有哪些优缺点？

iframe是一种框架，也是一种很常见的网页嵌入方式，零度今天给大家分析分析它的优缺点。

iframe的优点：
1.iframe能够原封不动的把嵌入的网页展现出来。
2.如果有多个网页引用iframe，那么你只需要修改iframe的内容，就可以实现调用的每一个页面内容的更改，方便快捷。
3.网页如果为了统一风格，头部和版本都是一样的，就可以写成一个页面，用iframe来嵌套，可以增加代码的可重用。
4.如果遇到加载缓慢的第三方内容如图标和广告，这些问题可以由iframe来解决。
iframe的缺点：
1.会产生很多页面，不容易管理。
2.iframe框架结构有时会让人感到迷惑，如果框架个数多的话，可能会出现上下、左右滚动条，会分散访问者的注意力，用户体验度差。
3.代码复杂，无法被一些搜索引擎索引到，这一点很关键，现在的搜索引擎爬虫还不能很好的处理iframe中的内容，所以使用iframe会不利于搜索引擎优化。
4.很多的移动设备（PDA 手机）无法完全显示框架，设备兼容性差。
5.iframe框架页面会增加服务器的http请求，对于大型网站是不可取的。
分析了这么多，现在基本上都是用Ajax来代替iframe，所以iframe已经渐渐的退出了前端开发。