# SGML HTML XML 之间有什么关系？
SGML:（标准通用标记语言）
SGML 是一个标准，告诉我们怎么去指定文档标记。他是只描述文档标记应该是怎么样的元语言，HTML是被用SGML描述的标记语言。
现在解析SGML是一件痛苦的事情，所以创建了XML使事情更好。XML使用了SGML，
例如：在SGML中你必须使用起始和结束标签，但是在XML你可以有自动关闭的结束标签。
XHTML创建于XML，他被使用在HTML4.0中。你可以参考下面代码片段中展示的XML DTD
总之，SGML是所有类型的父类，较旧的HTML利用SGML，HTML4.0使用派生自XML的XHTML
因此利用SGML创建了HTML参照和必须共同遵守的DTD，你会经常在HTML页面的头部发现“DOCTYPE”属性，
用来定义用于解析目标DTD
HTML5:（超文本标记语言）
HTML5是最新的HTML标准，他的主要目标是提供所有内容而不需要任何的像flash，silverlight等的额外插件，
这些内容来自动画，视频，富GUI等
HTML5是万维网联盟（W3C）和网络超文本应用技术工作组（WHATWG）之间合作输出的
XHTML
xhtml与html严格意义上其实没什么区别，xhtml1.0的开发实际上是作为html4.01与xml2.0的一个过渡的网页版本而存在的，
因为xml的解析语法过于苛刻，简单一句话就是：只要网页中出现一处错误，则浏览器停止解析。
XML:（可扩展标记语言）
自定义XML+XSLT=>HTML，最常见的文档型应用之一。XML存放整个文档的XML数据，然后XSLT将XML转换、
解析，结合XSLT中的HTML标签，最终成为HTML，显示在浏览器上。典型的...
# xhtml和html有什么区别
HTML是一种基本的WEB网页设计语言，XHTML是一个基于XML的置标语言
最主要的不同：
XHTML 元素必须被正确地嵌套。
XHTML 元素必须被关闭。
标签名必须用小写字母。
XHTML 文档必须拥有根元素。
# Canvas和SVG 异同
相同:
1 都是html5支持的两种可视化技术。基于这两种技术，诞生了很多可视化工具
2 这两种方式在功能上是等同的，任何一种都可以用另一种来模拟。它们都是有效的图形工具，
可用来快速创建在网页中显示的轻型图形；它们都使用 JavaScript 和 HTML；它们都遵守万维网联合会 (W3C) 标准
3 都允许您在浏览器中创建图形，但是它们在根本上是不同的。它们很不相同，他们各有强项和弱点
不同:
1 Canvas 通过JavaScript来绘制2D图形。Canvas 是逐像素进行渲染的。在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。
如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象
SVG 是一种使用 XML 描述 2D 图形的语言。SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。
在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形
2 Canvas 是基于像素的即时模式图形系统，最适合较小的表面或较大数量的对象，Canvas不支持鼠标键盘等事件。
SVG 是基于形状的保留模式图形系统，更加适合较大的表面或较小数量的对象。Canvas和SVG在修改方式上还存在着不同。
绘制Canvas对象后，不能使用脚本和 CSS 对它进行修改。因为 SVG 对象是文档对象模型的一部分，所以可以随时使用脚本和 CSS 修改它们。
3 Canvas
1)依赖分辨率
2)不支持事件处理器
3)弱的文本渲染能力
4)能够以 .png 或 .jpg 格式保存结果图像
5)最适合图像密集型的游戏，其中的许多对象会被频繁重绘
SVG
1)不依赖分辨率
2)支持事件处理器
3)最适合带有大型渲染区域的应用程序（比如谷歌地图）
4)复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
5)不适合游戏应用
# HTML5 为什么只需要写 <!DOCTYPE HTML>？ 作用是啥 (或则叫 文档类型很)
1 HTML4 基于SGML，所以需要对DTD进行引用，才能告知浏览器文档所使用的文档类型。
2 HTML5 不基于SGML 但是需要DOCTYPE来规范浏览器的行为（让浏览器按照他们应该的方式来运行）
3 <meta charset=”UTF-8″> 设置html编码格式
# 行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？
行内元素：a b span img input select strong
块级元素：div ul ol li dl dt dd h1 h2 h3 h4 p
空元素：<br> <hr> <img> <link> <meta>
# 页面导入样式时，使用link和@import有什么区别？
1）link属于XHTML标签，而@import是css提供的；
2）页面被加载时，link会同时被加载，而@import引用的css会等到页面被加载完再加载；
3）@import只在IE5以上才能识别，而link是XHTML标签，无兼容问题；
4）link方式的样式的权重高于@import的权重。
# html5 新增 和 移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？
新特性，新增元素：
1）内容元素：article、footer、header、nav、section
2）表单控件：calendar、date、time、email、url、search
3）控件元素：webworker，websockt，Geolocation
移除元素：
1）显现层元素：basefont，big，center，font，s，strike，tt，u
2）性能较差元素：frame，frameset，noframes
处理兼容问题有两种方式：
1）IE6/IE7/IE8支持通过document方法产生的标签，利用这一特性让这些浏览器支持HTML5新标签。
2）使用是html5shim框架
另外，DOCTYPE声明的方式是区分HTML和HTML5标志的一个重要因素，此外，还可以根据新增的结构，功能元素来加以区分。
# 如何区分 HTML 和 HTML5？
1）在文档类型声明上不同：
HTML是很长的一段代码，很难记住，遵守dtd约束
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
而HTML5却只有简简单单的声明，方便记忆。只需要DOCTYPE来规范浏览器的行为
<!DOCTYPE html>
2）在结构语义上不同：
HTML：没有体现结构语义化的标签，通常都是这样来命名的<div id="header"></div>，这样表示网站的头部。
HTML5：在语义上却有很大的优势。提供了一些新的标签，比如：<header><article><footer>
一个典型的WEB页面包含头部，脚部，导航，中心区域，侧边栏。现在如果我们想在在HTML4的HTML区域中呈现这些内容，我们可能要使用DIV标签。
但是在HTML5中通过为这些区域创建元素名称使他们更加清晰，也使得你的HTML更加可读
# html5有哪些新特性
canvas(画布)
audio 定义音频内容
video 定义视频（video 或者 movie）
地理定位
web存储 :localStorage
拖拽控制: draggable="true" 使元素可拖动，把 draggable 属性设置为 true ：
表单
<datalist> 定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。
<keygen> 规定用于表单的密钥对生成器字段。
<output> 定义不同类型的输出，比如脚本的输出。
# 请解释一下什么是语义化的HTML。
1 含义:内容使用特定标签，通过标签就能大概了解整体页面的布局结构（在什么情况下我可以使用这个标签才合理）
2 为什么使用语义化标签?
1）用正确的标签做正确的事情；
2）html语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析；
3）即使在没有css样式情况下也以一种文档格式显示，并且是容易阅读的；
4）搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，利于SEO；
5）使于读源代码的人对网站更容易将网站分块，便于阅读维护理解。
3 html语义标签
p 段落
strong和em 加粗 (但strong字面含义更强 推荐 见名知意 也是语义化标签的含义之所在)
ul 有序列表用
ol 无序列表用...
4 html5 新增语义话标签
1)header(页眉): 标签:定义文档的页面组合，通常是一些引导和导航信息
2)footer(页脚): 标签:定义 section(章节) 或 document 的页脚。
3)nav(导航): 标签:导航链接放在nav标签里。
4)article(文章): 装载显示一个独立的文章内容 内层的artilce对外层的article标签有隶属的关系
<article>
<h1>文章标题</h1>
这是一篇文章
<article>评论1...</article>
<article>评论2...</article>
</article>
5)section(章节): 使用内部article去定义区域或者把分组内容放到区域里
<section>
<h1>章节一</h1>
<p>详细内容...</p>
</section>
<section>
<h1>章节二</h1>
<p>详细内容...</p>
</section>
6)mark(标记): 标签:定义带有记号的文本。请在需要突出显示文本时使用 <mark> 标签....
7)<aside>：代表页面的侧边栏内容
总结:1 让对方知道你清楚语义化标签含义
2 让对方知道你清楚为什么用语义化标签
5 让对方知道你了解html5新增了一些语义化标签(举几个语义化标签就行不用全说 因为实际开发也不一定用 )
是否是新手 回答问题就能听出来 新手问啥答啥 老鬼 会测出一堆相关问题 这也是他们为什么能聊那么长时间
# HTML5的离线储存怎么使用，工作原理能不能解释一下？
localStorage 长期存储数据，浏览器关闭后数据不丢失；
sessionStorage 数据在浏览器关闭后自动删除。
# DOCTYPE作用? 严格模式与混杂模式如何区分？它们有何意义?
1）<!Doctype>作用是告诉浏览器 我的html使用的那个版本的html协议写的 让浏览器按照声明的协议执行
2）严格模式的排版和JS运作模式是以该浏览器支持的最高标准运行。
3）混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。
4）DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。
# 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已经渐渐的退出了前端开发。
# 如何实现浏览器内多个标签页之间的通信？
调用localstorge、cookies等本地存储方式
#常见兼容性问题？
1）png24位的图片在IE6浏览器上出现背景；
解决方案是：做成PNG8；
2）浏览器默认的 margin 和 padding 不同。
解决方案是：加一个全局的*{margin:0;padding:0;}来统一。
3）IE6双边距bug：块属性标签float后，又有横行的 margin 情况下，在 IE6 显示 margin 比设置的大。
浮动IE产生的双倍距离 #box{float:left;width:10px;margin:0 0 0 100px;}
这种情况下IE6会产生200px的距离。
解决方法：加上_display：inline，使浮动忽略
4）IE下，可以使用获取常规属性的方法来获取自定义属性，也可以使用getAttribute()获取自定义属性；
使用获取常规属性的方法来获/取自定义属性：getElementbyId("#box").Attributes["属性名"]
Firefox下，只能使用getAttribute()获取自定义属性。
解决方法：统一通过getAttribute()获取自定义属性。
5）IE下，even对象有x，y属性，但是没有pageX，pageY属性，
解决方法：（条件注释）缺点是在IE浏览器下可能会增加额外的HTTP请求数。
6）Chrome中文界面下默认会将小于 12px 的文本强制按照 12px 显示
解决方法：可通过加入 CSS 属性 -webkt-text-size-adjust:none;解决
7）超链接访问过后 hover 样式就不出现了，被点击访问过的超链接样式不在具有 hover 和 active ；
解决方法：改变CSS属性的排列顺序：L-V-H-A: a:link{ } a:visited{ } a:hover{ } a:active{ }
# 支持HTML5新标签
1)IE8/IE7/IE6支持通过 document.createElement 方法产生的标签，
可以利用这一特性让这些浏览器支持 HTML5 新标签，浏览器支持新标签后，还需要添加标签默认的样式；
2)当然最好的方式是直接使用成熟的框架、使用最多的是 html5shim 框架
针对IE浏览器比较好的解决方案是html5shiv。html5shiv主要解决HTML5提出的新的元素不被IE6-8识别，
这些新元素不能作为父节点包裹子元素，并且不能应用CSS样式。让CSS 样式应用在未知元素上只需执行
document.createElement(elementName) 即可实现。html5shiv就是根据这个原理创建的。
html5shiv的使用非常的简单，考虑到IE9是支持html5的，所以只需要在页面head中添加如下代码即可：
<!--[if lt IE 9]>
<script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>
<![endif]-->
# 简述一下src与href的区别：
href: <link href=”common.css” rel=”stylesheet”/>
是指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，用于超链接。
src: <script src =”js.js”></script>
是指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，
例如js脚本，img图片和frame等元素。当浏览器解析到该元素时，会暂停其他资源的下载和处理，
直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。
这也是为什么将js脚本放在底部而不是头部。
# 浏览器的内核分别是什么?
IE: trident 内核
Firefox：gecko内核
Safari：webkit内核 (苹果浏览器)
Opera：以前是presto内核，Opera现已改用Google Chrome的Blink内核
Chrome：Blink(基于webkit，Google与Opera Software共同开发)
# HTML5 中如何嵌入音频？
HTML5 支持 MP3、Wav 和 Ogg 格式的音频，下面是在网页中嵌入音频的简单示例：
<audio controls>
<source src=”jamshed.mp3″ type=”audio/mpeg”>
Your browser does’nt support audio embedding feature.
</audio>
# HTML5 中如何嵌入视频？
HTML5 支持 MP4、WebM 和 Ogg 格式的视频，下面是简单示例：
<video width=”450″ height=”340″ controls>
<source src=”jamshed.mp4″ type=”video/mp4″>
Your browser does’nt support video embedding feature.
</video>
# HTML5 存储类型有什么区别？
HTML5 能够本地存储数据，在之前都是使用 cookies。
HTML5 提供了下面两种本地存储方案：
localStorage 用于持久化的本地存储，数据永远不会过期，关闭浏览器也不会丢失。
sessionStorage 同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储
# HTML5 标准提供了哪些新的 API？
HTML5 提供的应用程序 API 主要有：
Media API
Text Track API
Applocation Cache API
User Interaction
Data Transfer API
Command API
Constraint Validation API
History API
# 请描述一下 cookies，sessionStorage 和 localStorage 的区别？
cookie:
Cookie是在你浏览网页的时候，网站服务器放在客户端（Client End，就是你的电脑）里面的一个小小的TXT文件。
这个文件里面存储了一些与你访问的这个网站有关的一些东西，当你下一次访问这个网站的时候，
Cookie就会记住你上次访问时候的一些状态或者设置，让服务器针对性的发送页面的相关内容。
Cookie里面包含的信息并没有一个标准的格式，各个网站服务器的规范都可能不同，但一般会包括：
所访问网站的域名（domain name），访问开始的时间，访问者的IP地址等客户端信息，访问者关于这个网站的一些设置等等
sessionStorage:
用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。
因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储
localStorage:
用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。
web storage和cookie的区别:
Web Storage的概念和cookie相似，区别是它是为了更大容量存储设计的。Cookie的大小是受限的，
并且每次你请求一个新的页面的时候Cookie都会被发送过去，这样无形中浪费了带宽，另外cookie还需要指定作用域，不可以跨域调用。
除此之外，Web Storage拥有setItem,getItem,removeItem,clear等方法，不像cookie需要前端开发者自己封装setCookie，getCookie。
但是Cookie也是不可或缺的：Cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在 ，而Web Storage仅仅是为了在本地“存储”数据而生
# 为什么利用多个域名来存储网站资源会更有效？
CDN缓存更方便 cnd：服务器
突破浏览器并发限制
节约cookie带宽
节约主域名的连接数，优化页面响应速度
防止不必要的安全问题
# 前端页面有哪三层构成，分别是什么?作用是什么?
结构层 Html 表示层 CSS 行为层 js
# 写出几种IE6 BUG的解决方法 (其实了解下就行 ie6 直接可以放弃)
1.双边距BUG float引起的 使用display
2.3像素问题 使用float引起的 使用dislpay:inline -3px
3.超链接hover 点击后失效 使用正确的书写顺序 link visited hover active
4.Ie z-index问题 给父级添加position:relative
5.Png 透明 使用js代码 改
6.Min-height 最小高度 ！Important 解决’
7.select 在ie6下遮盖 使用iframe嵌套
8.为什么没有办法定义1px左右的宽度容器（IE6默认的行高造成的，使用over:hidden,zoom:0.08 line-height:1px）
# 标签上title与alt属性的区别是什么?
Alt 当图片不显示是 用文字代表。
Title 为该属性提供信息
# div+css的布局较table布局有什么优点？
页面加载速度更快、结构化清晰、页面显示简洁。
哦哦发，表现与结构相 分离。
易于优化（seo）搜索引擎更友好，排名更容易靠前。
Seo：Search Engine Optimization的缩写， 翻译成中文就是“搜索引擎优化"
就是通过一定的方法在网站内外发布文章、交换连接等，最终达到某个关键词在搜索引擎上获得好的排名。
# img的alt与title有何异同？ strong与em的异同？
alt 是图片加载失败时，显示在网页上的替代文字；
title 是鼠标放上面时显示的文字。
strong:粗体强调标签，强调，表示内容的重要性
em:斜体强调标签，更强烈强调，表示内容的强调点
# 你能描述一下渐进增强和优雅降级之间的不同吗?
渐进增强 progressive enhancement：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
优雅降级 graceful degradation：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。
区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的，能够起作用的版本开始，
并不断扩充，以适应未来环境的需要。降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带。
优雅降级: 观点认为应该针对那些最高级、最完善的浏览器来设计网站。而将那些被认为“过时”或有功能缺失的浏览器下的测试工作安排在开发周期的最后阶段，
并把测试对象限定为主流浏览器（如 IE、Mozilla 等）的前一个版本。 在这种设计范例下，旧版的浏览器被认为仅能提供“简陋却无妨 (poor, but passable)”
的浏览体验。你可以做一些小的调整来适应某个特定的浏览器。但由于它们并非我们所关注的焦点，因此除了修复较大的错误之外，其它的差异将被直接忽略。
渐进增强: 观点则认为应关注于内容本身。 内容是我们建立网站的诱因。有的网站展示它，有的则收集它，有的寻求，有的操作，
还有的网站甚至会包含以上的种种，但相同点是它们全都涉及到内容。这使得“渐进增强”成为一种更为合理的设计范例。
这也是它立即被 Yahoo! 所采纳并用以构建其“分级式浏览器支持 (Graded Browser Support)”策略的原因所在
# 知道的网页制作会用到的图片格式有哪些？
png-8，png-24，jpeg，gif，svg。
但是上面的那些都不是面试官想要的最后答案。面试官希望听到是Webp。（是否有关注新技术，新鲜事物）
科普一下Webp：WebP格式，谷歌（google）开发的一种旨在加快图片加载速度的图片格式。图片压缩体积大约只有JPEG的2/3，
并能节省大量的服务器带宽资源和数据空间。Facebook Ebay等知名网站已经开始测试并使用WebP格式。
在质量相同的情况下，WebP格式图像的体积要比JPEG格式图像小40%
SGML:（标准通用标记语言）
SGML 是一个标准，告诉我们怎么去指定文档标记。他是只描述文档标记应该是怎么样的元语言，HTML是被用SGML描述的标记语言。
现在解析SGML是一件痛苦的事情，所以创建了XML使事情更好。XML使用了SGML，
例如：在SGML中你必须使用起始和结束标签，但是在XML你可以有自动关闭的结束标签。
XHTML创建于XML，他被使用在HTML4.0中。你可以参考下面代码片段中展示的XML DTD
总之，SGML是所有类型的父类，较旧的HTML利用SGML，HTML4.0使用派生自XML的XHTML
因此利用SGML创建了HTML参照和必须共同遵守的DTD，你会经常在HTML页面的头部发现“DOCTYPE”属性，
用来定义用于解析目标DTD
HTML5:（超文本标记语言）
HTML5是最新的HTML标准，他的主要目标是提供所有内容而不需要任何的像flash，silverlight等的额外插件，
这些内容来自动画，视频，富GUI等
HTML5是万维网联盟（W3C）和网络超文本应用技术工作组（WHATWG）之间合作输出的
XHTML
xhtml与html严格意义上其实没什么区别，xhtml1.0的开发实际上是作为html4.01与xml2.0的一个过渡的网页版本而存在的，
因为xml的解析语法过于苛刻，简单一句话就是：只要网页中出现一处错误，则浏览器停止解析。
XML:（可扩展标记语言）
自定义XML+XSLT=>HTML，最常见的文档型应用之一。XML存放整个文档的XML数据，然后XSLT将XML转换、
解析，结合XSLT中的HTML标签，最终成为HTML，显示在浏览器上。典型的...
# xhtml和html有什么区别
HTML是一种基本的WEB网页设计语言，XHTML是一个基于XML的置标语言
最主要的不同：
XHTML 元素必须被正确地嵌套。
XHTML 元素必须被关闭。
标签名必须用小写字母。
XHTML 文档必须拥有根元素。
# Canvas和SVG 异同
相同:
1 都是html5支持的两种可视化技术。基于这两种技术，诞生了很多可视化工具
2 这两种方式在功能上是等同的，任何一种都可以用另一种来模拟。它们都是有效的图形工具，
可用来快速创建在网页中显示的轻型图形；它们都使用 JavaScript 和 HTML；它们都遵守万维网联合会 (W3C) 标准
3 都允许您在浏览器中创建图形，但是它们在根本上是不同的。它们很不相同，他们各有强项和弱点
不同:
1 Canvas 通过JavaScript来绘制2D图形。Canvas 是逐像素进行渲染的。在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。
如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象
SVG 是一种使用 XML 描述 2D 图形的语言。SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。
在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形
2 Canvas 是基于像素的即时模式图形系统，最适合较小的表面或较大数量的对象，Canvas不支持鼠标键盘等事件。
SVG 是基于形状的保留模式图形系统，更加适合较大的表面或较小数量的对象。Canvas和SVG在修改方式上还存在着不同。
绘制Canvas对象后，不能使用脚本和 CSS 对它进行修改。因为 SVG 对象是文档对象模型的一部分，所以可以随时使用脚本和 CSS 修改它们。
3 Canvas
1)依赖分辨率
2)不支持事件处理器
3)弱的文本渲染能力
4)能够以 .png 或 .jpg 格式保存结果图像
5)最适合图像密集型的游戏，其中的许多对象会被频繁重绘
SVG
1)不依赖分辨率
2)支持事件处理器
3)最适合带有大型渲染区域的应用程序（比如谷歌地图）
4)复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
5)不适合游戏应用
# HTML5 为什么只需要写 <!DOCTYPE HTML>？ 作用是啥 (或则叫 文档类型很)
1 HTML4 基于SGML，所以需要对DTD进行引用，才能告知浏览器文档所使用的文档类型。
2 HTML5 不基于SGML 但是需要DOCTYPE来规范浏览器的行为（让浏览器按照他们应该的方式来运行）
3 <meta charset=”UTF-8″> 设置html编码格式
# 行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？
行内元素：a b span img input select strong
块级元素：div ul ol li dl dt dd h1 h2 h3 h4 p
空元素：<br> <hr> <img> <link> <meta>
# 页面导入样式时，使用link和@import有什么区别？
1）link属于XHTML标签，而@import是css提供的；
2）页面被加载时，link会同时被加载，而@import引用的css会等到页面被加载完再加载；
3）@import只在IE5以上才能识别，而link是XHTML标签，无兼容问题；
4）link方式的样式的权重高于@import的权重。
# html5 新增 和 移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？
新特性，新增元素：
1）内容元素：article、footer、header、nav、section
2）表单控件：calendar、date、time、email、url、search
3）控件元素：webworker，websockt，Geolocation
移除元素：
1）显现层元素：basefont，big，center，font，s，strike，tt，u
2）性能较差元素：frame，frameset，noframes
处理兼容问题有两种方式：
1）IE6/IE7/IE8支持通过document方法产生的标签，利用这一特性让这些浏览器支持HTML5新标签。
2）使用是html5shim框架
另外，DOCTYPE声明的方式是区分HTML和HTML5标志的一个重要因素，此外，还可以根据新增的结构，功能元素来加以区分。
# 如何区分 HTML 和 HTML5？
1）在文档类型声明上不同：
HTML是很长的一段代码，很难记住，遵守dtd约束
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
而HTML5却只有简简单单的声明，方便记忆。只需要DOCTYPE来规范浏览器的行为
<!DOCTYPE html>
2）在结构语义上不同：
HTML：没有体现结构语义化的标签，通常都是这样来命名的<div id="header"></div>，这样表示网站的头部。
HTML5：在语义上却有很大的优势。提供了一些新的标签，比如：<header><article><footer>
一个典型的WEB页面包含头部，脚部，导航，中心区域，侧边栏。现在如果我们想在在HTML4的HTML区域中呈现这些内容，我们可能要使用DIV标签。
但是在HTML5中通过为这些区域创建元素名称使他们更加清晰，也使得你的HTML更加可读
# html5有哪些新特性
canvas(画布)
audio 定义音频内容
video 定义视频（video 或者 movie）
地理定位
web存储 :localStorage
拖拽控制: draggable="true" 使元素可拖动，把 draggable 属性设置为 true ：
表单
<datalist> 定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。
<keygen> 规定用于表单的密钥对生成器字段。
<output> 定义不同类型的输出，比如脚本的输出。
# 请解释一下什么是语义化的HTML。
1 含义:内容使用特定标签，通过标签就能大概了解整体页面的布局结构（在什么情况下我可以使用这个标签才合理）
2 为什么使用语义化标签?
1）用正确的标签做正确的事情；
2）html语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析；
3）即使在没有css样式情况下也以一种文档格式显示，并且是容易阅读的；
4）搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，利于SEO；
5）使于读源代码的人对网站更容易将网站分块，便于阅读维护理解。
3 html语义标签
p 段落
strong和em 加粗 (但strong字面含义更强 推荐 见名知意 也是语义化标签的含义之所在)
ul 有序列表用
ol 无序列表用...
4 html5 新增语义话标签
1)header(页眉): 标签:定义文档的页面组合，通常是一些引导和导航信息
2)footer(页脚): 标签:定义 section(章节) 或 document 的页脚。
3)nav(导航): 标签:导航链接放在nav标签里。
4)article(文章): 装载显示一个独立的文章内容 内层的artilce对外层的article标签有隶属的关系
<article>
<h1>文章标题</h1>
这是一篇文章
<article>评论1...</article>
<article>评论2...</article>
</article>
5)section(章节): 使用内部article去定义区域或者把分组内容放到区域里
<section>
<h1>章节一</h1>
<p>详细内容...</p>
</section>
<section>
<h1>章节二</h1>
<p>详细内容...</p>
</section>
6)mark(标记): 标签:定义带有记号的文本。请在需要突出显示文本时使用 <mark> 标签....
7)<aside>：代表页面的侧边栏内容
总结:1 让对方知道你清楚语义化标签含义
2 让对方知道你清楚为什么用语义化标签
5 让对方知道你了解html5新增了一些语义化标签(举几个语义化标签就行不用全说 因为实际开发也不一定用 )
是否是新手 回答问题就能听出来 新手问啥答啥 老鬼 会测出一堆相关问题 这也是他们为什么能聊那么长时间
# HTML5的离线储存怎么使用，工作原理能不能解释一下？
localStorage 长期存储数据，浏览器关闭后数据不丢失；
sessionStorage 数据在浏览器关闭后自动删除。
# DOCTYPE作用? 严格模式与混杂模式如何区分？它们有何意义?
1）<!Doctype>作用是告诉浏览器 我的html使用的那个版本的html协议写的 让浏览器按照声明的协议执行
2）严格模式的排版和JS运作模式是以该浏览器支持的最高标准运行。
3）混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。
4）DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。
# 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已经渐渐的退出了前端开发。
# 如何实现浏览器内多个标签页之间的通信？
调用localstorge、cookies等本地存储方式
#常见兼容性问题？
1）png24位的图片在IE6浏览器上出现背景；
解决方案是：做成PNG8；
2）浏览器默认的 margin 和 padding 不同。
解决方案是：加一个全局的*{margin:0;padding:0;}来统一。
3）IE6双边距bug：块属性标签float后，又有横行的 margin 情况下，在 IE6 显示 margin 比设置的大。
浮动IE产生的双倍距离 #box{float:left;width:10px;margin:0 0 0 100px;}
这种情况下IE6会产生200px的距离。
解决方法：加上_display：inline，使浮动忽略
4）IE下，可以使用获取常规属性的方法来获取自定义属性，也可以使用getAttribute()获取自定义属性；
使用获取常规属性的方法来获/取自定义属性：getElementbyId("#box").Attributes["属性名"]
Firefox下，只能使用getAttribute()获取自定义属性。
解决方法：统一通过getAttribute()获取自定义属性。
5）IE下，even对象有x，y属性，但是没有pageX，pageY属性，
解决方法：（条件注释）缺点是在IE浏览器下可能会增加额外的HTTP请求数。
6）Chrome中文界面下默认会将小于 12px 的文本强制按照 12px 显示
解决方法：可通过加入 CSS 属性 -webkt-text-size-adjust:none;解决
7）超链接访问过后 hover 样式就不出现了，被点击访问过的超链接样式不在具有 hover 和 active ；
解决方法：改变CSS属性的排列顺序：L-V-H-A: a:link{ } a:visited{ } a:hover{ } a:active{ }
# 支持HTML5新标签
1)IE8/IE7/IE6支持通过 document.createElement 方法产生的标签，
可以利用这一特性让这些浏览器支持 HTML5 新标签，浏览器支持新标签后，还需要添加标签默认的样式；
2)当然最好的方式是直接使用成熟的框架、使用最多的是 html5shim 框架
针对IE浏览器比较好的解决方案是html5shiv。html5shiv主要解决HTML5提出的新的元素不被IE6-8识别，
这些新元素不能作为父节点包裹子元素，并且不能应用CSS样式。让CSS 样式应用在未知元素上只需执行
document.createElement(elementName) 即可实现。html5shiv就是根据这个原理创建的。
html5shiv的使用非常的简单，考虑到IE9是支持html5的，所以只需要在页面head中添加如下代码即可：
<!--[if lt IE 9]>
<script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>
<![endif]-->
# 简述一下src与href的区别：
href: <link href=”common.css” rel=”stylesheet”/>
是指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，用于超链接。
src: <script src =”js.js”></script>
是指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，
例如js脚本，img图片和frame等元素。当浏览器解析到该元素时，会暂停其他资源的下载和处理，
直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。
这也是为什么将js脚本放在底部而不是头部。
# 浏览器的内核分别是什么?
IE: trident 内核
Firefox：gecko内核
Safari：webkit内核 (苹果浏览器)
Opera：以前是presto内核，Opera现已改用Google Chrome的Blink内核
Chrome：Blink(基于webkit，Google与Opera Software共同开发)
# HTML5 中如何嵌入音频？
HTML5 支持 MP3、Wav 和 Ogg 格式的音频，下面是在网页中嵌入音频的简单示例：
<audio controls>
<source src=”jamshed.mp3″ type=”audio/mpeg”>
Your browser does’nt support audio embedding feature.
</audio>
# HTML5 中如何嵌入视频？
HTML5 支持 MP4、WebM 和 Ogg 格式的视频，下面是简单示例：
<video width=”450″ height=”340″ controls>
<source src=”jamshed.mp4″ type=”video/mp4″>
Your browser does’nt support video embedding feature.
</video>
# HTML5 存储类型有什么区别？
HTML5 能够本地存储数据，在之前都是使用 cookies。
HTML5 提供了下面两种本地存储方案：
localStorage 用于持久化的本地存储，数据永远不会过期，关闭浏览器也不会丢失。
sessionStorage 同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储
# HTML5 标准提供了哪些新的 API？
HTML5 提供的应用程序 API 主要有：
Media API
Text Track API
Applocation Cache API
User Interaction
Data Transfer API
Command API
Constraint Validation API
History API
# 请描述一下 cookies，sessionStorage 和 localStorage 的区别？
cookie:
Cookie是在你浏览网页的时候，网站服务器放在客户端（Client End，就是你的电脑）里面的一个小小的TXT文件。
这个文件里面存储了一些与你访问的这个网站有关的一些东西，当你下一次访问这个网站的时候，
Cookie就会记住你上次访问时候的一些状态或者设置，让服务器针对性的发送页面的相关内容。
Cookie里面包含的信息并没有一个标准的格式，各个网站服务器的规范都可能不同，但一般会包括：
所访问网站的域名（domain name），访问开始的时间，访问者的IP地址等客户端信息，访问者关于这个网站的一些设置等等
sessionStorage:
用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。
因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储
localStorage:
用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。
web storage和cookie的区别:
Web Storage的概念和cookie相似，区别是它是为了更大容量存储设计的。Cookie的大小是受限的，
并且每次你请求一个新的页面的时候Cookie都会被发送过去，这样无形中浪费了带宽，另外cookie还需要指定作用域，不可以跨域调用。
除此之外，Web Storage拥有setItem,getItem,removeItem,clear等方法，不像cookie需要前端开发者自己封装setCookie，getCookie。
但是Cookie也是不可或缺的：Cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在 ，而Web Storage仅仅是为了在本地“存储”数据而生
# 为什么利用多个域名来存储网站资源会更有效？
CDN缓存更方便 cnd：服务器
突破浏览器并发限制
节约cookie带宽
节约主域名的连接数，优化页面响应速度
防止不必要的安全问题
# 前端页面有哪三层构成，分别是什么?作用是什么?
结构层 Html 表示层 CSS 行为层 js
# 写出几种IE6 BUG的解决方法 (其实了解下就行 ie6 直接可以放弃)
1.双边距BUG float引起的 使用display
2.3像素问题 使用float引起的 使用dislpay:inline -3px
3.超链接hover 点击后失效 使用正确的书写顺序 link visited hover active
4.Ie z-index问题 给父级添加position:relative
5.Png 透明 使用js代码 改
6.Min-height 最小高度 ！Important 解决’
7.select 在ie6下遮盖 使用iframe嵌套
8.为什么没有办法定义1px左右的宽度容器（IE6默认的行高造成的，使用over:hidden,zoom:0.08 line-height:1px）
# 标签上title与alt属性的区别是什么?
Alt 当图片不显示是 用文字代表。
Title 为该属性提供信息
# div+css的布局较table布局有什么优点？
页面加载速度更快、结构化清晰、页面显示简洁。
哦哦发，表现与结构相 分离。
易于优化（seo）搜索引擎更友好，排名更容易靠前。
Seo：Search Engine Optimization的缩写， 翻译成中文就是“搜索引擎优化"
就是通过一定的方法在网站内外发布文章、交换连接等，最终达到某个关键词在搜索引擎上获得好的排名。
# img的alt与title有何异同？ strong与em的异同？
alt 是图片加载失败时，显示在网页上的替代文字；
title 是鼠标放上面时显示的文字。
strong:粗体强调标签，强调，表示内容的重要性
em:斜体强调标签，更强烈强调，表示内容的强调点
# 你能描述一下渐进增强和优雅降级之间的不同吗?
渐进增强 progressive enhancement：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
优雅降级 graceful degradation：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。
区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的，能够起作用的版本开始，
并不断扩充，以适应未来环境的需要。降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带。
优雅降级: 观点认为应该针对那些最高级、最完善的浏览器来设计网站。而将那些被认为“过时”或有功能缺失的浏览器下的测试工作安排在开发周期的最后阶段，
并把测试对象限定为主流浏览器（如 IE、Mozilla 等）的前一个版本。 在这种设计范例下，旧版的浏览器被认为仅能提供“简陋却无妨 (poor, but passable)”
的浏览体验。你可以做一些小的调整来适应某个特定的浏览器。但由于它们并非我们所关注的焦点，因此除了修复较大的错误之外，其它的差异将被直接忽略。
渐进增强: 观点则认为应关注于内容本身。 内容是我们建立网站的诱因。有的网站展示它，有的则收集它，有的寻求，有的操作，
还有的网站甚至会包含以上的种种，但相同点是它们全都涉及到内容。这使得“渐进增强”成为一种更为合理的设计范例。
这也是它立即被 Yahoo! 所采纳并用以构建其“分级式浏览器支持 (Graded Browser Support)”策略的原因所在
# 知道的网页制作会用到的图片格式有哪些？
png-8，png-24，jpeg，gif，svg。
但是上面的那些都不是面试官想要的最后答案。面试官希望听到是Webp。（是否有关注新技术，新鲜事物）
科普一下Webp：WebP格式，谷歌（google）开发的一种旨在加快图片加载速度的图片格式。图片压缩体积大约只有JPEG的2/3，
并能节省大量的服务器带宽资源和数据空间。Facebook Ebay等知名网站已经开始测试并使用WebP格式。
在质量相同的情况下，WebP格式图像的体积要比JPEG格式图像小40%
526
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
