Python-Web开发基础-HTML

CS模式：C/S 就是Client/Server 的缩写，是客户端和服务器架构
BS模式：B/S 就是Browser/Server的缩写，是浏览器和服务器架构
网页主要由三部分组成：结构（Structure），表现（Presentation）、行为（Behavior）

最简单的web应用程序

import socketsock=socket.socket()
sock.bind(("127.0.0.1",8888))
sock.listen(5)while True:conn,addr=sock.accept()recv_data=conn.recv(1024)conn.send(("HTTP/1.1 200 ok\r\n\r\nholle word").encode())conn.close()sock.close()

前端基础 HTML

HTTP协议：HTTP协议是Hyper Text Transfer Protocol（超文本传输协议）的缩写，是用于万维网（WWW:World Wide Web ）服务器与本地浏览器之间传输超文本的传送协议。HTTP是一个属于应用层的面向对象的协议，由于其简捷、快速的方式，适用于分布式超媒体信息系统，HTTP协议工作于客户端-服务端架构为上。浏览器作为HTTP客户端通过URL向HTTP服务端即WEB服务器发送所有请求。Web服务器根据接收到的请求后，向客户端发送响应信息。
HTTP协议特性

基于TCP/IP协议：http协议是基于TCP/IP协议之上的应用层协议。
基于请求－响应模式：HTTP协议规定,请求从客户端发出,最后服务器端响应该请求并返回。
无状态保存：-HTTP是一种不保存状态,即无状态(stateless)协议。HTTP协议自身不对请求和响应之间的通信状态进行保存。也就是说在HTTP这个级别,协议对于发送过的请求或响应都不做持久化处理。 -使用HTTP协议,每当有新的请求发送时,就会有对应的新响应产生。协议本身并不保留之前一切的请求或响应报文的信息。这是为了更快地处理大量事务,确保协议的可伸缩性,而特意把HTTP协议设计成如此简单的。可是,随着Web的不断发展,因无状态而导致业务处理变得棘手的情况增多了。比如,用户登录到一家购物网站,即使他跳转到该站的其他页面后,也需要能继续保持登录状态。针对这个实例,网站为了能够掌握是谁送出的请求,需要保存用户的状态。HTTP/1.1虽然是无状态协议,但为了实现期望的保持状态功能, 于是引入了Cookie技术。有了Cookie再用HTTP协议通信,就可以管理状态了
无连接：无连接的含义是限制每次连接只处理一个请求。服务器处理完客户的请求，并收到客户的应答后，即断开连接。采用这种方式可以节省传输时间。

http请求协议与响应协议：http协议包含由浏览器发送数据到服务器需要遵循的请求协议与服务器发送数据到浏览器需要遵循的请求协议。用于HTTP协议交互的信被为HTTP报文。请求端(客户端)的HTTP报文做请求报文,响应端(服务器端)的做响应报文。HTTP报文本身是由多行数据构成的字文本。

请求协议

请求方式: get与post请求

GET提交的数据会放在URL之后，以?分割URL和传输数据，参数之间以&相连，如EditBook?name=test1&id=123456. POST方法是把提交的数据放在HTTP包的请求体中.。 GET提交的数据大小有限制（因为浏览器对URL的长度有限制），而POST方法提交的数据没有限制
响应协议：响应状态码：状态码的职责是当客户端向服务器端发送请求时, 返回的请求结果。借助状态码,用户可以知道服务器端是正常理了请求,还是出现了错误。

HTML概述

HTML，即超文本标记语言（HyperText Markup Language ]），由SGML (标准通用标记语言) 发展而来，也叫web页面。扩展名是 .html 或是 .htm 。
HTML，是一种用来制作网页的标准标记语言。超文本，指的就是超出普通文本范畴的文档，可以包含文本、图片、视频、音频、链接等元素。
HTML 不是一种编程语言，而是一种写给网页浏览器、具有描述性的标记语言。

HTML标准结构

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body></body>
</html>

1、<!DOCTYPE html> 告诉浏览器使用什么样的html或者xhtml来解析html文档

2、<html></html>是文档的开始标记和结束标记。此元素告诉浏览器其自身是一个 HTML文档，在它们之间是文档的头部<head>和主体<body>。

