每日思考(2019/12/21)

题目概览

  • 为什么HTML5只需要写<!DOCTYPE HTML>就可以
  • position:fixed;在ios下无效该怎么办?
  • 什么是闭包?用途是什么?
  • 你最喜欢用哪些编辑器?喜欢它的理由是什么?

题目解答

为什么HTML5只需要写<!DOCTYPE HTML>就可以?

  • SGML 是通用标记语言的集合。其中有 HTML、XML,因此需要用 DTD 来指定使用那种规范
  • 因为 HTML5 与 HTML4 基于的基准不同。HTML4 基于 SGML,因此需要除了 DOCTYPE 外还需要引入 DTD 来告诉浏览器用什么标准进行渲染。DTD 还分为标准模式、严格模式。如果什么都不写,就完全让浏览器自我发挥,会变成怪异模式。
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
    "http://www.w3.org/TR/html4/frameset.dtd">
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
    http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  • HTML5 不基于 SGML,因此后面就不要跟 DTD,但是需要 DOCTYPE 来规范浏览器的渲染行为。
    <!DOCTYPE html>
    <html>
    <head>
    <title>文档的标题</title>
    </head>
    <body>
    文档的内容......
    </body>
    </html>

position:fixed;在ios下无效该怎么办?

  • iOS下的 Fixed + Input BUG现象:fixed 元素在软键盘唤起后,页面的 fixed 元素将失效(即无法浮动,也可以理解为变成了 absolute 定位),所以当页面超过一屏且滚动时,失效的 fixed 元素就会跟随滚动了

    <body class="layout-fixed">
        <!-- fixed定位的头部 -->
        <header>
        </header>
        <!-- 可以滚动的区域 -->
        <main>
            <!-- 内容在这里... -->
        </main>
        <!-- fixed定位的底部 -->
        <footer>
            <input type="text" placeholder="Footer..."/>
            <button class="submit">提交</button>
        </footer>
    </body>
    header, footer, main {
        display: block;
    }
    header {
        position: fixed;
        height: 50px;
        left: 0;
        right: 0;
        top: 0;
    }
    footer {
        position: fixed;
        height: 34px;
        left: 0;
        right: 0;
        bottom: 0;
    }
    main {
        margin-top: 50px;
        margin-bottom: 34px;
        height: 2000px
    }
  • 使 fixed 元素的父级不出现滚动,而将原 body 滚动的区域域移到 main 内部,而 header 和 footer 的样式不变
    header, footer, main {
        display: block;
    }
    
    header {
        position: fixed;
        height: 50px;
        left: 0;
        right: 0;
        top: 0;
    }
    
    footer {
        position: fixed;
        height: 34px;
        left: 0;
        right: 0;
        bottom: 0;
    }
    main {
        /* main绝对定位,进行内部滚动 */
        position: absolute;
        top: 50px;
        bottom: 34px;
        /* 使之可以滚动 */
        overflow-y: scroll;
        /* 增加该属性,可以增加弹性 */
        -webkit-overflow-scrolling: touch;
    }
    
    main .content {
        height: 2000px;
    }
  • 在 Android2.3+ 中,因为不支持 overflow-scrolling ,因此部分浏览器内滚动会有不流畅的卡顿。但是目前发现在 body 上的滚动还是很流畅的,因此使用第一种在 iOS 出现问题的 fixed 定位的布局就可以了。如果需要考虑 Android2.3 以下系统,因为不支持 fixed 元素,所以依然要需要考虑使用 isScroll.js 来实现内部滚动。基本思路就是: 由于 fixed 在软键盘唤起后会失效,导致在页面可以滚动时,会跟随页面一起滚动。因此如果页面无法滚动,那么 fixed 元素即使失效,也不会滚动
  • 其他的一些细节处理
    • 有时候输入框 focus 以后,会出现软键盘遮挡输入框的情况,这时候可以尝试 input 元素的 scrollIntoView 进行修复。
    • 有些第三方浏览器底部的工具栏是浮在页面之上的,因此底部 fixed 定位会被工具栏遮挡。解决办法适配不同的浏览器,调整 fixed 元素距离底部的距离。
    • 最好将 header 和 footer 元素的 touchmove 事件禁止,以防止滚动在上面触发了部分浏览器全屏模式切换,而导致顶部地址栏和底部工具栏遮挡住 header 和 footer 元素。

什么是闭包?用途是什么?

  • 变量作用域:要理解闭包,首先要理解javascript的特殊的变量作用域。变量的作用域无非就两种:全局变量和局部变量。javascript语言的特别之处就在于:函数内部可以直接读取全局变量,但是在函数外部无法读取函数内部的局部变量。在函数内部声明变量的时候,一定要使用var命令。如果不用的话,你实际上声明的是一个全局变量
  • 从外部读取函数内部的局部变量:出于种种原因,有时候需要获取到函数内部的局部变量。那就是在函数内部,再定义一个函数。这就是Javascript语言特有的"链式作用域"结构(chain scope),子对象会一级一级地向上寻找所有父对象的变量。所以,父对象的所有变量,对子对象都是可见的,反之则不成立。
    function f1(){
       var n=999;
       function f2(){
          alert(n); // 999
       }
    }
    //函数f2就被包括在函数f1内部,这时f1内部的所有局部变量,对f2都是可见的。但是反过来就不行,f2内部的局部变量,对f1就是不可见的
  • 闭包的概念:上面代码中的f2函数,就是闭包。 闭包就是能够读取其他函数内部变量的函数。由于在javascript中,只有函数内部的子函数才能读取局部变量,所以说,闭包可以简单理解成“定义在一个函数内部的函数。所以,在本质上,闭包是将函数内部和函数外部连接起来的桥梁。
  • 闭包的用途:闭包可以用在许多地方。它的最大用处有两个,一个是前面提到的可以读取函数内部的变量,另一个就是让这些变量的值始终保持在内存中,不会在f1调用后被自动清除,原因就在于f1是f2的父函数,而f2被赋给了一个全局变量,这导致f2始终在内存中,而f2的存在依赖于f1,因此f1也始终在内存中,不会在调用结束后,被垃圾回收机制(garbage collection)回收。
  • 使用闭包的注意点:
    • 由于闭包会使得函数中的变量都被保存在内存中,内存消耗很大,所以不能滥用闭包,否则会造成网页的性能问题,在IE中可能导致内存泄露。解决方法是,在退出函数之前,将不使用的局部变量全部删除。
    • 闭包会在父函数外部,改变父函数内部变量的值。所以,如果你把父函数当作对象(object)使用,把闭包当作它的公用方法(Public Method),把内部变量当作它的私有属性(private value),这时一定要小心,不要随便改变父函数内部变量的值

