2019.4.25 表格表单与HTML5 && CSS3

表格

属性

表格间距离

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

表单

属性

提交的网址

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

作为导航

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

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 {
	 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: "您好";
	 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圆角你将会得到一个从望远镜看火星的视角(什么玩意)~~

2019.4.25 表格表单与HTML5 && CSS3

表格

标签

属性

表格间距离

表格的内边距

表格的边框

样式

边框合并

行合并

列合并

display

表单

标签

属性

提交的网址

请求方式

input相关

扩大响应范围

字符

密码

单选框

name

value

默认选中

多选框

文件上传

下拉列表

可拖拽大文本输入框

表单提交

表单重写

数字

邮箱

链接

颜色

时间

滑动条

搜索框清除

隐藏效果

HTML5 && CSS3

H5中新增的标签

音频标签

视频标签

nav

header

section

main

aside

canvas

H5中新增的选择器

属性选择器

结构选择器

伪类选择器

过渡

变换

平移

缩放

旋转

倾斜

动画

代码

样式

动画库的使用

阴影

文字阴影

盒子阴影

怪异盒模型

线性渐变

径向渐变