• 问题总结（二）

    1. 说一说你对web标准的理解

    它不是一个标准，而是有很多标准组合而成的结果。
    网页包含结构（HTML），表现（CSS）和行为（JavaScript）。

    2. 浏览器的内核与区别

    • Trident(又称为MSHTML）代表 IE 浏览器

      • Trident是微软开发的一种排版引擎。
      • 基于Trident内核的浏览器有 ie6、ie7、ie8(Trident 4.0) 、ie9(trident 5.0) 、ie10(trident6.0)、ie11(trident7.0)、国内的很多双核浏览器也是基于trident内核的，例如：世界之窗、360安全浏览器、遨游2.0（3.0以上版本开始采用webkit内核）、搜狗浏览器、腾讯浏览器等

    • Gecko（跨平台）代表 Mozilla Firefox

      • Gecko是一个跨平台内核，可以在Windows、BSD、Linux和Mac OS X中使用
      • 正在和曾经使用Gecko引擎的浏览器有Firefox、网景6～9、SeaMonkey、Camino、Mozilla、Flock、Galeon、K-Meleon、Minimo、Sleipni、Songbird、XeroBank。
      • Google Gadget引擎采用的就是Gecko浏览器引擎。

    • WebKit内核（代表：Safari、Chrome）

      • WebKit 是一个开放源代码的浏览器引擎(Web Browser Engine)。WebKit也是自由软件，同时开放源代码。它的特点在于源码结构清晰、渲染速度极快。主要代表产品有Safari和Google的浏览器Chrome。
      • WebKit内核在手机上的应用也十分广泛，例如Google的Android平台浏览器、Apple的iPhone浏览器、Nokia S60浏览器等所使用的浏览器内核引擎，都是基于WebKit引擎的。
      • WebKit内核也广泛应用于Widget引擎产品，包括中国移动的BAE、Apple的Dashboard以及Nokia WRT在内采用的均为WebKit引擎。

    • Presto内核（代表：Opera）

      • Presto是由Opera Software开发的浏览器排版引擎，供Opera 7.0及以上使用。
      • Presto的特点就是渲染速度的优化达到了极致，它是目前公认的网页浏览速度最快的浏览器内核，然而代价是牺牲了网页的兼容性。
      • Presto实际上是一个动态内核，与Trident、Gecko等内核的最大区别就在于脚本处理上，Presto有着天生的优势，页面的全部或者部分都能够在回应脚本事件时等情况下被重新解析。此外该内核在执行JavaScript时有着最快的速度，根据同等条件下的测试，Presto内核执行同等JavaScript所需的时间仅有Trident和Gecko内核的约1/3。
      • Presto是商业引擎，除了Opera以外较少浏览器使用Presto内核，这在一定程度上限制了Presto的发展。

    老的IE浏览器有一套自己的标准，其他内核的浏览器都在尽量遵守 W3C 标准

    360安全浏览器
    极速模式是由Chrome的内核，而兼容模式是IE内核。

    3.  CSS与盒模型

    IE盒模型和标准盒模型：
    盒模型：内容（content）， 填充（padding），边框（border）和边界（margin）。
    IE 的盒模型的content部分包含padding和border部分。
    box-sizing的属性允许以特定的方式定义和匹配某个区域的特定元素，常见的border-box | content-box |inherit（继承）。
    IE8+支持该属性。

    content-box:

    padding和border不被包含在定义的width和height之内。对象的实际宽度等于设置的width值和border、padding以及margin之和，即 ( Element width = width + border + padding+margin )

    此属性表现为标准模式下的盒模型。

    border-box:

    padding和border被包含在定义的width和height之内。对象的实际宽度就等于设置的width值，即使定义有border和padding也不会改变对象的实际宽度，即 ( Element width = width )

    此属性表现为怪异模式下的盒模型。

    4. CSS3的最新的属性

            圆角 ——border-radius；
            阴影——box-shadow；        
            文字阴影——text-shadow;
            渐变——gradient；
            转变——transform（旋转：rotate    缩放：scale   定位：translate     倾斜：skew）
            多背景——使用逗号隔开
            颜色——rgba（红、绿、蓝、透明度）
            边框背景——border-image；
            服务器端字体——font-face        
    1. @font-face {
    2. 　　font-family:'MyFont';/* 表示为这种字体起一个名称，可以随意设置，这里用的是MyFont */
    3. 　　src: url('myfont.eot');/* 这一行表示字体位置，由于ie只支持服务器端的eot字体，所以这一行是ie专用的 */
    4. 　　src:local('myfont.ttf'),
    5. 　　url('myfont.woff') format('woff'),
    6. 　　url('myfont.ttf') format('truetype');/* local()表示在本机（客户端）查找该字体，如果本机已经安装了，就不用下载了。url()表示字体在服务器上的位置，format()用来说明字体格式。Firefox 3.5支持TrueType和OpenType字体，Firefox 3.6又增加了WOFF字体。其他基于Webkit引擎的浏览器（sarif，opera、chrome），目前好像只支持truetype */
    7. }
    8. /*使用：*/
    9. h1{font-family:'MyFont';}
            选择器的增加:
            伪元素的增加selection
            媒体查询：
        1. /** * 1200+ * 内容宽度：1190px 页面内容居中 * 匹配默认样式 */
        2. .box {
        3. width:1190px;
        4. margin:auto;
        5. }
        6. /* 1024-1199 内容宽度990 页面内容居中 */
        7. @media only screen and (max-width:1199px){
        8. .box {
        9. width:990px;
        10. }
        11. }
        12. /* 768-1023 内容宽度740 页面内容居中 */
        13. @media only screen and (max-width:1023px){
        14. .box {
        15. width:740px
        16. }
        17. }
        18. /* 768 ipad竖屏：(orientation:portrait) ipad横屏：(orientation:landscape) */
        19. @media only screen and (max-width:768px) and (orientation:portrait){}
        20. /** * 640-767 内容宽度590
        21. * 两边间距25，页面内容居中 */
        22. @media only screen and (max-width:767px){
        23. .box {
        24. width:590px
        25. }
        26. }
        27. /** *481-639
        28. * 按百分比缩放，最小缩放到320 */
        29. @media only screen and (max-width:639px){
        30. .box {
        31. width:98%;
        32. }
        33. }
        34. /** *320-479
        35. * 按百分比缩放，最小缩放到320 */
        36. @media only screen and (max-width:479px){
        37. .box {
        38. width:95%
        39. }
        40. }
        41. /* 设置320px以下的样式 */
        42. @media only screen and (max-width:320px){
        43. .box {
        44. min-width:320px;
        45. }
        46. }
         
            多栏布局和弹性布局
    1. flex-box:
    3. 弹性布局，适应性强，在做不同屏幕分表率的界面时非常实用
    4. 可以随意按照宽度、比例划分元素的宽高
    5. 可以轻松改变元素的显示顺序
    6. 自适应布局实现快捷，易维护
    7. 属性：
    8. .flex{
    9. display: box;// 将一个元素的子元素以弹性布局进行布局
    10. box-flex:1;// 子元素如何分配剩余空间
    11. box-orient: horizontal | vertical |inline-axis | block-axis | inherit;// 子元素的排列方式（横向或者竖向）
    12. box-direction: normal | reverse | inherit;// 子元素排列顺序
    13. box-align: start |end| center | baseline | stretch;// 垂直对齐方式
    14. box-pack: start |end| center | justify;// 水平对齐方式
    15. box-ordinal-group:;// 子元素的显示顺序
    16. }

    5. HTML5新特性

            新增加了语义化的标签：footer，header，main，aside，article，nav等
            删除了一些无意义的标签：basefont、big、center、font、s、strike、tt、u等

            input标签新增属性

      1. email 
      2. 必须输入email
      3. url 
      4. 必须输入url地址
      5. number 
      6. 必须输入数值
      7. range 
      8. 必须输入一定范围内数值
      9. DatePickers（日期选择器） 
      10. 拥有多个可供选取日期和时间的新输入类型： 
      11. date -选取日、月、年 
      12. month -选取月、年 
      13. week -选取周和年 
      14. time -选取时间（小时和分钟） 
      15. datetime -选取时间、日、月、年（UTC 时间） 
      16. datetime-local -选取时间、日、月、年（本地时间）
      17. search 
      18. 用于搜索域，域显示为常规的文本域。
      19. color
      音频视频等元素的增加
      画布canvas API的增加
      获取地理位置的Geolocation API
      本地存储 LocalStorage （长期数据存储，不手动删除则一直存在）http://www.cnblogs.com/xiaowei0705/archive/2011/04/19/2021372.html
      sessionStroage（数据在浏览器关闭后自动删除）

      6. JavaScript的数据类型

      基本数据类型，实际值保存在变量中：

      undefined
      null
      number
      string
      boolean    
      引用数据类型，引用类型的值保存在内存中的对象
      Object
      Date
      Array
      RegExp
      引用数据类型得指向只是一个路径，例如a = b（b是引用类型），a的值改变b的值也会改变

      7. 前端语义化的理解

      去掉或者是失去样式的时候页面能够呈现出清晰的结构。
      有利于SEO 和搜索引擎建立良好的沟通，有利于爬虫抓取更多有效信息，爬虫是通过标签来给与权重，如(
      h1的权重要高于p)
      方便其他设备解析（屏幕阅读器，盲人阅读器，移动设备等）以有意义的方式来渲染网页。
      便于团队的开发与维护，语义化可以增加网页的可读性，遵循W3C的标准，更高效的开发。

      8. JQuery的优缺点

      2. 优点：
        1. jQuery实现脚本与页面的分离
        2. 性能：在大型JavaScript框架中，jQuery对性能的理解最好。
        3. 它是一个“标准”：虽然并不是官方标准，但业内对jQuery的支持经非常广泛
        4. 丰富的插件：基于jQuery开发的插件种类很多，能解决大部分问题，前端工程师还可以根据项目需要自行封装不同需求的插件。
        5. 入门简单、易学，节约学习成本。
        6. 轻量级，最新的版本压缩的jquery代码只有十几k
        7. 强大的选择器，提供多重选择
        8. 出色的DOM操作的封装：jQuery封装了大量常用DOM操作，使你编写DOM操作相关程序的时候能够得心应手，优雅的完成各种原本非常复杂的操作，让JavaScript新手也能写出出色的程序
        9. 完善的Ajax
        10. 可靠的事件处理机制
        11. 不污染顶级变量
        12. 出色的浏览器兼容性
        13. 链式操作方式
        14. 行为层与结构层的分离
        15. 完善的文档
        16. 开源
      3. 缺点：
        1. 从上面的介绍可以看出 jquery的优点很多，当然任何一个框架都不是完美的，jQuery也有自身的缺陷，下面就罗列下jQuery的缺点和劣势。
        2. 不能向后兼容：每一个新版本不能兼容早期的版本
        3. 插件兼容性
        4. 在同一页面上使用多个插件时，很容易碰到冲突现象
        5. jQuery的稳定性
        6. 在大型框架中，jQuery核心代码库对动画和特效的支持相对较差

      9. 前端安全的检测与预防

          基本攻击可以分为三大类——资源枚举、参数操作、其他攻击
          资源枚举：遍历所有可以访问的目录，然后将一些常见的"备胎"文件名（sql.bak, index.html）如果枚举到就直接下载。
          参数操作：包含Sql注入，XXS，会话劫持等，xss指的是在web中插入恶意的html代码。
          cookie劫持，通过获取用户的权限，到恶意站点的访问，并携带用户的cookie，获取用户的cookie后直接用被盗用户的身份登录站点。
          解决方案：
          永远不要相信客户端传过来的信息，对传过来的信息进行过滤和编码处理。
          使用黑名单和白名单处理（即“不允许哪些敏感信息”或“只允许哪些信息”，白名单的效果更好但局限性高）
          检查、验证请求来源，对每一个重要的操作都进行重新验证使用SSL防止第三方监听通信（但无法阻止XSS、CSRF、SQL注入攻击）
          不要将重要文件、备份文件存放在公众可访问到的地方
          会话ID无序化
          对用户上传的文件进行验证（不单单是格式验证，比方一张gif图片还应将其转为二进制并验证其每帧颜色值<无符号8位>和宽高值<          无符号16位>）
          WSDL文档应当要求用户注册后才能获取
       
       
       
       
       
       
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
  • 相关阅读:
    冒泡排序
    linux常用命令
    Github上将公共仓库转为私有仓库or私有仓库转为共有仓库
    使用apt更新和升级系统软件
    Django用户认证模块中继承AbstractUser与AbstractBaseUser重写User表的区别
    详解django中的collectstatic命令以及STATIC_URL、STATIC_ROOT配置
    python入门指南
    python包装不上？国内网络问题，使用豆瓣源解决
    nginx入门
    Vue 实现页面刷新（provide 和 inject）
  • 原文地址：https://www.cnblogs.com/daydayupyxq/p/5407850.html
Copyright © 2020-2023  润新知