web开发本质：
1、浏览器输入网址回车都发生了什么？
1、浏览器给服务端发送一个消息
2、服务端拿到消息
3、服务端返回消息
4、浏览器展示页面
C/S架构----B/S架构
客户端和服务端 消息的格式是约定好的
HTTP协议：浏览器和服务器之间约定好的消息格式
import socket sk = socket.socket() sk.bind(('127.0.0.1',8000)) sk.listen(5) while 1: conn,addr = sk.accept() conn.recv(1024) conn.send(b'HTTP/1.1 200 OK ') with open('data.txt','rb') as f: msg = f.read() conn.send(msg) # conn.send(b'<h1>hello s9)</h1>') conn.close()
HTML文件结构：
<!--注释内容-->
<!DOCTYPE html>声明为HTML5文档。
<html>、</html>是文档的开始标记和结束的标记。是HTML页面的根元素，在它们之间是文档的头部（head）和主体（body）。
<head>、</head>定义了HTML文档的开头部分。它们之间的内容不会在浏览器的文档窗口显示。包含了文档的元（meta）数据。
<title>、</title>定义了网页标题，在浏览器标题栏显示。
<body>、</body>之间的文本是可见的网页主体内容。
<title></title> 定义网页标题
<style></style> 定义内部样式表
<script></script> 定义JS代码或引入外部JS文件
<link/> 引入外部样式表文件
<meta/> 定义网页原信息
<!DOCTYPE html> <html lang="zh-CN"> <head> <!--2秒后跳转到对应的网址，注意引号--> <!--<meta http-equiv="refresh" content="2;URL=https://www.oldboyedu.com">--> <!--指定文档的编码类型--> <meta charset="UTF-8"> <meta http-equiv="content-Type" charset=UTF8"> <!--告诉IE以最高级模式渲染文档--> <!--<meta http-equiv="x-ua-compatible" content="IE=edge">--> <!--<meta name="keywords" content="meta总结,html meta,meta属性,meta跳转">--> <!--<meta name="description" content="老男孩教育Python学院">--> <title>我的第一个html页面</title> <style> a { color:red; } </style> <!--<script>--> <!--alert('hello s9!')--> <!--</script>--> </head> <body> <h1>hello s99999)</h1> <h2>hello s99999)</h2> <h3>hello s99999)</h3> <h4>hello s99999)</h4> <h5>hello s99999)</h5> <img src="https://ss0.bdstdddatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1552141263&di=bf0c6be6939bf48c5ad8279ec240be4c&src=http://img.haote.com/udpload/news/image/20180316/20180316170729_222286383.jpg" alt="找不到了"> <img src='https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1552141263&di=bf0c6be6939bf48c5ad8279ec240be4c&src=http://img.haote.com/upload/news/image/20180316/20180316170729_86383.jpg'> <img src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1552141263&di=bf0c6be6939bf48c5ad8279ec240be4c&src=http://img.haote.com/upload/news/image/20180316/20180316170729_86383.jpg" alt="新垣结衣" title="老婆"> <a href='http://www.sogo.com'>搜狗</a> <a href='http://www.luffycity.com' target="_blank">路费学车</a> </body> </html>
<b>加粗</b> <i>斜体</i> <u>下划线</u> <s>删除</s> <p>段落标签</p> <h1>标题1</h1> <h2>标题2</h2> <h3>标题3</h3> <h4>标题4</h4> <h5>标题5</h5> <h6>标题6</h6> <!--换行--> <br> <!--水平线--><hr>
空格 > > < < & & ¥ ¥ 版权 © 注册 ®
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <b>python9999</b> <i>python9999</i> <u>python9999</u> <s>python9999</s> <h1>海 燕</h1> <p>苍茫的大海上，狂<br>风卷积<br>着乌云</p> <p>苍茫的大海上，狂<br>风卷<br>积着乌云</p> <p>苍茫的大海上，狂风卷积着乌云</p> <hr> <p>苍茫的大海上，狂风卷<br>积<br>着乌云</p> <p>苍茫的大海上，狂风卷积着乌云</p> <p>苍茫的大海上，狂风卷积着乌云</p> © ® </body> </html>
div标签和span标签
div标签用来定义一个块级元素，并无实际的意义。主要通过CSS样式为其赋予不同的表现。默认占浏览器宽度，能设置长和宽
span标签用来定义内联(行内)元素，并无实际的意义。主要通过CSS样式为其赋予不同的表现。根据内容决定长度
块级元素与行内元素的区别：
所谓块元素，是以另起一行开始渲染的元素，行内元素则不需另起一行。如果单独在网页中插入这两个元素，不会对页面产生任何的影响。
这两个元素是专门为定义CSS样式而生的。
注意：
关于标签嵌套：通常块级元素可以包含内联元素或某些块级元素，但内联元素不能包含块级元素，它只能包含其它内联元素。
p标签不能包含块级标签，p标签也不能包含p标签。
<div>我是div标签</div> <div>我是div标签</div> <div>我是div标签</div> <span>我是span标签</span> <span>我是span标签</span> <span>我是span标签</span>
列表
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <ul> <li>aaa</li> <li>bbb</li> <li>ccc</li> <li>ddd</li> </ul> <ol> <li>aaa</li> <li>bbb</li> <li>ccc</li> </ol> </body> </html>
type属性：
- disc（实心圆点，默认值）
- circle（空心圆圈）
- square（实心方块）
- none（无样式）
有序列表
<ol type="1" start="2"> <li>第一项</li> <li>第二项</li> </ol>
type属性：
- 1 数字列表，默认值
- A 大写字母
- a 小写字母
- Ⅰ大写罗马
- ⅰ小写罗马
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <ul type="square"> <li>aaa</li> <li>bbb</li> <li>ccc</li> <li>ddd</li> </ul> <ol type="I" start="4"> <li>aaa</li> <li>bbb</li> <li>ccc</li> </ol> </body> </html>
标题列表
<dl> <dt>标题</dt> <dd>内容</dd> <dt>标题</dt> <dd>内容</dd> </dl> </ol>
属性:
- border: 表格边框.
- cellpadding: 内边距
- cellspacing: 外边距.
- 像素 百分比.（最好通过css来设置长宽）
- rowspan: 单元格竖跨多少行
- colspan: 单元格横跨多少列（即合并单元格）
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>表格</title> </head> <body> <table border="1" cellpadding="10" CELLSPACING="10" > <thead> <tr> <th>姓名</th> <th>年龄</th> <th>爱好</th> </tr> </thead> <tbody> <tr> <td colspan="2"> 小强 </td> <td rowspan="2">戴帽子</td> </tr> <tr> <td> tim </td> <td>322</td> </tr> </tbody> </table> </body> </html>
<!--h1*4>a{a标签$}--> <h1><a href="">a标签1</a></h1> <h1><a href="">a标签2</a></h1> <h1><a href="">a标签3</a></h1> <h1><a href="">a标签4</a></h1> <!--h1*4>a.c1{a标签$}--> <h1><a href="" class="c1">a标签1</a></h1> <h1><a href="" class="c1">a标签2</a></h1> <h1><a href="" class="c1">a标签3</a></h1> <h1><a href="" class="c1">a标签4</a></h1> <!--h1*4>a.c1[id=a$]{a标签$}--> <h1><a href="" class="c1" id="a1">a标签1</a></h1> <h1><a href="" class="c1" id="a2">a标签2</a></h1> <h1><a href="" class="c1" id="a3">a标签3</a></h1> <h1><a href="" class="c1" id="a4">a标签4</a></h1>
标签的嵌套规则：
1.行内标签不能嵌套块级标签
2.p标签不能嵌套块级标签