我也念过晚霞

180.HTML、CSS、JavaScript

——————————————————————————————— 【1. 引言】

在 Android 开发过程中，前端技术（HTML、CSS、JavaScript）逐渐成为不可或缺的技能之一。无论是通过 WebView 显示网页内容，还是构建混合应用，掌握前端基础将有助于提升整体产品体验。本文在保证内容全面性的前提下，剔除了多余的推荐信息，直接进入技术核心讲解。通过详细介绍 HTML、CSS 与 JavaScript 的基本概念、语法及实际应用案例，你将学会如何从零开始撰写一个完整的前端页面，并且了解如何借助这些技术构建动态、交互性强的 Web 应用。

——————————————————————————————— 【2. HTML 基础】

HTML（Hyper Text Markup Language）是构成网页的基础技术，其作用是定义网页的结构和内容。HTML 使用标签（Tag）来描述不同部分，如标题、段落、列表、链接、图像等。下面将详细介绍 HTML 的基本结构、常用标签、属性用法及语义化思想。

——————————————————————————————— 2.1 HTML 基本结构

一个标准 HTML 文件通常包含以下部分：文档类型声明、html 根标签、head 部分和 body 部分。文档类型声明（）用于告诉浏览器当前文档遵循 HTML5 标准。head 部分包含页面元数据（meta）、标题（title）、外部资源链接（CSS、JS 文件等），而 body 部分则包含页面真正的显示内容。

下面是一个最简单的 HTML 文件示例，注释中对各部分作了解释：



  
    
    
    
    
    
    示例页
  
  
    
    欢迎进入我的网页
    
    此页面用于展示 HTML 基础结构。

标签

标签用于提供关于 HTML 文档的元数据。元数据是关于数据的数据，它不会显示在页面内容中，但可以被浏览器、搜索引擎和其他 Web 服务使用。标签通常位于 HTML 文档的元素内部。

name="viewport" 属性

name 属性用于指定元数据的类型。在这里，name="viewport" 表示我们正在配置视口。视口是浏览器中用于显示网页的区域。在移动设备上，视口的大小可能与屏幕的物理大小不同。

content="width=device-width, initial-scale=1.0" 属性

content 属性用于指定元数据的值。在这里，content 属性包含了两个配置项：

width=device-width: 这告诉浏览器将视口的宽度设置为设备的宽度。这意味着网页将以设备屏幕的原始分辨率显示，而不会进行缩放。
initial-scale=1.0: 这设置了网页的初始缩放级别为 1.0，也就是不进行任何缩放。

使用的主要目的就是确保网页在不同大小的设备上以合理的、未经过度缩放的比例显示。

--------------------------------------------------------------------------------------------------------------------------------

在上面的例子中，“index.html” 文件展示了 HTML 文件最基本的结构和一些常见标签。作为 Android 开发者，当你在 WebView 中加载本地 HTML 文件时，这种结构是最常见的。

——————————————————————————————— 2.2 常用 HTML 标签

HTML 提供大量标签，用于不同用途。下面详细说明几种常见标签及其用法：

【2.2.1 标题标签】

标题标签从

到

共六个级别，其中

表示最高级的标题，而

为最低级标题。标题标签用于描述各级别的重要性和结构，通常一个页面中应有且只有一个

。

例如：



  
    
    标题示例
  
  
    这是一级标题
    这是二级标题
    这是三级标题

【2.2.2 段落标签】

段落标签

用于定义一段文本。浏览器默认为

标签提供上下边距，使段落之间有明显分隔，便于阅读。

例如：



  
    
    段落示例
  
  
    这是一段文本，用于展示段落的效果。
    另一段文本显示在不同的段落中。

【2.2.3 超链接标签】

超链接标签用于创建链接，既可以链接到外部网站，也可以链接到同一网站内部的其他页面。链接的目标以 href 属性设置。

例如：



  
    
    链接示例
  
  
    
    访问示例网站
    

    
    前往内部页面

【2.2.4 图像标签】

图像标签用于在网页中嵌入图片。必须提供 src（图片源）和 alt（替代文本）两个属性。alt 属性在图片加载失败时显示，同时对搜索引擎优化和辅助技术（如屏幕阅读器）有帮助。

例如：



  
    
    图像示例

【2.2.5 列表标签】

HTML 支持有序列表

标签定义。

例如，无序列表：



  
    
    无序列表示例
  
  
    
      苹果
      香蕉
      橘子

有序列表：



  
    
    有序列表示例
  
  
    
      第一步
      第二步
      第三步

【2.2.6 表格标签】

表格标签

用于展示结构化数据，通过定义行，

定义表头单元格，

定义普通单元格，支持行和列的排布。

例如：

【2.2.7 表单标签】

表单标签

用于与用户交互，收集输入信息。常见的表单元素包括、

</code>、<code><select></code>、<code><button></code> 等。下面是一个简单的登录表单示例：</p> 
  <pre><code class="language-html"><!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>表单示例</title>
</head>
<body>
<form action="/login" method="post">
    <label for="username">用户名：</label>
    <input type="text" id="username" name="username" required>
    <br>
    <label for="password">密码：</label>
    <input type="password" id="password" name="password" required>
    <br>
    <button type="submit">登录</button>
</form>
</body>
</html>
<!--
<form:
这是一个 HTML 标签，用于创建 HTML 表单。
HTML 表单用于收集用户输入的数据，例如文本、密码、选择等，并将这些数据发送到服务器进行处理。

<form> 标签通常包含以下属性：

action: 指定表单数据提交到的 URL 地址。 这是处理表单数据的服务器端脚本的地址。
method: 指定表单数据提交的方法。 常用的方法有 "get" 和 "post"。
"get" 方法将表单数据附加到 URL 的查询字符串中。 适用于少量数据，不安全。
"post" 方法将表单数据作为 HTTP 请求的主体发送。 适用于大量数据，更安全。
target: 指定在何处显示提交表单后返回的结果
    常用的值有 "_blank"（在新窗口或标签页中打开）和 "_self"（在当前窗口或标签页中打开）。
enctype: 指定表单数据的编码方式
    常用的值有 "application/x-www-form-urlencoded"（默认值）和 "multipart/form-data"（用于上传文件）。

<label for="username">用户名：</label>
<label>: 这是一个 HTML 标签，用于定义表单控件（例如 <input>、<textarea>、<select> 等）的标签
for="username": 这是 <label> 标签的一个属性，用于将标签与特定的表单控件关联起来。
for 属性的值必须与相关表单控件的 id 属性的值相同。
通过使用 for 属性，当用户点击标签时，浏览器会自动将焦点转移到相关联的表单控件上，从而提高用户体验。

<input type="text" id="username" name="username" required>:
<input>: 这是一个 HTML 标签，用于创建各种类型的表单输入控件，例如文本框、密码框、单选按钮、复选框等。
type="text": 这是 <input> 标签的一个属性，用于指定输入控件的类型。
type="text" 表示创建一个单行文本输入框，用户可以在其中输入文本。
id="username": 这是 <input> 标签的一个属性，用于为输入控件指定一个唯一的 ID。
id 属性用于在 HTML 文档中唯一标识一个元素。
id 属性的值可以被 CSS 和 JavaScript 用来选择和操作该元素。
name="username": 这是 <input> 标签的一个属性，用于指定输入控件的名称。
name 属性用于在表单提交时，将输入控件的值与名称一起发送到服务器。
服务器端脚本可以使用 name 属性来获取用户输入的值。
required: 这是一个 HTML5 属性，用于指定输入控件是必填项。
如果设置了 required 属性，则用户必须在提交表单之前在该输入控件中输入值。
如果用户没有输入值就尝试提交表单，浏览器会显示一个错误消息，提示用户填写该字段。

<br>:
这是一个 HTML 标签，用于在文本中插入一个换行符。
--></code></pre> 
  <p>——————————————————————————————— 2.3 HTML 属性及语义化</p> 
  <p>HTML 标签除了标签名外，可以附加属性来描述更多信息。例如在 <code><a href="url"></code> 中，href 用于指定链接目标；在 <code><img src="logo.png" alt="Logo"></code> 中，alt 用于给图片提供描述性文本。<br> HTML5 强调语义化，除了常规标签外，还提供了很多描述性标签，如：   <header> 表示页头；<br>   <nav> 表示导航栏；<br>   <article> 表示独立内容；<br>   <section> 表示章节内容；<br>   <aside> 表示侧边栏；<br>   <footer> 表示页脚。</p> 
  <p>这些标签不仅有助于代码清晰表达意义，也能提高搜索引擎索引的准确性和网站的可访问性。</p> 
  <p>示例：</p> 
  <p></p> 
  <pre><code class="language-html"><!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>语义化示例</title>
</head>
<body>
<header>
    <h1>网站标题</h1>
    <nav>
        <a href="index.html">首页</a>
        <a href="about.html">关于我们</a>
    </nav>
</header>

<main>
    <article>
        <h2>文章标题</h2>
        <p>这是文章正文。</p>
    </article>
    <aside>
        <h3>侧边信息</h3>
        <p>一些额外提示或广告内容。</p>
    </aside>
</main>

<footer>
    <p>版权所有 © 2025</p>
</footer>
</body>
</html>

<!--
<nav>:
这是一个 HTML5 语义化标签，用于定义页面的导航部分。
导航部分通常包含指向页面其他部分或其他页面的链接。
<nav> 标签有助于提高页面的可访问性和搜索引擎优化（SEO）。
<nav> 标签需要一个结束标签 </nav>。
作用：
<nav> 标签用于定义页面的导航部分，提供页面内的链接，方便用户浏览网站。

<header> 标签:
<header> 是 HTML5 中的一个语义化元素，用于定义文档或节的页眉。
页眉通常包含关于其所在内容的一些介绍性内容或导航辅助工具。
一个 HTML 文档可以有多个 <header> 元素。例如，一个用于整个文档，另一个用于一个 <article>。

<main> 标签:
<main> 是 HTML5 中的一个语义化元素，用于定义文档的主体内容。
<main> 元素应该包含与文档中心主题直接相关的内容，并且应该是唯一的。
一个 HTML 文档中只能有一个 <main> 元素。
<main> 元素不应包含在 <header>、<footer> 或 <nav> 元素中。
<main> 标签需要一个结束标签 </main>.

<article> 是 HTML5 中的一个语义化元素，用于定义文档中独立的、完整的、可以独立于页面其他部分分发或重用的内容。
<article> 标签代表文档、页面、应用或网站中的一个独立的组成部分。
<article> 应该有意义，即使从网站的其余部分移除。
<article> 标签通常用于：
博客文章
新闻报道
论坛帖子
用户评论
独立的小部件
<article> 标签可以嵌套使用，例如，一篇博客文章可能包含多个 <article> 元素，每个元素代表一个评论。
<article> 标签需要一个结束标签 </article>.

<aside> 标签：

<aside> 是 HTML5 中的一个语义化元素，用于定义与页面主要内容相关的补充内容。
<aside> 元素通常包含侧边栏、广告、相关链接、引用、附加信息等。
<aside> 应该与周围的内容相关，但不是主要内容的一部分。
<aside> 标签可以放在 <article> 元素内部或外部。
放在 <article> 内部的 <aside> 元素表示与该文章相关的补充信息。
放在 <article> 外部的 <aside> 元素表示与整个页面相关的补充信息。
<aside> 标签需要一个结束标签 </aside>.

<footer> 标签：