3、<head></head>元素出现在文档的开头部分。<head>与</head>之间的内容不会在浏览器的文档窗口显示，但是其间的元素有特殊重要的意义。

4、<title></title>定义网页标题，在浏览器标题栏显示。

5、<body></body>之间的文本是可见的网页主体内容

6、<meta charset="UTF-8"> 声明编码方式用utf8

标签的语法

<标签名属性1=“属性值1” 属性2=“属性值2”……>内容部分</标签名>
<标签名属性1=“属性值1” 属性2=“属性值2”…… />

基本标签

标题标签
```
<h1>标题1</h1>
```
段落标签
```
<p>文本</p>
```

换行标签

/*<br/>代表换行*/
<p>文本<br/> 文本</p>

文本格式化标签

<b>定义粗体文本</b><br />
<strong>定义粗体文本方式2</strong><br />
<em>定义斜体字</em><br />
<i>定义斜体字方式2</i><br />
<del>定义删除文本</del><br />

div和span标签

<div>只是一个块级元素，并无实际的意义。主要通过CSS样式为其赋予不同的表现.
<span>表示了内联行(行内元素),并无实际的意义,主要通过CSS样式为其赋予不同的表现

标签大致可分为两类

块级标签(block) -- 独占一行
内联标签(inline) -- 按文本内容占位

超链接标签

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<a href="链接地址" target="_blanks" title="提示信息">文本</a>
/*
*target：4个值分别是
*_blank [ 在新建窗口中打开网页 ]
*_self  [ 默认值，覆盖自身窗口打开网页 ]
*_parent [ 在父级框架中打开网页 ]
*_top  [ 在顶级框架中打开网页 ]
*/</body>
</html>

锚点：实现实现页面内的链接跳转

锚点应用<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<!--属性值前面加#表示要跳转的地址-->
<a href="#c1">导航标题1</a>
<a href="#c2">导航标题2</a>
<a href="#c3">导航标题3</a>
<span id="top"></span>
<!--top固定属性值：返回顶部--><div id="c1">标题1内容 <a href="#top">返回顶部</a>   </div>
<div id="c2">标题2内容 <a href="#top">返回顶部</a>   </div>
<div id="c3">标题3内容 <a href="#top">返回顶部</a>   </div></body>
</html>

img标签：自闭和标签

/*
src属性：指定图像的URL地址，可以是本地图片地址，也可以是网络图片地址
alt属性：指定图像无法显示时的替换文本。
width属性： 指定引入图片的显示宽度。
height属性：指定引入图片的显示高度。
border属性：指定引入图片的边框宽度，默认为0。
title属性：悬浮图片上的提示文字
*/要想图片可以跳转，可以配合a标签使用
<a><img src="" alt=""></a>

列表标签

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>ul：无序列表<ul><li>标签1</li><li>标签2</li></ul>ol：有序列表<ol><li>标签1</li><li>标签2</li>></ol></body>
</html>

表格标签

1、<table>和</table>表示一个表格的开始和结束。一组<table>...</table>表示一个表格。2、border用于设置整个表格的边框宽度，默认为0，表示不显示边框。3、<tr>和</tr>表示表格中的一行的开始和结束。一个表格可以有多行。通过计算table标签中包含多少对tr子标签即可知道一个表格有多少行。4、<td>和</td>表示表格中的一列的开始和结束。通过计算一个tr里面包含了多少对td自标签即可知道一个表格有多少列，多少的单元格了。属性：
1、align="center" 表示居中
2、cellpadding="值" 表示长
3、cellspacing="值" 表示高
4、rowspan="值" 列合并示例<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<table border="1" align="center" cellpadding="10px" cellspacing="5px">/* 一行 3 列 */<tr><th>文本</th><th>文本</th><th>文本</th></tr>/* 一行 2 列 */<tr><td>文本</td><td>文本</td></tr></table>
</body>
</html>

table表格属性

属性	值	描述
width	px、%	规定表格的宽度。
height	px、%	规定表格的高度。
align	left、center、right	规定表格相对周围元素的对齐方式。
bgcolor	rgb(x,x,x)、#xxxxxx、colorname	规定表格的背景颜色。
background	url	规定表格的背景图片。
border	px	规定表格边框的宽度。
cellpadding	px、%	规定单元格边框与其内容之间的空白。
cellspacing	px、%	规定单元格之间的空隙。

