python&&HTML开发基础&&学习笔记
- python&&HTML开发基础&&学习笔记
- HTML概要
- HTTP请求流程
- HTML代码结构分析
- CSS概要
- CSS之样式概要和各种选择器
- CSS之样式背景图片
- CSS之样式边距和内外边距
- CSS之样式positio
- CSS之模态对话框
python&&HTML开发基础&&学习笔记
HTML概要
HTTP请求流程
#!/usr/bin/env python
#coding:utf-8
import
socket
#定义处理请求的方法
def
handleRequest
(
client
)
:
buf
=
client
.
recv
(
1024
)
#返回访问http页面的返回的http状态码（404,200等）
sendBytes1
=
(
"HTTP/1.1 200 OK\r\n"
)
.
encode
(
encoding
=
'utf_8'
,
errors
=
'strict'
)
#返回页面允许展示的类型，即页面内数据的解析方法
sendBytes2
=
(
"Content-Type:text/html\r\n\r\n"
)
.
encode
(
encoding
=
'utf_8'
,
errors
=
'strict'
)
sendBytes3
=
(
"
hello , i'm from python socket
"
)
.
encode
(
encoding
=
'utf_8'
,
errors
=
'strict'
)
client
.
send
(
sendBytes1
)
client
.
send
(
sendBytes2
)
client
.
send
(
sendBytes3
)
def
main
(
)
:
#创建socket对象
sock
=
socket
.
socket
(
socket
.
AF_INET
,
socket
.
SOCK_STREAM
)
sock
.
bind
(
(
'localhost'
,
8080
)
)
sock
.
listen
(
5
)
while
True
:
#获取客户端socket对象，客户端IP地址
connection
,
address
=
sock
.
accept
(
)
handleRequest
(
connection
)
connection
.
close
(
)
if
__name__
==
"__main__"
:
main
(
)
HTML代码结构分析
Doctype
Doctype告诉浏览器使用什么样的HTML或XHTML规范来解析HTML文档
Doctype的作用
首先了解两个概念：
- BackCompat:标准兼容模式未开启，又称为怪异模式（Quirks mode）或混杂模式
-
CSS1Compat:标准兼容模式已开启，又称严格模式（Standards mode/Strict mode）
如果您的页面没有DOCTYPE的声明，CompatMode默认是BackCompat，该模式下浏览器将按照自己的方式解析渲染页面，即不同的浏览器打开相同的网页显示不同的样式；如果您的页面有DOCTYPE的声明，即开启了标准模式，该模式下浏览器按照W3C的标准解析渲染页面，不同的浏览器打开相同的网页显示相同的样式。
<
html
>
<
head
>
<
meta
http-equiv
=
"
content-type
"
content
=
"
text/html;charset=utf-8
"
>
<
meta
http-equiv
=
"
X-UA-Compatible
"
content
=
"
IE=Edge
"
>
<
title
>
Tab标签名称
title
>
head
>
<
body
>
<
div
>
DIV1
div
>
<
div
>
DIV2
div
>
<
span
>
SPAN1
span
>
<
span
>
SPAN2
span
>
<
a
>
显示a1标签
<
a
>
a
>
<
a
href
=
'
http://www.baidu.com
'
>
显示a2标签
<
a
>
点击当前页面跳转百度
a
>
<
a
href
=
'
http://www.baidu.com
'
target
=
"
_blank
"
>
显示a3标签
<
a
>
点击新页面跳转百度
a
>
<
a
href
=
'
#maoDian
'
>
显示a4标签
<
a
>
点击当前页面跳转锚点
a
>
<
p
>
这是一个段落
p
>
<
br
/>
<
div
style
='
height
:
1000px
;
background-color
:
blue
'
>
当前div标签高度为1000px,背景颜色为蓝色
div
>
<
h1
>
h1
h1
>
<
h2
>
h2
h2
>
<
h3
>
h3
h3
>
<
h4
>
h4
h4
>
<
h5
>
h5
h5
>
<
h6
>
h6
h6
>
<
select
>
<
option
value
=
"
1
"
>
北京
option
>
<
option
value
=
"
2
"
>
上海
option
>
<
option
value
=
"
3
"
selected
=
"
selected
"
>
广州
option
>
select
>
<
select
size
=
"
2
"
>
<
option
value
=
"
1
"
>
北京
option
>
<
option
value
=
"
2
"
>
上海
option
>
<
option
value
=
"
3
"
selected
=
"
selected
"
>
广州
option
>
select
>
<
br
/>
<
p
>
按住Ctrl键可以多选
<
p
>
<
br
/>
<
select
multiple
=
"
multiple
"
size
=
"
3
"
>
<
option
value
=
"
1
"
>
北京
option
>
<
option
value
=
"
2
"
>
上海
option
>
<
option
value
=
"
3
"
selected
=
"
selected
"
>
广州
option
>
select
>
<
select
>
<
optgroup
Label
=
"
北京市
"
>
<
option
value
=
"
1
"
>
北京
option
>
optgroup
>
<
optgroup
Label
=
"
上海市
"
>
<
option
value
=
"
2
"
>
上海
option
>
optgroup
>
<
optgroup
Label
=
"
广州省
"
>
<
option
value
=
"
3
"
>
深圳
option
>
<
option
value
=
"
4
"
selected
=
"
selected
"
>
珠海
option
>
optgroup
>
select
>
<
div
id
=
'
maoDian
'
>
跳转到该锚点
div
>
<
input
type
=
'
text
'
maxlength
=
'
2
'
>
明文输入框类型的input标签,最大输入长度为2
input
>
<
br
/>
<
input
type
=
"
password
"
>
密码输入框类型的input标签
input
>
<
br
/>
<
p
>
多选类型的input标签
p
>
<
input
type
=
'
checkbox
'
>
北京
input
>
<
input
type
=
'
checkbox
'
>
上海
input
>
<
input
type
=
'
checkbox
'
>
广州
input
>
<
br
>
<
p
>
单选类型的input标签
p
>
<
input
type
=
'
radio
'
name
=
'
gender
'
>
boy
input
>
<
input
type
=
'
radio
'
name
=
'
gender
'
>
girl
input
>
<
br
/>
<
p
>
按钮类型的input标签
p
>
<
input
type
=
'
button
'
value
=
"
这货是按钮
"
>
input
>
<
input
type
=
'
submit
'
value
=
"
这货是提交
"
>
input
>
<
br
/>
<
p
>
上传文件类型的input标签
p
>
<
input
type
=
'
file
'
value
=
"
这货是上传
"
>
input
>
<
br
/>
<
p
>
textarea标签。textarea标签表示文本框
p
>
<
textarea
>
textarea
>
<
br
/>
<
p
>
form标签。form标签表示表单。form标签用于采集前台用户输入数据并提交到后台
p
>
<
p
>
form标签的action属性设置submit按钮提交的位置
p
>
<
form
action
=
'
'
method
=
'
POST
'
>
Name:
<
input
name
=
'
username
'
type
=
'
text
'
/>
<
br
/>
Pwd :
<
input
name
=
'
password
'
type
=
'
password
'
/>
<
br
/>
<
input
type
=
'
submit
'
value
=
'
提交
'
>
form
>
<
br
/>
<
p
>
label标签。label标签提高代码执行用户体验感。
p
>
<
p
>
使用label标签时用户可以通过点击文本"姓名："令光标出现在input标签内
p
>
<
label
for
=
'
nameLabel
'
>
姓名：
<
input
type
=
'
text
'
id
=
'
nameLabel
'
>
label
>
<
br
/>
<
p
>
列表标签。
p
>
<
ul
>
<
li
>
ul.li标签
li
>
<
li
>
英文逗号
li
>
<
li
>
排序标签
li
>
<
ul
>
<
ol
>
<
li
>
ol.li标签
li
>
<
li
>
自增数字
li
>
<
li
>
排序标签
li
>
ol
>
<
p
>
自缩进类型标签
p
>
<
dl
>
<
dt
>
北京市
dt
>
<
dd
>
北京
dd
>
<
dt
>
上海市
dt
>
<
dd
>
北京
dd
>
dl
>
<
p
>
table标签。table标签表示表格
p
>
<
p
>
table标签之tr,th,td
p
>
<
table
border
=
'
1
'
>
<
tr
>
<
th
>
20190910
th
>
<
th
>
20190911
th
>
<
th
>
20190912
th
>
tr
>
<
tr
>
<
td
>
吃饭
td
>
<
td
>
睡觉
td
>
<
td
rowspan
=
'
2
'
>
打豆豆
td
>
tr
>
<
tr
>
<
td
colspan
=
'
2
'
>
AA
td
>
tr
>
table
>
<
p
>
table标签之thead,tbody
p
>
<
table
border
=
'
1
'
>
<
thead
>
<
tr
>
<
th
>
20190910
th
>
<
th
>
20190911
th
>
<
th
>
20190912
th
>
tr
>
thead
>
<
tbody
>
<
tr
>
<
td
>
吃饭
td
>
<
td
>
睡觉
td
>
<
td
>
打豆豆
td
>
tr
>
tbody
>
table
>
<
p
>
fieldset标签
p
>
<
fieldset
>
<
legend
>
登录
legend
>
<
p
>
用户名：
p
>
<
p
>
密码：
p
>
fieldset
>
body
>
html
>
块级标签范围图片：
内联标签范围图片
CSS概要
CSS之样式概要和各种选择器
css(层叠样式表)
，用于对页面美化。存在方式有三种，元素内联、页面嵌入和外部引入等。
语法：
style = ‘key1:value1;key2:value2;’
引用方法：
- 在标签中使用style = ‘xx:xxx’
- 在页面中嵌入 块
-
引入外部css文件
选择器种类： - class选择器
- id选择器
- 关联选择器
- 组合选择器
- 属性选择器
- backgrou
<
html
>
<
head
>
<
meta
http-equiv
=
"
content-type
"
content
=
"
text/html;charset=utf-8
"
>
<
meta
http-equiv
=
"
X-UA-Compatible
"
content
=
"
IE=Edge
"
>
<
title
>
css demo 1
title
>
<
style
>
.logo
{
background-color
:
purple
;
}
.logo a
{
background-color
:
purple
;
}
#logoB
{
background-color
:
purple
;
}
div,a
{
color
:
blue
;
}
a div
{
color
:
green
;
}
input[type='text']
{
color
:
yellow
;
}
style
>
head
>
<
body
>
<
div
class
=
'
logo
'
>
花儿为什么这样红
div
>
<
br
/>
<
div
style
='
background-color
:
red
;
'
>
花儿为什么这样红2
div
>
body
>
html
>
CSS之样式背景图片
<
html
>
<
head
>
<
meta
http-equiv
=
"
content-type
"
content
=
"
text/html;charset=utf-8
"
>
<
meta
http-equiv
=
"
X-UA-Compatible
"
content
=
"
IE=Edge
"
>
<
title
>
css demo 2
title
>
<
style
>
.logo
{
background-color
:
purple
;
}
style
>
head
>
<
body
>
<
div
style
='
height
:
1000px
;
background
:
url("location.png")
no-repeat -500px -250px
;
'
>
<
div
>
body
>
html
>
CSS之样式边距和内外边距
<
html
>
<
head
>
<
meta
http-equiv
=
"
content-type
"
content
=
"
text/html;charset=utf-8
"
>
<
meta
http-equiv
=
"
X-UA-Compatible
"
content
=
"
IE=Edge
"
>
<
title
>
css demo 3
title
>
<
style
>
style
>
head
>
<
body
>
<
p
>
使用"border:xxx xxx xxx"定义边框的宽度、类型、颜色等属性
p
>
<
div
style
='
border
:
1px solid red
;
border-bottom-style
:
dotted
;
border-top-style
:
dashed
;
'
>
边框演示
div
>
<
p
>
使用"margin-xxx"设置子标签与外标签的上下左右外边距
p
>
<
p
>
使用"padding-xxx"设置子标签与外标签的上下左右内边距
p
>
<
div
style
='
height
:
70px
;
border
:
1px solid red
;
'
>
<
div
style
='
background-color
:
green
;
height
:
20px
;
margin-top
:
20px
;
padding-bottom
:
20px
;
'
>
div
>
div
>
<
p
>
p
>
body
>
html
>
CSS之样式positio
<
html
>
<
head
>
<
meta
http-equiv
=
"
content-type
"
content
=
"
text/html;charset=utf-8
"
>
<
meta
http-equiv
=
"
X-UA-Compatible
"
content
=
"
IE=Edge
"
>
<
title
>
css demo 4
title
>
<
style
>
.demo1
{
background-color
:
red
;
height
:
50px
;
}
.hide
{
display
:
none
;
}
.clearfix:after
{
content
:
"."
;
display
:
block
;
height
:
0
;
clear
:
both
;
visibility
:
hidden
;
}
style
>
head
>
<
body
>
<
div
class
=
'
demo1
'
>
div
>
<
p
>
使用"display:none"隐藏当前标签
p
>
<
div
class
=
'
demo1
'
style
='
display
:
none
;
'
>
div
>
<
br
/>
<
div
class
=
'
demo1
'
>
div是块级标签
div
>
<
div
class
=
'
demo1
'
style
='
display
:
inline
;
'
>
使用"display:inline;"将div变成内联标签
div
>
<
br
/>
<
a
class
=
demo1
>
a是内联标签
a
>
<
a
class
=
demo1
style
='
display
:
block
;
'
>
使用"display:block;"将a变成块级标签
a
>
<
p
>
使用cursor实现鼠标放置在不同元素上显示形状不同
p
>
<
div
style
='
cursor
:
pointer
;
'
>
鼠标在此处变成手形状
div
>
<
div
style
='
cursor
:
help
;
'
>
鼠标在此处变成问号形状
div
>
<
div
style
='
cursor
:
wait
;
'
>
鼠标在此处变成等待形状
div
>
<
div
style
='
cursor
:
move
;
'
>
鼠标在此处变成移动形状
div
>
<
div
style
='
cursor
:
url(favicon.ico)
,auto
;
'
>
鼠标在此处变成自定制形状
div
>
<
p
>
使用"float:xxx;"令元素往左右堆叠（长度自适应）
p
>
<
div
class
=
demo1
style
='
float
:
left
;
'
>
使用"float:left;"令块级元素div1往左移
div
>
<
div
class
=
demo1
style
='
background-color
:
#999
;
float
:
left
;
width
:
50%
'
>
使用"float:left;"令块级元素div2同样往左移，同时宽度为总宽度50%
div
>
<
div
class
=
demo1
style
='
clear
:
both
;
background-color
:
green
;
'
>
使用"clear:both;"本行块级元素div换行，不再受上行float的影响
div
>
<
p
>
块级元素div3,4受父块级元素影响，颜色为红色。使用"float:left;"时，颜色会消失！
p
>
<
p
>
只要子元素中有使用float，父级元素的style在子元素上面失效。
p
>
<
div
class
=
demo1
>
<
div
style
='
float
:
left
;
'
>
块级元素div3受父块级元素影响，颜色为红色
div
>
<
div
style
='
float
:
left
;
'
>
块级元素div4受父块级元素影响，颜色为红色
div
>
<
div
style
='
clear
:
both
'
>
使用"clear:both;令子元素重新用于父元素的背景色
div
>
div
>
<
a
href
=
'
http://www.cnblogs.com/canuseethat/archive/2010/09/16/1827804.html
'
>
position参考资料
a
>
<
p
>
fixed固定的
p
>
<
div
style
='
position
:
fixed
;
height
:
45px
;
background-color
:
#333
;
width
:
80%
;
top
:
0px
'
>
使用了"position:fixed;"之后，块级元素的宽度不再是默认的100%，必须指定，否则块级元素将不显示。使用"top:0px"将块级元素固定在页面顶端，此时块级元素不随下滑轮滑动而移动。
div
>
<
div
style
='
margin-top
:
47px
;
'
>
<
div
style
='
width
:
200px
;
background-color
:
#888
;
position
:
fixed
;
top
:
50px
;
button
:
0px
;
height
:
1000px
'
>
左侧边框
div
>
<
div
style
='
background-color
:
#777
;
'
>
右侧视图
div
>
div
>
<
p
>
position:relative与position:absolute一般同时使用，relative的使用会影响absolute的范围大小
p
>
<
p
>
position:fixed与position:absolute一般可以相互替换
p
>
<
div
style
='
width
:
200px
;
position
:
fixed
'
>
body
>
html
>
CSS之模态对话框
<
html
>
<
head
>
<
meta
http-equiv
=
"
content-type
"
content
=
"
text/html;charset=utf-8
"
>
<
meta
http-equiv
=
"
X-UA-Compatible
"
content
=
"
IE=Edge
"
>
<
title
>
css demo 5
title
>
<
style
>
.demo1
{
background-color
:
red
;
height
:
50px
;
}
.shade
{
position
:
fixed
;
top
:
0
;
right
:
0
;
bottom
:
0
;
left
:
0
;
background-color
:
#666
;
opacity
:
0.5
;
}
.hide
{
display
:
none
;
}
.clearfix:after
{
content
:
"."
;
display
:
block
;
height
:
0
;
clear
:
both
;
visibility
:
hidden
;
}
style
>
head
>
<
body
>
<
img
style
='
height
:
200px
;
'
src
=
'
001.jpg
'
>
img
>
<
p
>
使用"opacity:0.x;"改变图片透明度
p
>
<
img
style
='
height
:
200px
;
opacity
:
0.5
;
'
src
=
'
001.jpg
'
>
img
>
<
div
style
='
position
:
fixed
;
top
:
0
;
right
:
0
;
bottom
:
0
;
left
:
0
;
background-color
:
#666
;
opacity
:
0.5
;
'
>
div
>
<
div
style
='
position
:
fixed
;
top
:
50%
;
left
:
50%
;
width
:
400px
;
height
:
300px
;
background-color
:
white
;
margin-left
:
-200px
;
margin-top
:
-150px
;
'
>
<
div
>
我强任我强
div
>
<
div
>
任你服不服
div
>
<
div
>
使用"z-index:xx"可以设置哪层在哪层的上面，数字大的在上面。
div
>
<
div
>
<
input
type
=
'
button
'
value
=
'
服了
'
>
input
>
div
>
div
>
body
>
html
>
