web基础2

Posted 2020-10-20 alen-z

html
    标签 属性
    <!-- aaa -->
    标签分类
        自闭合标签
            <meta charset="UTF-8"/>
            <link>
        主动闭合
            <title>$Title$</title>

    各种符号
        &nbsp;&gt;&lt;
        www.cnblogs.com/web-d/archive/2010/04/16/1713298.html

    20标签
        html
        head
        body
        p  段落，每个标签之间有空行
        br 换行，没有间距
        h1-h6 标题
        span  行内标签，白板，
        div   块级标签，白板， id, style=‘height:600px;‘
        input type=text/password/button/submit  value=登陆 name=‘xxx‘/‘query‘自闭合  行内标签
        from  action=‘url‘ method=‘GET/POST‘
        input type=‘radio‘ name=‘name一样互斥‘ value=‘xx‘  checked=‘checked‘
        input type=‘checkbox‘ name=‘name相同，key相同发送时在一起‘, value=‘xx‘, checked=‘checked‘
        input type=‘file‘ name=‘filename‘
        from enctype=‘multipart/form-data‘
        input type="reset" value=‘重置‘
        textarea name=‘xx‘ 非自闭合，默认值写中间
        select name=‘classify‘ size=10(默认为1) multiple=‘multiple‘
            option value=‘xxx‘ selected=‘selected‘ xxx /option
            optgroup label=‘xxxx‘

        a a标签，href=‘url‘ target=‘_blank 跳转  行内标签
            锚，href=‘#id3

            img src=‘path/*.jpg‘ style=‘height:200px;width:200px;‘ alt=‘xxx‘ title=‘girl‘

        ul 符号
            li xxx /li
            li xxx /li
        /ul

        ol 序号
            li xxx /li
            li xxx /li
        /ol


        dl 分层
            dt xxx /dt  标题
            dd xxx /dd  内容
        /dl
        table 表格 border = 1 边框
            thead/ 表头/
            tr 行
                th 列 /th
            tbody/  表内容/
            tr 行
                td 列 /td  colspan=‘2‘ rowspan=‘2‘

        label 用户名 /label for=‘username‘与input标签id=username关联
        fieldset
            legend 登陆 /legend
        /fieldset
CSS
    颜色 RGB
    位置

    style=‘backgroud-color:#2459a2;‘
    style=‘height:48px;‘
    style=‘width:48px;‘
    style=‘‘
    style=‘‘
    style=‘‘
    style=‘‘

    CSS样式  / CSS文件
        -id选择器
        -class选择器
        -div标签选择器
        -关联选择器/层级选择器
        -组合选择器
        -属性选择器
    link rel=‘stylesheet‘ href=‘commons.css‘
    注释
        /*  */
    边框
        border=‘1‘ solid:red dotted red
            border-top-color
            border-top-style
            border-top-width
            border-right-color/style/width
            border-bottom-color/style/width
            border-left-color/style/width
    背景色
        background-color
    float
        float:left
        div style=‘clear: both;‘
    display 行内标签转换， 行内标签无法设置 高度/宽度/边距margin
        display:inline/block
        display:inline-block
        display:none 标签消失
    padding margin(0,auto)  内边距 外边距
        body margin:0 auto
        margin-top:1px  外边到top的距离
        padding-top:1px  内部到top的距离
    text-align
        text-align:center 内容水平居中
        vertical-align:middle 上下居中

    height,width,line-height,color,font-size,font-weight
        line-height:48px 上下左右范围内水平居中，垂直方向
        font-weight: bold 加粗
        font-size：48px 字体大小
        color： 字体颜色

    自适应
        定义小于xx px , 使用其他样式
        media

    页面变形
        外层div限制像素宽度，内层定义百分比
        小于像素宽度，会出现滚动条

    position
        <div style=‘width:50px;height:50px;position:fixed;right:0px;top:1px;bottom:1px;‘></div>
        absolute 绝对位置，不能随网页移动，一般和relative一起使用时，相对于父类标签的固定位置
            <div style=‘position:relative;‘>
                <div style=‘position:absolute;top:0;left:0;‘></div>
            </div>

    opacity:0.5 透明度（0-1）
    z-index:10 分层次优先级
         <div style=‘z-index:10;position:fixed;top:50%;bottom:50%;left:50%;right:50%;margin-left:-200px;margin-top:-200px;‘>

    overflow 图片超过div隐藏或滚动条
        <div style=‘height:200px;width:300px;overflow:auto/hidden‘>
            <img src=‘1.jpg‘>
        </div>

    hover 当鼠标移动到标签上时生效
        background-color:blue

    background
        background-image:url(‘image/4.jpg‘);如果div大于图片，默认图片重复置放
        background-repeat:no-repeat/repeat-x/repeat-y 不堆叠/横向/纵向
        background-position-x/y:10px;




