整理web知识Day01

1.什么是盒模型

1.盒模型组成

1. margin(外边距)：清除边框外的区域，外边框是透明的
2. border(边框)：围绕在内边距和内容外的边框
3. padding(内边距)：清除内容周围的区域，是透明的
4. content(内容)：盒子显示的内容(图片or文本)

2.盒模型类型

1. W3C的标准盒模型(width=content的宽度) 标准盒子
2. IE的盒模型(width=content+padding+border的宽度)

如何设置？
运用css3的属性box-sizing

标准：box-sizing:content-box;
IE：box-sizing:border-box;

2.行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？行内元素和块级元素有什么区别？

• 行内元素：a b span img input strong select
• 块级元素:div ul ol li dl dt dd h1 h2 h3...p
• 空元素:<br> <hr> <img> <input> <link> <meta>
• 行内 块级区别：行内不独占一行，不可设置宽高；块级独占一行，可以设置宽高

3.src 和href的区别

src

src是source的缩写，src的内容是必不可少的一部分，是引入。

src指向的内容会被嵌入到文档中当前标签所在的位置。常用的有：img，script,iframe。
例如：

<script src="script.js"></script>

**当浏览器解析到该元素时，会暂停浏览器的渲染，直到该资源加载完毕。**这也是将js脚本放在底部而不是头部的原因。

href

href是Hypertext Reference的缩写，表示超文本引用。用来建立当前元素和文档之间的链接。常用的有： a， link

例如：

<link href="reset.css" rel=”stylesheet“/>

浏览器会识别该文档为css文档，并行下载该文档，并且不会停止对当前文档的处理。这也是建议使用link，而不采用@import加载css的原因。

4.css Hack

1.什么是css Hack

Css Hack

• 是通过css样式中加入一些特殊符号，让不同的浏览器识别不同的符号什么样的浏览器识别什么样的符号是有标准的，CSS hack就是让你记住这个标准），以达到应用不同的CSS样式的目的。
• 由于不同厂商的浏览器，比如Internet Explorer,Safari,Mozilla Firefox,Chrome等，或者是同一厂商的浏览器的不同版本，如IE6和IE7，对CSS的解析认识不完全一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。 这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。
  简单的说，CSS hack的目的就是使你的CSS代码兼容不同的浏览器。当然，我们也可以反过来利用CSS hack为不同版本的浏览器定制编写不同的CSS效果。

2. css Hack常见的三种形式##

css属性Hack，css选择符Hack以及IE条件注释Hack，Hack主要针对IE浏览器！

1. 属性级Hack：例IE6能识别下划线 _ ,IE7能识别 * 但不能识别下划线_ 而firefox两个都不能认识。
2. 选择符Hack： IE6能识别*html .class{} IE7能识别*+html .class{}或者*:first-child+html .class{}
3. IE条件注释Hack：IE条件注释是微软IE5开始就提供的一种非标准逻辑语句。比如针对所有IE：<!-[if IE]><!-您的代码-><![endif]>，针对IE6及以下版本：<!-[if it IE 7]><!-您的代码-><![endif]->，这类Hack不仅对CSS生效，对写在判断语句里面的所有代码都会生效。

PS：条件注释只有在IE浏览器下才能执行，这个代码在非IE浏览下被当做注释视而不见。可以通过IE条件注释载入不同的CSS、JS、HTML和服务器代码等。

5.什么叫优雅降级和渐进增强

• 渐进增强（Progressive Enhancement）：一开始就针对低版本浏览器进行构建页面，完成基本的功能，然后再针对高级浏览器进行效果、交互、追加功能达到更好的体验。
• 优雅降级（Graceful Degradation）：一开始就构建站点的完整功能，然后针对浏览器测试和修复。比如一开始使用 CSS3 的特性构建了一个应用，然后逐步针对各大浏览器进行 hack 使其可以在低版本浏览器上正常浏览。

6.px和em的区别

px像素（Pixel）

相对长度单位。像素px是相对于显示器屏幕分辨率而言的。

em

是相对长度单位。相对于当前对象内文本的字体尺寸,多理解父级设定font-size的尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的 默认字体尺寸。

7.HTML5 为什么只写

html5不基于SGML,因此不需要对DTD进行引用，但是需要doctype来规范浏览器的行为（让浏览器按照他们应该的方式来运行）
而HTML4.01基于SGML，所以需要对DTD进行引用，才能告知浏览器文档所使用的文档类型。

总结：html5不基于sgml不要引用dtd，但是需要规范；html4基于sgml需要引用dtd；

8.Http的状态码有哪些

9.一次完整的HTTP事务是怎么一个过程

1. 域名解析
2. 发起Tcp三次的握手
3. 建立Tcp连接后发起http请求
4. 服务端响应http请求，浏览器获得html码
5. 浏览器解析html代码，并请求html代码中的资源
6. 浏览器对页面进行渲染并呈现效果给客户

10.HTTPS是如何实现加密

HTTPS在传输数据之前需要客户端（浏览器）与服务端（网站）之间进行一次握手，在握手过程中将确立双方加密传输数据的密码信息。TLS/SSL协议不仅仅是一套加密传输的协议，更是一件经过艺术家精心设计的艺术品，TLS/SSL中使用了非对称加密，对称加密以及HASH算法。

11.浏览器是如何渲染页面的

渲染流程

1、解析文档构建DOM树

浏览器的解析内容可以分为三个部分：
HTML/XHTML/SVG：解析这三种文件后，会生成DOM树（DOM Tree）
CSS：解析样式表，生成CSS规则树（CSS Rule Tree）
JavaScript：解析脚本，通过DOM API和CSSOM API操作DOM Tree和CSS Rule Tree，与用户进行交互。
以上三类文件的执行顺序会根据其在文档中的位置及其标签属性的不同而有异同，具体在后文进行讨论。

