一.table标签

　　作用:定义html表格.一个table标签元素至少包含 thead(表头),tbody(表主题),还可以有tfoot(表底部)

　　html表格游table元素及一个或者多个tr,th,td元素组成.

　　tr元素定义表格行,th元素定义表头,td元素定义单元格.

　　此外,表格还可以进行列和行的合并(类似于Excel表格中的合并单元格)

　　rowspan:合并行(竖着合并),例如合并A1:A3这3行合并为一个单元格

　　colspan:合并列(横着合并),例如合并A1:E1这5列合并为一个横着的长单元格

小练习:利用html的table标签创建下面的表格.

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>table小练习</title>

</head>

<body>

  <!-- <div>

     <span>与行内元素展示的标签<span>

     <span>与行内元素展示的标签<span>

     <img src="./homesmall.png" alt="金融量化分析" style="width:200px;height:200px">

     <img src="./homesmall2.png" alt="人工智能实战"  style="width: 200px;height: 200px">

 </div> -->

  <p>

      <table border="1" cellspacing="0">

            <!-- 表格头部信息(标题) -->

            <thead>

                <tr>

                  <th colspan="3">

                    table的一些属性

                  </th>

                </tr>

            </thead>

            <!-- 表格主题 -->

            <tbody>

              <tr>

                <td>属性</td>

                <td>值</td>

                <td>描述</td>

              </tr>

              <tr>

                <td>border</td>

                <td>pixels</td>

                <td>定义表格的宽度.</td>

              </tr>

              <tr>

                <td>cellspacing</td>

                <td>pixels%</td>

                <td>规定单元格之间的间隔.</td>

              </tr>

              <tr>

                <td>summary</td>

                <td>text</td>

                <td>表格摘要信息(不会显示在浏览器上)</td>

              </tr>

            </tbody>

            <tfoot>

              <tr>

                <td colspan="3">这是一个表格的例子.</td>

              </tr>

            </tfoot>

      </table>

  </p>

</body>

</html>

小练习答案

二.form表单标签

　　定义:用于为用户输入创建 HTML 表单.

　　作用:向服务端传送数据. 　　

　　表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。
　　表单还可以包含 menus、textarea、fieldset、legend 和 label 元素。

2.1常用的属性:

2.2 常用的控件:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>from表单练习</title>

</head>

<body>

    <form action="https://www.baidu.com"method="get">

        <div>

            <label for="user">用户名:</label>

            <input type="text" name="username" id="user" placeholder="请输入用户名">

        </div>

        <div>

            <label for="password">密码:</label>

            <input type="password"name="password" id="password" placeholder="输入密码">

        </div>

        <div>

            性别:

            <input type="radio"name="sex" value="男" checked="">男

            <input type="radio"name="sex" value="女">女

        </div>

        <div>

            爱好:

            <input type="checkbox" name="check" value="游泳"checked=    "">游泳

            <input type="checkbox" name="check" value="打球">打球

            <input type="checkbox" name="check" value="跑步">跑步

            <input type="checkbox" name="check" value="骑行">骑行

        </div>

        <!-- 上传文件 -->

        <div>

            <input type="file" name="testfile">

        </div>

        <div>

            自我介绍:

            <textarea name="jieshao" id="" cols="30" rows="10" placeholder="自我介绍"></textarea>

        </div>

        <div>

            本人籍贯:

            <!-- selected表示默认选中项,size大于1,表示滚动式列表框 multiple=""表示可以被多选(针对滚动列表框)-->

            <select name="jiguan" id="">

                <option value="北京">北京</option>

                <option value="上海" selected="">上海</option>

                <option value="广州">广州</option>

                <option value="北京">深圳</option>

                <option value="东莞">东莞</option>

            </select>

        </div>

        <div>

            意向城市:

            <select name="city" id="" size="3" multiple="">

                <option value="郑州">郑州</option>

                <option value="北京"selected="">北京</option>

                <option value="苏州">苏州</option>

                <option value="杭州">杭州</option>

                <option value="上海">上海</option>

            </select>

        </div>

        <div>

            <!-- type="button"仅仅只是一个按钮类型,和form表单没有任何关系. -->

            <input type="button"name="btn" value="提交">

            <!-- 想要提交表单信息,type应该设置为"submit" -->

            <input type="submit" name="btn" value="submit">

        </div>

    </form>

</body>

</html>

form总结:

