Python之前端html
浏览量:1213
一、web框架的实质
众所周知，对于所有的Web应用，本质上其实就是一个socket服务端，用户的浏览器其实就是一个socket客户端。
#!/usr/bin/env python
# -*- conding:utf-8 -*-
__Author__ = "YoungCheung"
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'))
client.send(bytes("<h1 style='background-color:red;'>Hello,
World<h1>",encoding='utf-8'))
# f = open('index.html','rb')
# data = f.read()
# f.close()
# client.send(data)
def main():
sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
sock.bind(('localhost',8080))
sock.listen(5)
while True:
connection, address = sock.accept()
handle_request(connection)
connection.close()
if __name__ == '__main__':
main()启动python程序,浏览器访问：http://127.0.0.1:8080/
注意：还可以写一个html文件，让程序去读取这个html文件，然后执行结果和上面一致
html内容：
<h1 style='background-color:red;'>Hello, World<h1>
代码添加如下内容：
f = open('index.html','rb')
data = f.read()
f.close()
client.send(data)二、html
HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写，他是一种制作万维网页面标准语言（标记）。相当于定义统一的一套规则，大家都来遵守他，这样就可以让浏览器根据标记语言的规则去解释它。浏览器负责将标签翻译成用户“看得懂”的格式，呈现给用户！(例：djangomoan模版引擎)
A、html文档树：
B、html测试方法：
本地测试
- 找到文件路径，直接浏览器打开
- pycharm打开测试
C、编写html文件
默认创建的html模板
<!DOCTYPE html> <!--默认就是统一的规范--> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> </body> </html>
1.DOCTYPE
Doctype告诉浏览器使用什么样的html或xhtml规范来解析html文档
有和无的区别：
BackCompat：标准兼容模式未开启（或叫怪异模式[Quirks mode]、混杂模式）
CSS1Compat：标准兼容模式已开启（或叫严格模式[Standards mode/Strict mode]）
这个属性会被浏览器识别并使用，但是如果你的页面没有DOCTYPE的声明，那么compatMode默认就是BackCompat,这也就是恶魔的开始 -- 浏览器按照自己的方式解析渲染页面，那么，在不同的浏览器就会显示不同的样式。如果你的页面添加了那么，那么就等同于开启了标准模式，那么浏览器就得老老实实的按照W3C的标准解析渲染页面，这样一来，你的页面在所有的浏览器里显示的就都是一个样子了。
有，用什么？
Doctype告诉浏览器使用什么样的html或xhtml规范来解析html文档, dtd文件则包含了标记、attributes 、properties、约束规则。
2<html></html>
-html 标签
-lang=en 标签内部属性
3.Meta(metadata information)
提供有关页面的元信息，例：页面编码、刷新、跳转、针对搜索引擎和更新频度的描述和关键词
a.页面编码（告诉浏览器什么是页面编码）
< meta http-equiv=“content-type” content=“text/html;charset=utf-8”>
b.刷新和跳转
< meta http-equiv="Refresh" Content="30″> < meta http-equiv=”Refresh“ Content="5; Url=http://www.baidu.com" />
c.关键词
< meta name="keywords" content="星际2,专访,F91,小色,JOY" >
d.描述
例如：cnblogs
e.X-UA-Compatible
微软的IE6是通过XP、Win2003等操作系统发布出来，作为占统治地位的桌面操作系统，也使得IE占据了通知地位，许多的网站开发的时候，就按照IE6的标准去开发，而IE6自身的标准也是微软公司内部定义的。到了IE7出来的时候，采用了微软公司内部标准以及部分W3C的标准，这个时候许多网站升级到IE7的时候，就比较痛苦，很多代码必须调整后，才能够正常的运行。而到了微软的IE8这个版本，基本上把微软内部自己定义的标准抛弃了，而全面的支持W3C的标准，由于基于对标准彻底的变化了，使得原先在早期IE8版本上能够访问的网站，在IE8中无法正常的访问，会出现一些排版错乱、文字重叠，显示不全等各种兼容性错误。
与任何早期浏览器版本相比，Internet Explorer 8 对行业标准提供了更加紧密的支持。 因此，针对旧版本的浏览器设计的站点可能不会按预期显示。 为了帮助减轻任何问题，Internet Explorer 8 引入了文档兼容性的概念，从而允许您指定站点所支持的 Internet Explorer 版本。 文档兼容性在 Internet Explorer 8 中添加了新的模式；这些模式将告诉浏览器如何解释和呈现网站。 如果您的站点在 Internet Explorer 8 中无法正确显示，则可以更新该站点以支持最新的 Web 标准（首选方式），也可以强制 Internet Explorer 8 按照在旧版本的浏览器中查看站点的方式来显示内容。 通过使用 meta 元素将 X-UA-Compatible 标头添加到网页中，可以实现这一点。
当 Internet Explorer 8 遇到未包含 X-UA-Compatible 标头的网页时，它将使用 指令来确定如何显示该网页。 如果该指令丢失或未指定基于标准的文档类型，则 Internet Explorer 8 将以 IE5 模式（Quirks 模式）显示该网页。更多
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8;IE=EmulateIE7" />
4.title 网页头部信息
<title>Title</title>
5.html标签分类
- 自闭合标签
<meta charset="UTF-8">
- 主动闭合标签
title>YoungCheung</title>
6.Link
- css
< link rel="stylesheet" type="text/css" href="css/common.css" >
- icon 图标
< link rel="shortcut icon" href="image/favicon.ico">
7.style
< style type="text/css" >
.bb{
background-color: red;
}
< /style>8.script
- 引入文件
< script type="text/javascript" src="http://www.googletagservices.com/tag/js/gpt.js"> </script >
- 写js代码
< script type="text/javascript" > ... </script >
D、标签
a.常用标签
块级标签：div（白板），H系列（加大加粗），p标签（段落和段落之间有间距）
行内（内联）标签： a,span（白板）,select等
b.各种符号
p和br标签
p 表示段落，默认段落之间是有间隔的
br 表示换行，注意最好加上斜杠</br>
H标签
<h1></h1>到<h6></h6>字体由大变小 ，各占一行
span标签
白板，占自己位置的宽度
div标签
块级标签，白板，各占一行
chorme审查元素的使用
- 定位
- 查看样式
示例：登录
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form action="http://localhost:8888/index" method="POST"> <!--属性action表示提交表单的位置，方法method可以替换为"GET"--> <input type="text" name="user" /> <input type="text" name="email"/> <input type="password" name="pwd" /> <!--<input type="button" value="登录1"/>--> <input type="submit" value="登录2"/> </form> </body> </html>
POST个get的区别：
用get提交时地址栏会显示你提交了内容，但是通过post提交时看不到提交的内容
py程序代码：
import tornado.ioloop
import tornado.web
# pip3 install tornado
class MainHandler(tornado.web.RequestHandler):
def get(self,*args, **kwargs):
u = self.get_argument('user')
e = self.get_argument('email')
p = self.get_argument('pwd')
if u == 'YoungCheung' and p == '123456' and e == 's.c.young@hotmail.com':
print(u,e,p)
self.write("欢迎登录！")
else:
print(u,e,p)
self.write("去你妈的赶紧滚！")
def post(self, *args, **kwargs):
u = self.get_argument('user',None)
e = self.get_argument('email',None)
p = self.get_argument('pwd',None)
print(u,e,p)
self.write('POST')
application = tornado.web.Application([
(r"/index", MainHandler),
])
if __name__ == "__main__":
application.listen(8888)
tornado.ioloop.IOLoop.instance().start()启动上面的python tornado代码，浏览器访问index.html就会出现登录框
出现上面内容表示自己访问错地址了
input标签
input type='text' - name属性，value="YoungCheung" input type='password' - name属性，value="YoungCheung" input type='submit' - value='提交' 提交按钮，表单 input type='button' - value='登录' 按钮 input type='radio' - 单选框 value，checked="checked"，name属性（name相同则互斥） input type='checkbox' - 复选框 value, checked="checked"默认选中，name属性（批量获取数据） input type='file' - 依赖form表单的一个属性 enctype="multipart/form-data" input type='rest' - 重置
示例
Checkbox
redio
男 女 保密
男 女 保密
password
button
file
提交文件时：
enctype='multipart/form-data' method='POST'
textarea
<textarea >默认值</textarea> - name 属性 - id - cols 宽度 - rows 高度
示例：
select 可以加
name属性，规定下拉列表的名称。
option里面有value,提交到后台，
size 规定下拉列表中可见选项的数目。，
muiltiple规定可选择多个选项。
a标签
<a> 标签可以是超链接或锚。
在 HTML5 中，<a> 标签始终是超链接，但是如果未设置 href 属性，则只是超链接的占位符。
href =“URL” 超链接
target 规定在哪里打开文档
_blank #打开一个新的窗口
_parent #当前窗口打开
_self
_top
framename #新建窗口打开
img标签
<img src="" alt="">
src="url" 规定显示图像的 URL。
alt="text" 规定图像的替代文本。
title=“text" 图片主题
其他属性：定义图片的长宽高
列表____三类标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <ul> <li>第一点</li> <li>第二点</li> <li>第三点</li> </ul> <!--<ul><li>内容</li></ul> 给段落前面加点表示--> <ol> <li>首先</li> <li>接下来</li> <li>最后</li> </ol> <!--<ol><li>内容</li>></ol> 给段落加123序号--> <dl> <dt>AAA</dt> <dd>aaa</dd> <dt>BBB</dt> <dd>bbb</dd> <!--<dl><dt>标题</dt><dd>内容</dd></dl>--> </dl> </body> </html>
table(表格)标签
<table border="1"> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> </table>
结果：
| Month | Savings |
|---|---|
| January | $100 |
标准格式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <table border="1"> <thead> <tr> <th>表头1</th> <th>表头2</th> <th>表头3</th> <th>表头4</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>1</td> <td>1</td> <td>1</td> </tr> </tbody> </table> </body> </html>
效果：
| 表头1 | 表头2 | 表头3 | 表头4 |
|---|---|---|---|
| 1 | 1 | 1 | 1 |
合并单元格：rowspan="3" #纵向合并colspan="3" #横向合并
label
可用于点击文件，使得关联的标签获取光标
<div> <h2>label</h2> 姓名：<input id='name1' type='text' /> 婚否：<input id='marriy1' type='checkbox' /> <br/> <label for='name2'>姓名：<input id='name2' type='text' /></label> <label for='marriy2'>婚否：<input id='marriy2' type='checkbox' /></label> </div>
效果：
姓名： 婚否：
fieldset标签
<!DOCTYPE HTML> <html> <body> <form> <fieldset> <legend>健康信息</legend> 身高：<input type="text" /> 体重：<input type="text" /> </fieldset> </form> <p>如果表单周围没有边框，说明您的浏览器太老了</p> </body> </html>
效果：
如果表单周围没有边框，说明您的浏览器太老了
.
神回复
发表评论:
◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。