HTML 表单标签:
1. 用于采集用户输入的数据
2. 使用标签:form
1. 可以定义一个范围,这个范围代表采集用户数据的范围
2. 属性:
1. action:指定提交数据的URL
2. method:指定提交方式
1. 一共其中,2两种常用
1. get:
1. 请求参数会在地址栏中显示。封装到请求行中。
2. 请求参数的长度是有限制的
3. 不太安全
2. post:
1. 请求参数不会在地址栏中显示。会封装在请求体中
2. 请求参数没有长度限制
3. 较为安全
3. 表单项中的数据想要被提交,必须指定其name属性
3. 表单项标签:
1. input:可以通过type属性值,改变元素展示的样式
1. type属性:
1. text:文本输入框
1. placeholder:指定输入框的提示信息,当输入框的内容发生变化,会自动清空提示信息
2. password:密码输入框
3. radio:单选框
1. 要想让多个单选框实现单选的效果,name属性值必须一样
2. 一般会给每一个单选框提供value属性,指定其被提交的值
3. checkbox:可以指定默认值
4. checkbox:复选框
5. label:指定输入项的文字描述信息
1. label的for属性一般会和input的id属性对应。如果对应了,则点击label区域,会让input输入框获取焦点
6. file:文件选择框
7. hidden:隐藏域,用于提交一些信息
8. 按钮:
1. submit:提交按钮,可以提交表单
2. button:一个按钮
3. image:src指定图片的路径
2. select:下拉列表
1. 子元素:option——指定列表项
3. textarea:文本域
1. cols:列数
2. rows:行数
CSS:页面美化和布局
- 概念:Cascading Style Sheets 层叠样式表
- 层叠:多个样式可以作用在同一个httml元素上,同时生效
- 好处:
- 功能强大:
- 将内容与样式控制分离
- 降低耦合度(解耦)
- 让分工协作更加容易
- 提高开发效率,一套CSS可作用于不同文件
- CSS的使用:CSS与HTML结合
- 内联样式:
- 在标签体内是哦用style属性指定css代码
- 内部样式:
- 在head标签内,定义style标签,style标签的标签体内容就是CSS代码
- 外部样式:
- 定义CSS资源文件
- 在head标签内,定义link标签,引入外部的资源文件
- 注意:
- 1,2,3这四种方式CSS作用的范围越来越大
- 常用的是第2,3
- 内联样式:
- CSS基本语法:
- 格式:
- 选择器{属性名1:属性值1;属性名2:属性值2;…}
- 选择器:筛选具有相似特征的元素
- 注意:每一个属性需要使用;隔开,最后一对属性可以不加
- 格式:
- 选择器:
- 分类:
- 基础选择器:
- id选择器:选择具体的id属性值的元素
- 语法:#id属性值{}(建议在HTML页面中id值唯一)
- 元素选择器:选择具有相同标签名称的元素
- 语法:标签名称{}
- 注意:id选择器优先级高于元素选择器
- 类选择器:选择具有相同的class属性值的元素
- 原发:.class属性值{}
- id选择器:选择具体的id属性值的元素
- 扩展选择器:
- 选择所有元素:
- 语法:*{}
- 并集选择器:
- 选择器1,选择器2{}
- 子选择器:筛选选择器1元素下的选择器2元素
- 语法:选择器1 选择器2
- 父选择器:筛选选择器2的父选择器1
- 语法:选择器1>选择器2{}
- 属性选择器:选择元素名称,属性名=属性值的元素
- 语法:元素名称[属性名=“属性值”]{}
- 伪类选择器:选择一些元素具有的状态
- 元素:元素:状态{}
- 状态:
- link:初始化状态
- visited:被访问过的状态
- active:正在访问状态
- hover:鼠标悬浮
- 选择所有元素:
- 基础选择器:
- 分类:
- 属性:
-
字体,文本:
- font-size:字体大小
- color:文本颜色
- text-align:对齐方式
- line-height:行高
-
背景:
- background:
-
边框:
- border:设置边框,符合属性
-
尺寸:
- width:宽度
- height:高度
-
盒子模型:
- margin:外边距
- padding:内边距
- 默认情况下内边距会影响整个盒子的大小
-
float:浮动
11/8/2020 6:43:26 PM
-