请求头/请求体
get方法，打包成一个字典提交submit
    数据拼接到URL中发送
post方法
    数据放到内容发送

javascript基本语法
    IE是JS的解释器，代码存在于HTML中
    执行顺序先执行head,后执行body的JS
    //
    /*  */
    <script src=‘commons.js‘> #链接外部文件
    <script type=‘text/javascript‘>
        function func(){
            func..
        }
        alert(123)
    </script>

    www.cnblogs.com/wupeiqi/articles/5602773.html
    变量
        全局变量 name = ‘xx‘
        局部变量 var name = ‘xx‘

    基本数据类型
        数字
            age = 18;
            parseInt(string)
            parseFloat(string)
        字符串
            x.charAt() #根据索引取值
            x.substring(1,4) 1-3字符
            x.length  总长度
            x.trim()
            x.concat(y) # 拼接
            x.indexof(‘le‘)   #返回
            x.slice(start,end) 切片
            x.toLowerCase()
            x.toUpperCase()
            x.split()
            x.search(regexp)
            x.match(regexp)
            x.replace(regexp,replacement)

            setInterval("",2000); 每2秒执行‘‘内容  定时器
            console.log(xx)
            tag = document.getElementById("i1")  # id值
            content = tag.innerText
            f = content.charAt(0)
            l = content.substring(1,content.length)
            new_content = l + f
            tag.innerText = new_content

        布尔boolean
           true/false

        数组
            a=[11,22,33]
            length
            push(xx)  #尾部追加
            pop()   #尾部获取一个
            unshift(xx)  # 头部插入
            shift(xx)   # 头部移除
            splice(start,deleteCount,value,...) 起始位置，删除个数，插入的值
            slice()  #切片
            reverse() #反转
            join(sep) #
            concat(val,...)
            sort()

        字典(对象类型)
            a ={‘k1‘:‘v1‘,"k2":"v2"}

    for循环
        1，循环索引
        a=[11,22,33] / 字典
        for(var item in a){
            console.log(a[item])
                    }
        2，
            for(var i=0;i<10;i++){
                ...
                break;
                continue;
            }

        3, while (codition){
               ...
        }



    条件 ==  !=  === #值和类型都相等 !== #严格比较  && ||
        if(){
            ....
        }
        else if(){

        }
        else{

        }

        switch(name){
            case: ‘1‘:
                console.log(123);
                break;
            case: ‘2‘:
                console.log(456);
                break;
            ...
            default:
                console,log(999);
        }

    函数：
        function func(arg){
            return arg+1
        }

        匿名函数：
            setInterval(function(){
                console.log(123)
            },5000)

        自执行函数：
            (function(arg){
                console.log(arg)
            }(1)

    序列化：
        JSON.stringify(list1)
        JSON.parse(string1)

    转义：cookies  服务端发来的字符串，确认之前的登陆状态
        decodeURI( )                   URl中未转义的字符
        decodeURIComponent( )           URI组件中的未转义字符
        encodeURI( )                   URI中的转义字符
        encodeURIComponent( )             转义URI组件中的字符
        escape( )                         对字符串转义
        unescape( )                     给转义字符串解码
        URIError                         由URl的编码和解码方法抛出

    eval:
        val = eval(表达式‘1+1‘)
        exec(执行代码，解释代码if,for,...)
        eval = eval + exec

    时间
        Date类
        var d = new Date() 时间对象
        d 为当前时间
        d.get...()
        n = d.getMinutes() + 4
        d.setMinutes(n)

    作用域：
        JS默认以函数作为作用域
        函数的作用域，在函数未调用前，就已经创建
        函数的作用域存在作用域链，并且也在作用域之前创建
        xo = ‘alex‘
        function func(){
            var xo = ‘eric‘
            function inner(){
                var xo = ‘tony‘
                console.log(xo)
            }
            inner()
        }


        xo = ‘alex‘
        function func(){
            var xo = ‘eric‘
            function inner(){

                console.log(xo)
            }
            return inner
        }

        var  ret = func()
        ret()


        xo = ‘alex‘
        function func(){
            var xo = ‘eric‘
            function inner(){

                console.log(xo)
            }
            var xo = ‘tony‘;
            return inner
        }

        var  ret = func()
        ret()

        JS函数内部局部变量提前声明
        function func(){
            console.log(xxoo)
            var xxoo = ‘alex‘
        }
        func()  # 输出undefined


        面向对象：
            function Foo(n){
                this.name = n;
                this.sayName = function(){
                    console.log(this.name);
                }
            }
            # Foo的原型
            Foo:prototype = {
                ‘sayName‘: function(){
                    console.log(this.name)
                }
            }

            var obj = new foo(‘we‘);
            obj.name
            obj.sayName()

            this代指对象（python self)
            创建对象时用new关键字 函数（）




    DOM
        HTML的文档对象
        document.getElementById()      # 当个元素
        document.getElementsByTagName()  # 通过标签，数组多个元素
        document.getElementsByClassName() # 通过class属性
        document.getElementsByName()   # 通过name属性
        间接查找
            tag = document.getElementById()
            tag.parentElement   # 父标签
            tag.children        # 所有子标签
            tag.firstElementChild  # 第一个子标签
            tag.lastElementChild   #最后一个子标签
            tag.nextElementSibling  # 下一个兄弟标签
            tag.previousElementSibling # 上一个兄弟标签

        标签.innerText  / =  # 获取（只获取文本）/修改
            obj innerText = <a href=‘#‘>百度</a> 已字符串的形式修改
        标签.innerHTML  获取的是全部内容
            obj innerHTML = <a href=‘#‘>百度</a>
        标签.value
            input/select/textarea标签生效， 获取选中的value值
        标签.selectIndex
            select标签的索引操作
        样式操作：
        tag.className = ‘c1‘  #tag标签的className = ‘c1‘
        tag.classList  # 返回class列表
        tag.classList.add()  # 添加class指定样式
        tag.classList.remove() # 删除class指定样式
        修改当个样式
        tag.style.fontSize = ‘16px‘;


        tag = document.getElementById("test")//checkbox.checked
        tag.checked = true/false

        <div onclick="func();">点我</div>
        <script>
            function func(){
                ....
            }
        </script>


        属性操作
        obj.setAttribute(‘xxx‘,‘alex‘)
        obj.removeAttribute(‘xxx‘)
        obj.attributes

        创建标签到HTML中
        <input type=‘button‘ onclick=‘AddEle():‘ value="+"/>
        <input type=‘button‘ onclick=‘AddEle2():‘ value="+"/>
        <div id=‘i1>
            <input type=‘text‘ />
        </div>
        <script>
            function AddEle(){
                //创建标签
                //将标签添加到i1里面
                var tag = ‘<p><input type=‘text‘ /></p>
                //注意：第一个参数只能是‘beforeBegin‘、 ‘afterBegin‘、 ‘beforeEnd‘、 ‘afterEnd‘
                document.getElementById(‘i1‘).insertAdjacentHTML("beforeEnd",tag);
            }
        </script>
        <script> # 第二种方式
            function AddEle2(){

                var tag = document.createElement(‘input‘);
                tag.setAttribute(‘type‘,‘text‘);
                tag.style.fontSize =‘16px‘;
                tag.style.color = ‘red‘;
                document.getElementById(‘i1‘).appendChild(tag);
            }
        </script>

    提交表单
        <form id=‘f1‘ action="http://www.oldboyedu.com">
            <input type=‘text‘ />
            <input type=‘submit‘ value=‘提交‘ />
            <a onclick="submitForm():">提交吧</a>  # 任何标签都可以通过DOM提交表单
        </form>
        <script>
            function submitForm(){
                document.getElementById(‘f1‘).submit()
            }

    其他
        console.log  输出
        alert    弹窗
        confirm  确认返回true , 取消返回false
        location.href  # 获取当前url ， 也可以赋值
        location.reload()

        obj = setInterval(func(),5000ms)  # 定时器
        clearInterval(obj);

        setTimeout(function() {
            console.log(‘timeout‘)
        },5000)  #定时器只执行一次,显示log5秒

        clearTimeout(obj)


    事件
        onclick
        onblur
        onfocus

        行为 样式 结构 分离？

        onmouseover=‘t1(0)  # 鼠标移入
        onmouseout=‘t2(0)‘‘   # 鼠标移出

        <script>
            var myTrs = doucument.getElementByTagName(‘tr‘);
            var len = myTrs.length;
            for(var i=0;i<len;i++){
                myTrs[i].onmouseover = function(){
                    this.style.backgroundColor = ‘red‘;
                }

                myTrs[i].onmouseout = function(){
                    this.style.backgroundColor = ‘‘;
                }
            }

            function t1(n){
                var mtTrs = document.getElementsByTagName(‘tr‘)[n];
                mtTrs.style.backgroundColor = ‘red‘;
            }

            function t2(n){
                var mtTrs = document.getElementsByTagName(‘tr‘)[n];
                mtTrs.style.backgroundColor = ‘‘;
            }
        </script>