固定/相对/绝对定位、表格、表单

定位

CSS 布局 - 定位属性 (w3school.com.cn)

它的作用是控制元素在包含块中的精准位置

定位位置相同的情况下文档后面的会覆盖文档前面的

固定定位

postion: fixed
相对于浏览器窗口脱离文档流
用途：eg: 返回顶部按钮…

相对定位

position: relative
相对于元素原来的位置

绝对定位

position: absolute
相对于有定位的父元素或者祖先元素如果都没有就相对于boby
用途: 一个元素在另一个元素显示(父元素用相对子元素用绝对)

相对定位一般和绝对定位配合使用，父元素设置相对定位子元素设置绝对定位

层级

z-index
层级数越大元素越靠上
层级默认为0
只有定位元素有层级

eg:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.img_show{width: 350px;position: relative;}.img_show .image{width: 350px;position: absolute;left: 0;bottom: 0;}.img_show .vip{width: 60px;position: absolute;right: 5px;top: 5px;}.img_show span{color: white;position: absolute;left: 10px;bottom: 10px;}</style>
</head>
<body><div class="img_show"><img style="border-radius: 20px;" src="img/5f9f4ba6c0518f32515a82df007e5ed.jpg" alt=""><img class="image" src="img/下载.png" alt=""><img class="vip" src="img/sss.png" alt=""><span>全60集</span></div></body>
</html>

表格

HTML 表格 (w3school.com.cn)

表格由<table>标签来定义。每个表格均有若干行（由<tr>标签定义），每行被分割为若干单元格（由<td>标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。

表头

<thead><!-- tr代表行 --><tr><!-- th代表标头的列 --><th>书名</th></tr>
</thead>

表身

<tbody><tr><!-- td代表身体中的列 --><td>西游记</td></tr>
</tbody>

属性

border= "1" 设置表格的边框
cellspacing= "0" 设置单元格之间的距离
cellpadding= "10" 设置单元格的内边距
rowspan="3" 垂直合并单元格(合并行)
colspan="2" 水平合并单元格(合并列)

单元格只能合并不能拆分

示例代码

<table border="1" cellspacing="0" cellpadding="10px"><!-- 表名 --><caption>河套学院</caption><thead><tr><th>书名</th><th>作者</th><th>价格</th></tr></thead><tbody><tr><!-- td代表身体中的列 --><td rowspan="3">西游记</td><td colspan="2">吴承恩</td></tr><tr><td>吴承恩</td><td>69</td></tr><tr><td>吴承恩</td><td>69</td></tr></tbody>
</table>

表单

HTML 表单元素 (w3school.com.cn)

HTML 表单用于搜集不同类型的用户输入。

表单属性

HTML 表单属性 (w3school.com.cn)

action="/action_page.php" 请求地址(网络、相对、绝对)
target="" 提交表单后在何处显示响应

_self(默认) 在当前窗口显示

_blank 在新窗口或选项卡显示
method="" get post
区别
1. get是明文（值展示在网址上）post不会
2. get请求相对来说比post更快捷post传递东西更大（传文件）

<form action="http://csdn.net/" target="_blank" method="get">
</form>

表单元素

HTML 表单元素 (w3school.com.cn)

input->type属性

text: 文本框、password: 密码框
```
<input type="text">
<input type="password">
```
radio: 单选框、checkbox: 多选框
```

男：<input type="radio" name="sex">
女：<input type="radio" name="sex">

lol <input type="checkbox">
dnf <input type="checkbox">
```
单选框的name属性一致才能实现单选

单选框和多选框设置checked默认选中

file: 文件上传
```
<input type="file">
```
reset: 重置注意：在当前表单中的内容重置
```
<input type="reset" value="恢复默认">
```
submit: 提交按钮按钮改文字要用value
```
<input type="submit" value="注册">
```
button: 按钮 input(button)情况改文字用value
```
<input type="button" value="点击爆炸">
```
hidden: 没有实际效果但是默认提交内容
```
<input type="hidden" name="myname" value="喜羊羊">
```
新标签
color 颜色板
date 日期
range 范围框
number 数字
time 日期
email 邮箱

select->option 下拉选择框

<select name="" id=""><option value="呼和浩特" >呼和浩特</option><option value="石家庄"selected>石家庄</option><option value="通辽">通辽</option><option value="齐齐哈尔 ">齐齐哈尔</option>
</select>

textarea 可输入区域(可以拖拽大小)

设置 resize: none 固定大小

col="30" rows="10" 调整默认输入区域大小
```
留言板<textarea name="" id="" cols="30" rows="10"style="resize:none"></textarea>
```
button 只写button按钮有提交功能
表单元素属性

name: 后台需要的键

placeholder: 输入提示

disabled: 禁止操作

readonly: 只读不用写

required: 必填字段提示
label->for填写属性表单id可以使该表单元素获取焦点
清除文本输入框的默认选中样式
```
input{outline: 0;}
```

前端入门之定位、表单相关推荐

前端之表格，表单，列表
## 本资源由 itjc8.com 收集 --- typora-copy-images-to: media --- > 第01阶段.前端基础.表格 # HTML 第二天目标能够利用表格.列表和 ...
前端页面与form表单提交：代码分享
今天分享下"前端页面与form表单提交:代码分享"这篇文章,文中根据实例编码详细介绍,或许对大家的编程之路有着一定的参考空间与使用价值,需要的朋友接下来跟着云南仟龙Mark一起学习 ...
前端基础：通过表单元素实践《健康体检单》
前端基础:通过表单元素实践<健康体检单> HTML 表单用于接收不同类型的用户输入,用户提交表单时向服务器传输数据,从而实现用户与Web服务器的交互. 一.项目说明该项目是进行表格布局表 ...
组件分享之前端组件——用于自定义表单的前端组件form-create
组件分享之前端组件--用于自定义表单的前端组件form-create 背景近期正在探索前端.后端.系统端各类常用组件与工具,对其一些常见的组件进行再次整理一下,形成标准化组件专题,后续该专题将包含各 ...
04. Web大前端时代之：HTML5+CSS3入门系列~HTML5 表单
Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 一.input新增类型: 1.tel:输入类型用于应该包 ...
Html前端基础（form表单、img标签、a href标签、id的作用）
文章目录一.img标签二.a标签(带href) 三.form表单本篇主要分析Html前端开发中的img图片标签.a href超链接标签.form表单标签,其中form是重点一.img标签 1. ...
form表单中根据值判断是否disabled_Java 0基础入门（Html表单、表单元素）
上一篇:Java 0基础入门 (Html标签的使用) 表单在网页中主要负责数据采集功能. 一.表单实际应用场景百度搜索 5173注册如上两张图,图中的黑色线条是我画上去的,如果按照黑线,在Excl ...
前端推荐!阿里高性能表单解决方案——Formily
今天又到了我们的分享时间. 之前和大家分享了很多可视化的前端项目和工程化实践, 今天继续和大家分享一款非常有价值的开源项目Formily, 它可以帮助我们更高效的开发任何复杂的表单, 并且支持可视化搭 ...
Web前端开发中的表单练习
在web前端开发中,练习table的使用是非常重要的,通过表单的练习可以很好的帮助我们掌握表单的使用方式. 效果如图所示: 代码如下: css采用了外部样式 HTML部分: <!DOCTYPE ...

前端入门之定位、表单