python学习笔记1_171226_web

HTML

---

    1、一套规则，浏览器认识的规则。
    2、开发者：
        学习Html规则
        开发后台程序：
            - 写Html文件（充当模板的作用） ******
            - 数据库获取数据，然后替换到html文件的指定位置（Web框架）

    3、本地测试
         - 找到文件路径，直接浏览器打开
         - pycharm打开测试
    4、编写Html文件
        
        - doctype对应关系
        - html标签，标签内部可以写属性 ====> 只能有一个
        - 注释：  <!--  注释的内容  -->
    5、标签分类
        - 自闭合标签
            <meta charset="UTF-8">
        - 主动闭合标签
            title>老男孩</title>
    6、
        head标签中
            - <meta  -> 编码，跳转，刷新，关键字，描述，IE兼容
                    <meta http-equiv="X-UA-Compatible" content="IE=IE9;IE=IE8;" />
            - title标签
            - <link /> 搞图标，欠
            - <style />欠
            - <script> 欠
    7、body标签
         - 图标，  &nbsp;  &gt;   &lt;
         - p标签，段落
         - br，换行
         ======== 小总结  =====
            所有标签分为：
                块级标签： div（白板），H系列（加大加粗），p标签（段落和段落之间有间距）
                行内标签： span（白板）
            标签之间可以嵌套
            标签存在的意义，css操作，js操作
            ps:chorme审查元素的使用
                - 定位
                - 查看样式
        - h系列
        - div
        - span
        - input系列 + form标签
            input type='text'     - name属性，value="赵凡" 
            input type='password' - name属性，value="赵凡" 
            input type='submit'   - value='提交' 提交按钮，表单
            input type='button'   - value='登录' 按钮
            
            input type='radio'    - 单选框 value，checked="checked"，name属性（name相同则互斥）
            input type='checkbox' - 复选框 value, checked="checked"，name属性（批量获取数据）
            input type='file'     - 依赖form表单的一个属性 enctype="multipart/form-data"
            input type='rest'     - 重置
    
            <textarea >默认值</textarea>  - name属性
            select标签            - name,内部option value, 提交到后台，size，multiple
        
        - a标签
            - 跳转
            - 锚     href='#某个标签的ID'    标签的ID不允许重复
            
        - img 
             src
             alt
             title
             
        - 列表
            ul
                li
            ol
                li
            dl
                dt
                dd
        - 表格
            table
                thead
                    tr
                        th
                tbody
                    tr
                        td
            colspan = ''
            rowspan = ''
        - label
            用于点击文件，使得关联的标签获取光标
            <label for="username">用户名：</label>
            <input id="username" type="text" name="user" />
        - fieldset
            legend
        
    - 20个标签
CSS

---

    
    在标签上设置style属性：
        background-color: #2459a2;
        height: 48px;
        ...
    
    编写css样式：
        1. 标签的style属性
        2. 写在head里面 style标签中写样式
            - id选择区
                  #i1{
                    background-color: #2459a2;
                    height: 48px;
                  }
                  
            - class选择器 ******
                
                  .名称{
                    ...
                  }
                  
                  <标签 class='名称'> </标签>
            
            - 标签选择器
                    div{
                        ...
                    }
                    
                    
                    所有div设置上此样式
            
            - 层级选择器（空格） ******
                   .c1 .c2 div{
                        
                   }
            - 组合选择器（逗号） ******
                    #c1,.c2,div{
                        
                   }
            
            - 属性选择器 ******
                   对选择到的标签再通过属性再进行一次筛选
                   .c1[n='alex']{ width:100px; height:200px; }
                   
            PS:
                - 优先级，标签上style优先，编写顺序，就近原则
            
        2.5 css样式也可以写在单独文件中
            <link rel="stylesheet" href="commons.css" />
            
        3、注释
            /*   */
    
        4、边框
             - 宽度，样式，颜色  (border: 4px dotted red;)
             - border-left
        
        5、  
            height，         高度 百分比
            width，          宽度 像素，百分比
            text-align:ceter, 水平方向居中
            line-height，垂直方向根据标签高度
            color、     字体颜色
            font-size、 字体大小
            font-weight 字体加粗
        
        6、float
            让标签浪起来，块级标签也可以堆叠
            老子管不住：
                <div style="clear: both;"></div>
            
        7、display
            display: none; -- 让标签消失
            display: inline;
            display: block;
            display: inline-block;
                     具有inline,默认自己有多少占多少
                     具有block，可以设置无法设置高度，宽度，padding  margin
            ******
            行内标签：无法设置高度，宽度，padding  margin
            块级标签：设置高度，宽度，padding  margin
            
            
        8、padding  margin(0,auto)
