Web开发技术速查助手

{
  "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'>&lt;!DOCTYPE html&gt;\
&lt;html lang='en'&gt;\
&lt;head&gt;\
  &lt;meta charset='UTF-8'&gt;\
  &lt;meta name='viewport' content='width=device-width, initial-scale=1.0'&gt;\
  &lt;title>CSS Example&lt;/title&gt;\
  &lt;style&gt;\
    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;\
    }\
  &lt;/style&gt;\
&lt;/head&gt;\
&lt;body&gt;\
  &lt;h1&gt;Welcome to CSS&lt;/h1&gt;\
  &lt;p&gt;This is a basic example of how CSS enhances the look and feel of a webpage.&lt;/p&gt;\
&lt;/body&gt;\
&lt;/html&gt;</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"
}

{
  "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": "中文"
}