<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

</head>

<body>

<form action="#" method="post">

    <input type="number" min="1" max="5">

    <input type="date" min="1990-01-01">

    <input type="date" max="2016-12-09">

    <input type="time" value="14:43">

    <input type="email">

    <button type="submit">提交</button>

</form>

</body>

</html>

01.html5中的一些input属性

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>表格的使用</title>

</head>

<body>

<!--

border:表格的边框

cellspacing：单元格之间的距离

cellpadding：单元格与内容之间的距离

width:代表表格在整个浏览器中的宽度显示

bgcolor:表格的背景色

align:表格中内容的对齐方式

-->

   <table  border="1" cellspacing="0" cellpadding="5" width="100%" bgcolor="#ffc0cb">

       <tr  align="center">

           <td>第1行第1列</td>

           <td>第1行第2列</td>

           <td>第1行第3列</td>

           <td>第1行第4列</td>

       </tr>

       <tr align="center">

           <td>第2行第1列</td>

           <td>第2行第2列</td>

           <td>第2行第3列</td>

           <td>第2行第4列</td>

       </tr>

   </table>

</body>

</html>

02.表格的基本使用

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>高级表格的使用</title>

</head>

<body>

 <table width="80%" cellspacing="0" cellpadding="0" border="1">

     <!--标题-->

 <caption>年终数据报表</caption>

    <!--页眉-->

     <thead bgcolor="yellow">

     <!--表头-->

     <tr>

         <th>月份</th>

         <th>收入</th>

     </tr>

     </thead>

     <!--主体-->

     <tbody bgcolor="pink">

     <tr>

         <td>1</td>

         <td>1000</td>

     </tr>

     <tr>

         <td>2</td>

         <td>2000</td>

     </tr>

     <tr>

         <td>3</td>

         <td>3000</td>

     </tr>

     <tr>

         <td>4</td>

         <td>4000</td>

     </tr>

     </tbody>

     <!--页脚-->

     <tfoot bgcolor="green">

     <tr>

         <td>平均月收入</td>

         <td>4000</td>

     </tr>

     <tr>

         <td>总计</td>

         <td>40000</td>

     </tr>

     </tfoot>

 </table>

</body>

</html>

03.高级表格的使用

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>表格的跨行跨列</title>

</head>

<body>

<!-- 跨行和跨列 只能在 列中td使用-->

 <table width="80%" cellspacing="0" cellpadding="0" border="1">

     <tr>

         <!--学生成绩跨了3列-->

         <td colspan="3">学生成绩</td>

     </tr>

     <tr>

         <!--张三跨了2行-->

         <td rowspan="2">张三</td>

         <td>语文</td>

         <td>85</td>

     </tr>

     <tr>

         <td>数学</td>

         <td>85</td>

     </tr>

     <tr>

         <td rowspan="2">李四</td>

         <td>语文</td>

         <td>85</td>

     </tr>

     <tr>

         <td>数学</td>

         <td>85</td>

     </tr>

 </table>

</body>

</html>

04.表格的跨行跨列

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>内联框架</title>

</head>

<body>

<!--

src:需要引入的文件路径

frameborder:是否显示边框   0  不显示   1 显示

scrolling：是否显示下拉框 auto   no  yes

align:根据周围的元素 这是位置

srcdoc：在内联框架中显示html内容

seamless:默认不显示边框和下拉框

name:内联框架的名称

-->

<iframe src="http://www.baidu.com"   srcdoc="<h1>哈哈</h1>"  align="top"></iframe>

<iframe src="http://www.baidu.com" seamless="seamless"></iframe>

</body>

</html>

iframe内联框架

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

<!-- 使用iframe 内联框架 实现页面间的相互跳转-->

<a href="1.html" target="mainFrame">第1页的内容</a>

<a href="2.html" target="mainFrame">第2页的内容</a>

<a href="3.html" target="mainFrame">第3页的内容</a>

<iframe   name="mainFrame" src="http://www.baidu.com" height="500px"  width="800px"/>

</body>

</html>

