先进行前端的训练测试，在测试之前首先先写一个socket程序用来做服务端，页面下一章会提到，在这里我用的自己本机的8081端口做的服务端，代码如下：
import socketdef main(): ???sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM) ???sock.bind((‘localhost‘,8081)) ???sock.listen(5) ???while True: ???????print("server is working.....") ???????conn, address = sock.accept() ???????request = conn.recv(1024) ???????with open ("test.html","r",encoding=‘utf-8‘)as read_f: ???????????conn.sendall(bytes("HTTP/1.1 201 OK\r\n\r\n%s"%read_f.read(),"utf8")) ???????conn.close()if __name__ == ‘__main__‘: ???main()很简单的代码，上面的代码写了个循环，sock.bind后面接的localhost表示本机ip，8081表示端口.
重点介绍下前端的html文件，首先可以新建一个新的html文件，它会默认的有一些代码：
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title></head><body></body></html>
这些默认代码含义如下所示：
- <!DOCTYPE html> 告诉浏览器使用什么样的html或者xhtml来解析html文档
- <html></html>是文档的开始标记和结束标记。此元素告诉浏览器其自身是一个 HTML 文档，在它们之间是文档的头部<head>和主体<body>。
- <head></head>元素出现在文档的开头部分。<head>与</head>之间的内容不会在浏览器的文档窗口显示，但是其间的元素有特殊重要的意义。
- <title></title>定义网页标题，在浏览器标题栏显示。
- <body></body>之间的文本是可见的网页主体
通常写css的时候在body处写主体页面，在head处可以定义类。
下面介绍几种常用标签：
<hn>: n的取值范围是1~6; 从大到小. 用来表示标题.<p>: 段落标签. 包裹的内容被换行.并且也上下内容之间有一行空白.<b> <strong>: 加粗标签.<strike>: 为文字加上一条中线.<em>: 文字变成斜体.<sup>和<sub>: 上角标 和 下角表.<br>:换行.<hr>:水平线
块级标签：一个标签占用一行的叫块级标签，反过来就是内联标签
div标签是常用的块级标签。
比如本周的作业，在head处的定义：
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title> ???<style> ????.dingyi{ ???????????width: 500px; ???????????height: 30px; ???????????background: #ccd; ???????????float: left; ???????????text-align:center ???????} ????.dingyi2{ ???????????width: 500px; ???????????height: 30px; ???????????background: #ccd; ???????????float: right; ???????????text-align:center ???????} ????.dingyi3{ ???????????width: 500px; ???????????height: 500px; ???????????border-color: #ccd; ???????????float: right; ???????????text-align:center ???????} ????.dingyi4{ ???????????width: 1400px; ???????????height:700px; ???????????border: 1px solid #e1e1e1; ???????????<!--border-radius: 15%;--> ???????????padding-left: 200px; ???????????float: center; ???????????margin-left:220px; ??????} ????.dingyi5{ ???????????width: 800px; ???????????height:600px; ???????????border-right: 1px dashed #e1e1e2; ???????????padding-left: 100px; ???????????float: left; ???????????margin-left: 50px; ???????????margin-top: 50px; ??????} ????.dingyi6{ ???????????width: 300px; ???????????height:600px; ???????????<!--border: 1px solid #e1e1e2;--> ???????????padding-left: 100px; ???????????float: right; ???????????margin-top: 50px; ??????} ????</style></head>head定义完成后就可以定义body了：
<body> ???<div style="height: 37px;background-color:#ccd"> ???????<div class="dingyi" style="margin-top:7px"> ???????????<a href="https://www.baidu.com" style="height: 30px">*收藏本站</a> ???????</div> ???????<div class="dingyi2" style="margin-top:7px"> ???????????<a href="http://www.baidu.com" style="height: 30px">登录</a> ???????????<a href="http://www.baidu.com" style="height: 30px">免费注册</a> ???????????<a href="http://www.baidu.com" style="height: 30px">我的订单</a> ???????????<a href="http://www.baidu.com" style="height: 30px">VIP会员俱乐部</a> ???????</div> ???</div> ???<div> ???????<img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=508710356,2971756153&fm=27&gp=0.jpg" style="height:100px;width:150px;margin-left:200px"> ???</div> ???<!--<div style="height: 1000px">--> ???<div class="dingyi4"> ???????<div class="dingyi5"> ???????????<h1>注册新用户</h1> ???????????<h3 style="margin-left: 20px">*用户名：<input type="text" name="username"></h3> ???????????<h3 style="margin-left: 20px">*手机号：<input type="text" name="phone_number"></h3> ???????????<h3>*登录密码：<input type="text" name="password"></h3> ???????????<h3>*确认密码：<input type="text" name="password2"></h3> ???????????<h3 style="margin-left: 20px">*验证码：<input type="text" name="yanzhengma"></h3> ???????????<p><input type="radio" >我已阅读并同意 <a href=""><<用户注册协议>></a></p> ???????????<p><input type="submit" value="同意以上协议并注册" style="background:red; margin-left: 70px "></p> ???????</div> ???????<div class="dingyi6"> ???????????<div>我已经注册，现在就 <a href="">登录</a></div> ???????????<div><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1506061552313&di=953a3881c5dfc92c9644a10b19a3859d&imgtype=0&src=http%3A%2F%2Fimg2.tiandaoedu.com%2Fwww%2Fueditor%2Fnet%2Fupload%2F2016-01-30%2Fc0f1f525-f618-41f3-88cd-cff99ff95f95.jpg" style="height:150px;width:200px;margin-top:30px"></img></div> ???????</div> ???</div></body></html>
前端开发有个重要思想，盒子模型：
解释如下：
- margin: 用于控制元素与元素之间的距离；margin的最基本用途就是控制元素周围空间的间隔，从视觉角度上达到相互隔开的目的。
- padding: 用于控制内容与边框之间的距离；
- Border(边框): 围绕在内边距和内容外的边框。
- Content(内容): 盒子的内容，显示文本和图像。
通过以上代码就可以得到一个相应的页面：
后期还可以进行优化！
web前端一
原文地址：http://www.cnblogs.com/qianmeng/p/7574178.html