[外掛] 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 工具


留言

繼續閱讀:

這個網誌中的熱門文章

[教學] LINE 電腦版行動條碼登入設定

[外掛] Chrome 擴充:ColorPick Eyedropper 網頁色碼擷取器

[教學] 使用 PuTTYgen 產生 SSH 連線 RSA、DSA 公鑰與私鑰

Line 分享按鈕:文章分享語法相容網頁版、行動裝置、APP

[教學] Twitter 手機簡訊、APP 兩步驟驗證設定

[教學] Google Compute Engine ( GCE ) 使用 PuTTY SSH 登入實例

[外掛] Chrome 擴充:Window Resizer 瀏覽器視窗大小調整比例

[教學] Blogger 自訂網址綁定自有域名

[密技] Windows OneDrive Dropbox 移至 SD 卡,讓 SSD 使用壽命更長久

[教學] Facebook APP ID 申請,建立應用程式取得 APP 密鑰