一、表单标签
用来收集信息的标签, 可以提交表单中收集到的信息
action属性: 设置提交信息的位置
method属性: 提交方式 -- post/get
input标签
input标签 -- 文本输入框
是表单标签
type属性:text -- 普通文本输入框
name属性: 必须设置
value属性: 标签内容
placeholder属性: 站位符(提示信息)
maxlength: 输入框可以输入的最大长度
readonly: 输入框只读(不能输入)input标签 -- 密码输入框
type属性:password -- 密码输入框(显示密文)
value属性: 标签内容
placeholder属性: 占位符(提示信息)
maxlength: 输入框可以输入的最大长度
readonly: 输入框只读(不能输入)input标签: 多选按钮
type属性: checkbox
name属性: 同一类型name值必须一样
value属性: 设置提交的值
checked属性: 设置为checked, 让其处于选中状态input标签: 普通按钮
type属性: button
disabled: 让按钮不能点击
value: 按钮上的内容input标签: 重置标签
将当前所在的form中所有表单相关标签对应的值重置
二、下拉菜单、多行文本框以及表单分组
下拉菜单
- 用select标签创建下拉菜单
- 在select内用option标签设置下拉菜单选项
- 每个option标签对应一个选项
- 通过设置option标签的select的属性使对应选项为默认选中
多行文本框
- 通过textarea标签设置多行文本框
- 通过设置textarea标签的rows属性设置多行文本框的行数
- 通过设置textarea标签的cols属性设置多行文本框的lie数
- placeholder属性: 占位符(提示信息)
三、空白标签及标签分类
空白标签又叫无语义标签, 一般用来作为某些内容的载体
span标签和div标签都是空白标签
HTML中标签分为两大类: 块级标签和行内标签
- 块级标签: 每个标签独占一行
常用块级标签有:
- 标题标签: h1-h6
- 段落标签: p
- 水平分割线标签: hr
- 列表标签: ul、ol、dl
- 表格标签: table
- 表单标签: form
- 行内标签: 多个标签可以共处一行
常用行内标签有:
- 超链接标签: a
- 图片标签: img
- 下拉菜单标签: select
- 输入标签: input
- 文本域标签: textarea
四、CSS
1. 什么是CSS
CSS是web中的表现标准,又叫层叠样式表,用于设置标签的样式(目前使用的是CSS3)
2. 写的位置
内联样式表: 将CSS写在标签的style属性中
内部样式表: 写在head标签的style标签内容中
外部样式表: 写在一个CSS文件中, 通过head中的link标签关联
优先级: 内联的最高; 内部和外部没有绝对的优先级, 后写的覆盖先写的
3. 写的方法
选择器{属性1:属性值; 属性2: 属性值}
选择器: 用来选中需要设置样式的标签
属性: CSS属性(CSS2中的属性有两百多个)
属性值: 如果属性值是数字, 表示大小要在后面加px, 否则无效
注意: 每个属性间用分号隔开, 否则属性无效
补充属性: color: 设置字体颜色 background-color: 设置背景颜色 width: 标签的宽度 height: 标签的高度
五、CSS选择器
1. 元素选择器(标签选择器)：标签名
选中所有的标签名对应的标签
2. id选择器：#id属性值
每个标签都有一个id属性，整个html中，id的值必须唯一
3. class选择器：.class属性值
每个标签都有一个class属性
4. 通配符：*
选中所有的标签
5. 层级选择器：选择器1 选择器2，...
6. 群组选择器：选择器1，选择器，....
_补充:_css中的颜色值：
- 颜色英语单词
- 16进制的颜色值 0-255 -- 00-ff (#ff0000-红色)
- rgb值：rgb(红,绿,蓝) rgba(红,绿,蓝,透明度) - 透明度 0~1
六、伪类选择器
伪类选择器: 选择器: 状态
- link: 超链接的初始状态
- visited: 超链接访问后的状态
- hover: 鼠标悬停的状态
- active: 鼠标按住的状态
注意：给同一个标签通过伪类选择器给不同状态设置不同的样式的时候, 要遵守爱恨原则(先爱LoVe才能恨HAte)
