python学习(4)

1.9 python的综合应用

1.9.1 模块

在计算机程序的开发过程中，随着程序代码越写越多，在⼀个⽂件⾥代码就会越来越⻓，越来越不容易 维护。 为了编写可维护的代码，我们把很多代码按功能分组，分别放到不同的⽂件⾥，这样，每个⽂件包含的 代码就相对较少，很多编程语⾔都采⽤这种组织代码的⽅式。在Python中，⼀个.py⽂件就可以称之为 ⼀个模块（Module）。

使⽤模块有什么好处？ 1. 最⼤的好处是⼤⼤提⾼了代码的可维护性。其次，编写代码不必从零开始。当⼀个模块编写完毕， 就可以被其他地⽅引⽤。我们在编写程序的时候，也经常引⽤其他模块，包括Python内置的模块和来⾃第三⽅的模块。 2. 使⽤模块还可以避免函数名和变量名冲突。每个模块有独⽴的命名空间，因此相同名字的函数和变量完全可以分别存在不同的模块中，所以，我们⾃⼰在编写模块时，不必考虑名字会与其他模块冲突。

模块分为三种： 内置标准模块（⼜称标准库）执⾏help(‘modules’)查看所有python⾃带模块列表 ；第三⽅开源模块，可通过pip install 模块名 联⽹安装；⾃定义模块

模块调用：

import module_a #导⼊
from module import xx # 导⼊某个模块下的某个⽅法 or ⼦模块
from module.xx.xx import xx as rename #导⼊后⼀个⽅法后重命令
from module.xx.xx import * #导⼊⼀个模块下的所有⽅法，不建议使⽤
module_a.xxx #调⽤

模块的导入必定是在模块的查找路径中出现才能被python文件识别找到。

import sys
print(sys.path)

导⼊⼀个模块时，Python解释器会按照上⾯列表顺序去依次到每个⽬录下去匹配你要导⼊的模块名， 只要在⼀个⽬录下匹配到了该模块名，就⽴刻导⼊，不再继续往后找。⾃⼰创建的模块若想在任何地⽅都能调⽤，那就得确保你的模块⽂件⾄少在模块路径的查找列表 中。使用sys.path.append(路径)

1.9.2 包

若项⽬较复杂，有很多代码⽂件的话，为了⽅便管理，可以⽤包来管理。 ⼀个包其实就是⼀个⽂ 件⽬录，你可以把属于同⼀个业务线的代码⽂件都放在同⼀个包⾥。

如何创建⼀个包？ 只需要在⽬录下创建⼀个空的 init.py ⽂件 ， 这个⽬录就变成了包。这个⽂件叫包的初始化⽂件 ，⼀般为空，当然也可以写东⻄，当你调⽤这个包下及其任意⼦包的的任意模块时， 这 个 init.py ⽂件都会先执⾏。

以下 有a、b 2个包，a2是a的⼦包，b2是b的⼦包。若在a_module.py模块⾥导⼊b2_mod.py的话，怎么办

from ab共同父目录下.b.b2 import b2_mod

注意一点：在构建项目时候最好不要使用中文目录，容易出错找不到位置

1.9.3常用的库

1.9.3.1 os & sys

import os
得到当前⼯作⽬录，即当前Python脚本⼯作的⽬录路径: os.getcwd()
返回指定⽬录下的所有⽂件和⽬录名:os.listdir()
函数⽤来删除⼀个⽂件:os.remove()
删除多个⽬录：os.removedirs（r“c：\python”）
检验给出的路径是否是⼀个⽂件：os.path.isfile()
检验给出的路径是否是⼀个⽬录：os.path.isdir()
判断是否是绝对路径：os.path.isabs()
检验给出的路径是否真地存:os.path.exists()
返回⼀个路径的⽬录名和⽂件名:os.path.split() e.g
os.path.split('/home/swaroop/byte/code/poem.txt') 结果：
('/home/swaroop/byte/code', 'poem.txt')
分离扩展名：os.path.splitext() e.g os.path.splitext('/usr/local/test.py')
 结果：('/usr/local/test', '.py')
