HTML基础标签——图像、超链接、列表、表格

努力小贼

已于 2024-09-20 14:16:52 修改

阅读量1.6k

点赞数 36

分类专栏： web前端文章标签： html 前端

于 2024-09-13 00:41:46 首次发布

本文链接：https://blog.csdn.net/2302_81399643/article/details/142187267

版权

web前端专栏收录该内容

20 篇文章 1 订阅

订阅专栏

一、图像

图像标签

在HTML中，可以使用<img>标签来插入图像

<img>标签有以下属性：

src：指定图像的URL、可以是相对路径或绝对路径
alt：指定图像的替代文本，用于当图像无法显示时显示。这个属性是必需的，它提供了对图像的描述，并且对于可访问性也很重要
width：指定图像的宽度
height：指定图像的高度
title：指定图像的标题，当用户将鼠标悬停在图像上时显示
align：指定图像在页面中的对齐方式。可以使用以下值：left（左对齐）、right（右对齐）、top（顶部对齐）、middle（垂直居中对齐）、bottom（底部对齐）
border：通过设置border的属性值来定义边框的样式、宽度和颜色
hspace：用于设置图像左右的空白像素（水平边距）
vspace：用于设置图像上下的空白像素（垂直边距）

注：

如果图片文件与HTML文件位于同一目录下，可以直接使用文件名作为路径
如果图片文件位于HTML文件的上一级目录中，可以使用../表示上一级目录
如果图片文件位于HTML文件的另一个子目录中，可以使用相对路径指定路径

示例代码：

    <p>从本地导入图片（绝对路径）</p>
    <img src="D:\web前端\3.图片\ap.jpg" alt="" width="100" height="100">
    <p>从本地导入图片（相对路径）</p>
    <img src="./or.jpg" alt="" width="200" height="200">
    <p>从网络URL导入图片</p>
    <img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt=" " width="300" height="300" title="百度一下，你就知道">

运行结果：

示例代码：

<img src="example.jpg" alt="Example Image" width="500" height="300" title="Example" align="left" border="1">

上面的代码将插入一个名为example.jpg的图像，并将其显示为宽度为500像素，高度为300像素的图像。如果图像无法加载，将显示"Example Image"作为替代文本。当鼠标悬停在图像上时，显示标题"Example"。图像将左对齐，并在周围显示宽度为1像素的边框

网页背景图像

可以通过选择body元素来设置背景图像

代码格式：

<body background="背景图像路径">

在设置网页背景图像时，需要注意以下几点：

图像质量：选择图像时应考虑其分辨率和文件大小。高分辨率图像可能会增加加载时间，而文件过大可能会导致页面加载缓慢。优化您的图像以保持良好的质量和合适的文件大小。
图像格式：通常，JPEG格式适用于复杂的照片和图像，而PNG格式适用于带有透明背景的图像。选择合适的图像格式以确保图像在不同浏览器上的兼容性。
背景图片和文本可读性：确保您所选的背景图像不会干扰页面内容的可读性。选择对比度适宜的背景图像，并确保文本和其他内容在图像上方显示清晰。

记住，网页背景图像可以为您的网页增加视觉吸引力，但使用不当可能会导致用户体验不佳。因此，请选择适当的图像并进行必要的优化，以确保图像在网页上正确显示并不影响网页的性能。

二、超链接

超链接（Hyperlink）是网页中常用的一种元素，它可以连接到其他网页、文档、图片、视频等资源。通过点击超链接，用户可以快速跳转到目标资源所在的位置。

1.创建超链接

在HTML中，使用<a>标签来创建超链接，其基本语法如下：

<a href="目标资源的URL">链接文本</a>

在上述语法中，href属性指定了目标资源的URL或者本地文件，即用户点击链接后要跳转到的地址。链接文本是用户在页面上看到的可点击文本

例如，要创建一个跳转到百度网页的超链接，可以使用以下代码：

<a href="https://www.baidu.com">百度</a>

在创建超链接时，可以使用一些额外的属性来控制链接的行为和样式。其中，常用的属性包括：

