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

时间：2021-06-02 07:53:51

进击的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="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

  1. ol.li
  2. ol.li
  3. 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']{ 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
none

display:block

content
content

display:inline

content
content

cursor

css提供的cursor值

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

伪造超链接

pointer

自定义(一般不用)

mine

浮动

left
right
left
right
 

相关文章