一、前端内容：
html: # 1.超文本标记语言（Hypertext Markup Language，HTML）通过标记符号来标记要显示的网页中的内容。 # 2.其实就是一套规则，浏览器认识的规则。 # 3.浏览器按顺序渲染网页文件，然后根据标记符解释和显示内容。 # 4.对于不同的浏览器，对同一标签可能会有不完全相同的解释（兼容性）。 - 常用：学习20个左右的标签 css: - 样式 JavaScript (js): - 网页交互性
响应状态码
用一串简单的数字来表示一串中文意思
1XX:服务端已经接受到你的数据正在处理你可以继续提交
2XX:服务端成功返回响应数据
3XX:重定向
4XX:403请求无权限、404请求资源不存在
5XX:500服务器内部错误
不同的公司还会自己定制自己的响应状态码
二、Web运行本质：
---- 对于所有的Web应用，本质上其实就是一个socket服务端，用户的浏览器其实就是一个socket客户端
import socket def handle_request(client): buf = client.recv(1024) client.send(bytes("HTTP/1.1 200 OK ",encoding='utf-8')) client.send(bytes("Hello,World",encoding='utf-8')) def main(): sock = socket.socket(socket.AF_INET,socket.SOCK_STREAM) sock.bind(('localhost',8000)) sock.listen(5) while True: connection, address = sock.accept() handle_request(connection) connection.close() if __name__ == '__main__': main()
三、html标签
# html整体结构 <!DOCTYPE html> # 解释器:html5 <html> <head> # 头部描述信息 # meta 描述网页的元信息 <meta charset="UTF-8"> # 字体编码 <title>网页标题</title> </head> <body>真实内容</body> <link /> #可以引入外部css文件 <script></script> /*内部支持直接书写css代码*/
<meta name="keywords" content="meta总结,html meta,meta属性,meta跳转"> # 百度搜索时显示的标题
<meta name="description" content="各类描述"> # 标题旁边的描述 </html> # 分类： 单闭合标签: <meta charset="UTF-8"> 双闭合标签: <script></script> # 如果页面以下面开头:解释器用的就是html4 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
1.html字体以及排版标签：可以写出括号中的字母其余用tab 键补齐
| 标签 | 作用 |
| <p></p> | 段落标签 |
| <br/> | 换行标签 |
| <hr/> | 华丽的分割线 |
| h1,h2,h3..h6 | 字体变大、变粗<h1></h1> |
| <marquee behavior="" direction="right" ></marquee> |
走马灯效果 direction出来的方向(html5建议禁止使用了，但是还是可以用) |
2.html无序列表：
<ul> <li>123</li> <li>内容</li> </ul> # 常用属性解释： type属性：disc(实心圆点)(默认)、circle(空心圆圈)、square(实心方块)
<ul type="circle"></ul>
3.html有序列表
<ol> <li>123</li> <li>内容</li> </ol> # 常用属性： # 属性：type编号类型，默认为整数。可选（1、A、a、Ⅰ、i） # 属性：start起始编号，默认为1，即由最小编号开始
4.html标签<a>
# 超链接 <a href="http://www.baidu.com" target="_blank">跳转到百度</a><br/> <a href="./1.html" target="_blank">跳转到当前目录下的页面</a></br> <a href="mailto:xxx@qq.com">跳到发邮件的选择界面</a><br/> <a href="/download/winRAR.rar">下载</a> href:要跳转的资源地址 target: _blank表示在新窗口中打开目标网页 _self表示在当前窗口中打开目标网页 链接远程目标：通过URL地址链接到远程目标。 链接本地页面：可以通过相对路径或者绝对路径链接本地页面。 相对路径：指相对于当前页面位置的路径 ./：表示当前页面所在的目录 ../：表示当前页面所在的上一级目录 绝对路径：绝对路径指当前站点中确切的路径，一般以”/”开始 例如：<a href=“/admin/index.py”>后台首页</a>
5.html常用标签div和span元素
<div>只是一个块级元素，并无实际的意义. 主要通过CSS为其赋予不同的表现 <span>内联行(行内元素),并无实际的意义. 主要通过CSS为其赋予不同的表现 # 块级元素(块级标签)与行内元素(行内标签)的区别: 所谓块元素，是以另起一行开始渲染的元素，行内元素则不需另起一行 如果单独在网页中插入这两个元素，不会对页面产生任何的影响 这两个元素是专门为定义CSS样式而生的 # 块级标签:独占一行：div、p、h1-h6、ul、ol、 # 行内标签：占自己内容的宽度：span、a
6.html标签：img
常见的属性用法说明：
| 属性 | 值 | 含义 |
| src | 图像URL | 规定图像的URL |
| alt | 字符串 | 规定图像的替代文本 |
| width | px / % | 规定图像的宽 |
| height | px / % | 规定图像的高 |
| border | px | 图像的边框初细 |
<img src="https://www.baidu.com/img/superlogo_c4d7df0a003d3db9b65e9ef0fe6da1ec.png?where=super"> <img src="./my.jpeg" width="200px" height="100px">
7.html表格：table
<table border="1px"> <thead> <!-- tr:一行数据 --> <tr> <td>td</td> <td>ID</td> <td>名称</td> <td>年龄</td> </tr> </thead> <tbody> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> </tr> </tbody>
1). <table></table>表示的表格的开始和结束
<table border="1px" width="px" height="300px" align="left">
border:表格加边框 2). <tr></tr>表示的是表格的一行 3). <td></td>表示的是一个单元数据格
4). <th></th>表示表格标题单元格，且加粗居中显示 5). <thead></thead> 表示表格的表头 6). <tbody></tbody> 表示表格的主体,表单
<tbody align="center"> align是数据表格里居中，如果在网页中居中写在table中
7). cellpadding: 内边距
8). cellspacing: 外边距
9). 像素 百分比.（最好通过css来设置长宽
10). rowspan: 单元格竖跨多少行
11). 单元格横跨多少列（即合并单元格）
# 表格属性可以提前定义或单独定义 <style> table { width: 200px; min-height: 25px; line-height: 25px; text-align: center; border-color:#b6ff00; border-collapse: collapse;} </style>
8.html表单：form
# 基本概念
HTML表单是HTML元素中较为复杂的部分，表单往往和脚本、动态页面、数据处理等功能相结合，因此它是制作动态网站很重要的内容。
表单一般用来收集用户的输入信息
# 表单的工作原理
访问者在浏览有表单的网页时，可填写必需的信息，然后按某个按钮提交
这些信息通过Internet传送到服务器上
服务器上专门的程序对这些数据进行处理，如果有错误会返回错误信息，并要求纠正错误
# 服务端
import tornado.ioloop import tornado.web class MainHandler(tornado.web.RequestHandler): def get(self): data = self.request.query_arguments print(data) self.write("Hello, world") def post(self): self.write('this is a test') application = tornado.web.Application([ (r"/index", MainHandler), ]) if __name__ == "__main__": application.listen(8888) # 服务端监听8888端口 tornado.ioloop.IOLoop.instance().start() # 启动服务端
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form style="text-align:right; 400px" action="http://localhost:8888/index" method="post"> 姓 名：<input type="text"><br> 密 码：<input type="password"><br> 确认密码：<input type="password"><br> <input type="submit" value="提交"> <input type="button" value="普通按钮">
<input type="reset" name="reset" value="重置" />
</form> </body> </html>
9. input标签，select标签，textarea标签
input:
email 邮箱格式
| type属性值 | 用途 | 对应代码 |
| text | 单行输入文本 |
<input type=text" /> |
| password | 密码输入框 | <input type="password" /> |
| date | 日期输入框 | <input type="date" /> |
| checkbox | 复选框 | <input type="checkbox" checked="checked" /> |
| radio | 单选框 | <input type="radio" /> |
| submit | 提交按钮 | <input type="submit" value="提交" /> |
| button | 普通按钮 | <input type="button" value="普通按钮" /> |
| reset | 重置按钮 | <input type="reset" value="重置" /> |
| hidden | 隐藏输入框 | <input type="hidden" /> |
| file | 文件选择框 | <input type="file" /> |
<form action='url地址' method='get/post'> 文本框: <input type='text' name='username'> 密码框: <input type='password' name='pwd'> 复选框: <input type='checkbox' name='hobby'> 足球 <input type='checkbox' name='hobby'> 篮球 <input type='checkbox' name='hobby'> 羽毛球 单选框: <input type='radio' name='gender'> 男 <input type='radio' name='gender'> 女 性别: <input type="radio" name="gender" value="1" checked>男 <input type="radio" name="gender" value="0">女 <input type="file" > <input type="hidden" name="token" value="dsadnsajdnskandksandskankdsandsjakndsa" /><br> <select name="city" > <option value="bj">北京</option> <option value="tj" selected="selected">天津</option> <option value="hb">河北</option> <option value="sd">山东</option> <option value="nm">内蒙</option> </select><br> <textarea cols="50" rows="30" name="content"> </textarea> 普通按钮: <input type='button' value='普通按钮'> 提交按钮: <input type='submit' value='提交'> 重置按钮: <input type='reset' value='重置'> </form>
select标签:
下拉框，默认是单选可以改为多选
一个个选项就是一个个option标签
textarea标签
获取大段文本内容
<textarea name="memo" id="memo" cols="30" rows="10"> 默认内容 </textarea> 属性说明： name：名称 rows：行数 cols：列数 disabled：禁用
10.表单重点知识
1.form表单中的参数 action 控制数据的提交路径 method 控制数据的提交方式get/post # 注意form表单默认是get请求 enctype 控制数据的编码格式urlencoded/formdata 2.用户获取用户数据的标签都应该有name属性 其实我们可以将获取用户数据的标签看成是一个构造字典的工厂 用户的数据就类似于是字典的value而name参数指定的数据就类似于字典的key 3.默认值 radio和checkbox统一使用 checked="checked" option使用 selected="selected" 如果参数名和参数值相同，则可以直接简写 checked="checked" 简写 checked selected="selected" 简写 selected 4.能够触发form表单提交数据的标签有两个 <input type="submit" value="注册"> <button>我行!</button>
11.body内基本标签
h1~h6 多级标题标签
s 删除线
b 加粗
i 斜体
u 下划线
p 段落标签
br 换行
hr 分割线
12.标签的分类
1.块儿级标签 h1~h6 p
独占一行
2.行内标签 u i s b
自身文本多大就占多大
块儿级标签内部可以嵌套其他任意的标签；
p标签除外，p标签只能嵌套行内标签
行内标签只能嵌套行内
13.特殊符号表示
| 内容 | 对应代码 |
| 空格 | |
| > | > |
| < | < |
| & | & |
| ¥ | ¥ |
| 版权© | © |
| 注册® | ® |