2、构建渲染树

解析文档完成后，浏览器引擎会将 CSS Rule Tree 附着到DOM Tree 上，并根据DOM Tree 和 CSS Rule Tree构造 Rendering Tree（渲染树）。此处需要注意：
Render Tree和DOM Tree的区别在于，类似Head或display：node之类的东西不会放在渲染树中；
将CSS Rule Tree匹配到DOM Tree需要解析CSS的选择器，为了提高该过程的性能，DOM树应该尽量小，CSS Selector应该尽量使用id和class，避免过度层叠。

3、布局与绘制渲染树

解析position, overflow, z-index等等属性，计算每一个渲染树节点的位置和大小，此过程被称为reflow。最后调用操作系统的Native GUI API完成绘制（repain）。

注意：
渲染树的节点，在Gecko中称为frame，而在webkit中称为renderer；
reflow和repaint是两个不同的概念，其区别会在后文进行探讨。

12.浏览器的内核有哪些？分别有什么代表的浏览器

1. Trident内核：代表作品是IE
2. Gecko内核：代表作品是Firefox，即火狐浏览器。
3. Webkit内核：代表作品是Safari Chromewebkit、曾经的Chrome，是开源的项目。
4. Presto内核：代表作品是Opera ，Presto是由Opera Software开发的浏览器排版引擎，它是世界公认最快的渲染速度的引擎。在13年之后，Opera宣布加入谷歌阵营，弃用了 Presto
5. Blink内核：由Google和Opera Software开发的浏览器排版引擎，2013年4月发布。现在Chrome内核是Blink。谷歌还开发了自己的JS引擎，V8，使JS运行速度极大地提高了

13.页面导入时，使用link和@import有什么区别

1. 作用上：link属于xhtml 除了加载css还能定义css以及定义rel连接属性等作用；而@import只能加载css 因为@import是由css提供的
2. 页面加载时：link会被同时加载，而@import引用的css要等到页面被加载完了才加载
3. 兼容问题：@import是css2.1推出的 IE5以上才能识别；link是xhtml 所以无兼容问题；

14.如何优化图像，图像格式的区别

优化图像

1. 不用图片，尽量用css3代替。 比如说要实现修饰效果，如半透明、边框、圆角、阴影、渐变等，在当前主流浏览器中都可以用CSS达成。
2. 使用矢量图SVG替代位图。对于绝大多数图案、图标等，矢量图更小，且可缩放而无需生成多套图。现在主流浏览器都支持SVG了。
3. 使用恰当的图片格式。我们常见的图片格式有JPEG、GIF、PNG。
   基本上，内容图片多为照片之类的，适用于JPEG。
   而修饰图片通常更适合用无损压缩的PNG。
   GIF基本上除了GIF动画外不要使用。且动画的话，也更建议用video元素和视频格式，或用SVG动画取代。
4. 按照HTTP协议设置合理的缓存。
5. 使用字体图标webfont、CSS Sprites等。
6. 用CSS或JavaScript实现预加载。
7. WebP图片格式能给前端带来的优化。WebP支持无损、有损压缩，动态、静态图片，压缩比率优于GIF、JPEG、JPEG2000、PG等格式，非常适合用于网络等图片传输。

图像格式区别

矢量图：即图标字体，如 font-awesome；svg。

位图：gif,jpg(jpeg),png。

区别：

1. gif:是是一种无损，8位图片格式。具有支持动画，索引透明，压缩等特性。适用于做色彩简单(色调少)的图片，如logo,各种小图标icons等。
2. JPEG格式是一种大小与质量相平衡的压缩图片格式。适用于允许轻微失真的色彩丰富的照片，不适合做色彩简单(色调少)的图片，如logo,各种小图标icons等。
3. png:PNG可以细分为三种格式:PNG8，PNG24，PNG32。后面的数字代表这种PNG格式最多可以索引和存储的颜色值。

关于透明：PNG8支持索引透明和alpha透明;PNG24不支持透明;而PNG32在24位的PNG基础上增加了8位（256阶）的alpha通道透明;

优缺点：

1. 能在保证最不失真的情况下尽可能压缩图像文件的大小。
2. 对于需要高保真的较复杂的图像，PNG虽然能无损压缩，但图片文件较大，不适合应用在Web页面上。

15.列举了解的Html5. Css3 新特性

1.html5的新特性？(记住有九大模块内容)

添加了video，radio标签

• 添加了canvas画布和svg,渲染矢量图片
• 添加了一些列语义化标签header,footer,main,section,aside,nav等
• input的type值新添加了很多属性（email，url，number，range，Date pickers (date, month, week, time, datetime, datetime-local)，search，color）
• 添加了地理位置定位功能 Geolocation API
• 添加了web存储功能，localStorage和sessionStorage
• 使用 HTML5，通过创建 cache manifest 文件，可以轻松地创建 web 应用的离线版本
• web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行。
• 服务端事件推送（EventSource 对象用于接收服务器发送事件通知），所有主流浏览器均支持服务器发送事件，除了 Internet Explorer

2.CSS3中新添加的特性？（css3也有九大属性）

媒体查询（可以查询设备的物理像素然后进行自适应操作）

• transform，transition，translate,scale,skelw，rotate等相关动画效果
• box-shadow,text-shadow等特效
• CSS3 @font-face 规则,设计师可以引入任意的字体了
• CSS3 @keyframes 规则，可以自己创建一些动画等
• 2D、3D转换
• 添加了border-radius，border-image等属性
• CSS3 创建多列（column-count规定文本可以以几列的方式布局）
• CSS3 用户界面（resize，box-sizing，outline-offset）