資訊專(zhuān)欄INFORMATION COLUMN
摘要：也就是說(shuō)，在大多數(shù)情況下，他們只關(guān)注標(biāo)簽中的，而忽略標(biāo)簽周?chē)纳舷挛?。就算?duì)于大多數(shù)正常使用瀏覽器的用戶來(lái)說(shuō)，人們也容易只被標(biāo)簽中的內(nèi)容吸引，而忽略上下文?？傊３謽?biāo)簽中的關(guān)鍵字簡(jiǎn)潔是非常重要的。
什么是標(biāo)簽
官方定義是這樣的:
The HTML element (or anchor element) creates a hyperlink to other web pages, files, locations within the same page, email addresses, or any other URL.
也就是 ， 我們需要關(guān)注的就是中的屬性，以及標(biāo)簽之間的內(nèi)容（content）.
例子我們先觀察以下看起來(lái)沒(méi)啥問(wèn)題的例子：
探討之前點(diǎn)擊鏈接 下載銷(xiāo)售報(bào)告
在分析以上例子之前，我想先探討一下我們的目的
前端的一個(gè)關(guān)鍵目的就是，盡可能滿足不同用戶的需求。這里的用戶不光指人類(lèi)，還包括各種搜索引擎，各種輔助設(shè)備（比如給視障人士的讀屏器等）。
具體分析那么我們?cè)囍鴱牟煌摹坝脩簟苯嵌葋?lái)分析上面例子存在的問(wèn)題
對(duì)于搜索引擎來(lái)說(shuō)，會(huì)著重分析標(biāo)簽中的content,也就是例子1中的“點(diǎn)擊鏈接”這個(gè)文本，和明顯“點(diǎn)擊鏈接”并沒(méi)有包含對(duì)鏈接的描述，那么搜索引擎也就不明白這個(gè)鏈接的意義。
對(duì)于使用屏幕閱讀器的用戶來(lái)說(shuō)，會(huì)偏向于在不看鏈接周?chē)纳舷挛牡那闆r下，在鏈接之間跳來(lái)跳去。也就是說(shuō)，在大多數(shù)情況下，他們只關(guān)注標(biāo)簽中的content，而忽略標(biāo)簽周?chē)纳舷挛摹Ｔ诶?中，他們也很容易只看的到“點(diǎn)擊鏈接”這個(gè)文本，不明白這個(gè)鏈接到底指向何處。
就算對(duì)于大多數(shù)正常使用瀏覽器的用戶來(lái)說(shuō)，人們也容易只被標(biāo)簽中的內(nèi)容吸引，而忽略上下文。
那么我們要注意的是：要盡量在標(biāo)簽content中放入有意義的關(guān)鍵字
第一次改善改善之后，將關(guān)鍵字都放到了標(biāo)簽之內(nèi)，解決了上面提出來(lái)的問(wèn)題，那么我們?cè)倮^續(xù)分析剩下的問(wèn)題
改善后的問(wèn)題在于標(biāo)簽中的內(nèi)容太多，用戶通過(guò)標(biāo)簽已經(jīng)知道這是一個(gè)鏈接，所以就不要再出現(xiàn)“鏈接”之類(lèi)的關(guān)鍵字。用戶也知道鏈接是用來(lái)點(diǎn)擊的，所以也不需要“點(diǎn)擊”這個(gè)關(guān)鍵字?？傊３謽?biāo)簽中的關(guān)鍵字簡(jiǎn)潔是非常重要的。
第二次改善如上的例子中，精簡(jiǎn)了content，只剩下了“銷(xiāo)售報(bào)告”四個(gè)字，貌似非常完美了。但是，我們知道通過(guò)點(diǎn)擊鏈接之后，可能打開(kāi)一個(gè)新的頁(yè)面直接查看報(bào)告，也有可能是開(kāi)始下載報(bào)告，有各種各樣的可能性。 所以，我們?cè)陉P(guān)鍵字中不能忽略掉點(diǎn)擊鏈接之后的行為描述，告訴用戶點(diǎn)擊這個(gè)鏈接之后會(huì)發(fā)生的動(dòng)作。
第三次改善改善后的鏈接已經(jīng)相對(duì)不錯(cuò)了，但是還是存在問(wèn)題。就是URL是絕對(duì)地址，我們應(yīng)該將它改成相對(duì)地址
第四次改善采用相對(duì)地址有如下好處：
代碼更加容易閱讀
相對(duì)地址更加高效，如果采用絕對(duì)地址，瀏覽器會(huì)去查找DNS服務(wù)器，然后產(chǎn)生了一系列不必要的流程消耗。
最后，讓我們?cè)籴槍?duì)下載的鏈接，做一次優(yōu)化，那就是添加 download 屬性。
第五次改善在這里，download屬性指定了下載時(shí)的默認(rèn)文件名。
總結(jié)綜上所述，標(biāo)簽的最佳實(shí)踐要注意以下幾點(diǎn)：
在標(biāo)簽的content中，寫(xiě)上清晰易懂的關(guān)鍵字描述
盡可能使用相對(duì)地址
對(duì)于點(diǎn)擊鏈接后的動(dòng)作，給出清晰的提示
對(duì)于下載鏈接，添加download屬性 （PS：download屬性并沒(méi)有被瀏覽器廣泛支持，使用須謹(jǐn)慎）
參考HTML element referenc
Creating hyperlinks
筆者博客
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/51426.html
一、前言由于瀏覽器同源策略，限制了頁(yè)面無(wú)法引用第三方資源，無(wú)法請(qǐng)求不同源下面的資源，影響了web的發(fā)展，所以瀏覽器出讓了一些安全策略來(lái)滿足web的發(fā)展。通過(guò)CSP安全策略來(lái)保證瀏覽器可以安全的加載第三方資源；通過(guò)CORS允許瀏覽器跨域請(qǐng)求；通過(guò)PostMessage來(lái)操作DOM但這些策略也給了黑客攻擊我們的站點(diǎn)的機(jī)會(huì)。web站點(diǎn)常見(jiàn)的攻擊方式包括：XSS攻擊，CSRF攻擊、Sql注入攻擊等。二、X...
摘要：本篇內(nèi)容為機(jī)器學(xué)習(xí)實(shí)戰(zhàn)第章利用元算法提高分類(lèi)性能程序清單。將當(dāng)前錯(cuò)誤率與已有的最小錯(cuò)誤率進(jìn)行對(duì)比后，如果當(dāng)前的值較小，那么就在字典中保存該單層決策樹(shù)。上述，我們已經(jīng)構(gòu)建了單層決策樹(shù)，得到了弱學(xué)習(xí)器。 本篇內(nèi)容為《機(jī)器學(xué)習(xí)實(shí)戰(zhàn)》第 7 章利用 AdaBoost 元算法提高分類(lèi)性能程序清單。所用代碼為 python3。 AdaBoost優(yōu)點(diǎn)：泛化錯(cuò)誤率低，易編碼，可以應(yīng)用在大部分分類(lèi)器上...
摘要：云極是提供的高性能計(jì)算產(chǎn)品，其底層為屢受好評(píng)的快杰云主機(jī)，旨在為用戶提供基于公有云技術(shù)的超高性能算力，以及涵蓋數(shù)據(jù)傳輸數(shù)據(jù)計(jì)算數(shù)據(jù)可視化處理等一站式的使用體驗(yàn)。云極（EPC）是UCloud提供的高性能計(jì)算產(chǎn)品，其底層為屢受好評(píng)的UCloud快杰云主機(jī)，旨在為用戶提供基于公有云技術(shù)的超高性能算力，以及涵蓋數(shù)據(jù)傳輸、數(shù)據(jù)計(jì)算、數(shù)據(jù)可視化處理等一站式的使用體驗(yàn)。EPC支持以下功能：秒級(jí)創(chuàng)建計(jì)算節(jié)點(diǎn)...
閱讀 2960·2023-04-26 01:47
閱讀 3710·2023-04-25 23:45
閱讀 2596·2021-10-13 09:39
閱讀 680·2021-10-09 09:44
閱讀 1978·2021-09-22 15:59
閱讀 2942·2021-09-13 10:33
閱讀 1887·2021-09-03 10:30
閱讀 723·2019-08-30 15:53
