进击的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. Eclipse运行Maven命令时出现：-Dmaven.multiModuleProjectDirectory system property is not set. Check $M2_HOME environment variable and mvn script match.问题解决

    错误: -Dmaven.multiModuleProjectDirectory system property is not set. Check $M2_HOME environment varia ...

  2. 【algorithm】尾递归

    尾递归和一般的递归不同在对内存的占用,普通递归创建stack累积而后计算收缩,尾递归只会占用恒量的内存(和迭代一样).SICP中描述了一个内存占用曲线,用以上答案中的Python代码为例(普通递归): ...

  3. 【APUE】文件I/O

    Linux的内核将所有外部设备都可以看做一个文件来操作.那么我们对与外部设备的操作都可以看做对文件进行操作.我们对一个文件的读写,都通过调用内核提供的系统调用:内核给我们返回一个file descri ...

  4. [转]LINUX新建和增加SWAP分区

    以前做过增加swap分区的事情,今天一个同事问到我如何做,故记个笔记整理一下吧.另外,以前我写过“交换分区swap的大小分配”,大家也可先看一下. 我们都知道在安装Linux系统时在分区时可以分配sw ...

  5. Office WORD如何简繁转换

    选中要转换的文字,工具-语言,中文简繁转换.

  6. Android与设计模式——代理(Proxy)模式

    在阎宏博士的<JAVA与模式>一书中开头是这样描写叙述代理(Proxy)模式的: 代理模式是对象的结构模式.代理模式给某一个对象提供一个代理对象,并由代理对象控制对原对象的引用. 代理模式 ...

  7. 用SQL脚本 生成INSERT SQL语句

    配置表B 中的数据,可以从A表中查询到,在实际配置时,通过sql脚本生成B表的insert脚本,最多用到的是sql中连接符[||],以及双引号[''''] 例1:电销系统中地区出单机构关系表配置数据生 ...

  8. 【翻译自mos文章】oracle db 中的用户账户被锁--查看oracle用户的尝试次数

    參考原文: Users Accounts Getting Locked. (Doc ID 791037.1) 事实上这个文章是为oracle 别的软件产品写的,只是涉及到user 锁定问题.那还是跟d ...

  9. ReLu（修正线性单元）、sigmoid和tahh的比较

    不多说,直接上干货! 最近,在看论文,提及到这个修正线性单元(Rectified linear unit,ReLU). Deep Sparse Rectifier Neural Networks Re ...

  10. 使用 Vagrant 构建开发环境

    使用 Vagrant 构建开发环境 摘要:本文描述了如使用 Vagrant 构建统一的开发环境. 问题 作为开发人员,我们通常面临的问题有: 开发环境需要手工安装配置,这包括操作系统(CentOS.U ...