Python开发—

一、HTML

1.服务端

import socket

def main():

    sock = socket.socket(socket.AF_INET,socket.SOCK_STREAM)

    sock.bind(("10.10.27.37",8081))

    sock.listen(5)

    while True:

        conn,addr = sock.accept()

        buf = conn.recv(1024)

        f = open("picture.html","rb")

        data = f.read()

        conn.sendall(bytes("HTTP/1.1 201 OK\r\n\r\n","utf-8"))

        conn.sendall(data)

        conn.close()

if __name__ == '__main__':

    main()

2.定义

（1）HTML（htyper text markup language）即超文本标记语言

（2）超文本：页面内可以包含图片、链接、音乐、程序等非文字元素

（3）标记语言：有标签构成的语言

（4）网页：HTML文档，由浏览器解析用来展示，包括静态网页和动态网页

（5）HTML文档树形结构图：

3.标签

（1）标签是由一对尖括号包裹的单词构成，<html>所有标签中的单词不能以数字开头

（2）标签不区分大小写，但多用小写

（3）标签分为两部分：开始标签<a>和结束标签</a>，两个标签之间的部分叫做标签体

（4）自闭和标签只包含一个部分，如：<br/>、<hr/>、<input/>、<img/>

（5）标签可以嵌套，但不能交叉嵌套，如<a><b></a></b>

4.标签的属性

（1）通常以键值对形式出现，如：name = "dazui"

（2）只能出现在开始标签或自闭和标签中

（3）属性名全部小写，属性值用引号引起来

（4）属性值如果和属性名完全相同，可只写属性名

5.<!DOCTYPE html>标签

声明浏览器的渲染模式，如果页面添加了<!DOCTYPE html>标签，浏览器会按照W3C的标准解析渲染页面。

W3C标准出台以前，浏览器对页面的渲染没有同意的规范，产生了差异，即怪异模式（Quirks mode，Compatibaility mode）

W3C标准推出后，浏览器渲染页面有了统一的标准（CSScompat mode，Strict mode，Standars mode）

window.top.document.compatMode：

//BackCompat：怪异模式，浏览器使用自己的怪异模式解析渲染页面。

//CSS1Compat：标准模式，浏览器使用W3C的标准解析渲染页面。

6.head标签<head>

（1）meta标签

a.name属性主要用于描述网页，对应的属性值为content

b.http-equiv相当于http的文件头，可以向浏览器传回有用的信息

（2）非meta标签

<head>

    <!--<meta charset="UTF-8">-->

    <meta http-equiv="content-type" charset="UTF-8"><!--指定编码方式-->

    <meta name="keywords" content="bigmouth，黑，儿子，克格莫"><!--关键词：用于搜索-->

    <meta name="description" content="大嘴是一个嘴很大的儿子"><!--描述信息-->

    <!--<meta http-equiv="refresh" content="5;URL=https://nba.hupu.com/">&lt;!&ndash;5秒后自动刷新并跳转&ndash;&gt;-->

    <meta http-equiv="x-ua-compatible" content="IE=EmulateIE7"><!--针对IE浏览器-->

    <!--非meta标签-->

    <link rel="icon" href="//b3.hoopchina.com.cn/common/favicon.ico"><!--图标-->

    <title>大嘴</title><!--标题-->

    <!--<link rel="stylesheet" href="css.css">-->

    <!--<script src="hello.js"></script>　-->

</head>

7.body标签<body>

<body>

    <h1>标题1</h1><!--h1-6，换行，变粗，加间隙-->

    <p>一去二三里</p><!--换行，加间隙-->

    <p>烟村四五家</p>

    亭台六七座</br><!--换行-->

    <b>八九十枝花</b></br><!--strong标签用法相同，加粗-->

    <strike>9999</strike></br><!--加斜线-->

    <em>我要被风吹倒了</em></br><!--斜体--><sub>2</sub></br><!--下角标--><sup>2</sup>=9</br><!--上标-->

    <hr><!--加横线-->

    <div>没有效果就是最好的效果</div><!--没有固定格式-->

    <span>什么东西？？？？？？？？？？</span><!--没有固定格式-->

</body>

8.分类和特殊字符

标签分为块级标签和内联标签

（1）块级标签（block）

快元素特点：

总是在新行上开始
如不设定，宽度缺省是它的容器的100%
可以容纳内联元素和其他块元素

（2）内联标签（inline）

内联元素特点：

和其他元素都在一行上
宽度就是它的文字或图片的宽度，不可改变
内联元素只能容纳文本或者其他内联元素

特殊字符

9.图形标签<img>

<body>

　　<a href="https://nba.hupu.com" target=_blank><img src="1.gif" alt="唠嗑" title="科比" width="100px" height="100px"></a>

</body>

src: 要显示图片的路径.

alt: 图片没有加载成功时的提示

title: 鼠标悬浮时的提示信息

