整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
件多了，收拾出一個列表來能方便檢索和整理，用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小時內與您取得聯系。
