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;

  • 相关阅读:
    Sprinig.net 双向绑定 Bidirectional data binding and data model management 和 UpdatePanel
    Memcached是什么
    Spring.net 网络示例 codeproject
    jquery.modalbox.show 插件
    UVA 639 Don't Get Rooked
    UVA 539 The Settlers of Catan
    UVA 301 Transportation
    UVA 331 Mapping the Swaps
    UVA 216 Getting in Line
    UVA 10344 23 out of 5
  • 原文地址:https://www.cnblogs.com/guirong/p/13513405.html
Copyright © 2011-2022 走看看