zoukankan      html  css  js  c++  java
  • html表格和表单

    知识点一:表格

    1、表格标签  table

    2、表格的组成  行 tr  单元格  td

    3、建立表格步骤

    1、建立表格,

    2、判断行数和列数

    3、用行去包含单元格

    4、在每个单元格中去添加内容

    4、表格的各大属性

    cellspacing:边框与边框之间的距离

    cellpadding:单元格内容与边框之间的距离

    border:表格的边框

    表格的宽

    height:表格的高

    6、表格的结构:

    标题:caption标签

    表头:thead标签 表格的第一行,一般用来描述每一列所显示的内容,用thead标签讲第一行包起来,然后用th替换td,单元格中的内容相对于单元格水平居中,且加粗

    表格主体:tbody标签

    7、表格的标题,caption只在表格中使用

    8、table布局的缺点:

          a. 太深的嵌套,比如table>tr>td>h3,会导致搜索引擎读取困难,而且,最直接的损失就是大大增加了冗余代码量。

          b. 灵活性差,比如要将tr设置border等属性,是不行的,得通过td

          c. 代码臃肿,当在table中套用table的时候,阅读代码会显得异常混乱

          d. 混乱的colspan与rowspan,用来布局时,频繁使用他们会造成整个文档顺序混乱。

          e. 不够语义

    知识点二:合并单元格

    1、分类:跨行合并rowspan、跨列合并 colspan 

    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控件可以轻松的创建多行文本输入框

    9、去掉输入框的外轮廓  outline-style:none;

  • 相关阅读:
    安卓监听帧动画结束
    零基础学python-13.4 文件上使用列表解析与列表解析扩展
    零基础学python-13.3 列表解析简介与步骤分解
    零基础学python-13.2 手动迭代:iter和next
    零基础学python-13.1 迭代器简介与文件迭代器
    零基础学python-12.6 使用for和zip来并行使用多个序列
    零基础学python-12.5 修改列表的误区以及使用for和range修改列表
    零基础学python-12.4 while、for与range联合使用
    零基础学python-12.3 for循环
    零基础学python-12.2 关键字pass,else,break,continue
  • 原文地址:https://www.cnblogs.com/guirong/p/13513405.html
Copyright © 2011-2022 走看看