获取路径名：os.path.dirname()
获得绝对路径: os.path.abspath() 
获取⽂件名：os.path.basename()
运⾏shell命令: os.system()
读取操作系统环境变量HOME的值:os.getenv("HOME")
返回操作系统所有的环境变量： os.environ
设置系统环境变量，仅程序运⾏时有效：os.environ.setdefault('HOME','/home/alex')
给出当前平台使⽤的⾏终⽌符:os.linesep Windows使⽤'\r\n'，Linux and MAC使⽤'\n'
指示你正在使⽤的平台：os.name 对于Windows，它是'nt'，⽽对于Linux/Unix⽤户，它
是'posix'
2.2 time 模块
在平常的代码中，我们常常需要与时间打交道。在Python中，与时间处理有关的模块就包括：time，
datetime,calendar(很少⽤，不讲)，下⾯分别来介绍。
我们写程序时对时间的处理可以归为以下3种：
时间的显示，在屏幕显示、记录⽇志等 "2022-03-04"
时间的转换，⽐如把字符串格式的⽇期转成Python中的⽇期类型
时间的运算，计算两个⽇期间的差值等
在Python中，通常有这⼏种⽅式来表示时间：
1. 时间戳（timestamp）, 表示的是从1970年1⽉1⽇00:00:00开始按秒计算的偏移量。例⼦：
1554864776.161901
2. 格式化的时间字符串，⽐如“2020-10-03 17:54”
3. 元组（struct_time）共九个元素。由于Python的time模块实现主要调⽤C库，所以各个平台可能
有所不同，mac上：time.struct_time(tm_year=2020, tm_mon=4, tm_mday=10, tm_hour=2,
tm_min=53, tm_sec=15, tm_wday=2, tm_yday=100, tm_isdst=0)
重命名：os.rename（old， new）
创建多级⽬录：os.makedirs（r“c：\python\test”）
创建单个⽬录：os.mkdir（“test”）
获取⽂件属性：os.stat（file）
修改⽂件权限与时间戳：os.chmod（file）
获取⽂件⼤⼩：os.path.getsize（filename）
结合⽬录名与⽂件名：os.path.join(dir,filename)
改变⼯作⽬录到dirname: os.chdir(dirname)
获取当前终端的⼤⼩: os.get_terminal_size()
杀死进程: os.kill(10884,signal.SIGKILL)
获取文件的编译目录：sys.path
获取脚本的运行参数：sys.argv

1.9.3.2 时间模块

在平常的代码中，我们常常需要与时间打交道。在Python中，与时间处理有关的模块就包括：time， datetime,calendar(很少⽤)，下⾯分别来介绍。

写程序时对时间的处理可以归为以下3种：

时间的显示，在屏幕显示、记录⽇志等 “2022-03-04”

时间的转换，⽐如把字符串格式的⽇期转成Python中的⽇期类型

时间的运算，计算两个⽇期间的差值等

在python中表示时间：

1. 时间戳（timestamp）, 表示的是从1970年1⽉1⽇00:00:00开始按秒计算的偏移量。例⼦： 1554864776.161901
2. 格式化的时间字符串，⽐如“2020-10-03 17:54”
3. 元组（struct_time）共九个元素。由于Python的time模块实现主要调⽤C库，所以各个平台可能 有所不同，

索引（Index） 属性（Attribute） 值（Values）
0 tm_year（年） ⽐如2011
1 tm_mon（⽉） 1 - 12
2 tm_mday（⽇） 1 - 31
3 tm_hour（时） 0 - 23
4 tm_min（分） 0 - 59
5 tm_sec（秒） 0 - 61
6 tm_wday（weekday） 0 - 6（0表示周⼀）
7 tm_yday（⼀年中的第⼏天） 1 - 366
8 tm_isdst（是否是夏令时） 默认为-1

time模块的常用方法：

• time.time(): 返回当前时间的时间戳

• time.sleep(secs):线程推迟指定的时间运⾏,单位为秒

• time.localtime():将⼀个时间戳转换为当前时区struct_time。若secs参数未提供， 则以当前时间为准

• time.gmtime([secs]):和localtime()⽅法类似，gmtime()⽅法是将⼀个时间戳转换为UTC时区（0时区）的struct_time

• time.mktime(t):将⼀个struct_time转化为时间戳

• time.strftime(format[, t])：把⼀个代表时间的元组或者struct_time（如由time.localtime()和time.gmtime()返回）转化为格式化的时间字符串。如果t未指定，将传⼊time.localtime()

• time.strptime(string[, format]) ：把⼀个格式化时间字符串转化为struct_time。实际上它 和strftime()是逆操作

  举例如下：

  print(time.strftime("%Y-%m-%d %H:%M:%S"))  # 时间元组转字符串
  time_str = time.strftime("%Y-%m-%d %H:%M:%S")
  print(time.strptime(time_str, "%Y-%m-%d %H:%M:%S"))  # 字符串转时间元组
  

  ​ 相⽐于time模块，datetime模块的接⼝则更直观、更容易调⽤ datetime模块定义了下⾯这⼏个类：

  datetime.date：表示⽇期的类。常⽤的属性有year, month, day；

  datetime.time：表示时间的类。常⽤的属性有hour, minute, second, microsecond；

  datetime.datetime：表示⽇期时间。

  datetime.timedelta：表示时间间隔，即两个时间点之间的⻓度。

  datetime.tzinfo：与时区有关的相关信息。

