資訊專欄INFORMATION COLUMN
簡(jiǎn)介
heading 標(biāo)簽、SEO、無障礙閱讀
ps: 內(nèi)容有點(diǎn)多，本來只想講一個(gè)點(diǎn)，但是關(guān)聯(lián)性太強(qiáng)了，所以辛苦大家了。
在學(xué)習(xí) HTML 標(biāo)簽的時(shí)候，很多教程只告訴你 怎么用 而沒有講清楚 是什么，讓我們一起從 h1 到 h6 開始重新認(rèn)識(shí) HTML 標(biāo)簽完善知識(shí)體系。
觀其形Heading 標(biāo)簽 指的就是網(wǎng)頁(yè)中的 h1 到 h6 標(biāo)簽，很多同學(xué)最基本的認(rèn)知就是 h1 到 h6 標(biāo)簽字體從大到小。那你有想過既然只是從大到小，那為什么不直接使用
愛思考的同學(xué)會(huì)說：“可能是為了方便使用吧？”
乍一聽好像挺有道理的，但是翻閱超多網(wǎng)站都使用的 bootstrap 源碼 scss/_type.scss 會(huì)看到在 3到26 行 對(duì)標(biāo)題重新定義了樣式：
//
// Headings
//
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
margin-bottom: $headings-margin-bottom;
font-family: $headings-font-family;
font-weight: $headings-font-weight;
line-height: $headings-line-height;
color: $headings-color;
}
h1, .h1 { @include font-size($h1-font-size); }
h2, .h2 { @include font-size($h2-font-size); }
h3, .h3 { @include font-size($h3-font-size); }
h4, .h4 { @include font-size($h4-font-size); }
h5, .h5 { @include font-size($h5-font-size); }
h6, .h6 { @include font-size($h6-font-size); }
.lead {
@include font-size($lead-font-size);
font-weight: $lead-font-weight;
}
在這段 scss 代碼中，可以看到除了對(duì) h1 到 h6 被重新定義外，還定義了對(duì)應(yīng)的 .h1 到 .h6 類樣式。這下帶來了新的問題：
開發(fā)中經(jīng)常會(huì)重置 Heading 標(biāo)簽 樣式，那瀏覽器定義的默認(rèn)樣式豈不是多此一舉？
只是為了方便使用，那 boostrap 還要再定義對(duì)應(yīng)的 .h1 到 .h6 類樣式？
知其意在 1991 年，蒂姆·伯納斯·李首次提出 HTML 的時(shí)候，并沒有給頁(yè)面添加樣式的方法。如何顯示頁(yè)面是由瀏覽器決定的，用戶也可以通過偏好設(shè)置來修改。這就好比現(xiàn)在最經(jīng)常使用的 markdown 一樣，使用一樣的語法但是根據(jù)不同的設(shè)置，可以展示不一樣的字體。
在報(bào)紙排版中往往會(huì)把頭條內(nèi)容加大字號(hào)表示重點(diǎn)，并通過其他小字號(hào)和頁(yè)面排版來組織內(nèi)容結(jié)構(gòu)。
那面對(duì)密密麻麻沒樣式的網(wǎng)頁(yè)時(shí)該怎么區(qū)分頁(yè)面結(jié)構(gòu)呢？參考報(bào)紙可以利用 Heading 標(biāo)簽 來組裝頁(yè)面形式，通過 Heading 標(biāo)簽 可以很方便的知道整個(gè)頁(yè)面的結(jié)構(gòu)：
h1 用來修飾網(wǎng)頁(yè)的主標(biāo)題，一般是網(wǎng)頁(yè)的標(biāo)題，文章標(biāo)題。
h2 表示一個(gè)段落的標(biāo)題，或者說副標(biāo)題。
h3 表示段落的小節(jié)標(biāo)題。
h4 到 h6 表示一些不重要的內(nèi)容，用來做結(jié)構(gòu)區(qū)分。
另外一個(gè)形象的例子就是 markdown 中的 # ~ ##### 表示標(biāo)題，我們甚至可以只看 markdown 不需要頁(yè)面渲染就能讀懂文章。這也是 markdown 設(shè)計(jì)的初衷：方便書寫和閱讀。
通過 Heading 標(biāo)簽 瀏覽器可以很容易的讀出整個(gè)頁(yè)面的主題結(jié)構(gòu)，甚至可以生成目錄方便用戶閱讀，在沒有樣式的時(shí)候還是相當(dāng)有用的，當(dāng)然隨著 CSS 的誕生頁(yè)面樣式可以更好的組織，很多同學(xué)也就忘記了它的本意。
小練習(xí)：遍歷 dom 節(jié)點(diǎn)通過 Heading 標(biāo)簽來生成一個(gè)網(wǎng)頁(yè)目錄。小蜘蛛
廉頗老矣，尚能飯否。
現(xiàn)在很多同學(xué)都是使用 在 SEO （搜索引擎優(yōu)化）時(shí)，小蜘蛛 爬取頁(yè)面結(jié)構(gòu)時(shí)還是會(huì)用到這些語義化和結(jié)構(gòu) 來了解頁(yè)面信息。畢竟小蜘蛛并不是人能讀懂頁(yè)面，它們只能按照既定的規(guī)則來讀取。打開掘金的一篇文章小姐姐的誘惑，控制臺(tái)選擇文章標(biāo)題 便能看到使用的是 h1 標(biāo)簽： 通過 h1 組織頁(yè)面結(jié)構(gòu)告訴 小蜘蛛 這個(gè)頁(yè)面的標(biāo)題是什么，小蜘蛛也會(huì)把這個(gè)存儲(chǔ)起來，當(dāng)在搜索引擎搜索 小姐姐的誘惑 等相關(guān)詞語時(shí)，就能找到這篇文章啦。當(dāng)然在頁(yè)面右側(cè)變是文章目錄： 是不是非常方便我們查看文章結(jié)構(gòu)，進(jìn)行內(nèi)容的跳轉(zhuǎn)呢？ 除了小蜘蛛外使用 Heading 標(biāo)簽 還能方便特殊群體，最著名的人之一便是 霍金 大大了。霍金 大大只有兩個(gè)手指頭，如果他要瀏覽網(wǎng)頁(yè)該怎么辦呢？ 其實(shí)現(xiàn)在有很多幫助特殊群體的軟件，例如瀏覽器中的無障礙模式。這些軟件通過解析頁(yè)面的結(jié)構(gòu)來幫組特殊群體用戶來操作頁(yè)面。例如列出頁(yè)面目錄方便特殊群體用戶選擇，讀出頁(yè)面目錄幫助 視力障礙人士 方便選著和使用網(wǎng)頁(yè)。 如果大家都一味的使用 可以看到 自定義 中可以模擬 縮放 和 三維粗觸控 等操作，這樣像霍金大大也可以使用iPhone進(jìn)行縮放等特殊操作了，送上一句霍金大大的名言： 現(xiàn)在解決了為什么使用 Heading 標(biāo)簽，那為什么 bootstrap 中還定義了 .h1 到 .h6 標(biāo)簽?zāi)?？其?shí)問題的答案已經(jīng)很明了： 真真正正的在使用字體樣式。 不破壞 Heading 標(biāo)簽 的語義，使得造成誤解。 如果大家在開發(fā)的時(shí)候不是只面向企業(yè)或者 自己使用，希望大家能盡量使用 Heading 標(biāo)簽 和 語義化標(biāo)簽，除了能帶來 SEO 上的幫助還能幫助特殊群體 何樂而不為呢？ H1 の 小秘密 SEO 初體驗(yàn) img の 小九九 千里姻緣一線牽 如果您想讓更多人看到文章可以點(diǎn)個(gè) 點(diǎn)贊。 如果您想激勵(lì)小二可以到 Github 給個(gè) 小星星。 如果您想與小二更多交流添加微信 m353839115。 文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。 轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/103169.html showImg(https://raw.githubusercontent.com/pushmetop/resource/master/30-seconds-for-everyday/img-tag/poster.png);
簡(jiǎn)介
SEO、跨域、無障礙閱讀、事件、圖片標(biāo)簽
小九九 最直接的聯(lián)想便是 九九乘法表，但是 小九九 也用在形容一個(gè)人在心里打著算盤 小主意 和 小秘密。小秘密已經(jīng)被 H1 の... showImg(https://segmentfault.com/img/remote/1460000018760855?w=900&h=500);
簡(jiǎn)介
SEO、Meta、搜索引擎優(yōu)化、簡(jiǎn)單教程
細(xì)心的同學(xué)可能發(fā)現(xiàn)了開頭出現(xiàn)了關(guān)鍵字，這是為什么呢？閱讀完本文后大家就會(huì)明白了。
同學(xué)們有沒有想過互聯(lián)網(wǎng)上用戶、網(wǎng)站 有多少呢？這里提供一個(gè)網(wǎng)站 internet live stats 里面實(shí)時(shí)的給出了... showImg(https://segmentfault.com/img/remote/1460000018760855?w=900&h=500);
簡(jiǎn)介
SEO、Meta、搜索引擎優(yōu)化、簡(jiǎn)單教程
細(xì)心的同學(xué)可能發(fā)現(xiàn)了開頭出現(xiàn)了關(guān)鍵字，這是為什么呢？閱讀完本文后大家就會(huì)明白了。
同學(xué)們有沒有想過互聯(lián)網(wǎng)上用戶、網(wǎng)站 有多少呢？這里提供一個(gè)網(wǎng)站 internet live stats 里面實(shí)時(shí)的給出了... showImg(https://segmentfault.com/img/remote/1460000018808058?w=900&h=500);
簡(jiǎn)介
SEO、sitemap、搜索引擎優(yōu)化、簡(jiǎn)單教程
在曖昧期和暗戀期時(shí)心里總是懸掛著：
ta 為什么還不和我表白？
ta 是不是對(duì)我沒感覺？
ta 是不是只是把我當(dāng)備胎？
ta 是不是對(duì)誰都這樣？
解決問題最簡(jiǎn)單的方式就是直接 問問對(duì)方... showImg(https://segmentfault.com/img/remote/1460000018825131);
簡(jiǎn)介
SEO、robot.txt、搜索引擎優(yōu)化
在浩海的互聯(lián)網(wǎng)世界中：
互聯(lián)網(wǎng) 宛如 宇宙
站點(diǎn) 宛如 星系
網(wǎng)頁(yè) 宛如 星球
網(wǎng)頁(yè)內(nèi)容 宛如 生靈萬物
而在互聯(lián)網(wǎng)世界漫游的搜索引擎爬蟲小蜘蛛，就好比一搜穿梭在宇宙里的星際漫游器，想想是不是還挺浪漫的。對(duì)于不同的星系有著... 和 來組織頁(yè)面結(jié)構(gòu)，已經(jīng)不去在意 Heading 標(biāo)簽 帶來的意義了。除了 Heading 標(biāo)簽 在 HTML5 也帶來了更多語義化的標(biāo)簽，來幫助我們組織頁(yè)面結(jié)構(gòu)。
SEO 指的是搜索引擎優(yōu)化，簡(jiǎn)單來講就是怎么讓 百度 和 谷歌 更容易理解你的網(wǎng)站并對(duì)齊進(jìn)行排序。
特殊群體
和 特殊群體用戶只能一個(gè)個(gè) dom 節(jié)點(diǎn)聽過去了，大家感興趣可以打開無障礙模式試試看。iPhone 用戶最常用的 輔助控制器 其實(shí)是設(shè)計(jì)給特殊群體使用的：
永恒是很長(zhǎng)的時(shí)間，特別是對(duì)盡頭而言。 --by 霍金（這次不是魯迅了）
填坑
在困惑的城市里總少不了并肩同行的 伙伴 讓我們一起成長(zhǎng)。
本文原稿來自 PushMeTop
相關(guān)文章
每日 30 秒 ? img の 小九九
每日 30 秒 ? SEO初體驗(yàn)
每日 30 秒 ? SEO初體驗(yàn)
每日 30 秒 ? 投懷送抱
每日 30 秒 ? 漫游器法則
發(fā)表評(píng)論
0條評(píng)論
閱讀 4009·2021-11-16 11:44
閱讀 3183·2021-11-12 10:36
閱讀 3438·2021-10-08 10:04
閱讀 1337·2021-09-03 10:29
閱讀 465·2019-08-30 13:50
閱讀 2717·2019-08-29 17:14
閱讀 1803·2019-08-29 15:32
閱讀 1148·2019-08-29 11:27