Unit 2.前端之html--table(表格),form(表单)标签的更多相关文章

  1. HTML table、form表单标签的介绍

    1. <table>标签 1.1说明: 在HTML 中定义表格布局. 1.2格式: <table> <caption></caption> <tr ...

  2. 【HTML】--- 列表、表格、form表单标签

    Html常用标签(2) 上篇博客讲了些常用的html标签 :[HTML]---常用标签(1) 这里主要讲 列表.表格标签和 form表单标签. 一.列表.表格标签 1.列表标签 概念 把内容以列表的形 ...

  3. HTML之form表单标签的学习

    from表单 表示 <form>form表单域</form> 作用 收集并替提交用户数据给指定服务器 属性 action:收集的数据的提交地址(也就是URL) method:收 ...

  4. html5之table嵌入form表单布局（务必注意：table标签必须在form表单内部，不能再form表单外部！）

    切记:用table标签来布局form表单元素,table标签必须放在form表单内部,否则可能会出现各种bug 原文地址:https://blog.csdn.net/weixin_43343144/a ...

  5. 前端笔记：React的form表单全部置空或者某个操作框置空的做法

    1.全部置空的做法,一般在弹出框关闭后,需要重置该form所有表单: this.props.form.resetFields(); 2.针对某个操作框置空的做法 例如,form表单里有一个部门和一个张 ...

  6. 前端 HTML form表单标签 input标签 type属性 file 上传文件

     加上上传文件功能 input type='file' - 依赖form表单里一个属性 enctype="multipart/form-data" 加上这个属性表示把你上次文件一点 ...

  7. [原创]java WEB学习笔记62：Struts2学习之路--表单标签:form,表单标签的属性，textfield, password, hidden，submit ，textarea ，checkbox ，list, listKey 和 listValue 属性，select ，optiongroup ，checkboxlist

    本博客的目的:①总结自己的学习过程,相当于学习笔记 ②将自己的经验分享给大家,相互学习,互相交流,不可商用 内容难免出现问题,欢迎指正,交流,探讨,可以留言,也可以通过以下方式联系. 本人互联网技术爱 ...

  8. [转]SpringMVC<from:form>表单标签和<input>表单标签简介

    原文地址:https://blog.csdn.net/hp_yangpeng/article/details/51906654 在使用SpringMVC的时候我们可以使用Spring封装的一系列表单标 ...

  9. HTML的<form>表单标签

    表单 HTML 表单用于搜集不同类型的用户输入. ㈠Form标签 ⑴form标签简介 在HTML中,如果创建一个表单,就把各种表单标签放在<form></form>标签内部.我 ...

随机推荐

  1. Oracle使用数据泵 (expdp/impdp)实施迁移

    实验环境: 1.导出环境:RedHat6.4+Oracle 11.2.0.4.0,利用数据库自带的scott示例用户进行试验测试. Directory:wjq à /tmp/seiang_wjq 2. ...

  2. Python：Day05 作业

    购物车: product_list = [['iphone6s',5800],['mac book',9800],['coffee',32],['book',80],['bike',1500]] sh ...

  3. day25 Python __setattr__

    #__getattr__只有在使用点调用属性且属性不存在的时候才会触发 class Foo: x=1 def __init__(self,y): self.y=y def __getattr__(se ...

  4. spring-config的坑

    背景 1.修改配置中心读取配置文件的分支,配置了spring.cloud.config.label后,报错,异常大概是读取本地配置文件异常 解决 反复尝试了之后,发现是配置仓库的配置文件格式(yml) ...

  5. Redis学习之字典源码分析

    字典,又叫映射,是一种用于保存键值对的抽象数据结构 划重点:抽象数据结构 Redisd字典使用哈希表作为底层实现,一个哈希表里面可以有多个哈希表结点,而每个哈希表结点就保存了字典中的一个键值对 一.哈 ...

  6. eclipse maven 常见问题解决方案

    一.eclipse集成与设置 传送门:http://www.cnblogs.com/tweet/p/7602044.html 二.创建maven webapp工程,报错 报错信息:Could not ...

  7. Linux 的系统目录介绍

    /bin 二进制可执行命令 /dev 设备特殊文件/etc 系统管理和配置文件/etc/rc.d 启动的配置文件和脚本/home 用户主目录的基点,比如用户user的主目录就是/home/user,可 ...

  8. docker容器与宿主交互数据

    1.查看容器 [root@localhost ~]# docker ps CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES cd6957191 ...

  9. Centos7安装Tomcat8

    一.下载Tomcat8压缩包 打开tomcat8的下载页面 http://tomcat.apache.org/download-80.cgi 二.解压以及重命名 [root@localhost ~]# ...

  10. Python-爬虫小例子-55

    import re from urllib.request import urlopen def getPage(url): response = urlopen(url) return respon ...