day02 HTML与层叠样式表 2018-08-14

一、表单标签

用来收集信息的标签, 可以提交表单中收集到的信息

action属性: 设置提交信息的位置

method属性: 提交方式 -- post/get

input标签

1. input标签 -- 文本输入框
   是表单标签
   type属性:text -- 普通文本输入框
   name属性: 必须设置
   value属性: 标签内容
   placeholder属性: 站位符(提示信息)
   maxlength: 输入框可以输入的最大长度
   readonly: 输入框只读(不能输入)

2. input标签 -- 密码输入框
   type属性:password -- 密码输入框(显示密文)
   value属性: 标签内容
   placeholder属性: 占位符(提示信息)
   maxlength: 输入框可以输入的最大长度
   readonly: 输入框只读(不能输入)

3. input标签: 多选按钮
   type属性: checkbox
   name属性: 同一类型name值必须一样
   value属性: 设置提交的值
   checked属性: 设置为checked, 让其处于选中状态

4. input标签: 普通按钮
   type属性: button
   disabled: 让按钮不能点击
   value: 按钮上的内容

5. input标签: 重置标签
   将当前所在的form中所有表单相关标签对应的值重置

---

二、下拉菜单、多行文本框以及表单分组

下拉菜单

• 用select标签创建下拉菜单
• 在select内用option标签设置下拉菜单选项
• 每个option标签对应一个选项
• 通过设置option标签的select的属性使对应选项为默认选中

多行文本框

• 通过textarea标签设置多行文本框
• 通过设置textarea标签的rows属性设置多行文本框的行数
• 通过设置textarea标签的cols属性设置多行文本框的lie数
• placeholder属性: 占位符(提示信息)

---

三、空白标签及标签分类

  空白标签又叫无语义标签, 一般用来作为某些内容的载体
  span标签和div标签都是空白标签

HTML中标签分为两大类: 块级标签和行内标签

• 块级标签: 每个标签独占一行

常用块级标签有:

1. 标题标签: h1-h6
2. 段落标签: p
3. 水平分割线标签: hr
4. 列表标签: ul、ol、dl
5. 表格标签: table
6. 表单标签: form

• 行内标签: 多个标签可以共处一行

常用行内标签有:

1. 超链接标签: a
2. 图片标签: img
3. 下拉菜单标签: select
4. 输入标签: input
5. 文本域标签: 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)