进击的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. linux文件描述符fd(windows下的句柄)

    在Linux系统中一切皆可以看成是文件,文件又可分为:普通文件.目录文件.链接文件和设备文件 fd:file descriptor 文件描述符0,1,2分别给了标准输入.标准输出和错误输出. ls - ...

  2. 为RAC私有网络配置网卡Bonding

    在RAC的安装部署过程中.并不不过简单的安装完毕了事.整个安装过程要考虑可能出现的单点问题,当中比較重要的是私有网络. 私有网络是RAC节点间通信的通道.包含节点间的网络心跳信息.Cache fusi ...

  3. oracle统计信息

    手工刷ORACLE统计信息  select count(1) from LOG_TRX_DETAIL;  select * from user_tab_statistics where table_n ...

  4. libevent多线程使用事项

    转 http://www.cnblogs.com/Seapeak/archive/2010/04/08/1707807.html 在linux平台上使用c开发网络程序的同志们一般情况下都对鼎鼎大名的l ...

  5. 算法导论—无向图的遍历(BFS+DFS，MATLAB)

    华电北风吹 天津大学认知计算与应用重点实验室 最后改动日期:2015/8/22 无向图的存储方式有邻接矩阵,邻接链表,稀疏矩阵等. 无向图主要包括双方面内容,图的遍历和寻找联通分量. 一.无向图的遍历 ...

  6. dm385的分辨率切换

    建议用两个RSZ的输出来完成切换分辨率功能,帧率可以通过软件丢帧来实现. 两个SWMS增加了两个1080p60的读和写,对系统影响是比较大的. http://www.deyisupport.com/q ...

  7. HDFS集中式缓存管理（Centralized Cache Management）

    Hadoop从2.3.0版本号開始支持HDFS缓存机制,HDFS同意用户将一部分文件夹或文件缓存在HDFS其中.NameNode会通知拥有相应块的DataNodes将其缓存在DataNode的内存其中 ...

  8. busybox相关的工具

    1 mdev busybox里面的类似于udev的工具,学名micro udev. mdev -s扫描/sys目录,如果是设备的话,就会为之在/dev目录下创建设备结点. 2 busybox执行不同的 ...

  9. sqlserver主机名变更后的错误与处理办法

    sqlserver 服务器更改主机名后,须要做一些操作.不然维护计划 以及订阅公布都会有问题,详细过程例如以下:能够參考 有时改动计算机名后,运行select @@servername仍返回原来的计算 ...

  10. android锁屏软件制作

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/mingyue_1128/article/details/33726515 转载请标明出处http:/ ...