上节作业问题：

---

    1、css重用
        
        <style>
            如果整个页面的宽度 > 900px时：
            {
                .c{
                   共有 
                }
                .c1{
                    独有
                }
            }
            
            .c2{
                独有
            }
        </style>
        
        <div class='c c1'></div>
        <div class='c c2'></div>
    2、自适应 和 改变大小变形
        左右滚动条的出现
        宽度，百分比
        
        页面最外层：像素的宽度 => 最外层设置绝对宽度
        
        
        自适应：media
        
    3、默认img标签，有一个1px的边框
        img{
            border: 0;
        }
    
    4、作业中的数量输入框
    
上节内容回顾

---

    1、块级和行内
    2、form标签
            <form action='http://sssss' methed='GET' enctype='multi'>
                <div>asdfasdf</div>
                <input type='text' name='q' />
                <input type='text' name='b' />
                # 上传文件
                <input type='file' name='f' />
                <input type='submit' />
            </form>
            GET: http://sssss?q=用户输入的值
                 http://sssss?q=用户输入的值&b=用户输入的内容
                 
            POST：
                请求头
                请求内容
    3、display: block;inline;inline-block
    4、float：
        <div>
            <div style='float:left;'>f</div>
            <div style='clear:both;'></div>
        </div>

    5、margin: 0 auto;
    6、padding, ---> 自身发生变化
    
    
CSS补充

---

    position:
        a. fiexd => 固定在页面的某个位置
        
        b. relative + absolute
        
            <div style='position:relative;'>
                <div style='position:absolute;top:0;left:0;'></div>
            </div>

    opcity: 0.5 透明度
    z-index: 层级顺序   
    overflow: hidden,auto
    hover
    
    background-image:url('image/4.gif'); # 默认，div大，图片重复访
    background-repeat: repeat-y;
    background-position-x:
    background-position-y:
    
    示例：输入框

JavaScript

    独立的语言，浏览器具有js解释器
    
    JavaScript代码存在形式：
        - Head中
                <script>
                    //javascript代码
                    alert(123);
                </script>
                
                <script type="text/javascript">
                    //javascript代码
                    alert(123);
                </script>
        - 文件
            <script src='js文件路径'> </script>
            
        PS: JS代码需要放置在 <body>标签内部的最下方
        
    注释
        当行注释 //
        多行注释  /*     */
        
    变量：
        
        python：
            name = 'alex'
        JavaScript:
            name = 'alex'     # 全局变量
            var name = 'eric' # 局部变量
        
    写Js代码：
        - html文件中编写
        - 临时，浏览器的终端 console
        
          
    基本数据类型
        数字
            a = 18;
        字符串
            a = "alex"
            a.chartAt(索引位置)
            a.substring(起始位置，结束位置)
            a.lenght    获取当前字符串长度
            ...
        列表(数组)
            a = [11,22,33]
            
        字典
            a = {'k1':'v1','k2':'v2'}
        布尔类型
            小写
      
    for循环
        1. 循环时，循环的元素是索引
        
            a = [11,22,33,44]
            for(var item in a){
                console.log(item);
            }
            
            a = {'k1':'v1','k2':'v2'}
            for(var item in a){
                console.log(item);
            }
            
        2. 
            for(var i=0;i<10;i=i+1){
                
            }
            
            a = [11,22,33,44]
            for(var i=0;i<a.length;i=i+1){
                
            }
            
            不支持字典的循环
    
      
    条件语句
        if(条件){
        
        }else if(条件){
            
        }else if(条件){
            
        }else{
            
        }
        
        ==   值相等
        ===  值和类型都相等
        &&   and
        ||   or
        
    
    函数：
    
        
        function 函数名(a,b,c){
        
        }
        
        函数名(1,2,3)
    　　setInter("func()",5000);
