day22-表单标签和CSS基础

一、表单标签

1.表单标签：form

form标签单独使用没有意义，主要是用来将其他的表单相关标签放在form标签中做整体提交和重置的功能

• action属性：提交的路径
• method属性：http请求方式

2.表单相关标签：input (单标签)

1.type属性：属性不同，input表现出来的功能完全不一样

• text —— 文本输入框
  • value属性：文本框中输入的内容；给这个属性赋值可以设置输入框中的默认显示，获取这个属性的值，能够得到输入框最新的内容
  • placeholder属性：设置输入框的占位符（提示信息）
  • maxlength属性：限制输入内容的最大长度
• 密码输入框：password
  • value属性：文本框中输入的内容；给这个属性赋值可以设置输入框中的默认显示，获取这个属性的值，能够得到输入框最新的内容
  • placeholder属性：设置输入框的占位符（提示信息）
  • maxlength属性：限制输入内容的最大长度
• 单选按钮：radio
  • name属性：同一组数据对应的那么必须一样
  • value属性：这儿的value属性只能提交不能显示
  • checked属性：将这个属性值设置为chenked可以让指定按钮默认选中
  • 补充：可以通过设置label标签的for属性和其他标签的id属性一致来让label标签和其他标签进行绑定
• 复选按钮：checkbox
  • name：同一组数据对应的name必须一样
  • value属性：这儿的value属性只能提交不能显示
  • checked属性：将这个属性值设置为checked可以让指定按钮默认选中
• 普通按钮：button
  • value属性：属性的值就是显示在按钮上的文字
• 提交按钮：submit
  • value属性：属性的值就是显示在按钮上的文字
  • 点击这个按钮会自动将提交按钮所在的form标签中设置了name属性值的所有标腔内容都提交
• 重置按钮：reset
  • value属性：属性的值就是显示在按钮上的文字
  • 点击这个按钮会自动将当前form标签中所有的相关标签的状态重置初始状态

2. name属性：只有设置了name属性的表单相关标签，内容才能被提交

3. value属性：提交的时候是以name = value形式进行提交

4. disabled属性：这个属性的值设置为disabled可以让当前input标签不可用

3.表单标签2

1.下拉列表标签：select，option

select标签 —— 表示整个下拉列表

option标签 —— 每一个option标签对应一个选项

optgroup标签 —— 选项分组，通过label属性来设置分组的名字

2.多行文本域：textarea

双标签的内容相当于input中文本输入框的value属性

placeholder属性 —— 提示的内容

3.无语义标签

div和span都是无语义标签

二、CSS基础

1.什么是CSS

CSS又叫层叠样式表（简称样式表）

CSS是web标准中的表现标准，它决定了网页内容到样式和布局（目前使用的是CSS3）

2.怎么写CSS

1.语法

选择器{属性名1:属性值1;属性名2:属性值2;属性名3:属性值3...}

2.说明

选择器{} —— 通过选择器选中需要添加样式的标签；在内联样式中不用写

属性 —— 属性名和属性值之间用冒号连接，多个属性之间用分号分开，属性名不是自己命名，必须是CSS提供的属性，（学CSS主要就是学CSS中的属性），属性值如果是表示大小的数字，必须加单位： 100px(像素)，100em（空格数），10%（百分比）；颜色值：颜色英文单词、#6位的十六进制颜色值、rgb(0-255,0-255,0-255)、rgba(r,g,b,透明度)，透明度：0~1

3.常用属性

color：文字颜色

background-color：背景颜色

font-size：字体大小

width：宽度

height：高度

3.写在哪

根据样式表写的位置，将样式表分为：内联样式、内部样式和外部样式

• 内联样式：将样式表写在标签的style属性中； 只能作用于一个标签
• 内部样式：将样式表写在style标签中； 能作用于当前整个html中的标签
• 外部样式：将样式表写在CSS文件中，然后再在html文件中通过link导入； 可以作用于所有页面的所有标签

4.选择器 —— 选中标签

1.元素选择器/标签选择器

直接将标签名作为选择器，选中所有指定的标签；

例如：a{} —— 选中所有的a标签； div{} —— 选中所有的div标签

2.id选择器

在标签的id属性值前加#作为一个选择器，选中id值是指定值的标签（注意：一个html中id必须唯一）

例如：#a{} ——选中id值为a的标签

3.class选择器

在标签的class属性值前加.作为选择器，选中所有class属性值是指定值的标签

例如：.a{} —— 选中class属性是a的所有标签

注意：一个html中多个标前可以拥有一个class值；同一个标签可以同时拥有多个class值（多个class值之间用空格隔开）

4.群组选择器

将多个选择器用逗号隔开，选中每个独立选择器选中的所有标签

例如：a,p{} —— 选中所有的a标签和p标签； a,.c1{} —— 选中所有的a标签和所有class值是c1的标签

5.包含选择器（包含关系中不一定是直接包含，间接包含也能选中）

将多个选择器用空格隔开，从前往后一层一层的找，找到最后一个选择器选中的标签

例如：div #d1 p{} —— 选中所有在div标签中的id是d1的标签中的p标签

6.包含选择器（包含关系必须是直接包含）

将多个选择器用>隔开，从前往后一层一层的找，找到最后一个选择器选中的标签

7.通配符

直接将*作为选择器，选中当前页面中所有标签

8.选择器的权重

权重越大优先级越高

元素选择器：0001（1）

class选择器：0010（2）

id选择器：0100（4）

群组选择器：看单独每个选择器的权重

包含选择器：每个选择器的权重和