Python全栈之学习CSS(1)

目录
  • 1. 表单框类型
    • 文件上传：
  • 2. 表单属性
  • 3. css引入
    • my.css
  • 4. 选择器
    • 4.1 常用选择器
    • 4.2 选择器的优先级
    • 4.3 关系选择器
    • 4.4 属性选择器
    • 4.5 伪类选择器_颜色设置
    • 4.6 伪对象选择器
  • 5. 字体属性设置
    • cursor属性：
  • 6. 文本属性
  • 7. 盒子模型
    • order-style:
  • 8. 学习工具
  • 总结

1. 表单框类型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>单选框 , 复选框 , 下拉框</title>
</head>
<body>
    <form action="" method="">
        <!-- 单选框 radio 多选一 name名字要一致  checkedc:默认选中 -->
        <input type="radio" name="sex" value="m" id="sex1"  /> <label for="sex1" >男性</label>
        <input type="radio" name="sex" value="w" id="sex2" checked /> <label for="sex2" >女性</label>
        <hr />
        <!-- 复选框 checkbox 多选多 name名字要一致 -->
        <input type="checkbox" name="food" value="banana" checked />香蕉
        <input type="checkbox" name="food" value="huanggua" />黄瓜
        <input type="checkbox" name="food" value="qiezi" checked />茄子
        <input type="checkbox" name="food" value="donggua" />冬瓜
        <hr />
        <!-- 下拉框 select 多选一 selected 默认选中, disabled 无法选中-->
        <select name="city" >
            <option value="beijing"  >北京人</option>
            <option value="xian" selected>西安人</option>
            <option value="dalian"  >大连人</option>
            <option value="fuzhou">福州人</option>
            <option value="zhengzhou" disabled >郑州人</option>
        </select>
        <hr / >
        <input type="submit" value="点我" />
    </form>
</body>
</html>

文件上传：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> 文件上传 </title>
</head>
<body>
    <form action="" method="post" enctype="multipart/form-data">
        <!-- 文件上传 -->
        头像:<input type="file" name="myfile" />
        <hr/>
        <!-- 大段文本框 -->
        <textarea name="info" style="width:100px;height:100px;background-color:tan;" >请填写相关数据</textarea>
        <hr/>
        <!-- 隐藏的表单框 => 隐藏要修改的数据id -->
        <input type="hidden" name="sid" value="13" />
        <hr/>
        <input type="submit" value="提交"/>
    </form>
</body>
</html>

2. 表单属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>input属性</title>
</head>
<body>
    <!--
    placeholder  灰色输入提示
    required     必填
    readonly     只能读不能改   可以被提交
    disabled     只能读不能改   不会被提交
    size         设置输入框的大小
    maxlength    输入框最多可以输入多少字符
    minlength    输入框最少需要输入多少字符
    autofocus    自动获取焦点, 整个页面只能有一个
    tabindex     设置tab的切换顺序
    -->
    <form action='' method="" >
        用户名:<input type="text" name="username" placeholder="请输入用户名" required tabindex=5 />
        <br />
        密码: <input type="password" name="pwd" tabindex=4 >
        <br />
        年龄: <input type="text" name="age" value="18" readonly tabindex=3 />
        <br />
        邮箱: <input type="text" name="email" value="123463922@qq.com" disabled   />
        <br />
        班级: <input type="text" name="classroom" size=100 maxlength = 5 minlength=2  tabindex=2/>
        <br />
        国籍: <input type="text" name="country" autofocus tabindex=1 />
        <br />
        <input type="submit">
    </form>
</body>
</html>

3. css引入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css学习 css的三种引入方法</title>
    <!-- 2.内嵌样式 -->
    <style>
        p
        {color:blue;}
    </style>
    <!-- 外部引入 -->
    <link href="my.css" type="text/css" rel="stylesheet" />
</head>
<body>
    <p>今天学习css</p>
    <!-- 1.行内样式 -->
    <p style="color:tan;">今天学习css</p>
    <p>我们很开心</p>
    <a href="">我是链接</a>
</body>
</html>

my.css

a
{font-size:100px;}

4. 选择器

