表单和div

最新推荐文章于 2022-07-06 20:06:22 发布

qq_38512978

最新推荐文章于 2022-07-06 20:06:22 发布

阅读量1.2k

点赞数 2

分类专栏：前端文章标签： html form div

本文链接：https://blog.csdn.net/qq_38512978/article/details/92613290

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一、表单标签

定义：<form action="" method=""></from>
常用属性: action：提交路径、method：常用提交方式(get、post)
get和post区别：
- get请求参数跟在请求地址(地址栏可以看见)后面，post是不在请求路径后面(请求体)里面
- get请求相对不安全，post相当安全一些
- get请求对参数大小有限制,post请求参数大小没有限制 .
常见子标签：
- input：输入域，通过type属性来指定类型
  - type：
    - text------------>文本输入框
    - password------>密码域
    - submit--------->提交按钮
    - reset----------->重置按钮
    - button--------->空白按钮
    - radio----------->单选框
    - checkbox------->复选框
    - hidden---------->隐藏字段
    - file-------------->文件
  - placeholder: 用户提示
- select： 选择列表
  
  <select name=""> <option value="">显示的内容</option> </select>
- textarea： 文本域
  - 属性：
    - cols：列
    - rows：行
通用属性：
- name：
  - 作为单选和多选框的分组
  - 作为key上传到后台程序，后台程序通过key得到相对应的value。如果要想把数据提交到后台程序，一定要指定name属性
- value：
  - 给按钮起名字
  - 设置提交到服务器的值 name=value
设置默认值：
- text,password:通过value属性
- radio checkbox:通过checked属性
- select :在option上通过selected属性
- textarea:直接在标签体中写
Input标签html5中新增的type类型： color、date、email、number、range、search、tel、url

二、div和span的区别

div： 块级元素会独占一行（可以设置css宽高）
span： 行内元素不会独占一行（不可以设置css宽高），只能嵌套文本/图片/超链接

三、CSS

html和css常见的三种结合方式：
1: <p style=""></p>
2: <head> <style type="text/css"> key: value; </style> </head>
3. <head> <link rel="stylesheet" href=""/> </head>

选择器:
- 基本选择器
1. 标签选择器标签名{}
2. 类选择器 .类名{}
3. id选择器 #id{}
4. 通用选择器 *{}
- 扩展选择器
1. 层级选择器父类选择器子孙选择器 作用： 父元素下的所有子孙元素
2. 属性选择器标签名[属性名] / 标签名[属性名=“属性值”]
3. 并集选择器选择器1，选择器2{} 作用： 同时有作用
- 伪类选择器
1. a:link 未访问的链接
2. a:visited 已访问的链接
3. a:hover 鼠标移动到链接上
4. a:active 选定的链接
CSS常用属性:
- 背景属性
1. background-color：red
2. background-image：url()
3. background-repeat：repeat 重复 / repeat-x 水平重复 / repeat-y 垂直重复 / no-repeat 不重复
- 文本样式
1. color
2. line-height
3. text-decoration：underline 下划线/ overline 上划线 / line-through 删除线
4. text-indent：缩进 em为单位
5. text-align：对齐
- 字体属性
1. font-family
2. font-size
3. font-style
4. font-weight

四、盒子属性

margin(外边距)：
- 介绍： 标签和标签之间的距离就是外边距
- 格式：
  - margin：10px 10px 10px 10px 
  - margin：10px 20px 
  - margin-top: 10px; margin-right: 10px; margin-bottom: 10px; margin-left: 10px;
- 特点： 外边距的那一部分是没有背景颜色的
padding(内边距)：
- 介绍： 就是标签里面的内容距离边框距离
- 格式：
  - padding: 10px 10px 10px 10px 
  - padding：10px 20px 
  - padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px;
- 特点：
  - 给标签设置内边距之后, 标签占有的宽度和高度会发生变化
  - 给标签设置内边距之后, 内边距也会有背景颜色
border(边框):
- 属性：
  - border-style：dotted—>点状边框
  - dashed—>虚线
  - solid------>实线
  - double---->双线
  - border-width
  - border-color
  - border-radius–>圆角
  - border：宽线性颜色

五：浮动

语法： float: 取值 left(左浮动) / right(右浮动)
特点： 在浮动流中是不区分块级元素/行内元素/行内块级元素的, 都可以设置宽度和高度
浮动规则：
1. 相同方向上的浮动元素, 先浮动的元素会显示在前面, 后浮动的元素会显示在后面
2. 不同方向上的浮动元素, 左浮动会找左浮动, 右浮动会找右浮动
3. 浮动元素浮动之后的位置, 由浮动元素浮动之前在标准流中的位置来确定
清除浮动的方法：
- 方式一: 在当前的元素里面添加clear属性清除【谁不需要给谁加】
- 方式二: 添加一个新的盒子添加clear属性清除【推荐使用】