Python——HTML、CSS、javaScript 学习笔记

HTML

    <!-- 双标签 -->
    <h1>我是一级标签</h1>
    <h6>我是六级标签</h6>
    <div>我是容器标签</div>
    <p>我是一个段落标签</p>
    <!-- 单标签 -->
    <hr>
    <img src="img/bullet01.png" alt="图片加载失败会显示">
    <br>
    <img src="img/suanbo01.png" alt="">

    <!-- 带有属性的标签 -->
    <a href="https://www.baidu.com">前往百度</a>

    <!-- 无序列表标签 -->
    <ul>
        <li>苹果</li>
        <li>桃子</li>
    </ul>
    <!-- 有序列表标签 -->
    <ol>
        <li>第一步</li>
        <li>第二步</li>
    </ol>

    <!-- 表格标签 -->
    <table>
        <!-- 表行 -->
        <tr>
            <!-- 表头 -->
            <th>姓名</th>
            <th>性别</th>
        </tr>
        <tr>
            <!-- 表列 -->
            <td>张三</td>
            <td>男</td>

        </tr>
    </table>

    <!-- 表单标签 -->
   
    <form>
        <p>
            <!-- for根据id名给指定id设置光标 -->
            <label for="uname">用户名</label>
            <input type="text" name="" id="uname">
        </p>
        <p>
            <label for="psw">密码</label>
            <input type="password" name="" id="psw">
        </p>
        <p>
            <label>性别</label>
            <input type="checkbox" name="" id="">男
            <input type="checkbox" name="" id="">女
        </p>
        <p>
            <label>照片</label>
            <input type="file">
        </p>
        <p>
            <label>描述</label>
            <textarea name="" id="" cols="30" rows="10"></textarea>
        </p>
        <p>
            <label>居住地</label>
            <select>
                <option value="">北京</option>
                <option value="">上海</option>
                <option value="">福建</option>
                <option value="">深圳</option>
            </select>
        </p>
        <p>
            <input type="submit" value="提交">
            <input type="reset" value="重置">
            <input type="button" value="按钮">
        </p>
    </form> 

1. 表单
方式GET，是以查询参数的方式提交数据给web服务器

<form action="www.baidu.com" method="GET"></form>

方式POST，数据会放到web服务器里面

 <form action="www.baidu.com" method="POST"></form>

CSS

使用方式

<!-- 外链式 -->
<link rel="stylesheet" href="main.css">


<!-- 内嵌式 -->
<style>
</style>


<!-- 行内式 -->
<p style="color:red">我是一个段落标签</p>

css选择器总类

1. 标签选择器
2. 类选择器
3. 层级选择器
4. id选择器
5. 组选择器
6. 伪类选择器

/* 标签选择器 标签 {}*/
p {
    color: yellow;
}

/* 类选择器 .类名 {}*/
.myp {
    color: red;
}

/* 层级选择器 层级关系 {}*/
div div {
    color: seagreen;
}
div .box {
    color: seagreen;
}
table tr th {
    color: snow;
}

/* id 选择器  #id名 {} */
#name {
    background-color: crimson;
}

/* 组选择器   */
.box1, .box2, .box3 {
    width: 50px;
    height: 50px;
    border: 1px solid black;

}

/* 伪类选择器  选择器添加效果 */
.box1:hover {
    width: 55px;
    height: 55px;
}

盒子真实大小

盒子真实宽度 = width + padding左右 + border左右
盒子真实高度 = height + padding上下 + padding上下

javaScript

使用方式

<!-- 外嵌式 -->
<script type="text/javascipt" src="index.js"></script>


<!-- 内嵌式 -->
<script>
/script>


<!-- 行内式 -->
<input type="button" value="按钮" onclick="alert('你点我了')" >

定义变量

        // 定义数据类型的变量
        var iNum1 = 1;
        var fNum1 = 12.2
        // 定义字符串
        var sName = "王五"
        // 定义布尔（boolean）类型
        var bIsOK = true;
        // 定义undefind类型
        var unData;
        // 定义空对象
        var oDada = null;
        // 定义对象类型
        var oPerson = {
            name:"张三",
            age:18
        }
        // 定义多个变量
        var iNum = 3, sStr = "夏娜";
        // 查看数据类型
        alert(typeof(iNum1));
        // 弹窗输出
        alert(iNum1);
        alert(sName);
        alert(oPerson.name);
        // 后台输出
        console.log(oPerson.age);

高级语法

// 函数定义 function
        function fnSum(iNum1, iNum2){
            var iresult = iNum1 + iNum2;
            return iresult;
            // return 之后的函数不再执行
        }
        var iSum = fnSum(1,2);
        console.log(iSum);
        alert(iSum);


        // 局部变量和全局变量的使用
        // 全局变量
        iResult=0;
        function fnShow(){
            // 局部变量
            var iNum1 = 6, iNum2=8;
            iResult = iNum1 + iNum2;
            alert(iResult);
        }
        fnShow();

        // 判断语句 if
        if(true){
            console.log("if循环语句");
        }else if(true){
            console.log("else if");
        }else{
            console.log("else");
        }
        // 循环语句 while
        while (true) {
            console.log("while循环语句");
        }
        // 循环语句 for
        for(var index=0; index<iArray; index++){
            console.log("for循环语句");
        }
        // 循环语句 do..while
        do {
            console.log("do..while循环语句"); 
        }while(true)

标签对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script>
        // js的内置对象，html的文档对象
        // window.onload 加载完页面在执行
        window.onload = function () {
            // 根据标签的id获取标签对象
            var oP = document.getElementById("p1");
            // 获取标签内容
            alert(oP.innerHTML);
            alert(oP.innerText);
            // 设置标签内容
            oP.innerText = "我是新标签";  //或 oP.innerHTML = "我是新标签";


            var oBtn = document.getElementById("btn1");
            // 获取标签属性
            alert(oBtn.type);
            // 设置标签属性
            oBtn.name = "button";
            oBtn.style.background="red";
            // 通过设置class类选择器添加样式
            oBtn.className="btnstyle";
        };

    </script>
</head>
<body>

    <p id="p1">我是一个段落标签</p>
    <input type="button" value="按钮" name="按钮" id="btn1">
    
</body>
</html>

数组

语法：var 数组名 = [元素1, 元素2, 元素3…]
多维数据：var 数组名 = [[元素1, 元素2, 元素3…], [元素1, 元素2, 元素3…]]

功能	属性	描述
增	数组名.splice(index, 删除个数, “添加元素”)	array.splice(1, 0, “元素”)
删	array.splice(1, 2)	从第1个下标删除两个元素
改	数组名[index] = 数据	根据下标修改数据
查	数组名[index]	根据下标获取数据
查数组长度	数组名.length
追加数据	数组名.push(‘hello’)
删除最后一个元素	数组名.pop()

定时器

function fnSum(iNum1, iNum2){
            var iresult = iNum1 + iNum2;

            // 销毁定时器setTimeout
            clearTimeout(tid)
            // 销毁定时器setInterval
            clearInterval(tid2)
        }
        // 根据时间间隔调用一次函数的定时器
        // 1.定时器要执行的函数
        // 2. 时间间隔
        // 3.参数,多个参数使用逗号进行分割
        // 返回值表示创建定时器返回的id,通俗理解就是创建的第几个定时器
        // 单次执行 setTimeout
        var tid = setTimeout(fnSum, 2000, 3, 4)
        // 重复执行
        var tid2 = setInterval(fnSum, 2000, 3, 4)