前端学习(1)
Damon_Slh 人气:1一 首先需要写个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\r\n\r\n","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><https://img.qb5200.com/download-x/dt> 列表标题
<dd><https://img.qb5200.com/download-x/dd> 列表项
8.form标签
表单用于向服务器传输数据。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>吴静</title>
</head>
<body>
<h1>hello world</h1>
<img src="1.jpg" title = "美女" alt="Error">
<form action="127.0.0.1:8880https://img.qb5200.com/download-x/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作为值。
加载全部内容