整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          需要將硬盤文件進行目錄列表的用dirhtml

          需要將硬盤文件進行目錄列表的用dirhtml
          1. 件多了,收拾出一個列表來能方便檢索和整理,用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云盤,讓珍藏的資源在云端管理得心應手。

          TML元素的屬性

          屬性是為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頁面如何寫?——零基礎自學網頁制作

          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>標簽實現文本內鏈接——零基礎自學網頁制作


          主站蜘蛛池模板: 精品一区二区在线观看| 国产经典一区二区三区蜜芽 | 国产成人无码AV一区二区在线观看| 无码人妻少妇色欲AV一区二区| 国产精品久久无码一区二区三区网| 自慰无码一区二区三区| asmr国产一区在线| 国产亚洲综合精品一区二区三区 | 中文字幕一区一区三区| 国产一区二区电影在线观看| 一区二区三区内射美女毛片| 无码av中文一区二区三区桃花岛| 久久精品国产AV一区二区三区| 国产成人无码精品一区二区三区| 东京热无码av一区二区| 亚洲福利一区二区三区| 亚洲宅男精品一区在线观看| 国产女人乱人伦精品一区二区 | 韩日午夜在线资源一区二区| 国产一区二区三区亚洲综合| 3D动漫精品一区二区三区| 色一乱一伦一图一区二区精品| 日韩免费视频一区二区| 日韩电影一区二区三区| 亚洲国产美国国产综合一区二区| 国产在线一区二区综合免费视频 | 国产精品一区二区不卡| 91国偷自产一区二区三区| 精品无码成人片一区二区98| 人妻AV一区二区三区精品| 亚洲国产日韩在线一区| 精品视频一区二区| 精品国产一区二区三区AV性色 | 亚洲一区二区三区成人网站| 五月婷婷一区二区| 国产精品成人99一区无码| 老湿机一区午夜精品免费福利| 三上悠亚亚洲一区高清| 亚洲一区二区三区高清| 国产乱码一区二区三区| 无码精品久久一区二区三区|