day35 table and forme

本文详细介绍了HTML中的表格标签,包括创建表格、设置表格属性、定义表格结构以及合并单元格的方法。同时,讲解了表单标签的应用,如form、input、label、textarea和下拉菜单的使用,以及表单数据的提交方式。
摘要由CSDN通过智能技术生成

1. 表格标签
    表格是较为常用的一种标签,但不是用来布局,常用来处理、显示表格式数据。
    1.1 创建表格
        在HTML网页中,要想创建表格,就需要使用表格相关的标签。创建表格的基本语法格式如下:
            <table>
              <tr>
                <td>单元格内的文字</td>
                ...
              </tr>
              ...
            </table>
        在上面的语法中包含三对HTML标签,分别为 table、tr、td,他们是创建表格的基本标签,缺一不可,下面对他们进行具体地解释。
        1.table用于定义一个表格。
        2.tr 用于定义表格中的一行,必须嵌套在 table标签中,在 table中包含几对 tr,就有几行表格。
        3.td /td:用于定义表格中的单元格,必须嵌套在<tr></tr>标签中,一对 <tr> </tr>中包含几对<td></td>,就表示该行中有多少列(或多少个单元格)。
    1.2 表格属性
        border        设置表格的边框
        cellspacing    设置单元格之间的空白间距
        cellpadding    设置单元格内容与单元格边框的空白间距
        width        设置表格的宽度
        height        设置表格的高度
        glign        设置表格在网页中的水平对齐方式
    1.3 表格结构
        在使用表格进行布局时,可以将表格划分为头部、主体和页脚(页脚因为有兼容性问题,我们不在赘述),具体如下所示:
        <thead></thead>:用于定义表格的头部。必须位于<table></table> 标签中,一般包含网页的logo和导航等头部信息。
        <tbody></tbody>:用于定义表格的主体。位于<table></table>标签中,一般包含网页中除头部和底部之外的其他内容。
    1.4 表格标题
        定义和用法:caption 元素定义表格标题。
        <table>
            <caption>我是表格标题</caption>
        </table>
        注意:
        1. caption标签只存在表格里面,必须紧随 table 标签之后。
        2. 只能对每个表格定义一个标题。通常这个标题会被居中于表格之上。
    1.5 合并单元格
        跨行合并:rowspan
        跨列合并:colspan
        1、先判断跨行合并还是跨列合并
        2、跨行合并用rowspan属性,跨列合并用个colspan属性  
        3、将rowspan 或者colspan写在第一个要合并的单元格上
        4、将合并的行数和列数写在指定的属性值上
        5、将多余的单元格注释掉
2. 表单标签
    应用场景:主要是应用在数据的提交,比如点击按钮发送数据到服务端。
    2.1. 表单标签
        在HTML中,form标签被用于定义表单域,即创建一个表单,以实现用户信息的收集和传递,form中的所有内容都会被提交给服务器。创建表单的基本语法格式如下:
        <form action="url地址" method="提交方式" name="表单名称">
          各种表单控件
        </form>
        常用属性:
            1. action在表单收集到信息后,需要将信息传递给服务器进行处理,action属性用于指定接收并处理表单数据的服务器程序的url地址。
            2. method用于设置表单数据的提交方式,其取值为get或post。
            3. name用于指定表单的名称,以区分同一个页面中的多个表单。
    2.2. input控件
        type    text        单行文本输入框
                password    密码输入框
                radio        单选按钮
                checkbox    复选框
                button        普通按钮
                submit        提交按钮
                reset        重置按钮
                image        图形形式的提交按钮
                file        文件域
        name    用户自定义    控件的名称
        value    用户自定义    input空间中的默认文本值
        size    正整数        input空间在页面中的显示宽度
        checked    checked        选择控件中的默认项
        注意:
        radio如果是一组,必须给他们命名相同的名字name,这样就可以多个选其中的一个啦。
        Input的size跟字体大小有关系,不设置的情况下,浏览器默认情况下,input默认的输入框的宽度就是169px
    2.3 label 标签
        label标签为input元素定义标注(标签)。
        lable作用:用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点。
        如何绑定元素呢? for属性规定label与哪个表单元素绑定。
        <label for="male">Male</label>
        <input type="radio" name="sex" id="male" value="male">
    2.4 textarea控件
        如果需要输入大量的信息,就需要用到textarea/textarea标签。通过textarea控件可以轻松地创建多行文本输入框,其基本语法格式如下:
        <textarea cols="宽度 " rows="高度">  默认是20
          文本内容
        </textarea>
    2.5 下拉菜单
        <select>
          <option>选项1</option>
          <option>选项2</option>
          <option>选项3</option>
          ...
        </select>
        注意:
        1. select中至少应包含一对option。
        2. 在option中定义selected ="selected "时,当前项即为默认选中项。

   

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值