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

" class="reference-link">1. 标签

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

1.1 跳转到站外

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

如:

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

1.2 在指定窗口打开

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

如:

1. href="https://tmall.com" target="tmall">天猫

1.3 站内跳转

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

如:

1. href="#ziel">到目的地

2. id="ziel">目的地

3. href="#">回到顶部

" class="reference-link">2. 标签

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

标签" class="reference-link">2.1 结合标签

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

如:

1. href=""> src="dog.jpg" alt="dog" />

" class="reference-link">3. 列表标签

" class="reference-link">3.1 有序标签

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

1. 11. ....

案例如下:

输入:

1. 中国一线城市排名

2. 2. 北京
   4. 上海
   6. 广州
   8. 深圳
   10. 杭州

输出显示:

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

" class="reference-link">3.2 无序标签

无序列表标签语法为:

1. • ....

案例如下:

输入:

1. 文具列表如下

2. • 钢笔
   • 圆珠笔
   • 尺子
   • 橡皮擦
   • 圆规

输出显示:

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

ul+li+a+css 样式 的形式" class="reference-link">3.3.1 使用 ul+li+a+css 样式 的形式

1. class="menu" style="display: flex; place-content: space-around">
3. href="">首页
5. href="">教学视频
7. href="">社区问答
9. href="">资源下载
11. href="">关于我们

等同于" class="reference-link">等同于

1. class="menu" style="display: flex; place-content: space-around">
2. href="">首页
3. href="">教学视频
4. href="">社区问答
5. href="">资源下载
6. href="">关于我们

" class="reference-link">4. 表格标签

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. border="2" width="450" cellspacing="0" cellpadding="5">
3. 福建广州两地疫情报告
5. bgcolor="lightgreen">
7. 城市
8. 地区
9. 总数
10. 新增
11. 康复
16. colspan="5" align="center">福建省
19. rowspan="2">莆田
20. 荔城区
21. 60
22. 14
23. 10
26. 城厢区
27. 50
28. 10
29. 5
32. rowspan="3">厦门
33. 同安区
34. 80
35. 35
36. 16
39. 思明区
40. 120
41. 40
42. 23
45. 翔安区
46. 14
47. 2
48. 5
51. colspan="5" align="center">广东省
54. rowspan="2">广州
55. 宝安区
56. 12
57. 1
58. 10
61. 秋明区
62. 23
63. 5
64. 10
67. rowspan="3">佛山
68. 敬东区
69. 10
70. 1
71. 9
74. 普山区
75. 8
76. 0
77. 5
80. 德宏区
81. 5
82. 0
83. 5

显示效果: