HTML学习

day2-表单和css基础

表单标签

1.表单标签：form

form是用来做用户信息收集的标签，主要是可以提供提交和重置按钮来对form中表单相关标签的内容进行整体的提交和重置

<form action="" method=""

action —— 提交路径（提交接口）
method —— 提交方式（提交请求的方式：GET/POST）

2.表单相关标签

1）input标签
2）select标签
3）textarea标签

input标签

input标签会因为type属性值不同功能完全不一样

1.文本输入框：text

<input type="text" name="" value=""

name属性：对输入框输入的数据进行说明和区分的（类似字典的key）
value属性：就是输入框中输入和显示的内容（和输入框中的内容是双向绑定）
placeholder属性:输入框中的提示信息
maxlength属性：最大输入的文字的个数

2.密码输入框：password

<input type="password" name="" value=""

3.单选按钮：radio

<input type="radio" name="" value=""

name属性：同一组选项的name属性必须相同，才能做到单选的效果
value属性：指定按钮选中的时候对应的值

4.复选按钮：checkbox

<input type="checkbox" name="" value=""

name属性：同一组选项的name属性必须相同
value属性：指定按钮选中的时候对应的值
checked属性：设置默认选中

5.按钮：button

<input type="button" name="" value=""

注意：button标签只能是文本

6.重置按钮：reset

<input type="reset" name="" value=""

重置：重置当前form标签中所有的相关标签的状态
提交：将当前form标签中所有设置了name属性的相关标签以 name=value 形式对应数据进行提交

select和textarea标签

1.select标签

select —— 整个下拉列表
option —— 下拉列表中的选项
注意：name 和 value属性都需要赋值

2.textarea标签

<textarea rows="" cols="">

rows属性：最多能显示的行数（控制高度）
cols属性：列数（控制宽度）
name属性：区分和提交数据的时候用
placeholder属性：输入框中的提示信息
maxlength属性：最大输入的文字的个数
注意：textarea不需要value属性，标签内容就相当于value

3.div标签

无语义标签，一般用来对标签进行分组和分类而存在（span标签也是无语义的标签）

CSS基础语法

1.什么是CSS

CSS又叫层叠样式表，是web标志中的表现标准，负责标签（内容）样式和布局

2.CSS代码写在哪儿

内联样式表 —— 将css代码写在标签的style属性中（只针对一个标签有效）
内部样式表 —— 将css代码写在style标签中（样式可以针对整个html中所有的标签）
外部样式表 —— 将css代码写在css文件中，然后在html中用link标签去导入（样式可以针对所有的html中所有的标签有效）
注意：内联样式表的优先级最高，内部样式表和外部样式表谁后出现谁的优先级高

3.CSS代码怎么写

语法：

选择器{属性名1：属性值1；属性名2：属性值2；...}

说明：
选择器 —— 选中当前需要添加样式的标签
{} —— 固定写法（注意：内联样式表中选择器{} 需要省略）
属性 —— 以属性名：值的形式存在，一个属性结束后要分号；
css中有哪些属性，每个属性干嘛的都是固定（css3中有200多个属性）
常用属性：color（颜色）、background-color(背景颜色)、font-size（字体大小）、width（宽度）、height（高度）
属性值：a.数字大小需要添加单位（px）
b.颜色值有三种方法：颜色的英文单词、#6位的十六进制数、rgb或者rgba（rgb（255,0,0）、rgba（255,0,0,1）—— 最后一个参数是透明度，取值范围0~1）

选择器

常用选择器

1.标签选择器（元素选择器）

直接将标签作为选择器，选中当前页面中所有的指定的标签
p{} —— 选中当前页面中所有的p标签

2.id选择器

在id属性值前加#作为一个选择器，选中当前页面中id值是指定值的标签（id一般是唯一的）

3.类选择器（class选择器）

在class属性前加.作为一个选择器，选中当前页面中所有class值是指定值的标签
.p1 —— 选中class属性值为p1的标签
注意：
不同的标签的class值可以相同，同一标签可以同时拥有多个不同的class值（多个之间用空格隔开）

4.后代选择器

将多个独立的选择器用空格隔开作为一个选择器
div #p1{} —— 选中div标签中id是p1的标签（最终选中的是id是p1的标签，但是这个标签必须是div的后代）

5.父子选择器

将多个独立的选择器用 > 隔开作为一个选择器
div>.c1{} —— 选中div中class值是c1的子标签

6.群组选择器

将多个独立的选择器用逗号隔开作为一个选择器，同时选中每个选择器选中的标签
p，a{} —— 选中所有的p标签和所有的a标签

7.通配符

将*作为选择器，选中当前页面中所有的标签
*{}

选择器的优先级

选择器的优先级：选择器的优先级看选择器的权重值，谁的权重值大谁的优先级就高，如果权重值相同谁后执行谁的优先级就高，内联样式表的优先级最高。
标签选择器：1
class选择器：2
id选择器：4
后代选择器：求各个选择器的和
可以在某个属性后加！important 让当前属性的优先级最高（内联也比不上）

伪类选择器

1.什么是伪类选择器

伪类选择器选中的是标签的状态，可以让同一个标签在不同的状态下有不同的样式

普通选择器：伪类选择器

2.常见的伪类选择器

link —— 链接没有成功访问过对应的状态；（只针对超链接有效）
visited —— 链接已经访问过的对应的状态；（只针对超链接有效）
hover —— 鼠标悬停在标签上对应的状态；（针对所有可见标签有效）
active —— 鼠标按下没有弹起来的时候对应的状态；（针对所有可见标签有效）
focus —— 成为焦点对应的状态（正在操作某一个标签对应的状态）

2020-07-07