python span标签的text属性_Python编程(二十二)：HTML基础，CSS基础

一、引言

在开始说html前，先说下前用python写的socket server，以及apache、ajax等都是服务端。浏览器是客户端，浏览器是一次请求完成后就断开连接。

下面代码是一个简单的socket服务端代码。运行下面代码后，在浏览器地址栏中输入：localhost:8000，屏幕上就显示：Hello, Michael。此时运行这个代码文件就是启动了一个socket server服务器。浏览器就是socket 客户端。运维工作大部分时间本质上是在维护这样的服务器。

__author__ = "Michael"

import socket

def handle_request(client):

buf = client.recv(1024)

# 下面使用bytes方法转换为字节类型，就如使用str(1), list((111,))等方法一样，这样统一使用规范

client.send(bytes("HTTP/1.1 200 OK\r\n\r\n", encoding="utf-8"))

# client.send(bytes("Hello, Michael\n", encoding="utf-8"))

client.send(bytes("

Hello, Michael\n

", encoding="utf-8")) # 此时在浏览器上输出的底色是红色

client.send(bytes("Hello World!", encoding="utf-8"))

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) # 执行handle_request函数

connection.close()

if __name__ == '__main__':

main()

从这个例子可知道两点：

1、服务端返回的永远是字符串

2、浏览器认识这种格式的字符串，浏览器就显示出来

本质：要让浏览器解析指定的规则，显示出来

二、HTML：超文本标记语言

html，css是写静态网页的基础。

1、一套规则，浏览器认识的规则，这是本质。

2、对开发者来说有两点：学习规则和开发后台程序。开发后台程序主要是：写Html文件(充当模板的作用)；数据库获取数据，然后替换到html文件的指定位置(Web框架)

3、本地测试：有两种方法如下

第一种方法：找到文件路径，直接浏览器方式打开html文件。

第二种方法：也可以直接借助pycharm打开测试，pycharm会自动启动一个socket服务端。

需要注意的是：pycharm打开html文件，可能有的效果出不来，可用浏览器方式直接打开。

4、编写html文件

在开始写html代码前，先创建一个后缀名是 .html 的文件。创建文件后会自动添加一些规则。如下面的代码所示：

Title

第一行：，是一个规则，这个规则还有很多种，当使用不同的规则，可能使用浏览器打开后的效果会不一样。

接下来是：，这是一个固定的格式，可以把html看做一个人，内部还可以有：

,头部，身体之类的，必须要这么写，浏览器才认识。

html标签，标签内部可以写属性，只能有一个html。

注释方式：

5、标签分类

按闭合分：分为自闭合标签和主动闭合标签。

自闭合标签主要有：meta标签和link标签

主动闭合标签：比如：html标签，head标签，body标签，title标签等。

另外，标签还分块级标签和行内标签。

块级标签主要有：div标签(白板，自动换行)，H系列标签(加大加粗,h1最大)，p系列标签(段落与段落之间有间距)。

行内标签(内联标签)：span(白板，本身什么都不做，不会自动换行)。

标签之间可以嵌套。

标签存在的意义：定位操作，css操作，js操作才方便。

ps:chrome审查元素的使用，在网页上点击选择，再点击下面出现的图标，此时将鼠标移动到网页上，鼠标移动到某个对象上，下面就出现该对象对应的源代码。双击页面上的对象，定位到下面的源代码， 并且在右下角会出现该对象的样式，该样式可以复制到自己的代码中使用。

三、HTML的head标签：

头部标签，包含在html标签内部。需要知道怎么使用。

1、head标签中的meta标签

meta标签(元标签)主要作用：设置编码，跳转，刷新，关键字搜索，网站描述(简要信息)，IE兼容等。

设置编码：

设置刷新： 表示3秒刷新一次网页

设置跳转： 表示3秒跳转到url指定的网站。这种跳转不常用，没有显示跳转倒计时或者进度条，js可以实现这功能。但是上面这个跳转功能要记得，因为在头部加上这么一句即时跳转，在某些情况下避免出错。

设置关键字搜索： 根据关键字检索该网站，比如百度搜索。

设置网站描述： 描述网站的简要信息

设置IE兼容： 表示用IE7打开，同时IE低版本的也可以打开。

还可以这样：

2、head标签中的title标签

title标签用于设置网页标题，是在打开某个网站时，在浏览器地址栏上面的标题。

例如：

百度首页，设置标题

3、head标签中的style标签

style标签，用于网页渲染、样式设置等，还可以设置选择器。具体内容在css中学习。

4、head标签中script标签，在js中学习

四、HTML的body标签

body标签，标签不区分大小写，重要的标签，需要记住。

1、a标签，行内标签

a标签专门用于做跳转用的，当然该标签也可以放在head标签内。例如下面一行代码所示：

href属性：该属性的值是指向要跳转的网站，当点击后面的“成都”两个字时就跳转到href指向的网站。这里“成都”两个字之间的“ ”符号表示空格，需要多少个空格就写多少个这样的代码。

a标签的两个重要用途：跳转 和 锚。

锚，跳转到指定位置， href="#某个标签的ID"，标签的ID不能重复。

a标签还有一个target属性，该属性的值有多个。其中target="_blank"表示在新的页面打开跳转网站，后面是描述内容。例如下面代码所示：

百度

点击百度两个字后在新的页面跳转到href属性值指向的网站。

a标签锚点举例：在a标签中href="#i1"与div标签中id="i1"是一一对应关系，style="height: 600px;"是设置占用的像素。代码示例如下：

第一章

第二章

第三章

第四章

第一章内容

第二章内容

第三章内容

第四章内容

2、p标签：专门用于做段落的标签。每个p标签在页面上独占一行。

3、br标签：换行标签。将该标签放在哪里就在那里换行。行内标签。

p标签和br标签代码示例如下，下面代码中，每个p标签的内容要在页面上独占一行。在第一个p标签中插入了
标签，可在指定位置设置换行。

abcdefghijklmn
opqrstuvwxyz

你好，世界

你好，中国

你好，成都

4、h标签：设置字体加大加粗，h1最字体最大，字体最小不是只到h7。如下面代码所示。

Michael

Michael

Michael

Michael

Michael

Michael

Michael

>

5、span标签

span标签：行内标签，该标签定义一个白板，本身什么都不做，但可以做很多用途。该标签不会自动换行。span标签内还可以套span标签，以及其它各种各样的标签。如下面代码所示，在同一行显示4个hello world.

hello world

hello world

hello world

hello world

6、div标签

div标签：块级标签，也是白板标签，每个div标签独占一行。在标签内部可以嵌套其它各种各样的标签。如下面代码所示。每个div标签单独占一行。

1

2

3

div标签的另一个用途，如下面的代码所示，在下面的代码台，div标签内嵌套了div标签。第一个div标签的内容是hello，第二个标签内容是michael。在第二个div内定义了id属性(值可以随意，但多个id号不能重复)，和style属性，style属性的值指定了第二个div后面的内容放置位置在页面的右下角。运行代码后在页面左上角显示hello，在页面右下角显示michael。

hello

michael

7、form标签

form标签：用于提交表单。主要属性有：action(跳转), method(提交方式), enctype(上传文件)

action="https://www.baidu.com" method="GET"。表单提交后以GET方式发送。如下面代码所示：

在上面的代码中，当method="get"时，提交方式：

当第二个input代码没有时，get提交的形式是：https://www.baidu.com?q=用户输入的值。

有时，get提交的形式是：https://www.baidu.com?q=用户输入的值&b=用户输入的值。

method="post"时，提交到后台方式：

有请求头，之后加两个换行。

以及请求内容。

enctype="multipart/form-data",在form标签加这个属性，主要用于上传文件。

8、input标签

最常使用的标签，行内标签，自闭合标签。后台可以根据该标签的name属性值获取到用户的输入内容。主要的属性有下面这些：

input type="text" name="query" value="成都"，type="text"设置用户输入的文本框，name属性(属性值可以随意取，后台根据name的属性值获取到用户的输入内容)。value='成都',value后面是默认值，如果用户未输入内容，就取这个默认值，默认在文本框内显示value属性的值。。

input type='password' ，设置输入密码，有name属性，value='abc123',value后面是默认值

input type='submit'，设置提交按钮，value='提交', 常用于表单标签中。

input type='button' 设置按钮，value='登录', 目前在这里起不了什么作用

后台根据name属性的值获取到用户输入的内容，比如name='user',当输入用户名为michael时，后台会获取到一个字典{'user': 'michael',}

input type='radio'，设置单选框(只能勾选一个)：value, checked="checked"设置默认值 ,name属性(name相同则互斥)。

input type='checkbox'，复选框(可勾选多个)，value, checked="checked"设置默认值 ,name属性(批量获取数据)。

input type='file'，上传文件，依赖form表单的一个属性 enctype="multipart/form-data",表示将文件一点一点的上传上去

input type='reset' ，重置按钮，通常在提交按钮旁边

input标签示例1，也是form标签示例：示例代码如下面所示，运行该代码后，在页面左上角出现文本框，默认内容是"成都"。当点击搜索后，就跳转到form标签的action属性指定的页面，并在该页面的地址栏后面附加“?query=成都”，此时完整的地址是：https://www.sogou.com/web?query=成都

input标签示例2：简单的登录页面设置，后台运行一个web框架，获取用户在页面输入的内容。相关的html代码和web框架代码如下的代码所示。在html代码中form标签中的method属性值是“get”也可以改为post。该method的值不一样，对应web框架中调用的方法也不一样。这里method="get"。

先运行web框架，后运行html程序。在页面上输入用户名，邮箱，密码后点击登录，后台会根据input标签中的name属性值获取用户的输入内容。后台根据输入内容判断用户输入的用户名和密码是否正确，正确则执行判断正确后面的代码。错误则执行判断错误后面的代码。

html代码片下所示：

Title

web框架代码如下所示：

__author__ = "Michael"

import tornado.ioloop

import tornado.web

# pip3 install tornado

class MainHandler(tornado.web.RequestHandler):

def get(self):

print(111)

u = self.get_argument('user')

e = self.get_argument('email')

p = self.get_argument('pwd')

if u == 'michael' and p == 'abc123' and e == 'michael@163.com':

self.write("登录成功！\n欢迎回来%s" % u)

else:

self.write("用户或者密码错误")

def post(self, *args, **kwargs):

u = self.get_argument('user', None)

e = self.get_argument('email', None)

p = self.get_argument('pwd', None)

print(u, e, p)

self.write('POST')

application = tornado.web.Application([

(r"/index", MainHandler),

])

if __name__ == "__main__":

application.listen(8888)

tornado.ioloop.IOLoop.instance().start()

input标签示例3：html代码片断如下面所示。在下面代码中，input标签被包含在div标签内，div标签的上层还有form标签，form标签用于做表单，点提交后，表单的内容就全部提交。并且使用了p标签进行分段。

在input标签的type='radio'属性，是设置单选，另外一个属性checked="checked"表示默认勾选这个选项。value的值可以任意写。后台接收到的名称和值对应的属性就是name和value属性。

在input标签的type="checkbox"属性，表示可以多选，后面的checked="checked"属性表示 默认选择该选项。

在input标签的type="file"是上传文件，该属性需要和form标签的enctype="multipart/form-data"属性一起使用，表示将文件一点一点的上传。

请选择性别

男：

女：

中性：

爱好

篮球：

足球：

台球：

网球：

技能

驾驶：

IT：

上传文件

9、textarea标签

textarea标签，可实现多行输入，后台通过name属性值获取输入内容，默认值放在中间

默认值 - 有name属性，默认值在中间

示例代码如下，运行代码后，在页面出现一个文本框，默认显示michael几个字。在文本框的右边有提交和重置两个按钮。

michael

10、select标签

select标签，可实现下拉框选择，该标签内部还有option标签。后台通过select标签的name属性值获取option标签的value属性值。

有name属性，内部有option标签内部有value属性，提交到后台的是value属性的值，size(设置在下拉框中要显示多少个选项)，mutiple(设置可以一次选择多个选项)。

multiple属性设置可以多选

size属性设置在下拉框可同时选择多少个值

selected="selected" 属性是设置默认值，直接写selected也可以

select标签示例代码如下所示：

北京

成都

重庆

此外，select标签内部的optgroup标签可实现分组，分组的label属性值不能选择。如下面代码所示，label的属性值可以显示，但不能选择。

成都

绵阳

内江

深圳

广州

东莞

11、img标签

img标签，自闭合标签，在页面上放置图片

用a标签包裹时，可以在点击图片的时候进行跳转

img标签的style属性设置图片大小

img标签的alt属性，在图片不能正常显示时就显示alt属性的值

img标签的title属性，将鼠标移动到图片上就显示title属性的值

代码示例如下所示：

12、列表标签

列表标签：有ul标签，ol标签，dl标签

ul标签，标签内部有li标签，在页面上以列表显示，如下面代码所示：

• abc
• 123
• ert

ol标签，标签内部有li标签，在页面显示时每个标签的左边有编号，编号从1开始，如下面代码所示：

1. abc
2. 123
3. ert

dl标签，标签内部有dt标签和dd标签，设置分级显示，在页面上显示时，dt标签的内容在外层，dd标签的内容在内层。如下面代码所示：

aaa

bbb

ccc

ddd

aaa

bbb

ccc

ddd

13、表格标签，table标签

table标签，用于在页面是设置表格，标签内部有tr标签，tr标签内部还有td标签

在talbe标签的border属性设置表格线条，默认无线条。代码示例如下：

第一行，第1列	第一行，第2列	第一行，第3列
第二行，第1列	第二行，第2列	第二行，第3列

上面的代码设置的表格，第一行不是真正的表头。

表格标签进阶：

table是表格标签

table标签内部的thead标签是表头标签，声明是表格的表头。thead标签内部有tr标签，td标签。

table标签内部的tbody标签是表实体标签，声明的是表格的实体。tbody标签内部有tr标签，td标签

td标签的 rowspan="2"属性参数表示横向合并2个单元格，colspan="2"属性参数表示纵向合并2个单元格，在合并单元格时，对应的行或列要相应的减少。代码示例如下：

表头1表头2表头3表头4

11111111111111

14、label标签

该标签通常与input标签结合一起使用,运行后在页面上会在"用户名："后面出现文本输入框。

要在文本框内输入内容需要点击文本框才行。在label标签内使用for属性的值与input标签内id属性的值相同时，点击“用户名：”几个字时同样可以在文本框内输入内容。就是用于点击文字，使得关联的标签获取光标。如下面代码所示。

用户名：

15、fieldset标签

fieldset标签：用于包裹某个对象，该标签内的lenend标签用于给包裹框设置一个名称。下面代码演示了用于包裹用户名和密码。

登录

用户名：

密码：

16、在浏览器的源代码检查中获取某个值的方法

现假设有如下html片段：

addiijlfewfj

michael

该片段运行后，在浏览器窗口点击右键选择检查，进入Console，执行下面代码：

document.getElementById("i1").innerText # 查找到id为i1的标签值

"michael"

document.getElementById("i1").innerText = "James" # 把id为i1的标签值替换为James

"James"

五、css基础

CSS:是在html标签内部设置各种属性，使网页能以不同的效果呈现出来，也就是装饰页面用的。

div标签内的style属性就是css,例如下面的代码在第一个div上设置了背景色和高度，这样的设置如果需要重用的话，就得重复写，此时可使用另外一种方式实现。那就是选择器。

注意：高度和宽度的值是像素，也可以设置成百分比。

1

2

3

1、id选择器

需要注意的是选择器要定义在head标签中。

在style中以#开头，在其它标签中要取用就用id取用，但id号不用重用，这样的方式不常用。例如下面代码所示#i1 表示要在其它标签中取用，就设置id="i1"即可：

#i1{

background-color: #337ab7;

height: 30px;

}

