一 首先需要写个Socket服务器
import socket def main(): sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM) sock.bind(('192.168.1.5',8888)) sock.listen(5) while True: connection, address = sock.accept() connection.recv(1024) connection.sendall(bytes("HTTP/1.1 201 OK ","utf8")) with open('helloworld.html','rb') as f: data = f.read() connection.sendall(data) connection.close() if __name__ == '__main__': main()
创建HTML文件：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Test</title> </head> <body> <h1>hello world</h1> </body> </html>
这样把Server run起来，就可以在浏览器中输入IP+端口号访问了。
二 HTML语句
前端三剑客：HTML、js、css
1. 什么是标签？
a. 是由一对尖括号包裹起来的单词，e.g: <html> 注意：不能以数字开头；
b. 不区分大小写，推荐使用小写；
c. 标签有两个部分，开始标签<h1>，结束标签</h1>，两个标签之间的部分叫做标签体；
d. 有些标签只有一个，<br/><hr/>，叫做自闭和标签，功能比较简单；
e. 标签不可以交叉嵌套；<h1><h2></h1></h2>
2. <!DOCTYPE html>标签
使浏览器以标准模式渲染页面。
3. <meta>标签
<meta name="keywords" content="前端学习"> #搜索的关键字 <meta name="description content="Damon的前端学习"> #对于页面的描述
<meta http-equiv="Refresh" content="2;URL=htps://www.baidu.com"> #两秒钟够刷新页面，跳转到URL页面中
<meta http-equiv="content-Type, charset=UTFB"> #网页的编码格式
<mata http-equiv="X-UA-Compatible content="IE=EmulateIE7"> #兼容IE7浏览器
4. <body>标签
<hn>: n的取值范围是1-6；标签体的字体大小，逐渐减小，是用来表示标题的； <p>: 段落标签，包裹的内容被换行，与上行内容间有隔行； <b><strong>: 加粗标签； <strike>: 在文字上加上一条中线；(不推荐使用) <em>: 文字变成斜体； <sup>和<sub>: 上角标和下角标； <br>: 换行； <hr>: 水平线； <div>: 什么功能都没有；用的非常多，主要是和CSS一起使用； <span>:
特殊符号： 空格
<小于 >大于 " © ® 网上有HTML特殊符号对照表
块级标签：网页上的一块区域都属于这个标签；<p><h1><table><ol><ul><form><div>都属于块级标签。
内联标签：根据你的文本或者图片的真是大小来分配区域。<a><input><img><sub><sup><textarea><span>
5. <img>图片标签
src: 图片的路径；
alt: 图片没有加载成功的提示
title: 鼠标悬浮在图片上时的提示信息；
width：控制图片的宽度；
heigth: 控制图片的高；
6. <a> 超链接标签
href:要连接的资源路径 例如： <a href="https://www.baidu.com">百度</a> 用于本页面跳转：href="#id" id是跳转目的地标签的id值 target: 在新的窗口打开超链接。target="_blank"
7.列表标签
<ul> 无序列表 <li></li> </ul> <ol> 有序列表 <li></li> </ol> <dl> <dt></dt> 列表标题 <dd></dd> 列表项
8.form标签
表单用于向服务器传输数据。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Test</title> </head> <body> <h1>hello world</h1> <img src="1.jpg" title = "美女" alt="Error"> <form action="127.0.0.1:8880/damon/" method="get" enctype="multipart/form-data"> {#method中还有post方法，都是用来传输数据的方法#} <p><input type="text" name="username"></p> {#文本输入#} <p><input type="password" name="password"></p> {#文本输入#} <p><input type="button" value="press"></p> {#配合js使用，用来触发事件#} <p><input type="checkbox" name="hobby" value="1"></p> {#复选框#} <p><input type="checkbox" name="hobby" value="2"></p> {#复选框#} <p><input type="radio" name="sex" value="0"></p> {#互斥选框#} <p><input type="radio" name="sex" value="1"> </p>{#互斥选框#} <p><input type="file"></p> {#上传文件#} <p><input type="reset" value="reset"></p> {#把输入的数据清空#} <p><input type="file" name="test"></p> {#提交文件(和上面的enctype一起使用, method="post"),需要后端的支持来接收文件。#} <p><select name="city" multiple="multiple" size="2"> {#multiple用于多选 size用来最多显示两个#} <optgroup label="中国"> <option value="beijing">北京</option> <option value="tianjin">天津</option> <option value="shanghai">上海</option> </optgroup> </select></p> <p><textarea rows="6", cols="5">自我介绍</textarea></p> {#6行5列#} <label for="test">姓名</label> <input id="test" type="text"> {#lable标签对下面的input标签进行关联， for与id必须是一样的#} <p><input type="submit" value="submit"></p> {#提交数据#} </form> </body> </html>
get方法：提交的键值对在地址栏url后面， 安全性较低，对提交内容长度有限制；默认值是get
post方法：提交的的键值对，安全性较高，对提交内容的长度理论上无限制；
input中的name作为传入后端数据字典的键，value作为值。