HTML标签之路径标签

引用外部文件(如超链接或者插入图片)时，经常会遇到我们的页面文件跟要引用的目标文件不在同一目录下的情况，这个时候，就带来了文件引用路径的问题。通常情况下，我们将引用的路径分为两种情况，绝对路径和相对路径。

绝对路径

概念

绝对路径是指文件在硬盘上真正存在的路径，即物理路径。例如“bg.jpg”这个图片是存放在硬盘的“D:\work\code\imgs”目录下，那么， “bg.jpg”这个图片的绝对路径就是：

应用

通常我们使用绝对路径，更多应用是在定位网络资源上，

如：https://image.so.com/i?ie=utf-8&src=hao_360so&q=%E6%95%85%E5%AE%AB%E7%BB%9D%E7%BE%8E%E9%9B%AA%E6%99%AF

使用绝对路径的缺点

在实际开发中，我们很少会使用绝对路径，如果使用“D:\work\code\imgs\bg.jpg”来指定背景图片的位置，在自己的计算机上浏览可能会一切正常，但是上传到Web服务器上浏览就很有可能不会显示图片了。因为上传到Web服务器上时，可能整个网站并没有放在Web服务器的D盘，有可能是E盘或H盘。即使放在Web服务器的D盘里，Web服务器的E盘里也不一定会存在“D:\work\code\imgs\bg.jpg”这个目录，因此在浏览网页时是不会显示图片的

相对路径

为了不同设备存放路径不一致的这种情况，通常在网页中指定文件时，都会选择使用相对路径。所谓相对路径，就是相对于当前文件的位置。关于相对路径，有以下三种情况：

同级查找

当图像文件和HTML文件位于同一文件夹时，只需输入图像文件的名称即可，如：

查找下一级

当图像文件位于HTML文件的下一级文件夹，输入文件夹名和文件名，之间用“/”隔开，如：

查找上一级

当图像文件位于HTML文件的上一级文件夹，在文件名之前加入“…/” ，如果是上两级，则需要使用 “…/ …/”，以此类推，如：

止并禁用防火墙

systemctl stop firewalld.service    #停止firewalld
systemctl disable firewalld.service   #禁用firewalld

关闭SElinux功能

setenforce 0     # 临时关闭SElinux
getenforce     # 查看SElinux状态
#修改配置文件使其永远生效
sed -i 's/SELINUX=enforcing/SELINUX=disabled/' /etc/selinux/config

编辑配置文件：vim /etc/nginx/conf.d/default.conf

 location /download {
        alias  /home/software/;    #指定目录所在路径，注意alias和后面的/
        autoindex on;    #开启目录浏览
        autoindex_format html;   #以html风格将目录展示在浏览器中
        autoindex_exact_size off; #切换为 off 后，以可读的方式显示文件大小，单位为 KB、MB 或者 GB
        autoindex_localtime on; #以服务器的文件时间作为显示的时间
        charset "utf-8,gbk"; #展示中文文件名
        }

相关命令

格元素详解与练习

提到表格，大家最先想到的就是EXCEL这款软件，实际上在对表格的操作上，HTML与EXCEL非常相似。

在展示数据，统计数据方面，表格比文字描述更具表达优势，在网页中，表格也经常被用来展示数据、计划日常安排等内容。如图所示：

今天我们就来学习一下如何向页面中添加表格元素。

首先来介绍一下表格元素中的基本标签。

NO.1：<table></table>

这个标签是书写表格的第一个标签，它本身在页面上看不出什么内容，但是它的属性可以控制表格显示的全局样式。这个标签的开始标签写在表格元素的开头，结尾标签写在表格元素的结尾。

NO.2：<caption></caption>

这个标签是表格的标题标签。

NO.3：<tr></tr>

这个标签定义表格的列标签。

NO.4：<th></th>

这个标签是列表标题标签，例如，男生、女士、姓名等。

NO.5：<td></td>

这个标签定义表格的行标签。

OK，这些基本标签就可以构建一个基础的表格元素。示例代码如下：

页面效果如图所示：没有表格的外边框。

如何添加外边框呢？在<table>标签中修改border属性即可，示例代码如下：border="1"是给表格添加宽为1的边界线。

<table border = "1"><!-- border="1"是给表格添加宽为1的边界线 -->

效果如图所示：

这时，您会发现表格在页面上的尺寸非常小，可不可以按照页面尺寸来显示表格吗？当然可以，这就需要为<table>标签修改第二个属性width，示例代码如图所示：width = "100%"指的是表格宽度与平面宽度一致。

<table border = "1" width = "100%"><!-- width = "100%"指的是表格宽度与平面宽度一致 -->

效果如图所示：

ok！今天的讲解先到这里，明天我会继续为大家讲解<thead></thead>、<tfoot></tfoot>、<tbody></tbody>三个标签，以及合并单元格操作。

今天的完整代码示例如下：

<!DOCTYPE HTML>
  <html>
  <head> 
  <title>第一个网页</title>
</head> 
<body><h1>第一个网页</h1><hr>
<h2>表格元素</h2><hr>
<table border = "1" width = "100%">
  <caption>表格标题</caption>
<tr>
  <th>姓名</th>
<th>年龄</th>
</tr>
<tr><td>一列一行</td>
<td>一列二行</td>
</tr>
<tr>
  <td>二列一行</td>
<td>二列二行</td>
</tr>
</table>
</body> 
</html>

正所谓万丈高楼平地起，html技术虽然简单，但是内容相对繁琐，也是以后进一步学习网页制作的基础，希望大家动手写每一段代码，把每一步踩坚实。

喜欢的小伙伴请关注我，阅读中遇到任何问题请给我留言，如有疏漏或错误欢迎大家斧正，不胜感激！

HTML完整学习目录

HTML序章（学习目的、对象、基本概念）——零基础自学网页制作

HTML是什么？——零基础自学网页制作

第一个HTML页面如何写？——零基础自学网页制作

HTML页面中head标签有啥用？——零基础自学网页制作

初识meta标签与SEO——零基础自学网页制作

HTML中的元素使用方法1——零基础自学网页制作

HTML中的元素使用方法2——零基础自学网页制作

HTML元素中的属性1——零基础自学网页制作

HTML元素中的属性2（路径详解）——零基础自学网页制作

使用HTML添加表格1（基本元素）——零基础自学网页制作

使用HTML添加表格2（表格头部与脚部）——零基础自学网页制作

使用HTML添加表格3（间距与颜色）——零基础自学网页制作

使用HTML添加表格4（行颜色与表格嵌套）——零基础自学网页制作

16进制颜色表示与RGB色彩模型——零基础自学网页制作

HTML中的块级元素与内联元素——零基础自学网页制作

初识HTML中的<div>块元素——零基础自学网页制作

在HTML页面中嵌入其他页面的方法——零基础自学网页制作

封闭在家学网页制作！为页面嵌入PDF文件——零基础自学网页制作

HTML表单元素初识1——零基础自学网页制作

HTML表单元素初识2——零基础自学网页制作

HTML表单3（下拉列表、多行文字输入）——零基础自学网页制作

HTML表单4（form的action、method属性）——零基础自学网页制作

HTML列表制作讲解——零基础自学网页制作

为HTML页面添加视频、音频的方法——零基础自学网页制作

音视频格式转换神器与html视频元素加字幕——零基础自学网页制作

HTML中使用<a>标签实现文本内链接——零基础自学网页制作

在线咨询

上一篇：HTML5与CSS3实战指南
下一篇：JavaScript编程 Cookie

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商