HTML 部分标签应用及案例学习

HTML 部分标签应用及案例学习

1. 标签<a></a>

链接标签，有三种表现形式

1.1 跳转到站外

直接给出站外地址进行跳转

如:

<a href="https://www.jd.com">京东</a>

1.2 在指定窗口打开

定义指定窗口的 name 属性，a 标签用 target 指向 name 属性,点击链接则在指定窗口打开链接

如:

<a href="https://tmall.com" target="tmall">天猫</a>
<iframe frameborder="2" name="tmall"></iframe>

1.3 站内跳转

定义站内跳转位置标签的 id，a 标签 href 用 #+id 来进行跳转

如:

<a href="#ziel">到目的地</a>
<p id="ziel">目的地</p>
<a href="#">回到顶部</a>

2. 标签<img>

此为图像标签，结构为 <img src="" alt="" /> 其中 src 属性为图片的地址，alt 是当图片无法显示时显示的名称

2.1 结合<a></a>标签

当此标签定义在 a 标签的链接名称处时，则可实现点击图像进行链接跳转

如:

<a href=""><img src="dog.jpg" alt="dog" /></a>

3. 列表标签<ol></ol> <ul></ul>

3.1 有序标签<ol>

有序标签自动生成有顺序的列表样式，语法为:

<ol>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  ....
</ol>

案例如下:

输入:

<h4>中国一线城市排名</h4>
<ol>
  <li>北京</li>
  <li>上海</li>
  <li>广州</li>
  <li>深圳</li>
  <li>杭州</li>
</ol>

输出显示:

PS: 有序标签不经常使用，如果要用请求无序列表+css 代替它

3.2 无序标签<ul>

无序列表标签语法为:

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  ....
</ul>

案例如下:

输入:

<h4>文具列表如下</h4>
<ul>
  <li>钢笔</li>
  <li>圆珠笔</li>
  <li>尺子</li>
  <li>橡皮擦</li>
  <li>圆规</li>
</ul>

输出显示:

3.3 无序列表标签结合链接标签实现导航

3.3.1 使用 ul+li+a+css 样式 的形式

<ul class="menu" style="display: flex; place-content: space-around">
  <li><a href="">首页</a></li>
  <li><a href="">教学视频</a></li>
  <li><a href="">社区问答</a></li>
  <li><a href="">资源下载</a></li>
  <li><a href="">关于我们</a></li>
</ul>

等同于

<nav class="menu" style="display: flex; place-content: space-around">
  <a href="">首页</a>
  <a href="">教学视频</a>
  <a href="">社区问答</a>
  <a href="">资源下载</a>
  <a href="">关于我们</a>
</nav>

4. 表格标签<table></table>

4.1 表格组成

4.1.1 表格构成元素

• table+caption(表格标题)+thead(表头)+tbody(表格主题)+tfoot(表尾)

• 表格数据放在 tr(表行)+td(表单元格) 中

4.1.2 注意点

• 表格中的所有数据必须放在单元格 td 的元素中,所有td 必须写到 tr 中

• 表格中的单元格可以水平或者垂直合并。合并操作一定是发生在单元格上 td 元素，即合并属性 colspan,rowspan,一定要写到被合并的起始单元格上

• tbody为表格主体，可多个存在于表中

4.2 表格案例

<table border="2" width="450" cellspacing="0" cellpadding="5">
  <caption>
    福建广州两地疫情报告
  </caption>
  <thead bgcolor="lightgreen">
    <tr>
      <td>城市</td>
      <td>地区</td>
      <td>总数</td>
      <td>新增</td>
      <td>康复</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td colspan="5" align="center">福建省</td>
    </tr>
    <tr>
      <td rowspan="2">莆田</td>
      <td>荔城区</td>
      <td>60</td>
      <td>14</td>
      <td>10</td>
    </tr>
    <tr>
      <td>城厢区</td>
      <td>50</td>
      <td>10</td>
      <td>5</td>
    </tr>
    <tr>
      <td rowspan="3">厦门</td>
      <td>同安区</td>
      <td>80</td>
      <td>35</td>
      <td>16</td>
    </tr>
    <tr>
      <td>思明区</td>
      <td>120</td>
      <td>40</td>
      <td>23</td>
    </tr>
    <tr>
      <td>翔安区</td>
      <td>14</td>
      <td>2</td>
      <td>5</td>
    </tr>
    <tr>
      <td colspan="5" align="center">广东省</td>
    </tr>
    <tr>
      <td rowspan="2">广州</td>
      <td>宝安区</td>
      <td>12</td>
      <td>1</td>
      <td>10</td>
    </tr>
    <tr>
      <td>秋明区</td>
      <td>23</td>
      <td>5</td>
      <td>10</td>
    </tr>
    <tr>
      <td rowspan="3">佛山</td>
      <td>敬东区</td>
      <td>10</td>
      <td>1</td>
      <td>9</td>
    </tr>
    <tr>
      <td>普山区</td>
      <td>8</td>
      <td>0</td>
      <td>5</td>
    </tr>
    <tr>
      <td>德宏区</td>
      <td>5</td>
      <td>0</td>
      <td>5</td>
    </tr>
  </tbody>
</table>

显示效果: