HTML-绝对路径和表格理解

最新推荐文章于 2024-08-16 23:04:42 发布

Czyqyf

最新推荐文章于 2024-08-16 23:04:42 发布

阅读量203

点赞数

文章标签： html 前端

本文链接：https://blog.csdn.net/Czyqyf/article/details/131783931

版权

文章介绍了HTML中的绝对路径与相对路径概念，包括不同类型的路径引用方式，并提供了代码示例。接着讲解了<img>标签的使用，强调了src、alt等属性的重要性。最后，文章讨论了HTML表格的结构，如<caption>、<thead>、<tbody>、<tfoot>、<tr>、<td>和<th>标签，以及表格属性和单元格合并的概念。

摘要由CSDN通过智能技术生成

★一、绝对路径与相对路径

1.1、绝对路径

绝对定位就是相当与去泰山泰山永远在山东泰安，不会跟着你的移动而改变。它永远都在山东不会改变

<img src="D:\LeStoreDownload\aDrive.exe" alt="">

<img src="https://ts2.cn.mm.bing.net/th?id=ORMS.cdd2562c2dd434fd4alt="">

1.2、相对路径

相对定位就是你从不同的地方去泰山，路线跟方法都不相同。

图像文件和 HTML 文件位于同一文件夹：只需输入图像文件的名称即可，如<img src="logo.gif" /> 。

图像文件位于 HTML 文件的下一级文件夹：输入文件夹名和文件名，之间用 / 隔开，如： <img src="img/logo.gif" /> 。

图像文件位于 HTML 文件的上一级文件夹：在文件名之前加入…/,如果是上两级，则需要使用…/…/ ，以此类推，如：<img src="../logo.gif" />。

图像文件位于网站根目录：在文件名之前加入 /，如：<img src="/logo.png" />

/ 开头：代表根目录；./ 开头：代表当前所在的目录；…/ 开头：代表上一层目录。

代码如下：

<img src="image-20230710163311283.png" alt="">

<img src="./image-20230710163311283.png" alt="">

在这里插入图片描述

**同一路经如图：**文件处于并列可以直接填写图片路径进行引入

<img src="images/image-20230710163311283.png" alt="">

<img src="./images/image-20230710163311283.png" alt="">

在这里插入图片描述

**下一路径如上图所示：**以当前文件找同等路径（images下面 image-2023…的图像)

<img src="../images/image-20230710163311283.png" alt="">

<img src="../../images/image-20230710163311283.png" alt="">

在这里插入图片描述

上两路径如上图所示：图片文件位于HTML文件的上一级，在img src：属性添加…/可以找到上一级文件夹，上两级需要写上两个…/ 以此类推。

二、图像标签

在 HTML 中，图像由 <img> 标签定义。 <img>是空标签，意思是说，它只包含属性，并且没有闭合标

要在页面上显示图像，你需要使用源属性（src）。src 指 “source”。源属性的值是图像的 URL 地址。

<img src=“url” alt=“当图片加载不出来可以显示出来替换文本”

img标签属性：

src属性：用来指定图片地址的来源，可以是本地图片，也可以是网络图片来源；
width和height属性，用来设置图片宽和高，单位是px或% （css替代使用）；
alt属性：用来为图像定义一串预备的可替换的文本，在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯，这样有助于更好的显示信息，并且对于那些使用纯文本浏览器的人来说是非常有用的。
title属性：当鼠标移入图片的时候显示的文字内容；

<img src="./image-20230710163311283.png" alt="文本编译器">

在这里插入图片描述

当图片路径正确和浏览器可以正常加载可以正常显示如上图。

<mg src="mage-20230710163311283.png" alt="文本编译器">

当路径填写错误alt的替换文本就会显示出来，可以告诉读者丢失的信息

在这里插入图片描述

在这里插入图片描述

title：当鼠标放到图片里面会显示出来文字提示

三、HTML表格标签

在 html 流行之初，经常使用表格来制作网页：

3.1表格结构

在使用表格进行布局时，可以将表格划分为标题、头部、主体和脚注。相关标签如下：

<caption>：用于定义表格标题。
<thead>：用于定义表格的头部。一般包含列名、行号等表头信息。
<tbody>：用于定义表格的主体。一般包含数据内容。
<tfoot> ：用于定义表格的脚注。

定义行和列的标签：

<tr>：用于定义表格的一行。
<td>：用于定义表格的单元格。
<th>：用于定义表头单元格。

示例代码：

<body>
<table cellspacing="0" border="1">
    <!-- 标题 -->
    <caption>
        <h2>商品信息表</h2>
        <p>制表：2023/07/13</p>
    </caption>
    <!-- 列表头部 -->
    <thead>
        <tr>
            <th>ID</th>
            <th>品类</th>
            <th>品名</th>
            <th>数量</th>
            <th>单价</th>
            <th>金额</th>
        </tr>
    </thead>
    <!-- 列表主体 -->
    <tbody>
        <tr>
            <td>1</td>
            <td rowspan="2">衣服</td>
            <td>冬装</td>
            <td>1</td>
            <td>100</td>
            <td>100</td>
        </tr>
        <tr>
            <td>2</td>
            <td>夏装</td>
            <td>1</td>
            <td>100</td>
            <td>100</td>
        </tr>
        <tr>
            <td>3</td>
            <td rowspan="2">饮料</td>
            <td>可口可乐</td>
            <td>1</td>
            <td>100</td>
            <td>100</td>
        </tr>
        <tr>
            <td>4</td>
            <td>百事可乐</td>
            <td>1</td>
            <td>100</td>
            <td>100</td>
        </tr>
        <tr>
            <td colspan="6" bgcolor="#fdeadc">以下为备用物品</td>
        </tr>
        <tr>
            <td>5</td>
            <td rowspan="2">数码</td>
            <td>相机</td>
            <td>1</td>
            <td>100</td>
            <td>100</td>
        </tr>
        <tr>
            <td>6</td>
            <td>镜头</td>
            <td>1</td>
            <td>100</td>
            <td>100</td>
        </tr>
        <tr>
            <td rowspan="2" colspan="4">合计</td>
            <td bgcolor="#90cbdb">平均单价</td>
            <td bgcolor="#f7c08a">金额合计</td>
        </tr>
        <tr>
            <td>100</td>
            <td>100</td>
        </tr>
    </tbody>
</table>
</body>

效果如下图：

在这里插入图片描述

现在已经不推荐使用表格来处理布局，但表格仍然用于 HTML 布局，常用来处理和显示表格式数据。

3.2表格属性

属性名	含义	常用属性值	默认值
border	设置表格的边框。	像素值	0，无边框
cellspacing	设置单元格与单元格边框之间的空白间距。	像素值	2px
cellpadding	设置单元格内容与单元格边框之间的空白间距。	像素值	1px
width	设置表格的宽度。	像素值
height	设置表格的高度。	像素值
align	设置表格在网页中的水平对齐方式。