2 前端表格表单 css介绍

最新推荐文章于 2020-12-30 13:12:03 发布

Jianhao92

最新推荐文章于 2020-12-30 13:12:03 发布

阅读量237

点赞数

分类专栏：前端学习文章标签： html css

本文链接：https://blog.csdn.net/qq_36565509/article/details/106078916

版权

前端学习专栏收录该内容

9 篇文章 0 订阅

订阅专栏

前端

1 表格标签

<table>
    <thead>
        <tr>
        	<th>在thead->tr->th里面</th>
            <td>在thead->tr->td里面</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>在tbody->tr->th里面</th>
            <td>在tbody->tr->td里面</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th>在tfoot->tr->th里面</th>
            <td>在tfoot->tr->td里面</td>
        </tr>
    </tfoot>
</table>

table表示一个表格，
thead - 表头区，tbody - 表单区，tfoot - 表尾区
tr表示一行，th和td表示每个单元格，其中th是加粗的文本，一般用于标题。

重要属性
table
border：表格边框宽度，像素；
cellpadding：边框与单元格的距离，像素、百分比；
cellspacing：单元格边框宽度，像素、百分比。

合并单元格
colspan：跨列，由左向右扩展，数字；
rowspan：跨行，由上向下扩展，数字。
一般设置于td标签中。

2 表单标签

2.1 form标签

表单标签form用于获取用户的数据并发送给后端，包括用户输入的信息，选择的选项，上传的文件等。
参数
action：说明数据提交的后端路径，即提交表单时向哪个服务端发送表单数据。

未指定，默认向当前页面所在的url提交数据；
全路径，向指定的路径提交数据；
只写路径后缀，自动识别当前服务端的ip地址和端口号，并进行拼接。
例如，action=’/index/’，自动拼接为：host:port/index/

method：控制请求方式，默认方式为get，可以设置为post等。

2.2 input标签

2.2.1 简介

input标签用于让用户输入数据。
一般与label标签一起使用，label标签的属性for与input标签的id相关联。

<form>
	<label for="username">username: </label>
	<input id="username" type="text" name="username">
	<br>
	<label for="password">password: </label>
	<input id="password" type="password" name="password">
</form>

所有用于获取用户输入的标签都需要name属性，name属性类似于字典的键；
当标签的属性名与属性值相同时，可以只写属性名，例如checked。

2.2.2 input标签类型

input标签类型由其type属性决定。

text

<input id="username" type="text" name="username" placeholder="Please input your name.">

password

<input id="password" type="password" name="password">

date

<input id="birthday" type="date" name="birthday">

按钮
可以通过value属性设定按钮上显示的文字。

提交按钮 submit
提交后会刷新页面

<input id="submitBtn" type="submit" value="提交">

重置按钮 reset

<input id="resetBtn" type="reset" value="重置">

普通按钮 button
本身没有任何内容

<input id="btn" type="button" value="按钮">

可以触发表单提交动作的按钮

<input id="submitBtn" type="submit" value="提交">
<button>点击</button>

单选按钮

<input type="radio" name="sex" value="male" checked />Male
<input type="radio" name="sex" value="female" />Female

复选框

<input type="checkbox" name="hobbies" value="shopping" checked />Shopping
<input type="checkbox" name="hobbies" value="reading" />Reading

上传文件

<input type="file" name="file" />
<input type="file" name="files" multiple />

隐藏

<input type="hidden" />

2.3 select标签

下拉列表
默认单选

<select name="carBrand">
    <option value ="volvo" selected>Volvo</option>
    <option value ="saab">Saab</option>
    <option value="audi">Audi</option>
</select>

多选 multiple

<p>多选时使用Ctrl键或Shift键</p>
<select name="carBrand" multiple>
    <option value ="volvo" selected>Volvo</option>
    <option value ="saab" selected>Saab</option>
    <option value="audi">Audi</option>
</select>

下拉框组标签
optgroup标签的label属性为选项添加不可选择的组名称。

<select name="number" size="5" multiple>
    <optgroup label="一">
        <option value="1.1">1.1</option>
        <option value="1.2">1.2</option>
    </optgroup>
    <optgroup label="二">
    　　<option value="2.1">2.1</option>
    　　<option value="2.2">2.2</option>
    </optgroup>
</select>

2.4 多行文本框

<textarea name="textarea" cols="10" rows="30" />

2.5 disable与readonly

disable 禁用
readonly 只读
当表单以post或get方式提交时，设置为disable的标签的值不会被传递，而设置为readonly的标签的值会被传递出去。

3 验证form表单提交数据

from flask import Flask, request

app = Flask(__name__)

@app.route('/index/', methods=['GET', 'POST'])
def index():
    # 获取form表单提交的非文件数据。
    print(request.form)
    # ImmutableMultiDict([('username', 'abc'), ('password', 'abc'), ('birthday', '2020-05-01'), ('sex', 'male'), ('file', '书.txt')])

    # 获取文件数据
    print(request.files)
    # ImmutableMultiDict([('file', < FileStorage: '书.txt' ('text/plain') >)])
    file_obj = request.files.get('file')
    print(file_obj.name)  # file
    file_obj.save(file_obj.name)

    return 'OK'

app.run()

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<form action="http://127.0.0.1:5000/index" method="post" enctype="multipart/form-data">
		username: <input id="username" type="text" name="username">
		<br>
		password: <input id="password" type="password" name="password">
		<br>
		birthday: <input id="birthday" type="date" name="birthday">
		<br>
		sex:
		<input type="radio" name="sex" value="male" checked />Male
		<input type="radio" name="sex" value="female" />Female
		<br>
		<input type="file" name="file" />
		<br>
		<input id="submitBtn" type="submit" value="提交">
	</form>
