进击的Python【第十四章】：Web前端基础之HTML与CSS样式
一、web框架的本质
众所周知，对于所有的Web应用，本质上其实就是一个socket服务端，用户的浏览器其实就是一个socket客户端。
#!/usr/bin/env python
#coding:utf-8
import socket
def handle_request(client):
buf = client.recv(1024)
client.send("HTTP/1.1 200 OK
")
client.send("Hello, World")
def main():
sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
sock.bind(('localhost',8000))
sock.listen(5)
while True:
connection, address = sock.accept()
handle_request(connection)
connection.close()
if __name__ == '__main__':
main()
从上面的socket代码实现了其本质，我们可以看到，服务端给客户端发送了一个"Hello, World"，我们运行后浏览器就出现了相同字样，那我们把代码改下
client.send("<h1 style='background-color:red;'>Hello, World<h1>")
再次用浏览器浏览我们发现，字体的样式改变了。由此我们得出两个结论：
1、服务端返回的永远是字符串
2、浏览器又恰好认识这段字符串的HTML规则，就会转换成对应的样式
下面我们要做的就是来学习这套规则
二、HTML标签
当我们在pycharm新建一个HTML文件如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>
<!DOCTYPE>定义和用法
第一行<!DOCTYPE html>这是干嘛的呢
Doctype告诉浏览器使用什么样的html或xhtml规范来解析html文档
<!DOCTYPE> 声明必须是 HTML 文档的第一行，位于 <html> 标签之前。
<!DOCTYPE> 声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。
<html>标签
此元素可告知浏览器其自身是一个 HTML 文档。这个标签一个页面只能有一个。
里面的lang="en"叫标签内部属性，这里代表此页面为英文
<head>标签
<head> 标签用于定义文档的头部，它是所有头部元素的容器。<head> 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。
文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。
下面这些标签可用在 head 部分：<base>, <link>, <meta>, <script>, <style>, 以及 <title>。
<title> 定义文档的标题，它是 head 部分中唯一必需的元素。
注意：
1、应该把 <head> 标签放在文档的开始处，紧跟在 <html> 后面，并处于 <body> 标签或 <frameset> 标签之前。
2、请记住始终为文档规定标题！
<meta>标签
1、提供有关页面的元信息，例：页面编码、刷新、跳转、针对搜索引擎和更新频度的描述和关键词
2、页面编码（告诉浏览器是什么编码）
< meta http-equiv=“content-type” content=“text/html;charset=utf-8”>
3、刷新和跳转
< meta http-equiv=“Refresh” Content=“30″>
< meta http-equiv=”Refresh“ Content=”5; Url=http://www.autohome.com.cn“ />
4、关键词
< meta name="keywords" content="星际2,星际老男孩,专访,F91,小色,JOY" >
5、描述
< meta name="description" content="这是我的python博客">
<Title>标签
网页头部信息
<Link>标签
css
< link rel="stylesheet" type="text/css" href="css/common.css" >
icon
< link rel="shortcut icon" href="image/favicon.ico">
<Style>标签
在页面中写样式
例如：< style type="text/css" >
.bb{
background-color: red;
}
< /style>
<Script>标签
引进文件
< script type="text/javascript" src="http://www.googletagservices.com/tag/js/gpt.js"> </script >
写js代码
< script type="text/javascript" > ... </script >
三、常用标签
一、标签一般分为两种：块级标签 和 行内标签
- a、span、select 等
- div、h1、p 等
二、行内元素与块级函数的三个区别
1.行内元素与块级元素直观上的区别
行内元素会在一条直线上排列，都是同一行的，水平方向排列
块级元素各占据一行，垂直方向排列。块级元素从新行开始结束接着一个断行。
2.块级元素可以包含行内元素和块级元素。行内元素不能包含块级元素。
3.行内元素与块级元素属性的不同，主要是盒模型属性上
行内元素设置width无效，height无效(可以设置line-height)，margin上下无效，padding上下无效
三、行内元素转换为块级元素
display:block (字面意思表现形式设为块级)
<p> 和 <br>
p表示段落，默认段落之间是有间隔的！
br 是换行
<a>标签
< a href="http://www.autohome.com.cn"> </a>
1、target属性，_black表示在新的页面打开
2、锚
<H> 标签
H1
H2
H3
H4
H5
H6
<select> 标签
<input type="Checkbox">标签
<input type="redio">标签
男 女 保密男 女 保密
<input type="password">标签
<input type="button"> & <input type="submit">标签
<input type="file">标签
提交文件时： enctype='multipart/form-data' method='POST'
<textarea>标签
<label>标签
姓名： 婚否：<ul>< ol> <dl>标签
ul
- ul.li
- ul.li
- ul.li
ol
- ol.li
- ol.li
- ol.li
dl
- 河北省
- 邯郸
- 石家庄
- 山西省
- 太原
- 平遥
<table>标签
| 1 | 2 | 3 |
| 1 | 2 | 3 |
| 1 | 2 | 3 |
| 1 | ||
|---|---|---|
| 1 | 2 | 3 |
| 1 | 2 | 3 |
| 1 | 2 | 3 |
| 1 | 2 | 3 |
| 1 | 3 | 3 |
| 3 | 3 | |
| 3 | 3 | |
| 3 | 3 | 3 |
<fieldset>标签
<form> 表单
文件:enctype='multipart/form-data' method='POST'
四、CSS样式
css是英文Cascading Style Sheets的缩写,称为层叠样式表，用于对页面进行美化。
存在方式有三种：元素内联、页面嵌入和外部引入，比较三种方式的优缺点。
语法：style = 'key1:value1;key2:value2;'
- 在标签中使用 style='xx:xxx;'
- 在页面中嵌入 < style type="text/css"> </style > 块
- 引入外部css文件
必要性：美工会对页面的色彩搭配和图片的美化负责，开发人员则必须知道是如何实现的。
标签选择器
div{ }
<div > </div>
class选择器
.bd{ }
<div class='bd'> </div>
id选择器
#idselect{ background-color:red; }
<div id='idselect' > </div>
关联选择器
#idselect p{ }
<div id='idselect' > <p> </p> </div>
组合选择器
input,div,p{ }
属性选择器
input[type='text']{ 100px; height:200px; }
background
- background-color
- background-image
- background-repeat（no-repeat;repeat-x;repeat-y）
- background-position
border
margin
padding
display
display:none
display:block
content contentdisplay:inline
cursor
css提供的cursor值
pointer || help || wait || move || crosshair
伪造超链接
pointer
自定义(一般不用)
mine
浮动