css之表格,表单
一.表格
1.定义
表格由<table>标签来定义.每个表格均有若干行(由tr标签定义),每行被分割为若个单元格(由td标签定义).字母td指表格数据(table data),即数据单元格的内容.数据单元格可以包含文本、图片、列表、段落、表单、水平线等待
2.基本结构
<table>
<caption></caption>
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
</tr>
</tfoot>
</table>
3.表格标签
<table> 定义表格
<th> 定义表格的表头
<tr> 定义表格的行
<td> 定义表格单元格
<caption> 定义表格标题
<colgroup> 定义表格列的组
<thead> 定义表格的页眉
<tbody> 定义表格的主体
<tfoot> 定义表格的页脚
4.常用属性
table
-- border: <integer>:表格外框及单元格外框
-- cellpadding: <integer>:单元格的内边距
-- cellspacing: <integer>:单元格之间的间距,最小为0
-- rules:rows、cols、groups、all:边框规则
td
-- rowspan: <integer>:行合并(该单元格占多行)
-- colspan: <integer>:列合并(该单元格占多列)
-- width: : <integer>%:列宽占比
caption
-- align: left | right | top | bottom:标题方位
5.表格实现垂直水平居中
.sup {
width: 200px;
height: 200px;
display: table-cell;
vertical-align: middle;
}
.sub {
width: 100px;
height: 100px;
margin: 0 auto;
}
二.表单
1.概念
表单是一个包含表单元素的区域.
表单元素是允许用户在表单中输入内容,比如:文本域(textarea)、下拉列表、单选框(radio-buttons)等等
2.基本结构
<form>
<label>输入框</label><input type="text" />
<button type="submit">提交</button>
</form>
3.常用类型标签
- 文本框
<input type="text" name="username" placeholder="请输入用户名" size="10" maxlength="15">
- 密文框
<input type="password" name="pwd" placeholder="请输入密码" maxlength="12">
- 单选框
<input type="radio" name="sex" value="male" checked>男
<input type="radio" name="sex" value="female">女
- 复选框
<input type="checkbox" name="hobby" value="basketball"> 篮球
<input type="checkbox" name="hobby" value="football"> 足球
<input type="checkbox" name="hobby" value="ping-pong" checked> 乒乓球
<input type="checkbox" name="hobby" value="baseball"> 棒球
- 下拉选项
<select name="major">
<option value="computer">计算机</option>
<option value="archaeology">考古学</option>
<option value="medicine" selected>医学</option>
<option value="Architecture">建筑学</option>
<option value="Biology">生物学</option>
</select>
<!--多选-->
<select name="major" multiple>
<option value="computer">计算机</option>
<option value="archaeology">考古学</option>
<option value="medicine">医学</option>
<option value="Architecture">建筑学</option>
<option value="Biology">生物学</option>
</select>
- 多行文本输入
<textarea name="content"></textarea>
<textarea name="content" cols="30" rows="10"></textarea>
- 按钮
<!--提交按钮-->
<input type="submit" value="提交">
<button>提交</button>
<button type="submit">提交</button>
<!--重置按钮-->
<input type="reset" value="重置">
<button type="reset">重置</button>
<!--普通按钮-->
<input type="button" value="按钮">
<button type="button">按钮</button>
4、全局属性
- required:必填项
- pattern:正则
5.伪类
- focus:获得焦点
三.音频
1.基本语法
<audio id="ad" src="media/juhua.mp3" autoplay controls loop>如果浏览器不支持H5新标签audio,此段话将被显示出来</audio>
2.常用属性
属性 | 值 | 描述 |
---|---|---|
autoplay | autoplay | 自动播放 |
controls | controls | 音频控件 |
loop | loop | 循环 |
muted | muted | 静音 |
preload | auto metadata none | 预加载 |
src | URL | 音频源 |
四.视频
1.基本语法
<video width="672" height="378" controls poster="img/poster.png">
<source src="media/HTML5的前世今生.mp4" type="video/mp4"></source>
当前浏览器不支持video直接播放
</video>
2.常用属性
属性 | 值 | 描述 |
---|---|---|
width | pixels | 宽度 |
height | pixels | 高度 |
controls | controls | 视频控件 |
autoplay | autoplay | 自动播放 |
loop | loop | 循环播放 |
muted | muted | 静音 |
poster | URL | 图像占位 |
src | URL | 视频源 |
preload | auto metadata none | 预加载 |
- source属性
属性 | 值 | 描述 |
---|---|---|
src | URL | 视频源 |
type | MIME_type | MIME类型 |
五.形变
平移
transform:translate(x,y) | translateX(num) | translateY(num)
缩放
transform:scale(x,y) | scaleX(num) | scaleY(num)
旋转
transform: rotateX(角度) | rotateY(角度) | rotateZ(角度);
倾斜
transform:skew(角度x,角度y) | skewX(角度x) | skewY(角度y)
六.浏览器适配
- -o-:Opera浏览器
- -ms-:IE浏览器
- -moz-:Firefox浏览器
- -webkit-:Chrome、Safari、Android浏览器
径向渐变
.box {
width: 200px;
height: 200px;
border-radius: 50%;
background-image: -webkit-radial-gradient(red, yellow);
}
倒影
-webkit-box-reflect: below | above | left | right;
css之表格,表单的更多相关文章
- css表格表单和统筹
css:表格表单和统筹 学习目标 1.表单标签及属性高级 2.表格标签及属性高级 3.CSS统筹 4.BFC概念和应用场景 一.表单标签及属性高级 回顾: 表单的作用:用来收集用户的信息的; 表单的组 ...
- Bootstrap框架(基础篇)之列表,表格,表单
继续上篇的基础部分延伸,主要说一下列表,表格,表单相关Bootstrap框架变化以及基础知识. 1.列表篇 除了HTML提供的三种基本列表样式: 无序列表 <ul> <li>… ...
- HTML--绝对路径, 表格,表单, 框架
URL, URI, URN URL: 统一资源定位符: Uniform Resource Locator URN: 持久可用的资源标准名称 Uniform Resource Name , 比如邮箱 U ...
- HTML表格表单综合——用户注册表
今天学习了表格和表单知识,我综合了他们添加了一些拓展知识做了一个用户注册表,以下面代码来整理表格和表单知识: <!DOCTYPE html PUBLIC "-//W3C//DTD XH ...
- [19/06/08-星期六] CSS基础_表格&表单
一.表格 如生活中的Excel表格,用途就是同来表示一些格式化的数据,如课程表.工资条.成绩单. 在网页中也可以创建出不同的表格,在HTML中使用table标签来创建一个表格.table是个块元素. ...
- 22----2013.06.29---HTML--html介绍.超链接和图片,表格,表单,表单标签,meta,复习当天内容
01 HTML HTML :Hypertext Markup Language 超文本标记语言(类似于 裸奔的人.) 作用:向用户展示信息. CSS: Cascading 层叠样式表(类似于 人的 ...
- bootstrap快速入门笔记(七)-表格,表单
一,表格 1,<table>中加.table类 2,条纹表格:通过 .table-striped 类可以给 <tbody> 之内的每一行增加斑马条纹样式. **跨浏览器兼容性: ...
- 2019.4.25 表格表单与HTML5 && CSS3
目录 表格 标签 属性 表格间距离 表格的内边距 表格的边框 样式 边框合并 行合并 列合并 display 表单 标签 属性 提交的网址 请求方式 input相关 扩大响应范围 字符 密码 单选框 ...
- 《锋利的JQuery》读书要点笔记4——表格表单的操作
第五章 jQuery对表单,表格的操作以及更多应用 这章主要以一些具体案例讲解了jQuery对表单,表格的常用操作,以及一些常见的jQuery应用,用到的都是上几章说的东西.下面就以具体的案例来展开. ...
随机推荐
- vue培训记录
在公司做了一次vue相关的培训,自己整理了一些大纲.供大家参考学习! ### 1. 项目构成及原理 [Vue](https://cn.vuejs.org/)###* 主流框架见解及差别 * react ...
- linux源码中的核心数据结构
寄存器 pt_regs 进程线程 struct task_struct: 进程,或者是线程数据结构,在include/linux/sched.h里面定义的,与硬件体系结构无关 struct threa ...
- python学习笔记1.4
注释不被程序执行的辅助性说明信息- 单行注释:以#开头,其后内容为注释# 这里是单行注释- 多行注释:以'''开头和结尾''' 这是多行注释第一行这是多行注释第二行 ''' 保留字and elif i ...
- Linux基本结构
Linux 的基本目录结构: 基本介绍: Linux 的文件系统是采用级层式的树状目录结构,在此结构中的最上层是根目录“/”,然后再次目录下载创建其他的目录. 经典的一句话:linu ...
- CGLIB动态代理模式
概念: 第三方技术CGLIB动态代理和JDK代理不同的是,JDK代理需要提供接口,而CGLIB代理不需要: 它只需要一个非抽象类就能实现动态代理 例子: /** * 非抽象类 * @author Ad ...
- python函数超时情况应对总结
最近处理一个线程中的函数超时问题. 函数里面有一个地方可能会卡死,我们需要去判断这个是不是卡死了,并做出相应的应对方案. 最开始想的是在函数上增加一个装饰器,使其在超时时抛出异常,然后在其他地方捕获这 ...
- Linux I2C驱动程序设计
1. Linux I2C子系统架构 (1)I2C核心(I2C-Core):I2C 总线和I2C 设备驱动的中间枢纽,它提供了I2C 总线驱动和设备驱动的注册.注销方法等 (2)I2C控制器驱动(ada ...
- 转 rman 恢复报错
###sample 1 原因是新库起了FRA 区,FRA 区的旧文件属于之前的归档日志文件产生,这样会导致无法识别的问题. 解决办法,清空FRA或者恢复时候不启用FRA. RMAN RESTORE ...
- SQL基础语法select|insert|update|delete(增删改查) 简单使用
以下案列以此表举例 1.select(查询) select简单的查询分为两种 注:字段也就是表结构中的列的名称 第一种: select 字段名 from 表名 此种查询只列出你所需要查询的字段, ...
- 读取Cert格式证书的密钥
不想存储Cert证书内容,只想存储证书密钥,可通过以下实现读取证书的密钥出来: package com.zat.ucop.service.util; import sun.misc.BASE64Enc ...