print(datetime.datetime.now())  #输出 2023-11-14 00:02:18.739981
datetime.date.fromtimestamp(322222) # 把⼀个时间戳转为datetime⽇期类型
print(datetime.datetime.now() + datetime.timedelta(days=5)) #时间运算 往后延迟5天

1.9.3.3 random模块

random.randrange(1,10) #返回1-10之间的⼀个随机数，不包括10
random.randint(1,10) #返回1-10之间的⼀个随机数，包括10
random.randrange(0, 100, 2) #随机选取0到100间的偶数
random.random() #返回⼀个随机浮点数
random.choice('abce3#$@1') #返回⼀个给定数据集合中的随机字符
random.sample('abcdefghij',3) #从多个字符中选取特定数量的字符
 ''.join(random.sample(string.ascii_lowercase + string.digits, 6))#⽣成随机字符串

1.9.3.4 json模块

JSON(JavaScriptObject Notation, JS 对象简谱) 是⼀种轻量级的数据交换格式。它采⽤完全独⽴于编程 语⾔的⽂本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语⾔。 易于 ⼈阅读和编写，同时也易于机器解析和⽣成，并有效地提升⽹络传输效率

序列化是指把内存⾥的数据类型转变成字符串，以使其能存储到硬盘或通过⽹络传输到远程，因为硬盘 或⽹络传输时只能接受bytes

⽤于序列化的两个模块

• json，⽤于字符串 和 python数据类型间进⾏转换
• pickle，⽤于python特有的类型 和 python的数据类型间进⾏转换

pickle 模块提供了四个功能：dumps、dump、loads、load

import pickle
data = {'k1':123,'k2':'Hello'}
# pickle.dumps 将数据通过特殊的形式转换位只有python语⾔认识的字符串
p_str = pickle.dumps(data) # 注意dumps会把数据变成bytes格式
print(p_str)
# pickle.dump 将数据通过特殊的形式转换位只有python语⾔认识的字符串，并写⼊⽂件
with open('result.pk',"wb") as fp:
 pickle.dump(data,fp)
# pickle.load 从⽂件⾥加载
f = open("result.pk","rb")
d = pickle.load(f)
print(d)

Json模块也提供了四个功能：dumps、dump、loads、load，⽤法跟pickle⼀致

import json

# json.dumps 将数据通过特殊的形式转换位所有程序语⾔都认识的字符串
j_str = json.dumps(data)  # 注意json dumps⽣成的是字符串，不是bytes
print(j_str)
# dump⼊⽂件
with open('result.json', 'w') as fp:
    json.dump(data, fp)
# 从⽂件⾥load
with open("result.json") as f:
    d = json.load(f)
    print(d)

1.9.3.5excel处理模块

下面先介绍openpyxl这个第三方库的使用方法

from openpyxl import Workbook
# 创建excel文件
wb = Workbook()  # 在内存中实例化一个excel
sheet = wb.active  # 获取当前active的sheet
print(sheet.title)  # 打印sheet表名
sheet.title = "liverool的sheet"  # 改sheet名
# 在文件中写东西
# ⽅式⼀：数据可以直接分配到单元格中(可以输⼊公式)
sheet["A6"] = "Hello liverool"
# ⽅式⼆：可以附加⾏，从第⼀列开始附加(从最下⽅空⽩处，最左开始)(可以输⼊多⾏)
sheet.append([1, 2, 3])
# ⽅式三：Python 类型会被⾃动转换
sheet['A3'] = datetime.datetime.now().strftime("%Y-%m-%d")
wb.save("liverpool.xlsx")  # 保存创建的excel文件

wb = openpyxl.load_workbook("liverpool_test.xlsx")  # 打开相关的excel文件
print(wb.sheetnames)  # 得到所有excel表格中的sheet工作表名字  or wb.get_sheet_names()（可能有警告）
sheet1 = wb["Sheet1"]  # 得到Sheet1的相关数据 or wb.get_sheet_by_name("Sheet1")（可能有警告）
print(sheet1["A5"])  # 打印a5这个单元格
print(sheet1["A5"].value)  # 打印这个a5单元格的内容
# 打印连续的一串内容
for cell in sheet1["A2:A10"]:  # 进行指定单元格切片
    print(cell[0].value)
# 遍历
# 按行遍历
for row in sheet1:  # 循环获取表数据
    for cell in row:  # 循环获取每个单元格数据
        print(cell.value, end=",")
    print()
