属性 重要的
<!DOCTYPE html> 告诉浏览器 以那种规范解析 最标准的规范解析 两种模式 怪异和标准
<html lang="en">
head 是头标签 存的网页上看不到的 跟浏览器解析有关系
head标签：
mata http-equiv"refresh" content="2;url=''"
name
name="keywords" content="" 关键词 可以被百度搜索到
name=description content='' 被搜索出来的框里的描述
content:
* <meta http-equiv="refresh" content="2;url=//www.baidu.com"> 2秒钟之后 跳转别的页面 不加url就刷新的功能
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content=""> 支持ie浏览器 对别的浏览器 没有意义
*<title>Title</title> 显示在分页上 也就是本网页的标签页
<link rel="icon" href="//www.jd.com/favicon.ico" > 京东的标签页面小图标
*<link rel="icon" href=""> 标签页 显示图片
body 是网页上能看到的 基本上内容都是写在这里
body：
<br/> 换行标签 不隔行
内联标签：in-lion
<span> 文本控制 文本有多少 在文本长度控制
<b></b>>加粗
<em></em> 变成斜体
<strike></strike> 去除标签
<del></del> 删除
2<sub>3</sub> 上角标
2<sup>3</sup> 下角标
<meta http-equiv="refresh" content="5;//www.baidu.com"> 跳转到百度
<a><a> 超连接标签 锚
超连接标签:
<a href="http://www.baidu.com">baidu</a> 超链接 本页面跳转
<a href="http://www.jd.com" target="_blank">baidu</a> 超链接 新建页跳转 并显示文本内容
<a href="http://www.jd.com" target="_blank" title="hehe">baidu</a> 新建页跳转 title并显示文本内容
锚:
<head>
<style>
#div1{
height: 100px;
}
#div2
#div3
</style>
<body>
<div id="div1"></div> 对应 head里#div1
背板的颜色及像素 找到某个标签 并进行渲染
<a href="#div1">第一章</a> 必须加个#
<a href="#div2">第二章</a>
<a href="#div3">第三章</a>
<div id="div1">第一章</div>
<div id="div2">第二章</div>
<div id="div3">第三章</div>
这里 a 标签的锚的用法 和一些css的用法
块级标签 block 各行功能
<div> 空白标签 块级标签 一行都被占用
<h1> 标题
<h2>
<h3>
<h4>
<h5>
<h6> 从1-6 从大到小
<p> 段落标签 隔一行
自闭和标签
插入图片
<img src="" width="200ps" height="200ps" alt="hehe" title="大美女"> 单开一个线程处理img标签
调整大小 alt 加载不出来显示hehe title点一下显示
特殊符号 随用随查
<； 小于
>； 大于
list标签：
<ul>无序列表
<li>111</li>
<li>111</li>
<li>111</li>
<li>111</li>
</ul>
<ol>有序列表
<li>111</li>
<li>222</li>
<li>333</li>
</ol>
<dl>类似小说 章节 内容
<dt>第一章</dt>
<dd>1111</dd>
<dd>1111</dd>
<dd>1111</dd>
<dd>1111</dd>
</dl>
表单
用于给后台传数据用的
name属性是给后台看的
<input> 是自闭和标签 命名 姓名：<input>
type text是文本输入
<from action="127.0.0.1:8090/index" method="get"提交数据的方式> 给后台提供数据
<p>姓名：<input type="text" name="username"></p> {username:"输入进来的"}
<p>性别：<input type="text" name="username"></p>
<p>密码：<input type="password" name="paword"></p> 隐藏文本
<p><input type="submit" value="press"></p> 登录
这个value跟其他的不一样 这个就是重命名
<p><input type="button" value="press"></p> 没有意义 配合JS使用
<p>爱好：篮球<input type="checkbox" value="press" name="hobby" value="1"></p> 可以点击√ 复选
多选字典形式发送给后台
<p>男<input type="radio" name="sex" value="0"></p> 单选
<p>女<input type="radio" name="sex" value="1"></p>
radio功能是互斥只能有一个 name属性是给后台看的
<p><input type="file" value="文件名"></p> 上传文件
html调用操作系统系统操作的
<input type="reset"></p> 重置 清空上面的内容
表 table
<table>
<tr> 行标签
<th>Telephone</th> 表头标签 也就是比如 序号
<td>555 77 854</td> 内容标签 也就是 1
</tr>
示例1：跨行操作
<table border="1">
<tr>
<th rowspan="2">1111</th>
<td>22222</td>
</tr>
<tr>
<td>22222</td>
<td>22222</td>
</tr>
</table>
示例2：跨列
<table border="1">
<tr>
<th colspan="2">1111</th>
</tr>
<tr>
<td>22222</td>
<td>22222</td>
<td>22222</td>
</tr>
</table>
<table cellspacing cellpadding>
</from>
添加路径 编码方式
<from action="xiaohu" method="post" enctype="muletipart/form-data">
for i in req.files:
obj = req.files.get(i，none) 要用get 这个方法不会报错 没拿到 就返回个none
file_name = obj.name
f = open(file_name,'wb')
for i in obj.chunks(): 64K 取上传的文件 写入硬盘
f.write(i)
f.close
知识点：
req.files.get(i，none)
file_name = obj.name
bj.chunks()
出生地：<select name="city" multiple="multiple"复数 size="5"最多能出现几个>
定义键 可以选多个 超过的内容自动做成滚动样式
<optgroup label="河北省">可以把地级市放在这里</optgroup> 不能被选择 就是给你看的 标题类似
<option value="beijing">北京</option>
<option value=>北京</option> option 下拉菜单
<option value=>北京</option>
<option value=>北京</option>
</select>
<textarea rows="20" cols="40">自我简介</textarea>
<label for="div1">姓名</label> 关联 文本和input标签关联
<input id="div1" type="text">
http 协议：
请求协议：
请求首行
请求头信息
空行
请求体 只有post 数据发到请求
referer 从哪个网址转来的
content length：13 请求体的长度 这里表示13个字节
*content type：application/x-www-from- url 编码方式
响应协议：
了解就好
css :color 是字体颜色 font-style:italic;"> <style> 是css代码引入方式 可以直接给div加
div{color：red}
嵌入式：
head 里写css代码
链接式：
<link type="text/css" href="css.css" rel="stylesheet"> 推荐用这种
导入式：
@import "css.css"; 不要用这种
选择器：
通用标签*{font-size: 45px}
找所有的P标签 p{font-style:italic;"> 赋予属性id并找到所属id找到标签 <p id="p1">
#p1{font-style:italic;"> class <p class="c1">p3......</p>
.c1{font-style:italic;">
组合选择器：
后代选择器div p{} 所有的div标签下的P标签并且必须是div下的p 无论div下有多少嵌套只要满足都能找到 后代
多用class和id 不要用 div p
子代选择器div>p{} 只在自己下的一层找到所有的符合条件的
<p>不能套<div>标签
并行查找 #p,#p1,c6
相邻只找下面一个 约等于 next 只能向下一个否则找不到 #outer+p
属性选择器：
嵌套规则：
<p>不能套<div>标签
块级标签可以嵌套内联的
内联不能嵌套块级
li可以包含div
块级和块级并列 内联和内联并列
找到属性名 [id] [class="div2"] [alex]自己设置属性 p[class="div1"] or div[class]="div2"
找到属性值 [class]="div2"
[class~="div2"] 属性class="div1 div2" div1的样式也有div2的样式
[class^="div2"] 是不是值是div2开头的
[class$="div2"] 是不是值是div2结尾的
[class*="div2"] 找到有值有V2的 匹配
伪类：
在<style>
加效果 ：号
a:link{color:red}
没有访问过
a:hover{color：yellow}
悬浮变黄
a:visited{color:green}
访问完变成紫色
a:active{color:green}
点击变绿
在每个p元素插入内容
p:after[content:"p"]
在之后加pp
p:before[content:"p"]
在之前ppp
颜色
color：#c3399； 找颜色 16进制表示
rgb(255,255,255)； 红 绿 蓝 拼出的颜色
rgba(255,0,0,0.5) 最后面的0.5是透明度
字体
font-size：45px；
font-style: 斜体
font-family：“times new ” 字体
font-weight:lighter 加粗
text-decoration:none 把a标签 默认的 下划线去掉 加上上是underline
背景属性
height:600px 高度
width：200px 宽度
background-color 背景色
background-image: ;背景
background-repeat: no-repeat repeat-x repeat-y ; 平铺
background-size: 250px 600px; 调整图片大小
background-position: left center; 调整位置 top顶端 也可以是0 0 像素
background：url（路径） no-repeat 250px 600px red； 简写 推荐这样写
*{margin: 0} body和html间隙
vertical-align: -4px top bottom middle居中 文本垂直居中
文本属性
*text-align: center; 左右居中
*line-height: 100px; 文本上下的居中 文本占20 文本上40 下40
下一个文本 会在设置的line-height像素后面开始文本 比如line-height: 100px 会在第101行开始
letter-spacing: 5px; 字符之间的间隙
*word-spacing: 10PX; 单词之间的间隙 图片的之间的间隙
text-transform:capitalize; 每个单词第一个字母大写
外边距和内边距 也叫盒子模型
一切皆盒子
边框属性
border-style:solid green 2px; 边框的厚度
border-color：chartreuse；
border-20px
border:30px rebeccapurple solid
padding: ;内边距 边框和文本的距离 居中的化扩充自己
margin-left: ;外边距 2个盒子之间的距离
body{margin:0px border:solid green 3px} 给body加边框 margin取消body和HTML的间隙
margin 外边距向上上找 如果父层没有border或文本 就会找到body
padding 是扩充自己 自己变大 来达到居中效果
列表属性
ul,ol{list-style:decimal-leading-zero
*list-style:none;<br>
list-style:upper-alpha
list-style:disc;
list-style:circle
}
display
none 把某个标签隐藏 并不占文本流
block 转成块级标签
inline 转成内联标签
inline-block 行内块元素
dispaly:inline-block 可做到列表布局，其中的类似于图片见的间隙小bug可以通过如下设置解决
#outer{
border:3px dashed;
word=spacing:-5px
}
position
position:absolute;
left:100px;
top:150px;
绝对定位,一个元素可以放在页面上的任何位置。标题下面放置距离左边的页面100 px和距离页面的顶部150 px的元素。.</p>
position:fixed;
top: 900px;
right: 100px;
不会因为滚动而消失 一直在固定的位置 上下滚动也不消失
float:right;
在下面的段落中，我们添加了一个 float:right 的图片。导致图片将会浮动在段落的右边。
display
p {display:inline} 块级标签转换成内联标签
<p>这两个段落生成内联盒子,和它的结果</p>
<p>这两个元素之间没有距离。</p>
display:block 此元素将显示为块级元素，此元素前后会带有换行符。
变成块标签
正常文档流：
将元素（标签）在进行排版布局的时候 从上至下 从左至右 的顺序
脱离文档流
将元素（标签）从文档流中取出，进行覆盖，其他元素会按文档流中不存在的该元素重新布局
float 非完全脱离
感觉身体被掏空 菜单1和2悬浮起来outer没内容 所以底部上移 outer没有了 用clear
clear：left左边不能有悬浮元素 right右边不能有悬浮元素 both左右都不能有浮动元素
新建个div标签 .div{clear:both} 相当于架子 把outer标签撑起来 定死了 不好 用上面的解决办法
overflow:hidden; 在.outer里加 这个也能解决为题
position：absolute fixed（脱离文档流） 定位 完全脱离
position：fixed bottom：20px right:20px 定位完全脱离 一般广告用
相对 position：relative 当前位置也就是之前的位置 但是占位置 向上100px 向左100px
脱离文档流 position：absolute
一直向上找父标签 非默认（static）的标签 如没有就只能找到最外层也就是html
必须找到position：fixed relative absolute 任意一个 否则只能在往上找
以上是需要关联父亲盒子的情况下需要的 这样操作的好处是 仅需要父盒子周边操作使用
absolute 本身是可以脱离文档流并绝对定位的
*{margin: 0} 通用的没有边框 初始化 最好用这个
复习***************
head:
<meta http-equiv="refresh" content="5;//www.baidu.com"> 跳转到百度
*<title>Title</title> 显示在分页上 也就是本网页的标签页
*<link rel="icon" href=""> 标签页 显示图片
*content type：application/x-www-from- url 编码方式
boby:
* <p> 段落标签 隔一行
* <br> 换行
<hr> 分割线
* <a><a> 超连接标签
<a href="http://www.baidu.com">baidu</a> 超链接 本页面跳转 href不在a标签不会跳转
<a href="http://www.jd.com" target="_blank">baidu</a> 超链接 新建页跳转 并显示文本内容
<a href="http://www.jd.com" target="_blank" title="hehe">baidu</a> 新建页跳转 title并显示文本内容
锚
<a href="#div1">第一章</a> 必须加个#
<a href="#div2">第二章</a>
<a href="#div3">第三章</a>
<a id="div1">第一章</a>
<a id="div2">第二章</a>
<a id="div3">第三章</a>
这里 a 标签的锚的用法 和一些css的用法
* <img src="" width="200ps" height="200ps" alt="hehe" title="大美女">
调整大小 alt 加载不出来显示hehe title点一下显示
<ul>无序列表
<ol>有序列表
<dl>类似小说 章节 内容
* <table border="1" cellspacing cellpadding> :<tr>:<td> rowspan colspan> <th rowspan colspan> 合并单元格：rowspan colspan
cellpadding="10" 表格大小
cellspacing="0" 格和格之间的距离大小
rowspan 合并单元格 跨行 把上下几行合并
colspan 合并单元格 跨列 把左右几列合并
<input name="" type="" >
name: 作为传入后台的字典的键
type='button','reset','submit' 定义按钮上的显示的文本
value作为值
值type='text','password','hidden' 定义输入字段的初始值
值type='CheckBox','radio','image' 定义与输入相关的值
出生地：<select name="city" size="5">
<optgroup label="河北省"></optgroup>
<option value="beijing">北京</option>
<option>北京</option>
<option>北京</option>
<option>北京</option>
</select>
<textarea rows="20" cols="40">自我简介</textarea>
* <div>
* <span>
块级标签
<div><p><h1-6><ul><ol><dl><><>
内联标签
<a><img><input><span><select><textarea><><>
内联标签不能调整长度和宽度 一行内可以占多个内联标签
可以把line-height加到上层盒子里 这样调整的文本格式就可以把后面的全部文本格式 统一
.action-menu a.tb 必须是class等于tb 的a标签 这样就能限制死了
a标签和a标签 之间是有空隙的 是因为回车换行造成的
伪类要单独设置 不能跟其他的设置 写一起
.action-menu a.tb,.action-menu:hover{color:#3443 background:#20482}
这个意思是把上次集体设置的伪类清空 不设置了 并把样色和样式改变 有个覆盖的作用 谁在下面谁说了算
css 就是个脚本 从上往下执行 注意上下左右关系
盒子，盒子{} 这样设置也可以
border-left：none 左边框就没有了
min-height 设置完高度auto 以后在设置一个 最小高度min-height
margin:0 auto; 居中
！important 不能被覆盖 以这个为准
vertical-align: -4px top bottom middle居中 文本垂直居中
text-decoration:none 把a标签 默认的 下划线去掉 加上上是underline
悬浮点亮效果 可以给图标设置个透明度暗 伪类里在设置透明度亮 达成悬浮点亮的效果
border-radius:20% 方框的四角变成弧度
overflow: auto 还有一个scroll也是滚动效果 溢出的部分直接加个滚动条 可以滚动着看
*text-align: center; 左右居中
*line-height: 100px; 文本上下的居中 文本占20 文本上40 下40
*word-spacing: 10PX; 单词之间的间隙 图片的之间的间隙
a标签有默认颜色一般为蓝色 要想改字体颜色 要改a标签的color