表格标签

<!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. UVa10099_The Tourist Guide(最短路/floyd)(小白书图论专题)

    解题报告 题意: 有一个旅游团如今去出游玩,如今有n个城市,m条路.因为每一条路上面规定了最多可以通过的人数,如今想问这个旅游团人数已知的情况下最少须要运送几趟 思路: 求出发点到终点全部路其中最小值 ...

  2. GitBlit （1）-- 在linux 安装 GitBlit 并运行

    Git是一款注重速度.数据完整性.分布式支持和非线性工作流的分布式版本控制工具.Git最初由Linus Torvalds在2005年为Linux内核开发而设计,如今已经成为被广泛接受的版本控制系统. ...

  3. 15：开发Rsync服务启动脚本案例

    [root@m01 ~]# rsn_count="ps -ef|grep 'rsync --d[a]emon'|wc -l" [root@m01 ~]# echo ${rsn_co ...

  4. layout折叠后显示标题

    Easyui的layout折叠后显示怎样可以显示标题 //在layout的panle全局配置中,增加一个onCollapse处理title$.extend($.fn.layout.paneldefau ...

  5. OpenCV学习笔记五：opencv_legacy模块

    opencv_legacy,顾名思义,该模块是用于兼容以前的opencv代码而设立的. 如果你希望用最新的opencv代码和特性,请勿使用该模块.

  6. Python：Django【基础篇】

    Python的WEB框架有Django.Tornado.Flask 等多种,Django相较与其他WEB框架其优势为:大而全,框架本身集成了ORM.模型绑定.模板引擎.缓存.Session等诸多功能. ...

  7. awk 特征相同的行合并

    [root@linux-node1 ~]# cat test.txt hisk01 hisk02 hisk03 hisk04 hisk05 hisk06 hisk07 hisk08 [root@lin ...

  8. Eclipse调试部分手机不显示日志问题解决

    在拨号键盘输入一串指令,然后会进入到工程模式,最后可以在Log设置里面设置了. 华为:*#*#2846579#*#* 酷派:*20121220#

  9. Native VLAN打上标记

    802.1Q和ISL都知道两者的区别在于前者对native vlan的流量不打标记,而后者统一都打标记. 配置成Native VLAN的Trunk端口,收到Native VLAN的帧后,不打标记直接从 ...

  10. 【BZOJ1190】[HNOI2007]梦幻岛宝珠 分层背包DP

    [BZOJ1190][HNOI2007]梦幻岛宝珠 Description 给你N颗宝石,每颗宝石都有重量和价值.要你从这些宝石中选取一些宝石,保证总重量不超过W,且总价值最大为,并输出最大的总价值. ...