标签：rowspan tomato racket amp 展示 支持 ppp input框 tip
表格标签
<table>
<thead>
<tr> 一个tr就是一行
<th></th> 表头里面建议使用th加粗文本
</tr>
</thead> 表头
<tbody>
<tr>
<td></td> 表单里面的建议直接用td即可
</tr>
</tbody> 表单
</table>
?
补充:
table有一个border属性可以加一个比较丑的边框
针对tr可以设置rowspan、colspan
form表单
# 能够获取用户数据并且发送到后端
<form action=‘‘ method=‘‘ enctype=‘‘></form>
?
"""
action 控制数据的提交路径
1.不写默认朝当前页面所在的地址提交
2.写全路径
3.只写后缀 /index/ 能够自动补全当前页面所载的后端服务器ip:port(暂时不考虑)
?
method 控制请求方式
默认是get请求
也可以携带数据 但是数据是直接破解在url后面的 不安全并且大小有限制
url?username=jason&password=123
可以修改为post请求
携带的数据放在请求体里面的
?
enctype 控制数据的编码方式
默认是urlencoded 只能发送普通的文本 不能发送文件
如果你要发送文件 必须改为 formdata
发送文件必须要修改的两个参数
method = ‘post‘
enctype=‘...formdata‘
"""
input标签 获取用户数据的(输入 选择 上传...)
<input type=‘‘></input>
type可以书写的类型
text 普通文本
password 展示密文
date 日期
radio 单选
默认选择可以用checked(属性名和属性值一样的时候就可以简写)
checkbox 多选
默认选择可以用checked
file 获取文件
了解:可以加multiple 支持传多个文件
submit 触发form表单提交动作
button 什么功能都没有 就是一个普通的按钮
reset 重置按钮
?
select标签 下拉框 默认是单选 可以加multiple成多选
一个个下拉框选项是一个个的option标签
option标签默认选中可以加selected
<select>
<option value=‘‘>111</option>
<option value=‘‘>222</option>
<option value=‘‘ selected>333</option>
</select>
textarea标签 获取大段文本内容
?
label标签 给input加上对于的注释信息 不写其实也没有关系
input写在lable里面
label的for关联input的id值 可以不嵌套
"""
获取用户数据的标签都应该都name属性
因为你需要给后端发送数据并且需要标明数据到底表示什么
name 字典的key
value 字典的value(用户数据)
?
需要用户选择的标签 你需要自己加上value值
radio
checkbox
option
ps:如果你给获取用户输入的标签加了value值 那么就类似于默认值
"""
?
ps:hidden、disable、readonly、placeholder
# 触发form表单提交数据的两种方式
type=submit
button按钮
flask框架
代码目前你不需要去研究 我们写这个只是为了验证form表单的功能而已
css
# 注释
/**/ 由于前端代码都笔记多并且没有什么规律 所以我们都会利用注释来帮助我们维护代码
?
# 语法结构
选择器 {
属性1:值;
属性2:值;
属性3:值;
}
?
# 选择器
1.基本选择器
id选择器
#d1 {}
类选择器
.c1 {}
标签选择器
div {}
通用选择器
* {}
p#d1.c1 <p id="d1" class="c1"></p> emmet插件
?
2.组合选择器
我们将前端标签的嵌套定义为父亲 儿子 后代 兄弟等等关系
后代选择器
div p {} 只要是div内部的p都拿到
儿子选择器
div>p {} 只拿内部第一层级的p
毗邻选择器
div+p {} 紧挨着我的同级下一个
弟弟选择器
div~p {} 同级别下面所有的p
?
3.属性选择器 []
[username]
[username=‘jason‘]
input[username=‘jason‘]
ps:标签既可以有默认的书写 id class...
还可以有自定义的书写并且支持多个
<p id=‘d1‘ username=‘jason‘></p>
分组与嵌套
伪类选择器
伪元素选择器
css属性相关(操作标签样式)
层贴样式表:就是给HTML标签添加样式的，让它变的更加的好看
# 注释
/*单行注释*/
/*
多行注释1
多行注释2
多行注释3
*/
通常我们在写css样式的时候也会用注释来划定样式区域(因为HTML代码多所以对呀的css代码也会很多)
/*这是博客园首页的css样式文件*/
/*顶部导航条样式*/
...
/*左侧菜单栏样式*/
...
/*右侧菜单栏样式*/
...
# css的语法结构
选择器 {
属性1:值1;
属性2:值2;
属性3:值3;
属性4:值4;
}
# css的三种引入方式
1.style标签内部直接书写(为了教学演示方便我们用第一种)
<style>
h1 {
color: burlywood;
}
</style>
2.link标签引入外部css文件(最正规的方式 解耦合)
<link rel="stylesheet" href="mycss.css">
3.行内式(一般不用)
<h1 style="color: green">老板好 要上课吗?</h1>
"""
css的学习流程
1.先学如何查找标签
css查找标签的方式你一定要学会
因为后面所有的框架封装的查找语句都是基于css来的
css选择器很简单很好学不要有压力!!!
2.之后再学如何添加样式
"""
# id选择器
# 类选择器
# 元素/标签选择器
# 通用选择器
<style>
/*id选择器*/
/*#d1 { !*找到id是d1的标签 将文本颜色变成绿黄色*!*/
/* color: greenyellow;*/
/*}*/
/*类选择器*/
/*.c1 { !*找到class值里面包含c1的标签*!*/
/* color: red;*/
/*}*/
/*元素(标签)选择器*/
/*span { !*找到所有的span标签*!*/
/* color: red;*/
/*}*/
/*通用选择器*/
/** { !*将html页面上所有的标签全部找到*!*/
/* color: green;*/
/*}*/
</style>
"""
在前端 我们将标签的嵌套用亲戚关系来表述层级
<div>div
<p>div p</p>
<p>div p
<span>div p span</span>
</p>
<span>span</span>
<span>span</span>
</div>
div里面的p span都是div的后代
p是div的儿子
p里面的span是p的儿子 是div的孙子
div是p的父亲
...
"""
# 后代选择器
# 儿子选择器
# 毗邻选择器
# 弟弟选择器
/*后代选择器*/
/*div span {*/
/* color: red;*/
/*}*/
/*儿子选择器*/
/*div>span {*/
/* color: red;*/
/*}*/
/*毗邻选择器*/
/*div+span { !*同级别紧挨着的下面的第一个*!*/
/* color: aqua;*/
/*}*/
/*弟弟选择器*/
div~span { /*同级别下面所有的span*/
color: red;
}
"""
1 含有某个属性
2 含有某个属性并且有某个值
3 含有某个属性并且有某个值的某个标签
"""
# 属性选择器是以[]作为标志的
/*[username] { !*将所有含有属性名是username的标签背景色改为红色*!*/
/* background-color: red;*/
/*}*/
/*[username=‘jason‘] { !*找到所有属性名是username并且属性值是jason的标签*!*/
/* background-color: orange;*/
/*}*/
/*input[username=‘jason‘] { !*找到所有属性名是username并且属性值是jason的input标签*!*/
/* background-color: wheat;*/
/*}*/
div,p,span { /*逗号表示并列关系*/
color: yellow;
}
#d1,.c1,span {
color: orange;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
background-color: black;
}
a:link { /*访问之前的状态*/
color: red;
}
a:hover { /*需要记住*/
color: aqua; /*鼠标悬浮态*/
}
a:active {
color: black; /*鼠标点击不松开的状态 激活态*/
}
a:visited {
color: darkgray; /*访问之后的状态*/
}
p {
color: darkgray;
font-size: 48px;
}
p:hover {
color: white;
}
input:focus { /*input框获取焦点(鼠标点了input框)*/
background-color: red;
}
</style>
</head>
<body>
<a href="https://www.jd.com/">小轩在不在?</a>
<p>点我有你好看哦</p>
<input type="text">
</body>
</html>
p:first-letter {
font-size: 48px;
color: orange;
}
p:before { /*在文本开头 同css添加内容*/
content: ‘你说的对‘;
color: blue;
}
p:after {
content: ‘雨露均沾‘;
color: orange;
}
ps:before和after通常都是用来清除浮动带来的影响:父标签塌陷的问题(后面马上讲)
"""
id选择器
类选择器
标签选择器
行内式
"""
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> /* 1.选择器相同 书写顺序不同 就近原则:谁离标签更近就听谁的 2.选择器不同 ... 行内 > id选择器 > 类选择器 > 标签选择器 精确度越高越有效 */ #d1 { color: aqua; } /*.c1 {*/ /* color: orange;*/ /*}*/ /*p {*/ /* color: red;*/ /*}*/ </style> <!-- <link rel="stylesheet" href="mycss1.css">--> </head> <body> <p id="d1" class="c1" style="color: blue">贤妻果然很识趣，有前途~</p> </body> </html>
<style> p { background-color: red; height: 200px; width: 400px; } span { background-color: green; height: 200px; width: 400px; /*行内标签无法设置长宽 就算你写了 也不会生效*/ } </style>
p {
/*font-family: "Arial Black","微软雅黑","..."; !*第一个不生效就用后面的 写多个备用*!*/
/*font-size: 24px; !*字体大小*!*/
/*font-weight: inherit; !*bolder lighter 100~900 inherit继承父元素的粗细值*!*/
/*color: red; !*直接写颜色英文*!*/
/*color: #ee762e; !*颜色编号*!*/
/*color: rgb(128,23,45); !*三基色 数字 范围0-255*!*/
/*color: rgba(23, 128, 91, 0.9); !*第四个参数是颜色的透明度 范围是0-1*!*/
/*当你想要一些颜色的时候 可以利用现成的工具
1 pycharm提供的取色器
2 qq或者微信截图功能
也可以多软件结合使用
*/
}
p {
/*text-align: center; !*居中*!*/
/*text-align: right;*/
/*text-align: left;*/
/*text-align: justify; !*两端对齐*!*/
/*text-decoration: underline;*/
/*text-decoration: overline;*/
/*text-decoration: line-through;*/
/*text-decoration: none;*/
/*在html中 有很多标签渲染出来的样式效果是一样的*/
font-size: 16px;
text-indent: 32px; /*缩进32px*/
}
a {
text-decoration: none; /*主要用于给a标签去掉自带的下划线 需要掌握*/
}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> #d1 { height: 500px; background-color: red; } #d2 { height: 500px; background-color: green; } #d3 { height: 500px; background-image: url("222.png"); background-attachment: fixed; } #d4 { height: 500px; background-color: aqua; } </style> </head> <body> <div id="d1"></div> <div id="d2"></div> <div id="d3"></div> <div id="d4"></div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> p { background-color: red; border-width: 5px; border-style: solid; border-color: green; } div { /*border-left-width: 5px;*/ /*border-left-color: red;*/ /*border-left-style: dotted;*/ /*border-right-width: 10px;*/ /*border-right-color: greenyellow;*/ /*border-right-style: solid;*/ /*border-top-width: 15px;*/ /*border-top-color: deeppink;*/ /*border-top-style: dashed;*/ /*border-bottom-width: 10px;*/ /*border-bottom-color: tomato;*/ /*border-bottom-style: solid;*/ border: 3px solid red; /*三者位置可以随意写*/ } #d1 { background-color: greenyellow; height: 400px; width: 400px; border-radius: 50%; /*直接写50%即可 长宽一样就是圆 不一样就是椭圆*/ } </style> </head> <body> <p>穷人 被diss到了 哭泣.png</p> <div>妈拉个巴子,妈拉个巴子,妈拉个巴子,妈拉个巴子</div> <div id="d1"></div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> /*#d1 {*/ /* !*display: none; !*隐藏标签不展示到前端页面并且原来的位置也不再占有了 但是还存在于文档上*!*!*/ /* display: inline; !*将标签设置为行内标签的特点*!*/ /*}*/ /*#d2 {*/ /* display: inline;*/ /*}*/ /*#d1 {*/ /* display: block; !*将标签设置成块儿级标签的特点*!*/ /*}*/ /*#d2 {*/ /* display: block;*/ /*}*/ /*#d1 {*/ /* display: inline-block;*/ /*}*/ /*#d2 {*/ /* display: inline-block; !*标签即可以在一行显示又可以设置长宽*!*/ /*}*/ </style> </head> <body> <div style="display: none">div1</div> <div>div2</div> <div style="visibility: hidden">单纯的隐藏 位置还在</div> <div>div4</div> <!--<div id="d1" style="height: 100px;width: 100px;background-color: red">01</div>--> <!--<div id="d2" style="height: 100px;width: 100px;background-color: greenyellow">02</div>--> <!--<span id="d1" style="height: 100px;width: 100px;background-color: red">span</span>--> <!--<span id="d2" style="height: 100px;width: 100px;background-color: greenyellow">span</span>--> <!--<div id="d1" style="height: 100px;width: 100px;background-color: red">01</div>--> <!--<div id="d2" style="height: 100px;width: 100px;background-color: greenyellow">02</div>--> </body> </html>
"""
盒子模型
就以快递盒为例
快递盒与快递盒之间的距离(标签与标签之间的距离 margin外边距)
盒子的厚度(标签的边框 border)
盒子里面的物体到盒子的距离(内容到边框的距离 padding内边距)
物体的大小(内容 content)
如果你想要调整标签与标签之间的距离 你就可以调整margin
浏览器会自带8px的margin，一般情况下我们在写页面的时候，上来就会先将body的margin去除
"""
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> body { margin: 0; /*上下左右全是0 /*margin: 10px 20px; !* 第一个上下 第二个左右*!*/ /*margin: 10px 20px 30px; !*第一个上 第二个左右 第三个下*!*/ /*margin: 10px 20px 30px 40px; !*上 右 下 左*!*/ } /*p {*/ /* margin-left: 0;*/ /* margin-top: 0;*/ /* margin-right: 0;*/ /* margin-bottom: 0;*/ /*}*/ #d1 { margin-bottom: 50px; } #d2 { margin-top: 20px; /*不叠加 只取大的*/ } #dd { margin: 0 auto; /*只能做到标签的水平居中*/ } p { border: 3px solid red; /*padding-left: 10px;*/ /*padding-top: 20px;*/ /*padding-right: 20px;*/ /*padding-bottom: 50px;*/ /*padding: 10px;*/ /*padding: 10px 20px;*/ /*padding: 10px 20px 30px;*/ /*padding: 10px 20px 30px 40px;*/ /*规律和margin一模一样*/ } </style> </head> <body> <!-- <p style="border: 1px solid red;" id="d1">ppp</p>--> <!-- <p style="border: 1px solid orange;" id="d2">ppp</p>--> <!--<div style="border: 3px solid red;height: 400px;width: 400px">--> <!-- <div id=‘dd‘ style="border: 1px solid orange;height: 50px;width: 50px;"></div>--> <!--</div>--> <p>ppp</p> </body> </html>
"""浮动的元素 没有块儿级一说 本身多大浮起来之后就只能占多大"""
只要是设计到页面的布局一般都是用浮动来提前规划好
<style> body { margin: 0; } #d1 { height: 200px; width: 200px; background-color: red; float: left; /*浮动 浮到空中往左飘*/ } #d2 { height: 200px; width: 200px; background-color: greenyellow; float: right; /*浮动 浮到空中往右飘*/ } </style>
标签：rowspan tomato racket amp 展示 支持 ppp input框 tip
原文地址：https://www.cnblogs.com/lucky-cat233/p/12877236.html
