前端概述
#BS模式
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()
buf = connection.recv(1024)
connection.sendall(bytes("HTTP/1.1 201 OK\r\n\r\n","utf8"))
connection.sendall(bytes("<h1>Hello,World</h1>","utf8"))
connection.close()
if __name__ == '__main__':
main()
HTML 是什么？
htyper text markup language 即超文本标记语言
超文本: 就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。
标记语言: 标记（标签）构成的语言.
网页==HTML文档，由浏览器解析，用来展示的
静态网页：静态的资源，如xxx.html
动态网页：html代码是由某种开发语言根据用户请求动态生成的
html文档树形结构图：
什么是标签
- 是由
一对尖括号包裹的单词构成 例如: *所有标签中的单词不可能以数字开头. - 标签不区分大小写. 和 . 推荐使用小写.
- 标签分为两部分:
开始标签<a>和结束标签</a>.两个标签之间的部分 我们叫做标签体. - 有些标签功能比较简单.使用一个标签即可.这种标签叫做自闭和标签.例如:
<br/> <hr/> <input /> - 标签可以嵌套.但是不能交叉嵌套.
标签的属性
- 通常是以键值对形式出现的. 例如 name=“alex”
- 属性只能出现在开始标签 或 自闭和标签中.
- 属性名字全部小写. *属性值必须使用双引号或单引号包裹 例如 name=“alex”
- 如果属性值和属性名完全一样.直接写属性名即可. 例如 readonly
<!DOCTYPE html>标签
由于历史的原因，各个浏览器在对页面的渲染上存在差异，甚至同一浏览器在不同版本中，对页面的渲染也不同。在W3C标准出台以前，浏览器在对页面的渲染上没有统一规范，产生了差异(Quirks mode或者称为CompatibilityMode)；由于W3C标准的推出，浏览器渲染页面有了统一的标准(CSScompat或称为Strict mode也有叫做Standarsmode)，这就是二者最简单的区别。
W3C标准推出以后，浏览器都开始采纳新标准，但存在一个问题就是如何保证旧的网页还能继续浏览，在标准出来以前，很多页面都是根据旧的渲染方法编写的，如果用的标准来渲染，将导致页面显示异常。为保持浏览器渲染的兼容性，使以前的页面能够正常浏览，浏览器都保留了旧的渲染方法（如：微软的IE）。这样浏览器渲染上就产生了Quircks mode和Standars mode，两种渲染方法共存在一个浏览器上。
window.top.document.compatMode：
//BackCompat：怪异模式，浏览器使用自己的怪异模式解析渲染页面。
//CSS1Compat：标准模式，浏览器使用W3C的标准解析渲染页面。
这个属性会被浏览器识别并使用，但是如果你的页面没有DOCTYPE的声明，那么compatMode默认就是BackCompat,这也就是恶魔的开始 – 浏览器按照自己的方式解析渲染页面，那么，在不同的浏览器就会显示不同的样式。
如果你的页面添加了<!DOCTYPE html>那么，那么就等同于开启了标准模式，那么浏览器就得老老实实的按照W3C的标准解析渲染页面，这样一来，你的页面在所有的浏览器里显示的就都是一个样子了。
这就是<!DOCTYPE html>的作用。
head标签
<head>标签标示网页的头部信息，包含网页的标题，选项卡的图标，网页的关键字，作者，描述等信息，还可以引入外部的资源文件
<meta>
meta标签的组成：meta标签共有两个属性，它们分别是http-equiv属性和name 属性，不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能。
1: name属性主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。
<meta name="keywords" content="meta总结,html meta,meta属性,meta跳转">
<meta name="description" content="老男孩培训机构是由一个老的男孩创建的">
2: http-equiv顾名思义，相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确和精确地显示网页内容，与之对应的属性值为content， content中的内容其实就是各个参数的变量值。
<meta http-equiv="Refresh" content="2;URL=https://www.baidu.com"> //(注意后面的引号，分别在秒数的前面和网址的后面)
<!-- 参数URL 为两秒后跳转到的链接，若不指定，则两秒后刷新本页面-->
<meta http-equiv="content-Type" charset=UTF8">
<!--字符编码格式，-->
<meta http-equiv = "X-UA-Compatible" content = "IE=EmulateIE7" />
<!--兼容的 浏览器模式-->
非meta标签
<title>oldboy</title>
<link rel="icon" href="http://www.jd.com/favicon.ico">
<link rel="stylesheet" href="css.css">
<script src="hello.js"></script>
body标签
一 基本标签（块级标签和内联标签）
-
<hn>: n的取值范围是1~6; 从大到小. 用来表示标题. -
<p>: 段落标签. 包裹的内容被换行.并且也上下内容之间有一行空白.
突出显示一段文本，每段文本都独占一行或一块，不予其他元素共行显示，并且也具备垂直的空白距离 -
<div></div>划分页面结构，配合CSS实现网页布局,独占一行显示（独占一块） -
<b><strong>: 加粗标签. -
<strike>: 为文字加上一条中线. -
<em>: 文字变成斜体. -
<sup>和<sub>: 上角标 和 下角表. -
<br>:换行. -
<hr>:水平线 -
<span></span>设置同一行文本的不同样式（结合CSS）,可以与其他元素或文本共行显示
块级标签：<p> <h1> <table> <ol> <ul> <form> <div>
作用：都可以做布局
特点：都可以添加algin属性，设置内容的水平对齐方式
内联标签：<a> <input> imag <sub> <sup> <textarea> <span>
b l o c k （ 块 ） 元 素 的 特 点 \color{HotPink}{block（块）元素的特点} block（块）元素的特点
- 总是在新行上开始；
- 宽度缺省是它的容器的100%，除非设定一个宽度。
- 它可以容纳内联元素和其他块元素
i n l i n e 元 素 的 特 点 \color{HotPink}{inline元素的特点} inline元素的特点
- 和其他元素都在一行上；
- 宽度就是它的文字或图片的宽度，不可改变
- 内联元素只能容纳文本或者其他内联元素
特 殊 字 符 \color{HotPink}{特殊字符} 特殊字符
-  ；表示一个空格
- &it；表示小于号 <
- >；表示大于号
- ©；表示版权符号 ©
- ¥；表示人民币符号 ￥
文 本 样 式 标 记 \color{HotPink}{文本样式标记} 文本样式标记
- 斜体显示文本：
<i></i> - 文本添加下划线：
<u></u> - 文本加粗效果：
<b></b> - 文本添加删除线：
<s></s> - 上标显示文本：
<sup></sup> - 下标显示文本：
<sub></sub>
<!doctype html>
<html>
<head>
<title>文本样式</title>
<meta charset="utf-8">
</head>
<body>
这是一段有<b>加粗</b>，<i>斜体</i>，<u>下滑线</u>，<s>删除线</s>，<sup>上</sup>标，<sub>下</sub>标
<!-- 标题标签 -->
<h1 align="center">咏鹅</h1>
<h2 align="right">骆宾王</h2>
<h3 align="center">鹅鹅鹅</h3>
<h4 align="center">曲项向天歌</h4>
<h5 align="center">白毛浮绿水</h5>
<h6 align="center">红掌拨清波</h6>
<!-- 段落标签 -->
<p align="center">我们一起学猫叫</p>
<p align="right">一起喵喵喵</p>
<!-- 换行标签 -->
西湖美景三月天，<br>
春雨无度柳如烟
<!-- 块分区标签 -->
<div>块分区元素</div>
<div>块分区元素</div>
<!-- 行内分区元素 -->
<h1><span>红色</span>文本</h1>
<p>这是一段文本，包含<span>绿色</span>文本</p>
<div><span>DIV</span>标签</div>
</body>
</html>
二 图形标签:
- URL
Uniform Resource Locator
统一资源定位符：用来标识网络中资源的位置，俗称路径
URL组成：协议 域名 文件目录及文件名
URL分类：
- **绝对路径**
从根目录开始查找
常用于网络文件路径
et：访问网络资源
`http://www.baidu.com`
` http://www.baidu.com/img/logo.png`
- 相对路径
从当前文件所在的文件夹开始查找
-
src: 要显示图片的路径.src为必填属性 -
alt: 图片没有加载成功时的提示. -
title: 鼠标悬浮时的提示信息. -
width: 图片的宽 -
height:图片的高 (宽高两个属性只用一个会自动等比缩放.)
注意：src为必填属性，宽高可以省略，省略宽高的话，图片将以原始尺寸显示在网页中
三 超链接标签(锚标签)<a>
-
href:要连接的资源路径 必填属性，指定链接地址，以路径形式给出格式如下: href=“http://www.baidu.com” -
target: :可选属性，设置目标文件的打开方式
_self：默认值，表示在当前窗口打开
_blank：表示新建窗口打开 -
name: 锚点链接 链接到当前文件的指定位置
设置锚点:
<a name="anchor1"></a>
设置跳转:
<a href="#anchor1">早年经历</a>
用于跳转 href : #id.（锚）
点击链接将跳转到href 指定的链接 <a></a>标签之间也可以是图片 等内容
点击‘返回顶部’ 将返回到本页面的顶部 href=’#abc’ 表示链接到本页面 id=‘abc’的地方。每个标签都可以定义自己的id
四 列表标签：
-
<ul>: 无序列表
<li>:列表中的每一项. -
<ol>: 有序列表
<li>:列表中的每一项. -
<dl>定义列表
<dt>列表标题
<dd>列表项
有序列表 --ol : -
type属性：设置项目符号
取值1：按照数字排列显示，默认值
a：按照小写字母顺序排列
A：按照大写字母排列
i：按照罗马数字排列
I：按照罗马数字排列罗马数字：i ii iii iv v vi vii…
-
start属性：
设置从第几个字符开始排列
取值：数字
无序列表 -ul
- type属性：设置项目符号
取值：
disc 实心原点（默认）
circle 空心圆点
square 实心方块
none 不显示项目符号
<!--order list-->
order list
<ol>
<li>111</li>
<li>22</li>
<li>333</li>
</ol>
dl
<dl>
<dt>第一章</dt>
<dd>第一节</dd>
<dd>第二节</dd>
<dd>第三节</dd>
</dl>
<!--unorder list-->
unorder list
<ul>
<li>111</li>
<li>22</li>
<li>333</li>
</ul>
五 表格标签: <table>
-
table 属性
border：设置边框，取值以px为单位的数值（px可以省略）
width：设置宽度
height：设置高度
align：设置表格在其父元素中的水平对齐方式
cellpadding: 设置单元格的内边距（内容与边框之间的距离），取值为px单位的数值
cellspacing: 设置单元格的外边距（单元格与单元格之间的距离，或者单元格与表格边框之间的距离），取值像素为单位的数值
bgcolor: 设置表格的背景颜色，取值可以是英文的颜色名称 -
tr 标签属性
bgcolor: 设置当前行的背景颜色
align：设置当前行中内容的水平对齐方式 取值 ： left / center / right
valign:设置当前行内容的垂直对齐方式 取值 ：top / middle / bottom,默认垂直居中 -
td 标签属性
width设置单元格的宽度
height设置单元格的高度
align单元格内容的水平对齐方式
valign单元格内容的垂直对齐方式
bgcolor 单元格的背景颜色 -
border: 表格边框. -
cellpadding: 内边距 -
cellspacing: 外边距. -
width: 像素 百分比.（最好通过css来设置长宽） -
<tr>:table row<th>: table head cell <td>: table data cell -
rowspan: 单元格竖跨多少行
-
colspan: 单元格横跨多少列（即合并单元格）
-
<th>: table header<tbody>(不常用): 为表格进
单元格合并（重点）
是单元格独有的属性 colspan rowspan
- 单元格的跨列合并
从当前单元格的位置开始，横向向右合并几个单元格
colspan='3'->跨3列进行合并（包含自身） - 单元格的跨行合并
从当前的单元格开始，纵向向下合并单元格
rowspan='3'-> 向下跨3行合并单元格 - 注意：一旦发生单元格合并
跨列合并，要删除当前行中多于的单元格
跨行合并，要删除其后行中多于的单元格
始终保持表格结构完整
行分组–表格结构
- 行分组
允许将表格中的一行或者若干行划分为一组，便于管理 - 语法
表头行分组 :
表尾行分组<thead> <tr> <td></tb> </tr> </thead>
表主体信息<tfoot> <tr> <tb></tb> </tr> </tfoot><tbody> <tr> <tb></tb> </tr> </tbody>
注意：<thead> <tfoot> <tbody> 可以省略，默认情况下，所有的行都会被自动添加到tbody中
如果需要手动添加行分组，建议按照thead tfoot tbody的顺序书写
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
</head>
<body>
<!-- 行分组标签 -->
<table border="1">
<thead>
<tr>
<td>姓名</td>
<td>年龄</td>
<td>班级</td>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="2">总计</td>
<td>人</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>张三</td>
<td>20</td>
<td>三年二班</td>
</tr>
<tr>
<td>张三</td>
<td>20</td>
<td>三年二班</td>
</tr>
</tbody>
</table>
</body>
</html>
六 表单标签<form>
- 表单用于向服务器传输数据。
- 表单能够包含
input 元素，比如文本字段、复选框、单选框、提交按钮等等。 - 表单还可以包含
textarea、select、fieldset和label元素。
1.表单属性
HTML 表单用于接收不同类型的用户输入，用户提交表单时向服务器传输数据，从而实现用户与Web服务器的交互。表单标签, 要提交的所有内容都应该在该标签中.
action: 表单提交到哪. 一般指向服务器端一个程序,程序接收到表单提交过来的数据（即表单元素值）作相应处理，比如https://www.sogou.com/web
method: 表单的提交方式 post/get 默认取值 就是 get（信封）
- get: 通常用于向服务器端获取数据1.提交的键值对.放在地址栏中url后面. 2.安全性相对较差. 3.对提交内容的长度有限制,提交数据最大为2kb.
- post:将数据提交给服务器处理1.提交的键值对 不在地址栏. 2.安全性相对较高. 3.对提交内容的长度理论上无限制.
- get/post是常见的两种请求方式.
2.表单元素
<input>标签的属性和对应值
-
文本框和密码框
语法：
文本框<input type='text'>
密码框<input type='password'>
属性：
name属性 定义当前控件的名称，缺少的话无法提交name = ‘uname’uname = zhangsan
value属性，要提交给服务器的值，同时也是默认显示在控件上的值
maxlength用来限制用户输入的最大字符数
placeholder用户输入之前显示在框中的提示文本 -
单选框和复选框
单选按钮<input type='radio'>
复选框<input type='checkbox'>
属性
name定义控件名称，还起到分组的作用，一组中的按钮名称必须保持一致
value属性，设置当前控件的值，最终提交给服务器
checked属性设置预选中状态 可以省略属性值，也可以使用 ‘checked’作为 -
隐藏域和文件选择框
隐藏域
作用：需要提交给服务器但是却不需要呈现给用户的数据，都可以放在隐藏域中
语法：<input type='hidden'>
属性：
name控件名称
value控件的值
文件选择框
作用：选择文件上传，发送给服务器
语法：<input type='file'>
属性：name 定义空间名称 -
文本域
支持用户输入多行文本
语法：
属性：name控件名称
cols 指定文本域默认显示的列数，一行中能显示的英文字符量，中文减半
rows 指定文本域能够显示的行数
注意：文本域可以由用户调整大小
- 按钮
1 提交按钮
<input type='submit'>
将表单数据发送给服务器
2 重置按钮
<input type='reset'>
重置表单，将表单内容恢复到初始化状态
3 普通按钮
<input type='button' value='点击'>
可以绑定自定义事件
4 按钮中的value属性值实际上是定义按钮的显示文本
按钮显示文本
注意：
按钮标签可以在任何地方使用，不局限在form 表单中使用
按钮标签使用在form中，默认具有提交功能，等同于input submit
可以添加属性type 取值submit / reset / button 进行分区（非必填）
在表单外作为普通按钮使用时，需要通过JS 动态绑定事件
-
特殊用法
label for ID
语法：
<label for=' '>男</label>
<input type='radio' name='gender' value='male' id='male'>
使用label标签包裹表单控件要显示的文本信息，为label标签添加for属性，属性值与所要绑定的表单控件的ID属性值保持一致，实现文本与控件的绑定 -
type: -
text 文本输入框
-
password 密码输入框
-
radio 单选框
-
checkbox 多选框
-
submit 提交按钮
-
button 按钮(需要配合js使用.) button和submit的区别？
-
file 提交文件：form表单需要加上属性enctype=“multipart/form-data”
-
name: 表单提交项的键.注意和id属性的区别：name属性是和服务器通信时使用的名称；而id属性是浏览器端使用的名称，该属性主要是为了方便客 户端编程，而在css和javascript中使用的 -
value: 表单提交项的值.对于不同的输入类型，value 属性的用法也不同：
type="button", "reset", "submit" - 定义按钮上的显示的文本
type="text", "password", "hidden" - 定义输入字段的初始值
type="checkbox", "radio", "image" - 定义与输入相关联的值
checked: radio 和 checkbox 默认被选中
readonly: 只读. text 和 password
disabled: 对所用input都好使.设置禁用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="1.php">
<!-- 表单控件 -->
<!--文本框和密码框 -->
<p>
用户名：
<input type="text" name="uname" maxlength="8" placeholder="请输入用户名">
<span>最大长度为八位</span>
</p>
<p>
用户密码：
<input type="password" name="pwd">
</p>
<p>
用户性别：
<input type="radio" name="gender" value="male" checked> 男
<input type="radio" name="gender" value="famel"> 女
</p>
<p>
<!-- 复选框或者单选框的name属性值 是一样的 必须有value值 -->
用户爱好：
<input type="checkbox" name="hobby" value="smoke"> 抽烟
<input type="checkbox" name="hobby" value="drink"> 喝酒
<input type="checkbox" name="hobby" value="hothair"> 烫头
</p>
<input type="hidden" name="uID" value="10010">
<p>
上传文件：
<input type="file" name="ufile">
</p>
<p>
选择省份：
<select name="province" id="">
<option value="hebei">河北省</option>
<option value="henan">河南省</option>
</select>
</p>
<p>
个性签名：
<textare name="uInfo" cols="10" rows="10"></textare>
</p>
<p>
<input type="submit" name="submit" value="注册">
<input type="reset" name="teset" value="取消">
<input type="button" name="click" value="点我">
<button>登录(button-submit)</button>
</p>
</form>
</body>
</html>
#form表单像服务端发送的数据为 字典类型的数据格式
<!--{"username":"yuan","password":1234,"hobby":["music","movie"],"gender":["men"]}-->
<select>下拉选标签属性
name:表单提交项的键.
size：选项个数，默认是一个，当设置多个时，显示为滚动条形式
multiple：multiple 设置可以选中多个
<option> 下拉选中的每一项 属性：
`value`:表单提交项的值. `selected`: selected下拉选默认被选中
<optgroup>为每一项加上分组
可以设置一个label属性
<textarea> 文本域
name: 表单提交项的键.
cols: 文本域默认有多少列
rows: 文本域默认有多少行
<label>
<label for="www">姓名</label>
<input id="www" type="text">
<!--for 的值与id的值相等，能够将两个关联起来-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>注册页面</h1>
<!--action="http://127.0.0.1:8090/index" 链接到相应的服务端
method="post" 向服务端提交数据的方式
enctype="multipart/form-data" 上传文件所添加的参数，分段上传
-->
<form action="http://127.0.0.1:8090/index" method="post" enctype="multipart/form-data">
<p>姓名<input type="text" name="username" placeholder="姓名"></p>
<p>密码<input type="password" name="password" placeholder="密码" readonly="readonly"></p>
<!-- 复选框或者单选框的name属性值 是一样的
checked="checked" 默认选中
-->
<p>爱好： 音乐<input type="checkbox" name="hobby" value="music" checked="checked">电影<input type="checkbox" name="hobby" value="movie"></p>
<p>性别： 男<input type="radio" name="gender" value="men">女<input type="radio" name="gender" value="women"></p>
<!-- 上传文件 -->
<p><input type="file" name="put_file"></p>
<!-- 下拉列表选项
向服务端传送数据时，同样传输的时键值对形式name:value
-->
市1<select name="province" >
<!--selected="selected" 设置默认选中 -->
<option value="beijing" selected="selected"> 北京市 </option>
<option value="henan"> 河南省 </option>
<option value="hebei"> 河北省 </option>
</select>
市2<select name="province" >
<!--下拉框里面 设置一个分组 label不可以选中 -->
<optgroup label="河南省" >
<!--selected="selected" 设置默认选中 -->
<option value="beijing" selected="selected"> 郑州 </option>
<option value="henan"> 周口 </option>
<option value="hebei"> 焦作 </option>
</optgroup>
</select>
简介<textarea name="desc" rows="5" cols="20"></textarea>
<p>
<label for="11">姓名</label>
<input id='11' type='text' >
</p>
<p><input type="reset" value="重置"></p>
<p><input type="button" value="提交注册"></p>
<p><input type="submit" value="提交注册"></p>
</form>
</body>
</html>
利用表格控件 进行处理
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
</head>
<body>
<h1>增加管理员</h1>
<form action="" method="">
<table>
<tr>
<td>姓名 ：</td>
<td>
<input type="text" name="uname" maxlength="10">
</td>
<td>十个字符以内</td>
</tr>
<tr>
<td>密码 ：</td>
<td>
<input type="password" name="upwd" maxlength="10">
</td>
<td>十个字符以内</td>
</tr>
<tr>
<td>性别 ：</td>
<td>
<input type="radio" name="gender" value="male"> 男士
<input type="radio" name="gender" value="female"> 女士
</td>
<td></td>
</tr>
<tr>
<td>角色 ：</td>
<td>
<input type="checkbox" name="role" value="superAdmit"> 超级管理员
<br>
<input type="checkbox" name="role" value="admit"> 账单管理员
</td>
<td>至少选择一个角色</td>
</tr>
<tr>
<td>头像 ：</td>
<td>
<input type="file" name="uImg">
</td>
<td></td>
</tr>
<tr>
<td></td>
<td>
<input type="submit" name="submit" value="保存">
<input type="reset" name="reset" value="重置">
</td>
<td></td>
</tr>
</table>
</form>
</body>
</html>
扫一扫
1001
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
