[unboxing][hrads]

熱門標籤

☆重要訊息:Blogger 官方近期推出的「RWD 自適應範本主題」沒有『行動服務』的設定選項,如果您是觀察「技研可樂」裡的文章做自己網站的設計,使用「自適應範本主題」的使用者可以直接依「技研可樂」文章裡的『電腦版』方式做設定即可完成佈置,不需要開啟『行動服務』。☆

  Blogger 自訂網址應用 CloudFlare HTTPS 系列文章:「CloudFlare

  Blogger HTTPS 相關文章列表:「HTTPS

  Blogger AdSense 廣告放置與相關自適應廣告佈屬文章列表:「AdSense

  Blogger 常用頁面判斷式用法一列表:「Blogger 常用頁面判斷式用法一覽表

[外掛] Chrome 擴充:HTML5 Outliner 抓取網站標題節元素生成大綱結構

[外掛] Chrome 擴充:HTML5 Outliner 抓取網站標題節元素生成大綱結構_001

HTML5 Outliner 為一款免費 Chrome 擴充外掛工具套件。使用時它會依據 HTML 5 的「 <article><section><aside><nav> . . .」幾個大綱標籤及「<h1> ~ <h6>」標籤,為目前瀏覽的網頁生成樹狀結構,方便設計人員調試網站整體的 HTML 5 語意標籤架構。

Chrome 安裝完 HTML5 Outliner 擴充後,在瀏覽器的工具列可以看到 HTML5 Outliner 圖示。預設擴充的圖示為綠色及數個條目加上一個 5,點擊它即可觀察目前瀏覽網頁的 HTML 5 語意標籤結構。

[外掛] Chrome 擴充:HTML5 Outliner 抓取網站標題節元素生成大綱結構_002



擴充資訊

擴充名稱:HTML5 Outliner
擴充性質:Chrome 免費
功能特性:生成一個大綱導航的頁面,標題和節元素樹狀結構導覽。這種擴充是使用 HTML5 的大綱演算法來創建一個目錄。

需要權限:
讀取及變更您造訪過的網站上的所有資料。



操作介紹

使用時,點取工具列的「HTML5 Outliner」圖示,即可生成當前網頁的 HTML5 樹狀結構條目。

[外掛] Chrome 擴充:HTML5 Outliner 抓取網站標題節元素生成大綱結構_101



按下條目中的超連結,可以快速的將畫面拉取至連結的位置,觀察並調整 HTML 5 語意標籤。

[外掛] Chrome 擴充:HTML5 Outliner 抓取網站標題節元素生成大綱結構_102



外掛下方的 Report bugs 與 outliner source code,則是擴充作者更新的相關資料,可點擊觀察擴充的更新情形。

[外掛] Chrome 擴充:HTML5 Outliner 抓取網站標題節元素生成大綱結構_103



小結

在使用 HTML5 Outliner 時,可以搭配「結構化資料測試工具」一起調試。另外,如果是在 Blogger 架設網站,由於「<section>」標籤已經被「版面配置」中的小工具底座「b:section」所佔用;實測時,發現 Blogger 若要設置「<section>」標籤,HTML 範本會無法儲存,這部份要稍做留意。




相關文章

[外掛] Chrome 擴充:META SEO inspector 網站 META SEO 分析工具

[外掛] Chrome 擴充:Open SEO Stats 網站 SEO 工具



分享

加入代碼加入代碼

若您在閱覽文章時,於文章頁面找不到相關的應用主題,歡迎移駕到『站內留言』一起研究討論,謝謝!

使用超連結:<a href="https://www.techcoke.com/">技研可樂</a> =『技研可樂

加入圖片 ( https ):支援 HTTPS 網址型式的 .jpg .png 格式圖檔,直接貼入 HTTPS 圖片網址即可在留言時顯示!

支援非嵌入 Youtube 視頻:https://www.youtube.com/watch?v=hdfSISI24Xk (* 瀏覽器網址列中的 Youtube 網址 )

&&amp;'&#039;"&quot;<&lt;>&gt;
技研可樂 © 2013 - 2017

Contact Form

Name

Email *

Message *