# 按列遍历
for column in sheet1.columns:
    for row in column:
        print(row.value, end=",")
    print()
# 遍历指定行和列(指定区域)
# 从弟2行开始到弟5行，每行打印1列
for row in sheet1.iter_rows(min_row=2, max_row=5, max_col=1):
    for cell in row:
        print(cell.value, end=",")
    print()
# 打印指定列
# 只打印第一列
for col in sheet1.iter_cols(min_col=1,max_col=1):
    for cell in col:
        print(cell.value, end=",")
    print()
wb.remove(sheet1) # 删除工作表 or del wb[sheet1]

下面介绍设置单元格格式

from openpyxl.styles import Font, colors, Alignment
import openpyxl
wb = openpyxl.load_workbook("liverpool_test.xlsx")  # 打开相关的excel文件
sheet = wb["Sheet1"]
my_font = openpyxl.styles.Font(name='宋体', size=24, italic=True, color=colors.BLUE,bold=True) # 声明样式
sheet['A1'].font = my_font # 给单元格设置样式
sheet['A1'].alignment = Alignment(horizontal='center', vertical='center') # 设置对其样式
# 第2⾏⾏⾼
sheet.row_dimensions[2].height = 40
# A列列宽
sheet.column_dimensions['A'].width = 30

wb.save("liverpool_test.xlsx")

1.9.3.6邮件

SMTP即简单邮件传输协议,它是⼀组⽤于由源地址到⽬的地址传送 邮件的规则，由它来控制信件的中转⽅式。

想实现发送邮件需经过以下⼏步： 1. 登录 邮件服务器 2. 构造符合邮件协议规则要求的邮件内容 （email模块） 3. 发送

Python对SMTP⽀持有 smtplib 和 email 两个模块， email 负责构造邮件， smtplib 负责发送邮件,它 对smtp协议进⾏了简单的 封装

# 发送简单邮件
import smtplib
from email.mime.text import MIMEText  # 构建邮件正文
from email.header import Header  # 构建邮件头
# 登录邮件服务器
smtp_obj = smtplib.SMTP_SSL("smtp.qq.com", 465)
smtp_obj.login("1549474632@qq.com", "密码") # 登录邮箱
msg = MIMEText("Hello,my name is Liverpool", "plain", "utf-8") # 构建正文
# 设置邮件头信息
msg["From"] = Header("Liverpool <1549474632@qq.com>") # 发送者
msg["To"] = Header("有缘⼈","utf-8") # 接收者
msg["Subject"] = Header("Liverpool的信","utf-8") # 主题
# 发送
smtp_obj.sendmail("1549474632@qq.com", "cjh1549474632@gmail.com", msg.as_string())

# 发送html邮件
import smtplib
from email.mime.text import MIMEText  # 构建邮件正文
from email.header import Header  # 构建邮件头
from email.mime.multipart import MIMEMultipart
from email.mime.image import MIMEImage
# 登录邮件服务器
smtp_obj = smtplib.SMTP_SSL("smtp.qq.com", 465)
smtp_obj.login("1549474632@qq.com", "密码") # 登录邮箱
# 发送html邮件
mail_body = '''
 <h5>hello</h5>
 <p>my name is Liverpool
 <a href="https://wallpapercave.com/wp/wp2679316.jpg">这是我的照⽚</a>
 </p> 
 <p><img src="cid:image1"></p>
''' # 插入超链接和图片
# 设置邮件头信息
msg = MIMEMultipart('related') # 允许添加附件、图⽚等
msg["From"] = Header("Liverpool <1549474632@qq.com>") # 发送者
msg["To"] = Header("有缘⼈","utf-8") # 接收者
msg["Subject"] = Header("Liverpool的信","utf-8") # 主题

# 允许添加图⽚
msgAlternative = MIMEMultipart('alternative')
msgAlternative.attach(MIMEText(mail_body, 'html', 'utf-8'))
msg.attach(msgAlternative) # 把邮件正⽂内容添加到msg⾥
# 加载图⽚，
fp = open('liverpool.jpg', 'rb')
msgImage = MIMEImage(fp.read())
fp.close()
# 定义图⽚ ID，在 HTML ⽂本中引⽤
msgImage.add_header('Content-ID', '<image1>')
msg.attach(msgImage) # 添加图⽚到msg对象⾥
# 发送
smtp_obj.sendmail("1549474632@qq.com", "cjh1549474632@gmail.com", msg.as_string())

1.9.4相关程序的练习

根据excel表格给批量进行邮件的发送

# 根据excel表格批量发送邮件
import openpyxl
import smtplib
from email.mime.text import MIMEText  # 构建邮件正文
from email.header import Header  # 构建邮件头

