web典型理论题整理HTML+CSS部分
web典型理论题整理HTML+CSS部分
1.css选择符有哪些？属性继承？优先级算法计算？
css选择符：id选择器(# myid)、类选择器(.myclassname)、标签选择器(div, h1, p)、相邻选择器(h1 + p)、子选择器(ul > li)、后代选择器(li a)、通配符选择器( * )、属性选择器(a[rel = "external"])、伪类选择器(a: hover, li:nth-child)
可继承样式：font-size、font-family、color、text-indent
不可继承样式：border、padding、margin、width、 height
优先级算法： 优先级就近原则，同权重情况下样式定义最近者为准; 载入样式以最后载入的定位为准;!important > id > class > tag； important 比 内联优先级高，但内联比 id 要高
2.css3新增伪类有哪些？
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 单选框或复选框被选中。
CSS3新特性：
CSS3实现圆角（border-radius），阴影（box-shadow），
对文字加特效（text-shadow、），线性渐变（gradient），旋转（transform）
transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);// 旋转,缩放,定位,倾斜
增加了更多的CSS选择器 多背景 rgba
在CSS3中唯一引入的伪元素是 ::selection.
媒体查询，多栏布局
border-image
3.列出display的值，说明他们的作用
none 隐藏；block 块显示；inline 内嵌 ；table 表格显示；list-item 项目列表
4.position的值有哪些？relative和absolute定位的原点是？
absolute 生成绝对定位的元素，相对于定位以外的第一个祖先元素进行定位；定位忽略padding，相对位置为相对定位容器的左上角内边框；定位会脱离文档，浮动起来，多个层重叠可以使用z-index属性改变层叠顺序
fixed生成绝对定位的元素，相对于浏览器窗口进行定位。
relative生成相对定位的元素，相对于其在普通流中的位置进行定位。
inherit 规定从父元素继承 position 属性的值。
5.Doctype作用? 严格模式与混杂模式如何区分？它们有何意义?
<!DOCTYPE> 声明位于文档中的最前面，处于 <html> 标签之前。告知浏览器以何种模式来渲染文档。
严格模式的排版和 JS 运作模式是 以该浏览器支持的最高标准运行。
在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。
DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。
5.H5有哪些新特性？移除了哪些元素？
新特性：
内容元素，article、footer、header、nav、section。
表单控件，calendar、date、time、email、url、search。
控件元素，webworker, websockt, Geolocation。
移出的元素：
显现层元素：basefont，big，center，font, s，strike，tt，u。
性能较差元素：frame，frameset，noframes。
6.如何处理H5新标签的浏览器兼容性问题？如何区分HTML和HTML5?
处理兼容问题有两种方式：
IE8/IE7/IE6支持通过document.方法产生的标签，利用这一特性让这些浏览器支持HTML5新标签。
使用是html5shim框架
DOCTYPE声明的方式是区分HTML和HTML5标志的一个重要因素，此外，还可以根据新增的结构、功能元素来加以区分。
7.CSS引入的方式有哪些? link和@import的区别是?
内联 内嵌 外链 导入
区别 ：同时加载
前者无兼容性，后者CSS2.1以下浏览器不支持
Link 支持使用javascript改变样式，后者不可
8.iframe的缺点？
(1)iframe会阻塞页面的onload事件
(2)iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载
(3)会产生很多页面，不容易管理。
(4)如果框架个数多的话，可能会出现上下、左右滚动条，会分散访问者的注意力，用户体验度差。
(5)搜索引擎的检索程序无法解读这种页面，不利于SEO。
(6)很多的移动设备无法完全显示框架，设备兼容性差。
(7)iframe框架页面会增加服务器的http请求，对于大型网站是不可取的。
9.列举几种页面优化方案？
(1) 减少http请求次数：CSS Sprites, JS、CSS源码压缩、图片大小控制合适；网页Gzip，CDN托管，data缓存 ，图片服务器。
(2) 前端模板 JS+数据，减少由于HTML标签导致的带宽浪费，前端用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数
(3) 用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能。
(4) 当需要设置的样式很多时设置className而不是直接操作style。
(5) 少用全局变量、缓存DOM节点查找的结果。减少IO读取操作。
(6) 避免使用CSS Expression（css表达式)又称Dynamic properties(动态属性)。
(7) 图片预加载，将样式表放在顶部，将脚本放在底部 加上时间戳。
(8) 避免在页面的主体布局中使用table，table要等其中的内容完全下载之后才会显示出来，显示比div+css布局慢。
10.描述一下css3的animation和transition各自的特点？
css中的几个属性：animation（动画）、transition（过渡）、transform（变形）、translate（移动）。
transition 是令一个或多个可以用数值表示的css属性值发生变化时产生过渡效果。
animation 则是属于关键帧动画的范畴，它本身被用来替代一些纯粹表现的javascript代码而实现动画。
11.实现双栏布局，左边固定不动，右面根据屏幕自适应（不用JS）
(1)左边左浮动，右边加个overflow:hidden;
(2) 左边左浮动，右边加个margin-left;
(3) 左边绝对定位，右边加个margin-left;
(4) 左右两边绝对定位，右边加个width,top,left,right
12.如何清除元素浮动？
(1)使用clear:both清除浮动
(2)使用overflow属性（overflow:auto、overflow:hidden）
(3)使用display属性
(4)父级元素浮动
14.如何让一个元素水平垂直居中？
元素水平居中的方式：
(1)行级元素水平居中对齐（父元素设置 text-align:center）
(2) 块级元素水平居中对齐（margin: 0 auto）
(3)浮动元素水平居中
(4)让绝对定位的元素水平居中对齐
元素垂直居中对齐：
(1)对行级元素垂直居中（heiht与line-height的值一样）
(2)对块级元素垂直居中对齐
13.页面布局的方式？
14.设置超出文本宽度自动显示省略号？
15.css script是什么？优缺点？
16.介绍一下CSS的盒子模型？
IE 盒子模型：IE的content部分包含了 border 和 pading;
标准 W3C盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border).
17.HTML与XHTML的区别
xhtml元素必须被正确地嵌套
xhtml元素必须被关闭
xhtml标签名必须用小写字母
xhtml文档必须拥有根元素
所有属性都必须使用双引号
XHTML 不允许使用target="_blank"
xhtml比html更注重语义，更接近xml,xhtml废除了一些html里面的标签
web典型理论题整理前端大框部分
1.前端有哪几个层面组成？作用是什么？
结构层（structurallayer）由HTML 或XHTML 之类的标记语言负责创建。
表示层（presentationlayer）由CSS 负责创建。
行为层（behaviorlayer）是Javascript 语言和DOM 主宰的领域
2.从前端出发做好SEO需要考虑什么？
3.请描述一下cookies，sessionStorage和localStorage的区别
共同点：都是保存在浏览器端，且同源的。
不同点：
存储大小：
cookie数据大小不能超过4k。
sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
有效时间：
localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；
sessionStorage 数据在当前浏览器窗口关闭后自动删除。
cookie 设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭
数据与服务器之间的交互方式：
cookie的数据会自动的传递到服务器，服务器端也可以写cookie到客户端
sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。
4.HTTP协议的状态消息都有哪些?
成功（2字头）这一类型的状态码，代表请求已成功被服务器接收、理解、并接受。
重定向（3字头）这类状态码代表需要客户端采取进一步的操作才能完成请求。通常，这些状态码用来重定向，后续的请求地址（重定向目标）在本次响应的 Location 域中指明。
请求错误（4字头）这类的状态码代表了客户端看起来可能发生了错误，妨碍了服务器的处理。
服务器错误（5、6字头）这类状态码代表了服务器在处理请求的过程中有错误或者异常状态发生，也有可能是服务器意识到以当前的软硬件资源无法完成对请求的处理。
5.那些操作会造成内存泄漏？
内存泄漏指任何对象在您不再拥有或需要它之后仍然存在垃圾回收器定期扫描对象，并计算引用了每个对象的其他对象的数量。如果一个对象的引用数量为 0（没有其他对象引用过该对象），或对该对象的惟一引用是循环的，那么该对象的内存即可回收。 setTimeout 的第一个参数使用字符串而非函数的话，会引发内存泄漏。
6.浏览器的内核分别是什么?
IE: trident内核
Firefox：gecko内核
Safari：webkit内核
Opera：以前是presto内核，Opera现已改用Google Chrome的Blink内核
Chrome：Blink(基于webkit，Google与Opera Software共同开发)
7.页面性能优化的方法？
1.减少HTTP请求
2.减少重绘和重排
3.减少DOM操作
4.使用JSON格式来进行数据交换
5.高效使用HTML标签和CSS样式
6.使用CDN加速（内容分发网络）
7.精简CSS和JS文件
8.把CSS放到顶部，把JS放到底部
9.压缩图片和使用图片Sprite技术
10.注意控制Cookie大小和污染
8.在移动端制作WEBapp优化页面的方案？
加载优化
(1)减少HTTP请求：合并CSS、JavaScript；合并小图片，使用雪碧图
(2)缓存：缓存一切可缓存的资源；使用长Cache（使用时间戳更新Cache）；使用外联式引用CSS、JavaScript
(3)压缩HTML、CSS、JavaScript：压缩（例如，多余的空格、换行符和缩进）；启用GZip
(4)无阻塞:CSS放在页面头部并使用Link方式引入;JavaScript放在页面尾部或使用异步方式加载
(5)使用首屏加载:首屏的快速显示，可以大大提升用户对页面速度的感知，因此应尽量针对首屏的快速显示做优化。
(6)按需加载:LazyLoad;滚屏加载;通过Media Query加载
(7)预加载:可感知Loading(如进入空间游戏的Loading);不可感知的Loading（如提前加载下一页）;对用户行为分析，可以在当前页加载下一页资源，提升速度。
(8)压缩图片:使用其它方式代替图片（使用CSS3；使用SVG；使用IconFont）;使用script;选择合适的图片（webP优于JPG；PNG8优于GIF）;选择合适的大小（首次加载不大于1014KB；基于手机屏幕一般宽度不宽于640）
提醒：过度压缩图片大小影响图片显示效果。
(9)减少Cookie:Cookie会影响加载速度，所以静态资源域名不使用Cookie。
(10)避免重定向:重定向会影响加载速度，所以在服务器正确设置避免重定向。
(11)异步加载第三方资源:第三方资源不可控会影响页面的加载和显示，因此要异步加载第三方资源。
脚本执行优化
(1)CSS写在头部，JavaScript写在尾部或异步。
(2)避免图片和iFrame等的空Src，空Src会重新加载当前页面，影响速度和效率。
(3)尽量避免重设图片大小，重设图片大小是指在页面、CSS、JavaScript等中多次重置图片大小，多次重设图片大小会引发图片的多次重绘，影响性能。
(4)图片尽量避免使用DataURL，DataURL图片没有使用图片的压缩算法文件会变大，并且要解码后再渲染，加载慢耗时长。
9.优雅降级和渐进增强
渐进增强 针对低版本浏览器进行构建页面，保证最基本的功能，然后在针对高级浏览器进行效果，交互等改进和追加功能达到更好的用户体验。
优雅降级 一开始就构建完整的功能，然后再针对低版本浏览器进行兼容
区别是优雅降级是从复杂的现状开始的，并试图减少用户体验的供给b,渐进增强则是从一个非常基础得，能够起作用的版本开始的，并不断扩充，以适应未来环境的需要，降级意味着往回看；而渐进增强意味着朝前看，同时保证其根基处于安全地带
10.对模块化开发的理解
模块化开发:封装细节，提供使用接口，彼此之间互不影响，每个模块都是实现某一特定的功能。模块化开发的基础就是函数
(1)使用函数封装
(2)使用对象封装
(3)立即执行函数写法
(4)放大模式
(5)宽放大模式
(6)输入全局变量
11.如何实现浏览器内多个标签页之间的通信？
方法一：使用localStorage
方法二、使用cookie+setInterval
12.响应式开发需要用到的技术？
(1) Media Query（媒体查询）：用于查询设备是否符合某一特定条件，这些特定条件包括屏幕尺寸，是否可触摸，屏幕精度，横屏竖屏等信息。
(2)使用em或rem做尺寸单位：用于文字大小的响应和弹性布局。
(3) 禁止页面缩放：<meta name="viewport" content="initial-scale=1, width=device-width, maximum-scale=1, user-scalable=no" />
(4) 屏幕尺寸响应
a) 固定布局：页面居中，两边留白，他能适应大于某个值一定范围的宽度，但是如果太宽就会有很多留白，太窄会出现滚动条，在PC页面上很常见。
b) 流动布局：屏幕尺寸在一定范围内变化时，不改变模块布局，只改变模块尺寸比例。比固定布局更具响应能力，两边不留白，但是也只能适应有限的宽度变化范围，否则模块会被挤（拉）得不成样子。
c) 自定义布局：上面几种布局方式都无法跨域大尺寸变化，所以适当时候我们需要改变模块的位置排列或者隐藏一些次要元素。
d) 栅格布局：这种布局方式使得模块之间非常容易对齐，易于模块位置的改变用于辅助自定义布局。
(5)宽度不固定，可以使用百分比
(6) 图片处理：图片的宽度和高度设置等比缩放，可以设置图片的width为百分比，height:auto;背景图片可以使用background-size 指定背景图片的大小。
13.九种浏览器端缓存方法？