</form>
</body>
</html>

form表单默认提交方式是get，数据直接写在url后部。
可以指定form标签的属性method。
form表单如果需要提交文件，需要指定属性method=“post” enctype=“multipart/form-data”。
enctype是数据提交的编码格式，默认是urlencoded，即只支持文本数据，而multipart/form-data支持文本数据和文件数据。

4 css介绍

css，层叠样式表，为html标签添加样式。

4.1 注释

/* 被注释的内容 */

通常在写css样式时会用注释来划定样式区域，用于维护代码。

/*这是首页的css样式文件*/
/*顶部导航条样式*/
...
/*左侧菜单栏样式*/
...
/*右侧菜单栏样式*/
...

4.2 语法结构

选择器 {
  属性1: 值1;
  属性2: 值2;
  属性3: 值3;
  属性4: 值4;
}

4.3 三种引入方式

style标签内部直接书写

<style>
	h1 {
        color: green;
    }
</style>

link标签引入外部css文件(最正规的方式，解耦合)

<link rel="stylesheet" href="layout.css">

行内式

<h1 style="color: green">Hello</h1>

4.4 CSS选择器

4.4.1 基本选择器

id选择器
选择 id=“firstname” 的所有元素。

#firstname

类选择器
选择 class=“intro” 的所有元素。

.intro

元素(标签)选择器
选择所有 p 元素。

通用选择器
选择所有元素。

4.4.2 组合选择器

后代选择器
选择 div 元素内部的所有 p 元素。

div p

儿子选择器
选择父元素为 div 元素的所有 p 元素（div 元素内部第一层的所有 p 元素）。

div>p

毗邻选择器
选择紧接在 div 元素之后（同级别，中间不能有其它标签）的所有 p 元素。

div+p

弟弟选择器
选择在 div 元素之后（同级别，不一定紧接）的所有 p 元素。

div~p

4.4.3 属性选择器

以中括号 [ ] 作为标志。

[attribute]
选择带有 target 属性所有元素。

[target]

[attribute=value]
选择 target=“blank” 的所有元素。

[target="blank"]

element[attribute=value]
选择 target=“blank” 的所有 p 元素。

p[target="blank"]

4.4.4 分组与嵌套

/* 分组 逗号表示并列关系 */
p, div, span {
	color: red;
}

/* 嵌套 不同类型的选择器可以并列共用一套css样式 */
#d1, .c1, span {
	color: red;
}

4.4.5 伪类选择器

/* a标签访问前的状态 */
a:link

/* 鼠标悬浮态 */
a:hover

/* 激活态 鼠标按住不松开的状态 */
a:active

/* 访问后的状态 */
a:visited

/* input输入框获取焦点 */
input:focus

4.4.6 伪元素选择器

/* 第一个字符 */
p:first-leter

/* 通过CSS添加文本内容，无法选中。 */
p:before {
	content: "Hello";
	color: red;
}
p:after {
	content: "Bye";
	color: red;
}

伪元素选择器before和after可以用于清除浮动带来的影响，解决父标签塌陷问题。

4.5 选择器优先级

选择器相同，书写顺序不同。
就近原则：谁离标签近就听谁的。
一般行内式优先级最高，link标签引入方式和style标签书写方式的优先级取决于谁离标签近。
选择器不同
选择器选择标签的精确度越高，其优先级就越高。
行内式 > id选择器 > 类选择器 > 标签选择器
!important修饰的样式的优先级最高，不推荐。

div {
	color: red !important;
}

5 知识回顾

5.1 ASCII, GBK, utf-8的区别

ASCII
主要用于显示英语以及其它部分语言，一共包括128个字符，
一个ASCII字符对应8位二进制数(1 Bytes)。
GBK
汉字编码扩展规范
一个GBK字符对应16位二进制数 (2 Bytes)。
utf-8
针对Unicode的一种可变长度字符编码，
一个utf-8字符对应1 ~ 3 Bytes。

5.2 实现m与n值交换

m = 10
n = 5

# 1. 中间变量temp
temp = m
m = n
n = temp

# 2. 元组
m, n = n, m

# 3. 加减运算
m = m + n
n = m - n
m = m - n

# 4. 异或运算
# 异或运算先将十进制数转化为二进制数，
# 然后依次按位比较两个二进制数的每一位，
# 相同为0，不同为1。
m = m ^ n
n = m ^ n
m = m ^ n

5.3 什么是深浅拷贝

以拷贝列表为例，
浅拷贝：
把原列表存储的第一层内存地址完全复制一份放入新的内存空间中，再将这个新内存空间的地址交给新列表的变量名，这里不区分可变数据类型和不可变数据类型。

深拷贝
在深拷贝中，列表内部的浅层次数据和深层次数据都会被拷贝，都会在新的内存空间中进行存储。
深拷贝过程中会区分可变数据类型和不可变数据类型。
对于不可变数据类型，将内存地址直接拷贝到新列表中去；
对于可变数据类型，会创建新的内存空间(容器)去存储其子元素。

5.4 什么是http协议

HTTP协议，超文本传输协议，用来规定服务端与浏览器之间进行数据交换的格式。

基于请求-响应的模式；
基于TCP/IP协议作用于应用层之上的协议；
无状态；
无/短连接。

Jianhao92

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
2 前端表格表单 css介绍

前端1 表格标签<table> <thead> <tr> <th>在thead->tr->th里面</th> <td>在thead->tr->td里面</td> </tr> </thead> <tbody> <tr>
复制链接

扫一扫