初识html标签

标题 链接 分割线 图片

  <!-- 通过<h1>~<h6>来定义标题 -->
  <h1>一级标题</h1>
  <h2>二级标题</h2>
  <h3>三级标题</h3>
  <!-- <a> 标签定义链接，例:在新标签页打开百度-->
  <a href="https://www.baidu.com/" target="_blank">百度</a>
  <!-- 下面是一条分割线 -->
  <hr />
  <!-- 打开一张图片 -->
  <img src="https://i.loli.net/2021/09/19/1GNfZleyhUrbXF9.jpg" alt="蓝天" height="200px" />

效果如下：

有序/无序/自定义列表

  <p>国内云服务市场份额排名</p>
  <ol>
    <li>阿里云</li>
    <li>腾讯云</li>
    <li>金山云</li>
    <li>华为云</li>
  </ol>
    <p>办公用品</p>
  <ul>
    <li>电脑桌</li>
    <li>办公椅</li>
    <li>笔记本</li>
    <li>钢笔</li>
    <li>打印机</li>
  </ul>
  <dl>
    <dt>html：</dt>
    <dd>是一种超文本标记语言: HyperText Markup Language</dd>
  </dl>

效果如下：

<iframe>标签

    <p>
      <a href="http://cloud.mokeyjay.com/pixiv/" target="pixiv">PIXIV每日排行榜</a>
    </p>
    <iframe srcdoc="点击上方链接显示pixiv日榜" frameborder="1" name="pixiv" style="width: 240px; height: 380px"></iframe>

效果如下：

表格

  <table>
    <caption>学生上课时间</caption>
    <thead>
      <tr>
        <td colspan="2">上午</td>
        <td colspan="2">下午</td>
        <td colspan="2">晚上</td>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>预备铃</td>
        <td>08:00</td>
        <td>预备铃</td>
        <td>13:50</td>
        <td>预备铃</td>
        <td>18:10</td>
      </tr>
      <tr>
        <td>第1节</td>
        <td>08:10-08:55</td>
        <td>第5节</td>
        <td>14:00-14:45</td>
        <td>第9节</td>
        <td>18:15-19:00</td>
      </tr>
      <tr>
        <td>第2节</td>
        <td>09:00-09:45</td>
        <td>第6节</td>
        <td>14:50-15:35</td>
        <td>第10节</td>
        <td>19:05-19:50</td>
      </tr>
      <tr>
        <td>第3节</td>
        <td>10:05-10:50</td>
        <td>第7节</td>
        <td>15:50-16:40</td>
        <td>第11节</td>
        <td>19:55-20:40</td>
      </tr>
      <tr>
        <td>第4节</td>
        <td>10:50-11:40</td>
        <td>第8节</td>
        <td>16:45-17:30</td>
        <td colspan="2"></td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td colspan="2">备注</td>
        <td colspan="4">中午休息，其他为课间休息时间</td>
      </tr>
    </tfoot>
  </table>

效果如下: