前端面试题---HTML部分

一年一度的秋招马上开始了（部分BAT这样的老大已经开始内推了，小伙伴们，快找学长学姐们内推吧）：

整理了一些面试题及答案；css与js部分之后更新。————————————————–

HTML

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

答：1.是一个标签（Document Type），用来声明标准通用标记语言的文档类型，就是要告诉解析器，应该使用什么样的文档类型定义来解析文档，也就是html的版本类型，必须放在所有的代码和标识之上。
2.DTD的三种类型：
2.1 –严格版本：禁止所有的表现层的标识和属性 presetational/deprecatedelements(例如font)以及frameset（框架的）标签；
– 2.2 过渡版本：– 2.3 框架版本：
3.标准模式：浏览器以其支持的最高标准呈现呈现页面；
混杂模式：页面以一种比较宽松的向后兼容的方式显示，浏览器会根据 DOCTYPE是否存在来选择要使用的方法，如果没有DOCTYPE,那么就是以混杂模式呈现。

2.HTML5 为什么只需要写 ？

由于它放弃了与SGML的兼容，所以其实不需要在文档开头引用DTD,因为这个声明格式再当前所有的浏览器（IE,FF,OPERA,SAFAR等）下都会以标准模式渲染，而HTML5没有DTD,也就没有严格模式与宽松模式

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