td和th单元格属性，单元格和行属性类似

属性	值	描述
height	px、%	规定单元格的高度。
width	px、%	规定单元格的宽度。
align	left、center、right	规定单元格内容的对齐方式。
valign	top、middle、bottom	规定单元格内容的垂直对齐方式。
bgcolor	rgb(x,x,x)、#xxxxxx、colorname	规定单元格的背景颜色。
background	url	规定单元格的背景图片。
rowspan	number	规定单元格合并的行数
colspan	number	规定单元格合并的列数

表单标签

表单主要是用来收集客户端提供的相关信息，提供了用户数据录入的方式，有多选、单选、单行文本、下拉列表等输入框，便于网站管理员收集用户的数据，是Web浏览器和Web服务器之间实现信息交流和数据传递的桥梁.

表单被form标签包含，内部使用不同的表单元素来呈现不同的方式来供用户输入或选择。当用户输入好数据后，就可以把表单数据提交到服务器端。

一个表单元素有三个基本组成部分：

表单标签，包含了表单处理程序所在的URL以及数据提交到服务器的方法等表单信息。
表单域，包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等表单控件。
表单按钮，包括提交按钮、复位按钮和一般按钮，用于将数据传送到服务器上的CGI脚本或者取消输入，还可以用表单按钮来控制其他定义了处理脚本的处理工作。

在HTML中创建表单用form标签。每个表单都可以包含一到多个表单域或按钮。

form标签属性：

属性	值	描述
action	访问服务器地址	服务器端表单处理程序的URL地址
method	post、get[默认值]	表单数据的提交方法
target	参考超链接的target属性	表单数据提交时URL的打开方式
enctype	application/x-www-form-urlencoded[默认值格式（"a"=1＆"b"=2）] multipart/form-data [用于文件上传] text/plain [用于纯文本数据发送] , json [格式{"a":1,"b":2}]	表单提交数据时的编码方式

示例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<h3>注册用户</h3><form action="http://127.0.0.1:8888" method="post" enctype="application/x-www-form-urlencoded"><p><label for="user">姓名：</label><input type="text" name="user" placeholder="用户名" id="user"></p>
<p>密码：<input type="password" name="pwd"></p>
<p>爱好：篮球<input checked="checked" type="checkbox" name="hobby" value="basketball">足球<input type="checkbox" name="hobby" value="football">
</p>
<p>性别：男<input type="radio" name="gender" value="1">女<input type="radio" name="gender" value="2">
</p><p>生日： <input type="date" name="birth">
</p><p>籍贯：<select name="province" multiple="multiple" size="3"><option value="hubei">湖北省</option><option value="henan">湖南省</option><option value="guangdong" selected="selected">广东省</option></select>
</p><p><textarea name="info" cols="50" rows="10" placeholder="个人简介"></textarea>
</p><p><input type="button" value="按钮"><input type="reset" value="reset"><input type="submit"><button>提交数据</button>
</p>

总结

请求协议：
请求首行请求方式 URL路径？数据
请求头
空行
请求体

GET和POST
响应首行
响应头
响应体

标签：

按格式：

闭合标签：<h1>内容</h1>

<标签名属性1=“属性值1” 属性2=“属性值2”……>内容部分</标签名>

自闭合标签：<img src=''>

<标签名属性1=“属性值1” 属性2=“属性值2”…… />

按功能分类：

块级标签（block）: 独占一行比如 p , h1-h6 ，div，ul，li

内联标签（inline）: 按内容占位置

b，strong，i，em del，span，a，img，input

基本嵌套原则：
块级可以嵌套块级和内联
内联只可以嵌套内联

客户端（浏览器）向服务端发送请求形式：

1、地址栏请求 get请求
2、超链接标签 get请求
3、form表单 get、post请求
4、ajax

Content_Type : multipart/form-data 发送文件

Content_Type : application/x-www-form-urlencoded 例如 "a=1&b=2&c=3"

Content_Type : json 例如 {"a":1,"b":2}