Web服务的本质(socket实例)
import socketdef 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("welcome"))def main(): ???sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM) ???sock.bind((‘localhost‘, 8000)) ???sock.listen(5) ???while True: ???????try: ???????????connection, address = sock.accept() ???????????handle_request(connection) ???????????connection.close() ???????except: ???????????passif __name__ == ‘__main__‘: ???main()HTML文档树
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title></head><body></body></html>
Doctype
Doctype告诉浏览器使用什么样的html或xhtml规范来解析html文档
<!DOCTYPE html>
标签分类
1. 自闭和标签
<title>Title</title>
2. 主动闭合标签
<meta />
所有标签可以分为两类
- 块级标签：div，H系列，p级标签... (特性，占整行内容，可以设置高度和宽度)
- 内联标签(行内标签)：span标签... (特性，有多少占多少，无法设置高度和宽度)
head部分
Meta(metadata information)
提供有关页面的元信息，例：页面编码、刷新、跳转、针对搜索引擎和更新频度的描述和关键词
1. 页面编码（告诉浏览器使用什么编码）
< meta http-equiv=“content-type” content=“text/html;charset=utf-8”/>
2. 刷新和跳转
< meta http-equiv="Refresh" Content="30"/>< meta http-equiv="Refresh" Content="5"; Url="http://www.autohome.com.cn"/>
3. 关键字(搜索引擎的爬虫就是根据这里写的关键字去寻找对用的页面)
<meta name="keywords" content="Html,css,社区,python"/>
4. 描述
<meta name="description" content="描述信息"/>
5. X-UA-Compatible
用来解决HTML代码与IE之间的兼容，更多
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
title
网页的标题
<title>Title</title>
link
1. 引入CSS文件
< link rel="stylesheet" type="text/css" href="css/common.css" >
2. 页面图标 icon
< link rel="shortcut icon" href="image/favicon.ico">
Style
在页面中写css样式
<style> ???.pg-head { ???????height: 30px; ???????background-color: green; ???????position: fixed; ???????top: 0; ???????right: 0; ???????left: 0; ???}</style>Script
1. 引入JS文件
< script type="text/javascript" src="js/gpt.js"> </script >
2. 写JS代码
< script type="text/javascript" > ... </script >
body
网页图片HTML代码大全
P和br标签
p表示段落，默认段落之间是有间隔的！
br 是换行
<p>段落内容</p><br/>
H标签
<h1>H1</h1><h2>H2</h2><h3>H3</h3><h4>H4</h4><h5>H5</h5><h6>H6</h6>
div和span标签
div是块级标签
span是行内标签
<div>hello world</div><span>hello world</span>
form表单
input标签和form标签的结合
<form action="http://localhost:8888/index" method="GET"> ???<input type="text" name="user" /> ???<input type="password" name="pwd" /> ???<input type="submit" value="登录" /></form>
action为提交的地址，method为提交的方式（GET：将提交的数据嵌套的URL上进行提交；POST：将提交的数据放在body中提交）
input type="text" - 普通文本输入框 属性：name，values
input type="password" - 密文输入框 属性：name，values
<form action="http://www.spdir.top" method="POST"> ???user: <input type="text" name="user" valuse="user" /> ???password: <input type="password" name="pwd" values="password" /></form>
input type=‘submit‘ - 提交表单按钮，属性values
input type=‘button‘ - 普通按钮，没有实际意义(用于结合JS使用)，属性values
input type=‘reset‘ - 重置 ，属性values
<form action="http://www.spdir.top" method="POST"> ???<input type="submit" value="提交"/> ???<input type="button" value="按钮"/> <input type="reset" value="重置"/></form>
input type=‘radio‘ - 单选框，属性value，checked="checked"，name（name相同则互斥），checked="checked"设置默认值
<form action="http://www.spdir.top" method="POST"> ???男: <input type="radio" name="gender" value="1"/> ???女: <input type="radio" name="gender" value="2" /> ???保密: <input type="radio" name="gender" value="3" checked="checked" /></form>
input type=‘checkbox‘ - 复选框 属性value, checked="checked"，name属性（批量获取数据），checked="checked"设置默认值
<form action="http://www.spdir.top" method="POST"> ???<p>爱好</p> ???篮球: <input type="checkbox" name="interest" value="1"/> ???足球: <input type="checkbox" name="interest" value="2"/> ???羽毛球: <input type="checkbox" name="interest" value="3"/> ???游泳: <input type="checkbox" name="interest" value="3"/> ???读书: <input type="checkbox" name="interest" value="4" checked="checked"/> ???学习: <input type="checkbox" name="interest" value="5"/></form>
input type=‘file‘ - 上传文件，依赖form表单的一个属性 enctype="multipart/form-data"
<form action="http://www.spdir.top" enctype="multipart/form-data" method="POST"> ???<input type="file" name="fname" /></form>
form与select的结合
属性：selected="selected"用来设置默认值
<form action="http://www.spdir.top" ?method="POST"> ????city1: ???????????<select name="city1"> ???????????????<option value="1">北京</option> ???????????????<option value="2" selected="selected">上海</option> ???????????????<option value="3">广州</option> ???????????????<option value="4">深圳</option> ???????????????<option value="5">成都</option> ???????????</select></form>
在select标签中设置一个属性size指定显示的多少个值
<form action="http://www.spdir.top" ?method="POST"> ???????????city2: ???????????<select name="city2" size="6"> ???????????????<option value="1">北京</option> ???????????????<option value="2" selected="selected">上海</option> ???????????????<option value="3">广州</option> ???????????????<option value="4">深圳</option> ???????????????<option value="5">成都</option> ???????????</select></form>
在select标签中设置一个multiple="multiple"属性可以进行多选
<form action="http://www.spdir.top" ?method="POST"> ???????????city3: ???????????<select name="city3" multiple="multiple" size="5"> ???????????????<option value="1">北京</option> ???????????????<option value="2" selected="selected">上海</option> ???????????????<option value="3">广州</option> ???????????????<option value="4">深圳</option> ???????????????<option value="5">成都</option> ???????????</select></form>
进行分组，使用optgroup标签嵌套option标签
<form action="http://www.spdir.top" ?method="POST"> ???????????city4: ???????????<select name="city4"> ???????????????<optgroup label="河北省"> ???????????????????<option value="1">石家庄</option> ???????????????????<option value="2">邯郸</option> ???????????????</optgroup> ???????????????<optgroup label="北京"> ???????????????????<option value="3" selected="selected">朝阳</option> ???????????????????<option value="4">海淀</option> ???????????????</optgroup> ???????????</select></form>
form与textarea的结合
textarea标签可以进行多行输入，而input的type="text"只能进行单行输入
<form action="http://www.spdir.top" ?method="POST"> ???<textarea name="word"></textarea></form>
a标签
- 跳转
<a href="http://wwww.baidu.com">当前页面打开</a><a href="http://www.baidu.com" target="_blank">新的页面打开</a>
- 锚
在跳转到的标签内使用id属性设置一个id，在a标签中使用href属性进行跳转
<!--锚--><a href="#i1">第一章</a><a href="#i2">第二章</a><a href="#i3">第三章</a><div id="i1" style="height: 600px;">第一章内容</div><div id="i2" style="height: 600px;">第二章内容</div><div id="i3" style="height: 600px;">第三章内容</div>
img标签
用来引入图片
属性：src - 图片的地址
title - 图片的标题
alt - 当图片的地址找不到无法显示的时候，显示alt的内容
<img src="a.jpeg" title="头像" style="height: 300px; width: 200px;" alt="链接找不到显示"/>
列表标签
无序列表
使用ul嵌套li标签
<!--无序--><ul> ???<li>aaa</li> ???<li>aaa</li> ???<li>aaa</li></ul>
有序列表
使用ol嵌套li标签
<!--有序--><ol> ???<li>aaa</li> ???<li>aaa</li> ???<li>aaa</li></ol>
分组列表
使用dl嵌套dt(分组的名)标签，dt标签嵌套dd标签
<!--分组列表--><dl> ???<dt>group 1</dt> ???<dd>body 1</dd> ???<dt>group 2</dt> ???<dd>body 2</dd></dl>
表格标签
写法：
1） 简略写法
<table border="1"> ???????<tr> ???????????<th>主机名</th> ???????????<th>端口</th> ???????</tr> ???????<tr> ???????????<th>1.1.1.1</th> ???????????<th>80</th> ???????</tr> ???????<tr> ???????????<th>2.2.2.2</th> ???????????<th>443</th> ???????</tr> ???</table>
2）标准写法(需要写出表头thead和内容tbody的标签)
<table border="1px"> ???<thead> ???????<tr> ???????????<th>主机名</th> ???????????<th>端口</th> ???????</tr> ???</thead> ???<tbody> ???????<tr> ???????????<th>1.1.1.1</th> ???????????<th>80</th> ???????</tr> ???????<tr> ???????????<th>2.2.2.2</th> ???????????<th>443</th> ???????</tr> ???</tbody></table>
合并单元格
colspan横向合并单元格，rowspan纵向合并单元格
???<table border="1"> ???????<thead> ???????????<tr> ???????????????<th>表头1</th> ???????????????<th>表头2</th> ???????????????<th>表头3</th> ???????????</tr> ???????</thead> ???????<tbody> ???????????<tr> ???????????????<th colspan="2" >1</th> <!-- 横向合并单元格 --> ???????????????<th>1</th> ???????????</tr> ???????????<tr> ???????????????<th rowspan="2">2</th> ?<!-- 纵向合并单元格 --> ???????????????<th>2</th> ???????????????<th>2</th> ???????????</tr> ???????????<tr> ???????????????<th>3</th> ???????????????<th>3</th> ???????????</tr> ???????</tbody> ???</table>
label标签
用于点击鼠标，使得关联的标签获取光标
<label for="username1">用户名：</label><input id="username1" type="text"/>
效果就是，点击用户名也可以在input框中进行输入
fieldest标签
<fieldset></fieldset>
可以实现一个这样的框框
嵌套 legend 标签可以实现
<fieldset> ???<legend>登录</legend> </fieldset>
那这个标签又有什么用呢，我们可以实现一个：如图的样子(样式虽然有些丑，但我们可以用css做修饰)
<fieldset> ????<legend>登录</legend> ????<label for="username2">用户名：</label> ????<input id="username2" type="text"/> ????<br/> ????<label for="pwd">密码：</label> ????<input id="pwd" type="password"/> </fieldset>
前端知识学习(HTML)
原文地址：http://www.cnblogs.com/zhichaoma/p/7684451.html