HTML-绝对路径和表格理解

Czyqyf

于 2023-07-18 13:08:13 发布

阅读量148

点赞数

文章标签： html 前端

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

版权

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

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	设置表格在网页中的水平对齐方式。

合并单元格

跨行合并：rowspan；跨列合并：colspan。合并的顺序：从上到下，自左到右。

Czyqyf

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML-绝对路径和表格理解

图片文件位于HTML文件的上一级，在img src：属性添加…/可以找到上一级文件夹，上两级需要写上两个…图像文件位于 HTML 文件的上一级文件夹：在文件名之前加入…要在页面上显示图像，你需要使用源属性（src）。**下一路径如上图所示：**以当前文件找同等路径（images下面 image-2023…现在已经不推荐使用表格来处理布局，但表格仍然用于 HTML 布局，常用来处理和显示表格式数据。合并的顺序：从上到下，自左到右。图像文件和 HTML 文件位于同一文件夹：只需输入图像文件的名称即可，如。
复制链接

扫一扫