2、class选择器

class选择器，定义在head标签中的style标签内，以(.)点开头，在获取的时候，要用标签的class属性来获取。此种方式常用。例如下面代码所示，

.c1{

background-color: rebeccapurple;

height: 20px;

}

获取方式：，此时可以重复选择

3、标签选择器

标签选择器，在head标签中的style标签中定义标签选择器，切记是在head标签下的style标签内定义。例如下面示例，在head标签下的style标签内定义了div标签，此时在body标签内的所有div标签都会采用这种样式。该方式不是很常用。例如下面代码所示。

div{

background-color: yellow;

color: crimson;

}

在body标签中，只要定义了div标签，就使用这个样式。

4、层级选择器

层级选择器，在head内的style下定义样式时，可使用层级关系，标签之间用空格关联，例如下面代码所示。此时表示span标签内的div标签全部按照这种样式进行设置。当然层级关系还有很多种，例如：

.c1 div表示标签内的class="c1"时该标签下的div标签采用这种样式。层级关系还可以这样：

.c1 div span a p这样写，但尽量不要写太深了。

span div{

background-color: yellow;

color: crimson;

}

5、组合选择器

组合选择器，标签之间使用逗号(,)分隔，例如下面代码所示，此时在body标签的其它标签中，可使用id="i1",id="i2",id="i3"获取到样式，(#i1,#i2,#i3)也可以写为(.i1,.i2,.i3),此时用class属性来获取，例如class="i2"。当然还可以写成其它需要的标签。

#i1,#i2,#i3{

background-color: #337ab7;

height: 30px;

}

