HTML基础标签深度解析：图像、超链接、列表与表格

在网页设计与开发的广阔天地里，HTML（HyperText Markup Language，超文本标记语言）作为基础中的基础，扮演着举足轻重的角色。今天，我将带领大家深入探索HTML中的几个核心标签：图像（<img>）、超链接（<a>）、列表（<ul>、<ol>、<li>）以及表格（<table>、<tr>、<td>、<th>）。这些标签不仅是构建网页的基石，更是实现网页功能与美观的关键。

图像（<img>）：网页的视觉灵魂

图像，作为网页中不可或缺的元素，能够瞬间吸引用户的眼球，传递丰富的视觉信息。在HTML中，<img>标签被用来嵌入图像。它拥有两个至关重要的属性：src和alt球，传递丰富的视觉信息。在HTML中，< img class=" long-press-able-img ">标签被用来嵌入图像。它拥有两个至关重要的属性：src和alt。src属性指明了图像文件的路径，确保图像能够正确加载；而alt属性则提供了图像的替代文本，当图像无法加载时，用户依然能够了解图像的内容，这对于提升网页的可访问性至关重要。

代码示例

<p>从本地导入图片（绝对路径）</p><br>
<img src="D:\p\a\2.jpg" width="100" height="100"><br>
<p>从本地导入图片（相对路径）</p><br>
<img src="./图片/1.jpg" width="400" height="400"><br>

超链接，是网页之间实现互联互通的神奇纽带。通过<a>标签，用户可以轻松地从当前页面跳转到其他页面、文件、电子邮件地址，甚至是电话号码。href属性是<a>标签的核心，它指定了链接的目标地址。

代码示例

<p>超链接</p><hr>
<a href="https://www.mi.com/">点击我看小米商城</a><br>
<a href="D:\p\a\2.jpg">点击我看苹果</a><br>
<a href="#我是橘子">  点击我看橘子</a><br>
<a href="#我是苹果">  点击我看苹果</a><br>
<a href="#我是香蕉">  点击我看香蕉</a><br>
<a name="我是橘子">  我是橘子</a><br>

列表（<ul>、<ol>、<li>）：信息的有序与无序展示

列表，是组织和展示信息的得力助手。HTML提供了两种类型的列表：无序列表（<ul>）和有序列表（<ol>）。无序列表中的项没有特定的顺序，适合展示无先后关系的信息；而有序列表中的项则按照特定的顺序排列，适合展示有逻辑顺序的信息。无论是无序列表还是有序列表，列表项都由<li>标签来定义。

代码示例

p>列表</p> <hr>
    <ol type="">
     <li>第一章</li>
     <li>第二章</li>
     <li>第三章</li>
     <li>第四章</li>
     <li>第五章</li>
    </ol>
 <hr>
    <ul type="none">
     <li>帽子</li>
     <li>衬衣</li>
     <li>裤子</li>
     <li>袜子</li>
     <li>鞋子</li>
    </ul>
 
     <ul>
         <li>裤子
          <ol>
          <li>牛仔裤</li>
          <li>西裤</li>
          </ol>
         </li> 
     </ul>

表格（<table>、<tr>、<td>、<th>）：数据的结构化展示

表格，是展示结构化数据的理想选择。在HTML中，<table>标签用于创建表格，<tr>标签定义表格的行，<td>标签定义表格的单元格，而<th>标签则用于定义表头单元格，通常用于标记表格的列。通过表格，我们可以清晰地展示数据之间的关系，让用户一目了然。

代码示例

<p>表格</p><hr>
<table border="1" width="200" height="200">
     <tr align="center">
          <th colspan="2"></th>
          <td rowspan="2"></td>
          
          
     </tr>
     <tr>
          <th></th>
          <td></td>
       
          
     </tr>
     
     <tr>
          <th rowspan="2" colspan="2"></th>
          <td></td>
     
     </tr>
     <tr>
          <th></th>
      </tr>

练习

</table>
<p>表单</p><hr>
<form action="">
     文本 <input type="text"><br>
     密码<input type="password"><br>
     提交<input type="submit" value=""><br>
     标准按钮<input type="button"><br>
     选着文件<input type="file"><br>
     单选框<input type="radio" name=""><br>
     复选框<input type="checkbox"><br>
     重置按钮<input type="reset"><br>
     图像<input type="image"><br>