Python 学习第十六天 html 前端内容总结

一，css知识总结

1, css属性

css的属性包括以下内容

position:规定元素的定位类型

background:属性在一个声明中设置所有的背景属性

　　　可以设置的如下属性：

　　　（1）background-color

（2）background-position

（3）background-size

（4）background-image

　 text-align:规定元素中的文本的水平对齐方式

margin:在一个声明中设置所有的外边距属性

　 padding:在一个声明中设置所有的内边距属性

font-size:可以设置字体的尺寸

z-index:设置元素的堆叠顺序，拥有更高堆叠顺序的元素总是会处于堆叠顺序较低元素的前面

over-flow:规定是否对内容的上下边缘进行裁剪-如果溢出元素内容区域的话

:hover:用于选择鼠标指针浮动在上面的元素

opacity:设置元素的不透明级别

float(clear:both):设置元素在哪个方向浮动

line-height:设置行间的距离

border:设置边框

color:设置字体颜色

display:规定元素应该生成的框的类型

2,页面布局

（1）position的值 fiexd 永远固定在窗口某个位置 relative 单独设置没有效果，absolute单独设置会根据滑轮的位置变动而变动

　（2）两种页面布局CSS代码

第一种，左侧菜单跟随滚动条

.pd-content .menu{
position:absolute;

top:48px;

left:0;

bottom:0;

width:200px

baclground-color:#dddddd;
}
.pd-content .content{
 position:absolute;
 top:48px；
 right:0;
 bottom:0;
 left:200px；
 background-color:purple;
}

第二种，左侧以及上面不动,相比第一种只需要在content 属性中添加overflow:auto属性

.pd-content .menu{

position:absolute;

top:48px;

left:0;

bottom:0;

width:200px

baclground-color:#dddddd;

}

.pd-content .content{

 position:absolute;

 top:48px；

 right:0;

 bottom:0;

 left:200px；

 background-color:purple;

 overflow:auto;

}

3，用户登录栏设置

（1）户头像为圆形

border-radius:50%

（2）div 鼠标从上移入或从下移入，下面的div都变色

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .item{

            background-color: #dddddd;

        }

        .item:hover{

            color:red;

        }

        .item:hover .b{

            background-color: green;

        }

    </style>

</head>

<body>

    <div class="item">

        <div class="a">123</div>

        <div class="b">456</div>

    </div>

</body>

</html>

（3）设置小图标

下载font-awesome-4.7.0,在css 部位写上<link rel="stylensheet" href="font-awesome-4.7.0/css/font-awesome.min.css"/>添加压缩版的css内容

二，Javascript 知识回顾

1，Javascript存在形式

（1）可以通过src 引入其它目录中的javascript文件，src需要放在body内容的最下面

（2）在head 中写script代码

2，全局变量和局部变量区别在于：变量前面是否有var, 有var标注的变量为局部变量

3，数据类型：（1）数字（2）字符串（3）数组（4）对象（例如字典类型）

4，循环，两种新式