6.属性选择器

属性选择器，例如下面的代码所示，input是选择器，type是属性，后面{}内的是样式。此时在body中的所有input标签只要有type="text"属性就采用后面的样式设置。这里的type="text"也可以写成n="michael"，即后面的input标签内有属性n="michael"就采用后面的样式。

input[type='text']{width: 100px; height: 200px;}

上面定义的选择器也可以不用标签关键字，比如定义一个下面样式的选择器：

.c1[n='michael']{width: 100px; height: 200px;}

此时在body标签中，可以像下面这样获取这个样式：

这样的选择方式相当于做了一个层级筛选。

7、选择器的优先级

选择器的优先级，现假设有下列html代码，在body标签内的某个标签内部定义了style样式，此时标签内部的style优先。class属性指向的样式标签是根据在中编写的顺序来定，哪个写在前面就优先用那个。就近原则。

.c1{

background-color: red;

color: white;

}

.c2{

font-size: 28px;

color: black;

}

michael

在上面的代码中，body标签内的div标签的class属性指向了c1 c2，因为在style中c1定义在c2的前面，所以c1优先。如果c2定义在前面。class="c1 c2"仍然是c2优先。

8、创建css引用文件

创建独立的css文件(Stylesheet)，把样式写在css文件中，在html文件中引入css的文件，比如下例代码所示：

