每日测验
"""
今日考题
1.ascii,gbk,utf-8,gbk的区别
2.请用至少两种方式实现m与n值交换m=10,n=5
3.什么是深浅拷贝
4.什么是HTTP协议
5.列举你所知道的HTML标签
"""
昨日内容回顾
-
Web的本质
""" 浏览器 服务端 文件(html文件) """ 课程web方向 前端 django bbs 路飞 -
HTTP协议
""" HTTP协议的由来(sql语句由来) 浏览器只有一个如何兼容N多个服务端 """ # 四大特性 1 基于请求响应 2 基于TCP/IP作用于应用层之上的协议 3 无状态 无论来多少次 都待你如初见 如何做到保存用户状态？？？ cookie、session、token 4 无/短链接 请求来我响应你 之后就没有联系了 长链接:websocket(群聊功能、服务端主动给客户端发送消息) # 请求数据格式 请求首行(HTTP协议的版本，当前请求方式) 请求头(一大堆k，v键值对) 请求体(并不是所有的请求方式都有请求体,get没有post有) # 响应数据格式 响应首行(HTTP协议的版本，响应状态码) 响应头(一大堆k，v键值对) 响应体(浏览器展示给用户看的内容) # URL 统一资源定位符 类似于坐标 # 请求方式 1.get请求 朝别人要数据(也是可以携带参数的，只不过参数不是放在请求体里面的,而是直接放在url的后面) url?username=jason&password=123 2.post请求 朝别人提交数据 # 响应状态码 """用简短的数字来表示一大串提示性信息""" 1XX:服务端已经成功接收到了你的数据 正在处理你可以继续提交 2XX:请求成功(200 OK) 3XX:重定向(你想访问A页面但是给你调到了B页面) 4XX:请求错误(404请求资源不存在、403请求不符合条件) 5XX:服务端内部错误(500) ps:上述的状态码是HTTP协议规定的，其实到了公司之后每个公司还会自己定制自己的状态及提示信息 公司A 1000: 1001: 1002: 公司B 2001: 2002: 2003: ... -
HTML
""" 超文本标记语言(你在学习它的时候只需要记忆每个标签表示什么意思即可) 书写网页的一套标准 除了HTML可以书写前端页面之外 还有XML也可以书写前端页面 odoo框架内部的前端页面全部是用XML书写 公司内部管理软件 ERP """ # 注释 <!--注释--> # 文档结构 <html> <head></head>：都不是给用户看的 主要是给浏览器看的一些配置信息 <body></body>：body书写的所有的内容 都是给用户看的 </html> -
head内常用标签
title 定义网页标题信息 style 内部支持直接书写css代码 link 引入外部css文件 script 内部可以书写js代码并且也可以引入外部js文件 meta 定义网页源信息 keywords description -
body内基本标签
""" h1～h6 标题标签 p段落标签 u i b s hr br """ # 特殊符号 空格 大于 > 小于 < & ® © ¥ -
常用标签
""" div：网页初期划定区域范围 span：划定文本的 """ # a标签 链接标签 <a href='' target=''></a> href 1.可以放一个url点击自动跳转 2.还可以放其他标签的id值 锚点功能 target 控制是否在当前页跳转 _self _blank # img标签 图片标签 <img src='' alt='' title='' height='' width=''/> src 1.可以放图片的路径 本地或者线上 2.还可以放一个url 会自动朝该url提交get请求获取图片数据展示(暂时不考虑) alt 图片加载不出来的时候 展示的提示信息 title 鼠标悬浮在图片上之后展示的提醒信息 height、width 单独调整某一个 另外一个会自动等比例缩放 如果两个都调整了 可能会出现图片的失真 # 标签一般情况下都需要有两个重要的属性 id值 唯一标示 同一个页面不能有重复 class值 类似于类的继承 可以有多个 -
标签的分类
""" 分类1: 双标签 <h1></h1> 单标签 <img/> 分类2: 块儿级标签:独占一行 可以设置长宽 div p 注意：块儿级标签内部可以嵌套任意的行内标签和块儿级标签 但是p标签只能嵌套行内标签 行内标签:自身文本多大就占多大 不能设置长宽 span a img PS：上述的规定只是HTML书写规范 如果你不遵循 不会报错 浏览器会自动帮你解除嵌套关系 """ -
列表标签
ul li 页面上只要是带有规则的排序文字 一般用的都是无序列表 ol li 有序列表 dl dt dd 标题列表
今日内容概要
- 表格标签(只要是展示数据 一般都可以使用表格标签)
- 表单标签(重要:获取前端用户数据发送给后端)
- 偷窥一下后端框架的基本使用(flask)
- css层贴样式表(选择器)
表格标签
jason 123 read
egon 123 dbj
tank 123 hecha
...
<table>
<thead>
<tr> 一个tr就表示一行
<th>username</th> 加粗文本
<td>username</td> 正常文本
</tr>
</thead> 表头(字段信息)
<tbody>
<tr>
<td>jason</td>
<td>123</td>
<td>read</td>
</tr>
</tbody> 表单(数据信息)
</table>
<table border="1"> 加外边宽
<td colspan="2">egon</td> 水平方向占多行
<td rowspan="2">DBJ</td> 垂直方向占多行
# 原生的表格标签很丑 但是后续我们一般都是使用框架封装好的 很好看
表单标签
"""
能够获取前端用户数据(用户输入的、用户选择、用户上传...)基于网络发送给后端服务器
"""
# 写一个注册功能
<form action=""></form> 在该form标签内部书写的获取用户的数据都会被form标签提交到后端
action:控制数据提交的后端路径(给哪个服务端提交数据)
1.什么都不写 默认就是朝当前页面所在的url提交数据
2.写全路径:https://www.baidu.com 朝百度服务端提交
3.只写路径后缀action='/index/'
自动识别出当前服务端的ip和port拼接到前面
host:port/index/
<label for="d1"> 第一种 直接讲input框写在label内
username:<input type="text" id="d1">
</label> 第二种 通过id链接即可 无需嵌套
<label for="d2">password:</label>
<input type="text" id="d2">
ps:input不跟label关联也没有问题
"""
label 和 input都是行内标签
"""
input标签 就类似于前端的变形金刚 通过type属性变形
text:普通文本
password:密文
date:日期
submit:用来触发form表单提交数据的动作
button:就是一个普普通通的按钮 本身没有任何的功能 但是它是最有用的，学完js之后可以给它自定义各种功能
reset:重置内容
radio:单选
默认选中要加checked='checked'
<input type="radio" name="gender" checked='checked'>男
当标签的属性名和属性值一样的时候可以简写
<input type="radio" name="gender" checked>女
checkbox:多选
<input type="checkbox" checked>DBJ
file:获取文件 也可以一次性获取多个
<input type="file" multiple>
hidden:隐藏当前input框
钓鱼网站
select标签 默认是单选 可以加mutiple参数变多选 默认选中selected
<select name="" id="" multiple>
<option value="" selected>新垣结衣</option>
<option value="" selected>斯佳丽</option>
<option value="">明老师</option>
</select>
textarea标签 获取大段文本
<textarea name="" id="" cols="30" rows="10"></textarea>
# 能够触发form表单提交数据的按钮有哪些(一定要记住)
1、<input type="submit" value="注册">
2、<button>点我</button>
# 所有获取用户输入的标签 都应该有name属性
name就类似于字典的key
用户的数据就类似于字典的value
<p>gender:
<input type="radio" name="gender">男
<input type="radio" name="gender">女
<input type="radio" name="gender">其他
</p>
验证form表单提交数据
# 接下来的框架代码无需掌握 看一下效果即可
pip3 install FLASK
form表单默认提交数据的方式 是get请求 数据是直接放在url后面的
http://127.0.0.1:5000/index/?username=sdadasdsda&gender=on
你可以通过method指定提交方式
<form action="http://127.0.0.1:5000/index/" method="post">
针对用户选择的标签 用户不需要输入内容 但是你需要提前给这些标签添加内容value值
<p>gender:
<input type="radio" name="gender" value="male">男
<input type="radio" name="gender" checked value="female">女
<input type="radio" name="gender" value="others">其他
</p>
<p>hobby:
<input type="checkbox" name="hobby" value="basketball">篮球
<input type="checkbox" checked name="hobby" value="football">足球
<input type="checkbox" checked name="hobby" value="doublecolorball">双色球
</p>
<p>province：
<select name="province" id="">
<option value="sh">上海</option>
<option value="bj" selected>北京</option>
<option value="sz">深圳</option>
</select>
</p>
"""
form表单提交文件需要注意
1.method必须是post
2.enctype="multipart/form-data"
enctype类似于数据提交的编码格式
默认是urlencoded 只能够提交普通的文本数据
formdata 就可以支持提交文件数据
"""
<form action="http://127.0.0.1:5000/index/" method="post" enctype="multipart/form-data">
"""下面的代码无需掌握 你只需要关心form表单即可"""
from flask import Flask, request
app = Flask(__name__)
# 当前url既可以支持get请求也可以支持post请求 如果不写默认只能支持get请求
@app.route('/index/',methods=['GET','POST'])
def index():
print(request.form) # 获取form表单提交过来的非文件数据
# ImmutableMultiDict([('username', 'jason'), ('password', '123132131231233'), ('gender', 'on')])
print(request.files) # 获取文件数据
file_obj = request.files.get('myfile.png')
file_obj.save(file_obj.name)
return 'OK'
app.run()
# 针对用户输入的标签。如果你加了value 那就是默认值
<label for="d1">username:<input type="text" id="d1" name="username" value="默认值"></label>
disable 禁用
readonly只读
CSS
层贴样式表:就是给HTML标签添加样式的，让它变的更加的好看
# 注释
/*单行注释*/
/*
多行注释1
多行注释2
多行注释3
*/
通常我们在写css样式的时候也会用注释来划定样式区域(因为HTML代码多所以对呀的css代码也会很多)
/*这是博客园首页的css样式文件*/
/*顶部导航条样式*/
...
/*左侧菜单栏样式*/
...
/*右侧菜单栏样式*/
...
# css的语法结构
选择器 {
属性1:值1;
属性2:值2;
属性3:值3;
属性4:值4;
}
# css的三种引入方式
1.style标签内部直接书写(为了教学演示方便我们用第一种)
<style>
h1 {
color: burlywood;
}
</style>
2.link标签引入外部css文件(最正规的方式 解耦合)
<link rel="stylesheet" href="mycss.css">
3.行内式(一般不用)
<h1 style="color: green">老板好 要上课吗?</h1>
"""
css的学习流程
1.先学如何查找标签
css查找标签的方式你一定要学会
因为后面所有的框架封装的查找语句都是基于css来的
css选择器很简单很好学不要有压力!!!
2.之后再学如何添加样式
"""
CSS选择器
基本选择器
# id选择器
# 类选择器
# 元素/标签选择器
# 通用选择器
<style>
/*id选择器*/
/*#d1 { !*找到id是d1的标签 将文本颜色变成绿黄色*!*/
/* color: greenyellow;*/
/*}*/
/*类选择器*/
/*.c1 { !*找到class值里面包含c1的标签*!*/
/* color: red;*/
/*}*/
/*元素(标签)选择器*/
/*span { !*找到所有的span标签*!*/
/* color: red;*/
/*}*/
/*通用选择器*/
/** { !*将html页面上所有的标签全部找到*!*/
/* color: green;*/
/*}*/
</style>
组合选择器
"""
在前端 我们将标签的嵌套用亲戚关系来表述层级
<div>div
<p>div p</p>
<p>div p
<span>div p span</span>
</p>
<span>span</span>
<span>span</span>
</div>
div里面的p span都是div的后代
p是div的儿子
p里面的span是p的儿子 是div的孙子
div是p的父亲
...
"""
# 后代选择器
# 儿子选择器
# 毗邻选择器
# 弟弟选择器
/*后代选择器*/
/*div span {*/
/* color: red;*/
/*}*/
/*儿子选择器*/
/*div>span {*/
/* color: red;*/
/*}*/
/*毗邻选择器*/
/*div+span { !*同级别紧挨着的下面的第一个*!*/
/* color: aqua;*/
/*}*/
/*弟弟选择器*/
div~span { /*同级别下面所有的span*/
color: red;
}
属性选择器
"""
1 含有某个属性
2 含有某个属性并且有某个值
3 含有某个属性并且有某个值的某个标签
"""
# 属性选择器是以[]作为标志的
/*[username] { !*将所有含有属性名是username的标签背景色改为红色*!*/
/* background-color: red;*/
/*}*/
/*[username='jason'] { !*找到所有属性名是username并且属性值是jason的标签*!*/
/* background-color: orange;*/
/*}*/
/*input[username='jason'] { !*找到所有属性名是username并且属性值是jason的input标签*!*/
/* background-color: wheat;*/
/*}*/
总结
"""
1.form表单所有相关的标签都需要掌握
2.后端框架稍微了解一下 激发兴趣
3.选择器练习一下
"""
作业
今日作业
必做题
1.form表单所有知识点自己敲一遍并截图添加注释保存到手机
2.用html搭建一个注册页面
3.自己演示操作css各种选择器
选做题
1.用web框架体验一下form表单提交数据，完成前后端数据交互
每日测验
"""
今日考题
1.列举字符串,列表，元组，字典每个常用的五个方法
2.描述下列常见内置函数的作用可用代码说明map,zip,filter,sorted,reduce
3.列举你所知道的面相对象中的__开头__结尾的方法及作用，越多越好
4.写出form标签几个关键性的属性及作用
5.列举你所知道的css选择器
"""
昨日内容回顾
-
表格标签
<table> <thead> <tr> 一个tr就是一行 <th></th> 表头里面建议使用th加粗文本 </tr> </thead> 表头 <tbody> <tr> <td></td> 表单里面的建议直接用td即可 </tr> </tbody> 表单 </table> 补充: table有一个border属性可以加一个比较丑的边框 针对tr可以设置rowspan、colspan -
form表单
# 能够获取用户数据并且发送到后端 <form action='' method='' enctype=''></form> """ action 控制数据的提交路径 1.不写默认朝当前页面所在的地址提交 2.写全路径 3.只写后缀 /index/ 能够自动补全当前页面所载的后端服务器ip:port(暂时不考虑) method 控制请求方式 默认是get请求 也可以携带数据 但是数据是直接破解在url后面的 不安全并且大小有限制 url?username=jason&password=123 可以修改为post请求 携带的数据放在请求体里面的 enctype 控制数据的编码方式 默认是urlencoded 只能发送普通的文本 不能发送文件 如果你要发送文件 必须改为 formdata 发送文件必须要修改的两个参数 method = 'post' enctype='...formdata' """ input标签 获取用户数据的(输入 选择 上传...) <input type=''></input> type可以书写的类型 text 普通文本 password 展示密文 date 日期 radio 单选 默认选择可以用checked(属性名和属性值一样的时候就可以简写) checkbox 多选 默认选择可以用checked file 获取文件 了解:可以加multiple 支持传多个文件 submit 触发form表单提交动作 button 什么功能都没有 就是一个普通的按钮 reset 重置按钮 select标签 下拉框 默认是单选 可以加multiple成多选 一个个下拉框选项是一个个的option标签 option标签默认选中可以加selected <select> <option value=''>111</option> <option value=''>222</option> <option value='' selected>333</option> </select> textarea标签 获取大段文本内容 label标签 给input加上对于的注释信息 不写其实也没有关系 input写在lable里面 label的for关联input的id值 可以不嵌套 """ 获取用户数据的标签都应该都name属性 因为你需要给后端发送数据并且需要标明数据到底表示什么 name 字典的key value 字典的value(用户数据) 需要用户选择的标签 你需要自己加上value值 radio checkbox option ps:如果你给获取用户输入的标签加了value值 那么就类似于默认值 """ ps:hidden、disable、readonly、placeholder # 触发form表单提交数据的两种方式 type=submit button按钮 -
flask框架
代码目前你不需要去研究 我们写这个只是为了验证form表单的功能而已 -
css
# 注释 /**/ 由于前端代码都笔记多并且没有什么规律 所以我们都会利用注释来帮助我们维护代码 # 语法结构 选择器 { 属性1:值; 属性2:值; 属性3:值; } # 选择器 1.基本选择器 id选择器 #d1 {} 类选择器 .c1 {} 标签选择器 div {} 通用选择器 * {} p#d1.c1 <p id="d1" class="c1"></p> emmet插件 2.组合选择器 我们将前端标签的嵌套定义为父亲 儿子 后代 兄弟等等关系 后代选择器 div p {} 只要是div内部的p都拿到 儿子选择器 div>p {} 只拿内部第一层级的p 毗邻选择器 div+p {} 紧挨着我的同级下一个 弟弟选择器 div~p {} 同级别下面所有的p 3.属性选择器 [] [username] [username='jason'] input[username='jason'] ps:标签既可以有默认的书写 id class... 还可以有自定义的书写并且支持多个 <p id='d1' username='jason'></p>
今日内容
- 分组与嵌套
- 伪类选择器
- 伪元素选择器
- 选择器优先级
- css属性相关(操作标签样式)
分组与嵌套
div,p,span { /*逗号表示并列关系*/
color: yellow;
}
#d1,.c1,span {
color: orange;
}
伪类选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
background-color: black;
}
a:link { /*访问之前的状态*/
color: red;
}
a:hover { /*需要记住*/
color: aqua; /*鼠标悬浮态*/
}
a:active {
color: black; /*鼠标点击不松开的状态 激活态*/
}
a:visited {
color: darkgray; /*访问之后的状态*/
}
p {
color: darkgray;
font-size: 48px;
}
p:hover {
color: white;
}
input:focus { /*input框获取焦点(鼠标点了input框)*/
background-color: red;
}
</style>
</head>
<body>
<a href="https://www.jd.com/">小轩在不在?</a>
<p>点我有你好看哦</p>
<input type="text">
</body>
</html>
伪元素选择器
p:first-letter {
font-size: 48px;
color: orange;
}
p:before { /*在文本开头 同css添加内容*/
content: '你说的对';
color: blue;
}
p:after {
content: '雨露均沾';
color: orange;
}
ps:before和after通常都是用来清除浮动带来的影响:父标签塌陷的问题(后面马上讲)
选择器优先级
"""
id选择器
类选择器
标签选择器
行内式
"""
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/*
1.选择器相同 书写顺序不同
就近原则:谁离标签更近就听谁的
2.选择器不同 ...
行内 > id选择器 > 类选择器 > 标签选择器
精确度越高越有效
*/
#d1 {
color: aqua;
}
/*.c1 {*/
/* color: orange;*/
/*}*/
/*p {*/
/* color: red;*/
/*}*/
</style>
<!-- <link rel="stylesheet" href="mycss1.css">-->
</head>
<body>
<p id="d1" class="c1" style="color: blue">贤妻果然很识趣，有前途~</p>
</body>
</html>
css属性相关
<style>
p {
background-color: red;
height: 200px;
400px;
}
span {
background-color: green;
height: 200px;
400px;
/*行内标签无法设置长宽 就算你写了 也不会生效*/
}
</style>
字体属性
p {
/*font-family: "Arial Black","微软雅黑","..."; !*第一个不生效就用后面的 写多个备用*!*/
/*font-size: 24px; !*字体大小*!*/
/*font-weight: inherit; !*bolder lighter 100~900 inherit继承父元素的粗细值*!*/
/*color: red; !*直接写颜色英文*!*/
/*color: #ee762e; !*颜色编号*!*/
/*color: rgb(128,23,45); !*三基色 数字 范围0-255*!*/
/*color: rgba(23, 128, 91, 0.9); !*第四个参数是颜色的透明度 范围是0-1*!*/
/*当你想要一些颜色的时候 可以利用现成的工具
1 pycharm提供的取色器
2 qq或者微信截图功能
也可以多软件结合使用
*/
}
文字属性
p {
/*text-align: center; !*居中*!*/
/*text-align: right;*/
/*text-align: left;*/
/*text-align: justify; !*两端对齐*!*/
/*text-decoration: underline;*/
/*text-decoration: overline;*/
/*text-decoration: line-through;*/
/*text-decoration: none;*/
/*在html中 有很多标签渲染出来的样式效果是一样的*/
font-size: 16px;
text-indent: 32px; /*缩进32px*/
}
a {
text-decoration: none; /*主要用于给a标签去掉自带的下划线 需要掌握*/
}
背景图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#d1 {
height: 500px;
background-color: red;
}
#d2 {
height: 500px;
background-color: green;
}
#d3 {
height: 500px;
background-image: url("222.png");
background-attachment: fixed;
}
#d4 {
height: 500px;
background-color: aqua;
}
</style>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
<div id="d4"></div>
</body>
</html>
边框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
p {
background-color: red;
border- 5px;
border-style: solid;
border-color: green;
}
div {
/*border-left- 5px;*/
/*border-left-color: red;*/
/*border-left-style: dotted;*/
/*border-right- 10px;*/
/*border-right-color: greenyellow;*/
/*border-right-style: solid;*/
/*border-top- 15px;*/
/*border-top-color: deeppink;*/
/*border-top-style: dashed;*/
/*border-bottom- 10px;*/
/*border-bottom-color: tomato;*/
/*border-bottom-style: solid;*/
border: 3px solid red; /*三者位置可以随意写*/
}
#d1 {
background-color: greenyellow;
height: 400px;
400px;
border-radius: 50%; /*直接写50%即可 长宽一样就是圆 不一样就是椭圆*/
}
</style>
</head>
<body>
<p>穷人 被diss到了 哭泣.png</p>
<div>妈拉个巴子,妈拉个巴子,妈拉个巴子,妈拉个巴子</div>
<div id="d1"></div>
</body>
</html>
display属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/*#d1 {*/
/* !*display: none; !*隐藏标签不展示到前端页面并且原来的位置也不再占有了 但是还存在于文档上*!*!*/
/* display: inline; !*将标签设置为行内标签的特点*!*/
/*}*/
/*#d2 {*/
/* display: inline;*/
/*}*/
/*#d1 {*/
/* display: block; !*将标签设置成块儿级标签的特点*!*/
/*}*/
/*#d2 {*/
/* display: block;*/
/*}*/
/*#d1 {*/
/* display: inline-block;*/
/*}*/
/*#d2 {*/
/* display: inline-block; !*标签即可以在一行显示又可以设置长宽*!*/
/*}*/
</style>
</head>
<body>
<div style="display: none">div1</div>
<div>div2</div>
<div style="visibility: hidden">单纯的隐藏 位置还在</div>
<div>div4</div>
<!--<div id="d1" style="height: 100px; 100px;background-color: red">01</div>-->
<!--<div id="d2" style="height: 100px; 100px;background-color: greenyellow">02</div>-->
<!--<span id="d1" style="height: 100px; 100px;background-color: red">span</span>-->
<!--<span id="d2" style="height: 100px; 100px;background-color: greenyellow">span</span>-->
<!--<div id="d1" style="height: 100px; 100px;background-color: red">01</div>-->
<!--<div id="d2" style="height: 100px; 100px;background-color: greenyellow">02</div>-->
</body>
</html>
盒子模型
"""
盒子模型
就以快递盒为例
快递盒与快递盒之间的距离(标签与标签之间的距离 margin外边距)
盒子的厚度(标签的边框 border)
盒子里面的物体到盒子的距离(内容到边框的距离 padding内边距)
物体的大小(内容 content)
如果你想要调整标签与标签之间的距离 你就可以调整margin
浏览器会自带8px的margin，一般情况下我们在写页面的时候，上来就会先将body的margin去除
"""
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
margin: 0; /*上下左右全是0
/*margin: 10px 20px; !* 第一个上下 第二个左右*!*/
/*margin: 10px 20px 30px; !*第一个上 第二个左右 第三个下*!*/
/*margin: 10px 20px 30px 40px; !*上 右 下 左*!*/
}
/*p {*/
/* margin-left: 0;*/
/* margin-top: 0;*/
/* margin-right: 0;*/
/* margin-bottom: 0;*/
/*}*/
#d1 {
margin-bottom: 50px;
}
#d2 {
margin-top: 20px; /*不叠加 只取大的*/
}
#dd {
margin: 0 auto; /*只能做到标签的水平居中*/
}
p {
border: 3px solid red;
/*padding-left: 10px;*/
/*padding-top: 20px;*/
/*padding-right: 20px;*/
/*padding-bottom: 50px;*/
/*padding: 10px;*/
/*padding: 10px 20px;*/
/*padding: 10px 20px 30px;*/
/*padding: 10px 20px 30px 40px;*/ /*规律和margin一模一样*/
}
</style>
</head>
<body>
<!-- <p style="border: 1px solid red;" id="d1">ppp</p>-->
<!-- <p style="border: 1px solid orange;" id="d2">ppp</p>-->
<!--<div style="border: 3px solid red;height: 400px; 400px">-->
<!-- <div id='dd' style="border: 1px solid orange;height: 50px; 50px;background-color: blue;"></div>-->
<!--</div>-->
<p>ppp</p>
</body>
</html>
浮动
"""浮动的元素 没有块儿级一说 本身多大浮起来之后就只能占多大"""
只要是设计到页面的布局一般都是用浮动来提前规划好
<style>
body {
margin: 0;
}
#d1 {
height: 200px;
200px;
background-color: red;
float: left; /*浮动 浮到空中往左飘*/
}
#d2 {
height: 200px;
200px;
background-color: greenyellow;
float: right; /*浮动 浮到空中往右飘*/
}
</style>
作业
今日作业
必做题
1.日考题总结并整理到个人博客中
2.从头到位敲一遍今天的css选择器及样式代码
选做题
1.尝试着搭建小米导航条(练习浮动 不要求搭的多好看)
每日测验
"""
今日考题
1.什么是python的垃圾回收机制
2.你所知道的能够实现单例模式的方式有哪些，尝试着手写几个
3.列举python中常用模块及主要功能，越多越好！
4.简述盒子模型
5.什么是浮动，浮动的作用
ps:每日考题一定要自己动手，自己查询出答案，锻炼自己的复习能力，搜商能力
"""
昨日内容回顾
-
分组与嵌套
# 多个选择器可以并列公用一套css样式 div,p,span {} # 不同选择器之间也可以混合使用 .c1,#d1>span {} -
伪类选择器
a:link {} a:hover {} # 需要记忆 a:active {} a:visited {} input:focus {} # input框获取焦点 -
伪元素选择器
p:first-letter {} # 通过css加文本内容 但是无法选中 p:before {} p:after {} # ps:before和after多用于清除浮动带来的负面影响 -
选择器优先级
""" 选择器相同 就近原则 行内 > id > class > 标签 精确度越高说话越硬 """ ps:!important强制让标签采用你的样式 不推荐使用 -
宽和高
width height # 块儿级标签的宽度不修改的情况下默认占浏览器一整行，块儿级标签的高度也是取决于标签内部的文本的高度 但是可以通过css设置 # 行内标签宽度和高度都是有内部文本决定的 行内标签是无法设置长宽的 无效 -
字体属性
# 字体样式 草书 行书 ... font-family # 字体大小 font-size # 字重 font-weight # 文本颜色 1 直接写颜色英文 2 写颜色编号 #4e4e4e 3 写颜色的三基色 rgb(128,128,128) # 范围0-255 4 可以给颜色加透明度 rgba(128,128,128,0.5) # 范围0-1 ps:可以用pycharm 微信 qq等软件快速的获取你想要的颜色 -
文字属性
# 文字对齐 text-align center # 文字装饰 记忆 主要就是用来给a标签去掉自带的下划线 text-decoration none # 首行缩进 text-indent -
背景属性
# 背景色 backgroud-color # 背景图片 background:#fff url() no-repeat center center """ ps:当多个属性名前缀都是相同的情况下 一般都支持简写:只写前缀 """ ps:在调样式的时候 可以借助于浏览器快速的微调，然后讲调整好的参数修改到css样式中 # 背景图片实际应用的案例 -
边框
# 任何一个标签都有上下左右四个方向的边框 border-width border-style border-color 简写 border # 画圆 border-radius:50% -
display属性
# 能够让标签具有自身没有的属性和特征 display none 隐藏 并且原来的位置也没了 inline block inline-block ps:visibility:hidden只隐藏 位置还在 -
css盒子模型
# 1 外边距(标签与标签之间的距离) margin # 2 边框 border # 3 内边距/内填充 padding # 4 内容 content """ body标签默认自带8px的margin margin: 10 上下左右 10 20 上下 左右 10 20 30 上 左右 下 10 20 30 40 上 右 下 左 padding: 10 上下左右 10 20 上下 左右 10 20 30 上 左右 下 10 20 30 40 上 右 下 左 """ -
浮动float
""" 只要是前期页面布局 一般都是用浮动来设计页面 能够让标签脱离正常的文档流漂浮到空中(距离用户更近) 浮动的元素没有块儿级和行内一说 标签多大浮动起来之后就占多大 """
今日内容
- 解决浮动带来的影响
- 溢出属性
- 定位
- 验证浮动和定位是否脱离文档流
- z-index模态框
- 透明度opacity
- 简单博客园首页搭建
- JavaScript编程语言开头
今日内容详细
解决浮动带来的影响
# 浮动带来的影响
会造成父标签塌陷的问题
"""
解决浮动带来的影响 推导步骤
1.自己加一个div设置高度
2.利用clear属性
#d4 {
clear: left; /*该标签的左边(地面和空中)不能有浮动的元素*/
}
3.通用的解决浮动带来的影响方法
在写html页面之前 先提前写好处理浮动带来的影响的 css代码
.clearfix:after {
content: '';
display: block;
clear:both;
}
之后只要标签出现了塌陷的问题就给该塌陷的标签加一个clearfix属性即可
上述的解决方式是通用的 到哪都一样 并且名字就叫clearfix
"""
溢出属性
p {
height: 100px;
50px;
border: 3px solid red;
/*overflow: visible; !*默认就是可见 溢出还是展示*!*/
/*overflow: hidden; !*溢出部分直接隐藏*!*/
/*overflow: scroll; !*设置成上下滚动条的形式*!*/
/*overflow: auto;*/
}
定位
-
静态
所有的标签默认都是静态的static，无法改变位置
-
相对定位(了解)
相对于标签原来的位置做移动relative
-
绝对定位(常用)
相对于已经定位过的父标签做移动(如果没有父标签那么就以body为参照)
eg:小米网站购物车
当你不知道页面其他标签的位置和参数，只给了你一个父标签的参数，让你基于该标签左定位
-
固定定位(常用)
相对于浏览器窗口固定在某个位置
eg:右侧小广告
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
margin: 0;
}
#d1 {
height: 100px;
100px;
background-color: red;
left: 50px; /*从左往右 如果是负数 方向则相反*/
top: 50px; /*从上往下 如果是负数 方向则相反*/
/*position: static; !*默认是static无法修改位置*!*/
position: relative;
/*相对定位
标签由static变为relative它的性质就从原来没有定位的标签变成了已经定位过的标签
虽然你哪怕没有动 但是你的性质也已经改变了
*/
}
#d2 {
height: 100px;
200px;
background-color: red;
position: relative; /*已经定位过了*/
}
#d3 {
height: 200px;
400px;
background-color: yellowgreen;
position: absolute;
left: 200px;
top: 100px;
}
#d4 {
position: fixed; /*写了fixed之后 定位就是依据浏览器窗口*/
bottom: 10px;
right: 20px;
height: 50px;
100px;
background-color: white;
border: 3px solid black;
}
</style>
</head>
<body>
<!-- <div id="d1"></div>-->
<!--<div id="d2">-->
<!-- <div id="d3"></div>-->
<!--</div>-->
<div style="height: 500px;background-color: red"></div>
<div style="height: 500px;background-color: greenyellow"></div>
<div style="height: 500px;background-color: blue"></div>
<div id="d4">回到顶部</div>
</body>
</html>
ps:浏览器是优先展示文本内容的
验证浮动和定位是否脱离文档流(原来的位置是否还保留)
"""
浮动
相对定位
绝对定位
固定定位
"""
# 不脱离文档流
1.相对定位
# 脱离文档流
1.浮动
2.绝对定位
3.固定定位
<!--<div style="height: 100px; 200px;background-color: red;position: relative;left: 500px"></div>-->
<!--<div style="height: 100px; 200px;background-color: greenyellow"></div>-->
<!--<div style="height: 100px; 200px;background-color: red;"></div>-->
<!--<div style="height: 100px; 200px;background-color: greenyellow;position: absolute;left: 500px"></div>-->
<!--当没有父标签做到位 就参照与body-->
<!--<div style="height: 100px; 200px;background-color: blue;"></div>-->
<div style="height: 100px; 200px;background-color: red;"></div>
<div style="height: 100px; 200px;background-color: greenyellow;position: fixed;bottom: 10px;right: 20px"></div>
<div style="height: 100px; 200px;background-color: blue;"></div>
z-index模态框
eg:百度登陆页面 其实是三层结构
1.最底部是正常内容(z=0) 最远的
2.黑色的透明区(z=99) 中间层
3.白色的注册区域(z=100) 离用户最近
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
margin: 0;
}
.cover {
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.5);
z-index: 99;
}
.modal {
background-color: white;
height: 200px;
400px;
position: fixed;
left: 50%;
top: 50%;
z-index: 100;
margin-left: -200px;
margin-top: -100px;
}
</style>
</head>
<body>
<div>这是最底层的页面内容</div>
<div class="cover"></div>
<div class="modal">
<h1>登陆页面</h1>
<p>username:<input type="text"></p>
<p>password:<input type="text"></p>
<button>点我点我~</button>
</div>
</body>
</html>
透明度opacity
# 它不单单可以修改颜色的透明度还同时修改字体的透明度
rgba只能影响颜色
而opacity可以修改颜色和字体
opacity: 0.5;
作业书写
"""
当你在设计页面的时候 先用div划分区域，之后填写基本内容，最后再调节样式
在书写html代码的时候 class、id等属性最好都起的见名知意
"""
博客园页面搭建
自己课下尝试着搭建，不要照搬照套我的
Js简介
1.js也是一门编程语言 它也是可以写后端代码的
用js一统天下 前后端都可以写
nodejs 支持js代码跑在后端服务器上
然而并不能 想的太天真了!!!
2.js跟java一毛钱关系都没有，纯粹是为了蹭当时java的热度
ECMAScript和JavaScript的关系
因此ECMAScript和JavaScript的关系是，前者是后者的规格，后者是前者的一种实现。
JS版本
主要还是用的5.1和6.0
JavaScript 是脚本语言
JavaScript 是一种轻量级的编程语言。
JavaScript 是可插入 HTML 页面的编程代码。
JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。
JavaScript 很容易学习
# js的注释
"""
// 单行注释
/*
多行注释1
多行注释2
多行注释3
*/
"""
# 两种引入方式
1.script标签内部直接书写js代码
2.script标签src属性引入外部js代码
# js语法结构
js是以分号作为语句的结束
但是如果你不写分号，问题也不大 也能够正常执行 但是它就相当于没有结束符
js学习流程
- 变量
- 数据类型
- 流程控制
- 函数
- 对象
- 内置方法/模块
变量
"""
在js中 首次定义一个变量名的时候需要用关键字声明
1.关键字var
var name='jason'
2.es6推出的新语法
let name='jason'
如果你的编辑器支持的版本是5.1那么无法使用let
如果是6.0则向下兼容 var let
"""
# var与let的区别
n = 10
for n in range(5):
print(n)
print(n)
# var 5 let 10
"""
var在for循环里面定义也会影响到全局
let在局部定义只会在局部生效
"""
常量
# python中没有真正意义上的常量 默认全大写就是表示常量
# js中是有真正意义上的常量的
const pi = 3.14
作业
今日作业
必做题
1.整理今日内容至博客
2.博客园首页搭建(独立完成)
3.预习js内容:https://www.cnblogs.com/Dominic-Ji/p/9111021.html