html代码注释快捷键就是ctrl+/
1.前端的主要内容：
html
css
js(jquery,bootstrap)
2.今天内容：
Html 和一部分css
a.web运行的本质
对于所有的web应用，本质上其实就是一个socket服务端，用户的浏览器其实就是一个socket客户端
b.html标签
1.本质就是浏览器认识的一套规则
2.20个左右html标签
3.文件以.html结尾 .htm结尾
c.html测试
1.从pycharm打开测试
2.本地文件打开测试
d.主流浏览器及其份额
chorme firefox IE
http://tongji.baidu.com/data/browser
e.html的文件格式
<!DOCTYPE html> ---->html5相关规则进行解析
f.html标签格式
两种格式：
单闭合：<标签名 属性1=“属性值1” 属性2=“属性值2”…… /> 例子：<meta charset="utf8" />
双闭合：<标签名 属性1=“属性值1” 属性2=“属性值2”……>内容部分</标签名> 例子：<h1>helloworld</h1>
g.head头标签内部：
1.meta
看不到任何的显示效果，只是用来描述网页一些信息
<meta charset="UTF-8"/> #网页的编码
<meta name="Author" content="Zabbix SIA" />
搜索引擎来爬取使用
2.title
网页标题
3.link ---css使用
4.srcipt --- js 使用
h.body体内标签
0.注释：
a.unix注释风格
#注释
b.//单行注释
/**/多行注释
c.html注释
<!--这是注释-->
1.排版标签
<p></p>:段落标签
<br/>：换行标签
<hr/>:华丽丽的分割线
h1----h6
<marquee direction="right">欢迎！</marquee> #跑马灯效果
2.html常用标签之列表
无序列表
ul li
有序列表
ol
举例：
<ul type="circle">
<!--square方块 circle 空心圆-->
<li>php</li>
<li>python</li>
<li>linux</li>
</ul>
<ol >
<li>php</li>
<li>python</li>
<li>linux</li>
</ol>
3.html常用标签之a标签
a.基本用法：
<a href="http://www.baidu.com" target="_blank">跳转百度</a><br/>
target: _blank 在新开页面进行跳转
_self 本当前页进行跳转
b. <a href="./1.html" target="_blank">跳转到当前页面</a>
<a href="../1.html" target="_blank">跳转到上级目录</a>
c. <a href="http://www.xx.com/下载的文件" target="_blank">点击网络下载</a>
<a href=’’ >点击本地下载</a>
4.html常用标签之img标签
a.<img src=’网络地址’ alt=’’ />
b.<img src=’本地地址’/>
举例：
<img src="https://n.sinaimg.cn/news/791/w955h636/20181023/yckD-hmuuiyw1986234.jpg"/>
5.html常用的标签之div和span元素
a.没有任何效果
b.块级元素 包括:p ul ol div h1—h6
行内标签 包括:span
c.和css配合使用，美化
6.html常用标签之table标签
基本的表格
<table border="1px" width="300px" >
<tr>
<th>id</th>
<th>name</th>
<th>hobby</th>
</tr>
<tr>
<td align="center">1</td>
<td>frank</td>
<td>football</td
</tr>
<tr>
<td>2</td>
<td>sunny</td>
<td>basketball</td
</tr>
</table>
7.html常用标签之form表单元素标签
1.form表单的基本概念
用来收集用户信息的
2.常见的input标签
<form action="http://127.0.0.1:8888/index" method="post" enctype="application/x-www-form-urlencoded">
用户名：<input type="text" name="user"/>
密码： <input type="password" name="pwd">
<!--简单按钮-->
<!--<input type="button" value="登陆">-->
<!--提交按钮-->
<input type="submit" value="登陆">
<!--重置按钮-->
<input type="reset" value="重置">
<input type="hidden" value="hide" name="secret">
<!--文件按钮-->
<input type="file"><br/>
<!--单选按钮-->
男：<input type="radio" value="male" name="gender" >
女：<input type="radio" value="female" name="gender">
<!--复选按钮-->
<br/>
篮球：<input type="checkbox" value="basketball" name="hobby"/>
足球：<input type="checkbox" value="football" name="hobby"/>
乒乓球：<input type="checkbox" value="pingong" name="hobby"/>
<!--下拉框-->
<br/>
<select name="city">
<option value="bj">北京</option>
<option value="sh" selected>上海</option>
<option value="tj">天津</option>
</select>
<!--文本框-->
<br/>
<textarea cols="宽度" rows="高度" name="名称">
默认内容
</textarea>
</form>
tornado服务接收端
pip3 install tornado
import tornado.ioloop
import tornado.web
class MainHandler(tornado.web.RequestHandler):
def get(self):
print('1111')
username=self.get_argument('user')
password=self.get_argument('pwd')
print(username,password)
#连接数据库
# cur.execute('select name ,pwd from users where name=%s and pwd=%s' %username,password)
# if res:
# #跳转
# self.redirect('/main')
self.write("Hello, world")
def post(self):
username=self.get_argument('user')
password=self.get_argument('pwd')
gender=self.get_argument('gender')
print(username,password)
print(gender)
self.write('this is a test')
application = tornado.web.Application([
(r"/index", MainHandler),
])
if __name__ == "__main__":
application.listen(8888)
tornado.ioloop.IOLoop.instance().start()
1
服务端：
import socket
def handle_request(client):
buf = client.recv(1024)
client.send(bytes("HTTP/1.1 200
OK\r\n\r\n", encoding='utf-8'))
client.send(bytes("Hello,
World", encoding='utf-8'))
def main():
sock = socket.socket(socket.AF_INET,
socket.SOCK_STREAM)
sock.bind(('localhost', 8000))
sock.listen(5)
while True:
connection, address =
sock.accept()
handle_request(connection)
connection.close()
if __name__ == '__main__':
main()
前后端分离方法：
修改python内容：
# def handle_request(client):
# buf = client.recv(1024)
# client.send(bytes("HTTP/1.1 200 OK\r\n\r\n", encoding='utf-8'))
# ftp= open('a','rb')
# data=ftp.read()
# client.send(data)
创建a文件：<h1 style='color:red;'>hello world</h1>
客户端：
浏览器：http://localhost:8000/
Elements:加载元素文件
Console:js
Sources:资源
Network:http协议
网页布局的三个阶段和CSS的基本概念
1.网页布局的三个阶段
2.CSS的基本概念
3.CSS的优点
实现了内容与样式的分离，使网站维护方便
CSS的语法结构
CSS的三种引入方式：
1.行内样式
<body>
<!--行内样式-->
<div style="border:1px solid red;color:blue">123</div>
</body>
2.内部样式
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--内部样式-->
<style type="text/css">
div{
border:1px solid red;
color:yellow;
}
</style>
</head>
3.外部样式
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--外部样式-->
<link rel="stylesheet" href="a.css">
<!--内部样式-->
<style type="text/css">
</style>
</head>
<body>
a.css
div{
border:1px solid red;
color:green;
}
CSS常用选择器
1.标签选择
div{
border:1px solid red;
color:blue;
}
span{
color: red;
}
2.ID选择器
#i1{
font-size: 23px;
}
3.类别选择器
.i2{
font-size:32px;
}
4.通用选择器
*{background-color:blue}
5.包含选择器
#i1 .i3{
color:darkgoldenrod;
}
6.分组选择器
.i1, .i3{
color:darkgoldenrod;
}
7.伪类选择器
a:link { color:#ff0000;text-decoration:none} /*默认样式，超链接文字为红色*/
a:visited { color:#00ff00; } /*访问过后，超链接文字为绿色*/
a:hover { color:#0000ff; } /*鼠标经过，超链接文字为蓝色*/
a:active { color:#ffff00; } /*鼠标按下时，超链接文字为黄色*/
<a href="http://www.baidu.com">百度</a>
8.选择器的优先级
行内样式 > id选择器 > 类选择器 > 标签选择器 > 通用选择器
CSS常用选择器代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--外部样式-->
<!--<link rel="stylesheet" href="a.css">-->
<!--内部样式-->
<style type="text/css">
div{
border:1px solid red;
color:blue;
}
span{
color: red;
}
#i1{
font-size: 23px;
}
.i2{
font-size:32px;
}
#i1 .i3{
color:darkgoldenrod;
}
.i1, .i3{
color:darkgoldenrod;
}
/**{background-color:blue}*/
a:link { color:#ff0000;text-decoration:none} /*默认样式，超链接文字为红色*/
a:visited { color:#00ff00; } /*访问过后，超链接文字为绿色*/
a:hover { color:#0000ff; } /*鼠标经过，超链接文字为蓝色*/
a:active { color:#ffff00; } /*鼠标按下时，超链接文字为黄色*/
</style>
</head>
<body>
<span style="">1111</span>
<!--行内样式-->
<div style="">123</div>
<div id="i1">
<div class="i3">this is i1</div>
</div>
<div class="i1">789</div>
<div class="i1">987</div><br/>
<a href="http://www.baidu.com">百度</a>
</body>
</html>
a.css
div{
border:1px solid red;
color:green;
}
段落（文本）属性和边框以及背景属性
1.文本的行高--- line-height: 48px;
2.文本的对齐--- text-align: center;和文本的修饰--- 定义文本下的一条线；定义穿过文本一条线
text-decoration:underline;text-decoration:line-through;
3.边框设置--- border:1px solid red;
4.文字属性
布局属性
元素浮动-float
外边距-margin
内边距-padding
display属性
块级标签
内连标签
浮动代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.i1{
width: 96px;
height: 200px;
border: 1px solid red;
float: right;
margin-left: 2px;
}
.pg-content{
width: 300px;
border: 1px solid blue;
}
</style>
</head>
<body>
<div class="pg-content">
<div class="i1">div1</div>
<div class="i1">div2</div>
<div class="i1">div3</div>
<div style="clear: both"></div>
</div>
</body>
</html>
外边距代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="width: 600px;height: 300px;border: 1px solid red">
<div style="width:200px;height: 100px;border: 1px solid blue">asdfasdfs</div>
</div>
<span style="width: 123px;height: 100px;background: red;display: block">123</span>
</body>
</html>