Github代码地址

html02表格的使用

<!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>

 

posted @ 2016-12-08 15:00  @小葱拌豆腐  阅读(407)  评论(0编辑  收藏  举报

霸气