css文件内容：filename: commons.css

.c1{

background-color: red;

color: white;

}

.c2{

font-size: 28px;

color: black;

}

在另外的html文件用link标签方式引入css文件，在link标签内，rel属性指定是css样式，href指向css文件在body标签使用引入的样式。如下面的代码所示。优先级与上面说到的一样。

hello world!

9、边框

可以设置：宽度、样式、颜色 (border: 4px dotted red;)

边框位置：border-left, border-right..

style属性的border表示边框，如下面代码所示，样式style内的border表示边框是1像素，边框是实体(solid)的，边框颜色是红色(red)。表示给这个div添加样式。boder默认是把这个div的内容全包起来，这些可以在浏览器的“右击/审查”，找到相应的标签，在右边出现的样式(style)代码中可以修改，包括像素、线的粗细实虚、颜色等都可以修改。例如虚线用dotted虚线。

michael

10、style常用样式

常用样式：height, width, line-height, color, font-size, font-weight, text-align

height设置当前div的高度；

width设置当前div宽度，可以写像素(如80px)也可以写百分比(80%)，当写百分比的时候，可以根据屏幕的大小自动调整。高度在这里暂不能写百分比，因为高度是无限的。

border设置当前div的边框，后面有像素、粗细虚实线、颜色设置项；

