服务器端
#server.py sock.bind(('127.0.0.1',8800)) sock.listen(5) while 1: print('waiting...') conn,addr = sock.accept() #默认阻塞 data = conn.recv(1024) print('data',data) conn.send(b'HTTP/1.1 201 OK \r\n\r\n <h1>hello<h1><a href='https://www.jd.com'>click</a>') conn.close()
#index.html <h1>hello<h1> <a href='https://www.jd.com'>click</a> <img src="a.jpg" title='hello'/> #server.py sock.bind(('127.0.0.1',8800)) sock.listen(5) while 1: print('waiting...') conn,addr = sock.accept() #默认阻塞 data = conn.recv(1024) print('data',data) with open('index.html',encoding='utf-8') as f: response = f.read() conn.send(('HTTP/1.1 201 OK \r\n\r\n %s'% response).encode('utf-8')) conn.close()
块级标签 --> 自己独占一行,可以嵌套块级和内联标签
内联标签 --> 按内容划分,只能嵌套内联标签
head常用标签 <head> <title>Title</title> <link rel='icon' href='https://www.jd.com/favicon.ico'> <link rel='stylesheet' href='css.css'> <script src='hello.js'></script> </head>
body常用标签 <h1></h1> -- 块级标签 <p></p> -- 块级标签 <a href='' target='_blank'>点击</a> -- 内联标签 target='_blank' 在新页面加载 <div></div> -- 块级标签 <span></span> -- 内联标签 <img src='' alt='加载错误时的信息' title="悬浮信息" width='宽度' height="高度" /> - 图片标签 a标签的锚功能 <a href='#c1'>1</a> <a href='#c2'>2</a> <a href='#c3'>3</a> <h1></h1> <div style='height:500px;background-color: green' id='c1'>第一章</div> <div style='height:500px;background-color: wheat' id='c2'>第二章</div> <div style='height:500px;background-color: gray' id='c3'>第三章</div>
列表标签
无序列表
<ul>
<li>111</li>
<li>111</li>
<li>111</li>
</ul>
表格标签 cellspacing:边框与边框的距离 cellpadding:边框与内容之间的距离 <table border='1px' cellpadding="5px" cellspacing="2px"> <tr> 行--块级标签 <td>111</td> 列--内联标签 <td>111</td> 列 <td>111</td> 列 </tr> </table>
合并单元格
collspan 横向合并单元格
rowspan 纵向合并单元格
<!DOCTYPE html> <html lang='en'> <head> <meta charset='utf-8'> <title>Title</title> </head> <body> <table border='1px' cellpadding="5px" cellspacing="2px"> <tr> <td>111</td> <td>111</td> <td>111</td> <td>111</td> </tr> <tr> <td colspan='2'>111</td> <td>111</td> <td>111</td> </tr> <tr> <td>111</td> <td>111</td> <td>111</td> <td rowspan='2'>111</td> </tr> <tr> <td>111</td> <td>111</td> <td>111</td> </tr> </table> </body> </html>
form标签
用于向服务器传输数据，从而实现用户与web服务器交互
URL: 127.0.0.1:8080/blog/addBlog?a=1&b=2 IP: 127.0.0.1 PORT: 8080 path: /blog/addBlog data: a=1&b=2 method:表单提交方式 post/get,默认取值为get
<!DOCTYPE html> <html lang='en'> <head> <meta charset='utf-8'> <title>Title</title> </head> <body> <h3>注册页面</h3> <form action='' method='get' enctype='multiple/form-data'> <p> <label for='c1'>姓名：</label> <input type='text' name='username' placeholder='请输入姓名' id='c1'/> </p> <p> <label for='c2'>密码：</label> <input type='password' name=='pwd' placeholder='请输入密码' id='c2'/> </p> <p>性别：<input type='radio' name='gender' value='1'/>男<input type='radio' name='gender' value='2'/>女</p> <p>爱好：<input type='checkbox' name='favor' value='1' checked/>足球<input type='checkbox' name='favor' value='2'/>篮球<input type='checkbox' name='favor' value='3'/>排球</p> <p>头像：<input type='file'/></p> <p><input type='reset' value='重置'/></p> <p><input type='button' value='按钮' οnclick='alert(1234)'/></p> <p><input type='hidden' name='key' value='v1'/></p> <p> 省份： <select name='province'> <option value='1' selected>河北省</option> <option value='2'>日本省</option> <option value='3'>台湾省</option> <option value='4'>韩国省</option> <option value='5'>朝鲜省</option> </select> 省份： <select name='province' size='3'> <option value='1' selected>河北省</option> <option value='2'>日本省</option> <option value='3'>台湾省</option> <option value='4'>韩国省</option> <option value='5'>朝鲜省</option> </select> 省份： <select name='province' multiple='multiple'> <!-- multiple 按shift多选 --> <option value='1' selected>河北省</option> <option value='2'>日本省</option> <option value='3'>台湾省</option> <option value='4'>韩国省</option> <option value='5'>朝鲜省</option> </select> </p> <p> <textarea name='introduce' placeholder='个人介绍'></textarea> </p> <p><input type='submit' value='提交'/></p> </form> </table> </body> </html>
css
css和js都是在做 1.查找标签 2.操作标签
<!DOCTYPE html> <html lang='en'> <head> <meta charset='utf-8'> <title>Title</title> <style> /*按标签名选择*/ p { color: red; } div { background-color: green; } /*按id属性选择*/ #c1 { font-size: 40px; } /*按class属性选择*/ .c2 { background-color: rebeccapurple; } </style> </head> <body> <p class='c2'>hello1</p> <p id="c1">hello2</p> <p class='c2'>hello3</p> <div>DIV</div> </body> </html>
组合选择器
<!DOCTYPE html> <html lang='en'> <head> <meta charset='utf-8'> <title>Title</title> <style> /*后代选择器*/ .outer1 p{ color: red; } /*子代选择器*/ .outer2>p{ color: red; } /*多元素选择器*/ .outer1>p,.c3{ color:red; } </style> </head> <body> <div class='outer1'> <p>P</p> <div class='c2'> <p>pp</p> </div> </div> <div class='outer2'> <p>P</p> <div> <p>pp</p> </div> </div> <div class='c3'>P</div> </body> </html>
属性操作
<!DOCTYPE html> <html lang='en'> <head> <meta charset='utf-8'> <title>Title</title> <style> div { width: 300px; height: 300px; background: wheat; color: #53868B; text-align: center; /*水平居中*/ line-height: 300px; /*垂直居中*/ } </style> </head> <body> <div>hello!</div> </body> </html>
背景属性
<!DOCTYPE html> <html lang='en'> <head> <meta charset='utf-8'> <title>Title</title> <style> .c1{ width: 100%; height: 600px; background-image: url('图片路径'); /*以图片为背景*/ background-repeat: no-repeat; /*repeat-x水平重复 repeat-y垂直重复 no-repeat不重复*/ background-position: 100px 20px; /*距离左边框的距离 距离上边框的距离*/ /*center center 背景图片居中*/ } </style> </head> <body> <div class='c1'>hello!</div> </body> </html>
边框属性
<!DOCTYPE html> <html lang='en'> <head> <meta charset='utf-8'> <title>Title</title> <style> .c1{ width: 200px; height: 200px; border: solid red 2px; /* 边框加在了200*200的盒子的外面，所以总的面积是204*204 */ border-radius: 20%; } </style> </head> <body> <div class='c1'>hello!</div> </body> </html>
内外边距属性
<!DOCTYPE html> <html lang='en'> <head> <meta charset='utf-8'> <title>Title</title> <style> .c1,.c2{ width: 300px; height: 300px; padding: 50px; /*内边距 盒子由300*300变为400*400*/ border: 5px solid red; /*盒子变为 410*410*/ } .c1{ background-color: wheat; margin-bottom: 20px; } .c2{ background-color: goldenrod; margin-top: 20px; /*上下两个盒子之间的距离总共为20px,并不会相加*/ } </style> </head> <body> <div class='c1'>hello!</div> <div class='c2'>world!</div> </body> </html>
<!DOCTYPE html> <html lang='en'> <head> <meta charset='utf-8'> <title>Title</title> <style> .outer{ width: 100%; height: 600px; background-color: wheat; } .inner{ width: 80%; height: 300px; background-color: gray; margin: 0 auto; /*盒子居中*/ } </style> </head> <body> <div class='outer'> <div class='inner'></div> </div> </body> </html>
float属性
<!DOCTYPE html> <html lang='en'> <head> <meta charset='utf-8'> <title>Title</title> <style> body{ margin: 0; } .c1{ width: 100px; height: 70px; background-color: #53868B; float: left; } .c2{ width: 100px; height: 70px; background-color: cornflowerblue; float: left; } .c3{ width: 100px; height: 70px; background-color: darkmagenta; float: right; } </style> </head> <body> <div class='c1'>hello!</div> <div class='c2'>world!</div> <div class='c3'>world!</div> </body> </html>
属性选择器
<head> <style> [tom]{ color: red; } [jerry="ccc"]{ color: #dddddd; } [tom="bbb"][peter="ddd"]{ color:green; } [joh][elan]{ color:yellow; } div[jerry="ccc"]{ width:10px; } </style> </head> <body> <p tom='aaa'>P4</p> <p tom='bbb'>P4</p> <div jerry='ccc'>P4</div> <p tom='bbb' peter='ddd'>P4</p> <p joh='bbb' elan='ddd'>P4</p> </body>
hover选择器
<head> <style> c1{ width: 100px; height: 200px; background-color: green; } c1:hover{ background-color:red; } </style> </head> <body> <div class="c1"></div> </body>
<head> <style> .c2{ width: 100px; height: 100px; background-color: goldenrod; } .c3{ width: 100px; height: 100px; background-color: darkmagenta; } .box{ border: 1px solid red; } .box:hover .c2{ background-color: green; } </style> </head> <body> <div class="box"> <div class="c2"></div> <div class="c3"></div> </div> </body>
after选择器
追加内容
<head> <style> .outer:after{ content: "world"; color: red; } </style> </head> <body> <div class="outer"> <p>hello</p> </div> </body>
选择器的优先级
1.内嵌式(1000)>id(100)>class(10)>element(1)
2.color:red!important; 不管别的标签优先级多高，现在必须听我的
<head> <style> .c1 .c2 p{ color: red; } .c3 .c4{ color: green; } </style> </head> <body> <div class='c1'> <div class='c2'> <div class='c3' id='d1'> <p class='c4'>PPP</p> </div> </div> </div> </body>
<head> <style> .c1 .c2 p{ color: red; } .c3 .c4{ color: green; } #d2{ color: yellow; } </style> </head> <body> <div class='c1'> <div class='c2'> <div class='c3' id='d1'> <p class='c4' id='d2'>PPP</p> </div> </div> </div> </body>
样式继承
<head> <style> .c1{ color:red; } </style> </head> <body> <div class="c1"> DIV <div class="c2">DIV2</div> <p>PPP</p> </div> </body>
verticle-align
垂直对齐
<img />标签属性默认对齐的是基线，主要用于文本想和图片对齐的情况
背景属性
background-image:url('tom.jpg');
background-repeat: no-repeat;
background-position: center center;
display属性
display: block;
display: none; 空间的任何位置都不占用
display: inline-block; 兼具内联的一行显示和块级的可视长宽
display: none; 隐藏
float清除浮动
clear: none 默认允许两边都有可以浮动的对象
clear: left 不允许左边有浮动对象
clear: right 不允许右边有浮动对象
clear: both 不允许有浮动对象
.clearfix:after{
content: "";
display: block;
clear: both;
}
position之fixed定位
把一个div固定到窗口的某个位置
position: fixed;
top:
left:
right:
bottom:
相对定位
position: relative;
不脱离文档流，参照物是自己原本的位置，可以设置top,left,right,bottom
绝对定位
position: absolute;
脱离文档流，参照物是已定位的父级标签，可以设置top,left,right,bottom
一般而言，
1.给某些元素进行定位，设置absolute
2.给定位标签的父元素设置相对定位
京东轮播图
<html> <head> <style> .outer{ width: 738px; height: 424px; border: 1px solid red; margin: 100px auto; position: relative; } .img{ list-style: none; padding: 0; } .img li{ position: absolute; top: 0; left: 0; } .hide{ display: none; } .ico{ position: absolute; list-style: none; bottom: 20px; left: 210px; } .ico li{ width: 30px; height: 30px; background-color: gray; color: white; display: inline-block; text-align: center; line-height: 30px; border-radius: 50%; margin-left: 10px; } .ico li:hover{ background-color:red; } .btn{ width: 30px; height: 60px; background-color: darkgray; position: absolute; font-size: 22px; text-align: center; line-height: 60px; opacity: 0.5; color: white; top: 50%; margin-top: -30px; } .left{ left: 0; } .right{ right: 0; } </style> </head> <body> <div class='outer'> <ul> <li><a href=""><img src="img/1.png" alt="" /></a></li> <li class="hide"><a href=""><img src="img/2.png" alt="" /></a></li> <li class="hide"><a href=""><img src="img/3.png" alt="" /></a></li> <li class="hide"><a href=""><img src="img/4.png" alt="" /></a></li> <li class="hide"><a href=""><img src="img/5.png" alt="" /></a></li> </ul> <ul class="ico"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> <div class='btn left'> < </div> <div class='btn right'> > </div> </div> </body> </html>
后台管理布局
<html> <head> <style> *{ margin: 0; } .header{ width: 100%; height: 40px; background-color: #2459a2; } .leftmenu{ background-color: aquamarine; position: fixed; top: 40px; left: 0; bottom: 0; width: 200px; } .Con{ position: fixed; top: 40px; left: 200px; right: 0; bottom: 0px; overflow: auto; } </style> </head> <body> <div class="content"> <div class="leftmenu"></div> <div class="Con"> <h1>Tom</h1> <h1>Tom</h1> <h1>Tom</h1> <h1>Tom</h1> <h1>Tom</h1> <h1>Tom</h1> <h1>Tom</h1> <h1>Tom</h1> <h1>Tom</h1> <h1>Tom</h1> <h1>Tom</h1> <h1>Tom</h1> <h1>Tom</h1> <h1>Tom</h1> <h1>Tom</h1> <h1>Tom</h1> <h1>Tom</h1> <h1>Tom</h1> <h1>Tom</h1> <h1>Tom</h1> <h1>Tom</h1> <h1>Tom</h1> <h1>Tom</h1> <h1>Tom</h1> </div> </div> </body> </html>
1628
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
