快速上手HTML和CSS
什么是前端web？
所有直接跟用户交互的界面都可以称为前端
web服务，基于bs模式(即browser/server)，每次请求结束都会关闭request
1、HTTP协议(HyoerText Transport Protocol)
1.1 特点
基于TCP/IP协议作用在应用层上的协议
基于请求/响应模式
无状态协议（不保存客户端发过来的信息）
无连接（数据传输完成后，会断开连接）
1.2 URL
统一资源定位符：协议名://域名:端口号/路径。示例：http://www.jd.com:80/index.html
1.3 请求协议
1. 请求首行 GET/HTTP/1.1
2. 部分请求头信息：
1 /*======================== 2 Host: 127.0.0.1: 8000 3 Connection: keep-alive(常连接，保持时间大概3000ms，之后自动断开) 4 User-Agent: ......(操作系统型号和browser版本) 5 Accept: * / * (任意数据类型)（text/html） 6 Accept-encoding: gzip, default, sdch,br 7 Accept_language: zh-CN(简体),zh; q=0.8(权重) 8 Referer: http://127.0.0.1:8000(引用网址) 9 Cookie: （容器，类似于字典，保存用户信息） 10 ========================*/
3. 空行
4. 请求体（请求数据，get没有）
1.4 请求方式
GET：(http默认方式)
特点：
1. 没有请求体
2. 数据在1k以内(现在可以超过这个数值)
3. GET请求数据会暴露在浏览器的地址栏中(使用"?"隔开网址，使用"&"并联数据)
常用操作：
1. 直接输入URL
2. 点击页面的超链接
3. 提交表单默认是GET，但可设置POST
POST：
特点：
1. 数据不放在地址栏
2. 数据没有大小限制
3. 有请求体
4. 请求体中存在中文，得使用URL编码，即enctype="multipart/form-data"
1.5 响应协议
1. 响应首行 HTTP/1.1
2. 部分响应头信息
1 /*======================= 2 Request URL: http://127.0.0.1:8000/ 3 Request Method: GET 4 status Code: 200 OK 5 Remote Adress: 127.0.0.1:8000 6 Content-Type: text/html; charset=utf-8 7 Data: wed, 26 oct 2018 06:48:50GMT 8 server: WSGIServer10.2(服务器)(一般nigex, apache) 9 Content-Length: 响应体长度 10 set-Cookie: 设置cookie 11 =======================*/
3. 空格(\r\n\r\n)
4. 响应体（<html>.......</html>）
1.6 http状态码
10x 服务器已经接收了你的请求，正在处理，你可以继续提交数据
20x 请求成功
30x 内部重定向
40x 客户端错误状态码
50x 服务器错误状态码
2、HTML(HyperText Markup Language)
渲染顺序：从上到下，从左到右
静态网页文件扩展名：.html或.htm
2.1 文档声明
声明文档得解析类型，避免怪异模式
语句：<!DOCTYPE html>
说明：
1. BackCompat：怪异模式，使用自己怪异模式渲染
2. CSSCompat: 标准模式，使用W3C标准解析渲染页面
2.2 头标签<head></head>
<title></title>: 页面的标题
<style></style: 定义标签CSS样式,
<script></script>: 定义js或引用js文件
<link />: 引用css文件或网站图标
<link rel="icon" href="http://127.0.0.1:5000/img/fish.jpg"/>
<link rel='stylesheet' href ='style.css' />
<meta />: 定义网页信息
1. http-equiv属性：相当于http的文件头作用， <!--指定文档的编码类型(需要知道)--> <meta http-equiv="content-Type" charset=UTF8"> <!--2秒后跳转到对应的网址，注意引号(了解)--> <meta http-equiv="refresh" content="2;URL=https://www.baidu.com"> 2. name属性，主要描述网页 <meta name="keywords" content="meta总结,html meta,meta属性,meta跳转"> <meta name="description" content="知识就是力量，代码改变世界">
2.3 body标签
2.3.1 基本标签
2.3.2 特殊标签
2.3.3 常用标签
2.3.4 列表标签
2.3.5 表格标签
<table> <thead> <tr> <th>name</th> <th>age</th> <th>hobby</th> </tr> </thead> <tbody> <tr> <td>sun </td> <td>23</td> <td>sleep</td> </tr> <tr> <td>aaa</td> <td>22</td> <td>play</td> </tr> </tbody> </table>
<!--
属性样式：
border='2' 外边框宽度
cellspacing='10'; 外边距设为10
cellpadding='10', 内边距设为10
rowspan ='2', l两个行合并
colspan=‘2'; 两个列合并
text-align: center; 字体居中
-->
2.3.6 form表单
强调： form表单为了提交数据，每一个标签必须要有name属性，
input：输入框
type: text 文本
submit 提交(只有sumbit才能提交)
password 密文
date 日期
radio 单选框，需要name属性，设置默认checked='checked'
checkbox 多选框 设置默认checked(简写)
file 文件（提交文件必须是post格式并且enctype="multipart/form-data"）
reset 重置 清空数据
button 按钮 可用来绑定事件
select：下拉框 默认单选，设置multiple属性指定为多选
option 每一个项，属性有value
textarea：文本框，可以设置多行
label 为input 元素定义标注<label><input></label>
form表单的属性：
action：提交数据，不写默认往当前url地址提交
method: get, post, 默认是get
enctype="multipart/form-data" 指定参数提交的格式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>我是一条酸菜鱼 又酸又菜又多余</title> <link rel="icon" href="http://qqface.knowsky.com/img/2013051221441215847.gif"/> <style> *{ margin: 0; } div{ position: relative; top: 100px; margin: 0 auto; width: 600px; height: 500px; background: #e8e8e8; } p{ background: lightblue; width: 300px; height: 40px; padding: 3px; text-align: left; line-height: 40px; margin: 0 auto; } label{ display: inline-block; height: 40px; margin-left: 6px; } .textinput{ display: inline-block; width: 230px; height: 30px; font-size: 20px; } .gender{ text-align: center; display: inline-block; width: 70px; } .hobby{ text-align: center; display: inline-block; width: 50px; } #submit{ margin: 0 110px; display: inline-block; height: 30px; width: 70px; font-size: 18px; } </style> </head> <body> <div> <form action="" method="post" enctype="multipart/form-data"> <p> <label for="username"> 姓 名: <input type="text" class="textinput" id="username" name="username" > </label> </p> <p> <label for="pwd"> 密 码: <input type="password" class="textinput" id="pwd" name="pwd" > </label> </p> <p> <label for="date"> 生 日: <input type="date" class="textinput" id="date" name="date" > </label> </p> <p> <label> 性 别: <span class="gender"> <input type="radio" name="gender" value="1">男 </span> <span class="gender"> <input type="radio" name="gender" value="2">女 </span> </label> </p> <p> <label> 爱 好: <span class="hobby"> <input type="checkbox" name="hobby" value="1" checked>吃 </span> <span class="hobby"> <input type="checkbox" name="hobby" value="2">喝 </span> <span class="hobby"> <input type="checkbox" name="hobby" value="3">睡 </span> <span class="hobby"> <input type="checkbox" name="hobby" value="3">学习 </span> </label> </p> <p> 省 份: <select class="textinput" name="province" > <option value="1">安徽省</option> <option value="2">上海市</option> <option value="3">江苏省</option> <option value="4">河南省</option> <option value="5">浙江省</option> </select> </p> <p> <input id="submit" type="submit" value="提交"> </p> </form> </div> </body> </html>
# 初使flask from flask import Flask,request,redirect # 实例化flask对象 app = Flask(__name__) # 定义项目路由 @app.route('/reg',methods=['GET','POST']) def reg(): print(request.form) print(request.files) obj= request.files['myfile'] obj.save('b.txt') return '收到了' @app.route('/home') def home(): return '这是主页' @app.route('/index') def index(): return redirect('/home') if __name__ == '__main__': # 运行flask项目 app.run() # 调试时，关闭浏览器的自动加载缓存 调试界面的settings，在Disable cache(while DevTools is open)复选框打勾
2.3.7 标签的分类
1. 按照使用方式分类
块级标签（独占一行）
块级标签可以嵌套块级标签和内联标签
p标签不能嵌套任何块级标签，只能嵌套内联标签
内联标签（自身文本多大就占多大）
行内标签肯定不能嵌套块级标签，只能嵌套行内标签
行内标签无法设置长宽
2. 按照书写格式分类：
双标签 <h1></h1>
自闭和标签 <img />
3、CSS(Cascading Style Sheets)
注释：/**/
语法结构：
选择器{属性:样式;属性:样式;}
四种方式：
1. 行内式
<p style="color: red; background-color: green">hello</p>
2. 嵌入式
<head> <style> p{ color: red; background-color: green; } </style> </head>
3. 链接式
<link href="mystyle.css" rel="stylesheet" type="text/css/">
4. 导入式（先标签后样式）
<style>@import"mystyle.css"</style>
3.1 选择器
3.2 伪类选择器
anchor伪类：专门用于控制链接的显示效果
a: link {color: green;} 没有接触过的链接
a: hover{color: red;} 悬浮链接上
a: active{color: black;} 按下鼠标时的状态
a: visited {color: blue;} 访问过的链接
点进去input标签内
input:focus {background-color: #eee;}
悬浮于div, p变色，只能用于控制后代标签
div:hover p{background-color: green;}
3.3 伪元素选择器
first-letter: 常用的给首字母设置特殊样式 p:first-letter { font-size: 48px; color: red; } before： 在标签内的前面可以添加内容 p:before { content:"*"; color:red; } after： 在标签内的最后后可以添加内容 p:before { content:"？"; color:red; }
3.4 选择器优先级
3.5 CSS 属性
3.5.1 text 文本
1. color
十六进制 #ff0000;
颜色名称 red
一个RGB的值，RGB(255,0,0),
RGBA(255,0,0,0.3)第四个值为alpha，指定色彩的透明度，范围0~1，对应的属性是opacity:0~1,
2. width和height: 元素的高度和宽度
3. font-family
如果浏览器不支持第一个字体，则尝试下一个字体，浏览器会使用它可识别的第一个值。
body {font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif}
4. font-size: 字体大小(inherit表示继承父元素的字体大小值)
5. font-weight: 字重
normal 默认值，标准粗细
bold 粗体
bolder 更粗
lighter 更细
100~900 设置具体粗细，400=normal,700=bold
inherit 继承父元素字体的粗细
6. font-style: oblique 斜体
7. text-align: 文字对齐方式
left 左对齐，默认值
right 右对齐
center 居中对齐
justify 两端对齐
8. line-hight: 文本行高
9. vertical-align: 垂直对齐方式，只适用于行内元素，对块级元素无效。
10. text_decoration, 给文字添加特殊效果
none 默认，定义标准的文本
underline 定义文本下的一条线
overline 定义文本的一条线
line-through 定义穿过文本的一条线
inherit 继承父元素的text-decoration属性的值
11. text-transform
capitalize 首字母大写
uppercase 大写
lowercase 小写
12. text-indent: 首行缩进
13. letter-spacing: 字母边距
14. word-spacing: 单词边距
3.5.2 背景属性
背景颜色：background-color: green;
导入背景图片：background-image: url("");
背景是否重复显示： background-repeat: no-repeat; /*repeat, repeat-x,repeat-y*/
背景图片相对于左边和顶部的位置：background-position: center center;/*right top, 或 20px 20px*/
以上可以简写成一行：background: green url("") no-repeat left top;
固定图片不动：background-attachment: fixed;
3.5.3 边框
border-width: 3px;
border-style: solid;
border-color: red;
简写：border: 3px, solid, red;
可以设置单边框：border-top-color: red;
style样式：
none 无边框
dotted 点状虚线边框
dashed 矩形虚线边框
solid 实线边框
double 双实线边框
border-radius: 可以设置四个值，左上角，右上角，右下角，左下角
实现圆角边框的效果：border-radius: 50%;
3.5.4 列表属性
list-style-type: 设置列表项标志类型
list-style-image: 将图像设置为列表项标志，url("")
list-style-position: 设置列表项标志的位置
list-style:简写
disc 实心圆
circle 空心圆
square 正方形
none 无
lower/upper-roman: 罗马数字
lower/upper-alpha: 字母
lower/upper-latin: 字母
lower-greek: 希腊字符
3.5.5 display 属性
none 不显示，且隐藏的元素不会占任何空间
inline 按行内元素显示，
block 按块级元素显示
inline-block 使元素同时具有行内元素和块级元素的特点
类似于图片之间的间隙小bug，可以通过word-spacing: -5px解决
float;left有类似于inline-block相似的特性
display和visibility的区别：
visibility：hidden；可以隐藏某个元素，且隐藏的元素仍占空间
display: none: 可以隐藏某个元素，且隐藏的元素不占有空间
3.6 CSS 盒子模型
属性：
margin：用于控制元素和元素之间的距离(顺序：上右下左)，边距存在冲突时取最大值
padding: 用于控制内容与边框之间的距离
border: 围绕在内边距和内容的边框
content: 盒子的内容，显示文本和图像
强调：
1. body标签有外边距，在Google上是8px
2. margin collapse(边界塌陷或边界重叠)
1. 兄弟div标签之间，上下两个div的margin，只取上下两者margin最大为显示值
2. 父子div之间，如果父级没有border,padding,inlinecontent,子级div的 margin会一直向上查找，
直到某个标签的border,padding,inlinecontent的其中一个，然后按照div进行margin
解决办法： 在父类中添加属性：overflow：hidden；
3.7 浮动float
文档流：指元素排版布局过程中，元素会自动从左到右从上到下的流式排列。
脱离文档流：就是把普通的元素拿走，其它盒子定位时，会当作脱离文档流的元素不存在而进行定位。
注意：给标签设置浮动后，就可以对标签设置宽和高
规则：假设A是浮动的，A的上一个元素是浮动的，A紧跟其后(如果这行放不下，A元素被挤到下一行)
3.8 overflow
解决父级塌陷问题：
产生原因：父元素未设置样式，子元素设置了浮动，脱离文档流导致父类没有被撑开。
解决办法：
1. 父元素添加新的子元素固定高度<div style="height:100px"></div>
2. 使用after，把clearfix加到父元素的class值里面
.clearfix{content: ""; display: block; clear: both;}
3. 给父元素添加样式，overflow: hidden
原理：如果没有明确设定包含容器高度的情况下，它要计算内容的全部高度，才能确定从什么位置开始hidden，
这样浮动元素的高度就会被计算出来，这样包含容器就会撑开。
3.9 定位position
1. static
默认值，无定位
2. relative(未脱离文档流)
相对于该元素在文档中的原始位置，但元素还占有原来位置
主要用法：方便绝对定位找到参照物
3. absolute(脱离文档流)
相对于最近定位的祖先元素定位。
如果没有已定位祖先元素，则根据body定位
4. fixed(脱离文档流)
以窗口为参考点定位
强调：
1. 对于定位，出第一个外，都可以使用top, right, bottom,left，z-index来设置位置属性
2. z-index用法：
1.没有单位， 数值越大，越靠近用户，数值大的压盖住数值小的
2. 只有定位元素才有z-index，浮动元素没有
3. 从父现象，即便自己设的值再大，也会以父元素的z-index为准
浙公网安备 33010602011771号