4.1 常用选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>常用选择器</title>
    <style>
        /* 标签选择器*/
        h1
        {color:cyan}
        /* 类选择器 */
        .one
        {color:green;}
        /* ID选择器 */
        #two
        {color:red;}
        /* 组合选择器 */
        h1,h2,h3,h4
        {color:goldenrod;}
        /* 越具体指定,优先级就越高 */
        h1.one
        {color:gray;}
        h2#two
        {color:greenyellow;}
    </style>
</head>
<body>
    <!--
    标签选择器 :  指定的是哪一些标签
    类选择器   :  指定的是哪一类标签
    ID选择器   :  指定的是哪一个标签
    -->
    <h1>1号标签111</h1>
    <h1 class="one" >1号标签222</h1>
    <h2 id = "two">2号标签333</h2>
    <a href="" class="one">我是连接</a>
    <span id ="two">我是span</span>
    <h3>我是h3标签</h3>
</body>
</html>
aoe

4.2 选择器的优先级

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选择器的优先级</title>
    <style>
        font
        {color:greenyellow;}
        .one
        {color:blue;}
        #two
        {color: indigo;}
        font
        {color:greenyellow!important;}
    </style>
</head>
<body>
    <!--
        !important <- 行内样式 <- ID选择器 <- 类选择器 <- 标签选择器
        大原则: 泛指的元素优先级低, 特指的元素优先级高 , 越具体优先级就越高
    -->
    <font style="color:tan;" class="one" id="two"> 选择器的优先级 </font>
</body>
</html>

4.3 关系选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> 关系选择器 </title>
    <style>
        /*  多行注释  */
        ul li   /* 包含选择器/后代选择器 */
        {color:darkslateblue;}
        ul>li   /* 父子选择器 */
        {color:yellow;}
        ol+li   /* 相邻选择器 特指下面一个*/
        {color:green;}
        ol~li   /* 兄弟选择器 特指下面一堆*/
        {color:deeppink;}
    </style>
</head>
<body>
    <ul>
        <li>动漫频道</li>
        <li>学习频道</li>
        <li>直播频道</li>
        <li>游戏频道</li>
        <ol>
            <li>少儿频道</li>
            <li>智慧树,大风车</li>
            <li>老年人频道</li>
        </ol>
        <li>授课直播</li>
        <li>亚洲捆绑</li>
    </ul>
</body>
</html>

4.4 属性选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>属性选择器</title>
    <style>
        input[name]
        {background-color: dodgerblue;}
        input[name=username]
        {background-color: red;}
        input[type=password]
        {background-color:yellow;}
        input[type=text]
        {background-color:green;}
    </style>
</head>
<body>
    <form action="" method="" >
        用户名: <input type="text" name="username" />
        <br />
        密码: <input type="password" name="nickname">
        <br />
        性别:<input type="radio" name="sex" value="m"> 男
        <input type="radio" name="sex" value="w"> 女
        <br />
        <input type="submit" value="点我">
    </form>
</body>
</html>

4.5 伪类选择器_颜色设置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>伪类选择器</title>
    <style>
        /* 鼠标悬停的时候触发 */
        a:hover
        {color:teal;}
        /* 列表中第一个元素 */
        ul li:first-child
        {color:yellow;}
        /* 列表中最后一个元素 */
        ul li:last-child
        {color:green;}
        /* 列表中具体某一个元素 */
        ul li:nth-child(4)
        {color: red;}
        /*  偶数个2n / even   奇数个2n-1 / odd n不可换 */
        ul li:nth-child(even)
        {color:turquoise;}
        ul li:nth-child(odd)
        {color:violet;}

        /* 小练习 */
        /* 1.写一个table表格,设置一个背景色 */
        table
        {background-color:green;}
        /* 2.偶数行颜色为蓝色 */
        table tr:nth-child(2n)
        {background-color: blue;}
        table tr td
        {}
        /* 3.第3 , 6 , 9   3倍行颜色为黄色 */
        table tr:nth-child(3n)
        {background-color:yellow;}
        /* 4.鼠标滑过时,颜色变成红色 */
        table tr:hover
        {background-color: red;}
    </style>