（1） for (var item in [11,22,33]）{ console.log(item（输出索引）}

（2） var arra = [11,22,32,33] for (var i=0;i<arra.lenght;i=i+1){}

5，条件语句

（1）if （）{}else if（）{}else{}

其中if判断中的==为值相等 ===为值和类型都相等

（2）switch(name){

case '1':

　　　　　　　　age=123;

break;

case '2'

age=456;

break;

default:

　　　　　　　　age = 777;

}

6，函数 function func(arg) {

return arg+1

}

var result = func(1)

console.log(result);

7，javascript函数详解

　　　　（1）普通函数 function func(arg){ return arg+1 }

　　　　（2）匿名函数setInterval(function（）{console.log(123);},5000）

（3）自执行函数{function(arg){console.log(arg);}}(1)

8，序列化　　

li=[11,22,33,4,5]

s=JSON.stringify(li)   #将列表转化成字符串

newLi=JSON.parse(s) #将字符串转化成列表

　 9，转义中文

url = "https://www.sougou.com/web?query=理解”

encodeURI(url)           #转义url中的英文

newurl=encodeURI(url)

decodeURI(newurl)       #还原url

escape()                       #对字符串转义

unescape()                    #给转义字符串解码

10，eval

val = eval(表达式)

         exec(执行代码)

value=eval("1+1")

11，时间

var d = new Date()   #获取当前时间

n = d.getMinutes() +4

d.setMinutest(n)       #设置时间

12，作用域

其他语言

public void Func () {

          if (1==1){

               string name="Java";

               console.writeline(name);             #可以正常返回

         }

         console.writeline(name);                    #报错

          Func（）

在其他语言中已代码块为作用域，Python中已函数作为作用域，

1，javascript以函数作为作用域

function Func () {

          if (1==1){

               string name="Java";

         }

         console.writeline(name);

          Func（）                                 #可以正常返回

2，函数的作用域在函数未被调用之前，已被创建

3，函数的作用域存在作用域连，并且也是在被调用之前创建

xo= "alex"

function func(){

        //var xo=‘eric’

        function inner(){

              // var xo='tony'

              console.log(xo);

        }

        inner()

     }

func()

没有tony 返回eric ,没有eric返回alex

xo= "alex"

function func(){

       var xo=‘eric’

        function inner(){

              var xo='tony'

              console.log(xo);

        }

        return inner;

     }

var ret = func()   #返回inner 函数对象

ret() #执行inner函数  最终返回eric

xo= "alex"

function func(){

        var xo=‘eric’

        function inner(){

              var xo='tony'

              console.log(xo);

        }

        var xo = 'tony';

        return inner;

     }

var ret = func()   #返回inner 函数对象

ret() #执行inner函数  最终返回tony

4，函数内局部变量 提前声明

function func() {

   console.log(xxoo);

    var xxoo = 'alex'       #提前只声明var xxoo 并未赋值

}

func();

// undefined

14，JavaScript面向对象

function foo(){

     this.name = 'alex';     #this相当于self

}

var object= new foo();  #创建一个object 对象 

function Foo(n){

     this.name = n     #this相当于self

}

var object= new foo('we');  #创建一个object 对象 

和函数不同

1，this代指对象（Python self）

2，创建对象时，new函数（）

原型

function Foo(n){

    this.name = n;                 #只创建一次 原型也只创建一次

}

Foo.prototype = {                 #原型类似于字典

   'sayName': function(){

       console.log(this.name)

   }

}

obj1 = new Foo('we')           #通过obj1 先找到类，然后再找到原型执行

obj2 = new Foo('wee')

三，DOM

1，查找

（1）直接查找

（2）间接查找

2，（1）innerText 提取文本内容 innerHTML 提取html内容两者都可以直接赋值

obj.innerText=“<a href=‘http://www.oldboyedu.com’>老男孩</a>”

obj.innerHTML="<a href='http://www.oldboyedu.com'>老男孩</a>"

（2）value 对input标签生效，获取当前标签内的值

对select 标签生效，获取选中的value值（selectIndex）

对textarea标签生效，获取其中的值

（3）搜索框代码实现　　

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <div style="width:600px;margin:0 auto;">

        <input id="i1" onfocus="Focus();" onblur="Blur();" type="text" value="请输入关键字"/>

        <input type="text" placcholder="请输入关键字" /> #可以不用写javascript

    </div>

    <script>

        function Focus() {

            var tag = document.getElementById('i1');

            var val = tag.value;

            if (val == "请输入关键字") {

                tag.value = '';

            }

        }

            function Blur(){

            var tag = document.getElementById('i1');

            var val = tag.value;

            if (val.length == 0 ){

                tag.value = '请输入关键字';

            }

        }

    </script>

</body>

</html>

3，DOM 样式操作

obj = document.getElementById('i1')

obj.className="c1 c2";                             #为元素添加class C1,C2属性

obj.classList                                      #以列表形式列出obj的class值

obj.classList.add("c3")                            #添加c3属性

obj.classList.remove("c2")                         #移除c2属性
obj.style.xx="xx"                                  #font-size写为fontSize

4，DOM属性操作

obj = document.getElementById('i1')

obj.setAttribute('xxxx','alex')                         #为标签添加属性

obj.removeAttribute('value')                           #为标签删除属性

obj.attributes                                                #获取所有属性

5，创建标签，并添加的html中（1）字符串方式（2）对象方式

6，插入标签

document.setElementById('i1').insertAdjacentHTML("beforeEnd",tag)

其它位置参数beforeBegin,afterBegin,beforeEnd,afterEnd

7，提交表单，任何标签都可以

document.getElementById('f1').submit()

8，location.href 获取当前URL 设置当前URL做跳转 locaton.reload() 页面刷新

　9，设置定时器 setInterval(function(){ },500)

clearIneterval()删除定时器

setTimeout() 定时器只执行一次，用法和setInterval一样，等到某个时间执行一次

　　 clearTimeout() 清除定时器

10，事件

onclick,onblur,onfocus,onmouseover,onmouseout