进击的Python【第十三章】：Web前端基础之HTML与CSS样式

进击的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\r\n\r\n")
    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="password">标签

<input type="button"> & <input type="submit">标签

<input type="file">标签

提交文件时： enctype='multipart/form-data' method='POST'

<textarea>标签

<label>标签

姓名：婚否：
姓名：婚否：

<ul>< ol> <dl>标签

ul.li
ul.li
ul.li

ol.li
ol.li
ol.li

河北省: 邯郸; 石家庄
山西省: 太原; 平遥

<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']{ width:100px; height:200px; }

background

background-color

background-image

background-repeat（no-repeat;repeat-x;repeat-y）

background-position

border

margin

padding

display

display:none

original

display:block

content content

display:inline

content

cursor

css提供的cursor值

pointer || help || wait || move || crosshair

伪造超链接

pointer

自定义(一般不用)

mine

浮动

left

right

left

right

posted @ 2017-09-02 15:05 Ethan_Cheng 阅读(547) 评论(0) 编辑收藏举报

刷新页面返回顶部

xiaoqiang1_1

进击的Python【第十三章】：Web前端基础之HTML与CSS样式

进击的Python【第十四章】：Web前端基础之HTML与CSS样式

一、web框架的本质

二、HTML标签

<!DOCTYPE>定义和用法

<html>标签

<head>标签

<meta>标签

<Title>标签

<Link>标签

<Style>标签

<Script>标签

三、常用标签

<p> 和 <br>

<a>标签

<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">标签

<textarea>标签

<label>标签

<ul>< ol> <dl>标签

<table>标签

<fieldset>标签

<form> 表单

四、CSS样式

标签选择器

class选择器

id选择器

关联选择器

组合选择器

属性选择器

background

border

margin

padding

display

cursor

浮动

公告

<html>标签　　