[外掛] Chrome 擴充:HTML5 Outliner 抓取網站標題節元素生成大綱結構
![[外掛] Chrome 擴充:HTML5 Outliner 抓取網站標題節元素生成大綱結構_001 [外掛] Chrome 擴充:HTML5 Outliner 抓取網站標題節元素生成大綱結構_001](https://1.bp.blogspot.com/-jf8BA7wOFUs/VjYMvxH00yI/AAAAAAAAIEo/pM8mKXHb2t0/s1600/chrome-extension-html5-outliner_001.jpg)
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 [外掛] Chrome 擴充:HTML5 Outliner 抓取網站標題節元素生成大綱結構_002](http://4.bp.blogspot.com/-D_lsA0uS28o/VjYMv9lKG6I/AAAAAAAAIEw/mUem2oeU3TY/s1600/chrome-extension-html5-outliner_002.jpg)
擴充資訊
擴充名稱:HTML5 Outliner擴充性質:Chrome 免費
功能特性:生成一個大綱導航的頁面,標題和節元素樹狀結構導覽。這種擴充是使用 HTML5 的大綱演算法來創建一個目錄。
需要權限:
讀取及變更您造訪過的網站上的所有資料。
操作介紹
使用時,點取工具列的「HTML5 Outliner」圖示,即可生成當前網頁的 HTML5 樹狀結構條目。![[外掛] Chrome 擴充:HTML5 Outliner 抓取網站標題節元素生成大綱結構_101 [外掛] Chrome 擴充:HTML5 Outliner 抓取網站標題節元素生成大綱結構_101](http://4.bp.blogspot.com/-x2AsEc--oVQ/VjYMv3sVoHI/AAAAAAAAIEs/9ZASQoHNgVw/s1600/chrome-extension-html5-outliner_101.jpg)
按下條目中的超連結,可以快速的將畫面拉取至連結的位置,觀察並調整 HTML 5 語意標籤。
![[外掛] Chrome 擴充:HTML5 Outliner 抓取網站標題節元素生成大綱結構_102 [外掛] Chrome 擴充:HTML5 Outliner 抓取網站標題節元素生成大綱結構_102](http://4.bp.blogspot.com/-8YLNKEV7M80/VjYMws1q8MI/AAAAAAAAIE4/i8xCmn6mlz8/s1600/chrome-extension-html5-outliner_102.jpg)
外掛下方的 Report bugs 與 outliner source code,則是擴充作者更新的相關資料,可點擊觀察擴充的更新情形。
![[外掛] Chrome 擴充:HTML5 Outliner 抓取網站標題節元素生成大綱結構_103 [外掛] Chrome 擴充:HTML5 Outliner 抓取網站標題節元素生成大綱結構_103](http://3.bp.blogspot.com/-2YbFoss84_E/VjYMwimAoVI/AAAAAAAAIE0/Hc3L0bIuGsA/s1600/chrome-extension-html5-outliner_103.jpg)
小結
在使用 HTML5 Outliner 時,可以搭配「結構化資料測試工具」一起調試。另外,如果是在 Blogger 架設網站,由於「<section>
」標籤已經被「版面配置」中的小工具底座「b:section」所佔用;實測時,發現 Blogger 若要設置「<section>
」標籤,HTML 範本會無法儲存,這部份要稍做留意。相關文章
[外掛] Chrome 擴充:META SEO inspector 網站 META SEO 分析工具[外掛] Chrome 擴充:Open SEO Stats 網站 SEO 工具
留言
張貼留言