zoukankan      html  css  js  c++  java
  • html/css/js 学习笔记

    display属性 :
    block : CSS1 块对象的默认值。将对象强制作为块对象呈递,为对象之后添加新行   可以定义高度和宽度
    none : CSS1 隐藏对象。与 visibility 属性的hidden值不同,其不为被隐藏的对象保留其物理空间
    inline : CSS1 内联对象的默认值。将对象强制作为内联对象呈递,从对象中删除行

    overflow

    参数是scroll时候,必会出现滚动条。
    参数是auto时候,子元素内容大于父元素时出现滚动条。

    <a href="/XXXX"  target="_blank" >打开新的网页</a>

    _self     默认。在相同的框架中打开被链接文档。

    Flash提供了ExternalInterface接口与JavaScript通信
    两个方法:call和addCallback
    作用:call让Flash调用js里的方法,addCallback是用来注册flash函数让js调用。
     
     
    alt属性则是用来指定替换文字,只能用在img、area和input元素中(包括applet元素),用于网页中图片无法正常显示时给用户提供文字说明使其了解图像信息。
     
     
    js 两种写法
    document.getElementById("input").style.backgroundColor = "red";      
    inputElement.style.backgroundColor = "#FF0000";

    <audio> 标签定义声音,比如音乐或其他音频流。 
    <canvas> 标签定义图形,比如图表和其他图像。
    <menu> 标签定义命令的列表或菜单。
    <command> 标签可以定义命令按钮,比如单选按钮、复选框或按钮。

    在html中网页可以看成一个立体的空间,一个完整的页面是由很多个页面堆积形成的,如下图所示
     
    CSS中Position属性有四个可选值,它们分别是:static、absolute、fixed、relative。
     
    ◆position:static 无定位
    该属性值是所有元素定位的默认情况,在一般情况下,我们不需要特别的去声明它,但有时候遇到继承的情况,我们不愿意见到元素所继承的属性影响本身,从而可以用position:static取消继承,即还原元素定位的默认值。
     
    ◆position:absolute 绝对定位
    使用position:absolute,能够很准确的将元素移动到你想要的位置,
     
    ◆position:fixed 相对于窗口的固定定位
    这个定位属性值是什么意思呢?元素的定位方式同absolute类似,但它的包含块是视区本身。在屏幕媒体如WEB浏览器中,元素在文档滚动时不会在浏览器视察中移动。例如,它允许框架样式布局。在页式媒体如打印输出中,一个固定元素会出现于第一页的相同位置。这一点可用于生成流动标题或脚注。我们也见过相似的效果,但大都数效果不是通过CSS来实现了,而是应用了JS脚本。
    请特别注意,IE6不支持CSS中的position:fixed属性。真的非常遗憾,要不然我们就可以试试这种酷酷的效果了。
     
    ◆position:relative 相对定位
    所谓相对定位到底是什么意思呢,是基于哪里的相对呢?我们需要明确一个概念,相对定位是相对于元素默认的位置的定位。既然是相对的,我们就需要设置不同的值来声明定位在哪里,top、bottom、left、right四个数值配合,来明确元素的位置。
     
     
     
    只要 协议 、 域名 、 端口 有任何一个 不同, 都被当作是 不同 的域。
    就需要jsonp
     
     
    下面这个JS程序的输出是:
    0 1 0
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    function Foo() {
        var i = 0;
        return function() {
            console.log(i++);
        }
    }
     
    var f1 = Foo(),
        f2 = Foo();
    f1();
    f1();
    f2();
    (1)Function是引用类型:保存在堆中,变量f1,f2是保存在栈中;
    (2)闭包:一个函数(产生新的作用域)定义的局部变量、子函数的作用域在函数内,但是一旦离开了这个函数,局部变量就无法访问,所有通过返回子函数到一个变量f1的方法,让
             f1指向堆中的函数作用域,这样可以使用局部变量i.
     
      第一次f1() : i++ 所以 0
      第二次f1() : 执行的是子函数 Function(){  ..},输出的是父函数 的 i=1,再自加 i =2;
      第一次f2() : 同第一次f1(),不同的是 f2指向堆中一个新的对象 function(){ ...},所有此i非彼i,输出i=0;
     
     
     
     
    这段代码的运行结果: 
    2 1
    1
    2
    3
    4
    5
    6
    7
    8
    9
    <SCRIPT LANGUAGE="JavaScript">
    var bb = 1;
    function aa(bb) {
        bb = 2;
        alert(bb);
    };
    aa(bb);
    alert(bb);
    </SCRIPT>
    函数体内,bb并没有使用var来定义,按理说这个bb在预处理的时候应该是window的属性, 但在这里,函数声明的时候,带了一个参数bb,也就是相当于在函数体内声明了var bb。
    所以,函数里的bb就是函数活动对象的属性。所以函数执行时会输出2。函数执行完后,函数的活动对象被销毁,也就是局部的这个bb被删除了,执行流进入到window,再输出bb,值就是1了。
    如果声明函数时,把参数那里的bb去掉,这段代码执行起来,结果就是弹出 2 2





    一个有效的javascript变量定义规则
    _$te$t2
    第一个字符必须是一个字母、下划线(_)或一个美元符号($);其他字符可以是字母、下划线、美元符号或数字。
     
     
     
     
    有关javascript系统方法的描述
    parseFloat方法:该方法将一个字符串转换成对应的小数
    isNaN方法:该方法用于检测参数是否不是数值型,如果不是数值,返回true
    escape方法: 该方法返回对一个字符串编码后的结果字符串
    eval方法:该方法将某个参数字符串作为一个JavaScript执行




    javascript常见事件的触发
    onBlur:当失去输入焦点后产生该事件

    onFocus:当输入获得焦点后,产生该文件

    onchange:当文字值改变时,产生该事件

    onselect:当文字加亮后,产生该事件

    onClick:当组件被点击时产生的事件

    HTML的Doctype和严格模式与混杂模式的描述

    1.<!DOCTYPE> 声明位于文档中的最前面,处于 <html> 标签之前。告知浏览器的解析器,用什么文档类型 规范来解析这个文档。
    2.严格模式的排版和 JS 运作模式是 以该浏览器支持的最高标准运行。在混杂模式中,页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。
    3.DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。

    JavaScript中 call和apply的描述

    二者只有参数传递方式不同

    call第一个参数为this, 其它参数依次排在后面

    apply只有两个参数,第二个参数是一个数组function add(c, d){ 

    return this.a + this.b + c + d; 

    var o = {a:1, b:3}; 
    add.call(o, 5, 7); // 1 + 3 + 5 + 7 = 16 
    add.apply(o, [10, 20]); // 1 + 3 + 10 + 20 = 34 







    border:none以及border:0的区别
    1.效果
    border-style:none;//无边框         
    border-0;//边框宽度为0px  
    2.区别
    (1)性能差异
    border:0;浏览器对border-width、border-color进行渲染,占用内存。
    border:none;浏览器不进行渲染,不占用内存。
    Chrome:
    border:none;>> border:initial none initial;
    border:0;>> border:0 initial  initial ;




    1 CSS Sprites在国内很多人叫css精灵,是一种网页图片应用处理方式。
    2 它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。
    3 利用CSS的“background-image”,“background- repeat”,“background-position”的组合进行背景定位,background-position可以用数字精确的定位出背景图片的位置。
    4 利用CSS Sprites能很好地减少网页的http请求,从而大大的提高页面的性能,这也是CSS Sprites最大的优点,也是其被广泛传播和应用的主要原因;
    5 CSS Sprites能减少图片的字节,曾经比较过多次3张图片合并成1张图片的字节总是小于这3张图片的字节总和。
    6 解决了网页设计师在图片命名上的困扰,只需对一张集合的图片上命名就可以了,不需要对每一个小元素进行命名,从而提高了网页的制作效率。
    7 更换风格方便,只需要在一张或少张图片上修改图片的颜色或样式,整个网页的风格就可以改变。维护起来更加方便。





    Wekbit是一个开源的Web浏览器引擎,也就是浏览器的内核。
    Apple的Safari, Google的Chrome,Apple手机的默认浏览器,Android手机的默认浏览器
    三大浏览器内核 Wekbit Gecko和Trident
    Firefox便是使用的Gecko内核 微软IE系列使用的是Trident内核





  • 相关阅读:
    从自然数到有理数
    付费版乐影音下载器使用方法
    Avtiviti之流程变量
    activity(工作流)初步学习记录
    IntelliJ IDEA安装Activiti插件并使用
    golang 性能测试
    Golang性能测试工具PProf应用详解
    java连接ZK的基本操作
    会员体系、积分、等级
    Flink基本概念
  • 原文地址:https://www.cnblogs.com/zedosu/p/6545009.html
Copyright © 2011-2022 走看看