整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
件多了，收拾出一个列表来能方便检索和整理，用dirhtml能简单快捷的生成一个网页文件html，在一页上显示文件列表。
图标
2.运行dirhtml后，选择“杂项”，可以勾选需要显示的文件的基本属性相关内容进行调整。
选择“杂项”
3.设置“在一个文件中显示所有链接”，不要选“每个文件夹生成一个HTML”,否则，生成的文件个数将等于你选择目录中的文件夹的个数。然后可以对需要生成的版面项目进行设置。
选择“在一个文件中显示所有链接”
4.然后，点击“文件夹，文件”选项，选择文件夹的路径。
选择文件夹
5.点击“创建”。
创建完成
6.打开文件后显示效果。
页面效果
日常网络浏览过程中，常常会发现有趣且有益的网站，选择收藏以备未来查阅。然而，收藏夹中的网页有时会因为各种原因而无法连接，令人感到遗憾。
将网页剪切至云端笔记，虽然是一种方法，但其排版样式、元素丢失以及同步速度慢等不足，使其显得不够便捷。相较之下，更为实用的方法是将其保存于本地硬盘，既能节省资源又便于后续管理。
今天向您推荐一个网页保存插件——SingleFile。此插件可帮助您将整个网页（包括CSS、图片、字体、框架等）保存为HTML文件。对于您感兴趣的文章网页等，均可进行离线保存，且采一页一文件格式，即使是GIF图也能够完整保留。
下载与安装
Google Chrome
https://chrome.google.com/extensions/detail/mpiodijhokgodhhofbcjdecpffjipkle
Microsoft Edge 浏览器
在Microsoft Edge加载项中搜索"singlefle"即可
https://microsoftedge.microsoft.com/addons/detail/singlefile/efnbkdcfmcmnhlkaijjjmhjjgladedno
Mozilla Firefox 浏览器
https://addons.mozilla.org/firefox/addon/single-file
Apple Safari 浏览器
https://apps.apple.com/us/app/singlefile-for-safari/id6444322545
安装步骤
成功下载后，只需启动插件并选择您需要保存的网页，点击SingleFile按钮便可完成操作。
如果觉得单次保存过于繁琐，可在网页上右键点击折叠工具栏上的SingleFile按钮，选择保存：当前标签或所选内容，或者是所选的帧，甚至是一键保存多个选项卡。
此外，还有自动保存功能。默认的保存路径通常是浏览器配置的下载文件夹。您还可以自主选择将网页直接上传至网盘，如GitHub、Google Drive或WebDAV云盘，让珍藏的资源在云端管理得心应手。
属性是为HTML元素提供的附加信息。
为相同的HTML元素指定不同的属性，会呈现不同的功能或效果。
举个例子：
比如我们在上一篇中练习过的<a></a>标签构成的超链接元素中有一个href属性，这个属性指定的是点击后跳转的页面地址，相同的<a>标签改变href属性就能跳转不同的页面。例如
<a href="https://www.bilibili.com/read/cv2720755">歼-20战斗机</a>
<a href="http://mil.chinanews.com/mil/hd2011/2014/03-06/315569.shtml">歼-20战斗机</a><!-- 注释 看起来一样的超链接元素因为href属性不同，打开的页面也不同。-->小伙伴们自己写的时候要注意使用半角符号，不然不能正确打开链接。
超链接元素中还有一个控制链接页面打开的属性叫做target，是用来控制新打开页面窗口的位置。下面我们就看看target属性为_blank和_parent的情况下的不同。例如
<a href="https://www.bilibili.com/read/cv2720755" target="_blank">歼-20战斗机</a>
<a href="http://mil.chinanews.com/mil/hd2011/2014/03-06/315569.shtml" target="_parent">歼-20战斗机</a><!-- 注释 看起来一样的超链接元素因为target属性不同，打开的页面所在窗口不同。-->测试后，target="_blank"时，新页面在测试页面窗口旁边新建一个窗口打开。
target="_parent"时，新页面在原有测试页面窗口中打开。
如图所示：
左边为_blank,右边为_parent,点击左边链接后，新窗口在原有窗口旁边打开。如下图：
点击右侧
新页面在原窗口处打开。
<a>标签的target属性还有_self、_top这样的属性，感兴趣的小伙伴可以自行测试。
一般HTML元素的通用属性有：class 、id 、style 、title这四类，其中class 、id 、style这三个属性会在CSS的讲解中详细学习。
下面我们通过练习来看看title属性的作用。
HTML元素属性使用练习1
NO.1: title
title属性用于显示元素的额外信息使用。示例代码如下：
<!DOCTYPE HTML>
<html>
<head>
<title>第一个网页</title>
</head>
<body>
<h1>第一个网页</h1><hr>
<a href="https://www.bilibili.com/read/cv2720755" target="_blank" title="中国最先进战斗机">歼-20战斗机</a>
</body>
</html>效果如图：当鼠标移动到超链接上时，"中国最先进战斗机"的说明就出现在下侧。
NO.2:href/src/url
这三个属性虽然写法不同，但都是为元素指定路径使用的。不属于通用属性。
例如<a>标签中指定链接路径使用的是href，而<img>标签中导入图片的路径是src，url在css中也常用来引入链接。具体练习大家可以翻看《HTML中的元素使用方法2——零基础自学网页制作》一文。
这里要介绍的是关于网页中的路径的两个重要概念：绝对路径、相对路径。
绝对路径是指文件在硬盘上真正存在的路径。
相对路径就是相对自己的目标文件的位置。
怎么理解这两个概念呢？举个例子：
如果我们要在"第一个页面.html"中显示一张图片image1.jpg，它们都在我的"D盘/零基础自学网页制作"这个文件夹中。如图：
如果用绝对路径导入写法是这样的：
<img src="file:///D:/零基础自学网页制作/image1.jpg"/>相对路径这样写：
<img src="image1.jpg"/>大家观察一下，也看出了绝对路径与相对路径的区别了。
另外，这样的链接也属于绝对路径：href="https://www.bilibili.com/read/cv2720755"
那么什么时候使用相对路径什么时候使用绝对路径呢？这个问题我会在明天深入为大家讲解，这涉及到网页或网站上传服务器的问题。
做教程确实是没什么人看，但是我依然会坚持，我是一名高校教师（认证资料等疫情结束后去办公室拍摄上传吧），把自己的知识写出来对自己来说是一个提高，也把原来很多常用却不甚了然的概念再次打磨清晰是我最大的收获。本篇教程针对完全没有基础的网页制作学习者，利用碎片时间学习，只要我们坚持，必然可以完成网页制作的学习，为未来学习更加复杂的内容打下基础！
喜欢的小伙伴请关注我，阅读中遇到任何问题请给我留言，如有疏漏或错误欢迎大家斧正，不胜感激！
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>标签实现文本内链接——零基础自学网页制作
*请认真填写需求信息，我们会在24小时内与您取得联系。