width: 图片的宽

height:图片的高 (宽高两个属性只用一个会自动等比缩放.)

10.超链接标签<a>

<body>

    <div id="abc">顶部</div>

    <a href="https://nba.hupu.com" target=_blank><img src="1.gif" alt="唠嗑" title="科比" width="100px" height="100px"></a>

    <a href="#abc">返回顶部</a>

</body>

href:要连接的资源路径 格式如下: href="http://www.baidu.com"

target: _blank : 在新的窗口打开超链接. 框架名称: 在指定框架中打开连接内容

name: 定义一个页面的书签

用于跳转 href : #id.（锚）

11.列表标签

<body>

<ul><!--无序列表-->

    <li>第一点</li>

    <li>第二点</li>

    <li>第三点</li>

</ul>

<ol><!--有序列表-->

    <li>第一点</li>

    <li>第二点</li>

    <li>第三点</li>

</ol>

<dl><!--定义列表-->

    <dt>第一章</dt><!--列表标题-->

    <dd>第一节</dd><!--列表项-->

    <dd>第二节</dd>

</dl>

</body>

12.表格标签<table>

<body>

<table border="2px" cellpadding="10px" cellspacing="20px"><!--border:表格边框;cellpadding: 内边距;cellspacing: 外边距-->

        <thead>

        <tr><!--<tr>:table row-->

            <th>1</th><!--<th>:table head cell-->

            <th>2</th>

            <th>3</th>

        </tr>

    </thead>

    <tbody>

        <tr>

            <td rowspan="2">11</td><!--rowspan:单元格竖跨多少行-->

            <td>22</td><!--<td>:table data cell-->

            <td>33</td>

        </tr>

        <tr>

            <td>222</td>

            <td>333</td>

        </tr>

        <tr>

            <td>1111</td>

            <td colspan="2">2222</td><!--rowspan:单元格横跨多少列-->

        </tr>

    </tbody>

</table>

</body>

13.表单标签<form>

（1）作用

HTML 表单用于接收不同类型的用户输入，用户提交表单时向服务器传输数据，从而实现用户与Web服务器的交互。表单标签, 要提交的所有内容都应该在该标签中，可提交的内容有input 元素，比如文本字段、复选框、单选框、提交按钮等等，还可以包含textarea、select、fieldset和 label 元素

（2）提交方法

get: 提交的键值对，放在地址栏中url后面；安全性相对较差；对提交内容的长度有限制；是默认的方法
post:提交的键值对不在地址栏；安全性相对较高；对提交内容的长度理论上无限制

（3）input标签

<body>

<h1>选课</h1>

<form action="http://127.0.0.1:8090/index" method="post" enctype="multipart/form-data">

    <p>用户名<input type="text" name="username" placeholder="用户名" disabled></p><!--文本输入框-->

    <p>密码<input type="password" name="password"placeholder="密码" readonly></p><!--密码输入框-->

    <p>性别：男<input type="radio" name="gender" value="male"> 女<input type="radio" name="gender" value="female"></p><!--单选框-->

    <p>课程：英语<input type="checkbox"name="course" value="English" checked> 数学<input type="checkbox" name="course" value="Math"> </p><!--多选框-->

    <p><input type="file" name="put_file"></p><!--上传文件，请求方式必须是post，enctype="multipart/form-data"-->

    <p><input type="submit"value="提交选课"></p><!--提交，form表单需要加上属性enctype="multipart/form-data"  -->

    <p><input type="button"value="提交选课"></p><!--配合js使用-->

    <p><input type="reset"value="重置"></p><!--重置-->

    name属性是和服务器通信时使用的名称；而id属性是浏览器端使用的名称，该属性主要是为了方便客户端编程，而在css和javascript中使用的

    value: 表单提交项的值.对于不同的输入类型，value 属性的用法也不同

    checked:  radio 和 checkbox 默认被选中

    readonly: 只读. text 和 password

    disabled: 对所用input都好使.

</form>

</body>

（4）select下拉选标签属性和textarea

<body>

<h1>选课</h1>

<form action="http://127.0.0.1:8090/index" method="post" enctype="multipart/form-data">

    <p>学院<select name="college" multiple size="2"><!-- name:表单提交项的键; multiple:多选；size：选项个数-->

        <optgroup label="东京大学"><!--<optgroup>为每一项加上分组-->

            <option value="tumu">土木</option><!-- <option> 下拉选中的每一项属性；value:表单提交项的值-->

            <option value="jianzhu"selected>建筑</option><!--下拉选默认被选中-->

            <option value="jisuanji">计算机</option>

            <option value="waiguoyu">外国语</option>

        </optgroup></select>

    </p>

    简介<textarea name="简介"cols="30" rows="10"></textarea><!-- name:表单提交项的键;cols:文本域默认有多少列;rows:文本域默认有多少行-->

</form>

</body>

巴特西

Python开发——16.HTML