wb = openpyxl.load_workbook("worker_money.xlsx", data_only=True)  # 去除公式 只保留数据
sheet = wb.active  # 获取活跃的sheet表格
# 登录邮件服务器
smtp_obj = smtplib.SMTP_SSL("smtp.qq.com", 465)
smtp_obj.login("1549474632@qq.com", "密码")  # 登录邮箱
# 循环excel
count = 0
table_col_name = "<thead>"
for row in sheet.iter_rows(min_row=1):
    count += 1
    if count == 1:
        for col in row:
            table_col_name += f"<th>{col.value}</th>"
        table_col_name += "</thead>"
    else:
        row_data = "<tr>"  # 开始1行
        for cell in row:
            row_data += f"<td>{cell.value}</td>"
        row_data += "</tr>"  # 结束一行
        name = row[2]
        staff_email = row[1].value
        maid_body = f"""
        <h3>{name.value},你好</h3>
        <p>请查收你的相关数据</p>
        <table border="1px solid black">
        {table_col_name}
        {row_data}
        </table>
        """
        msg = MIMEText(maid_body, "html", "utf-8")
        msg["From"] = Header("Liverpool <1549474632@qq.com>")  # 发送者
        msg["To"] = Header("有缘⼈", "utf-8")  # 接收者
        msg["Subject"] = Header("Liverpool的信", "utf-8")  # 主题
        smtp_obj.sendmail("1549474632@qq.com", staff_email, msg.as_string())

1.10 web相关知识的学习

