HTML标签、CSS介绍
标签的分类: 块级/行内
# 块级标签: 独占一行 h1~h6 p div
"""
块儿级标签可以修改长宽. 行内标签不可以, 就算修改了也不会变化.
块级标签内部可以嵌套任意的块级标签和行内标签. 特例: 是p标签虽然是块级标签 但是它只能嵌套行内标签 不能嵌套块级标签. 如果你套了 问题也不大 因为浏览器会自动帮你解除嵌套关系(浏览器是直接面向用户的 不会轻易的报错 哪怕有报错用户也基本感觉不出来)
"""
# 行内标签: 自身文本多大就占多大. i u s b span
"""
行内标签不能嵌套块级标签, 只能嵌套行内标签.
"""
# 补充: 上述的规定只是HTML书写规范 如果你不遵循 不会报错img标签
# 图片标签
![]()
src
1.图片的路径 可以是本地的也可以是网上的
2.url自动朝该url发送get请求获取数据
alt="这是我的前女友"
当图片加载不出来的时候 给图片的描述性信息
title="新垣结衣"
当鼠标悬浮到图片上之后 自动展示的提示信息
height="800px"
width=""
高度和宽度当你只修改一个的时候 另外一个参数会等比例缩放
如果你修改了两个参数 并且没有考虑比例的问题 那么图片就会失真# 全称及缩写说明
"""
alt alter 替用(一般是图片显示不出的提示)
src Source 源文件链接
"""a标签
# 链接标签
"""
当a标签指定的网址从来没有被点击过 那么a标签的字体颜色是蓝色
如果点击过了就会是紫色（浏览器给你记忆了）
"""
href
1.放url，用户点击就会跳转到该url页面
2.放其他标签的id值 点击即可跳转到对应的标签位置
target
默认a标签是在当前页面完成跳转 _self
你也可以修改为新建页面跳转 _blank
# a标签的锚点功能
"""点击一个文本标题 页面自动跳转到标题对应的内容区域"""
顶部
hello world
中间
底部
回到顶部
回到中间
回到hello world# 全称及缩写说明
"""
Anchor /ˈæŋkə(r)/
Division /dɪˈvɪʒn/
a Anchor 锚(定义超链接，用于从一张页面链接到另一张页面)
href hypertext reference 超文本引用
div Division 分隔
"""列表标签
1. 无序列表
- 哈哈哈1
- 哈哈哈2
- 哈哈哈3
# type属性
"""
disc （实心圆点，默认值）
circle（空心圆圈）
square（实心方块）
none （无样式）
"""
# 全称及缩写说明
"""
ul Unordered List 不排序列表
li List Item 列表项目
"""2. 有序列表
- 111
- 222
- 333
# type属性
"""
1 数字列表，默认值
A 大写字母
a 小写字母
Ⅰ 大写罗马
ⅰ 小写罗马
"""
# 全称及缩写说明
"""
ol Ordered List 排序列表
li List Item 列表项目
"""3. 定义列表
- 标题1
- 内容1
- 标题1
- 内容1
- 标题1
- 内容1
# 全称及缩写说明
"""
Definition /ˌdefɪˈnɪʃn/
dl Definition List 定义列表
dt Definition Term 定义术语
dd Definition Description 定义描述
"""表格标签
| username | password | hobby | others |
|---|---|---|---|
| jsaon | read | ||
| egon | DBJ | 吃生蚝 | |
| tank | 摸鱼 | 弹棉花 |
username
password
hobby
others
jason
123
read
egon
DBJ
吃生蚝
tank
摸鱼
弹棉花
- 创建流程
"""
colspan 当前行中的列合并(水平方向占多行)
rowspan 合并多行属性(垂直方向占多行)
"""
table[border=1]>(thead>th)+(tbody>tr>td+td)- 属性
"""
border: 表格边框.
cellpadding: 内边距
cellspacing: 外边距.
width: 像素 百分比.（最好通过css来设置长宽）
rowspan: 单元格竖跨多少行
colspan: 单元格横跨多少列（即合并单元格
"""
表单标签
1. 表单功能
"""
表单用于向服务器传输数据，从而实现用户与Web服务器的交互
表单能够包含input系列标签，比如文本字段、复选框、单选框、提交按钮等等。
表单还可以包含textarea、select、fieldset和 label标签。
"""2. 表单属性
| 属性 | 描述 |
|---|---|
| accept-charset | 规定在被提交表单中使用的字符集（默认：页面字符集） |
| action | 规定向何处提交表单的地址（URL）（提交页面） |
| autocomplete | 规定浏览器应该自动完成表单（默认：开启） |
| enctype | 规定被提交数据的编码（默认：url-encoded） |
| method | 规定在提交表单时所用的 HTTP 方法（默认：GET） |
| name | 规定识别表单的名称（对于 DOM 使用：document.forms.name） |
| novalidate | 规定浏览器不验证表单 |
| target | 规定 action 属性中地址的目标（默认：_self） |
几种重要的属性详解:
3. 表单元素
4. 使用Flask验证表单提交数据
from flask import Flask
from flask import request
app = Flask(__name__)
# 当前url既可以支持get请求也可以支持post请求 如果不写默认只能支持get请求
@app.route('/index/', methods=['GET', 'POST'])
def index():
print(request.form) # 获取form表单提交过来的非文件数据
'''
ImmutableMultiDict([('username', 'root'), ('password', '123'), ...])
'''
print(request.files) # 获取文件数据
'''
ImmutableMultiDict([('myfile', ),])
'''
file_obj = request.files.get("myfile") # 通过get表单标签中的file标签中定义的name属性的值myfile获取到文件对象
# print('file_obj.name:', file_obj.name) # 获取`文件名`
print('file_obj.filename:', file_obj.filename) # 获取`文件名.后缀`
if file_obj:
file_obj.save(file_obj.filename) # 保存文件对象到当前目录下(.filename以当前`文件名.后缀`保存)
return 'OK'
app.run()
5. 总结
# 标签分类:
块级标签: form
行内标签: label, input, textarea, select, option, optgroup
# form种所有标签共用属性:
name 提交到后端的key.
value 提交到后端的value. 文本框标签可以不指定, 通过获取用户输入的内容就是value. 选选框类型等都需要自己指定value值.(特例: 如果是按钮类型就仅仅是显示按钮的展示文本)
disabled 禁用.
# 文本框类型共用属性: (文本框类型包括: 普通文本,密文文本, 文本域)
readonly 只读
placeholder 提示占位符
maxlength 最大输入长度
# 选框类型共用属性: (选框类型包括: 单选框, 多选框, 文件选框, 下拉选框单选框, 下拉多选框, 下拉选项组选框)
文件选框多选, 下拉多选框: multiple
单/多选框默认选中: checked
下拉系列默认选中: selected(需先为select标签指定multiple属性)
# 提示: 除了按钮没有必要指定label其他标签都可以被label包裹.
label第一种写法: 直接将input框写在label内
label第二种写法: 通过id链接即可 无序嵌套(补充: input不和label关联也可以)
# input标签:
text 普通文本
input[type=text][name]
password 密文文本
input[type=password][name]
date 提供时间日期选择
input[type=date][name][value]
提示: 当你没有指定按钮的value属性的值, 不同的浏览器打开之后可能宣染的按钮展示的文本内容不一致
submit 提交按钮. 用来触发form表单提交数据的动作
input[type=submit][value]
button 普通按钮. 本身没有任何的功能, 但是它是最有用的, 学完js之后就可以给它自定义各种功能
input[type=button][value]
reset 重置按钮. 重置
input[type=reset][value]
radio 单选框 默认选中要加checked='checked', 当标签的属性名和属性值一样的时候可以简写成checked(注意: 每个单选框都需要为指定相同的name属性的值, 才能达到单选的目的)
input[type=radio][name][value]
checkbox 多选框
input[type=checkbox][name][value]
file 获取文件.
input[type=file][name][value]
hidden 隐藏当前input框. 只是不显示在页面中, 后台还存在着.(钓鱼网站)
input[hidden][name][value]
# textarea文本域标签
textarea[name]
# button 按钮标签
button[name][value]
# select标签:
下拉单选
select[name]>option[value]
下拉多选:
select[name][multiple]>option[value]
下拉选项组单选
select[name]>(optgroup[label]>option[value])+(optgroup[label]>option[value])
下拉选项组多选
select[name][multiple]>(optgroup[label]>option[value])+(optgroup[label]>option[value])
!!!注意!!!: 触发form表单提交功能的按钮有2种: button input[type=submit]
CSS介绍
CSS（Cascading Style Sheet，层叠样式表)定义如何显示HTML元素。
当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染）
CSS语法
1. 注释
注释是代码之母
/*单行注释*/
/*
多行注释1
多行注释2
多行注释3
*/
通常我们在写css样式的时候也会用注释来划定样式区域(因为HTML代码多所以对呀的css代码也会很多)
/*这是博客园首页的css样式文件*/
/*顶部导航条样式*/
...
/*左侧菜单栏样式*/
...
/*右侧菜单栏样式*/
...2. CSS样式组成
每个CSS样式由两个组成部分：选择器和声明。声明又包括属性和属性值。每个声明之后用分号结束
选择器 {
属性1:值1;
属性2:值2;
属性3:值3;
属性4:值4;
}
CSS的三种引入方式
/*1. style标签内部直接书写*/
/*2. link标签引入外部css文件(最正规的方式 解耦合)*/
/*3. 行内式(一般不用)*/
老板好 要上课吗?
CSS选择器
1. 基本选择器
注意：样式类名不要用数字开头（有的浏览器不认）。标签中的class属性如果有多个，要用空格分隔。
/*id选择器: 找到id是d1的标签 将文本颜色变成绿黄色*/
#d1 {
color: greenyellow;
}
/*类选择器: 找到class值里面包含c1的标签*/
.c1 {
color: red;
}
/*元素(标签)选择器: 找到所有的span标签*/
span {
color: red;
}
/*通配符选择器: 将html页面上所有的标签全部找到*/
* {
color: green;
}- 示例代码
div
div里面得p
div里面得span
ppp
span111
span2222. 组合选择器
/*后代选择器: 所有被div包裹的标签中的span*/
div span {
color: red;
}
/*儿子选择器: 被div包裹的第一层所有的span标签*/
div>span {
color: red
}
/*毗邻选择器: div同级别紧挨着的下面的第一个span*/
div+span {
color: green;
}
/*弟弟选择器: div同级别下面所有的span*/
div~span {
color: navajowhite;
}- 示例代码
span1
span2
div
div p
div p
div p span
span
span
span
span