一、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）

<p><h1><table><ol><ul><form><div>

快元素特点：

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

（2）内联标签（inline）

<a><input><img><sub><sup><textarea><span>

内联元素特点：

  • 和其他元素都在一行上

  • 宽度就是它的文字或图片的宽度，不可改变

  • 内联元素只能容纳文本或者其他内联元素

特殊字符

&lt（<）；&gt（>）；&quot（"）；&copy（©）；&reg（®）；

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的更多相关文章

  1. Python黑帽编程1.2 基于VS Code构建Python开发环境

    Python黑帽编程1.2  基于VS Code构建Python开发环境 0.1  本系列教程说明 本系列教程,采用的大纲母本为<Understanding Network Hacks Atta ...

  2. Python开发【前端】：HTML

    HTML HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写,他是一种制作万维网页面标准语言(标记).相当于定义统一的一套规则,大家都来遵守他,这样就可以让浏 ...

  3. 智普教育Python培训之Python开发视频教程网络爬虫实战项目

    网络爬虫项目实训:看我如何下载韩寒博客文章Python视频 01.mp4 网络爬虫项目实训:看我如何下载韩寒博客文章Python视频 02.mp4 网络爬虫项目实训:看我如何下载韩寒博客文章Pytho ...

  4. python开发_++i,i += 1的区分

    python开发_++i,i += 1的区分 在很多编程语言(C/C++,Java等)中我们都会碰到这样的语法: 1 int i = 0; 2 ++ i; // -- i; 这样的语法在上述编程语言中 ...

  5. Python开发【第六篇】：模块

    模块,用一砣代码实现了某个功能的代码集合. 类似于函数式编程和面向过程编程,函数式编程则完成一个功能,其他代码用来调用即可,提供了代码的重用性和代码间的耦合.而对于一个复杂的功能来,可能需要多个函数才 ...

  6. Python开发【第二篇】：初识Python

    Python开发[第二篇]:初识Python   Python简介 Python前世今生 python的创始人为吉多·范罗苏姆(Guido van Rossum).1989年的圣诞节期间,吉多·范罗苏 ...

  7. python开发学习-day01 (python安装与版本、字符串、字典、运算符、文件)

    *:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: 0 !important; } /* ...

  8. 【转】在Eclipse中使用PyDev进行Python开发

    原文网址:http://www.crifan.com/eclipse_use_pydev_develop_python/ 在折腾: [记录]使用Python的IDE:Eclipse+PyDev 的过程 ...

  9. Python开发【第二十二篇】：Web框架之Django【进阶】

    Python开发[第二十二篇]:Web框架之Django[进阶]   猛击这里:http://www.cnblogs.com/wupeiqi/articles/5246483.html 博客园 首页 ...

随机推荐

  1. jquery中text、html的区别

  2. java.lang.OutOfMemoryError：GC overhead limit exceeded解决方法

    异常如下:Exception in thread "main" java.lang.OutOfMemoryError: GC overhead limit exceeded 一.解 ...

  3. EOS源码

    [EOS源码] 1.在 libraries/chain/include/eosio/chain/ 目录下. permission_level 定义如下:   account_name.permissi ...

  4. Redis安装教程及可视化工具RedisDesktopManager下载安装

    Redis安装教程: 1. Windows下安装教程: 下载:https://github.com/MSOpenTech/redis/releases Redis 支持 32 位和 64 位.这个需要 ...

  5. UTF-8和GBK有什么区别

    UTF-8和GBK有什么区别 2017年06月03日 18:10:43 阅读数:6516 GBK是在国家标准GB2312基础上扩容后兼容GB2312的标准(好像还不是国家标准).GBK编码专门用来解决 ...

  6. 通行导论-IP数据网络基础（2）

    传输控制协议(TCP) 差错控制:TCP使用差错控制提供可靠性,包括检测受到损伤.丢失.失序的报文段 实现方法:1.16位检验和,2.确认机制:采用确认证实收到的报文段,3.重传(设置一个重传超时RT ...

  7. java_26 缓冲流

    1.缓冲流: 读取数据大量的文件时,读取的速度慢, java提供了一套缓冲流,提高IO流的效率.分为字节缓冲流和字符缓冲流. 字节缓冲流: 缓冲输出流:BufferedOutputStream 缓冲输 ...

  8. php的运行原理、cgi对比fastcgi以及php-cgi和php-fpm之间的联系区别

    最近项目中本地测试环境遇到了windows环境下的nginx使用file_get_contents/curl访问php文件导致的阻塞问题,一直在找解决的方案,这个问题研究了三天终于找到了解决方案,特别 ...

  9. filter 全局和局部过滤器

    1,局部过滤器 2,全局过滤器 使用方法相同,在花括号中使用过滤器名或者v-bind中使用

  10. github node.js

    #安装githubyum install git -y #下载nvmgit clone git://github.com/creationix/nvm.git ~/nvm #设置nvm 自动运行;ec ...