table

table 表格 最早时表格是用来布局
caption标题标签
tr table header cell表头标签
td table data cell单元格标签
cellpadding 单元格内边距
cellspacing 单元格边距
align=”left|center|right”

thead:表格页眉标签 table head
tfoot：表格页尾标签 table foot
tbody：表格的主体标签 table body

thead->tfoot->tbody 加载关系，与写的顺序无关
这三个要出现都得写，不能只出现一个
如果table有大量数据，thead、tfoot加载不出来

  1.    table 表格 最早时表格是用来布局
  2.     caption标题标签
  3.     tr table header cell表头标签
  4.     td table data cell单元格标签
  5.     cellpadding 单元格内边距
  6.     cellspacing 单元格边距
  7.     align="left|center|right"
  9.     thead:表格页眉标签 table head
  10.     tfoot：表格页尾标签 table foot
  11.     tbody：表格的主体标签 table body
  13.         thead->tfoot->tbody 加载关系，与写的顺序无关
  14. 这三个要出现都得写，不能只出现一个
  15. 如果table有大量数据，thead、tfoot加载不出来
  17.     <table border="1" cellpadding="10" cellspacing="10">
  18.         <caption>VIP班级学生联络表</caption>
  19.         <tr>
  20.             <th>ID</th>
  21.             <th>姓名</th>
  22.             <th>电话号码</th>
  23.             <th>备注</th>
  24.         </tr>
  25.         <tr>
  26.             <td>1</td>
  27.             <td>东东</td>
  28.             <td>13900000000</td>
  29.             <td>班长</td>
  30.         </tr>
  32.         <tr>
  33.             <td>1</td>
  34.             <td>东东</td>
  35.             <td>13900000000</td>
  36.             <td>班长</td>
  37.         </tr>
  38.     </table>
  41.     <table border="1">
  42.         <caption>VIP班级学生联络表</caption>
  43.         <tr>
  44.             <th>ID</th>
  45.             <th>姓名</th>
  46.             <th>电话号码</th>
  47.             <th>备注</th>
  48.         </tr>
  49.         <tr>
  50.             <td>1</td>
  51.             <td>东东</td>
  52.             <td>13900000000</td>
  53.             <td>班长</td>
  54.         </tr>
  56.         <tr>
  57.             <td>1</td>
  58.             <td>东东</td>
  59.             <td>13900000000</td>
  60.             <td>班长</td>
  61.         </tr>
  63.         <tr>
  64.             <td>1</td>
  65.             <td>东东</td>
  66.             <td colspan="2">13位学生</td>
  67.         </tr>
  68.         <tr >
  69.             <td  colspan="4" align="right">kkk</td>
  70.         </tr>
  71.     </table>
  1.     <table border="1" cellpadding="10">
  2.         <caption>VIP班级学生联络表</caption>
  3.         <thead> 
  4.             <tr>
  5.                 <th>ID</th>
  6.                 <th>姓名</th>
  7.                 <th>电话号码</th>
  8.                 <th>备注</th>
  9.             </tr>
  10.         </thead>
  12.         <tbody>
  13.             <tr>
  14.                 <td>1</td>
  15.                 <td>东东</td>
  16.                 <td>13900000000</td>
  17.                 <td>班长</td>
  18.             </tr>
  20.             <tr>
  21.                 <td>1</td>
  22.                 <td>东东</td>
  23.                 <td>13900000000</td>
  24.                 <td>班长</td>
  25.             </tr>
  26.         </tbody>
  28.         <tfoot>
  29.             <tr >
  30.                 <td  colspan="4" align="right">kkk</td>
  31.             </tr>
  32.         </tfoot>
  33.     </table>

image.png

frameset

现在都不用了
http请求太多了，对搜索引擎不友好，不可以写在body里
以前用的多

frameset.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title></title>
  8. </head>
  9. <frameset rows="10%,90%" >
  10.     <frame src="top.html">
  11.     <!-- <frame> -->
  12.         <frameset cols="20%,80%">
  13.             <frame src="left.html">
  14.             <frame name="mainFrame" src="http://www.jd.com">
  15.         </frameset>
  16. </frameset>
  17. </html>

top.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>top</title>
  8. </head>
  9. <body>
  10.     <h1>世界剁手电商网站大赛冠军名单</h1>
  11. </body>
  12. </html>

left.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>left</title>
  8. </head>
  9. <body>
  10.     <ul>
  11.         <li>
  12.             <h3><a href="http://www.jd.com" target="mainFrame">京东</a></h3>
  13.         </li>
  15.         <li>
  16.             <h3><a href="http://www.taobao.com" target="mainFrame">淘宝网</a></h3>
  17.         </li>
  18.         <li>
  19.             <h3><a href="http://www.tmall.com" target="mainFrame">天猫网</a></h3>
  20.         </li>
  22.     </ul>
  23. </body>
  24. </html>

image.png

iframe内联框架

  1.    iframe inline-block element 内联块级元素
  2.     <iframe style="background-color: green;" src="" frameborder="0"></iframe>
  3. <br>
  4.     <iframe width="100%" height="1000" src="https://www.baidu.com/" ></iframe>
  1.   <p>
  2.         <a href="http://www.jd.com" target="mainFrame">京东</a>
  3.         <a href="http://www.taobao.com" target="mainFrame">淘宝网</a>
  4.         <a href="http://www.tmall.com" target="mainFrame">天猫网</a>
  5.     </p>
  6.     <iframe width="100%" height="1000" src="http://www.taobao.com/" name="mainFrame"></iframe>

image.png

功能性导航用这个好，减少http请求，在本网站就可以完成跳转

缺点：对搜索引擎不友好 两个滚动条 滚动条的体系混乱

scrolling=”yes|no|auto”

  1. scrolling="yes|no|auto"
  2. <body>
  3.     <p>
  4.         <a href="http://www.jd.com" target="mainFrame">京东</a>
  5.         <a href="http://www.taobao.com" target="mainFrame">淘宝网</a>
  6.         <a href="http://www.tmall.com" target="mainFrame">天猫网</a>
  7.     </p>
  8.     <iframe width="100%" height="1000" src="https://www.baidu.com/" name="mainFrame"
  9.      frameborder="1" scrolling="no" ></iframe>
  10.      <!-- frameborder像素 scrolling滚动条 -->
  11. </body>