表单标签的补充说明
基于form表单发送数据 1.用于获取用户数据的标签至少应该含有name属性 name属性相当于字典的键 用户输入的数据会被保存到标签的value属性中 value属性相当于字典的值 2.如果不需要用户填写数据 只需要选择 那么我们需要自己填写value <input type="radio" name="gender" value="male"> ps:没有name属性的标签 form表单会直接忽略 不会发送 3.针对input标签理论上应该配一个label标签绑定 但是也可以不写 <label for="d1">username: <input type="text" id="d1"> </label> <label for="d1">username:</label> <input type="text" id="d1"> 4.标签的属性如果和属性值相等 那么可以简写 <input type="file" multiple="multiple"> <input type="file" multiple> 5.针对选择类型的标签可以提前设置默认选项 <input type="radio" name="gender" checked="checked"> <input type="radio" name="gender" checked> <input type="checkbox" checked="checked"> <input type="checkbox" name="gender" checked> <option value="" selected="selected">222</option> <option value="" selected>222</option> 6.下拉框与文件上传可以复选 <input type="file" multiple> <select name="" id="" multiple> 
CSS层叠样式表
标签的两大重要属性>>>:区分标签
1.class属性 分门别类 主要用于批量查找 2.id属性 精确查找 主要用于点对点 学习css的流程 1.先学习如何查找标签 2.再学习如何调整样式 <div class="c1 c2 c3"></div> <p class="c1 c5"></p> <span class="c1 c8"></span> <div id="d1"></div> <a href="" id="d2"></a> css语法结构
选择器{ 样式名1：样式值1； 样式名2：样式值2 } css注释语法 /*注释内容*/ 引入css的多种方式
1.head内style标签内部编写（学习的时候使用） 2.head内link标签引入（标准的方式） 3.标签内部通过style属性直接编写（不推荐） <head> <meta charset="UTF-8"> <title>Title</title> <!-- 方式1 style标签内部编写 --> <style> h1{ color:deeppink;} </style> <!-- 方式2 link标签引入 --> <link rel="stylesheet" href="mycss.css"> </head> <body> <!--方式3 标签内部通过style属性直接编写--> <h1 style="color:greenyellow">前端过后就是一座山！！！</h1> </body> CSS选择器
css基本选择器
1)标签选择器（直接按照标签名查找标签）
div { color:red; }
2)类选择器（按照标签的class值查找标签）
.c1 { color:green; }
3)id选择器（根据标签的id之精准查找标签）
#d1 { color: yellow; }
4)通用选择器（直接选择页面所有的标签）
* { color:blue; }
""" 预知知识点 我们对标签的嵌套有另外一套说辞 <p>ppp</p> <p>ppp</p> <div>div <div>divdiv <p>divdivp <span>divdivpspan</span> </p> </div> <p>divp</p> <span>divspan</span> </div> <p>ppp</p> <span>spanspan</span> 针对标签的上下层级以及嵌套有另外的说法 父标签 后代标签 子标签 弟弟标签 哥哥标签 祖先标签 """ CSS组合选择器
1)后代选择器（空格）
div span { color: red; }
2)儿子选择器（大于）
div>span { color:yellow; }
3)毗邻选择器（加号）
div>span { color:blue; }
4)弟弟选择器（小波浪号）
div~span { color:blue; }
分组与嵌套
多个选择器合并查找
div,p,span { color:blue; } #d1,.c1,span { color:green; } 
查找class含有c1的div
div.c1 { color:red; }
查找id是d1的div
div#d1 { color: red; }
查找含有c1样式值里面的含有c2样式值的p标签
.c1 p.c2 { color:red } 属性选择器
按照属性名查找
[username] { color:red; }
按照属性名等于属性值
[username='jason'] { color:red; }
div[username='jason'] { color:red; }
伪类选择器
"""a标签补充说明 针对没有点击过的网址 默认是蓝色的 点击过的则为紫色""" a:hover { color: orange; } input:focus { input获取焦点(被点击)之后采用的样式 background-color: red; }
伪元素选择器
p:first-letter { font-size: 48px; color:red; }
p:before { css添加文本无法正常选中 content: '嘿嘿嘿'; color:blue; } p:after { css添加文本无法正常选中 content: '呵呵呵呵'; color: red; }
选择器优先级
1.选择器相同 导入方式不同 就近原则 2.选择器不同 导入方式相同 内联样式 > id选择器 > 类选择器 > 标签选择器
CSS样式调节
字体样式
字体样式 font-size:14px 24px 28px 36px 字体代码 font-weight: lighter; 字体粗细 color:三种模式 /*color: red;*/ /*color: #3d3d3d;*/ color: rgb(186,11,98); rgba()最后一个参数还可以控制透明度 0~1 text-align: center 文本居中 text-decoration: none; 主要用于a标签取消下划线 text-indent: 32px; 首行缩进 """ 取色器工具 1.pycharm 2.截图功能 """
背景属性
div { width: 800px; height: 800px; /*background-color: red;*/ /*background-image: url("https://img2.baidu.com/it/u=167083063,1652780278&fm=253&fmt=auto&app=138&f=JPEG?w=369&h=472");*/ /*background-repeat: no-repeat;*/ /*background-repeat: repeat-x;*/ /*background-repeat: repeat-y;*/ /*background-position: center center;*/ /* 当多个属性名有相同的前缀 那么可以简写一次性完成*/ background: url("https://img2.baidu.com/it/u=167083063,1652780278&fm=253&fmt=auto&app=138&f=JPEG?w=369&h=472") red no-repeat center center; }
