H5复习笔记

CSS复习巩固

1、你做的页面在哪些流览器测试过？这些浏览器的内核分别是什么?
1. IE: trident内核
2. Firefox：gecko内核
3. Safari:webkit内核
4. Opera:以前是presto内核，Opera现已改用Google
5. Chrome的Blink内核（基于webkit，Google与Opera Software共同开发）

2、每个HTML文件里开头都有个很重要的东西，Doctype，知道这是干什么的吗？
声明位于文档中的最前面的位置，处于 标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。（重点：告诉浏览器按照何种规范解析页面）
3、什么是严格模式？怎么使用严格模式？
- 消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为;
- 消除代码运行的一些不安全之处，保证代码运行的安全；
- 提高编译器效率，增加运行速度；
- 为未来新版本的Javascript做好铺垫。
"use strict"; 标示着进入严格模式
4、为什么利用多个域名来存储网站资源会更有效？
* CDN缓存更方便
* 突破浏览器并发限制
* 节约cookie带宽
* 节约主域名的连接数，优化页面响应速度
* 防止不必要的安全问题
5、请描述一下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仅仅是为了在本地“存储”数据而生。
6、简述一下src与href的区别。
src用于替换当前元素，href用于在当前文档和引用资源之间确立联系。
src是source的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。

当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。
href是Hypertext Reference的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，如果我们在文档中添加

那么浏览器会识别该文档为css文件，就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用link方式来加载css，而不是使用@import方式。
7、知道的网页制作会用到的图片格式有哪些？
png-8，png-24，jpeg，gif，svg，WebP 。
8、在css/js代码上线之后开发人员经常会优化性能，从用户刷新网页开始，一次js请求一般情况下有哪些地方会有缓存处理？
- dns缓存
- cdn缓存
- 浏览器缓存
- 服务器缓存
9、一个页面上有大量的图片（大型电商网站），加载很慢，你有哪些方法优化这些图片的加载，给用户更好的体验。
图片懒加载，在页面上的未可视区域可以添加一个滚动条事件，判断图片位置与浏览器顶端的距离与页面的距离，如果前者小于后者，优先加载。
如果为幻灯片、相册等，可以使用图片预加载技术，将当前展示图片的前一张和后一张优先下载。
如果图片为css图片，可以使用CSSsprite，SVGsprite，Iconfont、Base64等技术。
如果图片过大，可以使用特殊编码的图片，加载时会先加载一张压缩的特别厉害的缩略图，以提高用户体验。
如果图片展示区域小于图片的真实大小，则因在服务器端根据业务需要先行进行图片压缩，图片压缩后大小与展示一致。
10、CSS中可以通过哪些属性定义，使得一个DOM元素不显示在浏览器可视范围内？
11、
最基本的：
设置display属性为none，或者设置visibility属性为hidden
技巧性的：
设置宽高为0，设置透明度为0，设置z-index位置在-1000
12、超链接访问过后hover样式就不出现的问题是什么？如何解决
被点击访问过的超链接样式不在具有hover和active了,解决方法是改变CSS属性的排列顺序: L-V-H-A（link,visited,hover,active）
13、什么是Css Hack？ie6,7,8的hack分别是什么
针对不同的浏览器写不同的CSS code的过程 就叫CSS Hack；
14、请用Css写一个简单的幻灯片效果页面
使用CSS3新属性，animation动画实现。
15、display:none与visibility:hidden的区别是什么？
display : 隐藏对应的元素但不挤占该元素原来的空间。
visibility: 隐藏对应的元素并且挤占该元素原来的空间。
即是，使用CSS display:none属性后，HTML元素（对象）的宽度、高度等各种属性值都将“丢失”;而使用visibility:hidden属性后，HTML元素（对象）仅仅是在视觉上看不见（完全透明），而它所占据的空间位置仍然存在。
16、html语义化是什么
当页面样式加载失败的时候能够让页面呈现出清晰的结构
有利于seo优化，利于被搜索引擎收录（更便于搜索引擎的爬虫程序来识别）
便于项目的开发及维护，使html代码更具有可读性，便于其他设备解析。
17、html常见兼容性问题？
1. 双边距BUG float引起的 使用display
2. 3像素问题 使用float引起的 使用dislpay:inline -3px
3. 超链接hover 点击后失效 使用正确的书写顺序 link visited hover active
4. le 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）
9. IE6不支持PNG透明背景，解决办法: IE6下使用gif图片
18、对WEB标准以及W3C的理解与认识
标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外 链css和js脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件，容易维 护、改版方便，不需要变动页面内容、提供打印版本而不需要复制内容、提高网站易用性。
19、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，单选框或复选框被选中。
20、text-align:center和line-height有什么区别？
text-align是水平对齐，line-height是行间。

JS复习巩固

1、数据类型
1. 数值类型 number
2. 字符串类型 string
3. 布尔类型 boolean
4. undefined类型
5. null类型 空
6. 对象 object