2019.4.25 表格表单与HTML5 && CSS3

@

目录

• 表格
  • 标签
  • 属性
    • 表格间距离
    • 表格的内边距
    • 表格的边框
  • 样式
    • 边框合并
    • 行合并
    • 列合并
    • display
• 表单
  • 标签
  • 属性
    • 提交的网址
    • 请求方式
• input相关
  • 扩大响应范围
  • 字符
  • 密码
  • 单选框
    • name
    • value
    • 默认选中
  • 多选框
  • 文件上传
  • 下拉列表
  • 可拖拽大文本输入框
  • 表单提交
  • 表单重写
  • 数字
  • 邮箱
  • 链接
  • 颜色
  • 时间
  • 滑动条
  • 搜索框清除
  • 隐藏效果
• HTML5 && CSS3
  • H5中新增的标签
    • 音频标签
    • 视频标签
    • nav
    • header
    • section
    • main
    • aside
    • canvas
  • H5中新增的选择器
    • 属性选择器
    • 结构选择器
    • 伪类选择器
  • 过渡
  • 变换
    • 平移
    • 缩放
    • 旋转
    • 倾斜
  • 动画
    • 代码
    • 样式
    • 动画库的使用
  • 阴影
    • 文字阴影
    • 盒子阴影
  • 怪异盒模型
  • 线性渐变
  • 径向渐变

表格

标签

表格 table

行 tr

列 td

表头 th

属性

表格间距离

cellspacing

<table cellspaceing = "10 ">

表格的内边距

cellpadding

<table cellpadding = "20">

表格的边框

border

<table border = "3">

样式

边框合并

border-collapse: collapse;

行合并

<td rowspan = "2">

列合并

<td colspan = "2">

display

table中的display的值和行标签、块标签不同，值是table

表单

标签

<form>

属性

提交的网址

action

<form action = "#">

请求方式

method

<form method = "post">

常用的请求方式：
1.post
2.get

input相关

扩大响应范围

label

<label for = "users">请输入用户名：</label>
<input type = "text" id = "users">

此时点击“请输入用户名：”这几个字时，输入框input同样会获得焦点（被选中）

label中的for后面填的是input的id

字符

text

正常就这么写
<input type="text"  >

<input type="text" autofocus="autofocus" id="" value="" />
或
<input type="text" autofocus= id="" value="" />
这样是默认获取焦点

<input type="text" disabled="disabled" id="" value="" />
这样是输入框禁用

<input type="text" placeholder="姓名" value="" />
这么写是有一个姓名的占位符    

密码

password

<input type="password" >

单选框

radio

<input type="radio"/>

name

<input type="radio" name="sex" />男
<input type="radio" name="sex" >女

当n个单选框中的name属性相同时，这n个单选框被称为“一组单选框”
在一组单选框中，只能获取到一个值

value

<input type="radio" name="sex" value="0"/>男
<input type="radio" name="sex" value="0"/>女

当一组单选框中的一个被选中时，js根据id获取单选框值时获取的是属性value中的值

默认选中

checked

<input type="radio" name="sex"  checked/>男
<input type="radio" name="sex" >女
或
<input type="radio" name="sex"  checked="checked"/>男
<input type="radio" name="sex" >女

当单选框被加checked属性时，加载时默认被选中

多选框

checkbox

<input type="checkbox"/>

属性参照单选框

文件上传

file

<input type="file"/>

下拉列表

select

<select name="">
    <option value="">大连</option>
    <option value="">沈阳</option>
    <option value="">鲅鱼圈</option>
    <option value="">朝阳</option>
</select>				

如果使用
optgroup
将一组option包起来，相当于是给一组option取分组名字
<select name="">
	<optgroup label="辽宁省">
		<option value="">大连</option>
		<option value="">沈阳</option>
		<option value="">鲅鱼圈</option>
		<option value="">朝阳</option>
	</optgroup>
	<optgroup label="黑龙江">
		<option value="">哈尔滨</option>
		<option value="">齐齐哈尔</option>
		<option value="">大庆</option>
		<option value="">五大连池阳</option>
	</optgroup>
</select>

可拖拽大文本输入框

textarea

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

表单提交

submit

<input type="submit" />

表单重写

reset

<input type="reset" />

数字

number

<input type="number" min="5" max="100" step= "5"/>
min max可以设置最大最小值
step 设置点一下右侧上下键跳的数字(变化量)

邮箱

email

<input type="email" name="" id="" value="" />

<input type="email"  autocomplete="on" id="" value="" />
autocomplete="on"
开启自动补全,如果邮箱少了@符号会提示

链接

url

<input type="url" name="" id="" value="" />

颜色

color

<input type="color" name="" id="" value="" />

时间

date,month,week, datetime-local

<input type="date" name="" id="" value="" />

滑动条

range