　　　　==>setInterval(function(){console.log(123)},5000);匿名
　　　　自执行函数：避免函数名重复，
　　　　function func(){
　　　　　　function f1(){}
　　　　　　function f2(){}
　　　　　　function f3(){}
　　　　}
　　　　func()       
>>>(function(arg)){console.log(arg)}(1);自动执行，没有名字
js序列化及转义
li=[1,2,3,4,5]
s=JSON.stringify(li)
newli=JSON.parse(s)
encodeURI()
encodeURIComponent()全转义
decodeURI()
decodeURIComponent()
escape()字符串转义
unescape()
　　客户端cookie验证，保存，数据转义后字符到硬盘(js的话)
抽屉找cookie

var d=new date()--->d.xxx方法很多getxxx setxxx
时间
作用域：
其它语言：以代码块作为作用域
public void Func（）｛以｛｝作为作用域
if（1==1）｛
string name=‘java’；｝
console.writeline(name);
｝
Func() 报错，name
python:以函数作为作用域
1：
　　def func（）：
　　　　if 1==1：
　　　　　　name=‘alex’
　　　　print（name）
　　func（）
ok
2：

　　def func（）：
　　　　if 1==1：
　　　　　　name=‘alex’
　　　　
　　func（）
　　print（name）
wrong
javascript:

Dom

---

    1、找到标签
        获取单个元素        document.getElementById('i1')
        获取多个元素（列表）document.getElementsByTagName('div')
        获取多个元素（列表）document.getElementsByClassName('c1')
        a. 直接找
            document.getElementById             根据ID获取一个标签
            document.getElementsByName          根据name属性获取标签集合
            document.getElementsByClassName     根据class属性获取标签集合
            document.getElementsByTagName       根据标签名获取标签集合
        
        b. 间接
            tag = document.getElementById('i1')
            
            parentElement           // 父节点标签元素
            children                // 所有子标签
            firstElementChild       // 第一个子标签元素
            lastElementChild        // 最后一个子标签元素
            nextElementtSibling     // 下一个兄弟标签元素
            previousElementSibling  // 上一个兄弟标签元素
            
    2、操作标签
        
        a. innerText
            
            获取标签中的文本内容
            标签.innerText
            
            对标签内部文本进行重新复制
            
            标签.innerText = ""
            
        b. className
            tag.className =》 直接整体做操作
            tag.classList.add('样式名')   添加指定样式
            tag.classList.remove('样式名')   删除指定样式
    
            PS：
            
                <div onclick='func();'>点我</div>
                <script>
                    function func(){
                    
                    }
                
                </script>
    
        c. checkbox  
                获取值
                checkbox对象.checked
                设置值
                checkbox对象.checked = true
    
    
    
作业：

---

    1、登录、注册，练习：position
    2、后台管理页面
        - 左侧菜单
        - 右边表格，全选反向，模态框，返回顶部
    3、商城页面

CSS补充：

---

    - position
    - background
    - hover
    - overflow
    - z-index
    - opacity
    
    示例：输入框右边放置图标
    
JavaScript：

---

    局部变量 var
    基本数据类型：
        数字
        字符串
        数组
        字典
        布尔值
    For循环
        
    条件语句
        ==
        !=
        ===
        !==
        
        ||
        
        &&
        
    函数的定义：
        function func(){
            ...
        }
Dom

---

    找标签
        - 直接找 $('#id')  $('.c1').siblings()
        - 简介找
    操作：
        
        innerText
        
        checkbox: 
            checked    
        
        className
        classList
        
    事件：
        <div onclick='函数(123)'></div>
        
        <script>
            。。。。
        </script>
        
    定时器
        setInterval('函数()', 4000)
    
    其他：
        
        alert()
        console.log()
    
实例：
    莅临指导
    多选
    模态对话框
    左侧菜单
    返回顶部