行内：width与height没有作用，只有padding（margin）-left与padding(margin)-right或者line-height有作用`<br>,<span>,<a>,<b>,<button>,<em>,<i>,<iframe>,<img>,<input>,<label>,<map>,<select>,

---

块级 ：<div>,<p>,<caption>,<dd>,<dl>,<dt>,<form>,<h1>,<h…>,<hr>,<li>,<ol>,<ul>,<pre>,<table>,<td>,<th>,<thead>,<tr>

块级元素各自占一行，垂直方向排列，可以包含行级元素和块级元素，行级元素可以转换为块级元素：display:block;行内元素：会在水平方向排列，不能包含块级元素，设置width无效，height无效(可以设置line-height)，margin上下无效，padding上下无效。(Q2) 兼容性：display:inline-block;display:inline;zoom:1;空元素:没有内容的标签，<br/>就是没有关闭标签的空元素

空元素：

<br/><hr>,<input><img><meta>,<link>

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

Link:XHTML标签；除了可以加载CSS外，还可以定义RSS，定义rel的链接属性；当页面被加载的时候，link使用的CSS会同时被加载，故浏览者浏览的时候，会有样式；@import:是css提供的一种方式；只有当所有的界面都被下载完才会加载，所以用这个的时候，有的时候开始会没有样式；老的浏览器不会支持只有在IE5以上才会支持。使用dom不可以控制@import

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

就是解释引擎，负责对网页语法的解释并渲染（显示）网页，决定了如何显示网页的内容以及页面的格式。就是兼容性的问题。常见的浏览器内核有哪些？Trident内核—IEGecko内核—FireFox（该内核的特点就是 开源，javascript的引擎是SpiderMonkey。）Webkit内核—safari以及chrome的原生内核。Google Chrome、360极速浏览器以及搜狗高速浏览器高速模式都是这个内核。Blink-chrome（28及以后版本）的最新内核Presto内核--opera浏览器

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

1.正则验证：　<input type="email" pattern="[^ @]*@[^ @]*" value=""> 无需后台检测，即可检验；2. Dataliat属性：可以实现自动补全机制，不用jqury再去实现。<input list="jslib" name="jslib" >　　<datalist id="jslib">3.下载特性：允许强制下载文件：　<a href="download_pdf.php" download="somefile.pdf">下载PDF文件</a>4.用于绘画的 canvas 元素代替了Flash 5.用于媒介回放的 video 和 audio 元素、6.对本地离线存储的更好的支持、 7.新的特殊内容元素，比如 article、footer、header、nav、section、新的表单控件，比如 calendar、date、time、email、url、search。8.新增了<menu>可以被用于创建传统的菜单，也可以用于工具栏和上下文菜单。<figure>标签使得网页文字和图片的排版更专业。删除了： <b>、 <font>、  <frame>,、 <center>、 <big>区分：H5简化了很多语法；例如Doctype的声明。

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

答：标签语义化就是让你更好的理解标签的含义:比如h1-6就是很明显的定义标题；就是让页面的内容结构化，便于解析；便于阅读和理解。其实就是让你用正确的标签做正确的事情；先了解模块在页面中的职能，后编写代码。

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

通过Manifest; Manifest是一个简单的 文本文件，它的扩展名是任意 的，定义需要缓存的文件、资源，当第一次打开时，浏览器会自动缓存相应的资源。
Manifest 的特点：
离线浏览：即当网络断开时，可以继续访问你的页面。
访问速度快：将文件缓存到本地，不需每次都从网络上请求。
稳定性：做了Manifest缓存，遇到突发网络故障或者服务器故障，继续访问本地缓存。
使用：
首先创建一个和html同名的manifest文件，比如页面为index.html，那么可以建一个index.manifest的文件，然后给index.html的html标签添加如下属性即可：
或
1、manifest 的引入可以使绝对路径也可以是相对路径
2、manifest文件你可以保存为任意的扩展名，但mine-type 必须是 text/cache-manifest。
3、manifest 标签应该包含到你需要缓存资源的页面，当第一次打开该页面时，浏览器会解析该页面中的mainfest，并缓存里面列举的资源，同时该页面也会自动会被浏览器缓存，即使该页面没有在Manifest中列出。
4、HTML5缓存可以做到以下几点：1>实现图片存在客户端；2>实现跨域共享客户端缓存；3>做到真正的离线访问WEB应用；4>实现客户端的数据库。
在H5之前，是由cookie实现客户端的缓存，将缓存信息带在HTTP请求头上，大小只有4k，会造成Domain污染H5的几种存储形式：
1>本地存储(localstorage && sessionstorage)：
存储形式：key–>value过期时间：永久存储，永不失效，除非手动删除 大小：官方给出的文档是每个域名5M，所以需要抛出异常处理
浏览器支持情况：IE8+、Firefox、Safari3.2+、Chrome、Opera
使用方法：localstorage API介绍,resource里面看，
在console里面操作
1.getItem:取 localstorage记录 setItem:设置 removeItem:移除key:去拿一个索引 clear:删掉，清除（这个是删除掉了全部）
H5可以存储的东东：数组、json数据、图片、脚本、样式文件
原理：
HTML5的离线存储是基于一个新建的.appcache文件的，通过这个文件上的解析清单离线存储资源，这些资源就会像cookie一样被存储了下来。之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示。

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

当第一次打开该页面时，浏览器会解析该页面中的mainfest，并缓存里面列举的资源，同时该页面也会自动会被浏览器缓存，即使该页面没有在Manifest中列出。
更新缓存的方式：
更新manifest文件
通过javascript操作
清除浏览器缓存

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

Cookie:（不能超过4k）始终在同源的Http请求中携带（即使不需要），他在浏览器和服务器之间来回传递；后两者均只在本地保存，不会自动发给服务器；只在设置的过期时间之前有用；所有同源窗口之间使用。
SessionStorge:缓存存储,存储范围大。所有的同源窗口之间共享。
LocalStrage:本地存储，仅在同浏览器，同浏览页面共享。

9.iframe有那些缺点？

优点：1.重载页面的时候不需要重载整个页面，只需要重载页面中的一个框架页增加网页的传输速度；一般用于制作导航栏的时候使用—–现在由于他的缺点，已经使用ajax代替它实现了；
iframe的缺点：
1.会产生很多页面，不容易管理
2.代码过于复杂，不太容易被浏览器的引擎解析；
3.iframe会阻塞主页面的Onload事件，即时内容为空，加载也需要时间；

10.Label的作用是什么？是怎么用的？（加 for 或 包裹）

Label:用来给 input 元素定义标注（标记）。不会呈现出来任何的效果，一般可用来在该标签内点击文本，然后会触发此控件。
标签的 for 属性应当与相关元素的 id 属性相同。
用法：

<form><label for="male">Male</label><input type="radio" name="sex" id="male" /></form>

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

自动完成功能就是：当你在文本框输入时，浏览器会根据历史纪录，提醒您，但有的时候我们要通过ajax来操作：所以需要关闭该功能
1、在IE的Internet选项菜单里的内容–自动完成里面设置

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

3、设置输入框的autocomplete为”on”或者”off”来开启或者关闭该输入框的自动完成功能

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

使用cookie，localstorage.

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

引用WebSocket.js这个文件来兼容低版本浏览器，WebSocket.swf需 要放在与页面相同的目录下。

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

当可见性发生了改变的时候，会触发 visibilityState事件，通过给事件注册一个监听函数，那么就可以进行一些操作：即能够在页面切换到不可见状态时暂停执行一些不必要的操作,以减少资源的浪费.
比如当前页面在播放动画，检测到用户切换了或者最小化了该窗口，则自动停止；
有的程序会及时刷新访问界面（比如篮球比赛时的比分更新），若窗口关闭，他也会停止刷新；

15.如何在页面上实现一个圆形的可点击区域？
圆形：CSS代码如下：
#circle {
width: 100px;
height: 100px;
background: red;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
}
椭圆：

CSS代码      #oval {    width: 200px;    height: 100px;    background: red;    -moz-border-radius: 100px / 50px;    -webkit-border-radius: 100px / 50px;    border-radius: 100px / 50px;}

倒三角：

#retangle{    width: 0;    height: 0;   border-left:50px solid transparent;    border-right:50px solid  transparent;    border-top: 100px solid yellow;}

正三角：

#back_retangle{    width: 0;    height: 0;    border-right: solid 50px transparent;    border-left: solid 50px transparent;   border-bottom: 50px solid black;}

16.实现不使用 border 画出1px高的线，在不同浏览器的Quirksmode和CSSCompat模式下都能保持同一效果。

document 有个属性 compatMode 可以用来判断当前页面采用的何种渲染方式：
　　BackCompat – Standards-compliant mode is not switched on.
　　CSS1Compat – Standards-compliant mode is switched on.
Quirksmode即怪异模式，而css1compat是标准模式
我是这样实现的，不知道对不对？

—–-如果错了，及时指出。谢谢

#line{    width: 1000px;    height:1px;    background-color: #3ecdb5;}<div id=“line”></div>

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

验证码是为了防止一些人使用软件恶意注册、发帖等行为而设的。
它的存在是为了确保登陆网站的是一个坐在电脑面前的真人，而不是一个自动登陆的软件

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

title是网站的标题；一般显示在网页的头部，在便签内；
而”h1”是标题：用来设置文章等的标题。是网页的内容，显示在页面中；

19. 常用的几种浏览器测试？

  IE,Chrome,firefox,safari,opera.

---

HTML部分更完，以上为个人看法，仅供参考，如有错误，望指出。
最后，祝大家在秋招中OFFER拿到手软！哈哈~