我们看到的⽹⻚通过代码来实现的 ，这些代码由浏览器解释并渲染成你看到的丰富多彩的⻚⾯效果。，专⻔负责解释和执⾏(渲染）⽹⻚代码。 写⽹⻚的代码是专⻔的语⾔， 主要分为Hmtl \ CSS \ JavaScript, 被称为⽹⻚开发三剑客，

分别作⽤如 下： Html 超⽂本标记语⾔（英语：HyperText Markup Language，简称：HTML）是⼀种⽤于创建⽹⻚的标准标 记语⾔。 主要负责编写⻚⾯架构，有点像建房⼦时，造的⽑坯房。

CSS CSS (Cascading Style Sheets) ⽤于渲染HTML元素标签的样式。 让你的⽹⻚样式变的丰富多彩起来，可以改变字体、颜⾊、排列⽅式、背景颜⾊等 相当于给你的⽑坯房做装修

JavaScript ⽹⻚脚本语⾔，可以让你的⽹⻚动起来，⽐如⼀张图⽚⿏标放上去⾃动变⼤、⼀个按钮⾃动变⾊、提交 表单时少填或填错了字段会提示报错等，都是JavaScript实现的。

1.10.1 HTML

HTML 是⽤来描述⽹⻚的⼀种语⾔。 HTML 指的是超⽂本标记语⾔: HyperText Markup Language HTML 不是⼀种编程语⾔，⽽是⼀种标记语⾔ 标记语⾔是⼀套标记标签 (markup tag) HTML 使⽤标记标签来描述⽹⻚ HTML ⽂档包含了HTML 标签及⽂本内容 HTML⽂档也叫做 web ⻚

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。HTML 标签是由尖括号包围的关键词，⽐如 HTML 标签通常是成对出现的,标签对中的第⼀个标签是开始标签，第⼆个标签是结束标签

<!DOCTYPE html> <!--声明为 HTML5 ⽂档-->
<html><!--元素是 HTML ⻚⾯的根元素-->
    <head><!--标签⽤于定义⽂档的头部，它是所有头部元素的容器中的元素可以引⽤脚本、指示浏览器在哪⾥找到样式表、提供元信息等等-->
    <meta charset="utf-8"><!--包含⽂档的元数据， 如定义⽹⻚编码格式为 utf-8、关键词-->
    <title>my fist web page</title><!--元素是 ⽂档的标题-->
    </head>
<body><!--包含了可⻅的⻚⾯内容-->
 <h1>Liverpool</h1><!--定义⼀个⼤标题-->
 <p>my name is liverpool</p><!--定义⼀个段落-->
 </body>
</html>

1.10.1.1 标题和段落

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>html的各种练习</title>
</head>
<body>
    <h1>这是1号标题</h1>
    <h2>这是2号标题</h2>
    <h3>这是3号标题</h3>
    <h4>这是4号标题</h4>
    <h5>这是5号标题</h5>
    <h6>这是6号标题</h6>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>段落</title>
</head>
<body>
    <p>第1段</p>
    <p>第2段</p>
    <p>第3段</p>
</body>
</html>

1.10.1.2 超链接和图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>超链接和图片</title>
</head>
<body>
    <a href="http://www.baidu.com" >百度一下</a> <!--在当前页面加载超链接-->
    <br> <!--进行换行-->
    <a href="http://www.baidu.com" target="_blank">百度一下1</a> <!--target="_blank可以重新加载一个新页面-->
    <br> <!--进行换行-->
    <img src="../liverpool.jpg" width="600" ><!--显示图片-->
</body>
</html>

1.10.1.3 表格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>
    <table border="1">
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
    </tr>
    <tr>
        <td>row 1, cell 1</td>
        <td>row 1, cell 2</td>
    </tr>
    <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
    </tr>
    </table>

</body>
</html>

1.10.1.4 列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表</title>
</head>
<body>
<ol> <!--有序列表-->
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
</ol>
<ol start="50">
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
</ol>
<ul><!--无序列表-->
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
</ul>
<ul><!--嵌套列表-->
    <li>Coffee</li>
    <li>Tea
        <ul>
            <li>Black tea</li>
            <li>Green tea</li>
        </ul>
    </li>
    <li>Milk</li>
</ul>
</body>
</html>

1.10.1.5 div

⼤多数 HTML 元素被定义为块级元素或内联元素。 块级元素在浏览器显示时，通常会以新⾏来开始（和结束）。

内联元素在显示时通常不会以新行开始。

<div>元素没有特定的含义，通常与CSS一起使用，可用于对较大的内容块设置样式属性。其另一个常见的用途是文档的布局，取代了使用表格定义布局的老式方法。

<span>元素是内联元素，可用作于文本内容，元素也没有特定的含义，当与CSS一起使用时，元素可用于部分的文本设置样式属性。

1.10.1.6 表单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
</head>
<body>
    <div>
        <form action="./test/url"> <!--对标签添加浮动属性靠左边-->
            <fieldset > <!--文本框-->
                <legend>文本框</legend>>
                用户名:<input type="text" name="username"> <br>
                密码:<input type="password" name="password"> <br>
                年龄:<input type = "member" name="age"> <br>
                出生日期:<input type="date" name="birthday"> <br>
            </fieldset>
            <fieldset> <!--文本域-->
                <legend>文本域</legend>>
                个人介绍:<br>
                <textarea name="个人介绍" cols="50" rows="5" placeholder="请输入不少于50个字的个人介绍..."></textarea><br>
            </fieldset>
            <fieldset>
                <legend>选择</legend>
                Sex:<input type="radio" name="sex" value="man">男 <input type="radio" name="sex" value="women">女 <br> <!--单选框-->
                爱好:<!--复选框-->
                <input type="checkbox" name="hoppy" value="python">python
                <input type="checkbox" name="hoppy" value="Java">Java
                <input type="checkbox" name="hoppy" value="C#">C#
                <input type="checkbox" name="hoppy" value="C/C++">C/C++<br>
                最喜欢的球队:<!--下拉菜单-->
                <select name="favorite_team">
                    <option value="1">利物浦</option>
                    <option value="2">曼联</option>
                    <option value="3">切尔西</option>
                    <optgroup label="德甲">
                        <option value="4">拜仁</option>
                        <option value="5">多特</option>
                    </optgroup>
                    <optgroup label="意甲">
                        <option value="6">AC米兰</option>
                        <option value="7">尤文</option>
                    </optgroup>
                </select>
            </fieldset>
            <input type="submit" value="注册">
        </form>
    </div>
</body>
</html>

1.10.2 CSS初识

CSS样式是用于渲染HTML元素标签的样式。

CSS可以通过以下方式添加到HTML中：

• 内联样式-在HTML元素中使用style属性添加(使用较少)
• 内部样式表-在HTML文档头部<head>区域使用<style>元素来包含CSS
• 外部引用-使用外部CSS文件

1.10.2.1 内联样式

当特殊的样式需要应用到个别元素时，就可以使用内联样式，方法是在相关标签的属性添加样式属性。

举例如下：

<h3 style="font_family:arial; font-size:20px;color:red;background-color:yellow">这是3号标题</h3>
<!--直接设置它的字体属性背景颜色-->

1.10.2.2 内部样式表

当单个文件需要特别样式时，就可以使用内部样式表，可以在<head>b部分通过<style>标签给相同的HTML元素设置样式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内部样式表</title>
    <style type="text/css">
        body {background-color:red;}
        p{color: white;}
    </style>
</head>
<body>
    <p>This is Liverpoool!</p>
</body>
</html>

CSS规则是由两部分组成的：选择器，以及一条或多条声明组成。

选择器通常是需要设置样式的HTML元素。

每条声明由一个属性和一个值组成的。

1.10.2.3 外部样式表

在外部文件创建一个CSS文件，可以使样式被应用到很多页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>外部样式表</title>
    <link rel="stylesheet" type="text/css" href="外部样式表.css"> <!--引入外部样式-->
</head>
<body>
    <p>This is Liverpoool!</p>
</body>
</html>

1.10.3 网页布局

使用div这个标签对网页进行布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网页布局</title>
    <style type="text/css">
        #menu { /* 前面加#号就是用id来选择这个标签*/
            background-color: yellow;
            height: 80px;
        }
        #sidebar {
            height: 500px;
            width: 10%;
            background-color:orange;
            float: left;  /*对标签添加浮动属性靠左边*/
        }
        #content{
            height: 500px;
            width: 90%;
            background-color:greenyellow;
            float: left;
        }
        #footer {
            background-color:powderblue;
            height: 100px;
            clear: both; /*不在按照浮动排列*/
        }

    </style>

