Blogger Information
Blog 2
fans 0
comment 0
visits 1253
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
HTML 部分标签应用及案例学习
抠姐
Original
493 people have browsed it

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

1. 标签<a></a>

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

1.1 跳转到站外

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

如:

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

1.2 在指定窗口打开

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

如:

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

1.3 站内跳转

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

如:

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

2. 标签<img>

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

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

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

如:

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

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

3.1 有序标签<ol>

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

  1. <ol>
  2. <li></li>
  3. <li></li>
  4. <li></li>
  5. <li></li>
  6. <li></li>
  7. ....
  8. </ol>

案例如下:

输入:

  1. <h4>中国一线城市排名</h4>
  2. <ol>
  3. <li>北京</li>
  4. <li>上海</li>
  5. <li>广州</li>
  6. <li>深圳</li>
  7. <li>杭州</li>
  8. </ol>

输出显示:

1

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

3.2 无序标签<ul>

无序列表标签语法为:

  1. <ul>
  2. <li></li>
  3. <li></li>
  4. <li></li>
  5. <li></li>
  6. <li></li>
  7. ....
  8. </ul>

案例如下:

输入:

  1. <h4>文具列表如下</h4>
  2. <ul>
  3. <li>钢笔</li>
  4. <li>圆珠笔</li>
  5. <li>尺子</li>
  6. <li>橡皮擦</li>
  7. <li>圆规</li>
  8. </ul>

输出显示:

2

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

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

  1. <ul class="menu" style="display: flex; place-content: space-around">
  2. <li><a href="">首页</a></li>
  3. <li><a href="">教学视频</a></li>
  4. <li><a href="">社区问答</a></li>
  5. <li><a href="">资源下载</a></li>
  6. <li><a href="">关于我们</a></li>
  7. </ul>
等同于
  1. <nav class="menu" style="display: flex; place-content: space-around">
  2. <a href="">首页</a>
  3. <a href="">教学视频</a>
  4. <a href="">社区问答</a>
  5. <a href="">资源下载</a>
  6. <a href="">关于我们</a>
  7. </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 表格案例

  1. <table border="2" width="450" cellspacing="0" cellpadding="5">
  2. <caption>
  3. 福建广州两地疫情报告
  4. </caption>
  5. <thead bgcolor="lightgreen">
  6. <tr>
  7. <td>城市</td>
  8. <td>地区</td>
  9. <td>总数</td>
  10. <td>新增</td>
  11. <td>康复</td>
  12. </tr>
  13. </thead>
  14. <tbody>
  15. <tr>
  16. <td colspan="5" align="center">福建省</td>
  17. </tr>
  18. <tr>
  19. <td rowspan="2">莆田</td>
  20. <td>荔城区</td>
  21. <td>60</td>
  22. <td>14</td>
  23. <td>10</td>
  24. </tr>
  25. <tr>
  26. <td>城厢区</td>
  27. <td>50</td>
  28. <td>10</td>
  29. <td>5</td>
  30. </tr>
  31. <tr>
  32. <td rowspan="3">厦门</td>
  33. <td>同安区</td>
  34. <td>80</td>
  35. <td>35</td>
  36. <td>16</td>
  37. </tr>
  38. <tr>
  39. <td>思明区</td>
  40. <td>120</td>
  41. <td>40</td>
  42. <td>23</td>
  43. </tr>
  44. <tr>
  45. <td>翔安区</td>
  46. <td>14</td>
  47. <td>2</td>
  48. <td>5</td>
  49. </tr>
  50. <tr>
  51. <td colspan="5" align="center">广东省</td>
  52. </tr>
  53. <tr>
  54. <td rowspan="2">广州</td>
  55. <td>宝安区</td>
  56. <td>12</td>
  57. <td>1</td>
  58. <td>10</td>
  59. </tr>
  60. <tr>
  61. <td>秋明区</td>
  62. <td>23</td>
  63. <td>5</td>
  64. <td>10</td>
  65. </tr>
  66. <tr>
  67. <td rowspan="3">佛山</td>
  68. <td>敬东区</td>
  69. <td>10</td>
  70. <td>1</td>
  71. <td>9</td>
  72. </tr>
  73. <tr>
  74. <td>普山区</td>
  75. <td>8</td>
  76. <td>0</td>
  77. <td>5</td>
  78. </tr>
  79. <tr>
  80. <td>德宏区</td>
  81. <td>5</td>
  82. <td>0</td>
  83. <td>5</td>
  84. </tr>
  85. </tbody>
  86. </table>

显示效果:

Correcting teacher:天蓬老师天蓬老师

Correction status:qualified

Teacher's comments:
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post