HTML部分
（1） 谈谈你对Web标准的理解。
WEB标准不是某一个标准，而是一系列标准的组合。
网页主要由三部分组成；
1>结构（Structure）结构化标准语言包括XHTML和XML
2>表现（Presentation）表现保准语言主要包括css
3>行为（Behavior）行为标准主要包括对象模型（如 W3C DOM），ECMAScript并且要求这三部分分离。这些标准大部分由W3C起草和发布，也有一些是其他标准组织制定的标准，比如ECMA（European Computer Manufactures Associatio ）的ECMAScript标准。
以上3点相互分离有哪些优点呢？
（1）易于维护：只 需要更改css文件，就可以改变整站的样式
（2）页面相应快：HTML文档体积变小，响应的时间短
（3）可访问性：语义化的HTML（结构和表现相互分离的HTML）编写的网页文件，更加容易被屏幕阅读器识别。
（4）设备的兼容性：不同的样式表可以让网页在不同的设备上呈现不同的样式
（5）搜索引擎：语义化的HTML能更容易被搜索引擎解析，，提升排名
（2） 浏览器标准模式和怪异模式之间的区别是什么？
总的来说就是盒子模型 渲染模式的不同
盒模型
在怪异模式下，盒模型为IE盒模型
height =border-top+padding-top+content+padding-bottom+border-bottom；
width=border-left+padding-left+content+padding-right+border-right
而标准的盒模型
height=content;
width=content;
图片元素的垂直对齐方式
对于inline元素和table-cell元素，标准模式下vertical-align属性默认取值为baseline，在怪异模式下，table单元格中的图片的vertical-align属性的默认值为bottom，因此在图片的底部会有像素的空间
<table>元素中的字体
css中，对于font的属性都是可以继承的，怪异模式下，对于table元素，字体的某些元素不会从body等其他封装元素中继承得到，特别是font-size属性
内联元素的尺寸
标准模式下，non-replace inline元素无法自定义大小，怪异模式下，定义这些元素的width ，height属性可以影响这些元素显示 的尺寸。
元素的百分比高度
在css中对于元素的百分比高度的规定如下：百分比为元素 包含块的高度，不可以为负值，如果包含块的高度没有显示的给出，该值等同于auto，所以百分比的高度必须在元素有高度声明的情况下使用。
当一个元素使用百分比高度 的时候，标准模式下，高度取决于内容的变化，怪异模式下，百分比高度被正确的使用。
元素溢出的处理
标准模式下，overflow取默认值visible，在怪异模式下，该溢出会被当作扩展box来对待，即元素的大小由其内容决定，溢出不会裁剪，元素框自动的调整，包含溢出内容。
（3）
<img>标签上的title与alt属性的区别是什么?
alt:当图片不显示的时候用文字替代
title：为该属性提供信息
（4）：你如何对网站的文件和资源进行优化？
1> 尽可能减少http请求的次数，将css,js图片各自合并
2> 将css放在页面的最上面
3> 将js放在页面的最下面
4>避免在css中使用表达式
5>将css,js都放在外部文件中
6> 减少DNS查询
7>最小化css,js减少文件的体积
8>避免重定向
9>移除重复的脚本
10>配置实体的标签ETag
11>使用AJAX缓存，让网站内容分批加载，局部更新
12> 使用CDN托管，降低通信的距离
13>添加Expire/Cache-Control头
14>启用Gzip压缩文件
详情请看：http://blog.csdn.net/carrie_zzz/article/details/78824289
（5）：什么是语义化的HTML？
根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅 的代码的同时让浏览器的爬虫和及其很好的解析（直观的认识标签）
（6）：超级链接有哪些常见的表现形式？
普通超链接，语法：<a href="" target="">文本</a>
下载链接，即目标文档为下载资源，语法如：<a href="DAY02.zip”>下载</a>
电子邮件链接，用于链接到email,语法如下：<a href="mailto:tarena@tarena.com.cn">联系我们</a>
空连接，用于返回页面的顶部，语法如下：<a href="#">...</a>
链接到js以实现特定的功能语法如下：<a href ="javascript :．．．＂＞ＪＳ功能＜／ａ＞
（７）：举例常用的结构 标记，并描述其作用
结构标记专门用于标识页面的不同结构，相对于使用<div>元素而言，可以实现语义化的标签。 常用的结构标记有：
<header>元素：用于定义文档的页眉；
<nav>元素：用于定义页面的导航链接部分；
<section>元素：用于定义文档中的节，表示文档中的一个具体组 成部分；
<article>元素：常用于定义独立于文档的其他部分的内容；
<footer>元素：常用于定义某区域的脚注信息；
<aside>元素：常用于定义页面的一些额外组成部分，如广告栏、 侧边栏和相关引用信息等。
（８）：使用
<label>元素的直观效果是直接显示标记之间的文本，而且不会为文本呈现任何特殊效果。但是，它和其他文本标记所不同的是，它为鼠标用户改进了用户体验性。 这是因为，<label>元素可以附带一个for属性，只要将该属性的值设置为表单中任何一个控件的id属性的值，则当用户点击该标签（文本）时，浏览器就会自动将焦点转到和标签相关的表单控件上。即：如果在<label>元素内点击文本，就会触发此控件。
（９）：锚点的作用是什么？如何创建锚点？
锚点是文档中某行的一个记号，类似于书签，用于链接到文档中的某个位置。当定义了锚点后，我们可以创建直接跳至该锚点（比如页面中某个小节）的链接，这样使用者就无需不停地滚动页面来寻找他们需要的信息了。 在使用<a>元素创建锚点时，需要使用name 属性为其命名，代码如下所示：<a name=”anchorname1”>锚点一</a>然后就可以创建链接，直接跳转到锚点，代码如下所示：<a href=”#anchorname1”>回到锚点一</a>
（１０）：你做的页面在哪些流览器测试过？这些浏览器的内核分别是什么?
Trident：IE浏览器；
Gecko：Mozilla浏览器，比如Firefox；
Webkit：Safari浏览器，也是Chrome浏览器的内核原型；
Blink：Chrome浏览器，Opera浏览器。
（11）：写出几种IE6 BUG的解决方法
1>双边距BUG float引起的 使用display
2>像素问题 使用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默认的行高造成的，使用ov er:hidden,zoom:0.08 line-height:1px）
（12）：Doctype作用? 严格模式与混杂模式如何区分？它们有何意义?
1><!DOCTYPE>声明位于文档中的最前面，处于 标签之前。告知浏览器的解析器， 用什么文档类型 规范来解析这个文档。
2>严格模式的排版和 JS 运作模式是 以该浏览器支持的最高标准运行。
3>在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。
4>DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现
（13）：行内元素有哪些？块级元素有哪些？ 空(void)元素有那些
1>CSS规范规定，每个元素都有display属性，确定该元素的类型，每个元素都有默认的display值， 比如div默认display属性值为“block”，成为“块级”元素； span默认display属性值为“inline”，是“行内”元素。
2>行内元素有：a b span img input select strong（强调的语气） 块级元素有：div ul ol li dl dt dd h1 h2 h3 h4…p
3>知名的空元素：<br> <hr> <img> <input> <link> <meta>鲜为人知的是：<area> <base> <col> <command> <embed> <keygen> <param> <source> <track> <wbr>
（14）link 和@import 的区别是？
1>link是XHTML标签除了加载CSS外还可以定义RSS等其他事物；@import属于css范畴，只能加载CSS
2> link引用css时，在页面载入时同时加载；@import需要页面网页完全载入以后加载
3>link是XHTML标签，无兼容性的问题；@import是在css2.1提出的，低版本的浏览器是不支持的
4>link支持使用javascript控制DOM去改变样式；而@import不支持
（15）：xhtml和html有什么区别
HTML是一种基本的WEB网页设计语言，XHTML是一个基于XML的置标语言
最主要的不同：
XHTML 元素必须被正确地嵌套。
XHTML 元素必须被关闭。 标签名必须用小写字母。
XHTML 文档必须拥有根元素
（16）：html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？
HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。
1>绘画 canvas
2> 用于媒介回放的 video 和 audio 元素
3>本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失,sessionStorage 的数据在浏览器关闭后自动删除
4>语意化更好的内容元素，比如 article、footer、header、nav、section
5> 新的技术webworker, websockt, Geolocation
移除的元素
纯表现的元素：basefont，big，center，font, s，strike，tt，u；
对可用性产生负面影响的元素：frame，frameset，noframes；
（17）：HTML5 新的 DocType 和 Charset 是什么？
<！DOCTYPE html>
<meta charset=”UTF-8”>（18）：除了音频和视频，HTML5 还支持其他什么新的媒体元素
< embed>作为对外部应对容器
<track>为媒介规定外部文本轨道
<source>
（19）：HTML5 有哪些不同类型的存储，区别是什么？
HTML5 能够本地存储数据，在之前都是使用 cookies 使用的。HTML5 提供了下面两种本地存储方案：
localStorage 用于持久化的本地存储，数据永远不会过期，关闭浏览器也不会丢失。 sessionStorage 同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储
（20）：HTML5 标准提供了哪些新的 API？
Media api
History api
（21）：HTML5引入什么新的表单属性？
Datalist
Datatime
Output
Keygen
Date
Month
Week
Time
Number
Range
Url
（22）：什么是HTML5？
HTML5是最新的html标准，它主要目标是提供所有内容而不需要任何额外的插件
（23）：没有,html5还会工作吗？
不会，浏览器不能识别它是HTML文档；
（24）：哪些浏览器支持HTML5?
所有浏览器都支持
（25）：HTML5的页面结构
<header>代表HTML的头部数据
<nav>页面导航元素
<article>自包含的内容
<section>把分组内容放到区域里
<aside>代表页面侧边栏内容
<footter>代表页面的 脚部区域
（26）：HTML5中的datalist是什么？
HTML5中的Datalist元素有助于提供文本框自动完成特性
（27）：HTML5中什么是输出元素？
Output当你需要输出值的时候就是输出元素
（28）:什么是SVG？
SVG代表可缩放矢量图形（和canvas差不多）
（29）：iframe有哪些缺点？
iframe会阻塞主页面的Onload事件
iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载
使用iframe之前需要考虑这两个缺点。如果需要使用iframe，最好是通过javascript
动态的给iframe添加src属性值，这样可以绕开以上的两个问题。
（30）：请描述一下cookies,sessionStorage和localStorage的区别？
cookie在浏览器和服务器间来回的传递。sessionStorage和localStorage不会
sessionStorage和localStorage的存储空间很大
sessionStorage和localStorage 有更加丰富易用的接口
sessionStorage和localStorage个子独立的存储空间
（31）HTML5的离线存储？
localStorage长期存储数据，浏览器关闭后数据不会丢失；
sessionStorage数据在浏览器关闭后自动的删除
（32）：HTML5应用程序缓存和浏览器缓存有什么区别？
应用程序缓存是HTML5的重要特性之一。提供了离线使用的功能，让应用程序可以获取本地的网站内容。例如HTML CSS，图片以及javaScript。这个特性可以提高网站的性能，它的实现借助于manifest文件
<!doctype hrml>
<html manifest="example.appcache">
</html>
与传统的浏览器缓存相比。他不强制用户访问的网站内容被缓存。
（33）：如何实现浏览器内多个 标签页之间的通信？（阿里）
调用localstorage,cookies等本地存储方式：
1>localstorage在一个标签页里被添加，修改，删除时，都会触发一个storage事件，通过在另一个标签页里面监听storage事件，即可获得localstorage存储的值，实现不同标签页的值。
2>使用cookie+setInterval将要传递的信息存储在cookie中 ，每隔一定的时间读取cookie信息，即可随时获取要传递的信息。
（34）：webSocket如何兼容低浏览器？（阿里）
ActiveX HTMLFile (IE) 、 基于 multipart 编码发送 XHR 、 基于长轮询的 XHR
（35）：为什么HTML5里面我们不需要DTD（Document Type Definition文档类型定义）？
在 HTML 4.01 中， 声明引用 DTD，因为 HTML 4.01 基于 SGML（Standard for General Markup Language 通用标记语言标准;）。 DTD 规定了标记语言的规则，这样浏览器才能正确地呈现内容。 HTML5 不基于 SGML，所以不需要引用 DTD，因此没有声明DTD
（36）：Canvas和SVG图形之间的区别是什么？
Canvas：
依赖分辨率
弱的文本渲染能力
能够以.png或.jpq格式保存结果图像
最适合图像密集型的游戏，其中的许多对象会被频繁重绘。
SVG：
不依赖分辨率
支持事件处理器
最适合带有大型渲染区域的应用程序（比如谷歌地图）
复杂度高会减慢渲染的速度（任何过度使用DOM的应用都不快）
不适合游戏应用
（37）：HTML5应用缓存是什么？
常用于实现用户的离线浏览。如果网络连接不可用，页面应该来自浏览器缓存，离线应用缓存可以帮助你达到这个目的。 应用缓存可以帮助你指定哪些文件需要缓存，哪些不需要。
（38）：简要描述HTML5 中的本地存储
很多时候我们会存储用户本地信息到电脑上，例如：比方说用户有一个填充了一半的长表格，然后突然网络连接断开了，这样用户希望你能存储这些信息到本地，当网络恢复的时候，他想获取这些信息然后发送到服务器进行存储。 现代浏览器拥有的存储被叫做“Local Storage”，用于存储这些信息。
（39）：什么是Web Worker？为什么我们需要他们？
（模拟会执行上百万次的繁重代码）：
function text(){
for(var i=0;i<1000000;i++){
x=x+i;
}
}
如果上述代码在HTML按钮点击以后执行，这种执行是同步的，即，浏览器必须等到此执行完毕之后才能进行其他操作。因为此操作耗时较长，那么这个操作会导致浏览器冻结并且没有响应，而且屏幕还会出现异常信息。 如果可以将这些繁重的代码移动到Javascript文件中，并采用异步的方式运行，就可以解决这个问题。这就是webworker的作用。Web Worker用于异步执行JavaScript文件，提高浏览器的敏捷度。
1401
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
