正文

2025渗透测试零基础学习 HTML中的A标签、Image标签与Table标签详解及实战案例

admin
admin V管理员 /0 评论 /22 阅读
0604
此篇文章发布距今已超过1天，您需要注意文章的内容或图片是否可用！

参考视频和课件：

链接：https://pan.quark.cn/s/e82f7b344f37

本文将深入讲解HTML中三个非常基础且常用的标签：<a>（超链接标签）、<img>（图像标签）和<table>（表格标签）。结合详细代码示例，帮助大家全面理解它们的用法及关键属性。

1. A标签（超链接标签）

<a>标签用于创建页面间的跳转链接，最常用于导航、跳转外部网页或页面内部锚点跳转。

1.1 基本用法

<ahref="https://www.baidu.com">百度首页</a>

点击文字“百度首页”会跳转到百度。

1.2 在新标签页打开链接

使用target="_blank"属性可让链接在新标签页打开：

<ahref="https://www.google.com"target="_blank">谷歌搜索（新标签打开）</a>

1.3 页面内锚点跳转

利用id定义页面目标，再用href="#id值"跳转。

示例：

<!-- 页面顶部区域 --><h2id="top">页面顶部</h2><!-- 很多内容占位 --><p>……（这里可以放很多内容）……</p><!-- 跳转链接 --><ahref="#top">返回顶部</a>

点击“返回顶部”时，页面将自动滚动回最顶部标题处。

2. Image标签（图像标签）

<img>标签用于向网页插入图片，是网页内容展示的重要元素。

2.1 基本属性

  • • src：图片地址（必填）
  • • alt：替代文本，图片无法加载时显示，有利于SEO和无障碍
  • • width和height：设置图片显示宽高（像素或百分比）

2.2 示例

<imgsrc="logo.png"alt="网站Logo"width="200"height="100">

2.3 图片不存在时效果

如果图片地址错误或图片不存在，会显示alt里设置的文字：

<imgsrc="notfound.jpg"alt="图片加载失败，显示此文字">

浏览器会用替代文字代替图片位置。

3. Table标签（表格标签）

表格用于展示二维数据，<table>是表格容器，里面嵌套<tr>（表格行）、<td>（单元格）和<th>（表头单元格）。

3.1 简单表格示例

<tableborder="1"cellspacing="2"cellpadding="10"><tr><th>姓名</th><th>职位</th></tr><tr><td>刘备</td><td>领导</td></tr><tr><td>关羽</td><td>将军</td></tr></table>
  • • border="1"：设置表格边框宽度
  • • cellspacing="2"：单元格间距（单元格之间的空白距离）
  • • cellpadding="10"：单元格内容与边框的距离（内边距）

3.2 单元格合并

  • • 横向合并（跨列）：使用colspan
<tr><tdcolspan="2">合并两列的单元格</td></tr>
  • • 纵向合并（跨行）：使用rowspan
<tr><tdrowspan="2">合并两行的单元格</td><td>第一行第二列</td></tr><tr><td>第二行第二列</td></tr>

3.3 复杂表格示例（含单元格合并）

<tableborder="1"cellspacing="0"cellpadding="8"><tr><th>姓名</th><th>职位</th><th>年龄</th></tr><tr><td>刘备</td><td>领导</td><td>50</td></tr><tr><td>关羽</td><td>将军</td><td>45</td></tr><tr><td>张飞</td><!-- 跨列合并：职位与年龄合并 --><tdcolspan="2">将军，45岁</td></tr><tr><!-- 跨行合并：姓名跨两行 --><tdrowspan="2">赵云</td><td>将军</td><td>40</td></tr><tr><td>护卫</td><td>42</td></tr></table>

4. 完整示例：结合A、Image、Table标签

<!DOCTYPE html><htmllang="zh-CN"><head><metacharset="UTF-8" /><title>HTML标签综合示例</title></head><body><h1id="top">HTML标签综合示例</h1><p>欢迎访问本页面。点击下面的链接跳转：</p><ul><li><ahref="https://www.baidu.com"target="_blank">百度首页（新标签打开）</a></li><li><ahref="#image-section">跳转到图片展示</a></li><li><ahref="#table-section">跳转到表格展示</a></li><li><ahref="#top">返回顶部</a></li></ul><hr><h2id="image-section">图片展示</h2><imgsrc="https://via.placeholder.com/300x150.png?text=示例图片"alt="示例图片"width="300"height="150" /><p>图片加载失败时显示替代文本。</p><hr><h2id="table-section">表格展示</h2><tableborder="1"cellspacing="2"cellpadding="8"><tr><th>序号</th><th>姓名</th><th>职位</th><th>备注</th></tr><tr><td>1</td><td>刘备</td><td>领导</td><td>无</td></tr><tr><td>2</td><td>关羽</td><td>将军</td><td>号称美须公</td></tr><tr><td>3</td><td>张飞</td><tdcolspan="2">将军且勇猛</td></tr><tr><tdrowspan="2">4</td><tdrowspan="2">赵云</td><td>将军</td><td>忠诚勇敢</td></tr><tr><td>护卫</td><td>深得刘备信任</td></tr></table></body></html>

5. 小结

  • • A标签：通过href指定跳转地址，target="_blank"新标签打开，支持页面内锚点跳转（href="#id"）。
  • • Image标签：src指定图片路径，alt提供图片替代文本，width和height调整尺寸。
  • • Table标签：用<table>定义表格，<tr>定义行，<td>定义单元格，<th>定义加粗表头单元格。支持边框border、单元格间距cellspacing、内边距cellpadding。通过rowspan和colspan实现跨行跨列单元格。

关 注 有 礼

欢迎关注公众号：网络安全者


推荐站内搜索：最好用的开发软件、免费开源系统、渗透测试工具云盘下载、最新渗透测试资料、最新黑客工具下载……
ZhouSa.com-周飒博客