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

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

  1. web前端（7）—— 了解CSS样式，引入css样式的方式

    CSS 在前面大概的介绍了css,从本片博文开始,会详细的介绍它,在最开始介绍web前端时,打开百度首页,当时我提出了一个问题,为什么百度首页的输入框可以放在正中间,就是由于有css的控制,我们可以打 ...

  2. 进击的Python【第十六章】：Web前端基础之jQuery

    进击的Python[第十六章]:Web前端基础之jQuery 一.什么是 jQuery ? jQuery是一个JavaScript函数库. jQuery是一个轻量级的"写的少,做的多&quo ...

  3. 进击的Python【第十五章】：Web前端基础之DOM

    进击的Python[第十五章]:Web前端基础之DOM 简介:文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口.它给文档提供了一种结构化的表示 ...

  4. 进击的Python【第十四章】：Web前端基础之Javascript

    进击的Python[第十四章]:Web前端基础之Javascript 一.javascript是什么 JavaScript 是一种轻量级的编程语言. JavaScript 是可插入 HTML 页面的编 ...

  5. 第十四章 web前端开发小白学爬虫

    老猿从事IT开发快三十年了,接触互联网也很久了,但自己没有做过web前端开发,只知道与前端开发相关的一些基本概念,如B/S架构.html标签.js脚本.css样式.xml解析.cookies.http ...

  6. web前端基础知识及快速入门指南

    web前端基础知识及快速入门指南 做前端开发有几个月了,虽然说是几个月,但是中间断断续续的上课.考试以及其它杂七杂八的事情,到现在居然一直感觉自己虽然很多前端的知识很眼熟,却也感觉自己貌似也知识在门口 ...

  7. 好程序员web前端分享值得参考的css理论：OOCSS、SMACSS与BEM

    好程序员web前端分享值得参考的css理论:OOCSS.SMACSS与BEM 最近在The Sass Way里看到了Modular CSS typography一文,发现文章在开头部分就提到了OOCS ...

  8. 好程序员web前端分享18个用CSS制作出来的东西

    好程序员web前端分享18个用CSS制作出来的东西,与流行的看法相反,CSS不仅仅是用来提供一个WEB页面的基本风格,以使它看起来更有吸引力.还有很多其他的事情,CSS也可以做的很好.由于它创建动画和 ...

  9. 第十四章：Python の Web开发基础(一) HTML与CSS

    本課主題 HTML 介绍 CSS 介绍 HTML 介绍 HTML 的头部份,重点: 定义HTML 的编码:<meta charset="UTF-8"/> 定义标题: & ...

随机推荐

  1. MySql基本数据类型（转）

    说明:通俗的理解:1字节的8位,即1byte=8bit,而这个1byte叫做长度范围,范围的算法是使用bit去求,比如8bit的长度范围是2的8次方,但是在数据库中的类型上是有区分有符号和无符号的,默 ...

  2. POJ 1436 Horizontally Visible Segments（线段树）

    POJ 1436 Horizontally Visible Segments 题目链接 线段树处理染色问题,把线段排序.从左往右扫描处理出每一个线段能看到的右边的线段,然后利用bitset维护枚举两个 ...

  3. [经典面试题]在O(1)时间删除链表结点

    [题目] 给定链表的头指针和一个结点指针.在O(1)时间删除该结点.链表结点的定义例如以下: struct ListNode { int        value; struct ListNode*  ...

  4. python 【第二篇】python基本数据类型

    python数据类型 python的数据类型和大多数编程语言一样,有int,float,long,string但是python有三个特殊的数据类型:列表,元组,字典 如果不知道你的数据类型有什么方法: ...

  5. JNI/NDK开发指南(2)

    1.生成动态库.so,存放于手机的system/lib/中(APP怎样将.so存入该文件夹,奇怪?????),Java层调用JNI的类会运行静态代码System.loadLibrary("* ...

  6. UC技术博客开放通知

    国内知名浏览器UC开放技术博客( http://tech.uc.cn/),技术博客所涵盖技术点有: Hadoop Linux MySQL 前端与client技术 图像处理 开发语言和框架 数据存储 数 ...

  7. 设置ArcGIS的数据源

    我从别的地方拿到一份现成的地图文档(*.mxd),在该服务器上运行得好地地,图文并茂,但用我自己机器的arcMap打开就一片空白,啥都没有. 看左边的各个图层目录,图标上都有个粉红色的惊叹号,醒悟过来 ...

  8. struts2的一些小问题

    1.action和ValueStack的关系2.ValueStack的类set()方法和setValue()方法的区别3.ValueStack的类push()方法的作用4.从ValueStack对象中 ...

  9. Deep Learning 30: 卷积理解

    一.深度卷积神经网络学习笔记(一): 1. 这篇文章以贾清扬的ppt说明了卷积的实质,更说明了卷积输出图像大小应该为: 假设输入图像尺寸为W,卷积核尺寸为F,步幅(stride)为S(卷积核移动的步幅 ...

  10. 【繁琐工作自动化】pandas 处理 excel 文件

    0. 一般处理 读取 excel 格式文件:df = pd.read_excel('xx.xlsx'),下面是一些简单查看文件内容的函数: df.head():展示前五行: df.columns:展示 ...