font-size设置字体大小；

font-weight设置字体加粗样式；

color设置字体颜色；

text-align设置文字水平样式；

line-height设置文字垂直样式，垂直方向根据标签高度设置样式；

background-color设置div的背景颜色；

注意上面列举的这些样式都在style属性中，并且样式之间用分号(;)分隔开。

hello python

11、float

float，让标签同在一行显示，块级标签也可以堆叠，让标签漂起来。

在style属性里面设置了float样式，两个或者多个div可以排列到一行上面，例如下面的代码所示，两个div在页面上显示在同一行，因为div是块级标签，本身带换行功能。下面代码设置第一个div的float属性是靠左(left)，占20%宽度；第二个div的float属性是靠右(right)，占80%宽度。当两个div的宽度占比超过100%时，第二个div就会换行。当两个div的宽度占比小于100%时，两个div之间就会空出多余的部分。

1

2

在下面的代码中，在head标签内定义了style样式，样式名称是pg-header;在body标签的属性style="margin: 0 auto;"，设置了body内的第一个div引用的背景色占满左右边界；

代码：

，定义一个宽度是300像素的边框；下面的子div标签又定义了较小的边框，并使用了float属性设置一排一排堆放。因为子div标签使用了float属性，边框会把父div标签定义的边框掩盖。为了避免这种情况，在最后面添加一行代码：

