项目学习笔记
html学习
认识标签
<!DOCTYPE html><!--文档类型用于告诉使用的html版本，这里使用的是html5版本-->
<html lang="en"><!--文字显示形式，中文lang="zh"/英文lang="en"-->
<head>
<meta charset="UTF-8"><!--表示使用的字符集【编码方式】-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>这是一个标题标签</title>
</head><!--头标签-->
<body>
这是写内容的
<hr>
<h1>一级标题:h1</h1>
<h2>二级标题:h2</h2>
<h3>三级标题:h3</h3>
<h4>四级标题:h4</h4>
<h5>五级标题:h5</h5>
<h6>六级标题:h6</h6>
<hr>
<!-- 注释 -->
<p>段落标签：p</p>
<hr><!--水平线标签-->
换行标签:br，<br>是一个单标签
<hr>
网页布局
<div>这是div标签</div>
<span>这是span标签</span>
<hr>
</body><!--主体标签-->
</html><!--根标签，表示整个网页-->
br标签和p的区别
<body>
br标签和p的区别
<hr>
床前明月光,<br>
疑是地上霜,<br>
举头望明月,<br>
低头思故乡,<br>
<hr>
床前明月光,<p>
疑是地上霜,<p>
举头望明月,<p>
低头思故乡,<p>
</body>
文本格式化标签
<body>
<b>这是粗体：br</b><br>
<strong>这也是粗体：strong</strong>
<hr>
<i>斜体：i</i><br>
<em>这也是斜体：em</em>
<hr>
<s>带有删除线：s</s><br>
<del>这个也带有删除线：del</del>
<hr>
<u>带有下划线：u</u><br>
<ins>这个也带有下划线：ins</ins>
</body>
上下标线
<body>
文本<sup>上标</sup><br>
文本<sub>下标</sub>
</body>
预文本格式化
<body>
<pre>
床前明月光,
疑是地上霜,
举头望明月,
低头思故乡,
</pre>
<p>标题：</p>
<pre>
床前明月光,
疑是地上霜,
举头望明月,
低头思故乡,
</pre>
</body>
字符实体
<body>
空格： <br>
小于号：<<br>
大于号：><br>
和：&<br>
引号："<br>
版权：©<br>
乘号：×<br>
除号：÷<br>
<p>这是一个伪装的p标签<p>
</body>
html属性
<body>
<h1>align属性-对齐方式;
<h1 align="center">居中对齐</h1>
<hr>
<body>
bgcolor属性-背景颜色;
<!-- <body bgcolor="yellow"> -->
<!-- 页面整个背景为黄色</body> -->
<hr>
<a>target属性-目标窗口弹出方式;<a href="http://www.baidu.com" target="_blank">baidu</a>新窗口弹出
<hr>width属性-水平线的长度;
<hr width="300">水平线在中间，长度为300
</body>
图片标签
<body>
<img src="https://st3.depositphotos.com/13193658/18515/i/950/depositphotos_185151762-stock-photo-pretty-lady-playing-pet-dog.jpg" alt="替代文本" width="200" border="10" title="小姐姐">
</body>
链接标签
<body>
<a href="http://www.baidu.com">百度</a>
</body>
base标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<base href="./" target="_blank">
</head>
<body>
<audio src="https://lx-sycdn.kuwo.cn/87307bf5c8c7afab59e6462b86c0f7b0/65ed578c/resource/n3/94/4/3627648204.mp3" controls></audio><br>
<p>在base中已经给定了一个相对地址，这里的音频会在指定路径下寻找</p>
<a href="http://www.baidu.com">百度</a><br>
<a href="http://www.sina.com">新浪</a><br>
<p>因为在base中设置了target='_blank',所以这里的链接都会以新窗口打开</p>
</body>
</html>
列表
无序列表
<body>
<ul type="disc"><li>实心圆圈</li></ul>
<ul type="circle"><li>空心圆圈</li></ul>
<ul type="square"><li>实心方块</li></ul>
</body>
有序列表
<body>
<ol type="1">
<li>1</li>
</ol>
<ol type="A">
<li>1</li>
</ol>
<ol type="I">
<li>1</li>
</ol>
<ol type="i">
<li>1</li>
</ol>
</body>
自定义列表
<body>
<dl>
<dt>列表1
<dd>解释1</dd>
</dt>
</dl>
</body>
表格
<body>
<table border="1">
<tr>
<th>姓名：</th>
<th>性别：</th>
</tr>
<tr>
<td>张飞</td>
<td>男</td>
</tr>
</table>
</body>
表单
<form action="">
用户名：<input type="text" value="请输入用户名："><br>
密码：<input type="password" value="请输入密码："><br>
性别：<input type="radio" name="sex" checked="checked">女
<input type="radio" name="sex">男<br>
爱好：<input type="checkbox" name="hobby" checked="checked">唱歌
<input type="checkbox" name="hobby" checked="checked">跳舞
<input type="checkbox" name="hobby">RAP
<input type="checkbox" name="hobby">写代码<br>
上传头像：<input type="file" name="" id="">
<hr>
<input type="image" src="data:image/jpeg;base64,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" alt="提交"><br>
<input type="submit" value="提交表单">
<input type="reset" value="重置表单">
</form>
label定位定位
<body>
用户名1：<input type="text"><br>
<label for="">
用户名2：<input type="text"><br>
</label>
<hr>
<label for="3">
文本框1：<input type="text" id="1"><br>
文本框2：<input type="text" id="2"><br>
文本框3：<input type="text" id="3"><br>
文本框4：<input type="text" id="4"><br>
</label>
</body>
文本框
<body>
<textarea name="" id="" cols="30" rows="10">
文本框，写入
</textarea>
</body>
下拉菜单
<body>
<select name="" id="">
<option value="" style="display: none;">请选择</option>
<option value="">选项1</option>
<option value="">选项2</option>
<option value="">选项3</option>
</select>
</body>
表单域
<form action="">
<fieldset>
<legend>个人信息</legend>
姓名：<input type="text"><br>
邮箱：<input type="email"><br>
手机：<input type="tel"><br>
出生年月：<input type="month">
</fieldset>
<fieldset>
<legend>时间信息</legend>
时间：<input type="time"><br>
年月日：<input type="date"><br>
星期年：<input type="week">
</fieldset>
颜色：<input type="color"><br>
滑块：<input type="range"><br>
搜索框：<input type="search">
<br>
<input type="submit"> <input type="reset">
</form>
css学习
选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- <link rel="stylesheet" href="./index.css"> -->
<style>
#p1 {
text-align: center;
color: red;
}
div {color: pink;font-size: 100px;}
.center {
text-align: center;
}
</style>
</head>
<body>
<p id="p1">id选择器</p>
<div>元类选择器</div>
<h1 class="center">类选择器</h1>
</body>
</html>
层次选择器
后代选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- <link rel="stylesheet" href="./index.css"> -->
<style>
div p{
color: red;
}
</style>
</head>
<body>
<div>
<p>1</p>
<p>2</p>
<p>3</p>
<ul>
<li><p>4</p></li>
<li><p>5</p></li>
<li><p>6</p></li>
</ul>
</div>
</body>
</html>
子代选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- <link rel="stylesheet" href="./index.css"> -->
<style>
div>p{
color: red;
}
</style>
</head>
<body>
<div>
<p>1</p>
<p>2</p>
<p>3</p>
<ul>
<li><p>4</p></li>
<li><p>5</p></li>
<li><p>6</p></li>
</ul>
</div>
</body>
</html>
兄弟选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- <link rel="stylesheet" href="./index.css"> -->
<style>
#name~p {
background-color: red;
}
</style>
</head>
<body>
<p id="name">1</p>
<p>2</p>
<p>3</p>
</body>
</html>
相邻选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- <link rel="stylesheet" href="./index.css"> -->
<style>
#name+p {
background-color: red;
}
</style>
</head>
<body>
<p id="name">1</p>
<p>2</p>
<p>3</p>
</body>
</html>
伪类选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- <link rel="stylesheet" href="./index.css"> -->
<style>
a:link{color: red;}
.external:link{
color: yellow;
}
</style>
</head>
<body>
<li><a href="?" class="external">外部链接</a></li>
<li><a href="?" >内部链接</a></li>
<li><a href="?" class="external">外部链接</a></li>
<li><a href="?" >内部链接</a></li>
</body>
</html>
鼠标点击
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- <link rel="stylesheet" href="./index.css"> -->
<style>
:link{color: blue;}
:visited{color: red;}/*点击过后变蓝色*/
</style>
</head>
<body>
<li><a href="http://www.baidu.com" class="external">外部链接</a></li>
<li><a href="http://www.bing.com" >内部链接</a></li>
<li><a href="http://google.com" class="external">外部链接</a></li>
<li><a href="http://sougou.com" >内部链接</a></li>
</body>
</html>
鼠标划动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- <link rel="stylesheet" href="./index.css"> -->
<style>
h1{
font-size: 16px;
}
a,div{
display: block;
margin-top: 10px;
padding: 10px;
border: 1px solid #ddd;
}
a:hover{
display: block;
background: #ddd;
color: #f00;
}
div:hover{
background: #ddd;color: #f00;
}
</style>
</head>
<body>
<h1>请将鼠标分别移动到下面2个元素上</h1>
<a href="?">我是一个a</a>
<div>我是一个div</div>
</body>
</html>
active激活
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- <link rel="stylesheet" href="./index.css"> -->
<style>
h1{
font-size: 16px;
}
a,div{
display: block;
margin-top: 10;
padding: 10;
border: 1px solid #ddd;
}
a:active{
display: block;
background: #ddd;
color: #f00;
}
div:active{
background: #ddd;
color: #f00;
}
</style>
</head>
<body>
<h1>请将分别激活（点击与释放之间）下面2个元素上</h1>
<a href="?">我是一个a</a>
<div>我是一个div</div>
</body>
</html>
focus聚集
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- <link rel="stylesheet" href="./index.css"> -->
<style>
h1 {
font-size: 16px;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
input:focus {
background: #f6f6f6;
color: #f60;
border: 1px solid;
}
</style>
</head>
<body>
<h1>请聚集到以下输入框</h1>
<form action="">
<ul>
<li><input type="text" value="姓名"></li>
<li><input type="text" value="单位"></li>
<li><input type="text" value="年龄"></li>
<li><input type="text" value="职业"></li>
</ul>
</form>
</body>
</html>
css字体/文本
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- <link rel="stylesheet" href="./index.css"> -->
<style>
.h{
font-family: 宋体;
font-size: 16px;
font-style: italic;
font-weight: bold;
font-variant: small-caps;
}
.hh{
font:bold italic 16px italic 宋体 small-caps;
}
</style>
</head>
<body>
<p>a测试字体</p>
<p class="h">b测试字体</p>
<p class="hh">c测试字体</p>
</body>
</html>
文本线
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- <link rel="stylesheet" href="./index.css"> -->
<style>
h1{
text-decoration: overline;
}
h2{
text-decoration: line-through;
}
h3{
text-decoration: underline;
}
h4{
text-decoration: blink;
}
</style>
</head>
<body>
<h1>这是标题1</h1>
<h2>这是标题2</h2>
<h3>这是标题3</h3>
<h4>这是标题4</h4>
</body>
</html>
字间距
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- <link rel="stylesheet" href="./index.css"> -->
<style>
h1{letter-spacing: -0.5em;}
h2{letter-spacing: 20px;}
</style>
</head>
<body>
<h1>这是标题1</h1>
<h2>这是标题2</h2>
<h3>这是标题3</h3>
<h4>这是标题4</h4>
</body>
</html>
词间距
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- <link rel="stylesheet" href="./index.css"> -->
<style>
p.spread {
word-spacing: 30px;
}
p.tight {
word-spacing: -0.5em;
}
</style>
</head>
<body>
<p class="spread">I am Chinese</p>
<p class="tight">I am Chinese</p>
</body>
</html>
背景
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- <link rel="stylesheet" href="./index.css"> -->
<style>
body{
background-color: yellow;
}
h1{
background-color: #00ff00;
}
h2{
background-color: green;
}
p{
background-color: rgb(250,0,255);
}
p.no2{
background-color: gray;
padding: 20px;
}
</style>
</head>
<body>
<h1>这是标题1</h1>
<h2>这是标题2</h2>
<p>这是段落</p>
<p class="no2">这个段落设置了内边距</p>
</body>
</html>
背景图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- <link rel="stylesheet" href="./index.css"> -->
<style>
body{
background-image:url(https://cdn.pixabay.com/photo/2024/01/17/15/49/man-8514870_640.jpg) ;
}
</style>
</head>
<body>
</body>
</html>
盒子
边框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- <link rel="stylesheet" href="./index.css"> -->
<style>
div{
width:200px;
height: 200px;
/*复合样式：边框粗细1px,实线，红色线*/
/* border:1px solid red */
/* 边框颜色 */
/* border-color: green; */
/* 边框宽度 */
/* border-width: 5px; */
/* 边框样式 */
/* border-style: solid; */
/* 上边框：1px 实线 红色 */
border-top: 1px solid red;
/* 右边框：2px 虚线 绿色 */
border-right: 2px dashed green;
/* 下边框：3px 点线 蓝色 */
border-bottom: 3px dotted blue;
/* 左边框：4px 双线 粉红色 */
border-left:4px double pink ;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
内边距
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- <link rel="stylesheet" href="./index.css"> -->
<style>
div{
width:200px;
height: 200px;
border:1px solid red;
padding: 50px 60px 70px 80px;
}
</style>
</head>
<body>
<div>我是内容</div>
</body>
</html>
外边距
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- <link rel="stylesheet" href="./index.css"> -->
<style>
div{
width:200px;
height: 200px;
}
.d1{
border: 1px solid red;
margin:50px 60px 70px 80px;
display: inline-block;
}
.d2{
border:2px solid blue;
display: inline-block;
}
</style>
</head>
<body>
<div class="d1"></div>
<div class="d2"></div>
</body>
</html>
浮动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- <link rel="stylesheet" href="./index.css"> -->
<style>
.div1{
width:100px;
height: 100px;
background: red;
float: left;
}
.div2{
width:100px;
height: 100px;
background: pink;
float: left;
}
.div3{
width:100px;
height: 100px;
background: blue;
float: left;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</body>
</html>
定位
static定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- <link rel="stylesheet" href="./index.css"> -->
<style>
.moren{
position: static;
border: 3px solid #73AD21;
}
</style>
</head>
<body>
<div class="moren">
该元素使用了 position;static;
<h2>标题2</h2>
<p>使用position;static;定位的元素，无特殊定位，遵循正常的文档流对象；</p>
</div>
</body>
</html>
fixed定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- <link rel="stylesheet" href="./index.css"> -->
<style>
.guding{
position: fixed;
width: 100px;
height: 100px;
background: deepskyblue;
top: 30px;
left: 50px;
}
</style>
</head>
<body>
<div class="guding">
<div style="width: 100px;height: 100px;border: 1px solid red;"></div>
<div style="width: 100px;height: 100px;border: 1px solid red;"></div>
<div style="width: 100px;height: 100px;border: 1px solid red;"></div>
<div style="width: 100px;height: 100px;border: 1px solid red;"></div>
<div style="width: 100px;height: 100px;border: 1px solid red;"></div>
<div style="width: 100px;height: 100px;border: 1px solid red;"></div>
<div style="width: 100px;height: 100px;border: 1px solid red;"></div>
<div style="width: 100px;height: 100px;border: 1px solid red;"></div>
<div style="width: 100px;height: 100px;border: 1px solid red;"></div>
<div style="width: 100px;height: 100px;border: 1px solid red;"></div>
</div>
</body>
</html>
relative定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- <link rel="stylesheet" href="./index.css"> -->
<style>
h2.pos_left{
position: relative;
left: -20px;
}
h2.pos_right{
position: relative;
left: 20px;
}
</style>
</head>
<body>
<h2>正常位置的标题</h2>
<h2 class="pos_left">这个标题相对于其正常标题向左移动</h2>
<h2 class="pos_right">这个标题相对于其正常标题向右移动</h2>
<p>相对定位会按照元素的原始位置对该元素进行移动</p>
<p>样式“left:-20px”从元素的原始左侧位置减去20像素</p>
<p>样式“left:20px”从元素的原始左侧位置增加20像素</p>
</body>
</html>
absolute定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- <link rel="stylesheet" href="./index.css"> -->
<style>
h2{
position: absolute;
left: 100px;
top: 150px;
}
</style>
</head>
<body>
<h2>这是一个绝对定位了的标题</h2>
<p>用绝对定位，一个元素可以放在页面上的任何位置。标题下面放置距离左边的页面100px和距离页面的顶部150px的元素。</p>
</body>
</html>
sticky定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- <link rel="stylesheet" href="./index.css"> -->
<style>
div.sticky{
position: -webkit-sticky;
position: sticky;
top: 0;
padding: 5px;
background-color: #cae8ca;
border: 2px solid #4CAF50;
}
</style>
</head>
<body>
<p>尝试滚动页面</p>
<p>注意：IE/Edge 15及更早IE版本不支持sticky属性</p>
<div class="sticky">我是粘性定位！</div>
<div style="padding-bottom: 2000px;">
<p>滚动我</p>
<p>来回滚动我</p>
<p>滚动我</p>
<p>来回滚动我</p>
<p>滚动我</p>
</div>
</body>
</html>
重叠元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- <link rel="stylesheet" href="./index.css"> -->
<style>
img{
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
}
</style>
</head>
<body>
<h1>这是标题一</h1>
<img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAoHCBYWFRgWFRYZGBgaHB4aGhkcGBwaHhgeGhwaHBoZHBwcIS4lHB4rHxwaJjgmKy8xNTU1GiQ7QDs0Py40NTEBDAwMEA8QHhISGjQjISExNDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDY0NDQ0NDQ0NDQ0NDQ3NDExNDQxNDExNDQ0NDQ0NP/AABEIAOEA4QMBIgACEQEDEQH/xAAcAAAABwEBAAAAAAAAAAAAAAAAAgMEBQYHAQj/xABAEAABAwEEBwYEAwcEAgMAAAABAAIRAwQSITEFBkFRYXGBIjKRobHBQlLR8BNicgcjgpKy4fEUMzSic8IVJGP/xAAZAQADAQEBAAAAAAAAAAAAAAAAAQIDBAX/xAAjEQEBAAICAgICAwEAAAAAAAAAAQIRITEDQRIiMmETM1EU/9oADAMBAAIRAxEAPwDRHBJlKuCKQslq7riA6zVGSL5DXNbIvEMe1ziBmQACeiT1DBAtjTstlTA7JZTKr37U6jmPsz2GHBr4PWnI6gkdVO6iO7dtH/7sf/PTbj5J+i9rLarK14xGO9QVqsTmHeN6sbkm9oOBUGqy6xkkAZkgDqYUpa7Btam9goH8QT8ILj0GHmQhc5ONJuEEDIYDkMAmmjLMHvF7uN7TuIGzqYHij6QCfWOjcoyc6hvfwju+56qGmU3ZDXSNqvF3EpnYqDnuuNEk5fU8Fy0jtRuUvTZ+Az87h2j8oOTB78eSc6F5uo5ay2my43GJk/MTmeWwKJo2cm6SMHPD3cGUwS2ebo8Uu9190HId72anWkXXKd3acXecN6T5pS87VZv6xBa22lrGte0guqNNOPmaS108sP8Asq2y0i4S7HiIzUXp/Sxc84yGgtAnZJJPU+ib07SXMxyOwk57Ni05rG6l0VdSvknZ4nqkbRSgHcMlyy1HXiAcIxdu4pxayDgMh48T1RAiKrJTGu1P6tTHBEuTmtIixFlhRSpVllJBdsy+pSRsZuAxi4mOQH1KNlpGkowKUqUoRAxMrDlhkLQdQtJgU/wycL0kfKTAkb5MeW5Z2z/CsGqFT9/cJwe0gfqiQfJTl0cbsx8sbwEeEpzozuqKsVov02P+YY+EHzE9VK6N7qmA3lcXEEyKuSZTg03fKfBJPYRmCOiSmcftbZ2KDtxqDxDD7KU1Bf8AvrWN4srv5qTvomn7WGf/AF6R/O4eLD9EtqC799W/NZ7K7+Vr2+6fova7FEKMUUqTcuzgMSUnXoXAZEF2EcBn5x4KVsFMNbfdmcuSj9K0jJfmNo3ceSVnCsPyQz7Oaj2sGWZO4bT4J7a6sk7AMANwGQSDD8QMHgg9t5Q6Nc7J6OpS41XCWtPZHzP2dBn4I9trTicSfM7Edr7rQDk0QB5+Kjy4vfh09yUUSa5ObGy6cNmJJ3qM1htRukNkvMgY+Mk5KaeQxioVvtpfVey6C1hDccc8XSNkQga1P2p1rpOAdeknfsJ5hFsTSQGgEu2ZwOJ81YNL0A4dgDAd0DE8cpTS02cWdjbxF9zZdHwg5Dn9PHSZMPibOIYIB5nefomFpte4rlapOOzYE2a28YJ67lUhUamC4gDElSdksRcQBl8TvYfeKe6KsIInJm/4nn2b6qTe9rRDTwkYkn5GDad5SuSpijn0xFzYO9HkwbyTn/lSDNGBtMucO0RAG7YB4qT0NocjtvGPwt2MHud5+yvbiAHbmA9TCm5L+MUHSNMTEZFR7gApK394g5jPmc1E1zjC0lY5TlxzgCE5sFYsqMc3NrgR4qPclWHEcwnUvQOhng04GQukcb4Lp8Cp/Rvd6Km6k171mAzuhoHERh7jorlo7u9FEFNZQRYQTJPuQa3eimouF6ezMtK6Hs9oaGV6TXtBvAGRBiJwIxxKjbDq7QoPL6N5ssbTul15oa10ticZ2ZlS9Somjql50BTachJ7YzS9jst/E90efBOaVFriL2MfeKcvcAOG7eiQqSq79gyTdzZGIz2JV52u8N390W6TicB9+CZq5pKh+EcJuE4cD8qRpvETKsNopNeCwiQcPoeYVXFMscWuxLTB+qzymnThluap21l5cDGtJKO2qAM0ytdYu7LcSTAHEqWgzjfJjujPjwVE0bWa6tamjvF7nDj2WtPnh1WlV7MKdDDYDJ3k5lZVqyxj7c9jyQ2oXNmYOV7zuwnZxWUy3ZT+y0HPJLQTkDs24Imseh3y0C6TtAxMnPE5n8xPKFdWsDqzrrYHZgHIBhgeRTi02BrsXDEqJVXGbZkzQ9JjZrP6Ax5nE+SSNOzF1wSzKC4RM5dFddK6DGDmiYOW9VfSerz6ldzwQ1r4vE4XcpF2JOWHstJf9TljrqCt1eqASyr2cyIzHurHoLQjRD39p3H4R8o3JXR9laLzGzcBF2d27y81YaNO62YS3T1IZ21wY3DkBvnABV3StRoYcZDczvP+cVIaXqvcbrcMRJ3DhxVQ02KrjcZJGWW07J2nfuROaLxEXRp3yXHaSfUnyULXMuPMqyAVKTHB1OA2RejeDtHVVao/EraMM3ClaQTaU6oHtN5oQ13Uer+5Zze3+V2HlPgtB0f3OizPVI3Q5o+HtD+MB4jfkR1WlaMdLByUwU0QXYQVEl5RHlHARXhCoYwXugdeCeMoNaMB1SNEXXHili4jCEg6w4o7vE+Q+iIwwO0cRgUJJGGA3/QIDjoGJxP3kuEH4sOH1XC4Aw0Xjv8AvJcdA7xk7h94oDsyMBh5KN0rYhBqNzgSN4HupIyc+yElXhzS3eIPVK8xWN1VWrvuCfvBONHWd0/iPEOIhrflG88T6IlSzkxObT5py6s7eOg+qznboyls1BdbbRcsjztm43m7OOixOpZ698vZSq4EOa5tN5xGRBDVsld5OL3EjicuQ2KL0hrFZqEh9QXvkEudwwGXVVLyn+OTHmqz+z3S9orWx9Os9zrtJ5uloaQb1MSQADME5rSq2ao+rWsFK06RaWUy0to1GlzoBcLzCBAJwEE471fKjFOU56PC/vZu5gITV+jwU+bguufCIumbbKG5I9q7LAN6Mx8pPSDsQOCaVd0mx4BuziDjuOwf3VF0fTtD6gl7wGy57tgzzkRMwIWqVrMHBQ9q0RMw5wncUS6K479qzTtbq1J7HjtCWkjbslULSFMMeWAzGfNaPpu5ZqLnACYho3k5DxWXvcXEk4k4k81p457Y+XijUzipCwsBewbLwnxTCkFLaGZNVkZzI/h7XsqrNpGrzLryPyXR/CZE8Yc0LQ9CGabeUeCoVkbD2RxB57fMBXrQb+wOXuZUQVxBHhdVJSgCI9h3JSUQv4lCzd9I7kKj7ohCvaoTRhLjikDsvjtRMZ8t4RHvOb3QNgBxPX6LlWpdCaWaoRsGPdcfh4cEA+BJGxjfMoMPyCfzH6pNsE4y93DIffFLuY7N7g0bgkZN4Hxuk7guEuODWwOS4+1sZkOpz+qaVtIudgBh4f3RsaR+mTc7TZcfjAxgbCm1lpOqNLi66BsAknbmcPJSTCQZuyThuHVAAMachP3CjS/nZNMu150lUp130WPc1rYGBgmWgklwE7VQ3GTOZJkned6ntcbXftNd4Ob3RyHZHkAoBoWmM0jK29rDqDVLLfSd+oHk5pb6kLcXOwWHan0ptBd8rZn+ILY6doloKzzv2a4T6l7yTtIN0xj7pnaKrwCWgGNhJE+GSYM1lYHBj2va47CMOjsilK1mNvMSNmtrSTILY3xjxEIlWu17wAZg4pF9po1MQ8A7kLJZ2sMjNAs0kXJlbKwaCu2m1ADNZzrprNnRpO7R77h8I3D8x8k5PldJyymM3UHrnpr8ercaewwkfqdkTyGXiq8xsoiVoZwt5NTTkt3dlGBSug3RVYTx8wQoxgxUjY+y4O3GfBTkpqzKZa1p3Y/1TyyVv0IYYB+r+qR6qrWl4IZHxNEwfmaJ8y7xVp0IcANomef36qIVL3UEIQVpKG0pB9oJSVdhGISIcp200XzSjHQm4cjBwGaJRoatLoGxdJvCBEbPrzST3iNw2qNtdvnssy37+XBFshyJL/5prRcGYwymTzTO2aUIMZnnHnmo6nTxkhN3CSVn8qrSeqvY2iHxi4GDJwIjyUTZqP4jTdrVGv3YkDjE4hC31T+GwbAY8vrCJYOyQ5Gy0Zv086g9zKxcQBN9uMTleBBjmME0t+lqlVhc15bTAPbJAEbYgAu6I2kKQe9zoz3IWPVVl0PfzjBox2kYJ7GmbaXbfe5zZIJwJETxjYmzKJDSSOP0WrW7R9ClTe80wRkCQO0dwwwH2IzWdaYOE/MRy2nJXjdpsSOotOXvPADzWj2etGByWffs8Hbqch6q52gmFhn+Town1WC5IUHpHRwxlt5vEZItm0sWC6/Eb0+ZpRjh3gnOWuOVxu4qVo0SLwLQ9pB+EkAKWszixvbqF3OMOCT0vpVjAS3GNyzfTWsNSsSwG6ychmeZVY43JHm82+4m9Zdbc6dAyci/YOW8qjkyjQg1q3xxmPTjyyuV5CF1j4njgjubgk1SS7XxCd2R8keHiIUcFLaFpy9mEy9mG/FTkqNX0US8snJojn2Wkeit2gxAJ3/49lUdAsIa47TA8QcfAK56GbDGjh7qIKWhBCEFekm7ymzyBw4pq62POQASDqTnGXElZXJtopV0hGDRPEpu61vO0DkEsbKuizJcnwauLnZknqjUqSeMsyc07MiQWmQp4JGjZ1ONs8NSVCzo+JbRr7NeEHZhzQfY3MZIhw2AnHoVMvs3VJ6Qc2AxueXjt9U/iNqzZrOXGYAkk7/pipqnY4ie0dk7OMYAeCXZQAGA4DknlnpYSfDfzS0dZ9+0K3XSylexmTyGeHWPFZxpSpJBJmPU4k/e5WPXW0X7bVIODCKf8oBPmfJVa10y6DxgcTmfL1WmM0jJK6p2z8KuCT2X9gndMQfGPFaQ8SshptM+a1DQdpL6LCcTEE8Rgs/Jj7a+LL0StLMU0c2JUxVpKtabt90FrcTkeCzxm2uV1EFrFb8C1p/uqu1uacW2sXOMpJgwXTjNRyZ3dFDUZgStZmAQpNVE6GSkX005ajFkid6Bo1ZSVj1aspc8AZiDlOOAb5nyUS1iumpNkh4ed4z2AY3vXwU5U9Lvo2z3QTyaebRj6+SsmiO6OvqoWzDsT+b1lTuiWwwD7zUwqOgggr2k3ZYuCP8A6UDYpYMASNUKdRptGizoMs/BPqbV0MxRobNGWdLGjATtrAuWhmAHFGhszqkRHp7rtBo+wlHt3JZjMEAmCM9wzUcWX3F0cB12p1XfDTGRJlFszYDceKVEdp0wAg94DXHYATuwCOMVAa26RFGzVI7zmuDRw2ngAPVBxi9ttN+pUfve53i4lNqzsJ6Dm7M+C40TIXbUYAA2eqqFRWHtcAB6f3WiarM/ddfVZtSzWi6Jq3KR5DDjH1UZtPHD/SdogFrTB2kZidgG8qladddadnCfMnaVa30HBhe4wYvEnYCs90rpE1XkfADA2TGZKWE5VndREvajU/ZHqZozGei2YD1BISbBCVIwRQEAUpVr0g7BKUs0A8YAcFoGq7BjGYY3D9U4efms/oHzVx1StlxwvCWucBO67MdMVGR+mhPZdZd/MPVTOje6FBU7S14kbzhzmPMKb0aewOSImlIXES8eCCaUskqoSqJUyQskwLsIMR4QB2BFqZhGauVM+iAbuGKWiGnkiNGKWqDBAR1rZghUfAG2Aj10m+pJOUT7f5SM3vOiYA4z7BZ/+0bSNyiWzL6puj9DCLxG4XiBxWg1niCc4BOKx3WwOtNZ7hiGObSb0aX1Henig/SuWSn6fTNNbRUk9U9oMutIJxMtB8fDIqPeJjr6lOJSOirKXvbHzCfH+y0VllAIB3DyIn1UDqbYJYH78epMDwAP8ytzmYCM2/Z8vRZ5c10YzURmsz7tFwGbhBO7YsvLBiRx8zgtN1hoOfSfdBIAknYMfeMlmtVveCrGcM/J2bbU6azb97cEgBl0SpdgZ+8lozcOIQa1FY/ADqnMQEAwq5lHpJKrmUs0YqQe2UYhXPQNOWD+Iz7Kn2HvBXrQ1OGDDHHrj9AT0Sq1ibZoaLpgtkg+JHQqx6ErhzGnh7qCYM4MXmiOkjHcpbQ4DWhsjAe5RGeR9CCSvIKkptFdkjIjskliUwlCuUhgjPKA61JuzMI7SijagOMbijVTjguUyuVDieSAjLU7GBmThtjeY+80a7Dd8Ts4IP74jOMOB2+iVdRgY5oCJ03XDKLthumOOEDBZZbK9yzi7AL31XOdHai81oDRskDPdO9aFrPUuseTkwT+omLoHGT6LNNZOwGMObWDDi8mf6Uva/SAtD4HHG6OZxPgPNI02k/e9GriXO+9qXsUX2TlfZPK+JVRC/amtIoQQZa5wy24QPvcrrYNGNc0F5J/KMByJ+iquprC69uc8ujm0SeeQ6laBZ4DY3bETGdnlleohdP2Uf6eo0ACGGIERiI57FiVWnF7ifePqtj1t0ldaWNzOfACDj1Cx62ECTx9MvVF7KdGDwhEj75rhPsjsz+9gTAg/snFXbyhJsZ6lHdnG4IBt+HJSgajMOBPFKURJASpwrZzdIV+0QJDQMrs8pMHrB81RHDHkcVedWHyMMZAb/1lRVLQBDWndhPPD1UhYW4ffVR9QXaP6RenkbyWpWr4gcIVRFh7d5oJr/8AIDePBBUnVXBxwRCEKhwQlSoZowQKMuIDgSbMkZ7kRmQlAK0QkKoxMbk5pnBIvdigGNoZhfH3vKNUrGARGOX15BLVGSI2HA9VWLO99rJY0llnabjngw6rGF1hHdZhi/M7N6DhnpdrrUCylH4dOXXx8b249QPXksy11tbX2k3O7DI/lB94W70rM1rQ1rQ1rRDQBAAGEBeetZmAWmqBkHuA6GEQW8GlX5jt9cUak7Fu+fSVyriwc/on+r9k/ErARMEnwkn0HiqDVdTbEWUmkwDhe64+6sFe1mCGY737BvPE5qJpOa1oDnDfdHlPRResGn7rS2nAgSXbGDeeO4clVskLW6hNbre1ssaZce8Tnjv3clRreIDBvaT4nD0nqn1x9d+ExOBPm4+Pmm2mv9yBlAjlAjyUd8qqM2pSmcUm/PyRm5j73ppLAdg/eaKDiV1uSK4IDlPEAcZS9P5t5hN6bcE+pskAD7+ypqoWqU4EDbA6nNaFqxZLrOhJ55D1VG0WDUqsb8LcOu0rVtEWYNYeg+/E+Cg6VtNAClGyCD6eiqWjbzQN46+qutt7nJpPgqxQo4kb3H1JKZHn+pdw8AglvwRuXUwvFXZzXUR7sQjSmkcBFe+PvyRSSgxkmUAk8uI2DzPrgm9KuWwHyBsdmOuGCkKjMDyTf8PsgHcgF6WWBlNS+CScQlKbbrcMvT+yjbXbLgcYkAEnkgaJ6Wql5FFhgOxqEHFrMcJ2F2XK9wTmw0gxtxo7IiIyAgYeqiNFAgFz5vvlxGOEwAzgAIHipMzEgnnd8kj0c2yoACNvDdtXnXTb79oqkDOo/wDrct4t7w1hcZJyGQ9Nqwq20f3ryfncfMwnAZQboG4kq4ag6PvmrUOAaLox2uvYeTVT2O7R5+60HULClUZ+a8TwgQPH0VTsktpG1Bsx2WAXjxiY5CYCqj2PtD7o7gN524n+2wJ5rHXN9tEZ3hPsD1JPQKRsFkuWYBvee4NnbJdienqleaqGtGwtZQe84CIbwEgB3Umf4VRbXUvve7j6ZBaHrfVayzljdr2tb+lgmfvis4eEypAINdsXAYKNUagijMp4rrxkiMPZ6ox2IA7WqYstANZfduwG/d6KLs7Zw4q1/wCkmliIkBoB3mApq4S1Ns155JGId9SfRarZKcMHj1KzzUpgAedt/wCg9ytLYyGY5qYVM9JO7Eb/AKqvUKovuOwGAfX6eKmtJAuAaMCRE7hOJ8PVQlpphry0ZACPAIoSX4zd6Ch4KCWyaS89pKApHalgFZCtSjUVG2IJ05FJx2QlJwMpIO7IQboOChbS01H3Pga4E/mdsB4DvdAn9Woe63vHLgNrj7BJsphpEZfXMnecygDizzAgRjguNZhE4cRKXc8AScBCjKrnPjYwkCJ714gY/lx68swzepT/ABXgySxuW5xzLuI3cp3LDtK1C6q/9bjzlxM+a9B2ohjIjYfNeeNJ1ZqEjr0zTgMww3oCvP7PakNqu+WJ4g890OPiqxo2gCKj3ZNYY4kgx5qy6lgihbA3MXIO7vpwiGkWucTaSJAqAHl2h/UPNTlmtIY1kns3g8H9RF49D6I2grIKtluGYfh1LnGeklMdFWW+19B+D2sug78i13K6fJCjTXW0A1GMGLWtc4H9WXhiqc8qZ0857Klyo68WsusdvbsniMR0UG7GOaKkgM0YmRP3wXXNxdyj6rtMS1AEBwKUlFezD1XJwQEzq+0Oqicgf7Hyk9FcdIkljQwYueQ0bxg1o9/FU7Vx8PJ/KRz4BaJYrIS81HiC3BjT8OAxI34RwE8Vne1wz1Sst2qae4tJ/hMz1MeKvrz47lVNT6d6rWfucGjhBcT/AOqt1ztSPsIhXtH16cGTtafI4woG2Dtk8lZNKt7AgYjEcd46qBe2+4RtAKKIZwgnP4BXVIXtzgAJMSSBO3glGrL9K6VsNWs4V3139qG1JuspST/ttGOGAvEbypKxWy10m37PVZbqG4u/eNGwSMcscZ5Lt/57rvn9sP5OWgLjVVbBrxZnm5VvUH7W1GkAH9WXjCstntDHgOY5rmnItIIPUYLLLx5Y9xUyl6pclIMxAlKuOCZPf2DyjzWaxbKZDn7XHDlMNHulrSIIO4H0SVmMNbuhJ2pxe4NB67p90AkCajo+EZ/T6+G9SH4QjHESDszBkHxXLLQDRly+96VPBARWm3wx53Mc7lAXnSpi7zW867Wr8OyWl238MtHN5uj1CwYiThuj2ThpmwPu2d42uLR99AVYdUjFGrGb3tHDEgfVVMvIbd+5OE+q0DV/RpbZ75wMG6OBcMeaZlNA1BTotaPiaS0/ma4gj/rPiktMn8G00HtMBwFNx33gLpPX1KWsNAmk5jMC2o+7+WO3M7sY6pnrMQ+i4mZBbzaZ7vCMukpkrGubIrNPzMnl2jgq8044qy65VA59MgR2Meoj2VYLsQlSGecUlRdieCUtIiOXsi2YYE7M0ArWdAG9Js47lwiZdvMDojtGI8UBNapvArkfldHO6VpNqrhlJ7zsBPUbFluialyq1+wEK76QtJquZQAMPdePIRhH6gAoq4tGpNlLbO0u77yXu65eysDzdI8PFJaKp3WMgRDAPDgndZk57wUJNtIMlvRVyzEAycA05nYM/Qqw258NM7FAWZgLzIBxBEjg1Ac/1TPm8j9F1OrqCRMftPeKtH7NP+S/9DvVqCC9rydVye09r/3W8/ZMv2a/7z+XsUEFnn/WU/JqQyTN/c/i91xBeZXY7Z+6ORSFg7zv1n0C6gkEodnP2QO3ogggKN+07/hVedP+sLGqGf3vXEE4Zwe+OY9Vrlg/438DfUIIJwG2ie/X/wDIf6GKG1l7tX/yt/oaggmIreuX+9T/AEj3VZdmEEEiK2/Z+kegSTO50CCCAVPcbzKHxdEEEA8o7OfuFdbD/wAmn+j/ANwggoaTpqFi7jeXsnJzQQTZo7S3cUJY+/1HsgglQcoIIJB//9k=" alt="">
<p>由于图像的z-index是-1，因此它在文本的后面出现</p>
</body>
</html>
js学习
js修改
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p id="txt">这是段落</p>
</body>
<script type="text/javascript">
var txtDom=document.getElementById('txt')
txtDom.innerText='修改文本'
</script>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id="p1" type="button" onclick="onclick_test()">请点击</button>
</body>
<script type="text/javascript">
function onclick_test(){
document.getElementById('p1').innerHTML='段落已被更改';
}
</script>
</html>
js获取
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p id="p1">这是段落</p>
<p class="p2">这是段落二</p>
<p class="p3">这是段落三</p>
<p name="p4">这是段落四</p>
<p id="p5">这是段落五</p>
<p id="p5">这是段落六</p>
</body>
<script type="text/javascript">
var ppt=document.getElementById('p1')
var class_ppt=document.getElementsByClassName('p2')
var tagname_ppt=document.getElementsByTagName('p')
var name_ppt=document.getElementsByName('p4')
var selector_ppt=document.querySelector('#p5')
var selector_all_ppt=document.querySelectorAll('#p5')
ppt.innerText='我是我，修改；'
class_ppt[0].innerText='修改class的文本'
tagname_ppt[2].innerText='修改tagname的文本'
name_ppt[0].innerText='修改name的文本'
selector_ppt.innerText='通css选择修改id的文本'
selector_all_ppt[1].innerText='通css选择修改id第二个的文本'
console.log(ppt)
</script>
</html>
点击事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div onclick="clicks()">点击事件</div>
<div id="p1">点击事件</div>
<div>单击与双击</div>
</body>
<script type="text/javascript">
function clicks(){
console.log('点击')
}
var ppt=document.querySelector('#p1');
ppt.onclick=function(){
console.log('点击2')
}
var div_ppt=document.querySelectorAll('div')
div_ppt[2].onclick=function(){
console.log('单击')
}
div_ppt[2].ondblclick=function(){
console.log('双击')
}
</script>
</html>
鼠标移动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 100px;
height: 100px;
background: #2196F3;
}
</style>
</head>
<body>
<div id="p1"></div>
</body>
<script type="text/javascript">
var box=document.getElementById('p1')
//鼠标划入事件
box.onmouseover=function(){
box.style.background='pink';
}
//鼠标移出事件
box.onmouseout=function(){
box.style.backgroundColor='red';
}
</script>
</html>
窗口变化
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script type="text/javascript">
window.onresize=function(){
console.log('窗口发生改变了');
}
</script>
</body>
</html>
下拉框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<select name="" id="">
<option value="">北京</option>
<option value="">上海</option>
<option value="">广州</option>
<option value="">深圳</option>
</select>
<script type="text/javascript">
var sel=document.querySelector('select');
sel.onchange=function(){
console.log('下拉框内容改变了')
}
</script>
</body>
</html>
修改样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="box">
css修改样式
</div>
<script type="text/javascript">
var obj=document.querySelector('.box');
obj.style.color='red';
obj.style.cssText="width:200px;heigth:200px;background:skyblue;"
</script>
</body>
</html>
标签属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="box">
属性操作
</div>
<script type="text/javascript">
//获取元素
var box=document.querySelector(".box")
//JS操作标签属性（增删改查）
//增
box.className='box'
// box.setAttribute('hh','ww')
//删
box.removeAttribute('class')
//改
box.className="text";
box.setAttribute('hh','tt')
//查
console.log(box.className)
console.log(box.hasAttribute('hh'))
</script>
</body>
</html>
js操作符
算术运算符
**<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p id="demo1"></p>
<p id="demo2"></p>
<p id="demo3"></p>
<p id="demo4"></p>
<p id="demo5"></p>
<p id="demo6"></p>
<p id="demo7"></p>
<p id="demo8"></p>
<script>
var a=1;
var b=5;
var c=a+b;
var d=a-b;
var e=a*b;
var f=a/b;
var g=a%b;
a++;var h=a;
a--;var i=a;
var j=b**2;
document.getElementById('demo1').innerHTML=c;
document.getElementById('demo2').innerHTML=d;
document.getElementById('demo3').innerHTML=e;
document.getElementById('demo4').innerHTML=f;
document.getElementById('demo5').innerHTML=g;
document.getElementById('demo6').innerHTML=h;
document.getElementById('demo7').innerHTML=i;
document.getElementById('demo8').innerHTML=j;
</script>
</body>
</html>
比较运算符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p id="demo1"></p>
<p id="demo2"></p>
<p id="demo3"></p>
<p id="demo4"></p>
<p id="demo5"></p>
<p id="demo6"></p>
<p id="demo7"></p>
<p id="demo8"></p>
<script>
var a=10;
document.getElementById('demo1').innerHTML=(a==10);
document.getElementById('demo2').innerHTML=(a===10);//值相等并且类型相等
document.getElementById('demo3').innerHTML=(a!=8);
document.getElementById('demo4').innerHTML=(a>8);
document.getElementById('demo5').innerHTML=(a<8);
document.getElementById('demo6').innerHTML=(a>=8);
document.getElementById('demo7').innerHTML=(a<=8);
document.getElementById('demo8').innerHTML=(a!==8);
</script>
</body>
</html>
**
逻辑运算符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p id="demo1"></p>
<p id="demo2"></p>
<p id="demo3"></p>
<p id="demo4"></p>
<p id="demo5"></p>
<p id="demo6"></p>
<p id="demo7"></p>
<p id="demo8"></p>
<script>
var x=1;
var y=2;
document.getElementById('demo1').innerHTML=x>0.5 && y==2 ;
document.getElementById('demo2').innerHTML=x>2 || y<1;
document.getElementById('demo3').innerHTML=! x==1;
</script>
</body>
</html>
流程控制
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p id="demo1"></p>
<script>
var age=prompt('请输入你的年龄：')
if(age>=18){
alert('可以进入网吧')
}else{
alert('未成年')
}
document.getElementById('demo1');
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p id="demo1"></p>
<script>
var score=prompt('请输入你的分数：')
if(score>=90){
alert('优秀')
}else if(score>=80){
alert('不错')
}else if (score>=70){
alert('不行')
}else if (score>=60){
alert('及格')
}else if (score<60){
alert('不及格')
}
else{
alert('请输入正确的数字')
}
document.getElementById('demo1').innerHTML=score;
</script>
</body>
</html>
switch语句
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p id="demo1"></p>
<script>
var x=1
switch (x){
case 0:
text='我是零';
break
case 1:
text='我是壹';
break
default:
text='未找到';
}
document.getElementById('demo1').innerHTML=text;
</script>
</body>
</html>
循环
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p id="demo1"></p>
<script>
for (var x=0;x<5;x++){
document.write(x)
}
document.write('<hr>')
var y=0;
var arry=['x','y','z']
for (y in arry){
document.write(arry[y])
}
document.write('<hr>')
count=4
while(count>0){
document.write(count);
count--;
}
document.write('<hr>');
count2=4;
do{
document.write('do-while');
count2--;
}while(count2>0)
// document.getElementById('demo1').innerHTML=count;
</script>
</body>
</html>
字符串
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p id="demo1"></p>
<script>
var txt="ABCDB";
document.getElementById('demo1').innerHTML=txt.length;
document.write(txt.charAt(1))
document.write('<br>')
document.write(txt.replace('A','a'))
document.write('<br>')
document.write(txt.split('C'));
document.write('<hr>')
document.write(txt.toLocaleLowerCase())
document.write('<hr>')
document.write(txt.toLocaleUpperCase())
document.write('<hr>')
document.write(txt.indexOf('B'))
document.write('<hr>')
document.write(txt.substring(1,3))
document.write('<hr>')
document.write(txt.slice(1,3))
</script>
</body>
</html>
数组
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p id="demo1"></p>
<script>
var array=['A','B','D','VV','C']
console.log('长度',array.length)
console.log('下标',array[0])
console.log('索引',array.indexOf('B'))
array.push('C')
console.log('向后添加',array)
array.unshift('AA')
console.log('向前添加',array)
array.pop()
console.log('向后删除',array)
array.shift()
console.log('向前删除',array)
slice_array=array.slice(2,3)
console.log('切片',slice_array)
array.splice(1,2,'OO')
console.log(array)
new_array=array.join('')
console.log('拼接',new_array)
array.sort()
console.log('按照编码集排序',array)
array.reverse()
console.log(array)
new_array2=array.concat(array,[1,2,3])
console.log(new_array2)
</script>
</body>
</html>
其它方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p id="demo1"></p>
<script>
var num=3.1415926;
console.log('数字转字符串',num.toString())
console.log('数字 转字符串，四舍五入',num.toFixed())
var str='123.456 px';
var str1='1000';
console.log('解析字符串转为整数',parseInt(str))
console.log('解析字符串转为浮点数',parseFloat(str))
console.log('对象转成数字',Number(str))
console.log('对象转成数字',Number(str1))
console.log('检查参数是否为非数字',isNaN(str))
console.log('检查参数是否为非数字',isNaN(str1))
var arr=[1,2,3]
console.log(typeof arr);
console.log('判断是否为数组',Array.isArray(arr))
console.log('判断是否为数组',Array.isArray(str))
console.log('判断是否为数组',Array.isArray([1,2]))
</script>
</body>
</html>
Math方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p id="demo1"></p>
<script>
console.log('算术常用e',Math.E)
console.log('2的自然数',Math.LN2)
console.log('10的自然数',Math.LN10)
console.log('2为底的e的对数',Math.LOG2E)
console.log('10为底的e的对数',Math.LOG10E)
console.log('圆周率',Math.PI)
console.log('2的平方根的倒数',Math.SQRT1_2)
console.log('2的平方根',Math.SQRT2)
</script>
</body>
</html>
Date方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p id="demo1"></p>
<script>
var myDate=new Date();
console.log('打印当前日期',myDate)
console.log('获取一个月中的某一天：',myDate.getDate())
console.log('获取某一周的一天：',myDate.getDay())
console.log('返回月份：',myDate.getMonth())
console.log('返回四位数字年份：',myDate.getFullYear())
console.log('返回小时：',myDate.getHours())
console.log('返回分：',myDate.getMinutes())
console.log('返回毫秒数:',myDate.getTime())
console.log('对象转为字符串',myDate.toString())
console.log('返回原始值：',myDate.valueOf())
</script>
</body>
</html>
函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p id="demo1"></p>
<script>
// 1.字面量创建
function myFunc(){};
// 2.分配给其他对象的变量，数组和属性
var myFunc=function(){};
myFunc.push(function(){});
myObj.myFunc=function(){};
// 3.作为参数传递给其他函数
function myFunc(someFunc){
someFunc();
}
myFunc(function(){})
// 4.属性
var myFunc=function(){};
myFunc.someProperty="George";
// 5.作为返回值
function myFunc(){return function(){};}
</script>
</body>
</html>
定时器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p id="demo1"></p>
<script>
// 执行一次定时器
a=setTimeout(function(){
console.log('1')
},1000)
// 执行多次定时器
b=setInterval(function(){
console.log(2)
},1000)
//清除定时器
// window.clearTimeout(a)
// window.clearInterval(b)
</script>
</body>
</html>
jQuery学习
导入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 网页导入 -->
<!-- <script src="http://code.jquery.com/jquery-latest.js"></script> -->
<!-- 本地导入 -->
<script src="./jquery.js"></script>
</head>
<body>
<p id="demo1"></p>
<script>
$(function(){
alert(123)
})
</script>
</body>
</html>
选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./jquery.js"></script>
</head>
<body>
<p id="p1" class="p2">我是一个段落</p>
<script>
$("p") .click(function(){
alert('出来')
})
$("#p1").click(function(){
alert('id出来')
})
$(".p2").click(function(){
alert("class出来")
})
</script>
</body>
</html>
animate的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./jquery.js"></script>
<style type="text/css">
div {
background: #98bf21;
height: 100px;
width: 100px;
position: relative;
}
</style>
</head>
<body>
<button>开始动画</button>
<div>我是一个div标签</div>
<script>
//1.移动
// $(document).ready(function(){
// $("button").click(function(){
// $("div").animate({left:'250px'})
// })
// })
// 2.移动 淡化颜色且放大
// $(document).ready(function(){
// $("button").click(function(){
// $("div").animate({
// left:'250px',
// opacity:'0.5',
// height:'150px',
// width:'150px'
// })
// })
// })
// 移动并放大
// $(document).ready(function(){
// $("button").click(function(){
// $("div").animate({
// left:'250px',
// height:'+=150px',
// width:'+=150px'
// });
// });
// });
// // 可以重复消失重现
// $(document).ready(function(){
// $("button").click(function(){
// $("div").animate({
// height:'toggle'
// });
// });
// });
$(document).ready(function(){
$("button").click(function(){
var div=$("div");
div.animate({height:'300px', opacity:'0.4'}, "slow");
div.animate({width:'300px', opacity:'0.8'}, "slow");
div.animate({height:'100px', opacity:'0.4'}, "slow");
div.animate({width:'100px', opacity:'0.8'}, "slow");
});
});
</script>
</body>
</html>
ajax学习
django学习
Django流程
MVT流程
虚拟环境搭建
win安装
pip install virtualenv
linux安装
sudo pip install virtualenv
创建目录命令
django-admin startproject 项目名
运行服务器
python manage.py runserver
创建子应用
python manage.py startapp 子应用名称
模型迁移
python manage.py makemigrations
python manage.py migrate
站点管理
1.创建一个超级管理员账号
createsuperuser 创建超级管理员指令
2.将网站默认语言修改成中文
# LANGUAGE_CODE = 'en-us'
LANGUAGE_CODE = 'zh-hans'
# TIME_ZONE = 'UTC'
TIME_ZONE = 'Asia/Shanghai'
3.将自定义数据模型注册到admin后台管理中
4.修改中文
verbose_name
def __str__(self):
pass
class Meta:
pass
from django.db import models
# Create your models here.
class BookInfo(models.Model):
name=models.CharField(max_length=10,verbose_name='书籍名称')
def __str__(self):
return self.name
#内部类，修改当前模型的中文名称
class Meta:
verbose_name='书籍管理'
#在admin中删除s后缀
verbose_name_plural=verbose_name
class PeopleInfo(models.Model):
name=models.CharField(max_length=10,verbose_name='人物名称')
gender=models.BooleanField(verbose_name='性别')
#外键
book=models.ForeignKey(BookInfo,on_delete=models.CASCADE,verbose_name='所属书籍')
def __str__(self):
return self.name,self.gender
class Meta:
verbose_name='人物管理'
verbose_name_plural = verbose_name
5.模型显示修改成中文
apps.py 中修改成中文再settings中修改
6。视图函数
views.py 文件定义函数
def index(request):
pass
7.路由匹配
找到总路由和app中的子路由代码
8.模板的基本使用
工程根目录之下创建一个文件夹
动态参数用context参数
templates
9.base_dir和debug
base_dir:setttings.py中的一个常量
当前项目的路径
debug:
默认为false
在生产中关闭
10.静态资源设置
在项目根目录之下去创建static文件夹
settings.py中配置
11.django默认数据库变成mysql
需要安装mysql驱动
pymysql不支持django3
mysqlclient
模型
数据准备
insert into bookinfo(name, pub_date, readcount,commentcount, is_delete) values
('射雕英雄传', '1980-5-1', 12, 34, 0),
('天龙八部', '1986-7-24', 36, 40, 0),
('笑傲江湖', '1995-12-24', 20, 80, 0),
('雪山飞狐', '1987-11-11', 58, 24, 0);
insert into peopleinfo(name, gender, book_id, description, is_delete) values
('郭靖', 1, 1, '降龙十八掌', 0),
('黄蓉', 0, 1, '打狗棍法', 0),
('黄药师', 1, 1, '弹指神通', 0),
('欧阳锋', 1, 1, '蛤蟆功', 0),
('梅超风', 0, 1, '九阴白骨爪', 0),
('乔峰', 1, 2, '降龙十八掌', 0),
('段誉', 1, 2, '六脉神剑', 0),
('虚竹', 1, 2, '天山六阳掌', 0),
('王语嫣', 0, 2, '神仙姐姐', 0),
('令狐冲', 1, 3, '独孤九剑', 0),
('任盈盈', 0, 3, '弹琴', 0),
('岳不群', 1, 3, '华山剑法', 0),
('东方不败', 0, 3, '葵花宝典', 0),
('胡斐', 1, 4, '胡家刀法', 0),
('苗若兰', 0, 4, '黄衣', 0),
('程灵素', 0, 4, '医术', 0),
('袁紫衣', 0, 4, '六合拳', 0);
from django.db import models
# Create your models here.
class BookInfo(models.Model):
name=models.CharField(max_length=10,verbose_name='书籍名称')
pub_date=models.DateField(verbose_name='发布日期',null=True)
readcount=models.IntegerField(default=0,verbose_name='阅读量')
commentcount=models.IntegerField(default=0,verbose_name='评论量')
#逻辑删除
is_delete=models.BooleanField(default=False,verbose_name='逻辑删除')
class Meta:
verbose_name='图书管理'
verbose_name_plural=verbose_name
#表重命名
db_table='bookinfo'
def __str__(self):
return self.name
class PeopleInfo(models.Model):
#性别 枚举
GENDER_CHOICES=(
(0,'male'),
(1,'female')
)
name=models.CharField(max_length=20,verbose_name='人物名称')
gender=models.SmallIntegerField(choices=GENDER_CHOICES,default=0,verbose_name='性别')
description=models.CharField(max_length=200,null=True,verbose_name='描述信息')
book=models.ForeignKey(BookInfo,on_delete=models.CASCADE,verbose_name='书籍')
is_delete=models.BooleanField(default=False,verbose_name='逻辑删除')
class Meta:
verbose_name='人物信息'
verbose_name_plural=verbose_name
db_table='peopleinfo'
def __str__(self):
return self.name
shell 工具
pip install ipython==7.1.0
增加数据
#增加数据
from book.models import BookInfo,PeopleInfo
#方式一
book=BookInfo(name='python',pub_date='2021-10-28')
book.save()
#方式二
BookInfo.objects.create(name='java',pub_date='2021-10-29')
更新/修改
#更新\修改数据
book=BookInfo.objects.get(id=6)#查
book.name='c语言'
book.commentcount=122
book.save()
#方式二
BookInfo.objects.filter(id=6).update(name='爬虫',commentcount=100)
删除
#方式一
book=BookInfo.objects.get(id=6)
book.delete()
(1, {'book.PeopleInfo': 0, 'book.BookInfo': 1})
#方式二
BookInfo.objects.get(id=5).delete()
(1, {'book.PeopleInfo': 0, 'book.BookInfo': 1})
BookInfo.objects.filter(id=6).delete()
(0, {})
查询
基本查询
book=BookInfo.objects.get(id=1)
book
<BookInfo: 射雕英雄传>
BookInfo.objects.all()
<QuerySet [<BookInfo: 射雕英雄传>, <BookInfo: 天龙八部>, <BookInfo: 笑傲江湖>, <BookInfo: 雪山飞狐>]>
BookInfo.objects.all().count()
过滤查询
#查询编号为1的图书
BookInfo.objects.get(id=1)
<BookInfo: 射雕英雄传>
BookInfo.objects.get(id__exact=1)
<BookInfo: 射雕英雄传>
BookInfo.objects.filter(id__exact=1)[0]
<BookInfo: 射雕英雄传>
#查询书名包含‘湖’的图书
BookInfo.objects.filter(name__contains='湖')
<QuerySet [<BookInfo: 笑傲江湖>]>
BookInfo.objects.filter(name__icontains='湖')#添加i在字母中一区分大小写
<QuerySet [<BookInfo: 笑傲江湖>]>
#查询书名以’部‘结局的图书
BookInfo.objects.filter(name__endswith='部')
<QuerySet [<BookInfo: 天龙八部>]>
#查询书名为空的图书
BookInfo.objects.filter(name__isnull=True)
<QuerySet []>
#查询编号为1或3或5的图书
BookInfo.objects.filter(name__in=[1,3,5])
<QuerySet []>
BookInfo.objects.filter(id__in=[1,3,5])
<QuerySet [<BookInfo: 射雕英雄传>, <BookInfo: 笑傲江湖>]>
#查询编号大于3的图书
BookInfo.objects.filter(id__gt=3)
<QuerySet [<BookInfo: 雪山飞狐>]>
#查询编号大于等于3的图书
BookInfo.objects.filter(id__gte=3)
<QuerySet [<BookInfo: 笑傲江湖>, <BookInfo: 雪山飞狐>]>
#查询编号不等于3的图书
BookInfo.objects.exclude(id=3)
<QuerySet [<BookInfo: 射雕英雄传>, <BookInfo: 天龙八部>, <BookInfo: 雪山飞狐>]>
#查询1980年发表的图书
BookInfo.objects.filter(pub_date__year=1980)
<QuerySet [<BookInfo: 射雕英雄传>]>
#查询1990年1月1日后发表的图书
BookInfo.objects.filter(pub_date__gt='1990-1-1')
<QuerySet [<BookInfo: 笑傲江湖>]>
F对象和Q对象
from django.db.models import F
#查询阅读量大于等于评论量的图书
BookInfo.objects.filter(readcount__gte=F('commentcount'))
<QuerySet [<BookInfo: 雪山飞狐>]>
#查询阅读量大于2倍评论量的图书
BookInfo.objects.filter(readcount__gt=F('commentcount')*2)
<QuerySet [<BookInfo: 雪山飞狐>]>
#查询阅读量大于20，并且编号小于3的图书
BookInfo.objects.filter(readcount__gt=20,id__lt=3)
<QuerySet [<BookInfo: 天龙八部>]>
BookInfo.objects.filter(readcount__gt=20).filter(id__lt=3)
<QuerySet [<BookInfo: 天龙八部>]>
from django.db.models import Q
#查询阅读量大于20，或者编号小于3的图书，改写为Q对象
BookInfo.objects.filter(Q(randcount__gt=20)|Q(id__lt=3))
BookInfo.objects.filter(Q(readcount__gt=20)|Q(id__lt=3))
<QuerySet [<BookInfo: 射雕英雄传>, <BookInfo: 天龙八部>, <BookInfo: 雪山飞狐>]>
聚合函数的使用
from django.db.models import Avg,Sum,Max,Min,Count
BookInfo.objects.aggregate(Count('readcount'))
{'readcount__count': 4}
排序
BookInfo.objects.all().order_by('readcount')
<QuerySet [<BookInfo: 射雕英雄传>, <BookInfo: 笑傲江湖>, <BookInfo: 天龙八部>, <BookInfo: 雪山飞狐>]>
BookInfo.objects.all().order_by('-readcount')
<QuerySet [<BookInfo: 雪山飞狐>, <BookInfo: 天龙八部>, <BookInfo: 笑傲江湖>, <BookInfo: 射雕英雄传>]>
级联查询
#查询书籍为1的所有的人物信息
book=BookInfo.objects.get(id=1)
book.peopleinfo_set.all()#(一对多)
<QuerySet [<PeopleInfo: 郭靖>, <PeopleInfo: 黄蓉>, <PeopleInfo: 黄药师>, <PeopleInfo: 欧阳锋>, <PeopleInfo: 梅超风>]>
PeopleInfo.objects.filter(book=1)
<QuerySet [<PeopleInfo: 郭靖>, <PeopleInfo: 黄蓉>, <PeopleInfo: 黄药师>, <PeopleInfo: 欧阳锋>, <PeopleInfo: 梅超风>]>
#查询人物编号为1的书籍信息
person=PeopleInfo.objects.get(id=1)
person.book
<BookInfo: 射雕英雄传>
person.book.readcount
12
关联过滤查询（多对一）
#查询图书 图书人物为’郭靖‘
BookInfo.objects.filter(peopleinfo__name='郭靖')
<QuerySet [<BookInfo: 射雕英雄传>]>
分页
books=BookInfo.objects.all()
#导入分页类
from django.core.paginator import Paginator
#创建分页实例
paginator=Paginator(books,2)
<input>:1: UnorderedObjectListWarning: Pagination may yield inconsistent results with an unordered object_list: <class 'book.models.BookInfo'> QuerySet.
#获取指定页码的数据
page_books=paginator.page(1)
#获取分页数据
total_page=paginator.num_pages
total_page
2
HttpRequest对象
1.关键字查询
http://ip:port/path/1/1
路由定义：
path('path/<int:city_id>/<int:book_id>')
视图定义：
def book_shop(request,city_id,book_id):
pass
2.字符串查询
http://ip:port/path/?key=value&key_2=value
def test(request):
data=reques.GET
pass
取值
params_1=data.get('key')
params_2=request.GET.get('key')
params_3=data['key']
多个值
data_1=request.GET.getlist('QueryDict中的键')
3.表单数据
def register(request):
data=request.POST
print(data)
username=data.get('username')
password=data.get('password')
print('用户名：%s,密码：%s'%(username,password))
return HttpResponse('ok')
4.json数据
def json_data(request):
bytes_json=request.body
print(bytes_json)
#将前端发送过来的json数据转成python中的字典
import json
json_request_data=json.loads(bytes_json)
print('json_data:',json_request_data)
return HttpResponse('ok')
5.获取请求头信息
def get_header(request):
print(request.META)
return HttpResponse('ok')
6.转换器使用
#转换器
def book_shop(request,city_id,book_id):
return HttpResponse('书店')
from django.urls import path,converters
#自定义转换器类
class MobileConverter:
regex = '1[3-9]\d{9}'
def to_python(self, value):
return int(value)
def to_url(self, value):
return str(value)
#自定义转换器类
from django.urls import register_converter
register_converter(MobileConverter,'mobile')
7.HttpResponse
#HttpResponse
def response(request):
res=HttpResponse('ok',status=500)
#返回响应体
res['name']='liubu'
return res
8.JsonResponse
def send_json(request):
# info={
# 'name':'liubei',
# 'age':12
# }
# return JsonResponse(data=info)
book_staff=[
{
'name':'张飞',
'age':12
},
{
'name':'诸葛亮',
'age':23
}
]
#如果当前传递的参数不是字典，需要手动将safe=False
return JsonResponse(data=book_staff,safe=False)
9.重定向
#重定向
from django.shortcuts import redirect,reverse
def login(request):
return redirect(reverse('success'))
def login_success_index(request):
return HttpResponse('ok')
10.cookie
#设置cookie
def set_cookie(request):
#1.获取查询字符串数据
username=request.GET.get('username')
response=HttpResponse('set_cookie')
#2.设置cookie
response.set_cookie('name',username)
#删除cookie
# response.delete_cookie('name')
return response
def get_cookie(request):
#获取cookie信息
print(request.COOKIES)
return HttpResponse('ok')
11.sesion
#session
def set_session(request):
username=request.GET.get('username')
password=request.GET.get('password')
user_id=1
#session信息设置
request.session['user_id']=user_id
request.session['username']=username
request.session['password']=password
#session的过期时间
request.session.set_expiry()
#session 删除
# clear 删除 删除session中的数据 但是key保留
# request.session.clear()
# flush 删除 删除所有数据 包括key
# request.session.flush()
# 指定删除 指定key
del request.session['password']
return HttpResponse('set_session')
def get_session(request):
user_id=request.session.get('user_id')
username=request.session.get('username')
password=request.session.get('password')
content=f'{user_id},{username},{password}'
return HttpResponse(content)
12.session-redis配置
#session redis配置
CACHES={
'default':{
'BACKEND':'django_redis.cache.RedisCache',
'LOCATION':'redis://127.0.0.1:6379/1',
'OPTIONS':{
'CLIENT_CLASS':'django_redis.client.DefaultClient',
}
}
}
#将redis 数据库作用在session存储中
SESSION_ENGINE='django.contrib.sessions.backends.cache'
#选择存储的数据库
SESSION_CACHE_ALIAS='default'
13.视图
#类视图
from django.views.generic import View
class Login(View):
def get(self,request):
return HttpResponse('login class get')
def post(self,request):
return HttpResponse('login class post')
#函数视频
def login2(request):
if request.method=='POST':
return HttpResponse('login post')
else:
return HttpResponse('login get')
14.中间件
#自定义中间件
from django.utils.deprecation import MiddlewareMixin
#自定义中间件需要在settings.py中进行注册
class TestMiddleware(MiddlewareMixin):
def process_request(self,request):
username=request.COOKIES.get('name')
if username is None:
print('没有用户信息')
else:
print('用户账号状态为：登录')
# print('请求 每次请求前会被调用')
def process_response(self,request,response):
print('响应 每次响应前会被调用')
return response
Vue学习
体验
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
[[message]]
</div>
<script type="text/javascript">
var app=new Vue({
el:'#app',
delimiters:['[[',']]'],//修改符号
data:{
message:'hello world'
}
})
</script>
</body>
</html>
绑定元素属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<span>[[message]]</span>
<span v-bind:title="ads">鼠标悬停几秒钟查看此处动态</span>
<a v-bind:href="home">访问百度</a>
</div>
<script type="text/javascript">
var app=new Vue({
el:'#app',
delimiters:['[[',']]'],//修改符号
data:{
message:'hello world',
ads:'页面加载于'+new Date().toLocaleDateString(),
home:'http://www.baidu.com'
}
})
</script>
</body>
</html>
if判断
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<a href="" v-if="is_Login">个人中心</a>
<a href="" v-else="is_Login">请登录</a>
</div>
<script type="text/javascript">
var app=new Vue({
el:'#app',
delimiters:['[[',']]'],//修改符号
data:{
is_Login:true
}
})
</script>
</body>
</html>
for循环
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="(shop,index) in shops">[[index+1]]:[[shop]]</li>
</ul>
</div>
<script type="text/javascript">
var app=new Vue({
el:'#app',
delimiters:['[[',']]'],//修改符号
data:{
shops:['北京','重庆','上海','北京']
}
})
</script>
</body>
</html>
列表对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="item in items">[[item.name]],[[item.age]],[[item.gender]]</li>
</ul>
</div>
<script type="text/javascript">
var app=new Vue({
el:'#app',
delimiters:['[[',']]'],//修改符号
data:{
items:[
{
name:'吕布',
age:12,
gender:'男'
},
{
name:'吕布',
age:12,
gender:'男'
},
{
name:'吕布',
age:12,
gender:'男'
},
{
name:'吕布',
age:12,
gender:'男'
},
]
}
})
</script>
</body>
</html>
事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<button v-on:click="counter+=1">add 1</button>
<span>这是自增之后的值：[[counter]]</span>
</div>
<script type="text/javascript">
var app=new Vue({
el:'#app',
delimiters:['[[',']]'],//修改符号
data:{
counter:1
}
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<button v-on:click="login">登录</button>
</div>
<script type="text/javascript">
var app=new Vue({
el:'#app',
delimiters:['[[',']]'],//修改符号
methods:{
login:function(){
alert('登录中。。。')
}
}
})
</script>
</body>
</html>
表单
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 开发环境版本 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<table border="1">
<tr><td>用 户 名</td><td><input type="text" v-model="username" @blur="checkusername"> </td></tr>
<tr><td>密码</td><td><input type="password" v-model="password1"> </td></tr>
<tr><td>确认密码</td><td><input type="password" v-model="password2"></td></tr>
<tr><td>性别</td>
<td>
男<input type="radio" name="sex" value="boy" v-model="sex">
女 <input type="radio" name="sex" value="girl" v-model="sex"></td>
</tr>
<tr><td>爱好</td>
<td>
足球 <input type="checkbox" name="like" value="足球" v-model="like">
篮球 <input type="checkbox" name="like" value="篮球" v-model="like">
兵乓球<input type="checkbox" name="like" value="兵乓球" v-model="like">
</td>
</tr>
<tr><td>所在城市</td>
<td>
<select name="city" v-model="city">
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="广州">广州</option>
<option value="深圳">深圳</option>
</select>
</td>
</tr>
<tr><td>个人简介</td><td><textarea name="desc" v-model="desc"></textarea> </td></tr>
</table>
<button @click="register">注册</button>
</div>
</body>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
username:'',
password1:'',
password2:'',
sex:'',
like:[],
city:'',
desc:''
},
methods:{
register:function(){
alert(this.username+this.password1+this.password2+this.sex+this.like+this.city+this.desc)
},
checkusername:function(){
alert(this.username)
}
}
})
</script>
</html>
箭头函数
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 开发环境版本 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<table border="1">
<tr><td>用 户 名</td><td><input type="text" v-model="username" @blur="checkusername"> </td></tr>
<tr><td>密码</td><td><input type="password" v-model="password1"> </td></tr>
<tr><td>确认密码</td><td><input type="password" v-model="password2"></td></tr>
<tr><td>性别</td>
<td>
男<input type="radio" name="sex" value="boy" v-model="sex">
女 <input type="radio" name="sex" value="girl" v-model="sex"></td>
</tr>
<tr><td>爱好</td>
<td>
足球 <input type="checkbox" name="like" value="足球" v-model="like">
篮球 <input type="checkbox" name="like" value="篮球" v-model="like">
兵乓球<input type="checkbox" name="like" value="兵乓球" v-model="like">
</td>
</tr>
<tr><td>所在城市</td>
<td>
<select name="city" v-model="city">
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="广州">广州</option>
<option value="深圳">深圳</option>
</select>
</td>
</tr>
<tr><td>个人简介</td><td><textarea name="desc" v-model="desc"></textarea> </td></tr>
</table>
<button @click="register">注册</button>
</div>
</body>
<script type="text/javascript">
//普通函数
function test(){
//代码
}
//无形参，无返回值
function test_2(){
alert('123')
}
//有形参，无返回值
function test_3=data=>(){
alert(456)
}
//有形参，有返回
var data=(num1,num2)=>{
return num1+num2
}
</script>
</html>