<footer> 是 HTML5 中的一个语义化元素，用于定义文档或节的页脚。
<footer> 元素通常包含：
版权信息
联系方式
站点地图
社交媒体链接
相关文档链接
一个 HTML 文档可以有多个 <footer> 元素。 例如，一个用于整个文档，另一个用于一个 <article> 或 <section>。
<footer> 标签需要一个结束标签 </footer>.
--></code></pre> 
  <p></p> 
  <p>------------------------------------------------------------------------------------------------------------------------</p> 
  <p></p> 
  <p>——————————————————————————————— 2.4 HTML 注释</p> 
  <p>在开发过程中，为了提高代码可读性，可以在 HTML 中加入注释。注释以 <!-- 开始，以 --> 结束，例如：</p> 
  <pre><code class="language-html"><!-- 这是一个注释，不会显示在页面上 --></code></pre> 
  <p>利用注释可以解释复杂的代码结构，提示未来维护者，或者临时屏蔽代码块。</p> 
  <p></p> 
  <p>——————————————————————————————— 【3. CSS 基础】</p> 
  <p>CSS（Cascading Style Sheets）用于定义页面呈现的样式和布局。通过 CSS，你可以为 HTML 内容添加颜色、字体、边距、背景、动画等视觉效果，使页面更美观、易于使用。下面详细讲解 CSS 的基本语法、选择器、层叠规则、样式来源及常见示例。</p> 
  <p>——————————————————————————————— 3.1 CSS 基本语法</p> 
  <p>CSS 的基本语法由选择器、花括号以及属性——值对组成。例如：   选择器 { 属性名: 属性值; } 这个语句表示对选中的 HTML 元素设置某个样式。</p> 
  <p>示例：</p> 
  <pre><code class="language-css">p {
  font-size: 16px;
  color: #333;
  line-height: 1.6;
}</code></pre> 
  <p>以上代码表示所有段落 <code><p></code> 的字体大小为 16 像素，颜色使用 #333 深灰色，行高为 1.6 倍。</p> 
  <p>——————————————————————————————— 3.2 CSS 选择器</p> 
  <p>CSS 提供多种选择器以精确选中需要设置样式的元素，主要包括：</p> 
  <p>【3.2.1 元素选择器】<br> 直接使用标签名选取所有该标签元素。例如：</p> 
  <pre><code class="language-css">h1 {
  color: blue;
}</code></pre> 
  <p>表示所有 <code><h1></code> 均显示为蓝色。</p> 
  <p>【3.2.2 类选择器】<br> 通过元素的 class 属性进行选择。前缀使用“.”符号，如：</p> 
  <pre><code class="language-css">.container {
  max-width: 1200px;
  margin: 0 auto;
}</code></pre> 
  <ul> 
   <li><code>.container</code>: 这是一个 CSS 选择器，用于选择所有 <code>class</code> 属性值为 "container" 的 HTML 元素。</li> 
   <li><code>max-width: 1200px;</code>: 这个 CSS 属性设置元素的最大宽度为 1200 像素。 
    <ul> 
     <li>如果元素的内容宽度小于 1200 像素，则元素将以其内容的实际宽度显示。</li> 
     <li>如果元素的内容宽度大于 1200 像素，则元素将被限制为 1200 像素的宽度，并且可能会出现滚动条或内容溢出。</li> 
    </ul> </li> 
   <li><code>margin: 0 auto;</code>: 这个 CSS 属性设置元素的上下外边距为 0，左右外边距为 <code>auto</code>。 
    <ul> 
     <li><code>margin: 0</code> 表示上下外边距为 0 像素。</li> 
     <li><code>margin: auto</code> 表示左右外边距由浏览器自动计算，这通常会导致元素在其父元素中水平居中。</li> 
    </ul> </li> 
  </ul> 
  <ol> 
   <li> <p><strong><code>class="container"</code>：</strong></p> 
    <ul> 
     <li><code>class</code> 是 HTML 元素的一个属性，用于指定该元素所属的一个或多个 CSS 类。</li> 
     <li><code>container</code> 是一个 CSS 类名。</li> 
     <li><code>class="container"</code> 的意思是，将 HTML 元素（例如 <code><div></code>、<code><section></code>、<code><article></code> 等）应用名为 "container" 的 CSS 类。</li> 
     <li>CSS 类用于定义元素的样式，例如字体、颜色、大小、边距、内边距、布局等。</li> 
     <li><code>container</code> 类通常用于创建一个固定宽度的容器，用于包含页面的主要内容，并使其在不同屏幕尺寸上居中显示。</li> 
     <li>许多 CSS 框架（例如 Bootstrap）都提供了一个默认的 <code>container</code> 类，用于快速创建响应式布局。</li> 
    </ul> </li> 
  </ol> 
  <p></p> 
  <p>-------------------------------------------------------------------------------------------------------------------------------</p> 
  <p>【3.2.3 ID 选择器】<br> 通过元素的 id 属性选择，前缀使用“#”符号，例如：</p> 
  <pre><code class="language-css">#header {
  background-color: #f5f5f5;
}</code></pre> 
  <p>以上代码仅对 id 为 header 的元素生效。注意：单个页面中 id 应唯一。</p> 
  <p>【3.2.4 属性选择器】<br> 通过匹配元素的属性值来选取元素，例如：</p> 
  <pre><code class="language-css">a[href^="https://"] {
  color: green;
}</code></pre> 
  <p>以上代码表示所有 href 属性以 "https://" 开头的链接显示为绿色。</p> 
  <p>【3.2.5 组合选择器】<br> 可以使用后代选择器、子选择器、并集选择器、伪类选择器等。例如后代选择器：</p> 
  <pre><code class="language-css">.navbar ul li {
  display: inline-block;
}</code></pre> 
  <pre><code class="language-html"><nav class="navbar">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav></code></pre> 
  <p><strong><code><ul></code> 标签：</strong></p> 
  <ul> 
   <li><code><ul></code> 是 HTML 中的一个元素，用于定义一个无序列表（unordered list）。</li> 
  </ul> 
  <p><strong><code><li></code> 标签：</strong></p> 
  <ul> 
   <li><code><li></code> 是 HTML 中的一个元素，用于定义列表中的一个项目（list item）。</li> 
  </ul> 
  <ul> 
   <li><code>.navbar ul li</code>: 这是一个 CSS 选择器，用于选择所有满足以下条件的 <code><li></code> 元素： 
    <ul> 
     <li>该 <code><li></code> 元素是 <code><ul></code> 元素的子元素。</li> 
     <li>该 <code><ul></code> 元素是 <code>class</code> 属性值为 "navbar" 的元素的子元素。</li> 
     <li><code>.navbar</code> 通常是一个导航栏的容器。</li> 
    </ul> </li> 
   <li><code>display: inline-block;</code>: 这个 CSS 属性设置元素的显示方式为 <code>inline-block</code>。 
    <ul> 
     <li><code>inline-block</code> 是一种介于 <code>inline</code>（行内元素）和 <code>block</code>（块级元素）之间的显示方式。</li> 
     <li><code>inline-block</code> 元素可以像 <code>inline</code> 元素一样在同一行内显示，但同时可以像 <code>block</code> 元素一样设置宽度、高度、边距和内边距。</li> 
    </ul> </li> 
  </ul> 
  <p><strong>作用：</strong></p> 
  <p>这段 CSS 代码通常用于创建一个水平导航菜单。</p> 
  <ul> 
   <li>默认情况下，<code><li></code> 元素是块级元素，会垂直排列。</li> 
   <li>通过将 <code><li></code> 元素的 <code>display</code> 属性设置为 <code>inline-block</code>，可以使它们在同一行内水平排列。</li> 
   <li>同时，<code>inline-block</code> 允许你设置 <code><li></code> 元素的宽度、高度、边距和内边距，以便更好地控制菜单的样式和布局。</li> 
  </ul> 
  <p>-----------------------------------------------------------------------------------------</p> 
  <p>——————————————————————————————— 3.3 CSS 层叠性与优先级</p> 
  <p>CSS 名称“层叠样式表”即强调“层叠”的特性，这意味着页面元素可能同时匹配多个样式规则，浏览器会根据优先级确定采用哪条规则。优先级规则大致如下：   </p> 
  <p>       ① 内联样式优先性最高；<br>   ② ID 选择器优先于类选择器、属性选择器和伪类选择器；<br>   ③ 元素选择器优先级较低；<br>   ④ 重要声明（!important）会覆盖其他规则。</p> 
  <p>例如，如果某个元素同时匹配了以下两条规则：</p> 
  <p></p> 
  <pre><code class="language-css">body p { color: blue; }
p.special { color: red; }</code></pre> 
  <p></p> 
  <p>而该段落为 <code><p class="special"></code>，则红色规则具有更高的优先级，最终文字显示为红色。</p> 
  <p>——————————————————————————————— 3.4 CSS 样式的添加方式</p> 
  <p>CSS 可通过三种方式添加到 HTML 页面中：</p> 
  <p>【3.4.1 内联样式】<br> 直接在 HTML 元素中使用 style 属性，例如：</p> 
  <pre><code class="language-html"><p style="color: red; font-size: 18px;">这是内联样式</p></code></pre> 
  <p>这种方式优先级最高，但不利于统一管理。</p> 
  <p>【3.4.2 内部样式表】<br> 在 HTML 文档的 head 部分使用 <style> 标签添加样式，例如：</p> 
  <pre><code class="language-css"><!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8">
    <title>内部样式示例</title>
    <style>
      body { background-color: #f0f0f0; }
      h1 { text-align: center; }
    </style>
  </head>
  <body>
    <h1>欢迎</h1>
    <p>这是添加内部样式的示例。</p>
  </body>
</html></code></pre> 
  <p>【3.4.3 外部样式表】<br> 将 CSS 代码保存在独立的 .css 文件中，并通过 <link> 标签引用，便于维护、复用。例如文件 “style.css” 内容如下：</p> 
  <pre><code class="language-css">/* style.css 内容 */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  background-color: #fff;
}
header, footer {
  background-color: #333;
  color: #fff;
  text-align: center;
  padding: 10px 0;
}
main {
  padding: 20px;
}</code></pre> 
  <ul> 
   <li><code>font-family</code>: 这是一个 CSS 属性，用于设置元素的字体系列。 字体系列是指用于显示文本的字体列表。</li> 
   <li><code>Arial, sans-serif</code>: 这是一个字体系列列表，用于指定浏览器应该使用的字体。 
    <ul> 
     <li><code>Arial</code>: 这是首选字体。 如果用户的计算机上安装了 Arial 字体，则浏览器将使用 Arial 字体显示文本。</li> 
     <li><code>sans-serif</code>: 这是一个通用字体系列。 如果用户的计算机上没有安装 Arial 字体，则浏览器将使用系统默认的 sans-serif 字体显示文本。 sans-serif 字体是一种没有衬线的字体，例如 Helvetica、Verdana 等。</li> 
    </ul> </li> 
  </ul> 
  <p>在 HTML 文件中引用：</p> 
  <pre><code class="language-html"><!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8">
    <title>外部样式示例</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <header>
      <h1>网站标题</h1>
    </header>
    <main>
      <p>这是主要内容区域。</p>
    </main>
    <footer>
      <p>版权所有 © 2025</p>
    </footer>
  </body>
</html></code></pre> 
  <p><link rel="stylesheet" href="style.css">:</p> 
  <ul> 
   <li><code><link></code>: 这是一个 HTML 元素，用于定义当前文档与外部资源之间的关系。</li> 
   <li><code>rel="stylesheet"</code>: 这个属性指定链接的资源是一个样式表（stylesheet）。 样式表用于定义 HTML 文档的样式，例如字体、颜色、布局等。</li> 
   <li><code>href="style.css"</code>: 这个属性指定样式表文件的 URL。 在这个例子中，样式表文件名为 "style.css"，并且位于与 HTML 文档相同的目录下。</li> 
  </ul> 
  <p></p> 
  <p>——————————————————————————————— 3.5 一个完整的 CSS 示例</p> 
  <p>下面给出一个较完整的例子，展示如何使用外部 CSS 文件为网页设置风格。考虑到移动端设备的适配，使用 CSS 时经常需要结合媒体查询实现响应式设计。示例代码如下：</p> 
  <p>文件：style.css</p> 
  <pre><code class="language-css">/* style.css */
/* 全局重置及基本设置 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 定义主体字体及背景 */
body {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  background-color: #f7f7f7;
  line-height: 1.6;
  color: #333;
}

/* 页眉样式 */
header {
  background-color: #007acc;
  color: #fff;
  padding: 20px;
  text-align: center;
}

/* 主内容区样式 */
main {
  max-width: 1200px;
  margin: 20px auto;
  padding: 20px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* 页脚样式 */
footer {
  background-color: #333;
  color: #ccc;
  text-align: center;
  padding: 10px 0;
  font-size: 14px;
}

/* 响应式处理 */
@media (max-width: 768px) {
  main {
    margin: 10px;
    padding: 10px;
  }
}</code></pre> 
  <ul> 
   <li><code>@media (max-width: 768px)</code>: 这是一个 CSS 媒体查询（media query）。 媒体查询用于根据设备的特性（例如屏幕宽度、高度、分辨率等）应用不同的样式。 
    <ul> 
     <li><code>max-width: 768px</code>: 这个媒体查询条件表示，当屏幕宽度小于或等于 768 像素时，应用以下样式。</li> 
    </ul> </li> 
   <li><code>main</code>: 这是一个 CSS 选择器，用于选择 <code><main></code> 元素。 <code><main></code> 元素表示 HTML 文档的主要内容。</li> 
   <li><code>margin: 10px;</code>: 这个 CSS 属性将 <code><main></code> 元素的外边距设置为 10 像素。</li> 
   <li><code>padding: 10px;</code>: 这个 CSS 属性将 <code><main></code> 元素的内边距设置为 10 像素。</li> 
  </ul> 
  <p></p> 
  <p>对应的 HTML 文件：</p> 
  <p>文件：index.html</p> 
  <pre><code class="language-html"><!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS 整合示例</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <header>
      <h1>我的网站</h1>
    </header>
    <main>
      <p>这是一个利用外部 CSS 文件进行样式控制的示例页面。通过媒体查询，页面在移动设备上也能获得良好的显示效果。</p>
    </main>
    <footer>
      <p>版权所有 © 2025</p>
    </footer>
  </body>
</html></code></pre> 
  <p></p> 
  <p>——————————————————————————————— 【4. JavaScript 基础】</p> 
  <p>JavaScript 是一种基于对象和事件驱动的脚本语言，用于为网页添加动态交互功能。通过 JavaScript，你可以实现页面内容的动态变化、响应用户操作、与服务器进行异步通信等功能。下面详细介绍 JavaScript 的语法、变量、数据类型、控制结构、函数、DOM 操作、事件处理及异步编程等基础内容。</p> 
  <p>——————————————————————————————— 4.1 JavaScript 基本语法</p> 
  <p>JavaScript 代码可以嵌入 HTML 中或者存放在外部 .js 文件中。其基本语法包括变量声明、函数定义、条件判断、循环等。下面是一个简单的示例，演示如何在控制台输出信息及定义一个函数：</p> 
  <pre><code class="language-javascript">// 在控制台输出信息
console.log("Hello, World!");

// 定义一个函数，实现两个数的相加
function add(a, b) {
  return a + b;
}

// 调用函数并输出计算结果
var result = add(10, 15);
console.log("10 + 15 =", result);</code></pre> 
  <p>在上述示例中，我们通过 console.log() 输出信息，定义了一个 add() 函数，用于计算两个数的和。</p> 
  <p>——————————————————————————————— 4.2 JavaScript 变量与数据类型</p> 
  <p>JavaScript 支持多种变量声明方式：<br>   ① var：传统声明方式，有函数作用域；<br>   ② let：ES6 提供的块级作用域变量；<br>   ③ const：用于声明常量，声明后不可修改。</p> 
  <p>常用数据类型包括：数字、字符串、布尔值、数组、对象等。例如：</p> 
  <pre><code class="language-javascript">// 数字类型
let count = 100;

// 字符串类型
let message = "欢迎学习 JavaScript";

// 布尔类型
let isActive = true;

// 数组类型
let arr = [1, 2, 3, 4, 5];

// 对象类型
let user = {
  name: "张三",
  age: 30
};

// 输出变量信息
console.log(count, message, isActive);
console.log(arr);
console.log(user);</code></pre> 
  <p>——————————————————————————————— 4.3 控制结构及函数</p> 
  <p>JavaScript 支持多种控制结构，如 if/else 条件判断、switch 语句以及 for、while 等循环。函数是 JavaScript 的基本组成部分，既可以作为普通函数定义，也可以赋值为变量，甚至作为参数传递。</p> 
  <p>【条件判断示例】：</p> 
  <pre><code class="language-javascript">let score = 85;
if (score >= 90) {
  console.log("优秀");
} else if (score >= 60) {
  console.log("及格");
} else {
  console.log("不及格");
}</code></pre> 
  <p>【循环示例】</p> 
  <pre><code class="language-javascript">// 数组遍历
let fruits = ["苹果", "香蕉", "橘子"];
for (let i = 0; i < fruits.length; i++) {
  console.log("水果：", fruits[i]);
}</code></pre> 
  <p>【函数定义示例】：</p> 
  <pre><code class="language-javascript">// 传统函数定义
function multiply(a, b) {
  return a * b;
}
console.log("乘积：", multiply(6, 7));

// ES6 箭头函数
const subtract = (a, b) => a - b;
console.log("差值：", subtract(10, 3));</code></pre> 
  <p>——————————————————————————————— 4.4 DOM 操作</p> 
  <p>DOM（文档对象模型）是页面的编程接口，允许 JavaScript 操作、修改页面结构和内容。常用操作包括选择元素、修改元素内容、操作元素属性及样式等。</p> 
  <p>【常用 DOM 操作示例】：</p> 
  <pre><code class="language-html"><!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>DOM 操作示例</title>
    <script>
        window.onload = function() {
            // 通过 ID 获取元素，并修改其内容和样式
            var heading = document.getElementById("title");
            heading.innerHTML = "页面标题已更新";
            heading.style.color = "blue";
        }
    </script>
</head>
<body>
<h1 id="title">原始标题</h1>
<p>这是一段示例文本。</p>
</body>
</html>

<!--<script> 标签：
<script> 是 HTML 中的一个元素，用于嵌入或引用 JavaScript 代码。
<script> 标签可以位于 HTML 文档的 <head> 或 <body> 元素中。
<script> 标签可以包含：
嵌入式 JavaScript 代码： JavaScript 代码直接写在 <script> 标签内部。
外部 JavaScript 文件引用： 使用 src 属性指定外部 JavaScript 文件的 URL。

window.onload：
window 是 JavaScript 中的一个全局对象，代表浏览器窗口。
onload 是 window 对象的一个事件处理程序属性
它用于指定一个函数，该函数将在整个页面（包括所有依赖资源，如图像、样式表等）加载完成后执行。

document.getElementById("title")：
document 是 JavaScript 中的一个对象，代表当前 HTML 文档。
getElementById() 是 document 对象的一个方法，用于获取具有指定 id 属性的 HTML 元素。
"title" 是 getElementById() 方法的参数，表示要获取的元素的 id 属性值。

document.getElementById("title") 返回的是一个 DOM 对象。
DOM 对象 是文档对象模型 (Document Object Model) 的一个节点，它代表 HTML 文档中的一个元素、属性、文本节点等
你可以使用 DOM 对象来访问和操作 HTML 元素，例如修改其内容、样式、属性等。


.innerHTML 是 JavaScript 中一个 DOM 属性，用于获取或设置 HTML 元素的 HTML 内容。
HTML 内容包括元素的文本、HTML 标签和属性。
--></code></pre> 
  <p>通过上述示例，当页面加载完成后，JavaScript 脚本会获取 id 为 title 的元素，将其文本改为“页面标题已更新”，同时设置其颜色为蓝色。</p> 
  <p>——————————————————————————————— 4.5 事件处理</p> 
  <p>JavaScript 通过事件监听机制捕捉用户行为，如鼠标点击、键盘敲击、页面加载完成、窗口变化等，从而实现动态交互。事件处理函数可以直接在 HTML 属性中定义，也可以通过 JavaScript 代码绑定。</p> 
  <p>【直接绑定事件示例】：</p> 
  <pre><code class="language-html"><!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>点击事件示例</title>
    <script>
        function handleClick() {
            alert("按钮被点击了！");
        }
    </script>
</head>
<body>
<button onclick="handleClick()">点击我</button>
</body>
</html></code></pre> 
  <p>【通过 addEventListener 绑定事件】：</p> 
  <p></p> 
  <pre><code class="language-html"><!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>事件监听示例</title>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            var btn = document.getElementById("myButton");
            btn.addEventListener("click", function() {
                alert("按钮被点击了（使用 addEventListener）！");
            });
        });
    </script>
