缩进快捷键tab,返回操作快捷键ctrl+z
1.div和span的作用
div修饰一个块,span修饰一段文字或者字符
2.表格 table tr td
table属性
width 宽
height 高
border 边框宽度
bordercolor 边框颜色
bgcolor 背景颜色
cellspacing 边框间距
cellpadding 边框与内容之间的间距
align="left/center/right" 左/居中/右 水平对齐方式
valign="top/middle/bottom" 上/居中/右 垂直对齐方式
valign只能控制文本,不能控制表格
colspan="合并数量" 行内合并单元格
rowspan 列内合并单元格
3.表单 form input
form属性
action="后台地址" 接后台地址
name="用户收集表名称"
method="get/post" 递交方式
使用get,递交时地址栏?后面接参数
input属性
type="text/password/radio/checkbox/submit/botton/reset"
文本/密码/单选框/复选框/提交按钮/空按钮/重置
size 尺寸,宽度,字符数
maxlength 最大长度
name="名称" 同个单选框需要命名同样的名称
value 文本默认值
placehoder 文本提示值
checked 单选框或者复选框默认选中的按钮
checked="disable"默认禁止选中
rset 重置按钮
button 空按钮,需要绑定js事件
4.css样式表的建立
1. 行内<标签 style="样式属性:属性值">
2.内联 写在head里面
<head>
<style>
标签名/class/id{
样式属性:属性值;
}
</style>
</head>
3.外部 link引入
<link rel="stylesheet" href="css/01-css.css">
rel:样式类型,stylesheet指样式属性
href后接样式路径
4.外部 @import url 引入,写在style内部
@import url("css路径")
import只能引入css,link可以引入其他类型;import引入后先加载html后加载css,link引入后同时加载
5.样式表的优先级
行内>内部
行内>外部
内部和外部取决于书写顺序,在下面的越高
6.css选择器
标签 div
id <div id="www">
class <div id="www"> .www{样式属性:属性值;}
群组
- 相同属性 选择器1,选择器2,...{}
- 作用:项目中会有一些相同的属性设置
包含选择器
<div>
<li></li>
</div>
div li{样式属性:属性值;}
通配符 *
7.伪类选择器
a:link {color: red;} /* 未访问的链接状态 */
a:visited {color: green;} /* 已访问的链接状态 */
a:hover {color: blue;} /* 鼠标滑过链接状态 */
a:active {color: yellow;} /* 鼠标按下去时的状态 */
8.hover:鼠标滑过时候的状态
- 改变自身状态 对象选择符:hover{样式属性:属性值;}
- 让子级添加hover效果——父级元素:hover 子级元素{样式属性:属性值;}
9.权重的使用
- 四位数字表示 0 0 0 0
- 内联样式表 1000
- id 0100
- class 0010
- 标签 0001
- 群组 p,
- 包含 相加
- 伪类 0010
- 拓展:!important 权重最高 - 修改别人的代码,覆盖