</head>
<body>
    <a href="#"> 老男孩教育 </a>
    <ul>
        <li>马春妮</li>
        <li>孙坚</li>
        <li>晓东</li>
        <li>文东</li>
        <li>王伟</li>
        <li>好心</li>
        <li>蜂拥</li>
        <li>倩倩</li>
        <li>石超</li>
        <li>帅帅</li>
    </ul>
    <!--
    小练习:
        1.写一个table表格,设置一个背景色
        2.偶数行颜色为蓝色
        3.第3 , 6 , 9   3被行颜色为黄色
        4.鼠标滑过时,颜色变成红色
    -->
    <!--
    颜色设置:
        RGB:  三原色
            R:red     0~255 0~ff
            G:green   0~255 0~ff
            B:blue    0~255 0~ff
            1.使用rgb方式表达颜色:
                rgb(100,100,100)      三原色的设置
                rgba(100,100,100,0~1) 三原色+透明度设置
            2.使用十六进制的方式表达颜色
                f -> 15 1111  ff -> 255  1111 1111
                纯红色: # ff 00 00   => #f00 (简写)
                纯绿色: # 00 ff 00   => #0f0 (简写)
                纯蓝色: # 00 00 ff   => #00f (简写)
    -->
    <table border=1 style="width:600px;" cellspacing=0 cellpadding=0 >
        <tr>
            <td style="background-color: #800000;">111</td><td style="background-color:#0f0;">222</td><td  style="background-color:#00f;">333</td><td>444</td>
        </tr>
        <tr>
            <td  style="background-color:rgb(100,100,100);">111</td><td>222</td><td>333</td><td>444</td>
        </tr>
        <tr>
            <td style="background-color:rgba(100,100,100,0.7);">111</td><td>222</td><td>333</td><td>444</td>
        </tr>
        <tr>
            <td>111</td><td>222</td><td>333</td><td>444</td>
        </tr>
        <tr>
            <td>111</td><td>222</td><td>333</td><td>444</td>
        </tr>
        <tr>
            <td>111</td><td>222</td><td>333</td><td>444</td>
        </tr>
        <tr>
            <td>111</td><td>222</td><td>333</td><td>444</td>
        </tr>
        <tr>
            <td>111</td><td>222</td><td>333</td><td>444</td>
        </tr>
        <tr>
            <td>111</td><td>222</td><td>333</td><td>444</td>
        </tr>
        <tr>
            <td>111</td><td>222</td><td>333</td><td>444</td>
        </tr>
    </table>
</body>
</html>

4.6 伪对象选择器

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt;    &lt;meta charset="UTF-8"&gt;    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;    &lt;title&gt;伪对象选择器&lt;/title&gt;    &lt;style&gt;        .name        {color:goldenrod;}        /* 在内容之前插入 */        .name::before        {            content:"我问:";            color:green;        }        /* 在内容之后插入 */        .name::after        {            content:"肯定对!";            color:magenta;        }        /* 鼠标选中后的样式 */        .name::selection        {            background-color: mediumspringgreen;            color: white;        }    &lt;/style&gt;&lt;/head&gt;&lt;body&gt;        &lt;span class="name"&gt;王文很帅,对不对?&lt;/span&gt;&lt;/body&gt;&lt;/html&gt;

5. 字体属性设置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css的相关属性: 字体属性 </title>
    <style>
        /*@符制定规则,来设置引入的自定义字体 */
        @font-face
        {
            font-family:"王文";
            src:url("font/方正舒体.TTF");
        }
        /* 设置字体属性 */
        .c1
        {
            font-style:italic; /*字体斜体*/
            font-weight:bold;  /*字体粗细*/
            font-size:32px;    /*字体大小*/
            font-family:"宋体";/*字体种类*/
        }
        /* 简写字体1 */
        .c2
        {font:italic bold 32px "宋体"; }
        /* 简写字体2 */
        .c3
        {
            border:solid 1px red;
            font:64px/2 "宋体";   /*  字体大小/行高比例 字体种类  */
            background-color: yellow;
        }
        /* 自定义字体 */
        .c4
        {font:64px/2 "王文";}
        ul
        {
            /* 去掉前面的点. */
            list-style:none;
            /* 改变鼠标的形态 */
            cursor:wait;
        }
    </style>
</head>
<body>
    <ul>
        <li class="c1">设置字体相关的属性1</li>
        <li class="c2">设置字体相关的属性2</li>
        <li class="c3">设置字体相关的属性3</li>
        <li class="c4">设置字体相关的属性4</li>
    </ul>