<input type="range" name="" id="" value="" min="5" max="100" step= "5"/>
min max可以设置最大最小值
step 设置滑动一下的变化量

搜索框清除

search
就是手机端输账号密码输错了可以按右边一个×直接删除
<input type="search" name="" id="" value="" />

隐藏效果

hidden

管理系统做修改时,根据主键来进行修改(比如我的那个简历修改),把要修改的简历的id隐藏 只是页面上看不到了 不能点击修改
<input type="hidden" name="" id="" value="" />

HTML5 && CSS3

H5中新增的标签

音频标签

audio
<audio src="source/bg.mp3"></audio>

audio支持的文件格式：MP3、WAV、ogg；

audio中可以防止文本在浏览器不支持此标签时显示

autoplay
自动播放

controls
控制条（出现暂停播放进度条，但是进度条不能拉）

<audio src="source/bg.mp3" autoplay controls=""></audio>

视频标签

video
<video src="source/暴走.mp4" ></video>

video支持的文件格式：MP4、Webm、ogv；

autoplay
自动播放

controls
控制条（出现暂停播放进度条，但是进度条不能拉）

poster
添加视频封面（b站那种）

nav

作为导航

header

用于定义文档或文档一部分区域的头部

section

用于划分区域

main

页面主体部分

aside

可用于文章的侧栏

canvas

画布

H5中新增的选择器

属性选择器

a[href] {
	 color: red;
}

<a href="#">1</a>
<a>2</a>

上述样例是只有1变红

结构选择器

这个是只能选择儿子辈的，不能跨级选择
div>span {
	color:pink;
}

这个是只能选择同级标签，还是必须得挨着的
span + a {
	color: red;
}

<div>
    <span>红姐包子铺</span>
    <a href="">蛋黄肉馅</a>
</div>

伪类选择器

• 空元素选择器

指定空的p元素的背景色
p:empty {
	width: 200px;
	height: 30px;
	background-color: pink;
}

<p></p>
<p>米线</p>

• not选择器

.color {
	color: blue;
}

选择所有非括号中属性元素
:not(.color) {
	color: pink;
}

<div class="color">凉皮</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
这里是只有12345的div会变粉色

• nth-child(n)选择器

规定属于其父元素的第二个子元素的每个 p 的样式
p:nth-child(2) {
	color: red;
}

<div>
    <p>炒饭</p>
    <p>炒饭</p>
    <p>炒饭</p>
    <p>炒饭</p>
</div>
这里只有第二个炒饭的颜色会变红

• nth-of-type(n)选择器

规定属于其父元素的第二个 p 元素的样式
p:nth-of-type(2) {
	color: yellow;
}

<div>
    <p>炒饭</p>
    <div>dsfdsfasdfa</div>
    <p>炒饭</p>
    <p>炒饭</p>
</div>
这里第二个炒饭的颜色会变黄

• nth-last-of-type(n)选择器

规定属于其父元素的最后一个 p 元素的样式
p:nth-last-of-type(2) {
	color: lightblue;
}

<div>
    <p>炒饭</p>
    <div>dsfdsfasdfa</div>
    <p>炒饭</p>
    <p>炒饭</p>
    <p>炒饭</p>
    <p>炒饭</p>
    <p>炒饭</p>
    <div>鸡叉骨</div>
</div>
这里最后一个炒饭的颜色会变蓝

• nth-last-of-type(n)选择器

规定属于其父元素的最后一个 div 元素的样式
div:nth-last-child(1) {
	color: greenyellow;
}

<div>
    <p>炒饭</p>
    <div>dsfdsfasdfa</div>
    <p>炒饭</p>
    <p>炒饭</p>
    <p>炒饭</p>
    <p>炒饭</p>
    <p>炒饭</p>
    <div>鸡叉骨</div>
</div>
这里最后一个鸡叉骨的颜色会变黄绿

• first-of-type与last-of-type

第一个p标签
p:first-of-type {
	color: red;
}

最后一个p标签
p:last-of-type {
	color: greenyellow;
}

不写例子了 自己看w3c

• only-of-type与only-child

选择所有父标签中p标签只有一个的那个p
p:only-of-type {
	color: red;
}

选择所有父标签中只有一个子标签并且是p标签的那个p
p:only-child {
	color: lavender;
}

不写例子了 自己看w3c

• before与after选择器

div:before {
	content: "您好";
	width: 100px;
	height: 100px;
	background-color: #7FFF00;
	display: block;
}
div:after {
	content: "刘一龙虾";
}

<div>
    <p>锦辉鸡公煲</p>
    <p>锦辉麻辣香锅</p>
</div>

应用:用于实现小图标,边框,遮罩层；
 一个标签只能写一组before和after,而且必须指定content；
默认生成的是行内元素；
低版本的浏览器只识别:(一个冒号)想兼容跟多浏览器尽量写一个冒号；
其他浏览器可能也识别::(两个冒号)；
before和after选择器中可以写各种各样的样式。

