html总结 2017.2.8night

1、h5行内元素，块级元素，空元素有哪些

行内元素：img  span  input  label  strong  textarea

块级元素：blackquote  ul  ol     div  h1-h6   p     dir

可变元素：script   button（根据上下文决定是行内或块级）

空元素：<br/>   <link>   <img>   <meta>  <hr>(分隔线)  <input>

2、什么是webGL，优点。

点击打开链接

点击打开链接

webGL：是一种3D绘图标准。将js和openGL  es  2.0结合，通过增加openGL  es  2.0的一个js绑定，为h5  canvas提供硬件 3d加速渲染，开发人员可以借助系统显卡实现浏览器流畅的展示3D图像。原生的webGL比较复杂，通常使用第三方的库，three.js。

优点：1、直接利用h5的脚本实现3d图像的渲染，不需要任何渲染插件。

            2、通过底层硬件加速实现图形的渲染，是通过统一的、标准的、跨平台的openGL接口实现的。

3、cookie   localstorage   sessionstorage

cookie: 1、每个域名存储量小（4k）

              2、所有域名存储量小（4k）

              3、域名个数随着浏览器不同而不同，有个数限制

              4、会随着请求发送到服务器端     、

定义：cookie是web服务器保存在浏览器的文件，保存一些用户的信息，当用户在此访问该网站时，浏览器会首先访问本地的cookie，并将其原样发送给web服务器，因此用户会看到自己上次登录网站时的信息。

优点：网站个人化。

缺点：安全性。若cookie被拦截，无需知道cookie的内容，直接转发即可。

localstorage:1、单个域名存储量大（5M）

                        2、永久存在

                       3、总体数量无限制

sessionstroage:1、存储量更大

                             2、只存在于session里，同源同窗口，关闭即消失。

webStorage:存在本地的数据，数据存储分为本地存储和服务器端存储。本地存储优点是不必经过网络，可以直接显示，不必请求服务器发送数据，减少网络流量。

相同点：

三者都是存储在浏览器端的数据。

注：浏览器为什么不能跨域访问。

防止CSRF攻击。CSRF(跨站请求伪造)。

   

解决CSRF：验证refer  点击打开链接

4、html语义化的理解。

是什么：html的语义化，是根据内容的结构，选择合适的标签，以写出更优雅的代码具有更高的可读性并便于网络爬虫对页面更好的解析。

为什么：1、为了在没有css时使内容结构完整

                2、对seo友好，网络爬虫是根据标签的上下文和关键词来计算权重的，语义化更利于网络爬虫更好的抓取内容。

               3、使代码具有更高的可读性，便于维护。

5、link  @import区别。

  1、link是html标签，@import属于css

  2、link引入css时可以与页面同时渲染，而@import只能当页面渲染完后才进行

  3、link无兼容问题，@import对于较低的版本不适用。

 4、link权重高于@import。

6、SVG的理解。

SVG是一种与分辨率无关的二维矢量图形格式，由文本格式描述的图形内容。

优点：1、可任意放缩。

            2、具有超清晰的显示效果。

            3、具有1600万种颜色供选择。

            4、无论用户是否安装相关字体，不同的用户看到的文本显示都与设计的一样。

            5、文件小，小于jpeg,  gif

挑战：1、面临已占据重要市场份额的flash的挑战

             2、本地运行环境下厂家的支持程度。

7、html全局属性

asscesskey   class  id  dir  data-*  draggable   dropzone  contextmenue   contenteditable   translate  title  hidden   style   lang     

注：data-*: 存储页面自定义属性 ，如： data-animal-type。

8、target取值和作用

_blank:在一个新的未命名的窗口打开目标文档

_self:在相同的框架里打开目标文档

_top:清除框架所有内容并在整个浏览器窗口载入目标文档

_parent:在父框架打开目标文档

9、浏览器内核。

分为两部分：渲染引擎 和  js引擎

渲染引擎：解释html 和css并渲染页面。不同的浏览器内核渲染出的页面不同

js引擎：解释js来实现页面的动态效果。

10、iframe优缺点。

定义：<iframe  src="www.baidu.com"  width=30px   height:50px></iframe>

浏览器中的浏览器。

优点：可并行加载。一般用于加载广告。

缺点：1、搜索引擎无法检索，不利于seo

    2、iframe与主页面共享连接池，而浏览器只能开少量的连接到服务器，iframe可能用掉大部分连接，所以影响主页面的加载。

    3、阻塞主页面的onload，onload事件会在iframe全部加载完毕后才触发。

    改进：

   在加载完主界面的重要元素后，使用js动态给iframe添加src。