</body>
</html>

cursor属性：

6. 文本属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css的相关属性: 文本属性 </title>
    <style>
        .p0
        {
            font-size:16px;
            width:200px;height:200px;background-color: red;
            /* 字符间距 */
            letter-spacing:5px;
            /* 文本的首行缩进 */
            /* text-indent:32px; */ /* px代表像素*/
            text-indent:2em;        /* 1em = 1个元素的大小 按照字体比例缩进 */
        }
        .p1
        /* 强制换行 纯英文不会默认换行*/
        {word-wrap: break-word;}
        .p2
        /* 强制不换行 中文默认换行   */
        {white-space:nowrap;}
        .p3
        /* 设置height与line-height数值相同,可以让文字在垂直方向上居中 */
        {font-size:16px;width: 200px;height:50px; line-height: 50px;   background-color:goldenrod;}
        .p4
        /* text-align:left/center/right       文本水平对齐方式 */
        {font-size:16px;width: 200px;height:50px; line-height: 50px;   background-color:goldenrod;text-align:center;}
        .p5
        /* text-decoration:overline/line-through/underline/none; */
        {text-decoration:none;}
        .p6 img
        /* vertical-align:top/middle/bottom   文本垂直对齐方式[一般都是在图片排版的时候使用] */
        {vertical-align:-600%;}

        /*
        text-shadow相关设置
        none： 无阴影
        <length>①： 第1个长度值用来设置对象的阴影水平偏移值。可以为负值
        <length>②： 第2个长度值用来设置对象的阴影垂直偏移值。可以为负值
        <length>③： 如果提供了第3个长度值则用来设置对象的阴影模糊值。不允许负值
        <color>： 设置对象的阴影的颜色。  */
        .p7
        {text-shadow:7px 4px 10px gray;}

    </style>
</head>
<body>
    <p class="p0 p1">setwordxiangguanpropertyhahahah </p>
    <p class="p0 p2">设置文本属性111222233asd设置文本属性设置文本属性</p>
    <p class="p3">本属性</p>
    <p class="p4">本属性</p>
    <a href="" class="p5">本属性</a>
    <del>特价取消</del>
    <p class="p6">   <img src="tupian1.png" />   <a href>点我跳转</a>   </p>
    <p class="p7"> 我是炫酷的阴影效果</p>
</body>
</html>

7. 盒子模型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> 盒子模型 </title>
    <style>
        #d1
        {
            width: 200px;
            height:200px;
            /* 上 右 下 左  top right bottom left*/
            border:solid 10px green;
            border-top:dotted 3px red;
            border-right:dashed 5px blue;
        }
        #d2
        {
            width: 200px;
            height:200px;
            border:solid 5px red;
            /* border-radius: 100px; */
            border-top-left-radius: 100px;
            border-bottom-right-radius: 100px;
        }
        #d3
        {
            width: 200px;
            height:200px;
            border:solid 5px red;
            /*上 右 下 左 padding会增大盒子的面积 内填充*/
            /* padding:50px; */
            /* 上下 左右*/
            /* padding:10px 20px; */
            /* 上 左右 下 */
            padding:10px 20px 30px;
            /* 上 右 下 左 */
            /* padding:10px 20px 30px 10px;  */
            /* padding-left:30px; */
        }
        #d4
        {
            width: 200px;
            height:200px;
            border:solid 5px red;
            /*上 右 下 左 盒子与盒子之间的间距 外边距*/
            /* margin:60px; */
            /* 上下 左右 */
            margin:10px 20px;
            /* 上 左右 下 */
            margin:10px 20px 30px;
            /* 上 右 下 左 */
            /* margin:10px 20px 30px 10px;  */
            /* margin-left:30px; */
        }
        #d5
        {
            width: 200px;
            height:200px;
            border:solid 5px red;
            /*  上下0px 左右自动居中*/
            margin:0px auto;
        }
        /*
        box-shadow:
        <length>①： 第1个长度值用来设置对象的阴影水平偏移值。可以为负值
        <length>②： 第2个长度值用来设置对象的阴影垂直偏移值。可以为负值
        <length>③： 如果提供了第3个长度值则用来设置对象的阴影模糊值。不允许负值
        <length>④： 如果提供了第4个长度值则用来设置对象的阴影外延值。可以为负值
        <color>： 设置对象的阴影的颜色。  */
        #d6
        {width:100px;height:100px;border:solid 5px red;box-shadow:6px 3px 16px 6px black;}
    </style>