</head>
<body>
    <div id = "menu">
        <p>首页</p>
        <p>分项</p>
    </div>
    <div id = "sidebar">
        <ul>
            <li>手机</li>
            <li>电视</li>
            <li>小家电</li>
            <li>LOT</li>
        </ul>
    </div>
    <div id = "content">
        <h2>大广告</h2>
    </div>
    <div id = "footer">
        <h3>footer...</h3>
    </div>
</body>
</html>

1.10.4 CSS常用样式

1.10.4.1 id\class选择器

id就像一个元素的身份证地址，在网页里唯一的代表某个元素，我们可以通过这个id快速的找到它对应的对象，可以设置CSS的样式。注意代码规范，一个网页中元素的id号是唯一的。

#id号 /* 前面加#号就是用id来选择这个标签*/

class选择器，为了批量的给元素设置样式，可以使用class这种选择器，需要在设置样式的元素中设置class属性，等于要设置的class类选择器名称，就可以进行样式的批量设置。

.class名称 /* 前面加.号就是用class来选择这个标签*/

1.10.4.2 组合选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子选择器</title>
    <style type="text/css">
        #layer1
        {
            height: 500px;
            width: 500px;
            padding:30px; /*内边距*/
            border:1px dashed blue;
        }
        #layer2
        {
            height: 350px;
            padding:30px;
            border:1px dashed red;
        }
        #layer3
        {
            height: 200px;
            padding:30px;
            border:1px dashed black;
        }
    </style>
</head>
<body>
<div id="layer1">
    <h1>Layer 1</h1>
    <p>第一层</p>
    <div id="layer2">
        <h2>Layer 2</h2>
        <p>第二层</p>
        <div id="layer3">
            <h3>Layer 3</h3>
            <p>第三层</p>
        </div>
    </div>
</div>
<p>我不在任何div中</p>
</body>
</html>

后代选择器：给指定元素的所有指定后代，都设置样式

#layer1 p /*相当于给layer1中的所有p标签都添加统一的样式*/
{
	background-color: yellow;
}

子元素选择器：是只给指定的元素的下一层元素设置格式

#layer1 > p /*相当于给layer1中的p标签都添加样式,其他后代不管*/
{
	background-color: yellow;
}

相邻兄弟选择器：可选择紧邻在另一元素后的元素设置样式，且二者具有相同的父元素。

#layer2 > h2+p /*相当于给layer2中的p标签设置样式,这里有顺序要求*/
{
    background-color: yellow;
}

多个元素组合：可同时给不相干的多个元素设置相同的样式

p,h3
{
    background-color: yellow;
}

1.10.5 网页布局盒子模型

其实所有的HTML元素都可以看作盒子，盒子模型允许它本身的元素和周围元素边框之间的空间放置元素。

盒子模型如下：Margin(外边框)->Border(边框)->Padding(内边框)->Content(内容)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子模型</title>
    <style type="text/css">
        .box
        {
            border: 10px solid red;
            width: 500px;
            height: 500px; /*height和width只针对content*/
            padding:50px;
            margin: 20px;
        }
    </style>
</head>
<body>
<div class="box">
    <p>This is Liverpool!</p>
</div>
</body>
</html>

1.10.6 CSS常用属性

背景属性

属性	描述	CSS
background	复合属性。设置对象的背景特性。	1
background-attachment	设置或检索背景图像是随对象内容滚动还是固定的。必须先指定background-image属性。	1
background-color	设置或检索对象的背景颜色。	1
background-image	设置或检索对象的背景图像。	1
background-position	设置或检索对象的背景图像位置。必须先指定background-image属性。	1
background-repeat	设置或检索对象的背景图像如何铺排填充。必须先指定background-image属性。	1
background-clip	指定对象的背景图像向外裁剪的区域。	3
background-origin	S设置或检索对象的背景图像计算background-position时的参考原点(位置)。	3
background-size	检索或设置对象的背景图像的尺寸大小。	3

