2019.4.25 表格表单与HTML5 && CSS3 （整理中，进度到新增的伪类选择器）
目录
@
SRE实战 互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。表格
标签
表格 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
密码
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" />
HTML5 && CSS3
音频标签
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站那种）
H5中新增的标签
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>
这里最后一个鸡叉骨的颜色会变黄绿
更多精彩