过渡

transition

• css3标准不固定，针对不同的浏览器进行兼容，需要加前缀：

  • webkit :safari 谷歌 猎豹
  • moz:火狐
  • ms:IE
  • o: opera

• 直接打transition然后tab出来的是这样的：

  • -webkit-transition: all 1s;
  • -moz-transition: all 1s;
  • -ms-transition: all 1s;
  • -o-transition: all 1s;

• 平常写直接写transition: all 1s; 就完事了

• 分开写是这样的：

  • 过渡的样式 常用all.可以设置某个css样式：transition-property: all;
  • 过渡效果：transition-timing-function: linear;
  • 过渡的时间：transition-duration: 1s;
  • 过渡延时：transition-delay: 1s;

• 复合样式这么写：transition: width 1s linear 1s,height 5s ease-in-out 2s;

• 过渡效果

  • ease-in 规定以慢速开始的过渡效果
  • ease-out 规定以慢速结束的过渡效果
  • ease-in-out 规定以慢速开始和结束的过渡效果

变换

设置基准点：transform-origin
设置3D效果： transform-style:preserve-3d
设置翻转部分隐藏：backface-visibility: hidden;
设置景深：perspective: 1000px;

平移

translate(m,n)

注意写项目要加前缀
括号中参数是水平方向和垂直方向

复合样式：transform: translate(100px,100px);
X轴方向水平平移：transform: translateX(100px);
Y轴方向竖直平移：transform: translateY(100px);

translate的百分比是相对于自身的
负值是向左或向上移动自身的一半(-50%)
transform: translate(-50%,50%);

缩放

scale(m,n)

复合样式：transform: scale(2,0.5);
X轴方向水平缩放：transform:scaleX(10);
Y轴方向垂直缩放：	transform:scaleY(2);

旋转

rotate(n) n指角度

默认样式旋转：transform: rotate(360deg);
X轴旋转：transform: rotateX(180deg);
Y轴旋转：transform: rotateY(180deg);

倾斜

skew(n) n指角度

复合样式:transform: skew(360deg,360deg);
XY和上面一样 不写了

动画

代码

@keyframes  move{
	from{
		transform: translate(0,0);
	}
	30% {
		transform: translate(200px,200px);
		background-color: #DAA520;
	}
	70%{
		transform: translate(500px,0);
		background-color: #FFC0CB;
	}
	to{
		transform: translate(0,0);
	}
}

<body>
	<div></div>
</body>

样式

• 平常写的复合样式：animation:move 5s;（这里的move是动画名）
• 分开写的样式：
  • 动画名：animation-name: move;
  • 动画时长：animation-duration: 5s;
  • 动画循环次数：animation-iteration-count: infinite;
    • infinite 无限循环
  • 动画播放顺序：animation-direction: alternate;
    • reverse倒序 alternate 往返运动
  • 运动曲线：animation-timing-function: linear;
    • ease ease-in ease-out
  • 动画延时：animation-delay: 1s;
  • 运动状态：animation-play-state: running;（一般在hover效果里）
    • pause 暂停（是可以练跟枪的效果(小声bb)）

动画库的使用

• 先link动画库
  • 链接：https://pan.baidu.com/s/1xtTyPSJ-UrFHsV6RuaaVtw 提取码：3tgs
• 然后使用
  • 第一种方式：动画名使用动画库中定义好的——animation: bounce 2s;
  • 第二种方式：class="animated +动画名"——

阴影

文字阴影

text-shadow(n,m,p,q)

前两个数分别为水平方向和垂直方向,一定要设置,不设置没有阴影效果
第三个数是模糊度
 第四个是颜色
text-shadow: 20px 20px 10px yellow;

盒子阴影

box-shadow(n,m,p,q)

四个值分别为:水平偏移 垂直偏移 模糊距离 阴影颜色
box-shadow: 2px 2px 2px rgba(0,0,0,0.6);

inset:设置成内阴影
box-shadow: 0 0 20px red inset;

怪异盒模型

box-sizing: border-box;

别人加内边距是把最大圈往大了顶,怪异盒模型是把内容往小了顶

例如:
设内容200x200 ,加20的内边距
正常盒模型:内容200x200 外框240x240
怪异盒模型:内容160x160 外框200x200 

线性渐变

background-image: linear-gradient(to right/bottom/top/left + color)
background-image: linear-gradient(角度 + color)

是对background-image进行的操作
background-image: linear-gradient(to right,red,orange,yellow,green,cyan,blue,purple);

定个div设宽高自己运行看效果去

径向渐变

background-image: radial-gradient

这个地方就不写注释了 相信可以看懂

background-image: radial-gradient(200px at right top,maroon 60%,chocolate 80%,black 90%);

上面那行例子代码,加个50px圆角 你将会得到一个从望远镜看火星的视角(什么玩意)