.pg-header{

height: 38px;

background-color: #dddddd;

line-height: 38px;

}

收藏本站

登录

注册

12、display

display: none; 可以设置让标签消失，在js用得比较多；

display: inline; 可以把块级标签改为行内标签；

display: block;可以把行内标签改为块级标签；

display: inline-block;可在行内标签上设置具有inline属性，默认自己有多少占多少；也可设置具 有block属性，可以设置在无法设置高度和宽度，padding mamrgin等情况的属性。

行内标签：无法设置高度，宽度，边距(padding margin)，就是设置了也不会生效。这点很重要。但可以设置display: inline-block属性进行改变。

块级标签：可以设置高度，宽度，边距(padding margin)等。

hello wolrd

hello python

Python

Michael

13、padding margin(0, auto)

用于设置边距，分为内边距、外边距。

margin是外边距，通过设置margin: 0; 即可达到前面用过的属性：style="margin: 0 auto;一样效果。表示占满页面的全部边框。

padding是内边距，让自身发生变化。

在css中的注释与html不一样，注释用：/*注释内容*/ 方式

六、常见问题

1.css重用问题：

假设有下面的css代码，可以把共有的属性写在一个样式中，独有的属性单独写。这样在引用样式时，尽量减少代码的编写。

.c{

共有

}

.c1{

独有

}

.c2{

独有

}

2、自适应 和 改变大小形状

左右滚动条的出现

宽度，百分比等

页面最外层：像素的宽度，最外层设置绝对宽度。当页面缩小时，内层div设置的宽度就随页面的缩小出现滚动条。

头部数据

中间内容

底单菜单

自适应：media。在定义样式时，添加条件，当某个条件成立时，才让某个样式生效。

3、img标签

默认img标签中的图片，在使用部分IE浏览器打开时，图片有一个1px边框，解决这个问题，在style标签中可以进行统一的设置，代码如下所示。这样当后面有使用img标签时，边框都为0。

img{

border: 0;

}

4、在页面上要显示一个输入框，在输入框左右两边有-+号时，有多种方式实现，例如可以用嵌套div实现。