一款简明高效的技术知识查询工具，支持多语言、多场景，快速帮助初学者理解Web开发技术概念。
```json
{
"title": "HTML：超文本标记语言的基础解析",
"description": "HTML（HyperText Markup Language，超文本标记语言）是Web开发的核心技术之一，用于定义网页的结构和内容。HTML通过一系列标记（Tags）来描述网页上的元素，如标题、段落、图片、链接等。它是所有网页的骨架，在前端开发中与CSS（样式）和JavaScript（交互）共同构成了Web开发的基础。对初学者而言，理解HTML的语法和核心概念是学习Web开发的第一步。HTML的特点包括：\n\n- **结构化内容**：通过语义化标签，如`<header>`、`<footer>`，便于搜索引擎优化和增强可读性。\n- **跨平台支持**：HTML是浏览器直接解析的语言，无需依赖平台，支持所有操作系统和设备。\n- **扩展性**：可以结合CSS和JavaScript扩展功能，实现更加复杂的网页应用。",
"examples": [
"以下是一个简单的HTML文档结构示例：\n\n```html\n<!DOCTYPE html>\n<html lang=\"zh-CN\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>我的第一个HTML页面</title>\n</head>\n<body>\n <h1>欢迎来到我的网站！</h1>\n <p>这是一个简单的HTML页面示例。</p>\n <a href=\"https://example.com\">了解更多</a>\n</body>\n</html>\n```\n\n这个页面的功能：\n1. 标题部分`<title>`定义网页在浏览器标签上的名称。\n2. `<h1>`表示一级标题，通过大字体呈现。\n3. 段落`<p>`提供一段文字内容。\n4. 超链接`<a>`实现页面跳转。",
"应用场景：如果你希望构建个人主页，可以使用HTML提供静态的文本结构。结合CSS来美化网页外观，最终通过JavaScript增加一些动态行为（如点击按钮时弹出消息）。"
],
"references": [
"MDN HTML官方文档：https://developer.mozilla.org/zh-CN/docs/Web/HTML",
"W3Schools HTML指南：https://www.w3schools.com/html/",
"HTML Living Standard：https://html.spec.whatwg.org/"
],
"language": "中文"
}
```
```json
{
"title": "Understanding CSS (Cascading Style Sheets): A Core Web Development Technology",
"description": "<h2>What is CSS?</h2> \
<p><strong>Cascading Style Sheets (CSS)</strong> is a cornerstone technology in web development that controls the presentation and design of web pages. It is used to separate content (HTML) from presentation (styling), providing flexibility and improving the structure of a website.</p> \
\
<h3>How Does CSS Work?</h3> \
<p>CSS applies styles to HTML elements by using a combination of <strong>rulesets</strong>, which consist of selectors (target elements) and declarations (styling instructions). CSS rules are applied in a hierarchy based on <strong>specificity</strong>, known as the cascading principle.</p> \
\
<h3>Features of CSS:</h3> \
<ul> \
<li><strong>Styling:</strong> CSS allows developers to define colors, fonts, margins, paddings, layouts, and more.</li> \
<li><strong>Responsive Design:</strong> CSS facilitates layouts that adapt to different screen sizes using techniques like <em>media queries</em>.</li> \
<li><strong>Global and Reusable Rules:</strong> Once written, CSS rules can be reused throughout a website.</li> \
<li><strong>Animation:</strong> CSS supports animations and transitions without the need for JavaScript.</li> \
</ul> \
\
<h3>Why is CSS Important?</h3> \
<p>For students or beginners: CSS enables you to create visually appealing and accessible websites. Knowing CSS is essential for any aspiring web developer because it works with HTML and JavaScript to form the core trifecta of modern web technologies.</p>",
"examples": [
"<h3>Example: Styling a Webpage</h3> \
<p>Below is an example of how CSS can be applied to an HTML page using internal styles:</p> \
<pre><code class='language-html'><!DOCTYPE html>\
<html lang='en'>\
<head>\
<meta charset='UTF-8'>\
<meta name='viewport' content='width=device-width, initial-scale=1.0'>\
<title>CSS Example</title>\
<style>\
body {\
font-family: Arial, sans-serif;\
background-color: #f5f5f5;\
margin: 20px;\
}\
h1 {\
color: #333;\
text-align: center;\
}\
p {\
color: #555;\
font-size: 18px;\
line-height: 1.6;\
}\
</style>\
</head>\
<body>\
<h1>Welcome to CSS</h1>\
<p>This is a basic example of how CSS enhances the look and feel of a webpage.</p>\
</body>\
</html></code></pre>",
"<h3>Example: Responsive Design with Media Queries</h3> \
<p>Here's how you can make a page adjust its layout based on screen size:</p> \
<pre><code class='language-css'>body {\
font-size: 16px;\
}\
@media (max-width: 768px) {\
body {\
font-size: 14px;\
}\
}\
@media (max-width: 480px) {\
body {\
font-size: 12px;\
}\
}</code></pre>"
],
"references": [
"<a href='https://developer.mozilla.org/en-US/docs/Web/CSS' target='_blank'>MDN Web Docs: CSS</a>",
"<a href='https://css-tricks.com/' target='_blank'>CSS-Tricks</a>"
],
"language": "English"
}
```
```json
{
"title": "JavaScript：Web开发核心编程语言",
"description": "JavaScript 是一种轻量级、解释型、或即时编译型的编程语言，是Web开发的核心技术之一，与HTML和CSS共同构成Web开发的三大支柱。**作为一门高级语言，JavaScript 支持面向对象、函数式编程，并增强动态交互功能**。以下内容根据初级、中级和高级维度解析 JavaScript：\n\n### 基础内容\nJavaScript 最早由 Netscape 推出，主要用于在浏览器内实现页面动态交互。它的基本特点包括：\n- **动态类型**：无需显式定义变量类型，通过 `let`、`const` 或 `var` 声明变量。\n- **事件驱动**：通过事件监听和响应，创建动态用户交互界面。\n- **DOM 操作**：允许开发者动态更新和控制HTML页面的结构和样式。\n\n**示例代码：定义和使用一个JavaScript变量以打印Hello World**：\n```javascript\nlet message = 'Hello World';\nconsole.log(message);\n```\n\n### 中级内容\n随着 ECMAScript 标准的发展（JavaScript 的标准化规范），现代 JavaScript 增加了许多高效的特性：\n- **模块化**：通过 `import` 和 `export` 来组织多个模块的代码，提升可维护性。\n- **异步编程**：利用 Promises 和 async/await 等机制更优雅地处理异步操作。\n- **面向对象编程（OOP）**：支持使用 classes 和继承来实现复杂的数据模型。\n\n**示例代码：使用 async/await 获取远程数据**：\n```javascript\nasync function fetchData(url) {\n try {\n const response = await fetch(url);\n const data = await response.json();\n console.log(data);\n } catch (error) {\n console.error('Error fetching data:', error);\n }\n}\nfetchData('https://api.example.com/data');\n```\n\n### 高级内容\n在高级应用中，JavaScript 被广泛用于构建现代前端和后端架构：\n- **框架和库**：如React、Vue、Angular用于创建复杂的单页应用程序（SPA）。\n- **服务端运行**：通过运行环境（如Node.js）实现服务器端逻辑开发。\n- **性能优化**：实现Tree Shaking、代码分割和延迟加载提升应用性能。\n\n**示例代码：构建一个简单的Express.js服务器**：\n```javascript\nconst express = require('express');\nconst app = express();\n\napp.get('/', (req, res) => {\n res.send('Hello from Express.js!');\n});\n\napp.listen(3000, () => {\n console.log('Server is running on http://localhost:3000');\n});\n```\n",
"examples": [
"基础：定义变量并打印输出",
"中级：用 async/await 获取远程数据",
"高级：使用 Node.js 和 Express 创建基础服务器"
],
"references": [
"MDN JavaScript指南：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript",
"ECMAScript 官方规范：https://tc39.es/ecma262/",
"Node.js 官方文档：https://nodejs.org/zh-cn/"
],
"language": "中文"
}
```
快速理解Web开发技术基础概念，通过关键词查询和场景化示例打下扎实技能基础。
便捷获得技术解析和示例，快速生成教学辅助资料，优化课堂内容设计。
高效查询技术概念及相关实例，协助编写准确易读的Web开发技术文档。
利用多语言支持功能，统一技术理解，消除语言障碍促进团队协同工作。
通过分层解读和实战示例，更直观地理解复杂技术概念，加速掌握开发技能。
帮助初学者、教育工作者以及开发者快速理解Web开发中的技术概念，提供高效、精准的技术知识查询服务，通过提供简明易懂的解读、多语言支持以及多场景适配，降低学习门槛，提升学习和工作效率。
将模板生成的提示词复制粘贴到您常用的 Chat 应用（如 ChatGPT、Claude 等），即可直接对话使用，无需额外开发。适合个人快速体验和轻量使用场景。
把提示词模板转化为 API，您的程序可任意修改模板参数，通过接口直接调用，轻松实现自动化与批量处理。适合开发者集成与业务系统嵌入。
在 MCP client 中配置对应的 server 地址，让您的 AI 应用自动调用提示词模板。适合高级用户和团队协作，让提示词在不同 AI 工具间无缝衔接。
免费获取高级提示词-优惠即将到期