边框(Border) 和 轮廓(Outline) 属性

属性	描述	CSS
border	复合属性。设置对象边框的特性。	1
border-bottom	复合属性。设置对象底部边框的特性。	1
border-bottom-color	设置或检索对象的底部边框颜色。	1
border-bottom-style	设置或检索对象的底部边框样式。	1
border-bottom-width	设置或检索对象的底部边框宽度。	1
border-color	置或检索对象的边框颜色。	1
border-left	复合属性。设置对象左边边框的特性。	1
border-left-color	设置或检索对象的左边边框颜色。	1
border-left-style	设置或检索对象的左边边框样式。	1
border-left-width	设置或检索对象的左边边框宽度。	1
border-right	复合属性。设置对象右边边框的特性。	1
border-right-color	设置或检索对象的右边边框颜色。	1
border-right-style	设置或检索对象的右边边框样式。	1
border-right-width	设置或检索对象的右边边框宽度。	1
border-style	设置或检索对象的边框样式。	1
border-top	复合属性。设置对象顶部边框的特性。	1
border-top-color	设置或检索对象的顶部边框颜色	1
border-top-style	设置或检索对象的顶部边框样式。	1
border-top-width	设置或检索对象的顶部边框宽度。	1
border-width	设置或检索对象的边框宽度。	1
outline	复合属性。设置或检索对象外的线条轮廓。	2
outline-color	设置或检索对象外的线条轮廓的颜色。	2
outline-style	设置或检索对象外的线条轮廓的样式。	2
outline-width	设置或检索对象外的线条轮廓的宽度。	2
border-bottom-left-radius	设置或检索对象的左下角圆角边框。提供2个参数，2个参数以空格分隔，每个参数允许设置1个参数值，第1个参数表示水平半径，第2个参数表示垂直半径，如第2个参数省略，则默认等于第1个参数	3
border-bottom-right-radius	设置或检索对象的右下角圆角边框。	3
border-image	设置或检索对象的边框样式使用图像来填充。	3
border-image-outset	规定边框图像超过边框的量。	3
border-image-repeat	规定图像边框是否应该被重复（repeated）、拉伸（stretched）或铺满（rounded）。	3
border-image-slice	规定图像边框的向内偏移。	3
border-image-source	规定要使用的图像，代替 border-style 属性中设置的边框样式。	3
border-image-width	规定图像边框的宽度。	3
border-radius	设置或检索对象使用圆角边框。	3
border-top-left-radius	定义左上角边框的形状。	3
border-top-right-radius	定义右上角边框的形状。	3
box-decoration-break	规定行内元素被折行	3
box-shadow	向方框添加一个或多个阴影。	3

定位

absolute	绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于:
fixed	元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动
relative	相对定位元素的定位是相对其正常位置
static	HTML 元素的默认值，即没有定位，遵循正常的文档流对象。静态定位的元素不会受到 top, bottom, left, right影响
sticky	粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。
inherit	规定从父元素继承position属性的值

允许设置1个参数值，第1个参数表示水平半径，第2个参数表示垂直半径，如第2个参数省略，则默认等于第1个参数 | 3 |
| border-bottom-right-radius | 设置或检索对象的右下角圆角边框。 | 3 |
| border-image | 设置或检索对象的边框样式使用图像来填充。 | 3 |
| border-image-outset | 规定边框图像超过边框的量。 | 3 |
| border-image-repeat | 规定图像边框是否应该被重复（repeated）、拉伸（stretched）或铺满（rounded）。 | 3 |
| border-image-slice | 规定图像边框的向内偏移。 | 3 |
| border-image-source | 规定要使用的图像，代替 border-style 属性中设置的边框样式。 | 3 |
| border-image-width | 规定图像边框的宽度。 | 3 |
| border-radius | 设置或检索对象使用圆角边框。 | 3 |
| border-top-left-radius | 定义左上角边框的形状。 | 3 |
| border-top-right-radius | 定义右上角边框的形状。 | 3 |
| box-decoration-break | 规定行内元素被折行 | 3 |
| box-shadow | 向方框添加一个或多个阴影。 | 3 |

定位

absolute	绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于:
fixed	元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动
relative	相对定位元素的定位是相对其正常位置
static	HTML 元素的默认值，即没有定位，遵循正常的文档流对象。静态定位的元素不会受到 top, bottom, left, right影响
sticky	粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。
inherit	规定从父元素继承position属性的值

​