</head>
<body>
<button id="myButton">点击我</button>
</body>
</html>

<!--
document.addEventListener("DOMContentLoaded", function() { ... })
用于在 HTML 文档被完全加载和解析后执行 JavaScript 代码
这与 window.onload 的区别在于，DOMContentLoaded 事件在 HTML 文档加载完成后立即触发
而 window.onload 事件在所有资源（包括图像、样式表等）加载完成后才触发。--></code></pre> 
  <p></p> 
  <p>——————————————————————————————— 4.6 异步操作与 AJAX</p> 
  <p>JavaScript 中常用于实现异步数据加载的方法包括 XMLHttpRequest 以及现代的 fetch API。使用异步操作可以在不刷新页面的情况下更新数据，提高用户体验。</p> 
  <p>【使用 XMLHttpRequest 示例】：</p> 
  <pre><code class="language-javascript"> /*
        XMLHttpRequest 对象：
        定义： XMLHttpRequest (通常缩写为 XHR) 是一个 JavaScript 对象，用于在浏览器和服务器之间进行异步数据传输
        它允许在不重新加载整个页面的情况下更新网页的部分内容，实现动态网页效果。

        XMLHttpRequest 在 JavaScript 中通常被认为是一个类。

        XMLHttpRequest()：
        XMLHttpRequest (通常缩写为 XHR) 是一个 JavaScript 对象，用于在浏览器和服务器之间进行异步数据传输。
        它允许你在不重新加载整个页面的情况下更新网页的部分内容。
        XMLHttpRequest() 是 XMLHttpRequest 对象的构造函数，用于创建一个新的 XMLHttpRequest 对象。

        .open() 是 XMLHttpRequest 对象的一个方法，用于初始化一个HTTP请求。
        "GET": HTTP 方法。 在这里，它指定要使用 GET 方法来获取数据。 GET 方法通常用于从服务器请求数据。
        "data.json": 请求的 URL。 在这里，它指定要从名为 "data.json" 的文件中获取数据。 这是一个相对 URL，意味着它相对于当前网页的 URL
        例如，如果当前网页的 URL 是 https://example.com/index.html，那么 "data.json" 实际上指向 https://example.com/data.json。
        true: 一个布尔值，指定是否异步发送请求。 在这里，true 表示要异步发送请求
        异步请求意味着 JavaScript 代码不会等待服务器响应，而是继续执行其他任务。 当服务器响应到达时，将调用 onload 或 onerror 回调函数来处理响应。

        onreadystatechange: XMLHttpRequest 对象的一个事件处理程序属性
            它指向一个函数，该函数在 XMLHttpRequest 对象的 readyState 属性发生改变时被调用。
        readyState: XMLHttpRequest 对象的一个属性，表示请求的状态。 它的值可以是以下之一：
        0: 请求未初始化。
        1: 服务器连接已建立。
        2: 请求已接收。
        3: 正在处理请求。
        4: 请求已完成，响应已就绪。

        status: XMLHttpRequest 对象的一个属性，表示服务器返回的 HTTP 状态码。
        200: HTTP 状态码，表示 "OK"。 这意味着请求已成功完成，服务器已成功处理请求并返回了响应数据。

        send(): XMLHttpRequest 对象的一个方法，用于发送 HTTP 请求到服务器。
        xhr.send() 方法用于实际发送之前使用 xhr.open() 方法配置的 HTTP 请求。 这是启动与服务器通信的关键步骤。
        xhr.send() 方法用于发送 HTTP 请求到服务器。 它是启动与服务器通信的关键步骤
        对于 GET 请求，通常不带参数调用 send() 方法。 对于 POST 请求，可以使用 send() 方法发送数据。
         */
        var xhr = new XMLHttpRequest();
        xhr.open("GET", "data.json", true);
        xhr.onreadystatechange = function() {
            if (xhr.readyState === 4 && xhr.status === 200) {
                var data = JSON.parse(xhr.responseText);
                console.log("获取的数据：", data);
            }
        };
        xhr.send();</code></pre> 
  <p></p> 
  <p>【使用 fetch API 示例】：</p> 
  <pre><code class="language-javascript">
        /*
        fetch(): 是一个 JavaScript 函数，用于发起网络请求，获取资源
        它是 XMLHttpRequest 的一个更现代、更强大的替代品。

        fetch() 函数返回一个 Promise 对象，该 Promise 对象将在请求完成后被 resolve 或 reject。
        Promise：fetch() 函数返回的 Promise 对象表示异步操作的最终完成（或失败）及其结果值。
        resolve： 如果请求成功完成，Promise 对象将被 resolve，并将一个 Response 对象作为参数传递给 then() 方法的回调函数。
        reject： 如果请求失败，Promise 对象将被 reject，并将一个 Error 对象作为参数传递给 catch() 方法的回调函数。

        .then(): 是 Promise 对象的一个方法，用于指定在 Promise 对象被 resolve 时要执行的回调函数。
        .then(response => { ... }): 当请求成功完成时，该回调函数将被调用，并将 Response 对象作为参数传递给它。
        response.json(): Response 对象的一个方法，用于将响应数据解析为 JSON 对象。 它返回一个 Promise 对象。
        .then(data => { ... }): 当 response.json() 方法成功解析 JSON 数据时，该回调函数将被调用，并将 JSON 对象作为参数传递给它。
        .catch(error => { ... }): 当请求失败或 response.json() 方法解析 JSON 数据失败时，该回调函数将被调用，并将 Error 对象作为参数传递给它。
         */
        fetch("https://api.example.com/data")
            .then(response => response.json())
            .then(data => {
                console.log("获取的数据：", data);
            })
            .catch(error => {
                console.error("请求错误：", error);
            });</code></pre> 
  <p>——————————————————————————————— 【5. HTML、CSS、JavaScript 整合实例】</p> 
  <p>下面通过一个实际案例，展示如何将 HTML、CSS 和 JavaScript 结合在一起，创建一个动态交互的完整页面。案例中会包括页面结构、样式定义以及交互逻辑，帮助你理解三者协同工作的原理。</p> 
  <p>【案例需求】<br> 建立一个简单的响应页面，页面上有页面标题、内容区域和一个按钮。点击按钮后，内容区域文字发生变化。同时页面在不同设备上均能获得良好显示效果。</p> 
  <p>【完整项目文件结构】</p> 
  <ul> 
   <li>index.html</li> 
   <li>style.css</li> 
   <li>script.js</li> 
  </ul> 
  <p>【文件内容如下】</p> 
  <p>文件：index.html</p> 
  <pre><code class="language-html"><!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态交互示例</title>
    <link rel="stylesheet" href="style.css">
    <script src="script.js" defer></script>
  </head>
  <body>
    <header>
      <h1>欢迎进入我的交互页面</h1>
    </header>
    <main>
      <p id="content">初始内容：点击下方按钮以更新内容。</p>
      <button id="updateBtn">更新内容</button>
    </main>
    <footer>
      <p>版权所有 © 2025</p>
    </footer>
  </body>
</html></code></pre> 
  <p>文件：style.css</p> 
  <pre><code class="language-css">/* 全局重置 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 页面基本设置 */
body {
  font-family: Arial, sans-serif;
  background-color: #eef2f7;
  color: #333;
}

/* 页眉样式 */
header {
  background-color: #007acc;
  color: #fff;
  padding: 20px;
  text-align: center;
}

