整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

基于开源技术,从0到1构建一个强大的搜索功能并不难

信大家平时都有用360搜索、百度搜索、谷歌搜索等来查询自己想要的东西。或者熟悉w3cschool的用户相信都很清楚,只要在首页导航的搜索框中输入你想要了解的内容,都会跳出所有的数据。

360搜索、百度搜索等搜索引擎的的数据查询这么快,对于非内部员工来说,不知道他们是怎么实现的。而w3cschool搜索框的数据之所以能够如此快、如此详细的查询出海量数据,是因为迅搜(Xunsearch)技术的利用。

Xunsearch 是免费开源的专业全文检索解决方案,旨在帮助一般开发者针对既有的海量数据,快速而方便地建立自己的全文搜索引擎。全文检索可以帮助您降低服务器搜索负荷、极大程度的提高搜索速度和用户体验。

Xunsearch 高性能:后端是采用 C/C++ 开发多线程服务端,索引设计基于 Xapian 和 scws 中文分词。单库最多支持 40 亿条数据,在 5 亿网页大约 1.5TB 的数据中检索时间不超过 1 秒(非缓存);简单易用:前端是使用脚本语言编写的开发工具 (SDK),目前仅支持 PHP 语言。API 简单清晰,开发难度极低,提供全中文的示例代码、文档、辅助脚本工具等;全功能:除支持基础的自定义分词、字段检索、布尔搜索外,还直接支持用户急需的相关搜索、拼音搜索、搜索建议等专业功能。

为了方便大家,w3cschool资深用户精选 xunsearch技术教程。 本教程旨在全面介绍 Xunsearch PHP-SDK 的用法,是学习掌握 xunsearch 搜索开发的 基础资料。

本教程中,囊括新手安装教程、了解基础对象方法、编写项目配置文件、管理索引、使用搜索等知识,如果你想让自己网站的搜索更快速、更海量、更便捷,那么可以看看本教程。更多详情,请移步:http://www.w3cschool.cn/xunsearch/cunxca.html。

搜索是每个网站的必备组成部分,如果你是计算机新手,想学着建一个站,那么可以看看迅搜(Xunsearch)教程;如果你是从业多年的程序员,你想让自己网站的搜索更快,那么迅搜(Xunsearch)也许会给你带来意想不到的效果。学会了迅搜(Xunsearch),再也不害怕老板的为难了!

要想看到更多更详细的xunsearc资源,强烈建议收藏:http://www.w3cschool.cn/xunsearch/cunxca.html。有了这个收藏夹,找干货不用愁!

公众号:w3c技术教程

么是 HTML?


HTML (Hypertext Markup Language)是标准标记语言,是 Web 浏览器显示的基础。 此外,CSS(Cascading Style Sheets)等技术以及JavaScript等脚本语言也支持这种技术。


创建主页时,首先使用 HTML 确定句子的结构并标记它,然后设计要显示的信息。 这是网页的基础。


现在,让我们仔细看看可以使用少量 CSS 代码实现的技术。



一种技术摘要,可以使用鲜为人知的短 HTML 代码实现

loading="lazy"属性

Web 性能改进技术之一是属性,允许用户延迟加载,直到滚动。 它还适用于嵌入 YouTube 视频的 iframe 代码和大尺寸图像。loading="lazy"


XHTML

1

<img src='image.jpg' loading='lazy' alt='代替テキスト'>



发送电子邮件、电话或短信短信

打开电子邮件创建页面、直接拨打电话或发送短消息的技术。


XHTML

1

2

3

4

5

6

7

8

9

10

11

<a href="mailto:{email}?subject={subject}&body={content}">

Eメールを送信

</a>


<a href="tel:{phone}">

お電話ください

</a>


<a href="sms:{phone}?body={content}">

SMSショートメッセージを送信

</a>



确定列表顺序的属性strat

start属性允许您自由确定列表格式的数字。




meter在元素中显示数字

meter元素允许您使用彩色滑块显示数字和数量。 不需要 JavaScript 或 CSS。




HTML 本机搜索

通过预先在表单输入元素中指定一些数据列表,可以将其作为候选关键字显示在输入字段中的下拉列表中。




Fieldset按元素对标签进行分组

fieldset元素允许您将 Web 窗体中的多个控件和标签 () 组合在一起。label




使用 window.opener 防止检索原始窗口中的信息