target：指定链接在何处打开。常用取值包括_blank（在新标签页中打开链接）、_self（在当前标签页中打开链接）等
title：指定链接的提示文本，鼠标悬停在链接上时会显示

2.书签链接

书签链接常用于长页面或文档中，作用是帮助用户在网页中快速定位到特定的位置或内容，例如长篇文章、指南、教程或网页中的章节和小节标题等。通过在特定内容的目标位置设置锚点，也称锚点链接，用户可以通过点击书签链接直接跳转到感兴趣的部分，而不必手动滚动或搜索，可以通过使用<a>标签的name属性来实现

以下是一个示例：

<!-- 链接锚点 -->
<a href="#section1">跳转到第一节</a>
<!-- 建立锚点 -->
<a name="section1">第一节</a>

在上面的代码中，我们给锚点链接添加了一个name属性，并将其设置为"section1"。然后，我们再创建了一个带有相同名称的锚点链接。当用户点击"跳转到第一节"链接时，页面将会滚动到具有相应name值的锚点位置，即第一节的标题处。（注意：href 属性名前有 # ）

三、列表

列表标签是一种HTML标签，用于创建有序列表（<ol>）或无序列表（<ul>）

1.无序列表

无序列表是一种HTML标记，用于创建项目没有特定顺序的列表。无序列表使用<ul>标签表示，每个列表项使用<li>标签表示

示例代码如下（包含了列表的嵌套）：

<h2>商城支付向导</h2>
    <ul>
        <li type="circle">支付方式
            <ul type="disc">
                <li>货到付款</li>
                <li>财付通</li>
                <li>支付宝</li>
                <li>网银在线</li>
            </ul>
        </li>
    </ul>

运行结果：

无序列表在HTML中具有一些常用的属性，可以根据需要来调整列表的样式和行为。以下是一些常用的无序列表属性：

start：指定列表项的起始编号。默认情况下，无序列表的起始编号为1，可以使用start属性来设置其他开始编号

type：指定列表项的标记类型。默认值为"disc"，表示实心圆点；其他可能的值还有"circle"（空心圆点）和"square"（实心方块）

符号为指定的名为“mygraph.gif”的图片文件的代码为
<ul img src="mygraph.gif">

2.有序列表

有序列表是在HTML中用来表示按顺序排列的列表项。有序列表使用<ol>标签来定义，每个列表项使用<li>标签来表示。以下是一个示例有序列表：

示例代码如下：

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

运行结果：

有序列表是一种按照一定顺序排列的列表，通常使用数字或字母来标记。以下是一些有序列表的属性：

type：指定列表项的标记类型。默认值为"1"，表示使用数字；其他可能的值还有"a"（小写字母），"A"（大写字母），"i"（小写罗马数字），"I"（大写罗马数字）。

示例代码如下：

<ol type="a">
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
</ol>

运行结果：

四、表格

表格是一种用于以表格形式展示数据的HTML元素。在HTML中，使用<table>标签来定义一个表格，表格中的内容则使用<tr>、<td>和<th>标签来表示行、单元格和表头。

表格有多种属性可用来调整其样式和行为。以下是一些常用的表格属性：

1. border：设置表格边框的宽度。可以通过指定数值来定义边框宽度，或者将其设置为`0`来隐藏边框。

2. cellpadding：设置单元格内边距的大小。可以通过指定数值来定义内边距的大小。

3. cellspacing：设置单元格之间的间距大小。可以通过指定数值来定义间距的大小。

4. width和height：设置表格的宽度和高度。可以通过指定数值（如像素）或百分比来定义表格的宽度和高度。

5. align：设置表格在页面中的对齐方式。可以设置为`left`、`center`、`right`来分别左对齐、居中对齐或右对齐。

6. bgcolor：设置表格的背景颜色。可以使用颜色名称、HEX码或RGB值来定义颜色。

下面是一个简单的表格示例代码：

<table border="1" width="200">
  <tr>
    <th>姓名</th>
    <th>年龄</th>
    <th>性别</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>25</td>
    <td>男</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>30</td>
    <td>女</td>
  </tr>
</table>

运行结果：