前端概述
#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
单元格内容的垂直对齐方式
bgcolo
r 单元格的背景颜色 -
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>