target="_blank在 中打开的页面将允许您访问原始页面的 window.opener。 这可能会对安全性和性能产生负面影响,例如"原始窗口在知道之前已转换到填充站点"。 为了防止这种情况,请包括 或 。rel="noopener"rel="noreferrer"


1

2

3

<a href="https://markodenic.com/" target="_blank" rel="noopener">

参考ウェブサイト

</a>



base元素

如果要在新选项卡中打开 HTML 文档中的所有链接,可以使用元素。 在下面的示例中,两个链接都在新的选项卡中打开。base




防止传真机缓存

若要更新网站的传真,您可以通过将其添加到文件名中来在浏览器中下载新版本。?v=2


一种有效的技术,尤其是在生产环境中,以确保用户输入新版本。


XHTML

1

<link rel="icon" href="/favicon.ico?v=2" />



spellcheck按属性检查拼写

可以决定是否检查元素的拼写错误的属性。spellcheck




显示 HTML 滑块

input type="range"允许您使用滑块调整数字。 所选数字可以显示在 中。input type="number"




仅通过 HTML 显示手风琴

details元素允许您创建仅 HTML 本机手风琴。




mark标记中的文本突出显示突出显示

mark标记允许您使用黄色标记突出显示文本的一部分。




下载文件具有属性download

URL 链接的属性允许您直接下载文件,而不是将其移动到文件中。download


XHTML

1

2

3

<a href='path/to/file' download>

Download

</a>



webp使用文件格式

使用".webp"作为图像格式可以减小图像大小并提高网站性能。


XHTML

1

2

3

4

5

6

7

8

9

10

11

<picture>

<!-- サポートされていたら.webp画像を読み込む -->

<source srcset="logo.webp" type="image/webp">


<!--

      .webp画像や<picture>タグが

       ブラウザにサポートされていないときの

       フォールバックとして

-->

<img src="logo.png" alt="logo">

</picture>



视频视频缩略图视图

poster属性允许您指定在加载视频或按下"播放"按钮之前显示的图像。


XHTML

1

<video poster="path/to/image">



type="search"在 中显示取消标记

在搜索框中使用时,将自动显示"X"清除标记以取消。type="search"




只有 HTML 可以实现的功能,我有很多。 我们计划在未来添加和更新小技巧技术。

础 JavaScript 实例

  • 用JavaScript输出文本

  • 用JavaScript改变HTML元素

  • 一个外部JavaScript

  • 实例解析

JavaScript 语句、注释和代码块

  • JavaScript 语句

  • JavaScript 代码块

  • JavaScript 单行注释

  • JavaScript 多行注释

  • 使用单行注释来防止执行

  • 使用多行注释来防止执行

  • 实例解析

JavaScript 变量

  • 声明一个变量,为它赋值,然后显示出来

  • 实例解析

JavaScript 条件语句 If ... Else

  • If 语句

  • If...else 语句

  • 随机链接

  • Switch 语句

  • 实例解析

JavaScript 消息框

  • Alert(警告)框

  • 带有换行的警告框

  • 确认框

  • 提示框

  • 实例解析

JavaScript 函数

  • 函数

  • 带有参数的函数

  • 带有参数的函数 2

  • 返回值的函数

  • 带有参数并返回值的函数

  • 实例解析

JavaScript 循环

  • For 循环

  • 循环输出 HTML 标题

  • While 循环

  • Do while 循环

  • break 语句

  • continue 语句

  • 使用 For...In 声明来遍历数组内的元素

  • 实例解析

JavaScript 事件

  • onclick事件

  • onmouseover 事件

  • 实例解析

JavaScript 错误处理

  • try...catch 语句

  • 带有确认框的 try...catch 语句

  • onerror 事件

  • 实例解析


高级 JavaScript 实例

  • 创建一个欢迎 cookie

  • 简单的计时

  • 另一个简单的计时

  • 在一个无穷循环中的计时事件

  • 带有停止按钮的无穷循环中的计时事件

  • 使用计时事件制作的钟表

  • 创建对象的实例

  • 创建用于对象的模板


JavaScript 应用实例

  • javascript 幻灯片代码(含自动播放)

  • CSS 日历样式

  • JavaScript 弹窗

  • JavaScript 图片弹窗

  • JavaScript Lightbox

  • javascript 搜索框自动提示

  • JavaScript 表格数据搜索