「技術」CSS 自定義高亮文本

瀏覽器中，一個比較常見的高亮文本場景是，用戶按下快捷鍵ctr+f，對文本內容進行搜索。在頁面里，相應的文本就會高亮。這種高亮，是瀏覽器實現的。

如果我們要實現這種高亮效果，現有的CSS實現起來是相對比較麻煩的。

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

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

方案二，對于在頁面中需要高亮的文本，進行單獨處理

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

對于需要動態(tài)變化的內容處理，例如codemirror，會有一套獨立的dom結構樹，通過dom結構樹，根據處理后的dom結構，在頁面中呈現出高亮。這種方案，就相當復雜了。

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

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

這種方案，比::selection方案具有更強的可操作性。這是新的api，各個瀏覽器沒有完全實現。

【參考資料】

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

作中...

標題: 逐步實現網頁可訪問性的關鍵技巧: 使用語義 HTML 提高網站可訪問性

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

在 HTML 代碼中，語義標簽可以明確地表示網頁中各個元素的內容和結構，從而使網頁更易于閱讀和理解。例如，使用 <header> 標簽來標記頁面頭部，<nav> 標簽來標記導航菜單，<article> 標簽來標記文章內容等。這些標簽不僅僅是為了美化頁面設計，還是為了提高可訪問性的一部分。

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

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

標題: 實現語義 HTML 的關鍵技巧: 使用語義標簽和屬性

實現語義 HTML 的關鍵是正確地使用語義標簽和屬性。下面是幾個常用的語義標簽和屬性，可以幫助提高網頁可訪問性：

<header> 標簽：用于頁面頭部，包含網站標題、logo 等信息。

<nav> 標簽：用于導航菜單，幫助用戶快速瀏覽網站。

<article> 標簽：用于文章內容，包括博客文章、新聞等。

<section> 標簽：用于分隔網頁內容的不同部分。

<aside> 標簽：用于側邊欄或其他與主要內容相關但不是必需的內容。

<figure> 標簽：用于圖片、圖表等可視化內容，并且可以與 <figcaption> 標簽一起使用。

<footer> 標簽：用于頁面底部，包含版權信息、聯系方式等。

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

<input> 標簽：用于表單輸入框，可以設置類型、名稱等屬性。

<select> 標簽：用于下拉菜單，可以設置選項列表。

<textarea> 標簽：用于多行文本輸入框。

使用這些語義標簽和屬性，不僅可以讓網頁更具結構化，還可以讓屏幕閱讀器更好地解析網頁內容，從而提高網頁可訪問性。

標題: 實踐中的語義 HTML 示例: 創(chuàng)建一個簡單的網頁布局

下面是一個使用語義 HTML 的簡單網頁布局示例：

<!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>

在上述示例中，我們使用了各種語義標簽來結構化網頁內容。<header> 標簽用于頁面頭部，<nav> 標簽用于導航菜單，<article> 標簽用于文章內容，<section> 標簽用于分隔內容，<aside> 標簽用于側邊欄，<figure> 標簽用于圖片，<footer> 標簽用于頁面底部。同時，我們還使用了各種標簽的屬性，如 <h1>、<h2>、<h3>、<h4> 等來標記標題，<p> 標簽用于文本內容，<a> 標簽用于鏈接，<code> 標簽用于代碼高亮等。

通過正確地使用語義 HTML，我們可以讓網頁更具結構化，同時也讓屏幕閱讀器更好地解析網頁內容，從而提高網頁可訪問性。

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

效果圖

項目

<!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");

//回調函數，用于獲取用戶當前選擇的文字

function show(str){

txtObj.innerHTML=str;

}

var params={

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

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

"width": 204, //提示框寬度，單位px

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

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

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

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

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

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

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

};

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

</script>

</body>

</html>

在線咨詢

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

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

「技術」CSS 自定義高亮文本

效果圖

項目

您的項目需求