Python 搞前端探索之路

基础

前期知识：

python socket 知识

前端 基础知识

 本质就是 客户端 与server端 数据的交互
​

第一个前端程序

import socket




def main():
    sock = socket.socket(socket.AF_INET,socket.SOCK_STREAM)
    sock.bind(('localhost',8089))
    sock.listen(5)

    while True:
        connection,address=sock.accept()
        print "client: %s,%s"%(connection,address)
        buf = connection.recv(1024)
        print (buf.decode('utf8'))

        connection.sendall(bytes("HTTP/1.1 201 OK\r\n\r\n"))
        connection.sendall(bytes("<h1> HELLO MY WEB</h1>"))
        connection.close()

if __name__ == '__main__':
    main()
​

前端组成

html css js

css 渲染

标签构成与其属性

文档树

标签：<> 组成 </>；不区分大小写；标签之间可以互相嵌套
属性： 即用来修饰的键值对；例 id=""

这是啥？

告诉浏览器以某种规范来解析此文档

meta 标签

name="keywords" content="word1,word2,word3" ##搜索此关键字时显示

http-equiv="refresh" content="2;URL=https://www.baiud.com"> ## 两秒后自动跳转到 www.baidu.com;如果不加 URL 则 自动刷新

图标：

body 标签

<h1 --> h6 : 字体逐步变小；标题

<p ## 段落

<br/> # 换行标签

<div ##无特殊功能，但主要用于纯文本传递

<span ### 类似于 div，无特殊功能，区别为

<b ### 字体加粗

<em ##字体斜体

<strike ##删除线

<sub ## 下角标

<sup ### 上角标

< 特殊符号

标签分类

块级标签(自带换行)、内联标签（不自带换行）

插入图片

超级链接

<a> ### 1.超链接标签 2. 锚定 功能（网页内部链接）

<a href="#divtop"> 返回 ## 内部链接用，主要是通过 id 来进行连接

<a href="http://blog.zhlz2nana.cn:8080" target="_blank"> 百度 ## 重新在新标签打开超链接

列表标签

<ul> <\ul> ## unordered list 非排序标签,以圆点开头

<ol> <\ol> ### 排序列表 ，以数字开头

<ul>
    <li>11</li>
    <li>11</li>
    <li>11</li>
    <li>11</li>

</ul>
<ol>
    <li>aa</li>
    <li>aa</li>
    <li>aa</li>

</ol>
​

重要标签 form

<form action="127.0.0.1:8090/index" method="post" >  ## get :在URL上会显示，post：不在URL显示提交的内容
    <p>姓名:<input type="text" name="name"></p>
    <p>性别:<input type="password" name="passwd"></p>
    <p><input type="submit" value="确认"></p>
    <p><input type="button" value="button"></p>

    <!--name 属性是给服务器看的，就是服务器端的变量名-->
    <p>男<input type="radio" name="sex" value="0"></p>
    <p>女<input type="radio" name="sex" value="1"></p>
    <p>A<input type="checkbox" name="NUM" value="1"></p>
    <p>B<input type="checkbox" name="NUM" value="2"></p>


    <p>文件<input type="file"></p>
</form>
​