HTML5 day2

HTML5基础：图像、超链接、列表与表格标签

在构建网页的过程中，HTML5提供了一系列基础且强大的标签，用于插入图像、创建超链接、组织列表以及展示表格数据。这些标签是网页设计的基石，能够帮助我们创建出既美观又实用的网页。今天，我们就来详细探讨一下HTML5中的图像、超链接、列表和表格标签。

一、图像标签（<img>）

图像是网页中不可或缺的元素，能够直观地展示信息，增强用户体验。在HTML5中，我们使用<img>标签来插入图像。这个标签是一个空标签，意味着它不需要闭合标签。<img>标签的主要属性包括：

• src：指定图像的路径。
• alt：提供图像的替代文本，当图像无法显示时，这段文本会被显示出来。
• width和height：设置图像的宽度和高度（可选，但建议设置以保持页面布局的稳定性）。
• title 图像的标题，当用户将鼠标悬停在图像上时显示

<p>从本地导入图片绝对路径</p>
<img src="OIP-C.jpg" width="50" height="50">
<br>
<p>从本地导入图片</p>
<img src="../dist/tp.jpg" width="100" height="100">
<br>
<p>从网络url导入图片</p>
<img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" title="百度一下你就知道" width="200" height="200">

运行结果

二、超链接标签（<a>）

超链接是网页中的“导航员”，能够引导用户跳转到其他网页、文件或电子邮件地址。在HTML5中，我们使用<a>标签来创建超链接。这个标签需要闭合，并且通常包含文本或图像作为链接的显示内容。<a>标签的主要属性是href，用于指定目标URL。

<a href="OIP-C.jpg">点击此处打开图片（本地链接）</a><br>
<a href="https://www.mi.com/index.html">点击此处打开小米商城（外部链接）</a>

运行结果

三、列表标签

列表是网页中组织信息的一种有效方式。HTML5提供了两种类型的列表：无序列表和有序列表。

1. 无序列表（<ul>）：使用<ul>标签创建无序列表，每个列表项使用<li>标签表示。

<ul>  
  <li>列表项1</li>  
  <li>列表项2</li>  
  <li>列表项3</li>  
</ul>

运行结果

1. 有序列表（<ol>）：使用<ol>标签创建有序列表，每个列表项同样使用<li>标签表示。有序列表会自动为列表项编号。

<ol>  
  <li>第一步</li>  
  <li>第二步</li>  
  <li>第三步</li>  
</ol>

运行结果

四、表格标签

表格是展示结构化数据的一种直观方式。在HTML5中，我们使用<table>标签来创建表格，<tr>标签表示表格行，<th>标签表示表头单元格（通常加粗并居中显示），<td>标签表示普通单元格。此外，还可以使用<thead>标签来包含表头部分，<tbody>标签来包含表体部分。

<table border="3" width="200">
  <thead>
    <tr>
      <th>列名1</th>
      <th>列名2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>数据1</td>
      <td>数据2</td>
    </tr>
    <tr>
      <td>数据3</td>
      <td>数据4</td>
    </tr>
  </tbody>
</table>

运行结果

结语

通过掌握HTML5中的图像、超链接、列表和表格标签，我们能够创建出内容丰富、结构清晰的网页。