你最喜欢用哪些编辑器?喜欢它的理由是什么?

  • notepad++:日常用语查看代码
  • vscode:开发项目前端使用,插件丰富,集git调试与一身
  • eclipce:开发项目后端使用,Java后台用

原文地址:https://www.cnblogs.com/EricZLin/p/12078739.html

时间: 2024-11-04 06:17:04

每日思考(2019/12/21)的相关文章

【我的书】Unity Shader的书 — 文件夹(2015.12.21更新)

写在前面 感谢全部点进来看的朋友.没错.我眼下打算写一本关于Unity Shader的书. 出书的目的有以下几个: 总结我接触Unity Shader以来的历程,给其它人一个借鉴.我非常明确学Shader的艰难,在群里也见了非常多人提出的问题. 我认为学习Shader还是一件有规律可循的事情,但问题是中文资料难觅,而大家又不愿意去看英文...这对我有什么优点呢?强迫我对知识进行梳理,对细节问题把握更清楚. 第二个原因你懂的. 关于本书的定位问题: 面向Unity Shader刚開始学习的人,但要

12.21 php-fpm的pool,

12.21 php-fpm的pool 1. 添加pool: [[email protected] ~]# vim /usr/local/php-fpm/etc/php-fpm.conf 添加第二个pool: [hao1.com] listen = /tmp/hao1.sock listen.mode = 666 user = php-fpm group = php-fpm pm = dynamic pm.max_children = 50 pm.start_servers = 20 pm.min

12.21 php-fpm的pool;12.22 php-fpm慢执行日志;12.23 ;12.24

12.21 php-fpm的pool 1.添加pool: [[email protected] ~]# vim /usr/local/php-fpm/etc/php-fpm.conf 添加第二个pool: [hao1.com] listen = /tmp/hao1.sock listen.mode = 666 user = php-fpm group = php-fpm pm = dynamic pm.max_children = 50 pm.start_servers = 20 pm.min_

12.21 php-fpm的pool 12.22 php-fpm慢执行日志 12.23 open_b

12.21 php-fpm的pool [[email protected] etc]# vim php-fpm.conf [[email protected] etc]# mkdir php-fpm.d [[email protected] etc]# cd php-fpm.d [[email protected] php-fpm.d]# vim www.conf [[email protected] php-fpm.d]# vim martin.conf [martin] listen = /

12.21 php-fpm的pool 12.22 php-fpm慢执行日志 12.23 open_basedir 12.24 php-fpm进程管理

12.21 php-fpm的pool php-fpm有一个概念叫pool,就是使用psaux看到的右侧的那一列,也就是它的池子, 如下图,我们在这里只定义了一个pool 其实他是支持定义多个池子的,每一个池子我们可以监听不同的sock,或者不同的tcpip,这样的话如果我们的nginx有好几个站点每个站点都可以使用不同pool,这样做的好处就是其中一个php502了,其他站点不收影响,(502很有可能是php资源不够了)如果你所有的网站都使用了同一个池子的话,其中一个网站发生了故障,比如程序员写

2019.12.5-特征布局,新闻列表 代码

<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <title>特征布局</title></head><style type="text/css"> .news_list_com{ width: 600px; height: 290px; border:1px solid #ddd

2019.12.09-新闻列表布局代码

<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <title>特征布局</title></head><style type="text/css"> .news_list_com{ width: 600px; height: 290px; border:1px solid #ddd

解题报告-2019.12.16

解题报告-2019.12 题目:6-3[拓展编程题_课后练习3][P215 习题8-三-4] 报数 (20分) 题目详情: 报数游戏是这样的:有n个人围成一圈,按顺序从1到n编好号.从第一个人开始报数,报到m(<n)的人退出圈子:下一个人从1开始报数,报到m的人退出圈子.如此下去,直到留下最后一个人. 本题要求编写函数,给出每个人的退出顺序编号. 函数接口定义:void CountOff( int n, int m, int out[] ); 其中n是初始人数:m是游戏规定的退出位次(保证为小于

每日思考(2019/12/9)

题目概览 页面导入样式时,使用link和@import有什么区别? 圣杯布局和双飞翼布局的理解和区别,并用代码实现 用递归算法实现,数组长度为5且元素的随机数在2-32间不重复的值 题目解答 页面导入样式时,使用link和@import有什么区别? link是XHTML标签,除了加载CSS外,还可以定义RSS等其他事务:@import属于CSS范畴,只能加载CSS link引用CSS时,在页面载入时同时加载:@import需要页面网页完全载入以后加载.所以会出现一开始没有css样式,闪烁一下出现