第二课 站内布局、a标签、列表、表格与布局、内联框架标签的案例

一、站内布局

    <!-- 采用div+css模式 -->
    <div class="header">header</div>
    <div class="main">main</div>
    <div class="class">footer</div>

二、a标签

    <!-- 链接 -->
    <!-- 1.跳转到站外 -->
    <a href="https://www.php.cn">php100</a>
    <!-- 2.在指定窗口打开 -->
    <!-- 方法一：在内嵌窗口直接打开 -->
    <iframe src="http://tmall.com" frameborder="2"></iframe>
    <br />
    <hr />
    <!-- 方法二：通过a标签打开 -->
    <a href="https://tmall.com" target="tamll">天猫</a>
    <br />
    <a href="https://www.baidu.cn" target="tamll">百度</a>
    <br />
    <iframe frameborder="2" name="tamll"></iframe>
    <hr />
    <br />
    <!-- 3.站内跳转 -->
    <a href="#hello">我要找到你</a>
    <h2 id="hello" style="margin-top: 100px;">你发现我了吗？</h2>
    <a href="">回到顶部</a>
    <hr />

三、列表ol、ul、li

    <!-- 二.列表 -->
    <!-- 有序列表 -->
    <h2>东京奥运奖牌榜</h2>
    <ol>
      <li>
        美国113
      </li>
      <li>
        中国：88
      </li>
      <li>
        日本：58
      </li>
    </ol>
    <!-- 无序列表   -->
    <h2>购物车</h2>
    <ul>
      <li>笔记本电脑一台</li>
      <li>蓝牙耳机一台</li>
      <li>卫生纸10卷</li>
    </ul>
  </body>
  <hr />

用例表制作导航

  <ul class="menu">
    <li class="item"><a href="#">首页</a></li>
    <li class="item"><a href="">教学视频</a></li>
    <li class="item"><a href="">社区问答</a></li>
    <li class="item"><a href="">资源天下</a></li>
    <li class="item"><a href="">关于我们</a></li>
  </ul>
  <nav>
    <a href="" class="item">首页</a>
    <a href="" class="item">教学视频</a>
    <a href="" class="item">社区问答</a>
    <a href="" class="item">资源天下</a>
    <a href="" class="item">关于我们</a>
  </nav>

四、表格与布局

<!-- 表格由table+caption+thead+tbody+tfoot组成 -->
    <table width="500" border="1">
      <captoin>表格标题</captoin>
      <thead>
        <tr>
          <td>X</td>
          <td>X</td>
          <td bgcolor="red" colspan="3">X</td>
          <!-- <td>X</td>
          <td>X</td> -->
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>X</td>
          <td>X</td>
          <td bgcolor="violet" rowspan="2">X</td>
          <td>X</td>
          <td>X</td>
        </tr>
        <tr>
          <td>X</td>
          <td>X</td>
          <!-- <td>X</td> -->
          <td>X</td>
          <td>X</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td>X</td>
          <td>X</td>
          <td>X</td>
          <td>X</td>
          <td>X</td>
        </tr>
      </tfoot>
    </table>

五、内联框架标签

1、用于制作网站后台
2、采用a标签、li标签或者nav标签