HTML:
1 HTML意思：hypertext markup language 超文本标记语言。
2 web标准和W3C的理解。
标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外链css和js脚本、结构
行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛
的设备所访问、更少的代码和组件，容易维护、改版方便，不需要变动页面内容、提供打印
版本而不需要复制内容、提高网站易用性；
3 xhtml和html的区别
HTML是一种基本的WEB网页设计语言，XHTML是一个基于XML的置标语言
最主要的不同：
XHTML 元素必须被正确地嵌套。
XHTML 元素必须被关闭。
标签名必须用小写字母。
XHTML 文档必须拥有根元素。
4 关于DOCTYPE：
声明文档用哪种规范（html/xhtml）分为严格模式和混杂模式以及框架模式，严格模式向标
准靠拢，混杂模式以IE5.5方式解析，框架模式适用于多框架情形。严格模式和混杂模式区
别在于盒子模型的渲染不一样。前者盒子内容不包括border。
5 前端页面有哪三层构成，分别是什么？作用是什么？
结构：html 表现：css 行为：javascript
6 各浏览器内核:
使用Trident内核的浏览器：IE、Maxthon、TT、The World等；
使用Gecko内核的浏览器：Netcape6及以上版本、FireFox、MozillaSuite/SeaMonkey；
使用presto内核的浏览器：Opera7及以上版本；
使用Webkit内核的浏览器：Safari、Chrome。
7 语义化的HTML
有良好的结构，便于解析，搜索引擎友好，对于某些对css支持不够好的客户端友好。有利于结构和表现分离。
8 img元素的alt和title有什么异同？
Alt在图片不能正确加载的时候出现，title是鼠标放置的时候对图片的描述，ie的alt能实现两个功能，ff不能，所以最好都写上。
9 meta属性：
<meta> 元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。以名值对的形式出现，可以设置实现指定时间刷新。
10 常见图片格式：
Bmp：支持几百万种颜色，但不支持无损压缩，单机上使用比较多。
Gif：只能支持256色，压缩比高，占空间小。
Jpeg：折中，能有较高的压缩比，还能有不错的表现。
Png：除了不支持动画，能替代gif’
11 表格对单元格进行合并：rowspan（同列）colspan（同列）
<table>表格<th>表头<caption>标题<tbody>主体<tr>行<td>列
12 html字体加粗的方法,变倾斜的方法：
加粗：<strong> <b> <h1>~<h6> css方法：font-weight:bold
倾斜：<em> <i> css方法:font-style:italic,oblique
13 常见行内元素和块级元素
块级：div p table ul ol h1~h6 form fieldset address blockquote hr table pre
行内：span a big acronym（首字母）b big br cite code em i img input label select small
Strick strong sub sup textarea u
可变：button script map iframe
14 input的常用属性：只读：readonly 首次加载被选中：checked 禁用：disabled 文字 长度:size
15 语义化标签大全：
| 标签名 | 英文全拼 | 中文翻译 |
| a | anchor | 锚 |
| abbr | abbreviation | 缩写词 |
| acronym | acronym | 取首字母的缩写词 |
| address | address | 地址 |
| b | bold | 粗体 |
| big | big | 变大 |
| blockquote | block quotation | 区块引用于 |
| br | break | 换行 |
| caption | caption | 标题 |
| center | center | 居中 |
| dd | definition description | 定义描述 |
| del | delete | 删除 |
| div | division | 分隔 |
| dl | definition list | 定义列表 |
| dt | definition term | 定义术语 |
| em | emphasized | 加重 |
| fieldset | fieldset | 域集 |
| font | font | 字体 |
| h1~h6 | header1~header6 | 标题1~标题6 |
| hr | horizontal rule | 水平尺 |
| i | italic | 斜体 |
| ins | inserted | 插入 |
| legend | legend | 图标 |
| li | list item | 列表项目 |
| ol | ordered list | 排序列表 |
| p | paragraph | 段落 |
| pre | preformatted | 预定义格式 |
| s | strikethrough | 删除线 |
| small | small | 变小 |
| span | span | 范围 |
| strong | strong | 加重 |
| sub | subscripted | 下表 |
| sup | superscripted | 上标 |
| u | underlined | 下划线 |
| ul | unordered list | 不排序列表 |
| var | variable | 变量 |
Css部分：（Cascading Style Sheet）
1 css引入方式：
<style type=’css/text’></style>
<link type=’text/css’ rel=’stylesheet’href=’xxx.css’></link>
内置方法，用style =’’设置
<style type=’css/text’>@import url()</style>
第一种和第四种的区别：link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。ink支持使用Javascript控制DOM去改变样式；而@import不支持。
2 CSS选择符有哪些？哪些属性可以继承？优先级算法如何计算？内联和important哪个优先级高？
可以继承的一般为font属性和color属性
一般情况下，优先级如下：
（外部样式）External style sheet <（内部样式）Internal style sheet <（内联样式）Inline style
特殊情况：外部样式放在内部样式的后面，则外部样式将覆盖内部样式。
标签选择符 类选择符 id选择符
继承不如指定 Id>class>标签选择
后者优先级高
3 描述css reset的作用和用途。
Reset重置浏览器的css默认属性 浏览器的品种不同，样式不同，然后重置，让他们统一
4 解释css sprites，如何使用。
Css 精灵 把一堆小的图片整合到一张大的图片上，减轻服务器对图片的请求数量
5 css缩写：
颜色 16进制的色彩值，如果每两位的值相同，可以缩写一半
盒尺寸 上右下左 上下互补左右互补
边框(border) border:width style color;
背景(Backgrounds) background:color image repeat attachment position;
如：background:#f00 url(background.gif) no-repeat fixed 0 0;
字体(fonts) font-style:italic;
font-variant:small-caps;
font-weight:bold;
font-size:1em;
line-height:140%;
font-family:"Lucida Grande",sans-serif;
列表 list-style:square inside url(image.gif);
6 表格折行不被撑破：
table{table-layout: fixed;}
td(word-break: break-all; word-wrap:break-word;)
7 被点击访问过的超链接样式不在具有hover和active了,处理方法是改动CSS属性的排列顺序: L-V-H-A
8 怎么样才能让层显现在FLASH之上呢?
处理的办法是给FLASH设置透明:
<param name="wmode" value="transparent" />
、div 的垂直居中问题: vertical-align:middle; 将行距增加到和整个DIV一样高
line-height:200px; 然后插入文字，就垂直居中了。缺点是要控制内容不要换行
9 css浏览器兼容性问题：
1、ul和ol列表缩进问题
消除ul、ol等列表的缩进时，样式应写成：list-style:none;margin:0px;padding:0px;
其中margin属性对IE有效，padding属性对FireFox有效。 Ie一个margin全可以实现，ff中需要剩下两个属性设置。
2 CSS透明问题
IE：filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60)。
FF：opacity:0.6。
[注] 最好两个都写，并将opacity属性放在下面。
3 CSS圆角问题
IE：ie7以下版本不支持圆角。
FF： -moz-border-radius:4px，或者-moz-border-radius-topleft:4px;-moz- border- radius-topright:4px;-moz-border-radius-bottomleft:4px;-moz- border- radius- bottomright:4px;。
4 FF: 设置 padding 后， div 会增加 height 和 width， 但 IE 不会， 故需要用 !important 多设一个 height 和 width
6 页面居中问题.
body {TEXT-ALIGN: center;} 在IE下足够了，但FF下失效。
解决办法：加上"MARGIN-RIGHT: auto; MARGIN-LEFT: auto; "
7 关于手形光标. cursor: pointer. 而hand 只适用于 IE.
10 常见iebug
1 IE6双倍边距bug(给浮动元素加了margin)
div的css中添加：display:inline; 这样就可避免双倍边距bug。
2 3像素问题(浮动元素的非浮动元素)
设置.left _margin-right:-3px;
3 当子元素浮动且未知高度时，怎么使父容器适应子元素的高度？
这种情况可在父窗口加上 overflow:auto;_zoom:1;这两个样式属性，overflow:auto;是让父容器来自适应内部容器的高度，_zoom:1;是为了兼容 IE6而使用的CSS HACK。
4 IE6中奇数宽高的BUG
IE6还有奇数宽高的bug，解决方案就是将外部相对定位的div宽度改成偶数。
5 ie6下空标签高度问题
一个空div如果高度设置为0到19px，IE6下高度默认始终19PX。
css里面加上overflow:hidden;
6 IE捉迷藏的问题 当div应用复杂的时候每个栏中又有一些链接，DIV等这个时候容易发生捉迷藏的问题。 有些内容显示不出来，当鼠标选择这个区域是发现内容确实在页面。 解决办法：对#layout使用line-height属性 或者给#layout使用固定高和宽。页面结构尽量简单。
7 为什么无法定义1px左右高度的容器 IE6下这个问题是因为默认的行高造成的,解决的方法也有很多,例如:overflow:hidden | zoom:0.08 | line-height:1px
8 楼梯式的效果 设置 display: inline 属性。
9 IE忽略了min-height。
解决方法一
这个fix由 Dustin Diaz提供。其利用了 !important 下面是代码片段：
#element {
min-height:150px;
height:auto !important;
height:150px;
}
10 ie6 z-index不起作用：1、父标签position属性为relative；2、问题标签无position属性（不包括static）；3、问题标签含有浮动(float)属性。
解决办法：1、position:relative改为position:absolute；2、去除浮动；3、浮动元素添加position属性（如relative，absolute等）。
11 FOUC解决办法：使用LINK标签将样式表放在文档HEAD中
12 overflow:hidden失效
当子级元素含有position:relative的时候，父级的overflow:hidden失效；
解决办法：父级也加一个position:relative;
css hack
| 标记 | IE6 | IE7 | IE8 | FF | Opera | Sarari |
| [*+><] | √ | √ | X | X | X | X |
| _ | √ | X | X | X | X | X |
| \9 | √ | √ | √ | X | X | X |
| \0 | X | X | √ | X | √ | X |
| @media screen and (-webkit-min-device-pixel-ratio:0){.bb {}} | X | X | X | X | X | √ |
| .bb , x:-moz-any-link, x:default | X | √ | X | √(ff3.5及以下) | X | X |
| @-moz-document url-prefix(){.bb{}} | X | X | X | √ | X | X |
| @media all and (min-width: 0px){.bb {}} | X | X | X | √ | √ | √ |
| * +html .bb {} | X | √ | X | X | X | X |
| 游览器内核 | Trident | Trident | Trident | Gecko | Presto | WebKit |
12 清除浮动
采用一个HTML标签，以及css的clear属性，来手工清理浮动；
采用伪类:after，动态建立一个块元素，设定 clear 属性，清理之前的浮动元素；
采用CSS overflow 非 visible 值(overflow:auto/overflow:hidden)设定使父容器包含浮动元素；
采用display:table/display:table-cell 等table系列属性将父元素变成 table 形式自动包含浮动元素；
使用 TABLE 以及 TD 标签作为浮动元素容器；
采用 float:left/float:right 方式将父元素同样浮动，就可以包含浮动内容；
在 IE 6/7 的标准文档模式中设置 “width/height/zoom” 等样式来自动清理浮动。
清除浮动根本方法归类
1.使用css 1就提供的用来清除浮动的样式 clear，如：方法 1，方法 2
2.创建BFC，如：方法,3,4,5,6,7
3.触发hasLayout 如：方法6,7
13 超出部分用省略号显示：
{overflow:hidden;width:xxx;white-space:nowrap;text-overflow:ellipsis;}
强制不换行：
div {
white-space:nowrap;
}
自动换行：
div{
word-wrap: break-word;
word-break: normal;
}
强制英文单词断行：
div{
word-break:break-all;
}
14 常见布局问题：
浮动元素居中：父元素设置浮动，position:relative;left:50%;浮动元素 postion:relativd;left:-50%;
垂直居中: .box {
display: table-cell;
vertical-align:middle;
width:200px;
height:200px;
text-align:center;
/* hack for ie */
*display: block;
*font-size: 175px;
/* end */
border: 5px solid red;
}
.box img {
vertical-align:middle;
}
或者使用top和left属性。
高度自适应：不出滚动条
#nav {
background-color:#85d989;
width:100%;
height:50px;
}
#content {
background-color:#cc85d9;
width:100%;
position:absolute;
top:50px;
bottom:0px;
left:0px;
}
设置hight 100%生效的前提是，父级如果没有的话就需要body和html上面都设置height属性。
15 li设置宽度后其的文字，中文可以实现自动折行，英文不行。必须加word-wrap和word-break。
16 相邻的inline-block底对齐
17 给父div设置高度了之后，ff下子div溢出不会撑大父div，ie可以。
Javascript
1 兼容性问题：
1. getYear()方法--输出判定方法或者严格函数，使用getfullYear()
2. const声明----不使用const关键字，统一使用 var
3 获取float属性： 在IE中这样写：
document.getElementById("header").style.styleFloat= "left";
在Firefox中这样写：
document.getElementById("header").style.cssFloat= "left";
4 获取class属性： IE8.0之前的所有IE版本的写法：
var myAttribute= myObject.getAttribute("className");
适用于IE8.0 以及 firefox的写法：
var myAttribute= myObject.getAttribute("class");
5 Firefox使用DOM规范，"#text"表示文本（实际是无意义的空格和换行等）在Firefox里也会被解析成一个节点，在IE里只有有实际意义的文本才会解析成"#text"。
6 IE下table中无论是用innerHTML还是appendChild插入<tr>都没有效果，而其他浏览器却显示正常，只能在tbody后面加入
7 在IE中event作为window对象的一个属性可以直接使用，但是在Firefox中却使用了W3C的模型，它是通过传参的方法来传播事件的，也就是说你需要为你的函数提供一个事件响应的接口。
8 IE和Firefox获取键盘值的方法不同，Firefox下的event.which与IE下的event.keyCode相当。
9 在使用事件委托的时候，通过事件源获取来判断事件到底来自哪个元素，但是，在IE下，event对象有srcElement属性，但是没有target属性；Firefox下，even对象有target属性，但是没有srcElement属性。
10 在事件监听处理方面，IE提供了attachEvent和detachEvent两个接口，而Firefox提供的是addEventListener和removeEventListener。
11 关于鼠标位置，IE下，even对象有x，y属性，但是没有pageX，pageY属性；Firefox下，even对象有pageX，pageY属性，但是没有x，y属性。
12 ajax定义方法不同，ff用XMLHttpRequest，ie用ActiveXObject。
13 IE的<SCRIPT>标签和<style>标签不允许操作子元素，用节点的text属性=可以操作。
2 各浏览器HTTP Get请求URL最大长度并不相同，几类常用浏览器最大长度及超过最大长度后提交情况如下：
IE6.0 :url最大长度2083个字符，超过最大长度后无法提交。
IE7.0 :url最大长度2083个字符，超过最大长度后仍然能提交，但是只能传过去2083个字符。
firefox 3.0.3 :url最大长度7764个字符，超过最大长度后无法提交。
Opera 9.52 :url最大长度7648个字符，超过最大长度后无法提交。
Google Chrome 2.0.168 :url最大长度7713个字符，超过最大长度后无法提交
3 关于异步加载 ，可以使用 labjs（动态并行加载脚本文件 以及 管理加载脚本文件的执行顺序）和controljs（异步加载，延迟执行，重写document.write）。
4 何为渐进增强、优雅降级
常用两种策略：要么优雅降级（graceful degradation，一开始就构建站点的完整功能，然后针对浏览器测试和修复），要么渐进增强（progressive enhancement，一开始只构建站点的最少特性，然后不断针对各浏览器追加功能。
5
6 压缩工具
7 git的使用
git pull：从其他的版本库(既可以是远程的也可以是本地的)将代码更新到本地
git add：是将当前更改或者新增的文件加入到Git的索引中
git rm：从当前的工作空间中和索引中删除文件
git commit：提交当前工作空间的修改内容，类似于SVN的commit命令
git push：将本地commit的代码更新到远程版本库中
git log：查看历史日志
git revert：还原一个版本的修改
git branch：对分支的增、删、查等操作
8 知名博客
淘宝ued ，csdn，w3cfun，w3cplus，张鑫旭，教主，寒冬，朴灵，玉伯，司徒正美 stack overflow CSS Tricks Net Tuts+ Ajaxian
9 jsLint
10 页面优化
异步加载，延迟执行。文件合并，使用CDN托管，缓存的使用，减少页面请求。减少DOM
更新。使用压缩工具（YUI Compressor）
11 读过哪些书
12 开源框架
JQuery 轻量级 功能强大 Extjs UI设计牛逼 YUI 类似于STK UI不错 功能齐全 Prototype
Dojo缺点很明显，太大，功能太多
13 实习的收获
14 窗口位置上，分为scrollTop，scrollLeft和scrollX，scrollY两种，有细微差别
15 window属性，首先是全局变量，有关于窗口位置，打开，大小的方法，有alert confirm prompt3种。Location对象存储着当前文档的信息，有关url等信息。Navigator 有关浏览器信息，hasplugin可以检查插件。
16 html5和 css3 新特性
html5新特性 1.简洁的DOCTYPE：2.简单易记的语言标签：3.简单易记的编码类型：4.不需要闭合标签 更加语义化的新增标签： <article>、<section>、<aside>、<hgroup>、 <header>,<footer>、<nav>、<time>、<mark>、<figure> 和<figcaption>。
css3新特性
高级选择器，
圆角，多背景，@font-face动画与渐变，渐变色，Box 阴影，RGBa - 加入透明色，文字阴影，图形化边界 。
17 js跨域问题
CORS跨源资源共享 在请求前面附加一个Origin头部。
图像ping 通过动态的让img指向一个新src
jsonp 异步加载javascript
设置document.domain
服务端解决方案（代理服务器）
利用iframe
18 使用多域名存储的好处：
1 CDN缓存更方便
2. 突破浏览器并发限制 (你随便挑一个 G家的 url: https://lh4.googleusercontent.com/-si4dh2myPWk/T81YkSi__AI/AAAAAAAAQ5o/LlwbBRpp58Q/w497-h373/IMG_20120603_163233.jpg, 把前面的 lh4换成 lh3,lh6啥的，都照样能够访问，像地图之类的需要大量并 发下载图片的站点，这个非常重要。)
3. Cookieless, 节省带宽，尤其是上行带宽 一般比下行要慢。。。
还有另外两个非常规原因:
4. 对于UGC的内容和主站隔离，防止不必要的安全问题( 上传js窃取主站cookie之类的) 。
正是这个原因要求用户内容的域名必须不是自己主站的子域名，而是一个完全独立的第三方域名。
5. 数据做了划分，甚至切到了不同的物理集群，通过子域名来分流比较省事. ^_^ 这个可能被用的不多。
19 sessionStorage 、localStorage 和 cookie 之间的区别
共同点：都是保存在浏览器端，且同源的。区别：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 接口使用更方便。
20 Javascript刷新页面的几种方法： 1 history.go(0) 2 location.reload() 3 location=location 4 location.assign(location) 5document.execCommand('Refresh') 6 window.navigate(location) 7 location.replace(location) 8document.URL=location.href
21 http常见状态码：http://www.cnblogs.com/TankXiao/archive/2013/01/08/2818542.html
200 OK 服务器成功处理了请求（这个是我们见到最多的）
301/302 Moved Permanently（重定向）请求的URL已移走。Response中应该包含一个Location URL, 说明资源现在所处的位置
304 Not Modified（未修改）客户的缓存资源是最新的， 要客户端使用缓存
404 Not Found 未找到资源
501 Internal Server Error服务器遇到一个错误，使其无法对请求提供服务
扫一扫
743
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
