一、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. EF 数据迁移 常见错误

    1.错误 “LC.exe”已退出,代码为 -1 原因:解决方案出错,而非迁移的项目

  2. 简单搭建一个SpringBoot

    1.SpringBoot下载 https://start.spring.io/ 选择工程类型,编译语言,版本,工程名称,需要支持组件等:选择好了以后点击生成项目. 之后会下载一个压缩文件,解压之后导入 ...

  3. chrome开发者工具实现整站截屏

    我们经常要遇到将整个网站作为图片保存下来的情况,而windows系统自带的PrintScreen键只能保存当前屏幕的截图 在chrome浏览器中可以安装第三方的截图插件实现整站截图 今天我们要介绍的方 ...

  4. RSA总结

    面试问到RSA了,大脑有些空白,查漏补缺吧 什么是RSA RSA算法是一种非对称的加密算法,所谓非对称,就是指算法需要一对密钥,使用其中一个加密,则需要另一个才能解密.密钥分为公钥和私钥,私钥自己保存 ...

  5. python--第二十天总结（Django的一些注意）

    关闭Django模板的自动转义 Django的模板中会对HTML标签和JS等语法标签进行自动转义,原因显而易见,这样是为了安全.但是有的时候我们可能不希望这些HTML元素 被转义,比如我们做一个内容管 ...

  6. yii2 模板twig中使用GridView::widget

    yii框架twig模板中使用GridView::widget 需要这样写: {{ grid_view_widget({ 'dataProvider': provider, 'columns': [ ' ...

  7. 使用python画一只佩奇

    打开界面: 打开python shell界面. 建立脚本: 单击"file"——"new file"来建立脚本. 编写代码: 具体的代码如下. import t ...

  8. Retrofit 2.0 上传文件

    1.用MultipartBody.Part的方式上传文件(单文件上传)(表单方式) @Multipart @POST("xxx/xxx") Call<ResponseBody ...

  9. Centos7下面配置客户端OpenVPN

    安装 openvpn yum install -y openvpn vim 配置默认的 daemon 文件 vim /usr/lib/systemd/system/openvpn@.service [ ...

  10. centos7下编译安装nginx-1.16.0

    一.下载nginx源码 http://nginx.org/en/download.html 如:nginx-1.16.0.tar.gz 二.创建用户和组,并解压 groupadd www userad ...