知识点一:表格

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表格、表单的更多相关文章

  1. Bootstrap框架(基础篇)之列表,表格,表单

    继续上篇的基础部分延伸,主要说一下列表,表格,表单相关Bootstrap框架变化以及基础知识. 1.列表篇 除了HTML提供的三种基本列表样式: 无序列表 <ul> <li>… ...

  2. HTML--绝对路径, 表格,表单, 框架

    URL, URI, URN URL: 统一资源定位符: Uniform Resource Locator URN: 持久可用的资源标准名称 Uniform Resource Name , 比如邮箱 U ...

  3. HTML表格表单综合——用户注册表

    今天学习了表格和表单知识,我综合了他们添加了一些拓展知识做了一个用户注册表,以下面代码来整理表格和表单知识: <!DOCTYPE html PUBLIC "-//W3C//DTD XH ...

  4. css表格表单和统筹

    css:表格表单和统筹 学习目标 1.表单标签及属性高级 2.表格标签及属性高级 3.CSS统筹 4.BFC概念和应用场景 一.表单标签及属性高级 回顾: 表单的作用:用来收集用户的信息的; 表单的组 ...

  5. CSS3-animation,表格表单的格式化

    animation 1.与transition一样,animation在IE9之前都不支持,不仅如此,还需要大量的供应商前缀 2.定义关键帧:@内容中需要大量的前缀 @keyframes  fadeI ...

  6. bootstrap 列表 表格 表单 复选 单选 多选 输入框组

    一.列表 ul li 二.表格 table  (http://www.runoob.com/bootstrap/bootstrap-tables.html) 1. 基本表格 <table cla ...

  7. 22----2013.06.29---HTML--html介绍.超链接和图片,表格,表单,表单标签,meta,复习当天内容

    01 HTML HTML :Hypertext Markup Language   超文本标记语言(类似于 裸奔的人.) 作用:向用户展示信息. CSS: Cascading 层叠样式表(类似于 人的 ...

  8. bootstrap快速入门笔记(七)-表格,表单

    一,表格 1,<table>中加.table类 2,条纹表格:通过 .table-striped 类可以给 <tbody> 之内的每一行增加斑马条纹样式. **跨浏览器兼容性: ...

  9. html表格表单标签的结合

    今天我尝试将表格表单基本标签结合起来放在网页中,发现再没用表单元素中<form></form>时各类标签功能都可显示,只是不能提交网页,所有与提交网页的标签都不能使用提交功能, ...

  10. Bootstrap学习笔记(3)--表格\表单\图片

    Bootstrap表格   表格类:    .table只会在表行之间增加横线;    .table-striped会在表格行之间增减斑马线;    .table-hover会给表设置鼠标悬停状态; ...

随机推荐

  1. 题解 洛谷 P6349 【[PA2011]Kangaroos】

    先考虑对题目进行转化,我们称两个区间有交集为这两个区间能匹配,每个询问就是在序列中最长能连续匹配的长度. 对序列中的一个区间\([l,r]\)和询问的一个区间\([L,R]\),若满足\(L \leq ...

  2. Dart中final和const关键字

    final和const 如果您从未打算更改一个变量,那么使用 final 或 const,不是var,也不是一个类型. 一个 final 变量只能被设置一次,两者区别在于:const 变量是一个编译时 ...

  3. I 2 C、 SPI、 USB驱动架构

    根据图12.4, Linux倾向于将主机端的驱动与外设端的驱动分离, 而通过一个核心层将某种总线的协议进行抽象, 外设端的驱动调用核心层API间接过渡到对主机驱动传输函数的调用. 对于I 2 C. S ...

  4. 分布式锁-Redis方案

    #!/usr/bin/env python # coding=utf-8 import time import redis class RedisLock(object): def __init__( ...

  5. 使用Openresty构建认证网关

    [入门]使用Openresty构建认证网关 lwhile关注 0.5092017.10.07 16:00:03字数 1,330阅读 4,112 在单体应用中, 我们可以通过 cookie + sess ...

  6. org.apache.catalina.LifecycleException: Failed to start component [StandardEngine[Catalina].StandardHost[localhost].StandardContext[/book]] Tomcat ServletXml 异常

    此异常是因为xml配置serlvet-url-pattern缺少’/’     应该改为 /regist   背景: 写了base标签 form表单的action属性的值   个人分析: ️表单提交时 ...

  7. PHP strtr() 函数

    实例 把字符串中的字符 "ia" 替换成 "eo":高佣联盟 www.cgewang.com <?php echo strtr("Hilla W ...

  8. PAM学习笔记

    想了想 还是要先把字符串的东西先都学完告一段落了再说 时间不多了 加油~. PAM 回文自动机 比SAM简单到不知道哪里去了. 回文自动机和其他自动机一样有字符集 有状态 有转移. 一个字符串的回文自 ...

  9. bzoj 2225 [Spoj 2371]Another Longest Increasing

    这道题 连续上升的三元组 且已经按照第一维排好序了. 直接上CDQ分治即可 当然也是可以2-Dtree解决这个 问题 但是感觉nlog^2 比nsqrt(n)要快一些.. 算是复习一发CDQ分治吧 也 ...

  10. js的栈内存和堆内存

    栈内存和堆内存在了解一门语言底层数据结构上,挺重要的,做了个总结 JS中的栈内存堆内存 JS的内存空间分为栈(stack).堆(heap).池(一般也会归类为栈中). 其中栈存放变量,堆存放复杂对象, ...