/* 主体区域 */
main {
  max-width: 800px;
  margin: 30px auto;
  padding: 20px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

/* 按钮样式 */
button {
  display: inline-block;
  margin-top: 20px;
  padding: 10px 20px;
  font-size: 16px;
  color: #fff;
  background-color: #28a745;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

/* 鼠标悬停效果 */
button:hover {
  background-color: #218838;
}

/* 页脚样式 */
footer {
  text-align: center;
  padding: 10px 0;
  background-color: #333;
  color: #ccc;
  font-size: 14px;
}

/* 响应式设计处理 */
@media (max-width: 600px) {
  main {
    margin: 20px;
    padding: 15px;
  }
  button {
    width: 100%;
  }
}</code></pre> 
  <p>文件：script.js</p> 
  <pre><code class="language-javascript">// 等待文档加载完成
document.addEventListener("DOMContentLoaded", function() {
  // 设置按钮点击事件
  var updateBtn = document.getElementById("updateBtn");
  updateBtn.addEventListener("click", function() {
    var content = document.getElementById("content");
    // 更新文本内容
    content.innerHTML = "内容已更新：现在你看到的是 JavaScript 动态效果的结果！";
  });
});</code></pre> 
  <p>——————————————————————————————— 【6. 高级用法及拓展】</p> 
  <p>在掌握了 HTML、CSS、JavaScript 的基础知识后，你可以进一步了解以下高级内容，以便在实际项目中更灵活地应用这些技术。</p> 
  <p>6.1 HTML5 新特性<br> HTML5 引入了诸如 <video>、<audio>、<canvas>、<svg> 以及各种 API（如地理位置、Web 存储、离线应用等），使得网页功能更加丰富。例如使用 <video> 标签播放视频：</p> 
  <pre><code class="language-html"><!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>HTML5 视频示例</title>
</head>
<body>
<h1>视频播放示例</h1>
<!--
controls 属性：
controls 是 HTML <video> 元素的一个布尔属性。
作用：
controls 属性用于在视频播放器上显示默认的视频控件。 这些控件允许用户控制视频的播放，例如：
播放/暂停
音量调节
进度条
全屏
下载（取决于浏览器和视频源）

<source src="movie.mp4" type="video/mp4">：
这是一个 HTML 标签，通常用于 <video> 元素内部。 它指定了视频的源文件和视频类型。
<source>: HTML 标签，用于为 <video>、<audio> 和 <picture> 元素指定多个媒体资源。
src="movie.mp4": src 属性指定了视频文件的 URL。 movie.mp4 表示视频文件的名称。
type="video/mp4": type 属性指定了视频文件的 MIME 类型。 video/mp4 表示视频文件是 MP4 格式。

"您的浏览器不支持 video 标签。" 消息：
出现时间： 当用户的浏览器无法识别或不支持 HTML5 <video> 标签时，这条消息就会显示。
作用： 这条消息是一个备用文本，用于告知用户他们的浏览器无法播放视频。
显示位置： 这条消息会显示在 <video> 标签所在的位置，也就是在网页上原本应该显示视频播放器的地方。
-->
<video width="640" height="360" controls>
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.webm" type="video/webm">
    您的浏览器不支持 video 标签。
</video>
</body>
</html></code></pre> 
  <ol> 
   <li>交互式图形绘制<br> 通过 <code><canvas></code> 标签，使用 JavaScript 可以实现复杂的绘图和动画效果。下例演示了如何在 canvas 上绘制简单的矩形：</li> 
  </ol> 
  <pre><code class="language-html"><!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Canvas 示例</title>
    <!--
        <style> 标签：
        <style> 是一个 HTML 标签，用于在 HTML 文档中嵌入内部 CSS 样式表。
        作用：
        <style> 标签允许你在 HTML 文档中直接定义 CSS 样式规则，而无需使用外部 CSS 文件。

        canvas { border: 1px solid #ccc; } 这行代码的作用是：
        选择 HTML 文档中的所有 <canvas> 元素。
        为每个 <canvas> 元素添加一个 1 像素宽、实线、颜色为 #ccc (灰色) 的边框。
        -->
    <style>
        canvas {
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
<h1>Canvas 绘图示例</h1>
<!--<canvas> 元素：
<canvas> 是一个 HTML 元素，用于在网页上绘制图形、图像和其他视觉内容
它本身是一个矩形区域，可以被 JavaScript 代码用来动态地生成图像。

canvas.getContext("2d")：
这是一个 JavaScript 代码，用于获取 <canvas> 元素的 2D 渲染上下文。

.fillRect(): CanvasRenderingContext2D 对象的一个方法，用于绘制一个填充的矩形。
-->
<canvas id="myCanvas" width="500" height="300"></canvas>
<script>
    // 获取 canvas 元素和绘图上下文对象
    const canvas = document.getElementById("myCanvas");
    const ctx = canvas.getContext("2d");

    // 绘制一个蓝色矩形
    ctx.fillStyle = "blue";
    ctx.fillRect(50, 50, 200, 100);
</script>
</body>
</html></code></pre> 
  <ol> 
   <li>SVG 和矢量图形<br> 除了 canvas，HTML5 还支持内嵌 SVG（可缩放矢量图形），用于实现清晰的图标和图形展示。以下是一个简单的 SVG 示例：</li> 
  </ol> 
  <pre><code class="language-html"><!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>SVG 示例</title>
</head>
<body>
<h1>SVG 图形示例</h1>
<svg width="200" height="200">
    <!-- 绘制一个红色圆形
    cx：定义圆心在横坐标（x轴）上的位置
    cy：定义圆心在纵坐标（y轴）上的位置
    
    <svg> 是一种用于在网页中显示矢量图形的 HTML 元素
    与位图图像不同，矢量图形基于数学公式定义形状和线条，因此它们在放大或缩小时不会失真，能够实现清晰的显示
    使用 <svg> 标签，你可以直接在 HTML 中嵌入图形
    包括基本形状（如矩形、圆形、线条、多边形）以及更复杂的路径、文本、滤镜和动画效果。
    -->
    <circle cx="100" cy="100" r="50" fill="red" />
</svg>
</body>
</html></code></pre> 
  <ol> 
   <li>拖放 API<br> HTML5 提供了原生支持的拖放功能，允许用户将元素拖动到指定区域。下例展示了如何实现基本的拖放效果：</li> 
  </ol> 
  <pre><code class="language-html"><!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>拖放 API 示例</title>
    <!--
    #dragSource: CSS 选择器，用于选择 HTML 文档中 ID 为 "dragSource" 的元素。

    cursor: move 是一个 CSS 属性，用于指定鼠标指针在元素上移动时的显示样式
    当鼠标指针移动到应用了 cursor: move 样式的元素上时，指针会变成一个表示可以移动对象的样式，例如十字箭头或手形。

    border: 2px dashed #ccc;：
    这是一个 CSS 属性，用于定义 HTML 元素的边框样式。
    border: CSS 属性，用于设置元素的边框。
    2px: 边框的宽度为 2 像素。
    dashed: 边框的样式为虚线。
    #ccc: 边框的颜色为 #ccc，这是一种浅灰色。
    -->
    <style>
        #dragSource {
            width: 100px;
            height: 100px;
            background-color: #ffcc00;
            text-align: center;
            line-height: 100px;
            cursor: move;
        }
        #dropTarget {
            width: 150px;
            height: 150px;
            border: 2px dashed #ccc;
            margin-top: 20px;
            text-align: center;
            line-height: 150px;
        }
    </style>
</head>
<body>
<h1>拖放示例</h1>
<!--
draggable="true"：
这是一个 HTML 属性，用于使 HTML 元素可以被拖动。
draggable: HTML 属性，用于指定元素是否可以被拖动。
"true": 属性的值，表示元素可以被拖动。

<div> 元素： <div> 元素是一个通用的容器元素，用于将 HTML 内容分组在一起
它可以用于创建网页的布局结构，也可以用于应用 CSS 样式。
-->
<div id="dragSource" draggable="true">拖我</div>
<div id="dropTarget">放这里</div>
<script>
    const dragSource = document.getElementById("dragSource");
    const dropTarget = document.getElementById("dropTarget");

    // 当拖动即将开始时传递数据
    dragSource.addEventListener("dragstart", function (e) {
        e.dataTransfer.setData("text", "这是来自拖动元素的数据!");
    });

    // 阻止浏览器默认行为使得 drop 能生效
    dropTarget.addEventListener("dragover", function (e) {
        e.preventDefault();
    });

    dropTarget.addEventListener("drop", function (e) {
        e.preventDefault();
        const data = e.dataTransfer.getData("text");
        dropTarget.innerHTML = data;
    });
</script>
</body>
</html></code></pre> 
  <p></p> 
  <p>## 高级 CSS 技术</p> 
  <p>CSS3 的新功能让网页设计拥有更多的表现力和动态效果，下面对这些技术进行详细讲解。</p> 
  <p>### 2.1 CSS3 动画与过渡</p> 
  <p>#### 过渡 (Transition)</p> 
  <p>利用 transition 属性，页面元素在属性变化时可以实现平滑过渡。示例中定义按钮在鼠标悬停时背景色过渡：</p> 
  <pre><code class="language-css">/* 在外部样式表中，例如 style.css */
.button {
  background-color: #28a745;
  transition: background-color 0.3s ease;
}

.button:hover {
  background-color: #218838;
}</code></pre> 
  <p>#### 动画 (Animation)</p> 
  <p>配合 @keyframes，我们可以定义复杂的动画。下面例子展示了一个渐入动画：</p> 
  <p></p> 
  <pre><code class="language-css">@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.fade-in {
  animation: fadeIn 1s ease-in-out;
}</code></pre> 
  <ul> 
   <li> <code>@keyframes</code> 是一个 CSS 规则，用于定义一个动画的关键帧。 
    <ul> 
     <li><code>fadeIn</code>：指定动画的名称。 你可以在 <code>animation</code> 属性中使用此名称来引用该动画。</li> 
     <li><code>{ ... }</code>：包含动画的关键帧。 
      <ul> 
       <li><code>from { opacity: 0; }</code>：指定动画的起始状态。 在这里，<code>opacity: 0;</code> 表示元素的初始透明度为 0（完全透明）。</li> 
       <li><code>to { opacity: 1; }</code>：指定动画的结束状态。 在这里，<code>opacity: 1;</code> 表示元素的最终透明度为 1（完全不透明）。</li> 
      </ul> </li> 
    </ul> </li> 
   <li><strong><code>.fade-in { ... }</code>：</strong> <code>.fade-in</code> 是一个 CSS 类选择器，用于选择所有具有 <code>class="fade-in"</code> 属性的 HTML 元素。 
    <ul> 
     <li><code>animation: fadeIn 1s ease-in-out;</code>：<code>animation</code> 属性是一个简写属性，用于设置动画的各种属性。 
      <ul> 
       <li><code>fadeIn</code>：指定要使用的动画的名称。 这里引用了之前定义的 <code>@keyframes fadeIn</code> 动画。</li> 
       <li><code>1s</code>：指定动画的持续时间为 1 秒。</li> 
       <li><code>ease-in-out</code>：指定动画的时间函数。 时间函数控制动画的速度变化。 <code>ease-in-out</code> 表示动画在开始和结束时速度较慢，在中间时速度较快。</li> 
      </ul> </li> 
    </ul> </li> 
  </ul> 
  <p></p> 
  <p>### 2.2 CSS3 变换：2D 与 3D 效果</p> 
  <p>利用 transform 属性，可以实现平移、旋转、缩放和倾斜效果：</p> 
  <pre><code class="language-css">.box {
  transform: translate(50px, 20px) rotate(30deg);
}</code></pre> 
  <p>3D 变换还包括 rotateX、rotateY、translateZ 等，并可以配合 perspective 创建立体效果。</p> 
  <p></p> 
  <p>### 2.3 响应式设计与自定义媒体查询</p> 
  <p>媒体查询允许页面根据设备特性自适应不同样式。以下示例将容器在宽屏与窄屏设备下采用不同的内边距：</p> 
  <pre><code class="language-css">@media (max-width: 600px) {
  .container {
    padding: 10px;
  }
}</code></pre> 
  <p>### 2.4 Flexbox 布局的高级应用</p> 
  <p>Flexbox 提供灵活、响应式的布局方式。使用 `display: flex;` 与相应的对齐属性，可以轻松实现水平与垂直居中、自动间隔分布的效果。示例展示一个导航栏布局：</p> 
  <pre><code class="language-css">.navbar {
  display: flex;
  justify-content: space-around;
  align-items: center;
}</code></pre> 
  <p>### 2.5 Grid 布局：复杂页面结构设计</p> 
  <p>Grid 布局提供二维布局解决方案，允许开发者定义行与列，构建复杂页面结构：</p> 
  <pre><code class="language-css">.dashboard {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-gap: 20px;
}</code></pre> 
  <p>上述示例将页面分为三列，比例为 1:2:1，并设置合理间距。</p> 
  <p></p> 
  <p></p> 
  <p>## 高级 JavaScript 编程</p> 
  <p>JavaScript 的高级编程技巧使你能编写高效、模块化且易维护的代码。下面介绍几个关键领域。</p> 
  <p>### 3.1 ES6+ 特性与模块化开发</p> 
  <p>ES6 带来了大量新语法，如箭头函数、模板字符串、解构赋值、类语法、模块化 import/export 等。模块化使代码逻辑分离，更易于维护。</p> 
  <p>示例：模块化代码结构  <br> 创建两个文件：math.js 与 app.js。</p> 
  <p>javascript name=math.js</p> 
  <pre><code class="language-javascript">// math.js — 模块文件，导出基本运算函数
export function add(a, b) {
  return a + b;
}

export function subtract(a, b) {
  return a - b;
}</code></pre> 
  <p>javascript name=app.js</p> 
  <pre><code class="language-javascript">import { add, subtract } from "./math.js";

console.log("10 + 15 =", add(10, 15));
console.log("10 - 3 =", subtract(10, 3));</code></pre> 
  <p>在支持 ES6 模块的环境下（如现代浏览器），这些代码可以直接运行。</p> 
  <p>### 3.2 异步编程、Promise 与 async/await</p> 
  <p>通过 Promise、async/await 技术，可以编写异步非阻塞代码。下面展示如何使用 async/await 获取数据：</p> 
  <pre><code class="language-javascript">async function fetchData() {
  try {
    const response = await fetch("https://api.example.com/data");
    const data = await response.json();
    console.log("获取的数据：", data);
  } catch (error) {
    console.error("请求错误：", error);
  }
}

fetchData();</code></pre> 
  <p></p> 
  <p>### 3.3 DOM 操作高级技巧</p> 
  <p>除了基本的节点查找与属性设置，JavaScript 还支持动态创建、插入和删除节点。下面示例展示动态添加一个列表项：</p> 
  <pre><code class="language-javascript">const list = document.getElementById("myList");
const newItem = document.createElement("li");
newItem.textContent = "新添加的列表项";
list.appendChild(newItem);</code></pre> 
  <p>### 3.4 事件处理、事件委托与跨浏览器兼容</p> 
  <p>高级事件处理包括事件委托（将事件绑定于父元素，利用事件冒泡处理子元素事件）与防止事件冒泡、捕获阶段等技巧。以下示例展示如何利用事件委托实现多个按钮点击事件的统一管理：</p> 
  <pre><code class="language-javascript">document.addEventListener("DOMContentLoaded", function() {
  const container = document.getElementById("buttonContainer");
  container.addEventListener("click", function(event) {
    if (event.target && event.target.matches("button.dynamic-btn")) {
      alert("按钮 " + event.target.textContent + " 被点击了！");
    }
  });
});</code></pre> 
  <p>在实际开发中，尤其是处理大量动态元素时，事件委托不仅代码简洁，同时兼顾性</p> 
  <p>------------------------------------------------------------------------------------------------------------------------</p> 
  <p>1. **HTML 高级用法**  <br>    - 利用 HTML5 新特性丰富页面语义<br>    - 使用多媒体标签、Canvas 与 SVG 实现图形与视频音频展示<br>    - 应用拖放 API 实现用户自定义交互</p> 
  <ul> 
   <li>熟悉HTML5的语义化标签、表单、嵌入多媒体内容等；</li> 
  </ul> 
  <p></p> 
  <p>2. **CSS 高级技术**  <br>    - 利用动画与过渡创建平滑、动人的页面效果<br>    - 应用 2D/3D 变换展示创新视觉效果<br>    - 使用 Flexbox 与 Grid 实现灵活布局与响应式设计</p> 
  <ul> 
   <li>能使用CSS3实现页面美化、响应式设计、动画等效果；</li> 
  </ul> 
  <p></p> 
  <p>3. **JavaScript 进阶编程**  <br>    - 使用 ES6+ 语法模块化组织代码<br>    - 应用异步编程与 API 数据交互<br>    - 深入 DOM 操作与事件委托，管理大量动态交互</p> 
  <ul> 
   <li>掌握JavaScript基础语法、DOM操作、事件处理和异步数据交互。</li> 
  </ul> 
  <p></p> 
  <p></p> 
  <p><strong><span style="color:#fe2c24">【面试问题】</span></strong></p> 
  <p><strong>面试官：</strong> 你好，感谢你来参加本次面试。我们主要考察你在前端基础方面的掌握程度，以及如何将这些技术应用到 Android 开发中。</p> 
  <p><strong>你：</strong> 您好，非常荣幸能有机会参加面试。我已准备好接受您的考察。</p> 
  <p><strong>面试官：</strong> 好的，我们先从 HTML 开始。</p> 
  <p><strong>第一轮：HTML 基础</strong></p> 
  <p><strong>面试官：</strong> 在 Android 开发中，我们经常会使用 WebView 来加载 HTML 页面。那么，请你简单介绍一下 HTML 的基本结构，并说明 <code><head></code> 和 <code><body></code> 部分分别包含哪些内容？</p> 
  <p><strong>你：</strong> 一个标准的 HTML 文件主要由以下几个部分组成：</p> 
  <ul> 
   <li><strong>文档类型声明 (<code><!DOCTYPE html></code>)</strong>: 用于告诉浏览器这是一个 HTML5 文档。</li> 
   <li><strong><code><html></code> 根标签</strong>: 包含整个 HTML 页面的内容。</li> 
   <li><strong><code><head></code> 部分</strong>: 包含页面的元数据，例如： 
    <ul> 
     <li><code><meta></code> 标签: 用于设置字符编码、视口等信息。</li> 
     <li><code><title></code> 标签: 定义页面的标题，显示在浏览器标签上。</li> 
     <li><code><link></code> 标签: 用于链接外部 CSS 文件。</li> 
     <li><code><script></code> 标签: 用于链接外部 JavaScript 文件或嵌入 JavaScript 代码。</li> 
    </ul> </li> 
   <li><strong><code><body></code> 部分</strong>: 包含页面实际显示的内容，例如标题、段落、图像、链接等。</li> 
  </ul> 
  <p><strong>面试官：</strong> 很好。在 Android WebView 中，为了保证页面在不同设备上的显示效果，你通常会在 <code><head></code> 中添加 <code><meta name="viewport" ...></code> 标签。请你解释一下这个标签的作用，以及 <code>width=device-width</code> 和 <code>initial-scale=1.0</code> 这两个属性的含义。</p> 
  <p><strong>你：</strong> <code><meta name="viewport" ...></code> 标签用于配置视口，控制网页在移动设备上的缩放和显示方式。</p> 
  <ul> 
   <li><code>width=device-width</code>: 告诉浏览器将视口的宽度设置为设备的宽度。这样可以确保网页以设备屏幕的原始分辨率显示，避免缩放。</li> 
   <li><code>initial-scale=1.0</code>: 设置页面的初始缩放比例为 1.0，即不进行任何缩放。</li> 
  </ul> 
  <p>通过这两个属性的设置，可以使网页在各种尺寸的移动设备上以合理的比例显示，提供更好的用户体验。</p> 
  <p><strong>面试官：</strong> 了解。请你列举几个常用的 HTML5 语义化标签，并说明它们的作用。在 Android WebView 中使用语义化标签有什么好处？</p> 
  <p><strong>你：</strong> 常用的 HTML5 语义化标签包括：</p> 
  <ul> 
   <li><code><header></code>: 定义页面的页眉。</li> 
   <li><code><nav></code>: 定义页面的导航栏。</li> 
   <li><code><main></code>: 定义页面的主要内容区域。</li> 
   <li><code><article></code>: 定义页面中独立的、完整的内容单元，例如博客文章。</li> 
   <li><code><section></code>: 定义页面中的一个区域或章节。</li> 
   <li><code><aside></code>: 定义与页面主要内容相关的辅助信息，例如侧边栏。</li> 
   <li><code><footer></code>: 定义页面的页脚。</li> 
  </ul> 
  <p>在 Android WebView 中使用语义化标签的好处包括：</p> 
  <ul> 
   <li><strong>提高代码可读性</strong>: 使代码结构更清晰，易于理解和维护。</li> 
   <li><strong>提升可访问性</strong>: 辅助技术（如屏幕阅读器）可以更好地理解页面结构，为残障人士提供更好的体验。</li> 
   <li><strong>有利于 SEO</strong>: 搜索引擎可以更好地理解页面内容，提高网站排名。</li> 
  </ul> 
  <p><strong>第二轮：CSS 基础</strong></p> 
  <p><strong>面试官：</strong> 接下来，我们来聊聊 CSS。在 Android 开发中，你通常会使用哪种方式将 CSS 样式应用到 HTML 页面？各种方式的优先级是怎样的？</p> 
  <p><strong>你：</strong> CSS 样式可以有三种方式应用到 HTML 页面：</p> 
  <ul> 
   <li><strong>内联样式</strong>: 直接在 HTML 元素的 <code>style</code> 属性中定义样式。</li> 
   <li><strong>内部样式表</strong>: 在 HTML 文档的 <code><head></code> 部分使用 <code><style></code> 标签定义样式。</li> 
   <li><strong>外部样式表</strong>: 将 CSS 代码保存在独立的 <code>.css</code> 文件中，并通过 <code><link></code> 标签在 HTML 文档中引用。</li> 
  </ul> 
  <p>优先级从高到低依次为：内联样式 > 内部样式表/外部样式表 (后定义的优先级高)。</p> 
  <p><strong>面试官：</strong> 很好。请你解释一下 CSS 的层叠性 (Cascading) 和优先级 (Specificity) 的概念。</p> 
  <p><strong>你：</strong> <strong>层叠性 (Cascading)</strong> 指的是当多个 CSS 规则同时应用于同一个 HTML 元素时，浏览器会根据一定的规则将这些规则合并起来。</p> 
  <p><strong>优先级 (Specificity)</strong> 指的是在多个 CSS 规则发生冲突时，浏览器根据一定的算法确定哪个规则的优先级更高，从而决定应用哪个规则。</p> 
  <p>优先级高的规则会覆盖优先级低的规则。影响优先级的因素包括选择器的类型（例如 ID 选择器、类选择器、元素选择器等）以及规则的来源（例如内联样式、内部样式表、外部样式表等）。</p> 
  <p><strong>面试官：</strong> 请你解释一下 CSS 盒模型 (Box Model) 的概念，并说明 <code>content</code>、<code>padding</code>、<code>border</code> 和 <code>margin</code> 分别代表什么？</p> 
  <p><strong>你：</strong> CSS 盒模型将每个 HTML 元素都看作一个矩形的盒子，盒子由以下几个部分组成：</p> 
  <ul> 
   <li><strong>Content (内容)</strong>: 盒子的实际内容，例如文本、图像等。</li> 
   <li><strong>Padding (内边距)</strong>: 内容与边框之间的空间。</li> 
   <li><strong>Border (边框)</strong>: 盒子的边框。</li> 
   <li><strong>Margin (外边距)</strong>: 盒子与相邻元素之间的空间。</li> 
  </ul> 
  <p>总元素的宽度 = 宽度 + 内边距（左和右） + 边框（左和右） + 外边距（左和右）</p> 
  <p>总元素的高度 = 高度 + 内边距（上和下） + 边框（上和下） + 外边距（上和下）</p> 
  <p><strong>第三轮：JavaScript 基础</strong></p> 
  <p><strong>面试官：</strong> 接下来，我们来讨论 JavaScript。在 Android WebView 中，JavaScript 可以用来实现哪些功能？</p> 
  <p><strong>你：</strong> 在 Android WebView 中，JavaScript 可以用来实现以下功能：</p> 
  <ul> 
   <li><strong>动态修改页面内容</strong>: 使用 DOM 操作，可以动态地修改 HTML 元素的内容、属性和样式。</li> 
   <li><strong>响应用户交互</strong>: 监听用户事件（例如点击、鼠标移动、键盘输入等），并执行相应的操作。</li> 
   <li><strong>与 Android 原生代码交互</strong>: 通过 WebView 提供的接口，JavaScript 可以调用 Android 原生代码，实现更复杂的功能。</li> 
   <li><strong>数据验证</strong>: 在客户端对用户输入的数据进行验证，减少服务器端的压力。</li> 
   <li><strong>动画效果</strong>: 使用 JavaScript 创建各种动画效果，提升用户体验。</li> 
   <li><strong>异步数据交互</strong>: 使用XMLHttpRequest或fetch，与服务器进行异步数据请求，动态更新页面</li> 
  </ul> 
  <p><strong>面试官：</strong> 你提到了 DOM 操作。请你解释一下什么是 DOM，并列举几个常用的 DOM 操作方法。</p> 
  <p><strong>你：</strong> DOM (Document Object Model) 是 HTML 文档的对象表示，它将整个 HTML 文档表示为一个树形结构，每个 HTML 元素、属性和文本都对应于树中的一个节点。</p> 
  <p>常用的 DOM 操作方法包括：</p> 
  <ul> 
   <li><code>document.getElementById(id)</code>: 通过元素的 ID 获取元素。</li> 
   <li><code>document.querySelector(selector)</code>: 使用 CSS 选择器获取元素。</li> 
   <li><code>element.innerHTML</code>: 获取或设置元素的 HTML 内容。</li> 
   <li><code>element.style.property = value</code>: 设置元素的 CSS 样式。</li> 
   <li><code>element.addEventListener(event, function)</code>: 为元素添加事件监听器。</li> 
   <li><code>element.setAttribute(attribute, value)</code>: 设置元素的属性。</li> 
   <li><code>element.appendChild(child)</code>: 向元素添加子元素。</li> 
  </ul> 
  <p><strong>面试官：</strong> 在 Android WebView 中，如果需要在 JavaScript 中调用 Android 原生代码，你通常会怎么做？请简单描述一下实现步骤。</p> 
  <p><strong>你：</strong> 在 Android WebView 中，可以通过以下步骤在 JavaScript 中调用 Android 原生代码：</p> 
  <ol> 
   <li><strong>在 Android 代码中，创建一个 Java 类，并添加一个或多个带有 <code>@JavascriptInterface</code> 注解的方法。</strong> 这些方法将在 JavaScript 中被调用。</li> 
   <li><strong>在 Android 代码中，通过 <code>webView.addJavascriptInterface(object, name)</code> 方法将 Java 对象注册到 WebView 中。</strong> <code>name</code> 参数指定 JavaScript 中用于访问该对象的名称。</li> 
   <li><strong>在 JavaScript 代码中，通过 <code>window.name.methodName(parameters)</code> 的方式调用 Java 方法。</strong> <code>name</code> 是在 <code>addJavascriptInterface()</code> 方法中指定的名称，<code>methodName</code> 是 Java 方法的名称，<code>parameters</code> 是传递给 Java 方法的参数。</li> 
  </ol> 
  <p></p> 
 </div> 
</div>
                            </div>
                        </div>
                    </div>
                    <!--PC和WAP自适应版-->
                    <div id="SOHUCS" sid="1898571832781500416"></div>
                    <script type="text/javascript" src="/views/front/js/chanyan.js"></script>
                    <!-- 文章页-底部 动态广告位 -->
                    <div class="youdao-fixed-ad" id="detail_ad_bottom"></div>
                </div>
                <div class="col-md-3">
                    <div class="row" id="ad">
                        <!-- 文章页-右侧1 动态广告位 -->
                        <div id="right-1" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad">
                            <div class="youdao-fixed-ad" id="detail_ad_1"> </div>
                        </div>
                        <!-- 文章页-右侧2 动态广告位 -->
                        <div id="right-2" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad">
                            <div class="youdao-fixed-ad" id="detail_ad_2"></div>
                        </div>
                        <!-- 文章页-右侧3 动态广告位 -->
                        <div id="right-3" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad">
                            <div class="youdao-fixed-ad" id="detail_ad_3"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="container">
        <h4 class="pt20 mb15 mt0 border-top">你可能感兴趣的:(html,css,javascript)</h4>
        <div id="paradigm-article-related">
            <div class="recommend-post mb30">
                <ul class="widget-links">
                    <li><a href="/article/1940691885270036480.htm"
                           title="Netty案例：WebSocket开发网页版聊天室" target="_blank">Netty案例：WebSocket开发网页版聊天室</a>
                        <span class="text-muted">熙客</span>
<a class="tag" taget="_blank" href="/search/12_%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%BD%91%E7%BB%9C/1.htm">12_计算机网络</a><a class="tag" taget="_blank" href="/search/websocket/1.htm">websocket</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C%E5%8D%8F%E8%AE%AE/1.htm">网络协议</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C/1.htm">网络</a>
                        <div>目录1、开发流程2、具体代码实现2.1添加依赖(pom.xml)2.2配置文件(application.yml)2.3配置类读取设置2.4Netty服务器实现2.5WebSocket初始化器和处理器2.6SpringBoot启动类2.7HTML5客户端(src/main/resources/static/chat.html)2.8启动与测试1、开发流程创建SpringBoot项目添加Netty依赖</div>
                    </li>
                    <li><a href="/article/1940691504792137728.htm"
                           title="CSS3 常见选择器（属性、伪类、伪元素、组合）面试详解" target="_blank">CSS3 常见选择器（属性、伪类、伪元素、组合）面试详解</a>
                        <span class="text-muted">1加1等于</span>
<a class="tag" taget="_blank" href="/search/javascript%E5%AE%9E%E6%88%98/1.htm">javascript实战</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/css3/1.htm">css3</a>
                        <div>本文详细介绍了日常中常用的几种选择器，包括属性选择器、伪类选择器、伪元素选择器、组合选择器等等本文目录1.属性选择器2.伪类选择器3.伪元素选择器4.组合选择器1.属性选择器属性选择器允许根据元素的属性及其值来选择元素。常见的属性选择器有以下几种形式：[attribute]：选择具有指定属性的元素。[attribute=value]：选择属性值精确等于指定值的元素。[attribute^=valu</div>
                    </li>
                    <li><a href="/article/1940685959137914880.htm"
                           title="基于 WebGL 与 GIS 的智慧垃圾分类三维可视化技术方案" target="_blank">基于 WebGL 与 GIS 的智慧垃圾分类三维可视化技术方案</a>
                        <span class="text-muted">图扑可视化</span>
<a class="tag" taget="_blank" href="/search/%E6%95%B0%E5%AD%97%E5%AD%AA%E7%94%9F/1.htm">数字孪生</a><a class="tag" taget="_blank" href="/search/%E4%B8%89%E7%BB%B4%E5%8F%AF%E8%A7%86%E5%8C%96/1.htm">三维可视化</a><a class="tag" taget="_blank" href="/search/%E5%9E%83%E5%9C%BE%E5%88%86%E7%B1%BB/1.htm">垃圾分类</a><a class="tag" taget="_blank" href="/search/%E6%99%BA%E6%85%A7%E7%8E%AF%E5%8D%AB/1.htm">智慧环卫</a>
                        <div>图扑自主研发的HT可视化引擎，基于HTML5的WebGL与Canvas技术构建，形成了完整的2D/3D图形渲染体系。该引擎无需依赖第三方插件，通过纯JavaScript脚本调用API，即可实现跨平台的可视化交互体验，支持PC端、移动端及大屏终端的多屏协同。在三维渲染技术层面，引擎深度集成WebGL底层图形接口，构建了高效的轻量化处理体系。HT还支持3DTiles格式航拍倾斜摄影实景数据、城市建筑群</div>
                    </li>
                    <li><a href="/article/1940679400148234240.htm"
                           title="基于nodejs+vue.js服装商店电子商务管理系统" target="_blank">基于nodejs+vue.js服装商店电子商务管理系统</a>
                        <span class="text-muted"></span>

                        <div>如果你是一个小白,你不懂得像javaPHP、Python等编程语言，那么Node.js是一个非常好的选择。采用vscode软件开发,配套软件安装.包安装调试部署成功,有视频讲解前端:html+vue+elementui+jQuery、js、css数据库：mysql,Navicatvue框架于Node运行环境的Web框架,随着互联网技术的飞速发展，世界逐渐成了一个地球村，空间的距离也不再是那么重要。</div>
                    </li>
                    <li><a href="/article/1940671959528435712.htm"
                           title="（附源码）node.js+mysql+基于JavaScript网上商城开发设计 毕业设计261620" target="_blank">（附源码）node.js+mysql+基于JavaScript网上商城开发设计 毕业设计261620</a>
                        <span class="text-muted">Wx-Biye_Design</span>
<a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/boot/1.htm">boot</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/php/1.htm">php</a>
                        <div>Node.js网上商城的开发摘要随着Internet的使用越来越广泛，在传统的商业模式中，对于日常各类商品，人们习惯于到各种商家店铺购买。然而在快节奏的新时代中，人们不一定能为购买各类商品腾出时间，更不会耐心挑选自己想要的商品。所以设计一个网上商城，既是迎合电子商务的大潮流，也是传统商品销售行业的一个突破口，可以给传统销售行业带来转变和机遇。本系统主要是提供给用户一个购买各类商品的平台，通过价格优</div>
                    </li>
                    <li><a href="/article/1940668178426294272.htm"
                           title="24个 JavaScript 循环遍历方法" target="_blank">24个 JavaScript 循环遍历方法</a>
                        <span class="text-muted">xixi_666</span>
<a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/ecmascript/1.htm">ecmascript</a>
                        <div>一、数组遍历方法1、forEach()forEach方法用于调用数组的每个元素，并将元素传递给回调函数。数组中的每个值都会调用回调函数。其语法如下：array.forEach(function(currentValue,index,arr),thisValue)该方法的第一个参数为回调函数，是必传的，它有三个参数：currentValue：必需。当前元素index：可选。当前元素的索引值。arr：</div>
                    </li>
                    <li><a href="/article/1940661375030325248.htm"
                           title="JavaScript零基础入门速通（完整）" target="_blank">JavaScript零基础入门速通（完整）</a>
                        <span class="text-muted">小黄编程快乐屋</span>
<a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a>
                        <div>JavaScript（简称JS）是现代网页开发中不可或缺的编程语言之一。它为网页增加了动态交互性，是一种前端编程语言，用于处理网页上的各种用户行为，如按钮点击、表单提交、页面加载等。它的强大不仅体现在浏览器端，也可以通过Node.js在服务器端运行。本文将详细介绍JavaScript的基础知识，帮助你从零开始掌握这门语言。1.JavaScript简介JavaScript最早由Netscape公司的</div>
                    </li>
                    <li><a href="/article/1940655956580954112.htm"
                           title="JavaScript爬虫使用API提取代理模板" target="_blank">JavaScript爬虫使用API提取代理模板</a>
                        <span class="text-muted">q56731523</span>
<a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E7%88%AC%E8%99%AB/1.htm">爬虫</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a>
                        <div>JavaScript爬虫有两大优势：直接执行页面JS（Puppeteer/Playwright）和解析SPA（单页应用）如React/Vue这就是我为何钟爱于JavaScript爬虫的原因。最近有几个同行说，使用API代理IP配合JavaScript经常报错，修改请求头或者访问频率也未能解决问题，因此，请求我们出手修改代码，一看代码简直惨不忍睹，能运行起来算他运气好，索性我自己写个通用模版给他参考</div>
                    </li>
                    <li><a href="/article/1940655704033521664.htm"
                           title="css实现优惠券效果 全" target="_blank">css实现优惠券效果 全</a>
                        <span class="text-muted"></span>

                        <div>效果如下：样式一：样式一左半圆效果左右半圆效果左内圆四角收缩六角收缩凹边中排圆点两边凹陷.coupon1{width:240px;height:100px;margin-top:15px;background-color:#f56c6c;-webkit-mask:radial-gradient(circleatleftcenter,transparent20px,red20px);}.coupon</div>
                    </li>
                    <li><a href="/article/1940655704511672320.htm"
                           title="Chart.js 安装使用教程" target="_blank">Chart.js 安装使用教程</a>
                        <span class="text-muted">小奇JAVA面试</span>
<a class="tag" taget="_blank" href="/search/%E5%AE%89%E8%A3%85%E4%BD%BF%E7%94%A8%E6%95%99%E7%A8%8B/1.htm">安装使用教程</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/ecmascript/1.htm">ecmascript</a>
                        <div>一、Chart.js简介Chart.js是一个简单而灵活的JavaScript图表库，支持8种常用图表类型（折线图、柱状图、饼图等），基于HTML5Canvas渲染。它轻量易用，适合快速构建响应式图表，广泛应用于仪表盘、可视化后台、统计图展示等场景。二、Chart.js安装方式2.1使用CDN引入（推荐快速使用）2.2使用npm安装（适合前端工程项目）npminstallchart.js--sav</div>
                    </li>
                    <li><a href="/article/1940654443800358912.htm"
                           title="一份来自前端开发工程师的规范简历" target="_blank">一份来自前端开发工程师的规范简历</a>
                        <span class="text-muted">追影的React开发者</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/photoshop/1.htm">photoshop</a>
                        <div>个人资料姓名：嘻嘻性别：女电话：12132323613邮箱：12132143285@163.com现居地：上海市工作年限：3年求职意向期望职位：前端开发工程师期望薪资：面议工作性质：全职到岗时间：离职,一周内入职专业技能精通DIV+CSS页面布局，重构,掌握JavaScript，熟悉w3c标准，了解HTML语义化有一定的了解。熟练运用浏览器兼容技术，熟练进行前端性能优化设计。熟练掌握HTML5技术</div>
                    </li>
                    <li><a href="/article/1940642339131289600.htm"
                           title="深入理解React的虚拟DOM与性能优化" target="_blank">深入理解React的虚拟DOM与性能优化</a>
                        <span class="text-muted">天天进步2015</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91/1.htm">前端开发</a><a class="tag" taget="_blank" href="/search/react.js/1.htm">react.js</a><a class="tag" taget="_blank" href="/search/%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96/1.htm">性能优化</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a>
                        <div>React作为现代前端开发的主流框架，其高效的渲染能力和良好的开发体验离不开虚拟DOM（VirtualDOM）的设计理念。本文将带你深入理解React的虚拟DOM原理，并结合实际案例，探讨如何进行性能优化。一、什么是虚拟DOM？虚拟DOM（VirtualDOM，简称VDOM）是React引入的一种轻量级JavaScript对象，用于描述真实DOM的结构。它本质上是DOM的一个抽象表示，React通</div>
                    </li>
                    <li><a href="/article/1940641077899882496.htm"
                           title="52-【JavaScript-Day 52】告别“野路子”代码：ESLint、Prettier与Web安全入门" target="_blank">52-【JavaScript-Day 52】告别“野路子”代码：ESLint、Prettier与Web安全入门</a>
                        <span class="text-muted">吴师兄大模型</span>
<a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/ecmascript/1.htm">ecmascript</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a><a class="tag" taget="_blank" href="/search/%E5%A4%A7%E6%A8%A1%E5%9E%8B/1.htm">大模型</a><a class="tag" taget="_blank" href="/search/ESLint/1.htm">ESLint</a>
                        <div>Langchain系列文章目录01-玩转LangChain：从模型调用到Prompt模板与输出解析的完整指南02-玩转LangChainMemory模块：四种记忆类型详解及应用场景全覆盖03-全面掌握LangChain：从核心链条构建到动态任务分配的实战指南04-玩转LangChain：从文档加载到高效问答系统构建的全程实战05-玩转LangChain：深度评估问答系统的三种高效方法（示例生成、手</div>
                    </li>
                    <li><a href="/article/1940636789324705792.htm"
                           title="Node.js 安装使用教程" target="_blank">Node.js 安装使用教程</a>
                        <span class="text-muted">小奇JAVA面试</span>
<a class="tag" taget="_blank" href="/search/%E5%AE%89%E8%A3%85%E4%BD%BF%E7%94%A8%E6%95%99%E7%A8%8B/1.htm">安装使用教程</a><a class="tag" taget="_blank" href="/search/node.js/1.htm">node.js</a>
                        <div>一、Node.js简介Node.js是一个基于ChromeV8引擎的JavaScript运行时，允许在服务器端运行JavaScript。它以事件驱动、非阻塞I/O为核心，适合构建高性能的网络服务、API接口、中间层服务器、命令行工具等。二、Node.js安装方式2.1官方安装包（推荐）访问Node.js官网：https://nodejs.org/下载LTS（长期支持）版本安装完成后，在命令行验证：</div>
                    </li>
                    <li><a href="/article/1940634516641083392.htm"
                           title="AJAX使用教程以及axios的安装使用" target="_blank">AJAX使用教程以及axios的安装使用</a>
                        <span class="text-muted">崽崽彤</span>
<a class="tag" taget="_blank" href="/search/ajax/1.htm">ajax</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
                        <div>什么是AJAX？AJAX即asyncjavascriptandXML（异步的js和xml），主要是用来实现页面的局部刷新的一门技术。AJAX的核心对象是XMLHttpRequestAJAX的工作原理在发送请求后可继续注册，解决了传统注册存在的问题。使用AJAX发送异步请求的方法步骤实例化核心对象var变量名=newXMLHttpRequest()varxhr=newXMLHttpRequest()</div>
                    </li>
                    <li><a href="/article/1940628715977371648.htm"
                           title="AJAX 安装使用教程" target="_blank">AJAX 安装使用教程</a>
                        <span class="text-muted">小奇JAVA面试</span>
<a class="tag" taget="_blank" href="/search/%E5%AE%89%E8%A3%85%E4%BD%BF%E7%94%A8%E6%95%99%E7%A8%8B/1.htm">安装使用教程</a><a class="tag" taget="_blank" href="/search/ajax/1.htm">ajax</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a>
                        <div>一、AJAX简介AJAX（AsynchronousJavaScriptandXML）是一种在无需重新加载整个网页的情况下，能够与服务器交换数据并更新部分网页内容的技术。它不是一种新语言，而是使用现有的标准组合：JavaScript+XMLHttpRequest（或Fetch）+HTML+CSS。二、AJAX是否需要安装？不需要单独安装！AJAX是浏览器原生支持的技术，主流浏览器均内置XMLHttp</div>
                    </li>
                    <li><a href="/article/1940625563026780160.htm"
                           title="SpringBoot 配置文件 application.yml(application.properties) 配置大全" target="_blank">SpringBoot 配置文件 application.yml(application.properties) 配置大全</a>
                        <span class="text-muted">你邻座的怪同学</span>
<a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/boot/1.htm">boot</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a>
                        <div>参考网址：https://docs.spring.io/spring-boot/docs/current/reference/html/common-application-properties.html＃===================================================================＃COMMONSPRINGBOOTPROPERTIES##此</div>
                    </li>
                    <li><a href="/article/1940623670586175488.htm"
                           title="axure 生成html手机,用Axure做的原型如何在手机上运行" target="_blank">axure 生成html手机,用Axure做的原型如何在手机上运行</a>
                        <span class="text-muted">玩音乐的铝孩纸</span>
<a class="tag" taget="_blank" href="/search/axure/1.htm">axure</a><a class="tag" taget="_blank" href="/search/%E7%94%9F%E6%88%90html%E6%89%8B%E6%9C%BA/1.htm">生成html手机</a>
                        <div>一般的开发工作之前，我们通常会设计产品原型，大部分为axure绘制的线框图作为产品的PRD文档，供UI和开发进行前期工作，但是有的时候客户、领导想在开发之前，看到产品的概貌，就必须做产品的高保真原型进行模拟，这时如果做出来的原型能运行在手机端，那再好不过！原型制作软件有挺多，不过个人使用之后，最后还是依然坚持使用Axure,优点颇多，也可能是先入为主，这个教程Axure也是必须软件之一，适配为ip</div>
                    </li>
                    <li><a href="/article/1940614214813020160.htm"
                           title="axure基础操作" target="_blank">axure基础操作</a>
                        <span class="text-muted">逾非时</span>
<a class="tag" taget="_blank" href="/search/photoshop/1.htm">photoshop</a><a class="tag" taget="_blank" href="/search/ui/1.htm">ui</a>
                        <div>文件关于Axure的文件，能够打开、新建与八寸，或可以从其他RP文件导入原型内容。RP文件指的是Axure保存的源文件，以“.rp”为扩展名，除此之外还有.rp:原型文件;.rplib:元件库文件;.rpteam:团队项目文件;.html:网页文件;备份中恢复在AxureRP9中，会每隔15分钟对正在操作的原型文件做一次备份。若想设置的话，可以在【备份设置】中进行更改。步骤：文件-->备份设置--</div>
                    </li>
                    <li><a href="/article/1940610431387234304.htm"
                           title="C# 解决请求被中止：无法建立SSL / TLS安全通道问题" target="_blank">C# 解决请求被中止：无法建立SSL / TLS安全通道问题</a>
                        <span class="text-muted">weixin_45866907</span>
<a class="tag" taget="_blank" href="/search/C%23/1.htm">C#</a><a class="tag" taget="_blank" href="/search/%E8%A7%A3%E5%86%B3%E8%AF%B7%E6%B1%82%E8%A2%AB%E4%B8%AD%E6%AD%A2%EF%BC%9A%E6%97%A0%E6%B3%95%E5%BB%BA%E7%AB%8BSSL/1.htm">解决请求被中止：无法建立SSL</a><a class="tag" taget="_blank" href="/search/%2F/1.htm">/</a><a class="tag" taget="_blank" href="/search/TLS%E5%AE%89%E5%85%A8%E9%80%9A%E9%81%93%E9%97%AE%E9%A2%98/1.htm">TLS安全通道问题</a><a class="tag" taget="_blank" href="/search/%5B1%5D.Net/1.htm">[1].Net</a>
                        <div>C#解决请求被中止：无法建立SSL/TLS安全通道问题参考文章：（1）C#解决请求被中止：无法建立SSL/TLS安全通道问题（2）https://www.cnblogs.com/SuperMetalMax/p/7286044.html备忘一下。</div>
                    </li>
                    <li><a href="/article/1940608537763835904.htm"
                           title="WEB 上一页下一页" target="_blank">WEB 上一页下一页</a>
                        <span class="text-muted">半吊子的程序狗</span>
<a class="tag" taget="_blank" href="/search/js/1.htm">js</a><a class="tag" taget="_blank" href="/search/WEB/1.htm">WEB</a>
                        <div>主页1.html2.html3.htmlvarcurrentPage={pageId:'page0',pageUrl:'index.html',pageIndex:0};varpageList=[{pageId:'page0',pageUrl:'index.html',pageIndex:0},{pageId:'page1',pageUrl:'1.html',pageIndex:1},{pageI</div>
                    </li>
                    <li><a href="/article/1940606518458118144.htm"
                           title="React 学习（一）" target="_blank">React 学习（一）</a>
                        <span class="text-muted">COLDEHY</span>
<a class="tag" taget="_blank" href="/search/react.js/1.htm">react.js</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
                        <div>1.b/s架构是浏览器的形式，就是通过网页的方式访问2.是构建用户界面的javascript库，react是用来替代dom的，原本使用ajax结合dom实现页面局部刷新的方式需要频繁的操作dom不方便，所以我们可以使用前端框架来解决，不再直接操作dom，而是操作react，react去操作dom3.react特点虚拟dom，不用原生dom，原生dom存在兼容性问题，可能这个浏览器能用下一个就不能用</div>
                    </li>
                    <li><a href="/article/1940605886372311040.htm"
                           title="跟着AI学习C#之项目实战-电商平台 Day7" target="_blank">跟着AI学习C#之项目实战-电商平台 Day7</a>
                        <span class="text-muted">蓝胖子不会敲代码</span>
<a class="tag" taget="_blank" href="/search/C%23/1.htm">C#</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/c%23/1.htm">c#</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a>
                        <div>Day7：部署准备与优化✅今日目标：添加静态资源（CSS、JS、图片）优化页面样式与交互体验添加分页功能（商品、订单列表）配置生产环境设置（appsettings.Production.json）准备发布部署（dotnetpublish）功能概览类型内容静态资源wwwroot/css,wwwroot/js,wwwroot/images页面样式优化使用Bootstrap+自定义CSS增强用户体验分页</div>
                    </li>
                    <li><a href="/article/1940600594850967552.htm"
                           title="请求被中止: 未能创建 SSL/TLS 安全通道（.net framework 4.0 解决方法 ）" target="_blank">请求被中止: 未能创建 SSL/TLS 安全通道（.net framework 4.0 解决方法 ）</a>
                        <span class="text-muted">dearbaba_11</span>
<a class="tag" taget="_blank" href="/search/%E8%AF%B7%E6%B1%82%E8%A2%AB%E4%B8%AD%E6%AD%A2%3A/1.htm">请求被中止:</a><a class="tag" taget="_blank" href="/search/%E6%9C%AA%E8%83%BD%E5%88%9B%E5%BB%BA/1.htm">未能创建</a><a class="tag" taget="_blank" href="/search/SSL%2FTLS/1.htm">SSL/TLS</a><a class="tag" taget="_blank" href="/search/%E5%AE%89%E5%85%A8%E9%80%9A%E9%81%93/1.htm">安全通道</a><a class="tag" taget="_blank" href="/search/%E8%AF%B7%E6%B1%82%E8%A2%AB%E4%B8%AD%E6%AD%A2%3A/1.htm">请求被中止:</a><a class="tag" taget="_blank" href="/search/%E6%9C%AA%E8%83%BD%E5%88%9B%E5%BB%BA/1.htm">未能创建</a><a class="tag" taget="_blank" href="/search/SSL%2FTLS/1.htm">SSL/TLS</a><a class="tag" taget="_blank" href="/search/%E5%AE%89%E5%85%A8%E9%80%9A%E9%81%93/1.htm">安全通道</a><a class="tag" taget="_blank" href="/search/.NET/1.htm">.NET</a><a class="tag" taget="_blank" href="/search/4.0/1.htm">4.0</a><a class="tag" taget="_blank" href="/search/%E6%9C%AA%E8%83%BD%E5%88%9B%E5%BB%BA/1.htm">未能创建</a><a class="tag" taget="_blank" href="/search/SSL%2FTLS/1.htm">SSL/TLS</a><a class="tag" taget="_blank" href="/search/%E5%AE%89%E5%85%A8%E9%80%9A%E9%81%93/1.htm">安全通道</a>
                        <div>请求被中止:未能创建SSL/TLS安全通道（.netframework4.0解决方法）参考文章：（1）请求被中止:未能创建SSL/TLS安全通道（.netframework4.0解决方法）（2）https://www.cnblogs.com/wlays/articles/10617013.html（3）https://www.javazxz.com/thread-6848-1-1.html备忘一下</div>
                    </li>
                    <li><a href="/article/1940588243221278720.htm"
                           title="JavaScript对象(Object)常用操作" target="_blank">JavaScript对象(Object)常用操作</a>
                        <span class="text-muted"></span>

                        <div>创建对象//使用对象字面量、构造函数或者Object.create()方法来创建对象//对象字面量constperson={name:'John',age:30,hobbies:['reading','swimming']};//构造函数functionCar(make,model){this.make=make;this.model=model;}constmyCar=newCar('Toyot</div>
                    </li>
                    <li><a href="/article/1940583701142368256.htm"
                           title="微信小程序入门四：实现table效果" target="_blank">微信小程序入门四：实现table效果</a>
                        <span class="text-muted">鳄鱼儿</span>
<a class="tag" taget="_blank" href="/search/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F/1.htm">微信小程序</a><a class="tag" taget="_blank" href="/search/%E5%B0%8F%E7%A8%8B%E5%BA%8F%E5%85%A5%E9%97%A8/1.htm">小程序入门</a>
                        <div>微信小程序中没有table组件，那么怎么实现呢？其实使用多个view组件就可以实现，接下来就直接看代码吧标题1标题2标题3标题4标题5{{item}}{{item}}{{item}}{{item}}{{item}}/*.css*/page{font-size:14px;color:#333;}.table{border:1pxsolid#dadada;border-right:0;border-b</div>
                    </li>
                    <li><a href="/article/1940571980860289024.htm"
                           title="在LINUX下使用模拟器运行Android" target="_blank">在LINUX下使用模拟器运行Android</a>
                        <span class="text-muted">renjin252252252</span>
<a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/android/1.htm">android</a><a class="tag" taget="_blank" href="/search/path/1.htm">path</a><a class="tag" taget="_blank" href="/search/x86/1.htm">x86</a><a class="tag" taget="_blank" href="/search/c/1.htm">c</a>
                        <div>版权声明：转载时请以超链接形式标明文章原始出处和作者信息及本声明http://glizardy.blogbus.com/logs/42812304.html1到http://developer.android.com/sdk/1.5_r3/index.html下载Linux(i386)android-sdk-linux_x86-1.5_r3.zip178117561bytes350d0211678</div>
                    </li>
                    <li><a href="/article/1940569330269876224.htm"
                           title="Nodejs源码解析之module" target="_blank">Nodejs源码解析之module</a>
                        <span class="text-muted">leoleocs</span>
<a class="tag" taget="_blank" href="/search/Javascript/1.htm">Javascript</a><a class="tag" taget="_blank" href="/search/nodejs/1.htm">nodejs</a>
                        <div>module管理是Nodejs中比较有特色的部分，官方有详细的文档https://nodejs.org/api/modules.html哪里介绍了一些基本的使用规则，主要的内容如下，文件和模块之间是一一对应关系：使用方法就是require，后续源码解析中会详细介绍什么是require，以及如何实现的。文件的名字就是一个id，也就是标志符。如何访问和被确认为主模块：简单的说就是被nodejs启动的模</div>
                    </li>
                    <li><a href="/article/1940568698121154560.htm"
                           title="全平台QQ聊天数据库解密项目常见问题解决方案" target="_blank">全平台QQ聊天数据库解密项目常见问题解决方案</a>
                        <span class="text-muted">管旭韶</span>

                        <div>全平台QQ聊天数据库解密项目常见问题解决方案qq-win-db-keyQQNT/WindowsQQ聊天数据库解密项目地址:https://gitcode.com/gh_mirrors/qq/qq-win-db-key项目基础介绍本项目是一个开源项目，旨在为用户提供全平台QQ聊天数据库的解密方法。项目主要使用Python、JavaScript和C++等编程语言实现。新手常见问题及解决步骤问题一：如何</div>
                    </li>
                    <li><a href="/article/1940564285268750336.htm"
                           title="Vue简介，什么是Vue（Vue3）？" target="_blank">Vue简介，什么是Vue（Vue3）？</a>
                        <span class="text-muted">水云桐程序员</span>
<a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a>
                        <div>什么是Vue？Vue是一款用于构建用户界面的JavaScript框架。它基于标准HTML、CSS和JavaScript构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单的还是复杂地界面，Vue都可以胜任。声明式渲染：Vue基于标准HTML拓展了一套模板语法，使得我们可以声明式地描述最终输出地HTML和JavaScript状态之间的关系。响应性：Vue会自动跟踪Jav</div>
                    </li>
                                <li><a href="/article/58.htm"
                                       title="多线程编程之理财" target="_blank">多线程编程之理财</a>
                                    <span class="text-muted">周凡杨</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%A4%9A%E7%BA%BF%E7%A8%8B/1.htm">多线程</a><a class="tag" taget="_blank" href="/search/%E7%94%9F%E4%BA%A7%E8%80%85/1.htm">生产者</a><a class="tag" taget="_blank" href="/search/%E6%B6%88%E8%B4%B9%E8%80%85/1.htm">消费者</a><a class="tag" taget="_blank" href="/search/%E7%90%86%E8%B4%A2/1.htm">理财</a>
                                    <div>      现实生活中，我们一边工作，一边消费，正常情况下会把多余的钱存起来，比如存到余额宝，还可以多挣点钱，现在就有这个情况：我每月可以发工资20000万元 （暂定每月的1号），每月消费5000（租房+生活费）元（暂定每月的1号），其中租金是大头占90%，交房租的方式可以选择（一月一交，两月一交、三月一交），理财：1万元存余额宝一天可以赚1元钱，</div>
                                </li>
                                <li><a href="/article/185.htm"
                                       title="[Zookeeper学习笔记之三]Zookeeper会话超时机制" target="_blank">[Zookeeper学习笔记之三]Zookeeper会话超时机制</a>
                                    <span class="text-muted">bit1129</span>
<a class="tag" taget="_blank" href="/search/zookeeper/1.htm">zookeeper</a>
                                    <div>首先，会话超时是由Zookeeper服务端通知客户端会话已经超时，客户端不能自行决定会话已经超时，不过客户端可以通过调用Zookeeper.close()主动的发起会话结束请求，如下的代码输出内容 
Created /zoo-739160015 
CONNECTEDCONNECTED 
.............CONNECTEDCONNECTED 
CONNECTEDCLOSEDCLOSED 
</div>
                                </li>
                                <li><a href="/article/312.htm"
                                       title="SecureCRT快捷键" target="_blank">SecureCRT快捷键</a>
                                    <span class="text-muted">daizj</span>
<a class="tag" taget="_blank" href="/search/secureCRT/1.htm">secureCRT</a><a class="tag" taget="_blank" href="/search/%E5%BF%AB%E6%8D%B7%E9%94%AE/1.htm">快捷键</a>
                                    <div>ctrl + a : 移动光标到行首ctrl + e ：移动光标到行尾crtl + b: 光标前移1个字符crtl + f: 光标后移1个字符crtl + h : 删除光标之前的一个字符ctrl + d ：删除光标之后的一个字符crtl + k ：删除光标到行尾所有字符crtl + u : 删除光标至行首所有字符crtl + w:  删除光标至行首</div>
                                </li>
                                <li><a href="/article/439.htm"
                                       title="Java 子类与父类这间的转换" target="_blank">Java 子类与父类这间的转换</a>
                                    <span class="text-muted">周凡杨</span>
<a class="tag" taget="_blank" href="/search/java+%E7%88%B6%E7%B1%BB%E4%B8%8E%E5%AD%90%E7%B1%BB%E7%9A%84%E8%BD%AC%E6%8D%A2/1.htm">java 父类与子类的转换</a>
                                    <div>    最近同事调的一个服务报错，查看后是日期之间转换出的问题。代码里是把 java.sql.Date 类型的对象 强制转换为 java.sql.Timestamp 类型的对象。报java.lang.ClassCastException。 
  
    代码： 
            </div>
                                </li>
                                <li><a href="/article/566.htm"
                                       title="可视化swing界面编辑" target="_blank">可视化swing界面编辑</a>
                                    <span class="text-muted">朱辉辉33</span>
<a class="tag" taget="_blank" href="/search/eclipse/1.htm">eclipse</a><a class="tag" taget="_blank" href="/search/swing/1.htm">swing</a>
                                    <div>      今天发现了一个WindowBuilder插件，功能好强大，啊哈哈，从此告别手动编辑swing界面代码，直接像VB那样编辑界面，代码会自动生成。 
      首先在Eclipse中点击help，选择Install New Software,然后在Work with中输入WindowBui</div>
                                </li>
                                <li><a href="/article/693.htm"
                                       title="web报表工具FineReport常用函数的用法总结（文本函数）" target="_blank">web报表工具FineReport常用函数的用法总结（文本函数）</a>
                                    <span class="text-muted">老A不折腾</span>
<a class="tag" taget="_blank" href="/search/finereport/1.htm">finereport</a><a class="tag" taget="_blank" href="/search/web%E6%8A%A5%E8%A1%A8%E5%B7%A5%E5%85%B7/1.htm">web报表工具</a><a class="tag" taget="_blank" href="/search/%E6%8A%A5%E8%A1%A8%E8%BD%AF%E4%BB%B6/1.htm">报表软件</a><a class="tag" taget="_blank" href="/search/java%E6%8A%A5%E8%A1%A8/1.htm">java报表</a>
                                    <div>文本函数 
CHAR 
CHAR(number):根据指定数字返回对应的字符。CHAR函数可将计算机其他类型的数字代码转换为字符。 
Number:用于指定字符的数字，介于1Number:用于指定字符的数字，介于165535之间（包括1和65535）。 
示例: 
CHAR(88)等于“X”。 
CHAR(45)等于“-”。 
  
CODE 
CODE(text):计算文本串中第一个字</div>
                                </li>
                                <li><a href="/article/820.htm"
                                       title="mysql安装出错" target="_blank">mysql安装出错</a>
                                    <span class="text-muted">林鹤霄</span>
<a class="tag" taget="_blank" href="/search/mysql%E5%AE%89%E8%A3%85/1.htm">mysql安装</a>
                                    <div>[root@localhost ~]# rpm -ivh MySQL-server-5.5.24-1.linux2.6.x86_64.rpm Preparing...                #####################</div>
                                </li>
                                <li><a href="/article/947.htm"
                                       title="linux下编译libuv" target="_blank">linux下编译libuv</a>
                                    <span class="text-muted">aigo</span>
<a class="tag" taget="_blank" href="/search/libuv/1.htm">libuv</a>
                                    <div>下载最新版本的libuv源码，解压后执行： 
./autogen.sh 
  
这时会提醒找不到automake命令，通过一下命令执行安装（redhat系用yum，Debian系用apt-get）： 
# yum -y install automake 
# yum -y install libtool 
  
  
如果提示错误：make: *** No targe</div>
                                </li>
                                <li><a href="/article/1074.htm"
                                       title="中国行政区数据及三级联动菜单" target="_blank">中国行政区数据及三级联动菜单</a>
                                    <span class="text-muted">alxw4616</span>

                                    <div>近期做项目需要三级联动菜单,上网查了半天竟然没有发现一个能直接用的! 
呵呵,都要自己填数据....我了个去这东西麻烦就麻烦的数据上. 
哎,自己没办法动手写吧. 
现将这些数据共享出了,以方便大家.嗯,代码也可以直接使用 
  文件说明 
 
 lib\area.sql -- 县及县以上行政区划分代码（截止2013年8月31日)来源：国家统计局 发布时间：2014-01-17 15:0</div>
                                </li>
                                <li><a href="/article/1201.htm"
                                       title="哈夫曼加密文件" target="_blank">哈夫曼加密文件</a>
                                    <span class="text-muted">百合不是茶</span>
<a class="tag" taget="_blank" href="/search/%E5%93%88%E5%A4%AB%E6%9B%BC%E5%8E%8B%E7%BC%A9/1.htm">哈夫曼压缩</a><a class="tag" taget="_blank" href="/search/%E5%93%88%E5%A4%AB%E6%9B%BC%E5%8A%A0%E5%AF%86/1.htm">哈夫曼加密</a><a class="tag" taget="_blank" href="/search/%E4%BA%8C%E5%8F%89%E6%A0%91/1.htm">二叉树</a>
                                    <div> 在上一篇介绍过哈夫曼编码的基础知识,下面就直接介绍使用哈夫曼编码怎么来做文件加密或者压缩与解压的软件,对于新手来是有点难度的,主要还是要理清楚步骤; 
  
加密步骤: 
 1,统计文件中字节出现的次数,作为权值 
  
2,创建节点和哈夫曼树 
  
3,得到每个子节点01串 
  
4,使用哈夫曼编码表示每个字节 
  
</div>
                                </li>
                                <li><a href="/article/1328.htm"
                                       title="JDK1.5 Cyclicbarrier实例" target="_blank">JDK1.5 Cyclicbarrier实例</a>
                                    <span class="text-muted">bijian1013</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/thread/1.htm">thread</a><a class="tag" taget="_blank" href="/search/java%E5%A4%9A%E7%BA%BF%E7%A8%8B/1.htm">java多线程</a><a class="tag" taget="_blank" href="/search/Cyclicbarrier/1.htm">Cyclicbarrier</a>
                                    <div>CyclicBarrier类 
一个同步辅助类，它允许一组线程互相等待，直到到达某个公共屏障点 (common barrier point)。在涉及一组固定大小的线程的程序中，这些线程必须不时地互相等待，此时 CyclicBarrier 很有用。因为该 barrier 在释放等待线程后可以重用，所以称它为循环的 barrier。 
CyclicBarrier支持一个可选的 Runnable 命令，</div>
                                </li>
                                <li><a href="/article/1455.htm"
                                       title="九项重要的职业规划" target="_blank">九项重要的职业规划</a>
                                    <span class="text-muted">bijian1013</span>
<a class="tag" taget="_blank" href="/search/%E5%B7%A5%E4%BD%9C/1.htm">工作</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a>
                                    <div>一. 学习的步伐不停止        古人说，活到老，学到老。终身学习应该是您的座右铭。        世界在不断变化，每个人都在寻找各自的事业途径。        您只有保证了足够的技能储</div>
                                </li>
                                <li><a href="/article/1582.htm"
                                       title="【Java范型四】范型方法" target="_blank">【Java范型四】范型方法</a>
                                    <span class="text-muted">bit1129</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a>
                                    <div>范型参数不仅仅可以用于类型的声明上，例如 
  
package com.tom.lang.generics;

import java.util.List;

public class Generics<T> {
    private T value;
    public Generics(T  value) {
        this.value = </div>
                                </li>
                                <li><a href="/article/1709.htm"
                                       title="【Hadoop十三】HDFS Java API基本操作" target="_blank">【Hadoop十三】HDFS Java API基本操作</a>
                                    <span class="text-muted">bit1129</span>
<a class="tag" taget="_blank" href="/search/hadoop/1.htm">hadoop</a>
                                    <div>  
package com.examples.hadoop;

import org.apache.hadoop.conf.Configuration;

import org.apache.hadoop.fs.FSDataInputStream;
import org.apache.hadoop.fs.FileStatus;
import org.apache.hadoo</div>
                                </li>
                                <li><a href="/article/1836.htm"
                                       title="ua实现split字符串分隔" target="_blank">ua实现split字符串分隔</a>
                                    <span class="text-muted">ronin47</span>
<a class="tag" taget="_blank" href="/search/lua+split/1.htm">lua split</a>
                                    <div>LUA并不象其它许多"大而全"的语言那样，包括很多功能，比如网络通讯、图形界面等。但是LUA可以很容易地被扩展：由宿主语言(通常是C或 C++)提供这些功能，LUA可以使用它们，就像是本来就内置的功能一样。LUA只包括一个精简的核心和最基本的库。这使得LUA体积小、启动速度快，从 而适合嵌入在别的程序里。因此在lua中并没有其他语言那样多的系统函数。习惯了其他语言的字符串分割函</div>
                                </li>
                                <li><a href="/article/1963.htm"
                                       title="java-从先序遍历和中序遍历重建二叉树" target="_blank">java-从先序遍历和中序遍历重建二叉树</a>
                                    <span class="text-muted">bylijinnan</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a>
                                    <div>

public class BuildTreePreOrderInOrder {

	/**
	 * Build Binary Tree from PreOrder and InOrder
	 *  _______7______
       /              \
    __10__          ___2
   /      \        /
   4</div>
                                </li>
                                <li><a href="/article/2090.htm"
                                       title="openfire开发指南《连接和登陆》" target="_blank">openfire开发指南《连接和登陆》</a>
                                    <span class="text-muted">开窍的石头</span>
<a class="tag" taget="_blank" href="/search/openfire/1.htm">openfire</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E6%8C%87%E5%8D%97/1.htm">开发指南</a><a class="tag" taget="_blank" href="/search/smack/1.htm">smack</a>
                                    <div>第一步 
    官网下载smack.jar包 
    下载地址：http://www.igniterealtime.org/downloads/index.jsp#smack 
第二步 
    把smack里边的jar导入你新建的java项目中 
 
开始编写smack连接openfire代码 
 
p</div>
                                </li>
                                <li><a href="/article/2217.htm"
                                       title="[移动通讯]手机后盖应该按需要能够随时开启" target="_blank">[移动通讯]手机后盖应该按需要能够随时开启</a>
                                    <span class="text-muted">comsci</span>
<a class="tag" taget="_blank" href="/search/%E7%A7%BB%E5%8A%A8/1.htm">移动</a>
                                    <div>    看到新的手机，很多由金属材质做的外壳，内存和闪存容量越来越大，CPU速度越来越快，对于这些改进，我们非常高兴，也非常欢迎 
 
     但是，对于手机的新设计，有几点我们也要注意 
 
     第一：手机的后盖应该能够被用户自行取下来，手机的电池的可更换性应该是必须保留的设计,</div>
                                </li>
                                <li><a href="/article/2344.htm"
                                       title="20款国外知名的php开源cms系统" target="_blank">20款国外知名的php开源cms系统</a>
                                    <span class="text-muted">cuiyadll</span>
<a class="tag" taget="_blank" href="/search/cms/1.htm">cms</a>
                                    <div>内容管理系统，简称CMS，是一种简易的发布和管理新闻的程序。用户可以在后端管理系统中发布，编辑和删除文章，即使您不需要懂得HTML和其他脚本语言，这就是CMS的优点。 
在这里我决定介绍20款目前国外市面上最流行的开源的PHP内容管理系统，以便没有PHP知识的读者也可以通过国外内容管理系统建立自己的网站。 
1. Wordpress 
WordPress的是一个功能强大且易于使用的内容管</div>
                                </li>
                                <li><a href="/article/2471.htm"
                                       title="Java生成全局唯一标识符" target="_blank">Java生成全局唯一标识符</a>
                                    <span class="text-muted">darrenzhu</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/uuid/1.htm">uuid</a><a class="tag" taget="_blank" href="/search/unique/1.htm">unique</a><a class="tag" taget="_blank" href="/search/identifier/1.htm">identifier</a><a class="tag" taget="_blank" href="/search/id/1.htm">id</a>
                                    <div>How to generate a globally unique identifier in Java 
 
 
 
http://stackoverflow.com/questions/21536572/generate-unique-id-in-java-to-label-groups-of-related-entries-in-a-log 
 
 
http://stackoverflow</div>
                                </li>
                                <li><a href="/article/2598.htm"
                                       title="php安装模块检测是否已安装过, 使用的SQL语句" target="_blank">php安装模块检测是否已安装过, 使用的SQL语句</a>
                                    <span class="text-muted">dcj3sjt126com</span>
<a class="tag" taget="_blank" href="/search/sql/1.htm">sql</a>
                                    <div>       
SHOW [FULL] TABLES [FROM db_name] [LIKE 'pattern'] 
SHOW TABLES列举了给定数据库中的非TEMPORARY表。您也可以使用mysqlshow db_name命令得到此清单。 
本命令也列举数据库中的其它视图。支持FULL修改符，这样SHOW FULL TABLES就可以显示第二个输出列。对于一个表，第二列的值为BASE T</div>
                                </li>
                                <li><a href="/article/2725.htm"
                                       title="5天学会一种 web 开发框架" target="_blank">5天学会一种 web 开发框架</a>
                                    <span class="text-muted">dcj3sjt126com</span>
<a class="tag" taget="_blank" href="/search/Web/1.htm">Web</a><a class="tag" taget="_blank" href="/search/%E6%A1%86%E6%9E%B6/1.htm">框架</a><a class="tag" taget="_blank" href="/search/framework/1.htm">framework</a>
                                    <div>web framework层出不穷，特别是ruby/python,各有10+个,php/java也是一大堆 根据我自己的经验写了一个to do list,按照这个清单，一条一条的学习，事半功倍，很快就能掌握 一共25条，即便很磨蹭，2小时也能搞定一条，25*2=50。只需要50小时就能掌握任意一种web框架 
各类web框架大同小异:现代web开发框架的6大元素，把握主线，就不会迷路 
建议把本文</div>
                                </li>
                                <li><a href="/article/2852.htm"
                                       title="Gson使用三(Map集合的处理,一对多处理)" target="_blank">Gson使用三(Map集合的处理,一对多处理)</a>
                                    <span class="text-muted">eksliang</span>
<a class="tag" taget="_blank" href="/search/json/1.htm">json</a><a class="tag" taget="_blank" href="/search/gson/1.htm">gson</a><a class="tag" taget="_blank" href="/search/Gson+map/1.htm">Gson map</a><a class="tag" taget="_blank" href="/search/Gson+%E9%9B%86%E5%90%88%E5%A4%84%E7%90%86/1.htm">Gson 集合处理</a>
                                    <div>转载请出自出处：http://eksliang.iteye.com/blog/2175532 一、概述 
       Map保存的是键值对的形式，Json的格式也是键值对的，所以正常情况下，map跟json之间的转换应当是理所当然的事情。 二、Map参考实例 
package com.ickes.json;

import java.lang.refl</div>
                                </li>
                                <li><a href="/article/2979.htm"
                                       title="cordova实现“再点击一次退出”效果" target="_blank">cordova实现“再点击一次退出”效果</a>
                                    <span class="text-muted">gundumw100</span>
<a class="tag" taget="_blank" href="/search/android/1.htm">android</a>
                                    <div>基本的写法如下： 
 


document.addEventListener("deviceready", onDeviceReady, false);
			
function onDeviceReady() {
	//navigator.splashscreen.hide();
        document.addEventListener("b</div>
                                </li>
                                <li><a href="/article/3106.htm"
                                       title="openldap configuration leaning note" target="_blank">openldap configuration leaning note</a>
                                    <span class="text-muted">iwindyforest</span>
<a class="tag" taget="_blank" href="/search/configuration/1.htm">configuration</a>
                                    <div>hostname // to display the computer name 
hostname <changed name> // to change 
go to: /etc/sysconfig/network, add/modify HOSTNAME=NEWNAME to change permenately 
dont forget to change /etc/hosts</div>
                                </li>
                                <li><a href="/article/3233.htm"
                                       title="Nullability and Objective-C" target="_blank">Nullability and Objective-C</a>
                                    <span class="text-muted">啸笑天</span>
<a class="tag" taget="_blank" href="/search/Objective-C/1.htm">Objective-C</a>
                                    <div>https://developer.apple.com/swift/blog/?id=25 
  
http://www.cocoachina.com/ios/20150601/11989.html 
  
http://blog.csdn.net/zhangao0086/article/details/44409913 
  
http://blog.sunnyxx</div>
                                </li>
                                <li><a href="/article/3360.htm"
                                       title="jsp中实现参数隐藏的两种方法" target="_blank">jsp中实现参数隐藏的两种方法</a>
                                    <span class="text-muted">macroli</span>
<a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/jsp/1.htm">jsp</a>
                                    <div>在一个JSP页面有一个链接，//确定是一个链接?点击弹出一个页面，需要传给这个页面一些参数。//正常的方法是设置弹出页面的src="***.do?p1=aaa&p2=bbb&p3=ccc"//确定目标URL是Action来处理?但是这样会在页面上看到传过来的参数，可能会不安全。要求实现src="***.do"，参数通过其他方法传！//////</div>
                                </li>
                                <li><a href="/article/3487.htm"
                                       title="Bootstrap A标签关闭modal并打开新的链接解决方案" target="_blank">Bootstrap A标签关闭modal并打开新的链接解决方案</a>
                                    <span class="text-muted">qiaolevip</span>
<a class="tag" taget="_blank" href="/search/%E6%AF%8F%E5%A4%A9%E8%BF%9B%E6%AD%A5%E4%B8%80%E7%82%B9%E7%82%B9/1.htm">每天进步一点点</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0%E6%B0%B8%E6%97%A0%E6%AD%A2%E5%A2%83/1.htm">学习永无止境</a><a class="tag" taget="_blank" href="/search/bootstrap/1.htm">bootstrap</a><a class="tag" taget="_blank" href="/search/%E7%BA%B5%E8%A7%82%E5%8D%83%E8%B1%A1/1.htm">纵观千象</a>
                                    <div>Bootstrap里面的js modal控件使用起来很方便，关闭也很简单。只需添加标签 data-dismiss="modal" 即可。 
可是偏偏有时候需要a标签既要关闭modal，有要打开新的链接，尝试多种方法未果。只好使用原始js来控制。 
  
<a href="#/group-buy" class="btn bt</div>
                                </li>
                                <li><a href="/article/3614.htm"
                                       title="二维数组在Java和C中的区别" target="_blank">二维数组在Java和C中的区别</a>
                                    <span class="text-muted">流淚的芥末</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/c/1.htm">c</a><a class="tag" taget="_blank" href="/search/%E4%BA%8C%E7%BB%B4%E6%95%B0%E7%BB%84/1.htm">二维数组</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E7%BB%84/1.htm">数组</a>
                                    <div>Java代码： 
  
public class test03 {
	public static void main(String[] args) {
		int[][] a = {{1},{2,3},{4,5,6}};
		System.out.println(a[0][1]);
	}
} 
 运行结果： 
Exception in thread "mai</div>
                                </li>
                                <li><a href="/article/3741.htm"
                                       title="systemctl命令用法" target="_blank">systemctl命令用法</a>
                                    <span class="text-muted">wmlJava</span>
<a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/systemctl/1.htm">systemctl</a>
                                    <div>对比表，以 apache / httpd 为例   任务 旧指令 新指令   使某服务自动启动 chkconfig --level 3 httpd on systemctl enable httpd.service   使某服务不自动启动 chkconfig --level 3 httpd off systemctl disable httpd.service   检查服务状态 service h</div>
                                </li>
                </ul>
            </div>
        </div>
    </div>

<div>
    <div class="container">
        <div class="indexes">
            <strong>按字母分类：</strong>
            <a href="/tags/A/1.htm" target="_blank">A</a><a href="/tags/B/1.htm" target="_blank">B</a><a href="/tags/C/1.htm" target="_blank">C</a><a
                href="/tags/D/1.htm" target="_blank">D</a><a href="/tags/E/1.htm" target="_blank">E</a><a href="/tags/F/1.htm" target="_blank">F</a><a
                href="/tags/G/1.htm" target="_blank">G</a><a href="/tags/H/1.htm" target="_blank">H</a><a href="/tags/I/1.htm" target="_blank">I</a><a
                href="/tags/J/1.htm" target="_blank">J</a><a href="/tags/K/1.htm" target="_blank">K</a><a href="/tags/L/1.htm" target="_blank">L</a><a
                href="/tags/M/1.htm" target="_blank">M</a><a href="/tags/N/1.htm" target="_blank">N</a><a href="/tags/O/1.htm" target="_blank">O</a><a
                href="/tags/P/1.htm" target="_blank">P</a><a href="/tags/Q/1.htm" target="_blank">Q</a><a href="/tags/R/1.htm" target="_blank">R</a><a
                href="/tags/S/1.htm" target="_blank">S</a><a href="/tags/T/1.htm" target="_blank">T</a><a href="/tags/U/1.htm" target="_blank">U</a><a
                href="/tags/V/1.htm" target="_blank">V</a><a href="/tags/W/1.htm" target="_blank">W</a><a href="/tags/X/1.htm" target="_blank">X</a><a
                href="/tags/Y/1.htm" target="_blank">Y</a><a href="/tags/Z/1.htm" target="_blank">Z</a><a href="/tags/0/1.htm" target="_blank">其他</a>
        </div>
    </div>
</div>
<footer id="footer" class="mb30 mt30">
    <div class="container">
        <div class="footBglm">
            <a target="_blank" href="/">首页</a> -
            <a target="_blank" href="/custom/about.htm">关于我们</a> -
            <a target="_blank" href="/search/Java/1.htm">站内搜索</a> -
            <a target="_blank" href="/sitemap.txt">Sitemap</a> -
            <a target="_blank" href="/custom/delete.htm">侵权投诉</a>
        </div>
        <div class="copyright">版权所有 IT知识库 CopyRight © 2000-2050 E-COM-NET.COM , All Rights Reserved.
<!--            <a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank">京ICP备09083238号</a><br>-->
        </div>
    </div>
</footer>
<!-- 代码高亮 -->
<script type="text/javascript" src="/static/syntaxhighlighter/scripts/shCore.js"></script>
<script type="text/javascript" src="/static/syntaxhighlighter/scripts/shLegacy.js"></script>
<script type="text/javascript" src="/static/syntaxhighlighter/scripts/shAutoloader.js"></script>
<link type="text/css" rel="stylesheet" href="/static/syntaxhighlighter/styles/shCoreDefault.css"/>
<script type="text/javascript" src="/static/syntaxhighlighter/src/my_start_1.js"></script>





</body>

</html>