表格标签

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>表格标签</title>

</head>

<body>

    <!--

        ##表格标签

        ```html

        <table>

            <caption>表格名称</caption>

            <tr>

                <th>一个单元格</th>

                <th>一个单元格</th>

            </tr>

            <tr>

                <td>一个单元格</td>

                <td>一个单元格</td>

            </tr>

        </table>

        ```

        **table常见属性**

        - border:边框宽度

        - width:宽度

        - height:高度

        **tr的属性**

        - align: 对齐方式

        **td的属性**

        - width:宽度

        - height:高度

        - 合并单元格:(值的写法,合并几个单元格,值就写几)

            - 行合并:rowspan=""  将几行合并在一起,看上去是一列的几个单元格合并成了一个

            - 列合并:colspan=""  将几列合并在一起,看上去是一行的几个单元格合并成了一个

        **td和th**

        - 区别:

            - th中间的内容默认粗体居中显示

            - th一般用于做表头

     -->

    <!-- 一个简单的表格 -->

    <table border="1" width="50%" height="50%" bgcolor="gray">

        <caption>用户列表</caption>

        <tr align="center">

            <th>序号</th>

            <th>姓名</th>

            <th>性别</th>

        </tr>

        <tr align="center">

            <td>1</td>

            <td>张三</td>

            <td>男</td>

        </tr>

        <tr align="center">

            <td>2</td>

            <td>李四</td>

            <td>女</td>

        </tr>

    </table>

    <!-- 合并单元格 -->

    <table border="1" width="50%" height="50%" bgcolor="gray">

        <caption>用户列表</caption>

        <tr align="center">

            <th>默认单元格</th>

            <th>默认单元格</th>

            <th>默认单元格</th>

        </tr>

        <tr align="center">

            <td colspan="3">这是一个列合并单元格(colspan="3")</td>

        </tr>

        <tr align="center">

            <td rowspan="2">这是一个行合并单元格(rowspan="2")</td>

            <td>默认单元格</td>

            <td>默认单元格</td>

        </tr>

        <tr align="center">

            <td>默认单元格</td>

            <td>默认单元格</td>

        </tr>

    </table>

    <!-- 表格嵌套 -->

    <table border="1">

        <caption>表格的嵌套</caption>

        <tr>

            <td rowspan="3">

                <table>

                    <tr>

                        <td>2</td>

                        <td>2</td>

                    </tr>

                    <tr>

                        <td>2</td>

                        <td>2</td>

                    </tr>

                </table>

            </td>

        </tr>

        <tr>

            <td>1</td>

            <td>1</td>

            <td>1</td>

        </tr>

        <tr>

            <td>1</td>

            <td>1</td>

            <td>1</td>

        </tr>

    </table>

</body>

</html>

表单

这段我必须承认我非常无耻的抄了别人的笔记…

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>表单标签</title>

</head>

<body>

    <!--

        * 表单标签（**********）

            * 收集用户输入的数据

            * 表单的标签

            <form >

                * form的属性

                    * action="表单的提交路径"

                        * http://www.baidu.com

                        * html页面

                    * method="提交方式（默认是get方式）"（面试题）

                        * form表单的提交方式有哪些？（get和post的区别）

                            * 答：form表单提交方式有很多，常用的有两种post和get

                                * post和get提交方式的区别：

                                    * get方式会把参数列表显示在地址栏上，post方式不会（请求体）。

                                    * get方式说明网站安全级别较低，post安全级别较高。

                                    * get方式不支持大数据，post支持大数据。

                            * 推荐大家使用post方式。

                * 用户输入的内容

                <input type="类型" name="名称(必须要指定)" value="是否指定value属性" />

                    * name属性必须要指定，value可以看情况指定

                * type="text"           普通的文本框

                    * name必须指定

                * type="password"       密码框

                    * * name必须指定

                * type="radio"          单选按钮

                    * name必须指定  value必须指定

                    * name的属性，值要相同

                    * 默认值：checked=checked或者true

                * type="checkbox"       多选按钮

                    * name必须指定  value必须指定

                    * 默认值：checked=checked或者true

                * type="reset"          重置：恢复到最初的状态

                * type="submit"         提交表单

                    * 点击提交后，地址栏发生了变化（?sex=on）

                    * 在普通的文本框上添加name属性 name="username"之后，点击提交，地址栏发生了变化（?username=haha&sex=on）

                        String str = "?username=haha&sex=on";

                    * ?username=zhangsan&password=123&sex=nan&love=zq   

                * type="file"           选择文件

                    * name属性指定

                * type="hidden"         隐藏组件

                    * name指定 value指定    

                * type="button"         按钮

                    * value="显示的文字"

                    * 和js（javascript）   绑定事件

                * type="image"          图片

                    * 提交    引入外部的一个文件（图片）

                * 声明选择框

                    <select name="city">

                        <option value="bj"></option>

                        <option value="sh"></option>

                    </select>   

                * <textarea>文本域

                    * rows="行"

                    * clos="列"

                    * name属性指定

                    * selected="selected"   代表默认值

            </form>

     -->

     <form>

        输入姓名:<input type="text" name="username"/><br/>

        输入密码:<input type="password"/><br/>

        选择性别:<input type="radio" name="sex" value="male"/>男

                <input type="radio" name="sex" checked="checked" value="femal"/>女<br/>

        选择爱好:<input type="checkbox" name="love" value="basketball"/>篮球

                <input type="checkbox"/>足球

                <input type="checkbox"/>冰球

                <input type="checkbox"/>排球<br/>

        选择附件:<input type="file"><br/>

        隐藏组件:<input type="hidden" name="userID" value="001"><br/>

        选择城市:<select name="city">

                    <option>请选择</option>

                    <option value="wh">武汉</option>

                    <option value="hh">黑河</option>

                </select>

                <input type="reset"/>

                <input type="submit"/><br/>

                <input type="button" value="test"/>

                <input type="image" src="../imgs/tj.png" >

        个人简介:<textarea cols=10 rows="20"></textarea>

     </form>

