「技術(shù)」CSS 自定義高亮文本

瀏覽器中，一個(gè)比較常見的高亮文本場景是，用戶按下快捷鍵ctr+f，對文本內(nèi)容進(jìn)行搜索。在頁面里，相應(yīng)的文本就會高亮。這種高亮，是瀏覽器實(shí)現(xiàn)的。

如果我們要實(shí)現(xiàn)這種高亮效果，現(xiàn)有的CSS實(shí)現(xiàn)起來是相對比較麻煩的。

方案一，使用偽元素::selection

當(dāng)我們在頁面中，選中一段文本的時(shí)候，可以通過document.getSelection()獲取到文本選中的節(jié)點(diǎn)信息。相應(yīng)的，我們可以通過Range Api去主動(dòng)設(shè)置選中文本范圍。再通過設(shè)置::selection樣式，實(shí)現(xiàn)選中文本高亮效果。這種方案，實(shí)現(xiàn)起來比較麻煩，我們需要精確計(jì)算每一個(gè)高亮預(yù)期的選中起止位置。

方案二，對于在頁面中需要高亮的文本，進(jìn)行單獨(dú)處理

對于靜態(tài)呈現(xiàn)的內(nèi)容，在開發(fā)中，一般通過設(shè)置固定的標(biāo)簽和樣式實(shí)現(xiàn)文本高亮。

對于需要?jiǎng)討B(tài)變化的內(nèi)容處理，例如codemirror，會有一套獨(dú)立的dom結(jié)構(gòu)樹，通過dom結(jié)構(gòu)樹，根據(jù)處理后的dom結(jié)構(gòu)，在頁面中呈現(xiàn)出高亮。這種方案，就相當(dāng)復(fù)雜了。

方案三, 使用偽元素::highlight

這個(gè)方案的實(shí)現(xiàn)方式，與::selection類似。通過Range Api 設(shè)置選中區(qū)域。再將這些區(qū)域配置進(jìn)需要高亮的Hight中，最后通過設(shè)置::highlight樣式實(shí)現(xiàn)高亮。

這種方案，比::selection方案具有更強(qiáng)的可操作性。這是新的api，各個(gè)瀏覽器沒有完全實(shí)現(xiàn)。

【參考資料】

[1] CSS Custom Highlight API: The Future of Highlighting Text Ranges on the Web. https://css-tricks.com/css-custom-highlight-api-early-loo/

作中...

標(biāo)題: 逐步實(shí)現(xiàn)網(wǎng)頁可訪問性的關(guān)鍵技巧: 使用語義 HTML 提高網(wǎng)站可訪問性

在現(xiàn)代網(wǎng)絡(luò)時(shí)代，網(wǎng)頁可訪問性變得越來越重要。為了確保所有用戶，包括有視障、語言障礙或其他能力限制的用戶，都可以方便地訪問和使用網(wǎng)站，開發(fā)者需要采用合理的可訪問性策略。語義 HTML 是實(shí)現(xiàn)網(wǎng)頁可訪問性的關(guān)鍵技巧之一，它可以幫助搜索引擎更好地理解網(wǎng)頁內(nèi)容，同時(shí)也可以讓屏幕閱讀器和其他輔助技術(shù)更好地解析網(wǎng)頁。

在 HTML 代碼中，語義標(biāo)簽可以明確地表示網(wǎng)頁中各個(gè)元素的內(nèi)容和結(jié)構(gòu)，從而使網(wǎng)頁更易于閱讀和理解。例如，使用 <header> 標(biāo)簽來標(biāo)記頁面頭部，<nav> 標(biāo)簽來標(biāo)記導(dǎo)航菜單，<article> 標(biāo)簽來標(biāo)記文章內(nèi)容等。這些標(biāo)簽不僅僅是為了美化頁面設(shè)計(jì)，還是為了提高可訪問性的一部分。

另外，語義 HTML 還可以幫助屏幕閱讀器正確地讀出網(wǎng)頁內(nèi)容。例如，使用 <figure> 標(biāo)簽和 <figcaption> 標(biāo)簽可以將圖片和圖片說明明確地連接起來，使用者就可以通過屏幕閱讀器聽到圖片的描述。同時(shí)，使用 <label> 標(biāo)簽和 <input> 標(biāo)簽可以讓表單字段的標(biāo)簽和輸入框正確地對應(yīng)，使得表單更易于填寫。

總之，使用語義 HTML 是實(shí)現(xiàn)網(wǎng)頁可訪問性的有效方法，它不僅僅是為了搜索引擎優(yōu)化，還是為了讓更多用戶可以享受到網(wǎng)頁的內(nèi)容。

標(biāo)題: 實(shí)現(xiàn)語義 HTML 的關(guān)鍵技巧: 使用語義標(biāo)簽和屬性

實(shí)現(xiàn)語義 HTML 的關(guān)鍵是正確地使用語義標(biāo)簽和屬性。下面是幾個(gè)常用的語義標(biāo)簽和屬性，可以幫助提高網(wǎng)頁可訪問性：

<header> 標(biāo)簽：用于頁面頭部，包含網(wǎng)站標(biāo)題、logo 等信息。

<nav> 標(biāo)簽：用于導(dǎo)航菜單，幫助用戶快速瀏覽網(wǎng)站。

<article> 標(biāo)簽：用于文章內(nèi)容，包括博客文章、新聞等。

<section> 標(biāo)簽：用于分隔網(wǎng)頁內(nèi)容的不同部分。

<aside> 標(biāo)簽：用于側(cè)邊欄或其他與主要內(nèi)容相關(guān)但不是必需的內(nèi)容。

