整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
浏览器中，一个比较常见的高亮文本场景是，用户按下快捷键ctr+f，对文本内容进行搜索。在页面里，相应的文本就会高亮。这种高亮，是浏览器实现的。
如果我们要实现这种高亮效果，现有的CSS实现起来是相对比较麻烦的。
方案一，使用伪元素::selection
当我们在页面中，选中一段文本的时候，可以通过document.getSelection()获取到文本选中的节点信息。相应的，我们可以通过Range Api去主动设置选中文本范围。再通过设置::selection样式，实现选中文本高亮效果。这种方案，实现起来比较麻烦，我们需要精确计算每一个高亮预期的选中起止位置。
方案二，对于在页面中需要高亮的文本，进行单独处理
对于静态呈现的内容，在开发中，一般通过设置固定的标签和样式实现文本高亮。
对于需要动态变化的内容处理，例如codemirror，会有一套独立的dom结构树，通过dom结构树，根据处理后的dom结构，在页面中呈现出高亮。这种方案，就相当复杂了。
方案三, 使用伪元素::highlight
这个方案的实现方式，与::selection类似。通过Range Api 设置选中区域。再将这些区域配置进需要高亮的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 提高网站可访问性
在现代网络时代，网页可访问性变得越来越重要。为了确保所有用户，包括有视障、语言障碍或其他能力限制的用户，都可以方便地访问和使用网站，开发者需要采用合理的可访问性策略。语义 HTML 是实现网页可访问性的关键技巧之一，它可以帮助搜索引擎更好地理解网页内容，同时也可以让屏幕阅读器和其他辅助技术更好地解析网页。
在 HTML 代码中，语义标签可以明确地表示网页中各个元素的内容和结构，从而使网页更易于阅读和理解。例如，使用 <header> 标签来标记页面头部，<nav> 标签来标记导航菜单，<article> 标签来标记文章内容等。这些标签不仅仅是为了美化页面设计，还是为了提高可访问性的一部分。
另外，语义 HTML 还可以帮助屏幕阅读器正确地读出网页内容。例如，使用 <figure> 标签和 <figcaption> 标签可以将图片和图片说明明确地连接起来，使用者就可以通过屏幕阅读器听到图片的描述。同时，使用 <label> 标签和 <input> 标签可以让表单字段的标签和输入框正确地对应，使得表单更易于填写。
总之，使用语义 HTML 是实现网页可访问性的有效方法，它不仅仅是为了搜索引擎优化，还是为了让更多用户可以享受到网页的内容。
标题: 实现语义 HTML 的关键技巧: 使用语义标签和属性
实现语义 HTML 的关键是正确地使用语义标签和属性。下面是几个常用的语义标签和属性，可以帮助提高网页可访问性：
<header> 标签：用于页面头部，包含网站标题、logo 等信息。
<nav> 标签：用于导航菜单，帮助用户快速浏览网站。
<article> 标签：用于文章内容，包括博客文章、新闻等。
<section> 标签：用于分隔网页内容的不同部分。
<aside> 标签：用于侧边栏或其他与主要内容相关但不是必需的内容。
<figure> 标签：用于图片、图表等可视化内容，并且可以与 <figcaption> 标签一起使用。
<footer> 标签：用于页面底部，包含版权信息、联系方式等。
<label> 标签：用于表单字段的标签，可以与 <input> 标签一起使用。
<input> 标签：用于表单输入框，可以设置类型、名称等属性。
<select> 标签：用于下拉菜单，可以设置选项列表。
<textarea> 标签：用于多行文本输入框。
使用这些语义标签和属性，不仅可以让网页更具结构化，还可以让屏幕阅读器更好地解析网页内容，从而提高网页可访问性。
标题: 实践中的语义 HTML 示例: 创建一个简单的网页布局
下面是一个使用语义 HTML 的简单网页布局示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example Page</title>
</head>
<body>
<header>
<h1>Example Page</h1>
<p>This is an example page with semantic HTML.</p>
</header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<article>
<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>
<section>
<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>
<p>Copyright © 2023 Example Company. All rights reserved.</p>
</footer>
</body>
</html>
在上述示例中，我们使用了各种语义标签来结构化网页内容。<header> 标签用于页面头部，<nav> 标签用于导航菜单，<article> 标签用于文章内容，<section> 标签用于分隔内容，<aside> 标签用于侧边栏，<figure> 标签用于图片，<footer> 标签用于页面底部。同时，我们还使用了各种标签的属性，如 <h1>、<h2>、<h3>、<h4> 等来标记标题，<p> 标签用于文本内容，<a> 标签用于链接，<code> 标签用于代码高亮等。
通过正确地使用语义 HTML，我们可以让网页更具结构化，同时也让屏幕阅读器更好地解析网页内容，从而提高网页可访问性。
来无事，敲了一个百度搜索提示框分享给大家；
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<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>
<div class="search101">
<form action="http://www.baidu.com/baidu" class="search-form" method="" id="search-form">
<input id="ipt1" name="tn" type="hidden" value="baidu" >
<input type="text" id="sou1" class="sou1" name="word" maxlength="8048" value="" placeholder="" baiduSug=1 onmouseover="focus()">
<input type="submit" class="sou2" value="百度一下" >
</form>
</div>
<!-- 百度搜索提示 -->
<script charset="gbk" src="http://www.baidu.com/js/opensug.js"></script> <!-- we124.com/libs/js/opensug.js(无logo) -->
<script>
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>
*请认真填写需求信息，我们会在24小时内与您取得联系。
