html表格、表单
知识点一:表格
1、表格标签 table
2、表格的组成 行 tr 单元格 td
3、建立表格步骤
1、建立表格,
2、判断行数和列数
3、用行去包含单元格
4、在每个单元格中去添加内容
4、表格的各大属性
cellspacing:边框与边框之间的距离
cellpadding:单元格内容与边框之间的距离
border:表格的边框
width:表格的宽
height:表格的高
6、表格的结构:
标题:caption标签
表头:thead标签 表格的第一行,一般用来描述每一列所显示的内容,用thead标签讲第一行包起来,然后用th替换td,单元格中的内容相对于单元格水平居中,且加粗
表格主体:tbody标签
7、表格的标题,caption只在表格中使用
8、表格的缺点:
a. 太深的嵌套,比如table>tr>td>h3,会导致搜索引擎读取困难,而且,最直接的损失就是大大增加了冗余代码量。
b. 灵活性差,比如要将tr设置border等属性,是不行的,得通过td
c. 代码臃肿,当在table中套用table的时候,阅读代码会显得异常混乱
d. 混乱的colspan与rowspan,用来布局时,频繁使用他们会造成整个文档顺序混乱。
e. 不够语义
知识点二:合并单元格
1、分类:跨行合并、跨列合并
2、步骤
1、判断是跨行合并还是跨列合并
2、跨行合并用rowspan属性,跨列合并用colspan属性
3、将属性写在需要合并的单元格上
4、将合并的行数或者列数写在对应的属性值中
5、将多余的单元格注释掉
知识点三:表单
1、作用:显示、存储、提交数据
2、组成:表单域、表单标签、提交按钮
表单标签:action:表单向后台提交的地址
method:向后提交的方式 get post
表单域:表单中的元素 (包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框)
input控件
1、普通的文本框 type = text
获取焦点:光标放在输入框内,可以打出文字
单击指定名字获取焦点需要将label标签中的属性值与input输入框的属性值保持一级即可
密码框 :type=post
单选框:type =radio
多选框:type=checkbox
普通按钮:type=button
提交按钮:type=submit
重置按钮:type=reset
2、 value:输入框的值
3、 placeholder:提示信息
4、 默认单选选中 1、checked="checked
2、checked
3、checked=true
5、多选框:默认多选选中 1、checked="checked”
2、checked
3、checked=true
6、选择框默认选中1、selected=”selected”
2、selected
3、selected=true
7、label标签
label标签为input元素定义标注(标签)。
lable作用:用于绑定一个表单元素,当点击label标签的时候,被绑定的表单元素就会获得输入焦点。
8、textarea控件
如果需要输入大量的信息,就需要用到textarea/textarea标签。通过textarea控件可以轻松地创建多行文本输入框。
html表格、表单的更多相关文章
- 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 ...
- css表格表单和统筹
css:表格表单和统筹 学习目标 1.表单标签及属性高级 2.表格标签及属性高级 3.CSS统筹 4.BFC概念和应用场景 一.表单标签及属性高级 回顾: 表单的作用:用来收集用户的信息的; 表单的组 ...
- CSS3-animation,表格表单的格式化
animation 1.与transition一样,animation在IE9之前都不支持,不仅如此,还需要大量的供应商前缀 2.定义关键帧:@内容中需要大量的前缀 @keyframes fadeI ...
- bootstrap 列表 表格 表单 复选 单选 多选 输入框组
一.列表 ul li 二.表格 table (http://www.runoob.com/bootstrap/bootstrap-tables.html) 1. 基本表格 <table cla ...
- 22----2013.06.29---HTML--html介绍.超链接和图片,表格,表单,表单标签,meta,复习当天内容
01 HTML HTML :Hypertext Markup Language 超文本标记语言(类似于 裸奔的人.) 作用:向用户展示信息. CSS: Cascading 层叠样式表(类似于 人的 ...
- bootstrap快速入门笔记(七)-表格,表单
一,表格 1,<table>中加.table类 2,条纹表格:通过 .table-striped 类可以给 <tbody> 之内的每一行增加斑马条纹样式. **跨浏览器兼容性: ...
- html表格表单标签的结合
今天我尝试将表格表单基本标签结合起来放在网页中,发现再没用表单元素中<form></form>时各类标签功能都可显示,只是不能提交网页,所有与提交网页的标签都不能使用提交功能, ...
- Bootstrap学习笔记(3)--表格\表单\图片
Bootstrap表格 表格类: .table只会在表行之间增加横线; .table-striped会在表格行之间增减斑马线; .table-hover会给表设置鼠标悬停状态; ...
随机推荐
- STL源码剖析:序
STL源码包含哪些内容 容器:STL的核心 适配器:容器都是在一种最底层的基础容器上使用适配器实现 空间配置器:提供内存的管理 迭代器:由于遍历容器中的数据 算法:由于操作容器中的数据,如排序,拷贝, ...
- From 表单序列化为json对象(代码片段)
$.fn.serializeJson=function(){ var serializeObj={}; var array=this.serializeArray(); $(array).each(f ...
- DJANGO-天天生鲜项目从0到1-003-用户模块-登录
本项目基于B站UP主‘神奇的老黄’的教学视频‘天天生鲜Django项目’,视频讲的非常好,推荐新手观看学习 https://www.bilibili.com/video/BV1vt41147K8?p= ...
- linux中neovim+tmux安装与配置遇到的问题
Neovim 安装与配置 安装 pip3 install neovim 之前安装过anaconda,默认安装python3和pip3 检查状态 :checkhealth 终端输入'nvim' 进入nv ...
- python基础--14大内置模块(上)
python的内置模块(重点掌握以下模块) 什么是模块 常见的场景:一个模块就是一个包含了python定义和声明的文件,文件名就是模块名字加上.py的后缀. 但其实import加载的模块分为四个通用类 ...
- Spring Cache缓存注解
目录 Spring Cache缓存注解 @Cacheable 键生成器 @CachePut @CacheEvict @Caching @CacheConfig Spring Cache缓存注解 本篇文 ...
- MAVEN无法下载com.oracle:jdbc14:jar解决办法
原文链接:https://www.cnblogs.com/gqzdev/p/11742999.html 第一步,下载ojdbc14jar包: 链接:ojdbc14jar 提取码: 2m59 第二步,下 ...
- 【JMicro】微服务开发及使用
JMicro是一个用Java语言实现的开源微服务全家桶, 源码地址:https://github.com/mynewworldyyl/jmicro, Demo地址:http://124.70.152. ...
- PHP array_replace() 函数
实例 使用第二个数组($a2)的值替换第一个数组($a1)的值: <?php$a1=array("red","green");$a2=array(&quo ...
- PHP is_resource() 函数
is_resource() 函数用于检测变量是否为资源类型. PHP 版本要求: PHP 4, P+-HP 5, PHP 7高佣联盟 www.cgewang.com 语法 bool is_resour ...