一、HTML和CSS
你做的页面在哪些流览器测试过？这些阅读器的内核离别是什么?
IE: trident内核
Firefox：gecko内核
Safari:webkit内核
Opera:之前是presto内核，Opera现已改用Google Chrome的Blink内核
Chrome:Blink(基于webkit，Google与Opera Software共同开辟)每一个HTML文件里开首都有个很重要的东西，Doctype，晓得这是干什么的吗？
<!DOCTYPE> 声明位于文档中的最前面的位置，处于 <html> 标签之前。此标签可示知阅读器文档运用哪一种 HTML 或 XHTML 范例。（重点：通知阅读器依据何种范例剖析页面）Quirks形式是什么？它和Standards形式有什么辨别
从IE6最先，引入了Standards形式，规范形式中，阅读器尝试给相符规范的文档在范例上的正确处置惩罚到达在指定阅读器中的程度。
在IE6之前CSS还不够成熟，所以IE5等之前的阅读器对CSS的支撑很差， IE6将对CSS供应更好的支撑，然则这时刻的题目就来了，因为有很多页面是基于旧的规划体式格局写的，而假如IE6 支撑CSS则将令这些页面显现不一般，怎样期近保证不损坏现有页面，又供应新的衬着机制呢？
在写递次时我们也会常常碰到如许的题目，怎样保证本来的接口稳定，又供应更壮大的功用，尤其是新功用不兼容旧功用时。碰到这类题目时的一个罕见做法是增添参数和分支，即当某个参数为真时，我们就运用新功用，而假如这个参数 不为真时，就运用旧功用，如许就能不损坏原有的递次，又供应新功用。IE6也是类似如许做的，它将DTD当做了这个“参数”，因为之前的页面人人都不会去写DTD，所以IE6就假定 假如写了DTD，就意味着这个页面将采用对CSS支撑更好的规划，而假如没有，则采用兼容之前的规划体式格局。这就是Quirks形式（怪癖形式，诡异形式，奇异形式）。
辨别：
整体会有规划、款式剖析和剧本实行三个方面的辨别。
盒模子：在W3C规范中，假如设置一个元素的宽度和高度，指的是元素内容的宽度和高度，而在Quirks 形式下，IE的宽度和高度还包含了padding和border。设置行内元素的高宽：在Standards形式下，给<span>等行内元素设置wdith和height都不会见效，而在quirks形式下，则会见效。
设置百分比的高度：在standards形式下，一个元素的高度是由其包含的内容来决议的，假如父元素没有设置百分比的高度，子元素设置一个百分比的高度是无效的用margin:0 auto设置程度居中：运用margin:0 auto在standards形式下能够使元素程度居中，但在quirks形式下却会失效。
（另有很多，答出什么不重要，关键是看他答出的这些是不是是本身履历碰到的，照样说都是看文章看的，以至完全不晓得。）div+css的规划较table规划有什么长处？
改版的时刻更轻易 只需改css文件。
页面加载速率更快、构造化清楚、页面显现简约。
表现与构造相星散。
易于优化（seo）搜刮引擎更友爱，排名更轻易靠前。img的alt与title有何异同？ strong与em的异同？
a:alt(alt text):为不能显现图象、窗体或applets的用户代办（UA），alt属性用来指定替代笔墨。替代笔墨的言语由lang属性指定。(在IE阅读器下会在没有title时把alt当做 tool tip显现)
title(tool tip):该属性为设置该属性的元素供应发起性的信息。
strong:粗体强调标签，强调，示意内容的重要性
em:斜体强调标签，更猛烈强调，示意内容的强调点你能形貌一下渐进加强和文雅降级之间的差别吗?
渐进加强 progressive enhancement：针对低版本阅读器举行构建页面，保证最基础的功用，然后再针对高等阅读器举行效果、交互等革新和追加功用到达更好的用户体验。
文雅降级 graceful degradation：一最先就构建完全的功用，然后再针对低版本阅读器举行兼容。
辨别：文雅降级是从庞杂的近况最先，并试图削减用户体验的供应，而渐进加强则是从一个异常基础的，能够起作用的版本最先，并不停扩大，以顺应未来环境的须要。降级（功用衰减）意味着往回看；而渐进加强则意味着朝前看，同时保证其基础处于平安地带。
“文雅降级”看法
“文雅降级”看法以为应当针对那些第一流、最完美的阅读器来设想网站。而将那些被以为“逾期”或有功用缺失的阅读器下的测试事情安排在开辟周期的末了阶段，并把测试对象限定为主流阅读器（如 IE、Mozilla 等）的前一个版本。
在这类设想范例下，旧版的阅读器被以为仅能供应“大略却不妨 (poor, but passable)” 的阅读体验。你能够做一些小的调解来顺应某个特定的阅读器。但因为它们并不是我们所关注的核心，因此除了修复较大的毛病之外，别的的差别将被直接疏忽。
“渐进加强”看法
“渐进加强”看法则以为应关注于内容本身。
内容是我们竖立网站的诱因。有的网站展现它，有的则网络它，有的追求，有的操纵，另有的网站以至会包含以上的种种，但雷同点是它们全都涉及到内容。这使得“渐进加强”成为一种更加合理的设想范例。这也是它立即被 Yahoo! 所采用并用以构建其“分级式阅读器支撑 (Graded Browser Support)”战略的缘由地点。
那末题目来了。如今产物司理看到IE6,7,8网页效果相对高版本当代阅读器少了很多圆角，暗影（CSS3），要求兼容（运用图片背景，摒弃CSS3），你会怎样压服他？为何运用多个域名来存储网站资本会更有用？
CDN缓存更轻易
打破阅读器并发限定
勤俭cookie带宽
勤俭主域名的连接数，优化页面响应速率
防备不必要的平安题目请谈一下你对网页规范和规范制订机构重要性的明白。
网页规范和规范制订机构都是为了能让web生长的更‘康健’，开辟者遵照一致的规范，下降开辟难度，开辟本钱，SEO也会更好做，也不会因为滥用代码致使种种BUG、平安题目，终究进步网站易用性。请形貌一下cookies，sessionStorage和localStorage的辨别？
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仅仅是为了在当地“存储”数据而生。简述一下src与href的辨别。
src用于替代当前元素，href用于在当前文档和援用资本之间建立联络。
src是source的缩写，指向外部资本的位置，指向的内容将会嵌入到文档中当前标签地点位置；在要求src资本时会将其指向的资本下载并运用到文档内，比方js剧本，img图片和frame等元素。
<script src =”js.js”></script>
当阅读器剖析到该元素时，会停息其他资本的下载和处置惩罚，直到将该资本加载、编译、实行终了，图片和框架等元素也云云，类似于将所指向资本嵌入当前标签内。这也是为何将js剧本放在底部而不是头部。
href是Hypertext Reference的缩写，指向网络资当地点位置，竖立和当前元素（锚点）或当前文档（链接）之间的链接，假如我们在文档中增加
<link href=”common.css” rel=”stylesheet”/>
那末阅读器会辨认该文档为css文件，就会并行下载资本而且不会住手对当前文档的处置惩罚。这也是为何发起运用link体式格局来加载css，而不是运用@import体式格局。
11.晓得的网页制造会用到的图片花样有哪些？
png-8，png-24，jpeg，gif，svg。
然则上面的那些都不是面试官想要的末了答案。面试官愿望听到是Webp。（是不是有关注新手艺，新颖事物）
科普一下Webp：WebP花样，谷歌（google）开辟的一种旨在加速图片加载速率的图片花样。图片紧缩体积约莫只要JPEG的2/3，并能节约大批的服务器带宽资本和数据空间。Facebook Ebay等着名网站已最先测试并运用WebP花样。
在质量雷同的状况下，WebP花样图象的体积要比JPEG花样图象小40%晓得什么是微花样吗？谈谈明白。在前端构建中应当斟酌微花样吗？
微花样（Microformats）是一种让机器可读的语义化XHTML辞汇的鸠合，是构造化数据的开放规范。是为迥殊运用而制订的迥殊花样。
长处：将智能数据增加到网页上，让网站内容在搜刮引擎效果界面能够显现分外的提醒。（运用范例：豆瓣，有兴致自行google）
12.在css/js代码上线今后开辟人员常常会优化机能，从用户革新网页最先，一次js要求平常状况下有哪些地方会有缓存处置惩罚？
答案：dns缓存，cdn缓存，阅读器缓存，服务器缓存。一个页面上有大批的图片（大型电商网站），加载很慢，你有哪些要领优化这些图片的加载，给用户更好的体验。
图片懒加载，在页面上的未可视地区能够增加一个滚动条事宜，推断图片位置与阅读器顶端的距离与页面的距离，假如前者小于后者，优先加载。 假如为幻灯片、相册等，能够运用图片预加载手艺，将当前展现图片的前一张和后一张优先下载。 假如图片为css图片，能够运用CSSsprite，SVGsprite，Iconfont、Base64等手艺。 假如图片过大，能够运用迥殊编码的图片，加载时会先加载一张紧缩的迥殊凶猛的缩略图，以进步用户体验。 假如图片展现地区小于图片的实在大小，则因在服务器端依据营业须要先行举行图片紧缩，图片紧缩后大小与展现一致。你怎样明白HTML构造的语义化？
去掉或款式丧失的时刻能让页面显现清楚的构造： html本身是没有表现的，我们看到比方<h1>是粗体，字体大小2em，加粗；<strong>是加粗的，不要以为这是html的表现，这些实在html默许的css款式在起作用，所以去掉或款式丧失的时刻能让页面显现清楚的构造不是语义化的HTML构造的长处，然则阅读器都有有默许款式，默许款式的目标也是为了更好的表达html的语义，能够说阅读器的默许款式和语义化的HTML构造是不可分割的。 屏幕阅读器（假如访客有视障）会完全依据你的标记来“读”你的网页. 比方,假如你运用的含语义的标记,屏幕阅读器就会“逐一拼出”你的单词,而不是试着去对它完全发音. PDA、手机等装备能够没法像一般电脑的阅读器一样来衬着网页（一般是因为这些装备对CSS的支撑较弱） 运用语义标记能够确保这些装备以一种有意义的体式格局来衬着网页.抱负状况下,寓目装备的使命是相符装备本身的前提来衬着网页. 语义标记为装备供应了所需的相干信息,就省去了你本身去斟酌一切能够的显现状况（包含现有的或许未来新的装备）.比方,一部手机能够挑选使一段标记了题目的笔墨以粗体显现.而掌上电脑能够会以比较大的字体来显现.不管哪一种体式格局一旦你对文本标记为题目,您就能够确信读取装备将依据其本身的前提来适宜地显现页面. 搜刮引擎的爬虫也依赖于标记来一定高低文和各个关键字的权重 过去你能够还没有斟酌搜刮引擎的爬虫也是网站的“访客”,但如今它们他们现实上是极为珍贵的用户.没有他们的话,搜刮引擎将没法索引你的网站,然后平经常使用户将很难过来接见. 你的页面是不是对爬虫轻易明白异常重要,因为爬虫很大程度上会疏忽用于表现的标记,而只注意语义标记. 因此,假如页面文件的题目被标记,而不是,那末这个页面在搜刮效果的位置能够会比较靠后.除了提拔易用性外,语义标记有利于正确运用CSS和JavaScript,因为其本身供应了很多“钩钩”来运用页面的款式与行动. SEO重要照样靠你网站的内容和外部链接的。 便于团队开辟和保护 W3C给我们定了一个很好的规范，在团队中人人都遵照这个规范，能够削减很多差别化的东西，轻易开辟和保护，进步开辟效力，以至完成模块化开辟。谈谈之前端角度动身做好SEO须要斟酌什么？
相识搜刮引擎怎样抓取网页和怎样索引网页 你须要晓得一些搜刮引擎的基础事情道理，各个搜刮引擎之间的辨别，搜刮机器人（SE robot 或叫 web crawler）怎样举行事情，搜刮引擎怎样对搜刮效果举行排序等等。 Meta标签优化 重要包含主题（Title)，网站形貌(Description)，和关键词（Keywords）。另有一些别的的隐蔽笔墨比方Author（作者），Category（目次），Language（编码语种）等。 怎样拔取关键词并在网页中安排关键词 搜刮就得用关键词。关键词剖析和挑选是SEO最重要的事情之一。起首要给网站一定主关键词（平常在5个高低），然后针对这些关键词举行优化，包含关键词密度（Density），相干度（Relavancy），凸起性（Prominency）等等。 相识重要的搜刮引擎 虽然搜刮引擎有很多，然则对网站流量起决议作用的就那末几个。比方英文的重要有Google，Yahoo，Bing等；中文的有百度，搜狗，有道等。差别的搜刮引擎对页面的抓取和索引、排序的划定规矩都不一样。还要相识各搜刮流派和搜刮引擎之间的关联，比方AOL网页搜刮用的是Google的搜刮手艺，MSN用的是Bing的手艺。 重要的互联网目次 Open Directory本身不是搜刮引擎，而是一个大型的网站目次，他和搜刮引擎的重要辨别是网站内容的网络体式格局差别。目次是人工编辑的，重要收录网站主页；搜刮引擎是自动网络的，除了主页外还抓取大批的内容页面。 按点击付费的搜刮引擎 搜刮引擎也须要生计，跟着互联网商务的愈来愈成熟，收费的搜刮引擎也最先大行其道。最典范的有Overture和百度，固然也包含Google的广告项目Google Adwords。愈来愈多的人经由历程搜刮引擎的点击广告来定位商业网站，这内里也大有优化和排名的学问，你得学会用起码的广告投入取得最多的点击。 搜刮引擎登录 网站做完了今后，别躺在那边等着客人突如其来。要让别人找到你，最简朴的方法就是将网站提交（submit）到搜刮引擎。假如你的是商业网站，重要的搜刮引擎和目次都邑要求你付费来取得收录（比方Yahoo要299美圆），然则好消息是（最少到现在为止）最大的搜刮引擎Google现在照样免费，而且它主宰着60％以上的搜刮市场。 链接交流和链接普遍度（Link Popularity） 网页内容都是以超文本（Hypertext）的体式格局来相互链接的，网站之间也是云云。除了搜刮引擎之外，人们也天天经由历程差别网站之间的链接来Surfing（“冲浪”）。别的网站到你的网站的链接越多，你也就会取得更多的接见量。更重要的是，你的网站的外部链接数越多，会被搜刮引擎以为它的重要性越大，从而给你更高的排名。 合理的标签运用有哪项体式格局能够对一个DOM设置它的CSS款式？
外部款式表，引入一个外部css文件 内部款式表，将css代码放在 <head> 标签内部 内联款式，将css款式直接定义在 HTML 元素内部CSS都有哪些挑选器？
派生挑选器（用HTML标签申明） id挑选器（用DOM的ID申明） 类挑选器（用一个款式类名申明） 属性挑选器（用DOM的属性申明，属于CSS2，IE6不支撑，不经常使用，不晓得就算了） 除了前3种基础挑选器，另有一些扩大挑选器，包含 子女挑选器（运用空格距离，比方div .a{ }） 群组挑选器（运用逗号距离，比方p,div,#a{ }） 那末题目来了，CSS挑选器的优先级是怎样定义的？ 基础准绳： 平常而言，挑选器越迥殊，它的优先级越高。也就是挑选器指向的越正确，它的优先级就越高。 庞杂的盘算要领： 用1示意派生挑选器的优先级 用10示意类挑选器的优先级 用100标示ID挑选器的优先级 div.test1 .span var 优先级 1+10 +10 +1 span#xxx .songs li 优先级1+100 + 10 + 1 #xxx li 优先级 100 +1 那末题目来了，看以下代码，<p>标签内的笔墨是什么色彩的？ <style> .classA{ color:blue;} .classB{ color:red;} </style> <body> <p class='classB classA'> 123 </p> </body> 答案：red。与款式定义在文件中的前后递次有关，等于背面的掩盖前面的，与在<p class=’classB classA’>中的前后关联无关。CSS中能够经由历程哪些属性定义，使得一个DOM元素不显如今阅读器可视范围内？
最基础的： 设置display属性为none，或许设置visibility属性为hidden 技能性： 设置宽高为0，设置通明度为0，设置z-index位置在-1000em什么是Css Hack？ie6,7,8的hack离别是什么？
答案：针对差别的阅读器写差别的CSS code的历程，就是CSS hack。 示比方下： #test{ width:300px; height:300px; background-color:blue; /*firefox*/ background-color:red\9; /*all ie*/ background-color:yellow; /*ie8*/ +background-color:pink; /*ie7*/ _background-color:orange; /*ie6*/ } :root #test { background-color:purple\9; } /*ie9*/ @media all and (min-width:0px) { #test {background-color:black;} } /*opera*/ @media screen and (-webkit-min-device-pixel-ratio:0) { #test {background-color:gray;} } /*chrome and safari*/行内元素和块级元素的详细辨别是什么？行内元素的padding和margin可设置吗？
块级元素(block)特征： 老是独有一行，表现为另起一行最先，而且厥后的元素也必需另起一行显现; 宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可掌握; 内联元素(inline)特征： 和相邻的内联元素在统一行; 宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可转变（也就是padding和margin的left和right是能够设置的），就是内里笔墨或图片的大小。 那末题目来了，阅读器另有默许的天生inline-block元素（具有内涵尺寸，可设置高宽，但不会自动换行），有哪些？ 答案：<input> 、<img> 、<button> 、<texterea> 、<label>。什么是外边距堆叠？堆叠的效果是什么？
外边距堆叠就是margin-collapse。 在CSS当中，相邻的两个盒子（多是兄弟关联也多是先人关联）的外边距能够结合成一个零丁的外边距。这类兼并外边距的体式格局被称为摺叠，而且因此所结合成的外边距称为摺叠外边距。 摺叠效果遵照以下盘算划定规矩： 两个相邻的外边距都是正数时，摺叠效果是它们二者之间较大的值。 两个相邻的外边距都是负数时，摺叠效果是二者相对值的较大值。 两个外边距一正一负时，摺叠效果是二者的相加的和。rgba()和opacity的通明效果有什么差别？
rgba()和opacity都能完成通明效果，但最大的差别是opacity作用于元素，以及元素内的一切内容的通明度， 而rgba()只作用于元素的色彩或其背景色。（设置rgba通明的元素的子元素不会继续通明效果！）css中能够让笔墨在垂直和程度方向上堆叠的两个属性是什么？
垂直方向：line-height 程度方向：letter-spacing 那末题目来了，关于letter-spacing的妙用晓得有哪些么？ 答案:能够用于消弭inline-block元素间的换行符空格间隙题目。怎样垂直居中一个浮动元素？
// 要领一：已知元素的高宽#div1{ background-color:#6699FF; width:200px; height:200px; position: absolute; //父元素须要相对定位 top: 50%; left: 50%; margin-top:-100px ; //二分之一的height，width margin-left: -100px; }//要领二:未知元素的高宽
#div1{ width: 200px; height: 200px; background-color: #6699FF; margin:auto; position: absolute; //父元素须要相对定位 left: 0; top: 0; right: 0; bottom: 0; }那末题目来了，怎样垂直居中一个<img>?（用更轻便的要领。）
#container //<img>的容器设置以下 { display:table-cell; text-align:center; vertical-align:middle; }px和em的辨别。
px和em都是长度单元，辨别是，px的值是牢固的，指定是若干就是若干，盘算比较轻易。em得值不是牢固的，而且em会继续父级元素的字体大小。 阅读器的默许字体高都是16px。所以未经调解的阅读器都相符: 1em=16px。那末12px=0.75em, 10px=0.625em。形貌一个”reset”的CSS文件并怎样运用它。晓得normalize.css吗？你相识他们的差别之处？
重置款式异常多，通常一个前端开辟人员一定有一个经常使用的重置CSS文件并晓得怎样运用它们。他们是自觉标在做照样晓得为何这么做呢？缘由是差别的阅读器对一些元素有差别的默许款式，假如你不处置惩罚，在差别的阅读器下会存在必要的风险，或许更有戏剧性的性发作。 你能够会用Normalize来替代你的重置款式文件。它没有重置一切的款式作风，但仅供应了一套合理的默许款式值。既能让浩瀚阅读器到达一致和合理，但又不骚动扰攘侵犯其他的东西（如粗体的题目）。 在这一方面，没法做每一个复位重置。它也确切有些凌驾一个重置，它处置惩罚了你永久都不必斟酌的怪癖，像HTML的audio元素不一致或line-height不一致。Sass、LESS是什么？人人为何要运用他们？
他们是CSS预处置惩罚器。他是CSS上的一种笼统层。他们是一种迥殊的语法/言语编译成CSS。 比方Less是一种动态款式言语. 将CSS给予了动态言语的特征，如变量，继续，运算， 函数. LESS 既能够在客户端上运转 (支撑IE 6+, Webkit, Firefox)，也可一在服务端运转 (借助 Node.js)。 为何要运用它们？ 构造清楚，便于扩大。 能够轻易地屏障阅读器私有语法差别。这个不必多说，封装对阅读器语法差别的反复处置惩罚，削减无意义的机器劳动。 能够轻松完成多重继续。 完全兼容 CSS 代码，能够轻易地运用到老项目中。LESS 只是在 CSS 语法上做了扩大，所以老的 CSS 代码也能够与 LESS 代码一同编译。display:none与visibility:hidden的辨别是什么？
display : 隐蔽对应的元素但不挤占该元素本来的空间。 visibility: 隐蔽对应的元素而且挤占该元素本来的空间。 等于，运用CSS display:none属性后，HTML元素（对象）的宽度、高度等种种属性值都将“丧失”;而运用visibility:hidden属性后，HTML元素（对象）仅仅是在视觉上看不见（完全通明），而它所占有的空间位置依然存在。CSS中link和@import的辨别是：
Link属于html标签，而@import是CSS中供应的 在页面加载的时刻，link会同时被加载，而@import援用的CSS会在页面加载完成后才会加载援用的CSS @import只要在ie5以上才够被辨认，而link是html标签，不存在阅读器兼容性题目 Link引入款式的权重大于@import的援用（@import是将援用的款式导入到当前的页面中）简介盒子模子：
CSS的盒子模子有两种：IE盒子模子、规范的W3C盒子模子模子 盒模子：内容、内边距、外边距（平常不计入盒子现实宽度）、边框为何要初始化款式？
因为阅读器兼容的题目，差别的阅读器对标签的默许款式值差别，若不初始化会形成差别阅读器之间的显现差别 然则初始化CSS会对搜刮引擎优化形成小影响BFC是什么?
BFC（块级花样化高低文），一个创建了新的BFC的盒子是自力规划的，盒子内元素的规划不会影响盒子表面的元素。在统一个BFC中的两个相邻的盒子在垂直方向发作margin堆叠的题目 BFC是指阅读器中创建了一个自力的衬着地区，该地区内一切元素的规划不会影响到地区外元素的规划，这个衬着地区只对块级元素起作用html语义化是什么？
当页面款式加载失利的时刻能够让页面显现出清楚的构造 有利于seo优化，利于被搜刮引擎收录（更便于搜刮引擎的爬虫递次来辨认） 便于项目标开辟及保护，使html代码更具有可读性，便于其他装备剖析。Doctype的作用？严厉形式与混淆形式的辨别？
<!DOCTYPE>用于示知阅读器该以何种形式来衬着文档 严厉形式下：页面排版及JS剖析是以该阅读器支撑的最高规范来实行 混淆形式：不严厉依据规范实行，重要用来兼容旧的阅读器，向后兼容IE5-8不支撑opacity，处理方法：
.opacity { opacity: 0.4 filter: alpha(opacity=60); /* for IE5-7 */ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; /* for IE 8*/ }IE6不支撑PNG通明背景，处理方法: IE6下运用gif图片
对WEB规范以及W3C的明白与熟悉
答：标签闭合、标签小写、稳定嵌套、进步搜刮机器人搜刮概率、运用外 链css和js剧本、构造行动表现的星散、文件下载与页面速率更快、内容能被更多的用户所接见、内容能被更普遍的装备所接见、更少的代码和组件，轻易维 护、改版轻易，不须要更改页面内容、供应打印版本而不须要复制内容、进步网站易用性。行内元素有哪些?块级元素有哪些?CSS的盒模子?
答：块级元素：div p h1 h2 h3 h4 form ul 行内元素: a b br i span input select Css盒模子:内容，border ,margin，padding前端页面有哪三层组成，离别是什么?作用是什么?
答：构造层 Html 示意层 CSS 行动层 js。Doctype作用? 严厉形式与混淆形式-怎样触发这两种形式，辨别它们有何意义?
（1）、<!DOCTYPE> 声明位于文档中的最前面，处于 <html> 标签之前。示知阅读器的剖析器，用什么文档范例 范例来剖析这个文档。
（2）、严厉形式的排版和 JS 运作形式是 以该阅读器支撑的最高规范运转。
（3）、在混淆形式中，页面以宽松的向后兼容的体式格局显现。模仿老式阅读器的行动以防备站点没法事情。
（4）、DOCTYPE不存在或花样不正确会致使文档以混淆形式显现。行内元素有哪些？块级元素有哪些？ 空(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>CSS的盒子模子？
（1）两种， IE 盒子模子、规范 W3C 盒子模子；IE 的content部份包含了 border 和 pading; （2）盒模子： 内容(content)、添补(padding)、边境(margin)、 边框(border).CSS 挑选符有哪些？哪些属机能够继续？优先级算法怎样盘算？ CSS3新增伪类有那些？
1.id挑选器（ # myid）
2.类挑选器（.myclassname）
3.标签挑选器（div, h1, p）
4.相邻挑选器（h1 + p）
5.子挑选器（ul < li）
6.子女挑选器（li a）
7.通配符挑选器（ * ）
8.属性挑选器（a[rel = “external”]）
9.伪类挑选器（a: hover, li: nth – child）可继续： font-size font-family color, UL LI DL DD DT;
不可继续 ：border padding margin width height ;
优先级就近准绳，款式定义近来者为准;
载入款式以末了载入的定位为准;
优先级为:
!important > id > class > tag
important 比 内联优先级高
CSS3新增伪类举例：
p:first-of-type 挑选属于其父元素的首个 <p> 元素的每一个 <p> 元素。
p:last-of-type 挑选属于其父元素的末了 <p> 元素的每一个 <p> 元素。
p:only-of-type 挑选属于其父元素唯一的 <p> 元素的每一个 <p> 元素。
p:only-child 挑选属于其父元素的唯一子元素的每一个 <p> 元素。
p:nth-child(2) 挑选属于其父元素的第二个子元素的每一个 <p> 元素。
:enabled、:disabled 掌握表单控件的禁用状况。
:checked，单选框或复选框被选中。怎样居中div,怎样居中一个浮动元素?
给div设置一个宽度，然后增加margin:0 auto属性
div{width:200px; margin:0 auto;}
居中一个浮动元素一定容器的宽高 宽500 高 300 的层 设置层的外边距.div {
Width:500px ; height:300px;//高度能够不设 Margin: -150px 0 0 -250px; position:relative;相对定位 background-color:pink;//轻易看效果 left:50%; top:50%;}
阅读器的内核离别是什么?常常碰到的阅读器的兼容性有哪些？缘由，处理要领是什么，经常使用hack的技能 ？
IE阅读器的内核Trident、 Mozilla的Gecko、google的WebKit、Opera内核Presto；
png24为的图片在iE6阅读器上涌现背景，处理方案是做成PNG8.
阅读器默许的margin和padding差别。处理方案是加一个全局的*{margin:0;padding:0;}来一致。
IE6双边距bug:块属性标签float后，又有横行的margin状况下，在ie6显现margin比设置的大。
浮动ie发生的双倍距离 #box{ float:left; width:10px; margin:0 0 0 100px;}
这类状况之下IE会发生20px的距离，处理方案是在float的标签款式掌握中到场 ——_display:inline;将其转化为行内属性。(_这个标记只要ie6会辨认)
渐进辨认的体式格局，从整体中逐步消除部分。
起首，奇妙的运用“9”这一标记，将IE游览器从一切状况中星散出来。
接着，再次运用“+”将IE8和IE7、IE6星散开来，如许IE8已自力辨认。
css.bb{ background-color:#f1ee18;/*一切辨认*/ .background-color:#00deff\9; /*IE6、7、8辨认*/ +background-color:#a200ff;/*IE6、7辨认*/ _background-color:#1e0bd1;/*IE6辨认*/ }IE下,能够运用猎取通例属性的要领来猎取自定义属性,
也能够运用getAttribute()猎取自定义属性;
Firefox下,只能运用getAttribute()猎取自定义属性.
处理要领:一致经由历程getAttribute()猎取自定义属性.IE下,even对象有x,y属性,然则没有pageX,pageY属性;
Firefox下,event对象有pageX,pageY属性,然则没有x,y属性.（前提解释）瑕玷是在IE阅读器下能够会增添分外的HTTP要求数。
Chrome 中文界面下默许会将小于 12px 的文本强迫依据 12px 显现, 可经由历程到场 CSS 属性 -webkit-text-size-adjust: none; 处理.
超链接接见事后hover款式就不涌现了 被点击接见过的超链接款式不在具有hover和active相识决要领是转变CSS属性的分列递次:
L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}
列出display的值，申明他们的作用。position的值， relative和absolute定位原点是？
block 象块范例元素一样显现。
none 缺省值。向行内元素范例一样显现。
inline-block 象行内元素一样显现，但其内容象块范例元素一样显现。
list-item 象块范例元素一样显现，并增加款式列表标记。
position的值
*absolute 天生相对定位的元素，相对于 static 定位之外的第一个父元素举行定位。 *fixed （老IE不支撑） 天生相对定位的元素，相对于阅读器窗口举行定位。relative
天生相对定位的元素，相对于其一般位置举行定位。static 默许值。没有定位，元素出如今一般的流中
*（疏忽 top, bottom, left, right z-index 声明）。inherit 划定从父元素继续 position 属性的值。
