首页 > 代码库 > Python 学习第十六天 html 前端内容总结

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="http://www.mamicode.com/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=http://www.mamicode.com/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.mamicode.com/‘http://www.oldboyedu.com’>老男孩”

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

        (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="http://www.mamicode.com/请输入关键字"/>
        <input type="text" placcholder="请输入关键字" /> #可以不用写javascript
    </div>
    <script>
        function Focus() {
            var tag = document.getElementById(‘i1‘);
            var val = tag.value;
            if (val == "请输入关键字") {
                tag.value = http://www.mamicode.com/‘‘;>

 

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