整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
件多了，收拾出一個(gè)列表來能方便檢索和整理，用dirhtml能簡單快捷的生成一個(gè)網(wǎng)頁文件html，在一頁上顯示文件列表。
圖標(biāo)
2.運(yùn)行dirhtml后，選擇“雜項(xiàng)”，可以勾選需要顯示的文件的基本屬性相關(guān)內(nèi)容進(jìn)行調(diào)整。
選擇“雜項(xiàng)”
3.設(shè)置“在一個(gè)文件中顯示所有鏈接”，不要選“每個(gè)文件夾生成一個(gè)HTML”,否則，生成的文件個(gè)數(shù)將等于你選擇目錄中的文件夾的個(gè)數(shù)。然后可以對(duì)需要生成的版面項(xiàng)目進(jìn)行設(shè)置。
選擇“在一個(gè)文件中顯示所有鏈接”
4.然后，點(diǎn)擊“文件夾，文件”選項(xiàng)，選擇文件夾的路徑。
選擇文件夾
5.點(diǎn)擊“創(chuàng)建”。
創(chuàng)建完成
6.打開文件后顯示效果。
頁面效果
日常網(wǎng)絡(luò)瀏覽過程中，常常會(huì)發(fā)現(xiàn)有趣且有益的網(wǎng)站，選擇收藏以備未來查閱。然而，收藏夾中的網(wǎng)頁有時(shí)會(huì)因?yàn)楦鞣N原因而無法連接，令人感到遺憾。
將網(wǎng)頁剪切至云端筆記，雖然是一種方法，但其排版樣式、元素丟失以及同步速度慢等不足，使其顯得不夠便捷。相較之下，更為實(shí)用的方法是將其保存于本地硬盤，既能節(jié)省資源又便于后續(xù)管理。
今天向您推薦一個(gè)網(wǎng)頁保存插件——SingleFile。此插件可幫助您將整個(gè)網(wǎng)頁（包括CSS、圖片、字體、框架等）保存為HTML文件。對(duì)于您感興趣的文章網(wǎng)頁等，均可進(jìn)行離線保存，且采一頁一文件格式，即使是GIF圖也能夠完整保留。
下載與安裝
Google Chrome
https://chrome.google.com/extensions/detail/mpiodijhokgodhhofbcjdecpffjipkle
Microsoft Edge 瀏覽器
在Microsoft Edge加載項(xiàng)中搜索"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
安裝步驟
成功下載后，只需啟動(dòng)插件并選擇您需要保存的網(wǎng)頁，點(diǎn)擊SingleFile按鈕便可完成操作。
如果覺得單次保存過于繁瑣，可在網(wǎng)頁上右鍵點(diǎn)擊折疊工具欄上的SingleFile按鈕，選擇保存：當(dāng)前標(biāo)簽或所選內(nèi)容，或者是所選的幀，甚至是一鍵保存多個(gè)選項(xiàng)卡。
此外，還有自動(dòng)保存功能。默認(rèn)的保存路徑通常是瀏覽器配置的下載文件夾。您還可以自主選擇將網(wǎng)頁直接上傳至網(wǎng)盤，如GitHub、Google Drive或WebDAV云盤，讓珍藏的資源在云端管理得心應(yīng)手。
屬性是為HTML元素提供的附加信息。
為相同的HTML元素指定不同的屬性，會(huì)呈現(xiàn)不同的功能或效果。
舉個(gè)例子：
比如我們?cè)谏弦黄芯毩?xí)過的<a></a>標(biāo)簽構(gòu)成的超鏈接元素中有一個(gè)href屬性，這個(gè)屬性指定的是點(diǎn)擊后跳轉(zhuǎn)的頁面地址，相同的<a>標(biāo)簽改變href屬性就能跳轉(zhuǎn)不同的頁面。例如
<a href="https://www.bilibili.com/read/cv2720755">殲-20戰(zhàn)斗機(jī)</a>
<a href="http://mil.chinanews.com/mil/hd2011/2014/03-06/315569.shtml">殲-20戰(zhàn)斗機(jī)</a><!-- 注釋 看起來一樣的超鏈接元素因?yàn)閔ref屬性不同，打開的頁面也不同。-->小伙伴們自己寫的時(shí)候要注意使用半角符號(hào)，不然不能正確打開鏈接。
超鏈接元素中還有一個(gè)控制鏈接頁面打開的屬性叫做target，是用來控制新打開頁面窗口的位置。下面我們就看看target屬性為_blank和_parent的情況下的不同。例如
<a href="https://www.bilibili.com/read/cv2720755" target="_blank">殲-20戰(zhàn)斗機(jī)</a>
<a href="http://mil.chinanews.com/mil/hd2011/2014/03-06/315569.shtml" target="_parent">殲-20戰(zhàn)斗機(jī)</a><!-- 注釋 看起來一樣的超鏈接元素因?yàn)閠arget屬性不同，打開的頁面所在窗口不同。-->測試后，target="_blank"時(shí)，新頁面在測試頁面窗口旁邊新建一個(gè)窗口打開。
target="_parent"時(shí)，新頁面在原有測試頁面窗口中打開。
如圖所示：
左邊為_blank,右邊為_parent,點(diǎn)擊左邊鏈接后，新窗口在原有窗口旁邊打開。如下圖：
點(diǎn)擊右側(cè)
新頁面在原窗口處打開。
<a>標(biāo)簽的target屬性還有_self、_top這樣的屬性，感興趣的小伙伴可以自行測試。
一般HTML元素的通用屬性有：class 、id 、style 、title這四類，其中class 、id 、style這三個(gè)屬性會(huì)在CSS的講解中詳細(xì)學(xué)習(xí)。
下面我們通過練習(xí)來看看title屬性的作用。
HTML元素屬性使用練習(xí)1
NO.1: title
title屬性用于顯示元素的額外信息使用。示例代碼如下：
<!DOCTYPE HTML>
<html>
<head>
<title>第一個(gè)網(wǎng)頁</title>
</head>
<body>
<h1>第一個(gè)網(wǎng)頁</h1><hr>
<a href="https://www.bilibili.com/read/cv2720755" target="_blank" title="中國最先進(jìn)戰(zhàn)斗機(jī)">殲-20戰(zhàn)斗機(jī)</a>
</body>
</html>效果如圖：當(dāng)鼠標(biāo)移動(dòng)到超鏈接上時(shí)，"中國最先進(jìn)戰(zhàn)斗機(jī)"的說明就出現(xiàn)在下側(cè)。
NO.2:href/src/url
這三個(gè)屬性雖然寫法不同，但都是為元素指定路徑使用的。不屬于通用屬性。
例如<a>標(biāo)簽中指定鏈接路徑使用的是href，而<img>標(biāo)簽中導(dǎo)入圖片的路徑是src，url在css中也常用來引入鏈接。具體練習(xí)大家可以翻看《HTML中的元素使用方法2——零基礎(chǔ)自學(xué)網(wǎng)頁制作》一文。
這里要介紹的是關(guān)于網(wǎng)頁中的路徑的兩個(gè)重要概念：絕對(duì)路徑、相對(duì)路徑。
絕對(duì)路徑是指文件在硬盤上真正存在的路徑。
相對(duì)路徑就是相對(duì)自己的目標(biāo)文件的位置。
怎么理解這兩個(gè)概念呢？舉個(gè)例子：
如果我們要在"第一個(gè)頁面.html"中顯示一張圖片image1.jpg，它們都在我的"D盤/零基礎(chǔ)自學(xué)網(wǎng)頁制作"這個(gè)文件夾中。如圖：
如果用絕對(duì)路徑導(dǎo)入寫法是這樣的：
<img src="file:///D:/零基礎(chǔ)自學(xué)網(wǎng)頁制作/image1.jpg"/>相對(duì)路徑這樣寫：
<img src="image1.jpg"/>大家觀察一下，也看出了絕對(duì)路徑與相對(duì)路徑的區(qū)別了。
另外，這樣的鏈接也屬于絕對(duì)路徑：href="https://www.bilibili.com/read/cv2720755"
那么什么時(shí)候使用相對(duì)路徑什么時(shí)候使用絕對(duì)路徑呢？這個(gè)問題我會(huì)在明天深入為大家講解，這涉及到網(wǎng)頁或網(wǎng)站上傳服務(wù)器的問題。
做教程確實(shí)是沒什么人看，但是我依然會(huì)堅(jiān)持，我是一名高校教師（認(rèn)證資料等疫情結(jié)束后去辦公室拍攝上傳吧），把自己的知識(shí)寫出來對(duì)自己來說是一個(gè)提高，也把原來很多常用卻不甚了然的概念再次打磨清晰是我最大的收獲。本篇教程針對(duì)完全沒有基礎(chǔ)的網(wǎng)頁制作學(xué)習(xí)者，利用碎片時(shí)間學(xué)習(xí)，只要我們堅(jiān)持，必然可以完成網(wǎng)頁制作的學(xué)習(xí)，為未來學(xué)習(xí)更加復(fù)雜的內(nèi)容打下基礎(chǔ)！
喜歡的小伙伴請(qǐng)關(guān)注我，閱讀中遇到任何問題請(qǐng)給我留言，如有疏漏或錯(cuò)誤歡迎大家斧正，不勝感激！
HTML序章（學(xué)習(xí)目的、對(duì)象、基本概念）——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML是什么？——零基礎(chǔ)自學(xué)網(wǎng)頁制作
第一個(gè)HTML頁面如何寫？——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML頁面中head標(biāo)簽有啥用？——零基礎(chǔ)自學(xué)網(wǎng)頁制作
初識(shí)meta標(biāo)簽與SEO——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML中的元素使用方法1——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML中的元素使用方法2——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML元素中的屬性1——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML元素中的屬性2（路徑詳解）——零基礎(chǔ)自學(xué)網(wǎng)頁制作
使用HTML添加表格1（基本元素）——零基礎(chǔ)自學(xué)網(wǎng)頁制作
使用HTML添加表格2（表格頭部與腳部）——零基礎(chǔ)自學(xué)網(wǎng)頁制作
使用HTML添加表格3（間距與顏色）——零基礎(chǔ)自學(xué)網(wǎng)頁制作
使用HTML添加表格4（行顏色與表格嵌套）——零基礎(chǔ)自學(xué)網(wǎng)頁制作
16進(jìn)制顏色表示與RGB色彩模型——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML中的塊級(jí)元素與內(nèi)聯(lián)元素——零基礎(chǔ)自學(xué)網(wǎng)頁制作
初識(shí)HTML中的<div>塊元素——零基礎(chǔ)自學(xué)網(wǎng)頁制作
在HTML頁面中嵌入其他頁面的方法——零基礎(chǔ)自學(xué)網(wǎng)頁制作
封閉在家學(xué)網(wǎng)頁制作！為頁面嵌入PDF文件——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML表單元素初識(shí)1——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML表單元素初識(shí)2——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML表單3（下拉列表、多行文字輸入）——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML表單4（form的action、method屬性）——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML列表制作講解——零基礎(chǔ)自學(xué)網(wǎng)頁制作
為HTML頁面添加視頻、音頻的方法——零基礎(chǔ)自學(xué)網(wǎng)頁制作
音視頻格式轉(zhuǎn)換神器與html視頻元素加字幕——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML中使用<a>標(biāo)簽實(shí)現(xiàn)文本內(nèi)鏈接——零基礎(chǔ)自學(xué)網(wǎng)頁制作
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
