表格标签

<!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. 2017-5-14 湘潭市赛 Similar Subsequence 分析+四维dp+一些简单优化

    Similar Subsequence Accepted : Submit : Time Limit : MS Memory Limit : KB Similar Subsequence For gi ...

  2. linux 命令之 ping

    ping命令主要用于检測主机的连通性. 语法: ping [-dfnqrRv] [-c <完毕次数>] [-i <间隔秒数>] [-I <网络接口>] [-l &l ...

  3. 通过Java发射机制调用可变参数函数

    1.获取可变参数的函数       获取可变参数的函数与获取参数类型为数组类型一样. clazz.getMethod("test", Object[].class);    其中O ...

  4. Spring4 MVC REST服务使用@RestController实例

    在这篇文章中,我们将通过开发使用 Spring4 @RestController 注解来开发基于Spring MVC4的REST风格的JSON服务.我们将扩展这个例子通过简单的注释与JAXB标注域类支 ...

  5. Eclipse 浏览(Navigate)菜单浏览 Eclipse 工作空间

    Eclipse 浏览(Navigate)菜单 浏览 Eclipse 工作空间 浏览(Navigate)菜单提供了多个菜单可以让你快速定位到指定资源. 上图中 Open Type, Open Type ...

  6. python 动态语言 __slots__

    python 是动态语言,就是说可以动态的创建属性, 别的语言不行,再创建类的时候已经规定好了 使用__slots__,注意要用tuple定义同意绑定的属性名称,仅对当前类起作用,对继承的子类是不起作 ...

  7. Google Careers 程序员必修课

    quote from : https://www.google.com/about/careers/students/guide-to-technical-development.html Techn ...

  8. css单行排版

    text-overflow: ellipsis; overflow: hidden; white-space: nowrap;

  9. 【BZOJ3526】[Poi2014]Card 线段树

    [BZOJ3526][Poi2014]Card Description 有n张卡片在桌上一字排开,每张卡片上有两个数,第i张卡片上,正面的数为a[i],反面的数为b[i].现在,有m个熊孩子来破坏你的 ...

  10. 【BZOJ3083/3306】遥远的国度/树 树链剖分+线段树

    [BZOJ3083]遥远的国度 Description 描述zcwwzdjn在追杀十分sb的zhx,而zhx逃入了一个遥远的国度.当zcwwzdjn准备进入遥远的国度继续追杀时,守护神RapiD阻拦了 ...