43 day of python
web的三大标准
(1) html 结构标准
(2) css 表现(样式标准)
(3) js 行为标准
标准的分类：
公共的属性：
id：
身份证 一个页面中只有一个唯一的id
<p id = 'aaa'>文字1</p> <p class = 'aaa'>文字2</p> <p class = 'aaa'>文字2</p> <p class = 'aaa'>文字2</p>
css选择器：
*{
通配符选择器
}
div{
}
id选择器
#aaa{
color:red
}
类选择器
.aaa{
}
class:
title:***
鼠标悬浮到内容显示的标题
(1)行内标签
a
属性
href:链接网络资源或者本地资源地址
target:
_self:默认的再本页打开网址
_blank:在空白页面打开新的网址
span:
strong:
em
i
img:行内块
属性:
src:链接的图片资源(本地图片资源或者cdn)
alt:图片加载失败的时候显示的文本
(2)块级标签
div:
divsion 分割
作用:分页面中的每块区域
p:
段落标签:
p标签内部职能房行内(span,a,img,input)的标签，不能放块标签
ul:
它的孩子只能是li
li
ol
dl
dt
dd
特点：
(1)行内标签：
1.在一行内显示
2.不能设置宽高，默认是字体的大小
(2)块级标签：
1.独占一行
2.可以设置宽高，如果不设置宽，默认是父亲的100%的高度
(3)行内块标签：（img，input）
1.在一行内显示
2.可以设置宽高
标签嵌套问题
今日内容：
(1)table表格标签
table：设置border：'1'属性，单元格带边框的效果
stytle="border-collapse:collapse;"表格中很细表格边线的制作：
tr:每行
td:每行单元格的数据
(2)form表单标签:
action:提交的地址
method:提交的方式
get:不安全
post:相对安全
input表单控件:
type:
text:明文显示用户输入的数据
password 密文显示用户输入的数据
radio单选按钮
checkbox：复选框
file：上传文件所用
submit：功能固定化，负责将表中的表单控件提交给服务器
value：控件的值既要提交给服务器的数据
name：控件的名称，服务端用
disabled：该属性只要出现在标签中，表示的是禁用该控件
注意：如果有文件需要提交给服务器，method必须为POST，enctype必须为multipart/form-data
状态码简单介绍：
200以上：表示成功请求的状态码
300以上：缓存
400以上：404 网页加载失败 前端出错
500以上：后端逻辑出错，后端业务逻辑出错
(3)css的作用：修饰页面的结构，让页面好看
(1)css的引入方式
1.行内样式
<div style='color:red;'></div>
2.内接样式
3.外接样式
外接式
导入式
(2)基础选择器
id选择器：
#app
类选择器：
.app
它选择的是共性，而不是特性
标签选择器：
div
通配符选择器
总结：
不要去试图用一个类将我们的页面写完。这个标签需要携带多个类，共同设置样式每个类要
尽可能的小，有公共的概念，能够让更多的标签使用玩好了类 就等于玩好了css中的1/2
到底使用id还是用class？
答案：尽可能的用class。除非一些特殊情况可以用id
原因：id一般是用在js的。也就是说 js是通过id来获取到标签
(3)高级选择器
后代选择器：
选中的是儿子 孙子......
子代选择器
并集选择器
交集选择器
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <table border='1' style="border-collapse:collapse;" width="1000px" height='500px'> <tr> <td width="100px" height="100px"> <span>id</span> </td> <td>姓名</td> <td>年龄</td> <td>爱好</td> </tr> <tr> <td>1</td> <td>浩旭</td> <td>梁颖</td> <td>梁爽</td> </tr> <tr> <td>2</td> <td>浩旭</td> <td>梁颖</td> <td>梁爽</td> </tr> <tr> <td>2</td> <td>浩旭</td> <td>梁颖</td> <td>梁爽</td> </tr> </table> <table border="1"> <caption>人物介绍</caption> <!-- thead tbody tfooter 方法 --> <tbody> <tr> <td>小马哥</td> <th>18</th> <td>男</td> <td rowspan="3">中国</td> </tr> </tbody> <tfoot> <tr> <td>小岳岳</td> <td>45</td> <td>男</td> </tr> </tfoot> <thead> <tr> <td>邓紫棋</td> <td>23</td> <td>女</td> </tr> </thead> </table> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <style> #re{ width: 100px; height: 50px; } </style> </head> <body> <!-- form cs s: 127.0.0.1:8800 c:访问这个链接127.0.0.1:8800 b:访问这个链接地址:127.0.0.1:8800 --> <!-- 交互:与后端进行交互 action:你要提交的网址:127.0.0.1:8800 method:方式 交互提交操作方式有两种: get和post --> <!-- 如果action为空 那么默认是打开页面的地址 缺点:form只能做提交操作,from表单不能接收数据, --> <!-- https://www.baidu.com/?username=alex&password=123&gender=male --> <!-- 如果是文件提交 method必须为post enctype="multipart/form-data"--> <form action="https://www.baidu.com" method='get'> <!-- 对于form表单 如果是提交操作,那么表单控件中name属性 会被封装成url上key vlaue属性会被封装成url上value --> <!-- label中的for属性一定跟下面的某个input中id属性值一样 --> <label for="user">用户名:</label> <input type="text" name = 'username' value = '' id="user" /> <br> 密码: <input type="password" name = 'password'/> <br> 性别：<input type="radio" name="gender" value="male" >男 <input type="radio" name="gender" value="female" checked>女<br> 爱好：<input type="checkbox" name="love" value="eat">吃饭 <input type="checkbox" name="love" value="sleep">睡觉 <input type="checkbox" name="love" value="bat">打豆豆 <!-- 如果是form表单提交,type一定是submit --> <br> <input type="submit" value="登录"> <input type="button" value="登录2"> <button type="submit" disabled>注册</button> <input type="reset" value="重置按钮" id="re"><br> <input type="file" value="文件选择框"> <select multiple="" size="3"> <option>小学</option> <option>初中</option> <option>高中</option> <option>大学</option> <option>研究生</option> </select> <textarea name="" id="" cols="50" rows="20"></textarea> </form> <form> <fieldset> <legend>账号信息</legend> 姓名：<input value="呵呵" >逗比<br> 密码：<input type="password" value="pwd" size="50"><br> </fieldset> <fieldset> <legend>其他信息</legend> 性别：<input type="radio" name="gender" value="male" checked="">男 <input type="radio" name="gender" value="female" >女<br> 爱好：<input type="checkbox" name="love" value="eat">吃饭 <input type="checkbox" name="love" value="sleep">睡觉 <input type="checkbox" name="love" value="bat">打豆豆 </fieldset> </form> </body> </html>
css的三种引入方式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="./index.css"> <!-- 内接方式 --> <style type="text/css"> h3{ color: yellow; font-size: 14px; } </style> <!-- <style type="text/css"> @import url(./index.css); </style> --> </head> <body> <!-- 优先级: 行内的优先级 它的优先级最大 --> <p style="color: red;">我是一个文字内容</p> <h3>我是h3标题</h3> <h4>我是h4标题</h4> </body> </html>
基础选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> /*选中body中相关标签*/ /*#box{ color: red; }*/ .box{ color: red; } .active{ font-size: 30px; } .ttt{ background-color: green; text-decoration: underline; } .lv{ color: green; } .bg{ font-size: 30px } .u{ text-decoration: underline; } .lv:hover{ color: red; font-size: 32px; } .box:hover{ color: yellow; } div{ color: red; } .ppp{ color: purple; } </style> </head> <body> <!-- --> <!-- <p class="box active ttt" id="box" >猜猜我的颜色</p> --> <!-- <div class="box"> alex </div> --> <!-- 段落1:绿色 30px 段落2:绿色 下划线 段落3: 30px 下划线 --> <p class="lv bg">段落1</p> <p class="lv u">段落2</p> <p class="bg u">段落3</p> <div id="a"> <div id="b"> <div> <div> <div> <div> <div class="ppp"> 哈哈哈哈 </div> </div> </div> </div> </div> </div> </div> </body> </html>
高级选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> /*后代选择器的用法*/ /*.box .list{ color: red; } .box a{ color: yellow; } /*.box .list a img 绝对选中img标签*/ /*.box img{ width: 200px; }*/ /*子代选择器*/ div > p{ color: yellow; background-color: red; } </style> </head> <body> <!-- <ul class="box"> <li class="list"> <a href="#"> <img src="../day45/timg.jpg" alt="adadad"> </a> </li> <li> 李四 </li> <li>王二麻</li> </ul> --> <div> <p>哈哈哈</p> <ul> <li> <p>嘿嘿嘿</p> </li> </ul> </div> </body> </html>
h3{
color: red;
}