html02表格的使用的更多相关文章

  1. ASP.NET Aries 入门开发教程6：列表数据表格的格式化处理及行内编辑

    前言: 为了赶进度,周末也写文了! 前几篇讲完查询框和工具栏,这节讲表格数据相关的操作. 先看一下列表: 接下来我们有很多事情可以做. 1:格式化 - 键值的翻译 对于“启用”列,已经配置了格式化 # ...

  2. 03.LoT.UI 前后台通用框架分解系列之——多样的表格

    LOT.UI分解系列汇总:http://www.cnblogs.com/dunitian/p/4822808.html#lotui LoT.UI开源地址如下:https://github.com/du ...

  3. jQuery学习之路（6）- 简单的表格应用

    ▓▓▓▓▓▓ 大致介绍 在CSS技术之前,网页的布局基本都是依靠表格制作,当有了CSS之后,表格就被很多设计师所抛弃,但是表格也有他的用武之地,比如数据列表,下面以表格中常见的几个应用来加深对jQue ...

  4. 在Asp.Net中操作PDF – iTextSharp - 使用表格

    使用Asp.Net生成PDF最常用的元素应该是表格,表格可以帮助比如订单或者发票类型的文档更加格式化和美观.本篇文章并不会深入探讨表格,仅仅是提供一个使用iTextSharp生成表格的方法介绍 使用i ...

  5. DOM的小练习，两个表格之间数据的移动

    本次讲的是两个表格之间数据的移动,左边的表格移动到右边,并且左边表格移动内容消失. <head>   <meta http-equiv="Content-Type" ...

  6. JQuery实现表格的增加行和删除行

    利用JQuery实现datatables插件的增加和删除行操作 在学习过程中遇到了这个利用JQuery对表格行的增加和删除,特记录下来以供初学者参考. 下面是主要的代码: <meta http- ...

  7. jquery-treegrid树状表格的使用（.Net平台）

    上一篇介绍了DataTable,这一篇在DT的基础之上再使用jquery的一款插件:treegrid,官网地址:http://maxazan.github.io/jquery-treegrid/ 一. ...

  8. Python处理Excel表格

    同事小王今天说他有一个Excel表格,表格如下,一列是姓名,一列是电话号码,总共有大概2000行数据. 有的姓名占了一行,有的占了两行,还有一些占了三行的.如下图: 他问我可不可以全部统一成一行,而且 ...

  9. bootstrap表格

    Bootstrap 实例 - 边框表格 < 建立日期 2015-5-27 录入人员 test1 处理人员 test2 问题报障人   部门/城市公司   联系电话   问题类型   处理状态   ...

随机推荐

  1. .NET 4.0 使用 asyn await

    .NET 4.0 也可以使用asyn await 使用nuget 搜索await即可发现微软官方包,安装导项目就可以使用了.   参考:http://stackoverflow.com/questio ...

  2. 如何完美打造Win8 Metro版IE10浏览器页面（转）

    Windows8 内置两种 Internet Explorer 10 (以下简称 IE10),一个是在桌面环境下使用的 IE10:视窗操作.可以支持各种插件(ActiveX):而另外一个则是在新的开始 ...

  3. 转:php使用websocket示例详解

    原文来自于:http://www.jb51.net/article/48019.htm 这篇文章主要介绍了php使用websocket示例,需要的朋友可以参考下   下面我画了一个图演示 client ...

  4. [BZOJ 3207] 花神的嘲讽计划Ⅰ【Hash + 可持久化线段树】

    题目链接:BZOJ - 3207 题目分析 先使用Hash,把每个长度为 k 的序列转为一个整数,然后题目就转化为了询问某个区间内有没有整数 x . 这一步可以使用可持久化线段树来做,虽然感觉可以有更 ...

  5. [BestCoder Round#26] Apple 【组合数学】

    题目链接:HDOJ - 5160 题目分析 第一眼看上去,要求统计所有不同排列对答案的贡献.嗯...完全没有想法. 但是,如果我们对每个数字单独考虑,计算这个数字在总答案中的贡献,就容易多了. 对于一 ...

  6. js eval()函数 接收一个字符串，做为js代码来执行。 如： s='var d="kaka"'; 或者s=‘function (code){return code }’;

    eval函数接收一个参数s,如果s不是字符串,则直接返回s.否则执行s语句.如果s语句执行结果是一个值,则返回此值,否则返回undefined. 需要特别注意的是对象声明语法“{}”并不能返回一个值, ...

  7. C++ Primer 随笔 Chapter 13 复制控制

    1.复制控制包含的内容:复制构造函数.赋值操作符.析构函数 2.复制构造函数: a. 定义:只有单个形参,而且该形参是对本类类型的引用,这样的构造函数被成为复制构造函数 b. 适用情况: (1)根据一 ...

  8. Codeforces Round #316 (Div. 2)

    A. Elections time limit per test 1 second memory limit per test 256 megabytes input standard input o ...

  9. COJ 0288 路径(2015升级版)

    路径(2015升级版) 难度级别:D: 运行时间限制:1000ms: 运行空间限制:262144KB: 代码长度限制:2000000B 试题描述 WZJ在生日当天决定在他的领地举行一场马拉松比赛,他的 ...

  10. 字符串（LCT，后缀自动机）：BZOJ 2555 SubString

    2555: SubString Time Limit: 30 Sec  Memory Limit: 512 MBSubmit: 1620  Solved: 471 Description 懒得写背景了 ...