</body>

</html>

其他

其他的忽略了…实在不感兴趣…

HTML学习笔记(下)的更多相关文章

  1. Zookeeper学习笔记(下)

    这是ZK学习笔记的下篇, 主要希望可以分享一些 ZK 的应用以及其应用原理 我本人的学习告一段落, 不过还遗留了一些ZK相关的任务开发和性能测试的任务, 留待以后完成之后再通过其他文章来进行分享了 Z ...

  2. 菜鸟教程之学习Shell script笔记(下)

    菜鸟教程Shell script学习笔记(下) 以下内容是学习菜鸟教程之shell教程,所整理的笔记 菜鸟教程之shell教程:http://www.runoob.com/linux/linux-sh ...

  3. Android学习笔记（十七）——数据库操作（下）

    //此系列博文是<第一行Android代码>的学习笔记,如有错漏,欢迎指正! 这一次我们来试一试升级数据库,并进行数据库的CRUD操作,其中, C 代表添加(Create) ,R 代表查询 ...

  4. Maven学习笔记-03-Eclipse下maven项目在Tomcat7和Jetty6中部署调试

    现在最新的Eclipse Luna Release 已经内置了Maven插件,这让我们的工作简洁了不少,只要把项目直接导入就可以,不用考虑插件什么的问题,但是导入之后的项目既可以部署在Tomcat也可 ...

  5. Ext JS4 学习笔记之发送表单（Form）时也将表单下的表格（Grid）数据一同发送的方法

    Ext JS4 学习笔记之发送表单(Form)时也将表单下的表格(Grid)数据一同发送的方法 昨天在开发的时候遇到个小问题,就是如何将Grid的内容与Form一起发送到服务器端.默认情况下,表单(F ...

  6. PHP学习笔记----IIS7下安装配置php环境

    原文:PHP学习笔记----IIS7下安装配置php环境 Php如何安装 Php版本的选择 Php在windows下的(php5.4.7)有两种版本: VC9 x86 Non Thread Safe ...

  7. 一起学ASP.NET Core 2.0学习笔记(一): CentOS下 .net core2 sdk nginx、supervisor、mysql环境搭建

    作为.neter,看到.net core 2.0的正式发布,心里是有点小激动的,迫不及待的体验了一把,发现速度确实是快了很多,其中也遇到一些小问题,所以整理了一些学习笔记: 阅读目录 环境说明 安装C ...

  8. docker学习笔记（一）—— ubuntu16.04下安装docker

    docker学习笔记(一)—— ubuntu16.04下安装docker 原创 2018年03月01日 14:53:00 标签: docker / ubuntu 1682 本文开发环境为Ubuntu ...

  9. input子系统学习笔记六 按键驱动实例分析下【转】

    转自:http://blog.chinaunix.net/uid-20776117-id-3212095.html 本文接着input子系统学习笔记五 按键驱动实例分析上接续分析这个按键驱动实例! i ...

随机推荐

  1. python笔记1，语法,函数,类和实例,异常

    >>> int(12.34) 12 >>> float('12.34') 12.34 >>> str(1.23) '1.23' >>& ...

  2. Java中String的split()方法的一些疑问和试验

    http://tjuking.iteye.com/blog/1507855 和我想的还是不大一样,因为不知道源码也不知道具体是怎么实现的,我的理解如下: 当字符串只包含分隔符时,返回数组没有元素:当字 ...

  3. plsql programming 11 记录类型

    记录类型非常类似数据库表中的行. 记录作为一个整体本身并没有值, 不过每个单独成员或字段都有值, 记录提供了一种把这些值当做一组进行操作的方法. 例如: 1: -- create a table 2: ...

  4. 挂载samb目录

    不管是ubuntu还是fedora文件管理器都带有挂载浏览smb目录的工具,但是我却找不到它的挂载点,所以想用命令行拷贝东西就没办法了,还是需要使用传统的挂载方式, mount -t cifs -o ...

  5. OpenCV学习笔记十七：opencv_bioinspired模块

    一,简介: 该库是基于仿生学的图像/视频处理库,目前包含模拟人类视网膜的算法.

  6. 数据库的SQL模式

    1.定义:何为MySQL的严格模式,简单来说就是MySQL自身对数据进行严格的校验(格式.长度.类型等),比如一个整型字段我们写入一个字符串类型的数据,在非严格模式下MySQL不会报错,同样如果定义了 ...

  7. Android无线测试之—UiAutomator工程建立

    一.环境要求: 已经搭建好了Android UiAotomator测试环境 二.新建测试工程: 1.打开eclipse,首次打开指定一个工作空间 2.新建一个Java Project,名叫:Demo1 ...

  8. JSON查看小工具

    JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.易于人阅读和编写.同时也易于机器解析和生成.它基于JavaScript Programming Langu ...

  9. CF 617E【莫队求区间异或和】

    E. XOR and Favorite Number time limit per test 4 seconds memory limit per test 256 megabytes input s ...

  10. IDEA中的lombok插件安装以及各注解的详细介绍

    IDEA中的lombok插件安装以及各注解的详细介绍 其实对于我们来说, 写好实体类后,直接用快捷方式生成get,set方法,还有 构造方法就行了,但是对于字段比较多的, 如果修改一个属性的话,就要再 ...