一、表单
input
应用场景:登录 注册 搜索 --- 用户输入 input
他们的共同点是用户输入之后才可以进行
表单的作用:供用户输入
表单域 form action:提交地址 method提交方法get和post
5.0之前没有placeholder新增功能,之前是value(提示的文字需要用户删除,而且字的颜色也没有变暗)实现的
<input> -- type属性取值不同则功能不同
文本框:text
密码框:password
单选框:radio(实现单选功能)
复选框:checkbox
上传文件:file
提交按钮:submit
普通按钮:button
重置按钮:reset
文本域:textarea标签
下拉菜单:select嵌套option 默认选中selected
小拓展知识:
表单提交中get和post方式的区别有5点 1.get是从服务器上获取数据,post是向服务器传送数据。 2.get是把参数数据 队列加到提交表单的ACTION属性所指的URL中,值和表单内各个字段一一对应,在URL中可以看到。post是通过HTTPpost机制,将表单内各 个字段与其内容放置在HTML HEADER内一起传送到ACTION属性所指的URL地址。用户看不到这个过程。 3.对于get方式,服务器端用Request.QueryString获取变量的值,对于post方式,服务器端用Request.Form获取提交的数据。 4.get传送的数据量较小,不能大于2KB。post传送的数据量较大,一般被默认为不受限制。但理论上,IIS4中最大量为80KB,IIS5中为100KB。 5.get安全性非常低,post安全性较高。
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
textarea{
/* 禁用拖拽功能 */
resize: none;
width: 500px;
height: 300px;
/* 去掉焦点框 */
outline: none;
}
</style>
</head>
<body>
<!-- 将来发送数据 收集好之后再发送 -- 收集功能的是form标签 form:表单 表单域 -->
<form action="提交地址" method="post">
<!-- form里面的功能标签叫表单控件 -->
<!-- placeholder="请输入用户名" 是html5.0新增功能 -->
<!-- **** 获取用户输入的内容就是获取value属性的值而已 -->
文本框:<input type="text" value="设置会员名">
<br><br>
密码框:<input type="password">
<br><br>
单选框:<input type="radio" name="sex" value="man" id="nan"><label for="nan">男</label> <label><input type="radio" name="sex" value="woman" checked>女</label>
<!--
单选功能:input 加name=“” 取值相同:
只要表单就是为了提交数据:应该是键值对的方式提交,值是vlaue属性值,key是name属性值
sex=man
1.sex=man
2.sex=woman 后边的键值对覆盖前面的键值对所以加name保证取值一样可以实现单选功能
-->
<br><br>
复选框: <input type="checkbox" checked>读书 <input type="checkbox">旅游 <input type="checkbox">打游戏
<br><br>
上传文件:<input type="file">
<br><br>
文本域:
<textarea></textarea>
<br><br>
下拉菜单:
<select>
<option>北京</option>
<option selected>上海</option>
<option>广州</option>
</select>
<br><br>
<input type="submit" value="同意并注册">
<input type="button" value="普通按钮">
<input type="reset">
<button>按钮</button>
</form>
</body>
</html>
二、表格
知道有这么个东西,碰到的时候能认识就好了,用的少,只在数据统计的时候用。
国内2005年互联网网站大量改版:从表格布局改版成div布局
表格布局:浏览器读取所有代码显示效果
Div布局:浏览器读取一部分代码则显示一部分效果
现在表格用来做网站的 数据统计区域
表格 table
行 tr
单元格 td
表头 th
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<!--**** 结构:table嵌套tr,tr嵌套td,table是表格,tr是行,td是单元格 th是表头 -->
<table border="1">
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
</body>
</html>
三、常用特殊效果小标签
功能 | 强调语义 | 普通语义 |
---|---|---|
倾斜 | em | i |
下划线 | ins | u |
加粗 | strong | b |
删除线 | del | s |
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
b{
font-size: 40px;
color: blue;
}
</style>
</head>
<body>
<b>加粗</b>
<i>倾斜</i>
<u>下划线</u>
<s>删除线</s>
<!-- 所有标签都是有语义的 :强调语义 普通语义 -->
<strong>python</strong>
<em>emem</em>
<ins>ins</ins>
<del>del</del>
</body>
</html>
四、*选择器
选择器就是找标签的方法,找到之后让它去执行css。
组选择器写标签的时候顺序无所谓
1、层级选择器/后代选择器 -- 空格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/* 空格父子级就是层级选择器:最终选中子级执行键值对 */
ul li{
color: red;
}
</style>
</head>
<body>
<ul>
<li>ul里面li</li>
<p>pppppp</p>
</ul>
<ol>
<li>ol里面的li</li>
</ol>
</body>
</html>
2、组选择器 – 逗号
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/* body{
color: red;
} */
/* 通配符选择器:选所有标签 */
/* *{
color: green;
} */
/* 逗号表示组选择器 */
h1,span,div,p{
color: blue;
}
</style>
</head>
<body>
<h1>logo</h1>
<span>span</span>
<p>pppp</p>
<div>divdiv</div>
</body>
</html>
3、伪类选择器: 以冒号开头 :hover -- 表示鼠标滑过 鼠标悬停
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- <style>
a:link{
/* 单击前 */
color: red;
}
a:visited{
/* 单击后 */
color: green;
}
a:hover{
/* 鼠标悬停 */
color: blue;
}
a:active{
/* 点击时 */
color: pink;
}
</style> -->
<style>
a{
color: red;
}
a:hover{
color: green;
}
</style>
</head>
<body>
<!-- 伪类表示状态 超链接用到几率多 当什么什么时候 -->
<!-- 伪类以冒号开头,后面紧跟一个w3c定义好的表示伪类的单词 -->
<a href="#">东晓</a>
</body>
</html>
五、**盒子模型
5.1 布局
边框线:border:粗细 颜色 线条种类;
内边距 padding
外边距:margin
margin和padding的设置方法完全一样,可以英文单词,可以四值写法。
加border和padding会撑大盒子:
占位尺寸:padding + border + content
手动写宽和高是css2.0上的作法;
css3.0上box-sizing:border-box
为了在形式上显示div的一个换行后的占位效果,外边距有可能显示的很多,其实没变。
5.2 边框线:
单独设置单独方向的边框线border-方向英文单词 top bottom left right
Solid – 实线
dashed – 虚线
dotted – 点线
5.2 padding-英文单词
5.3 padding多值写法
1:四个方向相同
2:上下 左右
3:上 左右 下
4: 上 右 下 左
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div{
width: 300px;
height: 200px;
background: #ccc;
/* border 多值写法,各个值用空格隔开即可,值不分先后顺序 */
/* border: 粗细 颜色 线条种类; */
border: 1px red solid;
/* 内边距:边和内容之间的距离 */
padding: 20px;
/* css3.0 启动盒子内减模式的属性 */
box-sizing: border-box;
/* 外边距 margin */
margin: 50px;
}
</style>
</head>
<body>
<!-- 比喻句 标签 和 生活盒子: 快递盒:产品 纸箱子 填充物 -->
<div>女装</div>
sdfasdfasdf
</body>
</html>
盒子模型详解:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div{
width: 200px;
height: 200px;
background: pink;
}
.box1{
/* border-方向英文单词 top bottom left right */
border-top:red 1px solid;
border-right: 5px green dashed;
border-bottom: 5px blue dotted;
}
.box2{
padding-top: 10px;
padding-right: 20px;
padding-bottom: 40px;
padding-left: 80px;
}
/* padding可以和border一样取多值写法?最多写几个值 */
.box3{
/* 4值: 上 右 下 左 -- 从上顺时针一圈 */
/* padding: 10px 20px 40px 80px; */
/* 3值: 上 左右 下 */
/* padding: 10px 40px 80px; */
/* 2值: 上下 左右 */
padding: 10px 80px;
}
</style>
</head>
<body>
<!-- border -->
<div class="box1">box</div>
<br><br>
<!-- padding -->
<div class="box2">box</div>
<br><br>
<div class="box3">box</div>
</body>
</html>
版心居中:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div{
width: 1000px;
height: 300px;
background: green;
/* 版心居中保证margin左右方向一样 */
margin: 0 auto;
}
</style>
</head>
<body>
<!-- 版心 居中:水平居中 1000 -1200 -->
<!-- 版心:网页真实有效内容的标签 -->
<div></div>
</body>
</html>
css初始化:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
blockquote, body, button, dd, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, hr, input, legend, li, ol, p, pre, td, textarea, th, ul{
margin: 0;
padding: 0;
}
ul,ol{
/* 去掉列表符号 列表样式 项目符号 */
list-style:none;
}
</style>
</head>
<body>
<!-- css reset -->
<h1>logo</h1>
<p>ppppp</p>
<div>div</div>
<ul>
<li>lili</li>
</ul>
</body>
</html>
六、overflow属性
解决内容查出父级如何显示的问题
hidden 溢出隐藏
auto 溢出滚动,超出了才滚动
scroll 溢出滚动,无论是否超出都滚动
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div{
width: 300px;
height: 200px;
background: pink;
/* 默认值 超出显示 */
/* overflow: visible; */
/* **** 超出隐藏 溢出隐藏 */
/* overflow: hidden; */
/****** 溢出滚动:如果内容超出则加滚动条 */
overflow: auto;
/* 溢出滚动:无论内容是否超出都显示滚动条的位置 */
/* overflow: scroll; */
}
</style>
</head>
<body>
<div>解决内容查出父级</div>
</body>
</html>
七、display属性
转换元素类型:换行 – 块标签 不换行 – 行内
标签 == 标记 == 元素
块:换行,宽高生效,如果不写宽度占父级100% block
行内:不换行,宽高不生效,尺寸和内容一样大 inline
行内块:不换行,宽高生效 inline-block
Display:none 隐藏 配合js
元素类型 == 标准流/文档流
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div{
width: 200px;
height: 200px;
background: green;
/* display: inline; */
/* display: inline-block; */
/* 不占位隐藏 */
/* display: none; */
visibility: hidden;
}
span{
width: 500px;
height: 300px;
background: blue;
display: block;
}
/*
不换行的标签 -- 行内:书写宽高不生效;尺寸和内容一样大
换行的标签 -- 块:书写宽度高度生效,不写宽度,宽度和父级一样大
行内块 :宽度高度生效,在一行显示
拓展:浏览器执行 行内和行内块标签的时候当做文字处理,如果是文字之间敲空格或回车会识别一个空格的距离
*/
</style>
</head>
<body>
<div>div</div>
<div>div</div>
<span>span</span>
<span>span</span>
</body>
</html>
八、**浮动
浮动:让块标签在一行没有间距的显示
None 默认值
Left 标签都左侧对齐显示
Right 右侧对齐显示
浮动的时候就是元素不再占用标准流的位置,但是会占用上层位置,就好像浮起来一样。
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box1{
width: 100px;
height: 100px;
background: red;
float: right;
}
.box2{
width: 200px;
height: 200px;
background: green;
float: right;
}
.box3{
width: 300px;
height: 300px;
background: blue;
float: right;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
九、**定位
让任意的标签叠加显示
Static – 静态定位 默认值
相对 relative
<style>
div{
border: 1px solid red;
position: relative;
left: 200px;
top: 200px;
}
/*
特点:
1、参照物:它自己原来的位置
2、占位
3、不改变元素类型特点
*/
</style>
绝对 absolute
<style>
div{
border: 1px solid red;
width: 500px;
position: absolute;
left: 0;
top: 100px;
}
/*
特点:
1、参照物:以最近的已经定位的父级为参照物,如果没有这样的父级则以浏览器为参照物
2、不占位脱离标准流
3、元素类型特点:行内块
*/
固定 fixed
<style>
div{
border: 1px solid red;
width: 500px;
position: fixed;
left: 0;
top: 0;
}
/*
特点:
1、参照物:浏览器
2、不占位脱离标准流
3、元素类型特点:行内块
*/
</style>
改变定位标签的位置:配合偏移量属性 left top bottom right
K:v;
Left:xx;
占位:就是我离开了原来的位置,但是原来的位置还给我留着。
固定定位和绝对定位最大的区别就是,设置了固定定位的元素不变化,但是网页其他内容会动。就好像网站里面,那些讨人厌的小广告,好像粘在了屏幕上一样,一直不改变位置。
只要是以浏览器为参照物,那么屏幕的分辨率就会干扰位置。
定位的应用:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/*
1、****验证子级绝对父级相对
2、****父级绝对导致居中不生效 -- 绝对定位标签水平垂直居中
3、定位的标签z-index改变显示顺序
4、opacity测试内容和背景透明
5、background只透明背景
*/
.father{
width: 500px;
height: 300px;
border: 1px solid black;
margin: 0 auto;
/* position: relative; */
position: absolute; /* 绝对的定位元素类型具备行内块特点:一行显示多个 auto无法进行计算*/
left: 50%;
margin-left: -250px;
top: 50%;
margin-top: -150px;
}
.father div{
width: 100px;
height: 50px;
}
.son1{
background: green;
position: absolute;
left: 50px;
top: 30px;
z-index: 9;
}
.son2{
background: pink;
position: absolute;
left: 100px;
top: 50px;
z-index: 10;
/* opacity: 0.3; */
background: rgba(0,0,0,0.5);
}
</style>
</head>
<body>
<!-- 工作中:相对和绝对配合使用: 子级绝对,父级相对 -->
<!-- 定位默认后来者居上 z-index,取值是整数,取值越大显示顺序越靠上 -->
<!-- 设置透明度 完全透明 完全不透明 半透明 -->
<!-- opacity:0-1闭区间 内容和背景一起透明 -->
<!-- 只透明背景:background:rgba(1,2,3,4); r==red g==green b==blue a==alpha 0-255 -->
<div class="father">
<div class="son1">son1</div>
<div class="son2">son2</div>
</div>
</body>
</html>
十、小知识点