<figure> 標(biāo)簽：用于圖片、圖表等可視化內(nèi)容，并且可以與 <figcaption> 標(biāo)簽一起使用。

<footer> 標(biāo)簽：用于頁面底部，包含版權(quán)信息、聯(lián)系方式等。

<label> 標(biāo)簽：用于表單字段的標(biāo)簽，可以與 <input> 標(biāo)簽一起使用。

<input> 標(biāo)簽：用于表單輸入框，可以設(shè)置類型、名稱等屬性。

<select> 標(biāo)簽：用于下拉菜單，可以設(shè)置選項(xiàng)列表。

<textarea> 標(biāo)簽：用于多行文本輸入框。

使用這些語義標(biāo)簽和屬性，不僅可以讓網(wǎng)頁更具結(jié)構(gòu)化，還可以讓屏幕閱讀器更好地解析網(wǎng)頁內(nèi)容，從而提高網(wǎng)頁可訪問性。

標(biāo)題: 實(shí)踐中的語義 HTML 示例: 創(chuàng)建一個(gè)簡單的網(wǎng)頁布局

下面是一個(gè)使用語義 HTML 的簡單網(wǎng)頁布局示例：

<!DOCTYPE html>

<head>

<title>Example Page</title>

</head>

<body>

<h1>Example Page</h1>

<p>This is an example page with semantic HTML.</p>

</header>

<nav>

<ul>

<li><a href="#">About</a></li>

<li><a href="#">Contact</a></li>

</ul>

</nav>

<h2>Article Heading</h2>

<p>This is an example article. You can use <code>section</code> and <code>aside> tags to structure your content.</p>

<h3>Section Heading</h3>

<p>This is a section within the article.</p>

</section>

<aside>

<h4>Aside Heading</h4>

<p>This is an aside, which is related to the article but not a part of the main content.</p>

</aside>

</article>

</footer>

</body>

</html>

在上述示例中，我們使用了各種語義標(biāo)簽來結(jié)構(gòu)化網(wǎng)頁內(nèi)容。<header> 標(biāo)簽用于頁面頭部，<nav> 標(biāo)簽用于導(dǎo)航菜單，<article> 標(biāo)簽用于文章內(nèi)容，<section> 標(biāo)簽用于分隔內(nèi)容，<aside> 標(biāo)簽用于側(cè)邊欄，<figure> 標(biāo)簽用于圖片，<footer> 標(biāo)簽用于頁面底部。同時(shí)，我們還使用了各種標(biāo)簽的屬性，如 <h1>、<h2>、<h3>、<h4> 等來標(biāo)記標(biāo)題，<p> 標(biāo)簽用于文本內(nèi)容，<a> 標(biāo)簽用于鏈接，<code> 標(biāo)簽用于代碼高亮等。

通過正確地使用語義 HTML，我們可以讓網(wǎng)頁更具結(jié)構(gòu)化，同時(shí)也讓屏幕閱讀器更好地解析網(wǎng)頁內(nèi)容，從而提高網(wǎng)頁可訪問性。

來無事，敲了一個(gè)百度搜索提示框分享給大家；

效果圖

項(xiàng)目

<!doctype html>

<html>

<head>

<title>百度搜索提示框</title>

<style>

* { margin: 0;padding: 0; outline: none;}

.search101 {

width: 650px;

margin: 300px auto;

font-size: 0;

}

.sou1 {

width: 514px;

height: 40px;

color: #666;

font: 16px Microsoft YaHei;

border: 1px solid rgba(170,170,170,.9);

border-right: 0;

border-radius: 2px 0 0 2px;

background: rgba(255,255,255,.9);

padding: 0 30px 0 3px;

vertical-align: top;

display: inline-block;

transition: .2s;

}

.sou2 {

width: 100px;

height: 42px;

font: 16px Microsoft YaHei;

color: rgba(255,255,255,.9);

background: rgba(0,170,240,1);

border: 0;

border-left: 1px solid rgba(0,170,240,1);

border-radius: 0 2px 2px 0;

margin: 0 0 0 -1px;

vertical-align: top;

transition: .3s;

display: inline-block;

cursor: pointer;

}

.sou2:hover {

background: rgba(0,140,220,.9);

}

.sou1:focus {

color: #333;

border: 1px solid rgba(0,170,240,1);

border-right: none;

}

</style>

</head>

<body>

</form>

</div>

document.getElementById("sou1").focus();

var txtObj=document.getElementById("alertSpan");

//回調(diào)函數(shù)，用于獲取用戶當(dāng)前選擇的文字

function show(str){

txtObj.innerHTML=str;

}

var params={

"XOffset": 0, //提示框位置橫向偏移量,單位px

"YOffset": 0, //提示框位置縱向偏移量,單位px

"width": 204, //提示框?qū)挾龋瑔挝籶x

"fontColor": "#666", //提示框文字顏色

"fontColorHI": "#222", //提示框高亮選擇時(shí)文字顏色

"fontSize": "16px", //文字大小

"fontFamily": "微軟雅黑", //文字字體

"borderColor": "#d8d8d8", //提示框的邊框顏色

"bgcolorHI": "#e8e8e8", //提示框高亮選擇的顏色

"sugSubmit": true, //在選擇提示詞條是是否提交表單

};

BaiduSuggestion.bind("ipt1",params,show);

</script>

</body>

</html>

在線咨詢

上一篇：如何復(fù)制網(wǎng)頁上的文字，七種方法教你解決問題
下一篇：JavaScript DOM節(jié)點(diǎn)訪問方法和屬性

您的項(xiàng)目需求

*請認(rèn)真填寫需求信息，我們會在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

「技術(shù)」CSS 自定義高亮文本

效果圖

項(xiàng)目

您的項(xiàng)目需求