191121HTML
一、HTML
1、web server
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("<h1 style='background-color:red;'>Hello, Seven<h1>", encoding='utf-8'))
def main():
sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
sock.bind(('localhost', 9999))
sock.listen(5)
while True:
conn, addr = sock.accept()
handle_request(conn)
conn.close()
if __name__ == '__main__':
main()
2、web server2
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'))
f = open('index', 'rb')
data = f.read()
f.close()
client.send(data)
def main():
sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
sock.bind(('localhost', 9999))
sock.listen(5)
while True:
conn, addr = sock.accept()
handle_request(conn)
conn.close()
if __name__ == '__main__':
main()
3、实例index.html
<h1 style='background-color:red;'>Hello, Seven<h1>
<a href='http://www.baidu.com'>baidu</a>
<table border='1'>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<table>
4、head标签
- meta 标签：编码、跳转、刷新、关键字、描述、IE兼容
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8"> <!-- 页面编码 -->
<meta http-equiv="Refresh" content="60"> <!-- 60s自动刷新一次页面 -->
<!--<meta http-equiv="Refresh" content="5; url=http://www.baidu.com" /> 5s后跳转到目标网站-->
<meta name="keywords" content="dongfei,dongfei2">
<meta http-equiv="X-UA-Compatible" content="IE=IE9;IE=IE8" />
<title>Title</title>
</head>
<body>
<h1>welcome dongfei web site.</h1>
</body>
</html>
- title标签
- link标签：加图标
<link rel="shortcut icon" href="image/favicon.ico"> <!--给网站加图标-->
- style
- script
5、body标签
5.1：各种符号
- 空格：
- 大于：>
- 小于：<
参考：http://www.cnblogs.com/web-d/archive/2010/04/16/1713298.html
5.2：p和br - p：段落，段落之间有间距
- br：换行
5.3：标题，加大加粗 - h1...h6
5.4：snap标签，行内白板
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>dongfei</title>
</head>
<body>
<a href="http://www.baidu.com">百 >度</a>
<h3>静夜思</h3>
<h5>作者：李白</h5>
<p>床前明月光，<br/>疑似地上霜。<br/>举头望明月，<br/>低头思故乡。</p>
<span>dongfei</span>
</body>
</html>
5.5：div标签，块级白板
6、表单标签
- from标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>login</title>
</head>
<body>
<form action="http://localhost:xxx/index" method="get"> <!-- 向后端提交表单 -->
<input type="text" name="username"/>
<input type="text" name="email"/>
<input type="password" name="password"/>
<input type="button" value="login"/> <!--button默认没有任何功能-->
<input type="submit" value="login2"/>
</form>
</body>
</html>
- 提交至搜索引擎
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>sougou</title>
</head>
<body>
<form action="https://www.sogou.com/web" method="get">
<input type="text" name="query" value="sogou"/> <!--value:默认值-->
<input type="submit" value="搜索">
</form>
</body>
</html>
- 单选框&复选
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form>
<div>
<p>请选择性别：</p>
男：<input type="radio" name="gender" value="1" checked="checked" />
女：<input type="radio" name="gender" value="2" />
<p>爱好：</p>
篮球：<input type="checkbox" name="favor" value="1" />
足球：<input type="checkbox" name="favor" value="2" />
乒乓球：<input type="checkbox" name="favor" value="3" />
</div>
<input type="submit" value="提交" />
</form>
</body>
</html>
- 上传文件&重置表单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form enctype="multipart/form-data">
<div>
<p>上传文件：</p>
<input type="file" name="fname">
</div>
<input type="submit" value="upload">
<input type="reset" value="reset">
</form>
</body>
</html>
- 多行文本输入
<textarea name="menu" >默认值</textarea>
- 下拉框：select标签
<select name="city" multiple="multiple" size="3">
<option value="1">北京</option>
<option value="2" selected="selected">上海</option>
<option value="3">广州</option>
</select>
<input type="submit" value="提交">
7、超链接&锚点
<a href="http://www.baidu.com" target="_blank">百度</a>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<a href="#i1">第一章</a>
<a href="#i2">第二章</a>
<a href="#i3">第三章</a>
<a href="#i4">第四章</a>
<div id="i1" style="height:600px;">第一章的内容</div>
<div id="i2" style="height:600px;">第二章的内容</div>
<div id="i3" style="height:600px;">第三章的内容</div>
<div id="i4" style="height:600px;">第四章的内容</div>
</body>
</html>
8、图片
<a href="http://www.baidu.com">
<img src="1.jpg" style="height: 200px;width: 200px;" alt="风景" title="风景">
</a>
9、列表
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<ol>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ol>
<dl>
<dt>123</dt>
<dd>456</dd>
</dl>
10、表格
<table border="1">
<tr>
<td>第一行，第一列</td>
<td>第一行，第二列</td>
<td>第一行，第三列</td>
</tr>
<tr>
<td>第二行，第一列</td>
<td>第二行，第二列</td>
<td>第二行，第三列</td>
</tr>
</table>
<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>内容2</td>
<td>内容3</td>
<td>内容4</td>
</tr>
</tbody>
</table>
- 合并单元格
<td colspan="2">内容2</td>
<td rowspan="2">内容2</td>
11、label标签
<label for="username">用户名：</label>
<input id="username" type="text" name="user" />