</head>
<body>
    <div id="d1"></div>
    <div id="d2"></div>
    <div id="d3">我是d3</div>
    <div id="d4">我是d4</div>
    <div id="d5">我是d5</div>
    <div id="d6"></div>

</body>
</html>

order-style:

8. 学习工具

学习css一般有三种工具提供给我们开发:
1. 代码编辑器本身一般自带提示或者语法提示.
2. css手册,内部提供提供了所有的样式属性和样式值的使用参考,甚至包括一些演示代码.
   http://css.doyoe.com
3. 浏览器也内置了一些css辅助工具给我们学习和开发.
   F12,或者Ctrl+shift+i,或者鼠标右键,检查代码

总结

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注我们的更多内容!

赞 (0)

相关推荐

  • Python全栈之协程详解

    Python全栈之协程详解

    目录 1. 线程队列 2. 进程池_线程池 3. 回调函数 4. 协程 总结: 1. 线程队列 # ### 线程队列 from queue import Queue """ put 存放 超出队列长度阻塞 get 获取 超出队列长度阻塞 put_nowait 存放,超出队列长度报错 get_nowait 获取,超出队列长度报错 """ # (1) Queue """先进先出,后进先出"""

  • Python全栈之线程详解

    Python全栈之线程详解

    目录 1. 线程的概念 1.1 Manager_进程通信 1.2 线程的概念 2. 线程的基本使用 3. 自定义线程_守护线程 3.1 自定义线程 3.2 守护线程 4. 线程安全问题 4.1 线程安全问题 4.2 Semaphore_信号量 5. 死锁_互斥锁_递归锁 6. 线程事件 总结 1. 线程的概念 1.1 Manager_进程通信 # ### Manager ( list 列表 , dict 字典 ) 进程之间共享数据 from multiprocessing import Proc

  • Python全栈之作用域和闭包

    Python全栈之作用域和闭包

    目录 1. return返回值 2. 全局变量_局部变量 3. 函数名的使用 4. 函数的嵌套 4.1 函数的嵌套 4.2 nonlocal的使用 5. 闭包函数的定义 6. 闭包的特点_意义 小提示: 7. 小练习 总结 1. return返回值 # ### return 自定义函数的返回值 """ 概念:return 把函数内部的数据返回到函数的外面,返回到函数的调用处 1.return + 六大标准数据类型 , 除此之外还可以返回函数 或者 是类对象 2.return

  • Python全栈之队列详解

    Python全栈之队列详解

    目录 1. lock互斥锁 2. 事件_红绿灯效果 2.1 信号量_semaphore 2.2 事件_红绿灯效果 3. queue进程队列 4. 生产者消费者模型 5. joinablequeue队列使用 6. 总结 1. lock互斥锁 知识点: lock.acquire()# 上锁 lock.release()# 解锁 #同一时间允许一个进程上一把锁 就是Lock 加锁可以保证多个进程修改同一块数据时,同一时间只能有一个任务可以进行修改,即串行的修改,没错,速度是慢了,但牺牲速度却保证了数据

  • Python全栈之学习JS(1)

    目录 1. js的数据类型 1.1 js引入方式 1.2 注释变量 1.3 数据类型 2. js类型转换_运算符 2.1 强制转换_Number 2.2 强制转换_String 2.3 强制转换_Boolean 2.4 自动类型转换_Number_Boolean_String三者之间转换 2.5 js运算符 3. js流程控制 3.1 分支结构 3.2 分支结构_switch_case 3.3 循环结构 4. js函数 4.1 函数 4.2 函数的调用 总结 1. js的数据类型 1.1 js引

  • Python全栈之学习CSS(2)

    Python全栈之学习CSS(2)

    目录 1. css背景图 1.1 背景属性 1.2 背景图片引入 2. 相对_绝对_固定 2.1 相对定位 2.2 绝对定位 2.3 固定定位 3. float浮动 3.1 display转换元素 3.2 float浮动 4. html里面的bug 4.1 float内容塌陷问题 4.2 margin-top失效问题 4.3 overflow 总结 1. css背景图 1.1 背景属性 <!DOCTYPE html> <html lang="en"> <h

  • Python全栈之学习CSS(1)

    Python全栈之学习CSS(1)

    目录 1. 表单框类型 文件上传: 2. 表单属性 3. css引入 my.css 4. 选择器 4.1 常用选择器 4.2 选择器的优先级 4.3 关系选择器 4.4 属性选择器 4.5 伪类选择器_颜色设置 4.6 伪对象选择器 5. 字体属性设置 cursor属性: 6. 文本属性 7. 盒子模型 order-style: 8. 学习工具 总结 1. 表单框类型 <!DOCTYPE html> <html lang="en"> <head> &

  • Python全栈之学习HTML

    Python全栈之学习HTML

    目录 1. vscode相关配置 2. html认识 2.1 html认识 2.2 html结构 2.3 html语法特征 3. 标签种类_列表 3.1 常见标签 3.2 标签种类 3.3 列表 3.4 超链接标签 3.5 a链接跳锚点 3.6 img图片标签 3.7 table表格标签 3.8 iframe子窗口 4. 音视频_表单 4.1 音视频标签 4.2 form标签 5. 小练习 总结 1. vscode相关配置 w3c school 手册: https://www.w3school.

  • Python全栈之学习JS(3)

    目录 1. dom节点 1.1 dom节点获取 1.2 节点元素层级关系 1.3 修改_清空内容 1.4 隐藏显示密码效果 2. 全选_反选_不选 2.1 全选_反选_不选 2.2 js控制css的相关属性 2.3 js事件 3. 模态框 1. dom节点 1.1 dom节点获取 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <met

  • Python全栈之学习JQuery

    Python全栈之学习JQuery

    目录 1. lable标签补充 2. jquery引入和简单使用 3. 选择器 3.1 基础选择器 3.2 组合选择 3.3 层级选择器 3.4 属性选择器 3.5 表单对象属性选择器 3.6 表单选择器 3.7 筛选器方法 4. 文本操作 4.1 选择器优先级和类值操作 4.2 值操作 4.3 创建标签 4.4 文档操作 4.5 删除和清空标签 4.6 字符串占位符 总结 1. lable标签补充 <!DOCTYPE html> <html lang="en">

  • Python全栈之学习JS(2)

    目录 1. js对象 1.1 object对象 1.2 json对象 2. js字符串函数 3. js数组相关方法 4. js数学对象相关方法 5. BOM对象 5.1 定时器 5.2 获取年月日时分秒 5.3 Navigator 5.4 历史对象 6. BOM对象location 7. 小提示 ceshi.html: 总结 1. js对象 1.1 object对象 <!DOCTYPE html> <html lang="en"> <head> &l

  • Python全栈之学习MySQL(3)

    目录 1. pymysql的基本操作 2. sql注入攻击 3. sql增删改查 4. mysql的数据恢复 5. sql语句优化 总结 1. pymysql的基本操作 # ### python 操作mysql import pymysql # ### 1.基本语法 """ # (1) 创建连接对象 host user password database 这四个参数必写 conn = pymysql.connect( host="127.0.0.1" ,

  • Python全栈之学习MySQL(2)

    Python全栈之学习MySQL(2)

    目录 1. mysql_where子句_聚合函数 2. mysql_其他子句语法 3. mysql_子查询 4. exists关键字 5. 练习所需表数据 6. 小练习 (1)表结构: (2)黏贴如下sql,直接建表 (3)练习题目 总结 1. mysql_where子句_聚合函数 # ### part 单表查询 """ select ... from ... where ... group by ... having ... order by ... limit ... &

  • Python全栈之学习MySQL(1)

    Python全栈之学习MySQL(1)

    目录 1. mysql约束 2. 外键_联合主键_唯一索引 3. 存储引擎_表关系 总结 1. mysql约束 # ### char varchar (补充) char 字符长度 255个 varchar 字符长度 21845个 # ### part1 时间类型 date YYYY-MM-DD 年月日 (节假日,纪念日) time HH:MM:SS 时分秒 (体育竞赛,记录时间) year YYYY 年份 (历史,酒的年份) datetime YYYY-MM-DD HH:MM:SS 年月日 时分

随机推荐