Bobby陈兴博
Bobby陈兴博

构建“酒馆“主题网页：HTML基础教程

本文还有配套的精品资源，点击获取 menu-r.4af5f7ec.gif

简介：HTML是网页制作的基础，用于构建和设计网页内容。本文介绍了如何使用HTML标签和结构创建一个具有酒馆主题的网页，包括设置页面标题、布局、菜单、互动表单及图片展示。通过学习HTML元素的使用，可以掌握创建具有吸引力的在线体验的技术。

1. HTML基础和页面结构

在互联网的世界中，HTML（HyperText Markup Language）是构建网页的基石。它是超文本标记语言，用于创建和定义网页内容的标准标记语言。HTML文档由一系列的元素构成，这些元素通过标记（tags）来表示，并通过它们的嵌套关系定义了网页的结构。每一个网页都是一个HTML文档，它告诉浏览器如何展示文本、图片、链接、表单等元素。

HTML页面的结构通常遵循一个特定的格式，其中最基础的是 、 和 这三个元素。 元素包裹整个页面内容，是所有HTML文档的根元素； 元素包含页面的元信息，如标题、链接到样式表和脚本等；而 元素则是页面内容的容器，用户在网页上能看到的所有内容，包括文本、图片、视频等，都放置在 标签中。

理解HTML的基本结构对于任何网页开发都至关重要，因为它是后续学习CSS和JavaScript等技术的基础。它不仅为网页的静态内容提供了框架，还为动态交互和应用提供了可能。在接下来的章节中，我们将更深入地探讨如何利用HTML的不同元素和标签来构建功能丰富、布局美观的网页。

2. 利用 元素设置页面标题

2.1 </code> 标签的定义和重要性 </h3> <h4> 2.1.1 页面标题的作用 </h4> <p> 页面标题（ <code> <title> </code> 标签）是HTML文档中 <code> <head> </code> 部分的一个基本组成部分，它定义了出现在浏览器标签页上的标题。尽管页面标题不像页面内的其他元素那样直接展示在用户的视线内，它却承担着极其重要的角色。 </p> <p> 一个精心设计的页面标题可以： </p> <ul> <li> <strong> 提供页面内容的简洁描述 </strong> ：用户通过页面标题快速理解页面的主要内容。 </li> <li> <strong> 改善搜索引擎优化（SEO） </strong> ：搜索引擎通常会使用页面标题来理解页面主题，以便在搜索结果中进行排名。 </li> <li> <strong> 有助于用户体验（UX） </strong> ：用户在多个标签页之间切换时，可以通过标题迅速找到自己想要的信息。 </li> <li> <strong> 作为导航和收藏的参考 </strong> ：当用户将页面添加到书签或收藏夹时，页面标题通常会被用作默认的书签名。 </li> </ul> <p> 因此，编写有效的页面标题对于网站流量、用户互动以及提升品牌形象至关重要。 </p> <h4> 2.1.2 如何编写有效的标题 </h4> <p> 编写有效的页面标题需要遵循以下原则： </p> <ul> <li> <strong> 简洁明了 </strong> ：标题应该简短并且直接传递页面的主题或目的。 </li> <li> <strong> 包含关键词 </strong> ：确保标题中包含与页面内容密切相关的关键词，这有助于提高SEO效率。 </li> <li> <strong> 独特性 </strong> ：每个页面的标题都应该是独一无二的，以避免在浏览器标签页或搜索结果中混淆用户。 </li> <li> <strong> 避免过度使用关键词 </strong> ：堆砌关键词会降低页面的专业性和用户体验。 </li> <li> <strong> 清晰的优先级 </strong> ：考虑到 <code> <title> </code> 标签也会显示在搜索结果中，应当确保其内容与用户的搜索意图相匹配。 </li> </ul> <h3> 2.2 元数据标签的应用 </h3> <h4> 2.2.1 <code> <meta> </code> 标签的类型和用途 </h4> <p> <code> <meta> </code> 标签是HTML文档中用于描述元数据信息的标签，它通常位于 <code> <head> </code> 部分，并且不会直接显示给最终用户。 <code> <meta> </code> 标签有多种用途，例如： </p> <ul> <li> <strong> 字符集声明 </strong> ：指定文档所使用的字符编码，如UTF-8。 </li> <li> <strong> 描述元数据 </strong> ：提供关于页面内容的简短描述，这对于SEO很有帮助。 </li> <li> <strong> 视图窗口属性 </strong> ：控制如何在浏览器窗口中显示页面，如设置初始缩放比例。 </li> <li> <strong> 重定向页面 </strong> ：可以用于自动将用户重定向到新的URL。 </li> <li> <strong> 添加作者信息 </strong> ：包含创建或维护页面的作者信息。 </li> </ul> <h4> 2.2.2 设定字符集和视图窗口属性 </h4> <p> 在现代Web开发中，确保页面正确地显示不同语言的字符至关重要。UTF-8字符集几乎已经成为了网页编码的标准。例如： </p> <pre><code class="language-html"><meta charset="UTF-8"> </code></pre> <p> 这行代码告诉浏览器页面使用UTF-8字符集进行编码。这种设置保证了页面能够正确地显示各种语言文字，包括那些带有重音符号和其他特殊字符的文字。 </p> <p> 而 <code> <meta> </code> 标签的视图窗口属性则是用于控制网页在移动设备或桌面浏览器上的展示方式。移动优先的设计原则要求开发者考虑不同屏幕尺寸的设备。例如，控制页面在移动设备上显示的宽度： </p> <pre><code class="language-html"><meta name="viewport" content="width=device-width, initial-scale=1"> </code></pre> <p> 这里的 <code> width=device-width </code> 确保页面宽度与设备屏幕宽度一致，而 <code> initial-scale=1 </code> 则设置初始缩放比例为1，保证用户看到的是设计者期望的布局。 </p> <p> 通过合理的 <code> <meta> </code> 标签设置，可以极大地提升网站的用户体验和搜索引擎排名。 </p> <h2> 3. 使用 <code> <h1> </code> 至 <code> <h6> </code> 标签创建不同层级的标题 </h2> <h3> 3.1 标题标签的层级结构和意义 </h3> <h4> 3.1.1 <code> <h1> </code> 至 <code> <h6> </code> 的层级划分 </h4> <p> 标题标签 <code> <h1> </code> 至 <code> <h6> </code> 是HTML中用来定义页面上不同层级标题的元素，它们代表了文档结构的层次性。 <code> <h1> </code> 表示最高层次的标题，而 <code> <h6> </code> 表示最低层次的标题。这种分层结构非常重要，因为它不仅帮助用户理解页面内容的组织方式，还有助于搜索引擎优化（SEO）。 </p> <p> 在设计页面时，合理的层级划分可以使页面更加清晰易读。通常 <code> <h1> </code> 用于页面的主要标题，接着是 <code> <h2> </code> 作为各个部分的副标题，以此类推。这样，用户可以快速把握页面的概览，并根据需要深入阅读感兴趣的部分。 </p> <pre><code class="language-html"><h1>网站主标题</h1> <h2>网站副标题</h2> <h3>特定部分的标题</h3> <h4>次级部分的标题</h4> <h5>更详细内容的标题</h5> <h6>最细节内容的标题</h6> </code></pre> <h4> 3.1.2 语义化的重要性 </h4> <p> 在HTML5中，语义化的使用变得尤其重要。这意味着我们使用的标签不仅仅是为了表现，更是为了表达其内容的含义。使用标题标签时，遵循语义化的规则能够让屏幕阅读器等辅助技术更好地为有需要的用户提供服务，例如视觉障碍者。 </p> <p> 语义化的另一个好处是，它有助于页面内容的逻辑性和可访问性。搜索引擎在索引页面时会考虑标题标签，这可能影响搜索结果的排名。一个结构良好、语义明确的标题层级可以提高页面在搜索结果中的可见性。 </p> <h3> 3.2 标题内容的撰写技巧 </h3> <h4> 3.2.1 有效的标题内容创作 </h4> <p> 撰写有效的标题内容需要考虑多个方面。首先，标题需要吸引人并且能够准确反映下面内容的主题。一个好的标题能够告诉读者他们将要阅读什么，并激发他们的好奇心。此外，标题应当简洁明了，避免冗长和晦涩难懂的词汇。 </p> <p> 确保每个标题都与下面的内容紧密相关。如果标题承诺的内容和实际内容不符，读者可能会感到失望并失去信任。这也是为什么在优化标题时，真实性非常关键。 </p> <pre><code class="language-html"><h2>如何创建有效的HTML标题</h2> <p>本节将向您展示如何撰写有效的HTML标题标签。标题不仅要吸引眼球，还要准确地描述内容，并为读者提供实际的价值。</p> </code></pre> <h4> 3.2.2 与页面内容的关联性 </h4> <p> 标题应当与页面内容有密切的关联。这不仅仅是为了给搜索引擎提供相关信号，也是为了给用户提供清晰的导航路径。关联性差的标题可能会使用户在浏览页面时感到困惑，导致他们快速离开。确保标题和内容之间的一致性，有助于用户更好地理解和吸收信息。 </p> <p> 在设计页面布局时，可以通过将相关的内容和标题放置在相似的视觉层次来加强这种关联性。这样的视觉线索可以帮助用户快速识别内容的结构和主要焦点。 </p> <pre><code class="language-html"><h3>HTML标题标签的最佳实践</h3> <p>在这一部分，我们将探讨创建高质量标题的最佳实践，包括如何利用语义化和层级结构来提高页面的可读性和可访问性。</p> </code></pre> <p> 通过上述分析可以看出，标题标签在HTML文档结构中起着至关重要的作用。它们帮助用户和搜索引擎理解内容的组织方式，同时为页面提供清晰的导航路径。在下一节中，我们将深入了解如何合理布局页面内容，并运用CSS来进一步美化和优化我们的网页。 </p> <h2> 4. 使用 <code> <div> </code> 元素定义布局并用CSS设置样式 </h2> <h3> 4.1 <code> <div> </code> 元素的基础使用 </h3> <h4> 4.1.1 <code> <div> </code> 的作用和优势 </h4> <p> <code> <div> </code> 元素是网页开发中最为常见的块级元素之一，主要作用是作为容器使用，用来组合其他HTML元素，并通过CSS设置样式从而构建网页的布局。它之所以重要，是因为它提供了一种灵活的方式来对页面进行区域划分，这对于页面的样式设计和布局控制至关重要。 </p> <p> 优势之一是， <code> <div> </code> 元素可以随意嵌套其他HTML标签，这样我们就可以创建复杂的布局结构。而且，它不带任何语义信息，所以开发者可以自由地给它命名，通常使用 <code> class </code> 或 <code> id </code> 属性来区分不同的 <code> <div> </code> 块，便于后续通过CSS或JavaScript进行操作。 </p> <p> 此外， <code> <div> </code> 元素的另一个优势是易于理解和应用。它不需要特别复杂的标签属性，这对于新手开发者来说是一个友好的起点。 </p> <h4> 4.1.2 <code> <div> </code> 与 <code> <span> </code> 的区别 </h4> <p> <code> <div> </code> 与 <code> <span> </code> 在HTML中的角色都类似容器，但它们的使用场景和目的不同。 <code> <div> </code> 是一个块级元素，而 <code> <span> </code> 是一个内联元素。 </p> <p> <code> <div> </code> 元素通常用于布局方面，例如创建页面的头部、导航栏、主内容区域或页脚等。它会独占一行，并且可以通过 <code> width </code> 和 <code> height </code> 属性定义大小。与之相反， <code> <span> </code> 元素主要用于对行内元素的分组，不会独占一行。常见用途包括文本的样式化，例如，对句子中的某个词或短语进行样式更改，而不需要创建一个新的块级容器。 </p> <p> 理解它们之间的区别，可以帮助开发者选择合适的元素来构建更加语义化且易于维护的HTML文档结构。 </p> <h3> 4.2 结合CSS美化页面 </h3> <h4> 4.2.1 CSS选择器的基本用法 </h4> <p> CSS选择器是用于选中HTML文档中特定元素的语法。正确使用CSS选择器，可以帮助开发者精确地定位到需要添加样式的元素，从而使得页面布局和样式设计变得更为简便和直观。 </p> <p> 基本类型的选择器包括元素选择器、类选择器、ID选择器和属性选择器。 </p> <ul> <li> <strong> 元素选择器 </strong> 通过HTML标签名来选中元素，如 <code> p { color: blue; } </code> 将选中所有 <code> <p> </code> 元素并将其文本颜色设置为蓝色。 </li> <li> <strong> 类选择器 </strong> 以点（ <code> . </code> ）开头，可以选中所有具有相同类名的HTML元素，如 <code> .myClass { background-color: yellow; } </code> 选中所有类名为 <code> myClass </code> 的元素，并将其背景色设置为黄色。 </li> <li> <strong> ID选择器 </strong> 以井号（ <code> # </code> ）开头，用于选择具有特定ID的单个元素，如 <code> #myID { font-size: 24px; } </code> 选中ID为 <code> myID </code> 的元素，并将其字体大小设置为24像素。 </li> <li> <strong> 属性选择器 </strong> 根据属性来选择元素，例如 <code> [type="text"] { border: 1px solid #ccc; } </code> 将为所有 <code> type </code> 属性为 <code> text </code> 的表单元素添加灰色边框。 </li> </ul> <p> 除了基本类型，CSS还提供了组合选择器和伪类选择器等，这些都极大地丰富了我们对页面样式的控制能力。 </p> <h4> 4.2.2 页面布局技巧与响应式设计 </h4> <p> 页面布局是网页设计中的核心内容之一，也是创建良好用户体验的关键。常见的布局技巧包括浮动、Flexbox和Grid等。 </p> <ul> <li> <strong> 浮动布局 </strong> 通过设置元素的 <code> float </code> 属性来实现布局，例如 <code> float: left; </code> 可以使元素向左浮动，这在传统布局中被广泛使用，但需要额外的清除浮动技巧。 </li> <li> <strong> Flexbox布局 </strong> 提供了更加灵活的方式来对元素进行排列和对齐，它通过设置容器的 <code> display: flex; </code> 属性来开启，之后可以轻松地调整子元素的位置、大小和顺序。 </li> <li> <strong> Grid布局 </strong> 是一个二维布局系统，允许开发者通过行和列来组织内容，它提供了强大的对齐和位置控制功能，适用于复杂布局的创建。 </li> </ul> <p> 响应式设计则是指让网页能够在不同大小的屏幕上提供良好的视觉和功能体验。通过媒体查询（media queries），开发者可以针对不同的视口大小（viewport size）应用不同的CSS样式。 </p> <p> 例如： </p> <pre><code class="language-css">@media screen and (max-width: 768px) { .container { flex-direction: column; } } </code></pre> <p> 上面的代码表示当屏幕宽度小于或等于768像素时， <code> .container </code> 类的元素将以列的形式堆叠显示，而不是默认的行式排列。这样的响应式设计确保了网页能够在不同设备上保持较好的可用性。 </p> <p> 通过灵活运用这些布局技巧，并结合响应式设计的理念，开发者可以创建出既美观又实用的网页布局。 </p> <h2> 5. 利用 <code> <ul> </code> 和 <code> <li> </code> 标签创建菜单列表 </h2> <h3> 5.1 列表标签的种类和用途 </h3> <h4> 5.1.1 无序列表 <code> <ul> </code> 的使用 </h4> <p> 无序列表 <code> <ul> </code> 是一个非常强大的 HTML 元素，它通常用于创建没有特定顺序或重要性的项目列表。在网页设计中， <code> <ul> </code> 常常用于创建导航菜单、产品列表、用户界面元素等。使用 <code> <ul> </code> 元素的好处在于它的结构化特性，它可以清晰地组织内容，并且在CSS的帮助下，可以轻松地进行样式化和布局调整。 </p> <h5> 代码块展示 </h5> <p> 以下是一个简单的 <code> <ul> </code> 标签使用示例： </p> <pre><code class="language-html"><ul> <li>项目1</li> <li>项目2</li> <li>项目3</li> </ul> </code></pre> <p> <strong> 逻辑分析： </strong> <br> - <code> <ul> </code> 标签定义了一个无序列表，浏览器会默认在每个 <code> <li> </code> 元素前添加一个圆点作为列表项的标记。 <br> - <code> <li> </code> 标签定义了列表中的每个项目，它是一个块级元素，可以包含文字、图片、链接等任何内容。 </p> <h5> 参数说明 </h5> <ul> <li> <strong> type属性： </strong> 在HTML 4.01及更早版本中， <code> <ul> </code> 标签有一个 <code> type </code> 属性，可以用来定义项目符号的样式，比如 <code> type="disc" </code> 、 <code> type="circle" </code> 或 <code> type="square" </code> 。但在HTML5中， <code> type </code> 属性已经被废弃，现在推荐使用CSS来自定义列表项目符号的样式。 </li> </ul> <h4> 5.1.2 有序列表 <code> <ol> </code> 的使用 </h4> <p> 与无序列表相对应的是有序列表 <code> <ol> </code> ，它用于创建项目有特定顺序的列表。有序列表非常适合那些需要按照一定顺序排列信息的场景，例如步骤说明、排行榜、排名等。 </p> <h5> 代码块展示 </h5> <p> 下面是一个简单的有序列表示例： </p> <pre><code class="language-html"><ol> <li>第一步</li> <li>第二步</li> <li>第三步</li> </ol> </code></pre> <p> <strong> 逻辑分析： </strong> <br> - <code> <ol> </code> 标签定义了一个有序列表，浏览器默认以数字来标记每个列表项。 <br> - 每个 <code> <li> </code> 标签代表一个顺序列表项，按照在 <code> <ol> </code> 中出现的顺序进行编号。 </p> <h5> 参数说明 </h5> <ul> <li> <strong> start属性： </strong> <code> <ol> </code> 标签有一个 <code> start </code> 属性，可以用来指定列表项的起始数字。例如， <code> <ol start="5"> </code> 将会从数字5开始计数。 </li> <li> <strong> reversed属性： </strong> HTML5 引入了 <code> reversed </code> 属性，允许开发者创建一个倒序的列表，例如 <code> <ol reversed> </code> 。 </li> </ul> <h3> 5.2 实现交互式菜单 </h3> <h4> 5.2.1 列表项 <code> <li> </code> 的自定义样式 </h4> <p> 为了让菜单列表更具视觉吸引力和更好的用户体验，开发者经常需要自定义 <code> <li> </code> 元素的样式。通过CSS可以实现各种效果，如改变颜色、添加悬停效果、调整布局等。 </p> <h5> 代码块展示 </h5> <p> 下面是一个为 <code> <li> </code> 元素添加自定义样式的例子： </p> <pre><code class="language-css">ul.custom-menu { list-style: none; /* 移除默认的项目符号 */ padding: 0; /* 移除内边距 */ } ul.custom-menu li { display: inline-block; /* 列表项水平排列 */ margin-right: 20px; /* 设置水平间距 */ background-color: #f3f3f3; /* 背景颜色 */ padding: 10px 20px; /* 内边距 */ border: 1px solid #ddd; /* 边框 */ border-radius: 5px; /* 边框圆角 */ transition: background-color 0.3s; /* 过渡效果 */ } ul.custom-menu li:hover { background-color: #ddd; /* 鼠标悬停时背景变色 */ } </code></pre> <p> <strong> 逻辑分析： </strong> <br> - 移除了默认的项目符号，以使用自定义样式。 <br> - 通过设置 <code> display: inline-block </code> 使得列表项可以并排显示。 <br> - 使用 <code> padding </code> 为每个菜单项添加了内边距。 <br> - <code> background-color </code> 和 <code> border </code> 属性为菜单项添加了背景和边框样式。 <br> - <code> transition </code> 属性为背景颜色的变化添加了平滑过渡效果。 <br> - 当鼠标悬停在菜单项上时， <code> background-color </code> 发生变化，提供视觉反馈。 </p> <h4> 5.2.2 列表的高级布局和交互效果 </h4> <p> 现代网页设计中，菜单列表不仅仅只包含文本和链接，还可能包含图标、按钮和复杂的布局。因此，我们通常会用到更高级的布局和交互技术来增强菜单的实用性和美观性。 </p> <h5> Mermaid流程图展示 </h5> <p> 一个菜单项的高级布局流程图示例如下： </p> <pre><code class="language-mermaid">graph TD A[开始] --> B[创建 <ul> 元素] B --> C[定义 <li> 元素] C --> D[添加内容: 文本/链接/图标] D --> E[使用 CSS 进行样式化] E --> F[添加交互效果: 悬停/点击] F --> G[响应式设计调整] G --> H[结束] </code></pre> <p> <strong> 逻辑分析： </strong> <br> 1. 创建 <code> <ul> </code> 元素并设置为菜单容器。 <br> 2. 在 <code> <ul> </code> 元素内定义多个 <code> <li> </code> 元素，每个 <code> <li> </code> 代表一个菜单项。 <br> 3. 在每个 <code> <li> </code> 元素内添加内容，这可以是纯文本、链接或图标等。 <br> 4. 使用CSS进行基本的样式化，包括布局、颜色和间距等。 <br> 5. 添加悬停和点击等交互效果，提升用户体验。 <br> 6. 为了适应不同屏幕和设备，需要进行响应式设计调整。 </p> <h5> 代码块展示 </h5> <p> 下面是一个示例代码，展示了如何添加图标和响应式效果： </p> <pre><code class="language-html"><ul class="advanced-menu"> <li><a href="#">首页 <i class="icon-home"></i></a></li> <li><a href="#">产品 <i class="icon-product"></i></a></li> <li><a href="#">关于我们 <i class="icon-about"></i></a></li> </ul> </code></pre> <pre><code class="language-css">/* 添加图标 */ .icon-home:before { content: "\f015"; /* 使用字体图标 */ font-family: FontAwesome; margin-right: 5px; } /* 响应式设计 */ @media (max-width: 600px) { .advanced-menu { display: flex; flex-direction: column; } .advanced-menu li { display: block; width: 100%; margin: 0; } } </code></pre> <p> <strong> 逻辑分析： </strong> <br> - 通过 <code> :before </code> 伪元素在每个 <code> <a> </code> 元素内部的图标前添加内容。 <br> - 使用 <code> font-family </code> 属性引入一个字体图标集（如FontAwesome），并通过其对应的 Unicode 码显示图标。 <br> - 通过媒体查询 <code> @media </code> 实现响应式设计，当屏幕宽度小于600px时，菜单项从水平排列变为垂直排列。 <br> - 在移动设备上，每个菜单项都独占一列，确保在小屏幕上也能有良好的交互性。 </p> <h2> 6. 应用 <code> <form> </code> 和 <code> <input> </code> 元素制作订座表单 </h2> <h3> 6.1 表单元素的结构和属性 </h3> <h4> 6.1.1 <code> <form> </code> 标签的属性和作用域 </h4> <p> <code> <form> </code> 标签是HTML表单的基础元素，它定义了一个表单的范围和域。这个标签的属性允许我们指定表单如何提交数据以及在哪个目标上显示结果。例如， <code> action </code> 属性定义了表单数据提交到哪个URL处理，而 <code> method </code> 属性则指定了提交数据使用的是GET方法还是POST方法。这两种方法在数据传输方式和安全性上有所不同。 </p> <p> 下面是一个基本的 <code> <form> </code> 标签示例代码： </p> <pre><code class="language-html"><form action="/submit-form" method="post"> <!-- 表单内容 --> </form> </code></pre> <h4> 6.1.2 <code> <input> </code> 标签的类型和用途 </h4> <p> <code> <input> </code> 标签用于创建交互式控件，以便用户可以在表单中输入数据。 <code> <input> </code> 标签有多种类型（ <code> type </code> ），包括 <code> text </code> 、 <code> password </code> 、 <code> submit </code> 、 <code> radio </code> 、 <code> checkbox </code> 等，用于收集不同形式的用户输入。 </p> <p> 这里展示几种不同类型的 <code> <input> </code> 标签示例： </p> <pre><code class="language-html"><!-- 文本输入 --> <input type="text" name="username" placeholder="Enter your name"> <!-- 密码输入 --> <input type="password" name="password" placeholder="Enter your password"> <!-- 单选按钮 --> <input type="radio" name="option" value="option1"> Option 1<br> <input type="radio" name="option" value="option2"> Option 2 <!-- 复选框 --> <input type="checkbox" name="check" value="item1"> Item 1<br> <input type="checkbox" name="check" value="item2"> Item 2 </code></pre> <h3> 6.2 表单验证与数据处理 </h3> <h4> 6.2.1 前端验证的方法和重要性 </h4> <p> 前端验证是确保用户输入数据有效性的第一道防线。它可以在数据被发送到服务器之前捕获错误，从而提高用户体验和应用性能。前端验证通常包括简单的检查，如非空验证、输入长度限制、正则表达式匹配等。 </p> <p> 下面是一个使用JavaScript进行前端验证的简单示例： </p> <pre><code class="language-javascript">document.querySelector('form').addEventListener('submit', function(event) { var username = document.querySelector('input[name="username"]').value; if(username.trim() === "") { event.preventDefault(); // 阻止表单提交 alert("Please enter your name!"); } }); </code></pre> <h4> 6.2.2 表单数据的提交和处理技巧 </h4> <p> 在HTML表单中，提交数据通常涉及到JavaScript或AJAX请求，以便以更灵活的方式处理数据。使用AJAX可以在不重新加载页面的情况下提交数据，从而减少等待时间并提高效率。 </p> <p> 以下是一个使用AJAX提交表单数据的示例代码： </p> <pre><code class="language-javascript">document.querySelector('form').addEventListener('submit', function(event) { event.preventDefault(); var xhr = new XMLHttpRequest(); var url = document.querySelector('form').getAttribute('action'); var method = document.querySelector('form').getAttribute('method'); var formData = new FormData(this); xhr.open(method, url, true); xhr.send(formData); xhr.onload = function() { if (xhr.status >= 200 && xhr.status < 300) { // 处理成功响应 alert('Form data submitted successfully!'); } else { // 处理错误情况 alert('There was a problem submitting your form.'); } }; }); </code></pre> <p> 在上述代码中， <code> FormData </code> 对象用于自动收集表单中的数据，然后通过AJAX请求发送到服务器。这种方法不仅提高了用户体验，还提高了应用的响应速度和效率。 </p> <p> 本文还有配套的精品资源，点击获取 <img alt="menu-r.4af5f7ec.gif" src="http://img.e-com-net.com/image/info8/b382ea984dff45babbf94bb96ef7b607.gif" style="width:16px;margin-left:4px;vertical-align:text-bottom;cursor:text;" width="0" height="0"> </p> <p> 简介：HTML是网页制作的基础，用于构建和设计网页内容。本文介绍了如何使用HTML标签和结构创建一个具有酒馆主题的网页，包括设置页面标题、布局、菜单、互动表单及图片展示。通过学习HTML元素的使用，可以掌握创建具有吸引力的在线体验的技术。 </p> <p> <br> 本文还有配套的精品资源，点击获取 <br> <img alt="menu-r.4af5f7ec.gif" src="http://img.e-com-net.com/image/info8/b382ea984dff45babbf94bb96ef7b607.gif" style="width:16px;margin-left:4px;vertical-align:text-bottom;cursor:text;" width="0" height="0"> <br> </p> <p></p> </div> </div> </div> </div> </div> <!--PC和WAP自适应版--> <div id="SOHUCS" sid="1943444119258984448"></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基础教程)</h4> <div id="paradigm-article-related"> <div class="recommend-post mb30"> <ul class="widget-links"> <li><a href="/article/1950232782412247040.htm" title="日更006 终极训练营day3" target="_blank">日更006 终极训练营day3</a> <span class="text-muted">懒cici</span> <div>人生创业课（2）今天的主题：学习方法一：遇到有用的书，反复读，然后结合自身实际，列践行清单，不要再写读书笔记思考这本书与我有什么关系，我在哪些地方能用到，之后我该怎么用方法二：读完书没映像怎么办?训练你的大脑，方法：每读完一遍书，立马合上书，做一场分享，几分钟都行对自己的学习要求太低，要逼自己方法三：学习深度不够怎么办？找到细分领域的榜样，把他们的文章、书籍、产品都体验一遍，成为他们的超级用户，向</div> </li> <li><a href="/article/1950232781174927360.htm" title="15个小技巧，让我的Windows电脑更好用了！" target="_blank">15个小技巧，让我的Windows电脑更好用了！</a> <span class="text-muted">曹元_</span> <div>01.桌面及文档处理第一部分的技巧，主要是围绕桌面的一些基本操作，包括主题设置、常用文档文件快捷打开的多种方式等等。主题换色默认情况下，我们的Win界面可能就是白色的文档界面，天蓝色的图表背景，说不出哪里不好看，但是就是觉得不够高级。imageimage说到高级感，本能第一反应就会和暗色模式联想起来，如果我们将整个界面换成黑夜模式的话，它会是这样的。imageimage更改主题颜色及暗色模式，我们</div> </li> <li><a href="/article/1950228158863175680.htm" title="英伟达靠什么支撑起了4万亿？AI泡沫还能撑多久？" target="_blank">英伟达靠什么支撑起了4万亿？AI泡沫还能撑多久？</a> <span class="text-muted"></span> <div>英伟达市值突破4万亿美元，既是AI算力需求爆发的直接体现，也暗含市场对未来的狂热预期。其支撑逻辑与潜在风险并存，而AI泡沫的可持续性则取决于技术、商业与地缘政治的复杂博弈。⚙️一、英伟达4万亿市值的核心支撑因素技术垄断与生态壁垒硬件优势：英伟达GPU在AI训练市场占有率超87%，H100芯片的FP16算力达1979TFLOPS，领先竞品3-5倍。CUDA生态：400万开发者构建的软件护城河，成为A</div> </li> <li><a href="/article/1950226390070652928.htm" title="Flowable 高级扩展：自定义元素与性能优化实战" target="_blank">Flowable 高级扩展：自定义元素与性能优化实战</a> <span class="text-muted">练习时长两年半的程序员小胡</span> <a class="tag" taget="_blank" href="/search/Flowable/1.htm">Flowable</a><a class="tag" taget="_blank" href="/search/%E6%B5%81%E7%A8%8B%E5%BC%95%E6%93%8E%E5%AE%9E%E6%88%98%E6%8C%87%E5%8D%97/1.htm">流程引擎实战指南</a><a class="tag" taget="_blank" href="/search/%E6%B5%81%E7%A8%8B%E5%9B%BE/1.htm">流程图</a><a class="tag" taget="_blank" href="/search/flowable/1.htm">flowable</a><a class="tag" taget="_blank" href="/search/BPMN/1.htm">BPMN</a><a class="tag" taget="_blank" href="/search/%E6%B5%81%E7%A8%8B%E5%BC%95%E6%93%8E/1.htm">流程引擎</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>在前五篇文章中，我们从基础概念、流程设计、API实战、SpringBoot集成，到外部系统协同，逐步构建了Flowable的应用体系。但企业级复杂场景中，原生功能往往难以满足定制化需求——比如需要特殊的审批规则网关、与决策引擎联动实现动态路由，或是在高并发场景下优化流程引擎性能。本文将聚焦Flowable的高级扩展能力，详解如何自定义流程元素、集成规则引擎，并掌握大型系统中的性能调优策略。一、自定</div> </li> <li><a href="/article/1950220441549336576.htm" title="人物系列首篇｜总会有人陪你走一段路" target="_blank">人物系列首篇｜总会有人陪你走一段路</a> <span class="text-muted">诗小蛮5786400</span> <div>主题纲要：1.总会有人陪你走一段路2.不打扰也是一种幸福3.留在身边的，哪怕瞎逼逼一番也是珍贵一、总会有人陪你走一段路在综艺《向往的生活》，任嘉伦曾问过这样一个问题：“你们有没有过那样一种朋友：你们小时候关系很好，但因为你事业越来越好；他觉得你们之间的距离越来越远，然后他就自己疏远你的那种。”何炅说：我们要接受这是常态，我们每个人都有在乎的、喜欢的人，但我从来没有奢望，要把谁留在身边一辈子，因为这</div> </li> <li><a href="/article/1950218819616174080.htm" title="基于redis的Zset实现作者的轻量级排名" target="_blank">基于redis的Zset实现作者的轻量级排名</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/redis/1.htm">redis</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a><a class="tag" taget="_blank" href="/search/%E7%BC%93%E5%AD%98/1.htm">缓存</a> <div>基于redis的Zset实现轻量级作者排名系统在今天的技术架构中，Redis是一种广泛使用的内存数据存储系统，尤其在需要高效检索和排序的场景中表现优异。在本篇博客中，我们将深入探讨如何使用Redis的有序集合（ZSet）构建一个高效的笔记排行榜系统，并提供相关代码示例和详细的解析。1.功能背景与需求假设我们有一个笔记分享平台，用户可以发布各种笔记，系统需要根据用户发布的笔记数量来生成一个实时更新的</div> </li> <li><a href="/article/1950215036291051520.htm" title="北斗短报文兜底、5G-A增强：AORO P1100三防平板构建应急通信网络" target="_blank">北斗短报文兜底、5G-A增强：AORO P1100三防平板构建应急通信网络</a> <span class="text-muted"></span> <div>公网中断的灾区现场，泥石流阻断了最后一条光缆。一支救援队却在废墟间有序穿行，队长手中的三防平板正闪烁着北斗卫星信号，定位坐标与伤亡信息化作一行行短报文，穿透通信孤岛直达指挥中心。这是AOROP1100三防平板搭载的北斗短报文功能在应急救援中的真实场景，更代表了工业移动终端在极端环境下的能力跃迁。AOROP1100三防平板作为遨游通讯2025年推出的旗舰三防设备，AOROP1100三防平板的技术基底</div> </li> <li><a href="/article/1950213272120651776.htm" title="Redis + Caffeine 实现高效的两级缓存架构" target="_blank">Redis + Caffeine 实现高效的两级缓存架构</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/%E7%BC%93%E5%AD%98/1.htm">缓存</a><a class="tag" taget="_blank" href="/search/redis/1.htm">redis</a><a class="tag" taget="_blank" href="/search/%E6%9E%B6%E6%9E%84/1.htm">架构</a> <div>Redis+Caffeine实现高效的两级缓存架构引言在现代高并发系统中，缓存是提升系统性能的关键组件之一。传统的单一缓存方案往往难以同时满足高性能和高可用性的需求。本文将介绍如何结合Redis和Caffeine构建一个高效的两级缓存系统，并通过三个版本的演进展示如何逐步优化代码结构。项目源代码：github地址、gitee地址两级缓存架构概述两级缓存通常由本地缓存（如Caffeine）和分布式缓</div> </li> <li><a href="/article/1950208359722446848.htm" title="元宇宙中的视觉技术：虚拟化身与场景生成" target="_blank">元宇宙中的视觉技术：虚拟化身与场景生成</a> <span class="text-muted">xcLeigh</span> <a class="tag" taget="_blank" href="/search/%E8%AE%A1%E7%AE%97%E6%9C%BA%E8%A7%86%E8%A7%89CV/1.htm">计算机视觉CV</a><a class="tag" taget="_blank" href="/search/%E5%85%83%E5%AE%87%E5%AE%99/1.htm">元宇宙</a><a class="tag" taget="_blank" href="/search/%E8%99%9A%E6%8B%9F%E5%8C%96%E8%BA%AB/1.htm">虚拟化身</a><a class="tag" taget="_blank" href="/search/%E5%9C%BA%E6%99%AF%E7%94%9F%E6%88%90/1.htm">场景生成</a><a class="tag" taget="_blank" href="/search/AIGC/1.htm">AIGC</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E5%AD%97%E5%AD%AA%E7%94%9F/1.htm">数字孪生</a> <div>元宇宙中的视觉技术：虚拟化身与场景生成前言一、元宇宙与视觉技术的深度关联1.1元宇宙概念深度剖析1.2视觉技术：元宇宙的“灵魂之窗”二、虚拟化身：数字世界的“第二自我”2.1虚拟化身技术的深度解析2.1.1核心技术构成2.1.2技术实现原理与流程2.2虚拟化身的应用领域及案例展示2.2.1游戏娱乐领域2.2.2教育培训领域三、场景生成：构建元宇宙的虚拟天地3.1场景生成技术全景透视3.1.1关键技</div> </li> <li><a href="/article/1950206970766094336.htm" title="C++编程基础与面向对象概念解析" target="_blank">C++编程基础与面向对象概念解析</a> <span class="text-muted">侯昂</span> <a class="tag" taget="_blank" href="/search/%E9%9D%A2%E5%90%91%E5%AF%B9%E8%B1%A1%E7%BC%96%E7%A8%8B/1.htm">面向对象编程</a><a class="tag" taget="_blank" href="/search/C%2B%2B%E8%AF%AD%E6%B3%95/1.htm">C++语法</a><a class="tag" taget="_blank" href="/search/%E5%87%BD%E6%95%B0/1.htm">函数</a><a class="tag" taget="_blank" href="/search/%E7%B1%BB%E4%B8%8E%E5%AF%B9%E8%B1%A1/1.htm">类与对象</a><a class="tag" taget="_blank" href="/search/%E7%BB%A7%E6%89%BF%E4%B8%8E%E5%A4%9A%E6%80%81%E6%80%A7/1.htm">继承与多态性</a> <div>C++编程基础与面向对象概念解析背景简介C++是一种广泛使用的面向对象编程语言，它允许开发者创建高效、灵活且功能强大的程序。本文基于《C++Primer》一书的章节内容，深入解析C++的核心概念和面向对象编程原则，旨在帮助读者构建扎实的C++编程基础。面向对象编程的原则软件危机与进化介绍了软件危机的产生和软件进化的必要性，强调了面向对象编程（OOP）在应对这些问题中的优势。面向对象编程范式讨论了面</div> </li> <li><a href="/article/1950206309123026944.htm" title="语文教学反思 ——一单元测试" target="_blank">语文教学反思 ——一单元测试</a> <span class="text-muted">一抹_绿茶香</span> <div>我喜欢上语文课，现在最开心的时刻也就是课上那45分钟了。它可以让我和孩子们骑上骏马驰骋在知识的草原上，可以让我们乘着巨轮在书籍的海洋里任意航行……周三举行了一单元测试，今晚一单元的所有内容暂时告一段落。对于这单元我有如下思考：本单元的主题词是“读书”，几篇课文都是围绕着读书来编排的。里面有讲读书乐趣的，讲读书方法的，还有孩子们第一次接触的访谈录等。微笑班级从一年级下学期就开始阅读“闲书”，所以教学</div> </li> <li><a href="/article/1950204773441531904.htm" title="听覃杰007写作精进课第五天分享心得" target="_blank">听覃杰007写作精进课第五天分享心得</a> <span class="text-muted">曹端春</span> <div>早上听覃老大直播007写作精进课程第五天，获益良多。关于写作的黄金三法：多读，多写，多动，确实说到了写作的真谛。一，多读，扩大阅读面，精读相关经典作家的经典作品，逐步构建自己的知识体系；阅读方面推荐指读法，这是聪明人用的笨办法，读本离眼睛远些，可让视野更开阔些，能提高30％的速度；二，多写，象高手一样靠汗水写作，写不出来硬写，找准自己的定位，在一个行业内了解100个关键词，输出糸列文章，并且多分享</div> </li> <li><a href="/article/1950202936449626112.htm" title="Qwen3 大模型实战：使用 vLLM 部署与函数调用（Function Call）全攻略" target="_blank">Qwen3 大模型实战：使用 vLLM 部署与函数调用（Function Call）全攻略</a> <span class="text-muted">曦紫沐</span> <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/%E5%A4%A7%E6%A8%A1%E5%9E%8B%E9%83%A8%E7%BD%B2/1.htm">大模型部署</a><a class="tag" taget="_blank" href="/search/Qwen3/1.htm">Qwen3</a><a class="tag" taget="_blank" href="/search/vLLM/1.htm">vLLM</a><a class="tag" taget="_blank" href="/search/%E5%87%BD%E6%95%B0%E8%B0%83%E7%94%A8/1.htm">函数调用</a> <div>文章摘要本文将带你从零开始，深入掌握如何使用Qwen3-8B大语言模型，结合vLLM进行高性能部署，并通过函数调用（FunctionCall）实现模型与外部工具的智能联动。我们将详细讲解部署命令、调用方式、代码示例及实际应用场景，帮助你快速构建基于Qwen3的智能应用。一、Qwen3简介与部署环境准备Qwen3是通义千问系列的最新一代大语言模型，具备强大的自然语言理解和生成能力，尤其在函数调用、工</div> </li> <li><a href="/article/1950202869147824128.htm" title="链商拉不到人能赚钱么，谈谈我的看法" target="_blank">链商拉不到人能赚钱么，谈谈我的看法</a> <span class="text-muted">糖葫芦不甜</span> <div>链商作为一种新兴的商业形态，往往依赖于用户网络的扩展和交易量的增加来实现价值增长，但这并不意味着没有直接拉新就无法盈利。以下是我对这一问题的几点看法：招合作伙伴↓微信在文章底部。首先，链商能否赚钱，关键在于其是否能提供独特且有价值的产品或服务。如果链商平台能够构建出高效、透明、安全的价值交换体系，解决行业痛点，提升用户体验，那么即使没有大规模的拉新活动，也能通过现有用户的口碑传播和持续使用来产生稳</div> </li> <li><a href="/article/1950197387460931584.htm" title="基于DeepSeek的下一代大型游戏开发革命：架构、核心技术与项目管理实践" target="_blank">基于DeepSeek的下一代大型游戏开发革命：架构、核心技术与项目管理实践</a> <span class="text-muted">Liudef06小白</span> <a class="tag" taget="_blank" href="/search/%E7%89%B9%E6%AE%8A%E4%B8%93%E6%A0%8F/1.htm">特殊专栏</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/AIGC/1.htm">AIGC</a><a class="tag" taget="_blank" href="/search/%E6%9E%B6%E6%9E%84/1.htm">架构</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/deepseek/1.htm">deepseek</a> <div>基于DeepSeek的下一代大型游戏开发革命：架构、核心技术与项目管理实践DeepSeek大模型正重塑游戏开发范式，本文将深入解析如何利用这一革命性技术构建下一代大型游戏，涵盖从架构设计到项目管理的全流程实践。目录DeepSeek游戏引擎核心架构1.1神经符号系统融合架构1.2动态世界生成引擎智能NPC与剧情系统2.1角色人格建模技术2.2动态叙事生成算法大型项目管理体系3.1敏捷-AI混合开发流</div> </li> <li><a href="/article/1950193733681082368.htm" title="基于Python的AI健康助手：开发与部署全攻略" target="_blank">基于Python的AI健康助手：开发与部署全攻略</a> <span class="text-muted">AI算力网络与通信</span> <a class="tag" taget="_blank" href="/search/AI%E7%AE%97%E5%8A%9B%E7%BD%91%E7%BB%9C%E4%B8%8E%E9%80%9A%E4%BF%A1%E5%8E%9F%E7%90%86/1.htm">AI算力网络与通信原理</a><a class="tag" taget="_blank" href="/search/AI%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD%E5%A4%A7%E6%95%B0%E6%8D%AE%E6%9E%B6%E6%9E%84/1.htm">AI人工智能大数据架构</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</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%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/ai/1.htm">ai</a> <div>基于Python的AI健康助手：开发与部署全攻略关键词：Python、AI健康助手、机器学习、自然语言处理、Flask、部署、健康管理摘要：本文将详细介绍如何使用Python开发一个AI健康助手，从需求分析、技术选型到核心功能实现，再到最终部署上线的完整过程。我们将使用自然语言处理技术理解用户健康咨询，通过机器学习模型提供个性化建议，并展示如何用Flask框架构建Web应用接口。文章包含大量实际代</div> </li> <li><a href="/article/1950191587556388864.htm" title="C#中的设计模式：构建更加优雅的代码" target="_blank">C#中的设计模式：构建更加优雅的代码</a> <span class="text-muted">Envyᥫᩣᩚ</span> <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>C#在面向对象编程（OOP）方面的强大支持，我们可以探讨“C#中的设计模式”。这不仅有助于理解如何更好地组织代码，还能提高代码的可维护性和可扩展性。引言设计模式是软件工程中经过实践验证的解决方案模板，它们提供了一种标准化的方法来解决常见的开发问题。对于使用C#进行开发的程序员来说，理解和应用这些模式可以帮助创建结构良好、易于维护和扩展的应用程序。本文将介绍几种常用的设计模式，并展示如何用C#实现它</div> </li> <li><a href="/article/1950190830606151680.htm" title="【大模型微调实战】4. P-Tuning爆款文案生成：让模型学会小红书“爽感”写作，转化率提升300%" target="_blank">【大模型微调实战】4. P-Tuning爆款文案生成：让模型学会小红书“爽感”写作，转化率提升300%</a> <span class="text-muted">AI_DL_CODE</span> <a class="tag" taget="_blank" href="/search/%E5%A4%A7%E6%A8%A1%E5%9E%8B%E5%BE%AE%E8%B0%83/1.htm">大模型微调</a><a class="tag" taget="_blank" href="/search/P-Tuning/1.htm">P-Tuning</a><a class="tag" taget="_blank" href="/search/%E5%B0%8F%E7%BA%A2%E4%B9%A6%E6%96%87%E6%A1%88/1.htm">小红书文案</a><a class="tag" taget="_blank" href="/search/%E7%88%86%E6%AC%BE%E7%94%9F%E6%88%90/1.htm">爆款生成</a><a class="tag" taget="_blank" href="/search/%E6%83%85%E7%BB%AA%E5%BC%BA%E5%8C%96/1.htm">情绪强化</a><a class="tag" taget="_blank" href="/search/%E8%87%AA%E7%84%B6%E8%AF%AD%E8%A8%80%E7%94%9F%E6%88%90/1.htm">自然语言生成</a><a class="tag" taget="_blank" href="/search/%E6%8F%90%E7%A4%BA%E5%B7%A5%E7%A8%8B/1.htm">提示工程</a> <div>摘要：在内容营销竞争白热化的当下，普通文案已难以突破流量壁垒。本文聚焦P-Tuning技术在小红书爆款文案生成中的落地应用，通过参数化提示向量优化，将抽象的“爽感”写作转化为可量化、可训练的技术指标。文中提出“六步成文法”，从情绪化数据集构建到爆款元素复刻，完整拆解如何用RTX3060级显卡实现0.1%参数量微调，使文案点击率从2.1%提升至8.7%，爆文率提高5倍，单条文案带货超8万元。核心创新</div> </li> <li><a href="/article/1950190199627640832.htm" title="selenium 特殊场景处理" target="_blank">selenium 特殊场景处理</a> <span class="text-muted"></span> <div>文章目录前言一、windows的弹窗二、内嵌网页frame三、页签切换四、截图五、弹窗六、JS执行总结前言selenium处理web操作师，有很多特殊的情况需要处理，例如弹窗、内嵌网页，页签切换，js执行等，下面介绍一些可能会遇到的特殊场景一、windows的弹窗importwin32com.client'''创建了一个WScript.ShellCOM(ComponentObjectModel)对</div> </li> <li><a href="/article/1950188624481939456.htm" title="【剽悍读书营成长记录】十天，稍纵即逝" target="_blank">【剽悍读书营成长记录】十天，稍纵即逝</a> <span class="text-muted">慢慢存钱</span> <div>又一个十天过去了，又一个主题营结束了。回顾这十天的时间，如过眼云烟，稍纵即逝。1.买书得知这次主题营要读的书必须是纸质版，我就有点慌神儿了。记得上次去书店，还是学生时代，已经多少年没去过书店了。即便一直没去过，还想着这次终于有机会再去书店逛逛了。第二天，带我妈去医院看望住院的小舅妈，本打算抽出些时间，去书店逛一圈。但计划没有变化快，也因为这个医院附近没有书店，我要么去知道的新华书店，要么就得再附近</div> </li> <li><a href="/article/1950188184285540352.htm" title="Mac OSX 下的mysql数据库文件存放位置" target="_blank">Mac OSX 下的mysql数据库文件存放位置</a> <span class="text-muted">Bruuuces</span> <a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a><a class="tag" taget="_blank" href="/search/mac/1.htm">mac</a><a class="tag" taget="_blank" href="/search/osx/1.htm">osx</a><a class="tag" taget="_blank" href="/search/%E4%BD%8D%E7%BD%AE/1.htm">位置</a><a class="tag" taget="_blank" href="/search/%E5%AD%98%E6%94%BE/1.htm">存放</a> <div>之前我的mysql的系统数据库里的表被我玩坏了，万般无奈之下只得删除所有mysql的东西重新构建数据库。按照网上搜到的内容删除后重装发现数据库没有什么变化。于是自己在每个可能存放数据库文件的目录查找，最终确认目录位置如下:使用HomeBrew安装为/usr/local/var/mysql使用官方下载的dmg镜像安装为/usr/local/mysql删除这个目录再重新安装mysql就会重新生成系统数</div> </li> <li><a href="/article/1950185315146723328.htm" title="《数字时代的学与教》第三模块共读心得" target="_blank">《数字时代的学与教》第三模块共读心得</a> <span class="text-muted">恭昌</span> <div>第三模块的主题是教法学法，主要用十一讲来阐述，分别是：同侪教学法、创造学习的新状态、讨论对话还是合作、解锁“拼图法”、把握合作学习五要素、TBL团队合作学习法、游戏式小组合作学习法、差异化教学法、从学科课堂开始的“创客教育”、探究式学习法及搭建“教学脚手架”。难度适中，同伴互助，学到知识，成就感强。教师要创造学生学习的新状态，让学生养成矫正性学习的新状态，即认识错误到自我改正错误，形成新的正确认识</div> </li> <li><a href="/article/1950181127176122368.htm" title="C++中std::variant的使用详解和实战代码示例" target="_blank">C++中std::variant的使用详解和实战代码示例</a> <span class="text-muted">点云SLAM</span> <a class="tag" taget="_blank" href="/search/C%2B%2B/1.htm">C++</a><a class="tag" taget="_blank" href="/search/c%2B%2B/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><a class="tag" taget="_blank" href="/search/variant/1.htm">variant</a><a class="tag" taget="_blank" href="/search/C%2B%2B%E6%B3%9B%E5%9E%8B%E7%BC%96%E7%A8%8B/1.htm">C++泛型编程</a><a class="tag" taget="_blank" href="/search/%E8%81%94%E5%90%88%E4%BD%93/1.htm">联合体</a><a class="tag" taget="_blank" href="/search/C%2B%2B/1.htm">C++</a><a class="tag" taget="_blank" href="/search/%E7%B1%BB%E5%9E%8B%E6%93%A6%E9%99%A4%E6%9C%BA%E5%88%B6/1.htm">类型擦除机制</a><a class="tag" taget="_blank" href="/search/C%2B%2B17/1.htm">C++17</a> <div>std::variant是C++17引入的一个类型安全的联合体（type-safeunion），它可以在多个类型之间存储一个值，并在编译时进行类型检查。它是现代C++类型擦除与泛型编程的核心工具之一，适用于构建可变类型结构、消息传递系统、状态机等。一、基本概念#includestd::variantv;类似于联合体union，但类型安全。std::variant只能存储其中一个类型的值。默认构造时</div> </li> <li><a href="/article/1950179109170638848.htm" title="SVG 在线编辑器" target="_blank">SVG 在线编辑器</a> <span class="text-muted">lly202406</span> <a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>SVG在线编辑器引言随着互联网技术的发展，矢量图形在网页设计和数据可视化中扮演着越来越重要的角色。SVG（可缩放矢量图形）因其文件小、无限缩放不模糊的特性，成为了网页设计中常用的图形格式。SVG在线编辑器的出现，为设计师和开发者提供了极大的便利，使得图形的创建和修改变得更加高效。本文将详细介绍SVG在线编辑器的功能、应用场景以及发展趋势。SVG在线编辑器概述SVG在线编辑器是一种基于网页的图形编辑</div> </li> <li><a href="/article/1950178477592342528.htm" title="前端数据库：IndexedDB从基础到高级使用指南" target="_blank">前端数据库：IndexedDB从基础到高级使用指南</a> <span class="text-muted"></span> <div>文章目录前端数据库：IndexedDB从基础到高级使用指南引言一、IndexedDB概述1.1什么是IndexedDB1.2与其他存储方案的比较二、基础使用2.1打开/创建数据库2.2基本CRUD操作添加数据读取数据更新数据删除数据三、高级特性3.1复杂查询与游标3.2事务高级用法3.3性能优化技巧四、实战案例：构建离线优先的待办事项应用4.1数据库设计4.2同步策略实现五、常见问题与解决方案5.</div> </li> <li><a href="/article/1950177414323695616.htm" title="漫画人家隐私政策" target="_blank">漫画人家隐私政策</a> <span class="text-muted">呵呵一笑_e8f9</span> <div>漫画人家APP（以下简称漫画人家）非常重视对您的个人隐私保护，有时候我们需要某些信息才能为您提供您请求的服务，本隐私声明解释了这些情况下的数据收集和使用情况。本隐私声明适用于漫画人家的所有相关服务，随着漫画人家服务范围的扩大，隐私声明的内容可由漫画人家随时更新，且毋须另行通知。更新后的隐私声明一旦在网页上公布即有效代替原来的隐私声明。我们收集哪些信息通常，您能在匿名的状态下访问漫画人家并获取信息。</div> </li> <li><a href="/article/1950175200347746304.htm" title="深入剖析 boost::unique_lock＜boost::mutex＞" target="_blank">深入剖析 boost::unique_lock＜boost::mutex＞</a> <span class="text-muted">程序员乐逍遥</span> <a class="tag" taget="_blank" href="/search/C%2B%2B/1.htm">C++</a><a class="tag" taget="_blank" href="/search/Boost%E5%BA%93/1.htm">Boost库</a><a class="tag" taget="_blank" href="/search/C%2FC%2B%2B%E5%A4%9A%E7%BA%BF%E7%A8%8B%E7%BC%96%E7%A8%8B%E4%B8%93%E9%A2%98/1.htm">C/C++多线程编程专题</a><a class="tag" taget="_blank" href="/search/C%2B%2B/1.htm">C++</a><a class="tag" taget="_blank" href="/search/boost/1.htm">boost</a><a class="tag" taget="_blank" href="/search/%E7%BA%BF%E7%A8%8B/1.htm">线程</a><a class="tag" taget="_blank" href="/search/%E9%94%81/1.htm">锁</a> <div>在高并发的C++程序中，线程安全是永恒的主题。而boost::unique_lock作为Boost.Thread库中的核心组件，为开发者提供了强大、灵活且异常安全的互斥量管理机制。它不仅是RAII（ResourceAcquisitionIsInitialization）设计模式的典范，更是实现复杂线程同步逻辑的基石。一、从lock_guard的说起在介绍unique_lock之前，我们先回顾其“简</div> </li> <li><a href="/article/1950174441992417280.htm" title="使用Python和Gradio构建实时数据可视化工具" target="_blank">使用Python和Gradio构建实时数据可视化工具</a> <span class="text-muted">PythonAI编程架构实战家</span> <a class="tag" taget="_blank" href="/search/%E4%BF%A1%E6%81%AF%E5%8F%AF%E8%A7%86%E5%8C%96/1.htm">信息可视化</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</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/ai/1.htm">ai</a> <div>使用Python和Gradio构建实时数据可视化工具关键词：Python、Gradio、数据可视化、实时数据、Web应用、交互式界面、数据科学摘要：本文将详细介绍如何使用Python和Gradio框架构建一个实时数据可视化工具。我们将从基础概念开始，逐步深入到核心算法实现，包括数据处理、可视化技术以及Gradio的交互式界面设计。通过实际项目案例，读者将学习如何创建一个功能完整、响应迅速的实时数据</div> </li> <li><a href="/article/1950174315609649152.htm" title="Python Gradio：实现交互式图像编辑" target="_blank">Python Gradio：实现交互式图像编辑</a> <span class="text-muted">PythonAI编程架构实战家</span> <a class="tag" taget="_blank" href="/search/Python%E7%BC%96%E7%A8%8B%E4%B9%8B%E9%81%93/1.htm">Python编程之道</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</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/ai/1.htm">ai</a> <div>PythonGradio：实现交互式图像编辑关键词：Python,Gradio,交互式图像编辑,计算机视觉,深度学习,图像处理,Web应用摘要：本文将深入探讨如何使用Python的Gradio库构建交互式图像编辑应用。我们将从基础概念开始，逐步介绍Gradio的核心功能，并通过实际代码示例展示如何实现各种图像处理功能。文章将涵盖图像滤镜应用、对象检测、风格迁移等高级功能，同时提供完整的项目实战案例</div> </li> <li><a href="/article/1950174189394653184.htm" title="pdf文件的属性值怎么修改？修改PDF内部的属性创建时间和修改时间" target="_blank">pdf文件的属性值怎么修改？修改PDF内部的属性创建时间和修改时间</a> <span class="text-muted">这辈子谁会真的心疼你</span> <a class="tag" taget="_blank" href="/search/pdf/1.htm">pdf</a><a class="tag" taget="_blank" href="/search/%E4%BF%AE%E6%94%B9PDF%E5%B1%9E%E6%80%A7/1.htm">修改PDF属性</a><a class="tag" taget="_blank" href="/search/%E6%96%87%E4%BB%B6%E5%B1%9E%E6%80%A7%E4%BF%AE%E6%94%B9/1.htm">文件属性修改</a> <div>部分PDF生成时会自动嵌入一些隐藏属性，比如创建软件版本、电脑用户名、修改记录等，这些信息可能涉及隐私或商业机密。例如，用个人电脑编辑的公司文件，属性中若包含个人用户名，可能泄露信息归属；通过修改或清除这些属性，可以避免不必要的信息暴露，降低隐私泄露风险。pdf文件的属性值怎么修改？要修改PDF文件的属性值（如标题、作者、主题等元数据），可以使用不同的工具或编程语言。以下是几种常见的方法：方法一：</div> </li> <li><a href="/article/60.htm" title="Dom" target="_blank">Dom</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/html/1.htm">html</a> <div><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml&q</div> </li> <li><a href="/article/187.htm" title="【Spark九十六】RDD API之combineByKey" target="_blank">【Spark九十六】RDD API之combineByKey</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/spark/1.htm">spark</a> <div>1. combineByKey函数的运行机制   RDD提供了很多针对元素类型为(K,V)的API，这些API封装在PairRDDFunctions类中，通过Scala隐式转换使用。这些API实现上是借助于combineByKey实现的。combineByKey函数本身也是RDD开放给Spark开发人员使用的API之一   首先看一下combineByKey的方法说明：</div> </li> <li><a href="/article/314.htm" title="msyql设置密码报错：ERROR 1372 (HY000): 解决方法详解" target="_blank">msyql设置密码报错：ERROR 1372 (HY000): 解决方法详解</a> <span class="text-muted">daizj</span> <a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a><a class="tag" taget="_blank" href="/search/%E8%AE%BE%E7%BD%AE%E5%AF%86%E7%A0%81/1.htm">设置密码</a> <div>MySql给用户设置权限同时指定访问密码时，会提示如下错误： ERROR 1372 (HY000): Password hash should be a 41-digit hexadecimal number；   问题原因：你输入的密码是明文。不允许这么输入。   解决办法：用select password('你想输入的密码');查询出你的密码对应的字符串， 然后</div> </li> <li><a href="/article/441.htm" title="路漫漫其修远兮 吾将上下而求索" target="_blank">路漫漫其修远兮 吾将上下而求索</a> <span class="text-muted">周凡杨</span> <a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0+%E6%80%9D%E7%B4%A2/1.htm">学习 思索</a> <div>王国维在他的《人间词话》中曾经概括了为学的三种境界古今之成大事业、大学问者，罔不经过三种之境界。“昨夜西风凋碧树。独上高楼，望尽天涯路。”此第一境界也。“衣带渐宽终不悔，为伊消得人憔悴。”此第二境界也。“众里寻他千百度，蓦然回首，那人却在灯火阑珊处。”此第三境界也。学习技术，这也是你必须经历的三种境界。第一层境界是说，学习的路是漫漫的，你必须做好充分的思想准备，如果半途而废还不如不要开始。这里，注</div> </li> <li><a href="/article/568.htm" title="Hadoop(二)对话单的操作" target="_blank">Hadoop(二)对话单的操作</a> <span class="text-muted">朱辉辉33</span> <a class="tag" taget="_blank" href="/search/hadoop/1.htm">hadoop</a> <div>Debug： 1、 A = LOAD '/user/hue/task.txt' USING PigStorage(' ') AS (col1,col2,col3); DUMP A; //输出结果前几行示例： (>ggsnPDPRecord(21),,) (-->recordType(0),,) (-->networkInitiation(1),,) </div> </li> <li><a href="/article/695.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/%E6%8A%A5%E8%A1%A8%E5%B7%A5%E5%85%B7/1.htm">报表工具</a><a class="tag" taget="_blank" href="/search/web%E5%BC%80%E5%8F%91/1.htm">web开发</a> <div>web报表工具FineReport常用函数的用法总结（日期和时间函数）   说明：凡函数中以日期作为参数因子的，其中日期的形式都必须是yy/mm/dd。而且必须用英文环境下双引号(" ")引用。   DATE DATE(year,month,day):返回一个表示某一特定日期的系列数。 Year:代表年，可为一到四位数。 Month:代表月份。</div> </li> <li><a href="/article/822.htm" title="c++ 宏定义中的##操作符" target="_blank">c++ 宏定义中的##操作符</a> <span class="text-muted">墙头上一根草</span> <a class="tag" taget="_blank" href="/search/C%2B%2B/1.htm">C++</a> <div>#与##在宏定义中的--宏展开 #include <stdio.h> #define f(a,b) a##b #define g(a)   #a #define h(a) g(a) int main() {       &nbs</div> </li> <li><a href="/article/949.htm" title="分析Spring源代码之，DI的实现" target="_blank">分析Spring源代码之，DI的实现</a> <span class="text-muted">aijuans</span> <a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/DI/1.htm">DI</a><a class="tag" taget="_blank" href="/search/%E7%8E%B0/1.htm">现</a><a class="tag" taget="_blank" href="/search/%E6%BA%90%E4%BB%A3%E7%A0%81/1.htm">源代码</a> <div>(转) 分析Spring源代码之，DI的实现 2012/1/3 by tony                 接着上次的讲，以下这个sample [java]  view plain copy print </div> </li> <li><a href="/article/1076.htm" title="for循环的进化" target="_blank">for循环的进化</a> <span class="text-muted">alxw4616</span> <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a> <div>// for循环的进化 // 菜鸟 for (var i = 0; i < Things.length ; i++) { // Things[i] } // 老鸟 for (var i = 0, len = Things.length; i < len; i++) { // Things[i] } // 大师 for (var i = Things.le</div> </li> <li><a href="/article/1203.htm" title="网络编程Socket和ServerSocket简单的使用" target="_blank">网络编程Socket和ServerSocket简单的使用</a> <span class="text-muted">百合不是茶</span> <a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C%E7%BC%96%E7%A8%8B%E5%9F%BA%E7%A1%80/1.htm">网络编程基础</a><a class="tag" taget="_blank" href="/search/IP%E5%9C%B0%E5%9D%80%E7%AB%AF%E5%8F%A3/1.htm">IP地址端口</a> <div>  网络编程;TCP/IP协议   网络:实现计算机之间的信息共享,数据资源的交换   协议:数据交换需要遵守的一种协议,按照约定的数据格式等写出去   端口:用于计算机之间的通信      每运行一个程序，系统会分配一个编号给该程序，作为和外界交换数据的唯一标识 0~65535   查看被使用的</div> </li> <li><a href="/article/1330.htm" title="JDK1.5 生产消费者" target="_blank">JDK1.5 生产消费者</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/%E7%94%9F%E4%BA%A7%E6%B6%88%E8%B4%B9%E8%80%85/1.htm">生产消费者</a><a class="tag" taget="_blank" href="/search/java%E5%A4%9A%E7%BA%BF%E7%A8%8B/1.htm">java多线程</a> <div>ArrayBlockingQueue：        一个由数组支持的有界阻塞队列。此队列按 FIFO（先进先出）原则对元素进行排序。队列的头部 是在队列中存在时间最长的元素。队列的尾部 是在队列中存在时间最短的元素。新元素插入到队列的尾部，队列检索操作则是从队列头部开始获得元素。 ArrayBlockingQueue的常用方法： </div> </li> <li><a href="/article/1457.htm" title="JAVA版身份证获取性别、出生日期及年龄" target="_blank">JAVA版身份证获取性别、出生日期及年龄</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/%E6%80%A7%E5%88%AB/1.htm">性别</a><a class="tag" taget="_blank" href="/search/%E5%87%BA%E7%94%9F%E6%97%A5%E6%9C%9F/1.htm">出生日期</a><a class="tag" taget="_blank" href="/search/%E5%B9%B4%E9%BE%84/1.htm">年龄</a> <div>        工作中需要根据身份证获取性别、出生日期及年龄，且要还要支持15位长度的身份证号码，网上搜索了一下，经过测试好像多少存在点问题，干脆自已写一个。 CertificateNo.java package com.bijian.study; import java.util.Calendar; import </div> </li> <li><a href="/article/1584.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>首先，枚举类型的定义不能带有类型参数，所以，不能把枚举类型定义为范型枚举类，例如下面的枚举类定义是有编译错的   public enum EnumGenerics<T> { //编译错，提示枚举不能带有范型参数 OK, ERROR; public <T> T get(T type) { return null; </div> </li> <li><a href="/article/1711.htm" title="【Nginx五】Nginx常用日志格式含义" target="_blank">【Nginx五】Nginx常用日志格式含义</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/nginx/1.htm">nginx</a> <div>1. log_format 1.1 log_format指令用于指定日志的格式，格式：   log_format name(格式名称) type(格式样式)   1.2 如下是一个常用的Nginx日志格式：   log_format main '[$time_local]|$request_time|$status|$body_bytes</div> </li> <li><a href="/article/1838.htm" title="Lua 语言 15 分钟快速入门" target="_blank">Lua 语言 15 分钟快速入门</a> <span class="text-muted">ronin47</span> <a class="tag" taget="_blank" href="/search/lua+%E5%9F%BA%E7%A1%80/1.htm">lua 基础</a> <div>- - 单行注释 - - [[      [多行注释] - - ]]   - - - - - - - - - - - 1. 变量 & 控制流 - - - - - - - - - - num = 23 - - 数字都是双精度 str = 'aspythonstring' </div> </li> <li><a href="/article/1965.htm" title="java-35.求一个矩阵中最大的二维矩阵 ( 元素和最大 )" target="_blank">java-35.求一个矩阵中最大的二维矩阵 ( 元素和最大 )</a> <span class="text-muted">bylijinnan</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>the idea is from: http://blog.csdn.net/zhanxinhang/article/details/6731134 public class MaxSubMatrix { /**see http://blog.csdn.net/zhanxinhang/article/details/6731134 * Q35 求一个矩阵中最大的二维</div> </li> <li><a href="/article/2092.htm" title="mongoDB文档型数据库特点" target="_blank">mongoDB文档型数据库特点</a> <span class="text-muted">开窍的石头</span> <a class="tag" taget="_blank" href="/search/mongoDB%E6%96%87%E6%A1%A3%E5%9E%8B%E6%95%B0%E6%8D%AE%E5%BA%93%E7%89%B9%E7%82%B9/1.htm">mongoDB文档型数据库特点</a> <div>MongoDD: 文档型数据库存储的是Bson文档-->json的二进制 特点：内部是执行引擎是js解释器，把文档转成Bson结构，在查询时转换成js对象。 mongoDB传统型数据库对比    传统类型数据库：结构化数据，定好了表结构后每一个内容符合表结构的。也就是说每一行每一列的数据都是一样的    文档型数据库：不用定好数据结构，</div> </li> <li><a href="/article/2219.htm" title="[毕业季节]欢迎广大毕业生加入JAVA程序员的行列" target="_blank">[毕业季节]欢迎广大毕业生加入JAVA程序员的行列</a> <span class="text-muted">comsci</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>     一年一度的毕业季来临了。。。。。。。。      正在投简历的学弟学妹们。。。如果觉得学校推荐的单位和公司不适合自己的兴趣和专业，可以考虑来我们软件行业，做一名职业程序员。。。      软件行业的开发工具中，对初学者最友好的就是JAVA语言了，网络上不仅仅有大量的</div> </li> <li><a href="/article/2346.htm" title="PHP操作Excel – PHPExcel 基本用法详解" target="_blank">PHP操作Excel – PHPExcel 基本用法详解</a> <span class="text-muted">cuiyadll</span> <a class="tag" taget="_blank" href="/search/PHP/1.htm">PHP</a><a class="tag" taget="_blank" href="/search/Excel/1.htm">Excel</a> <div>导出excel属性设置//Include classrequire_once('Classes/PHPExcel.php');require_once('Classes/PHPExcel/Writer/Excel2007.php');$objPHPExcel = new PHPExcel();//Set properties 设置文件属性$objPHPExcel->getProperties</div> </li> <li><a href="/article/2473.htm" title="IBM Webshpere MQ Client User Issue (MCAUSER)" target="_blank">IBM Webshpere MQ Client User Issue (MCAUSER)</a> <span class="text-muted">darrenzhu</span> <a class="tag" taget="_blank" href="/search/IBM/1.htm">IBM</a><a class="tag" taget="_blank" href="/search/jms/1.htm">jms</a><a class="tag" taget="_blank" href="/search/user/1.htm">user</a><a class="tag" taget="_blank" href="/search/MQ/1.htm">MQ</a><a class="tag" taget="_blank" href="/search/MCAUSER/1.htm">MCAUSER</a> <div>IBM MQ JMS Client去连接远端MQ Server的时候，需要提供User和Password吗？ 答案是根据情况而定，取决于所定义的Channel里面的属性Message channel agent user identifier (MCAUSER)的设置。 http://stackoverflow.com/questions/20209429/how-mca-user-i</div> </li> <li><a href="/article/2600.htm" title="网线的接法" target="_blank">网线的接法</a> <span class="text-muted">dcj3sjt126com</span> <div>一、PC连HUB (直连线)A端：（标准568B）：白橙，橙，白绿，蓝，白蓝，绿，白棕，棕。 B端：（标准568B）：白橙，橙，白绿，蓝，白蓝，绿，白棕，棕。 二、PC连PC （交叉线）A端：(568A)： 白绿，绿，白橙，蓝，白蓝，橙，白棕，棕； B端：（标准568B）：白橙，橙，白绿，蓝，白蓝，绿，白棕，棕。 三、HUB连HUB&nb</div> </li> <li><a href="/article/2727.htm" title="Vimium插件让键盘党像操作Vim一样操作Chrome" target="_blank">Vimium插件让键盘党像操作Vim一样操作Chrome</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/chrome/1.htm">chrome</a><a class="tag" taget="_blank" href="/search/vim/1.htm">vim</a> <div>什么是键盘党？ 键盘党是指尽可能将所有电脑操作用键盘来完成，而不去动鼠标的人。鼠标应该说是新手们的最爱，很直观，指哪点哪，很听话！不过常常使用电脑的人，如果一直使用鼠标的话，手会发酸，因为操作鼠标的时候，手臂不是在一个自然的状态，臂肌会处于绷紧状态。而使用键盘则双手是放松状态，只有手指在动。而且尽量少的从鼠标移动到键盘来回操作，也省不少事。 在chrome里安装 vimium 插件 </div> </li> <li><a href="/article/2854.htm" title="MongoDB查询（2）——数组查询[六]" target="_blank">MongoDB查询（2）——数组查询[六]</a> <span class="text-muted">eksliang</span> <a class="tag" taget="_blank" href="/search/mongodb/1.htm">mongodb</a><a class="tag" taget="_blank" href="/search/MongoDB%E6%9F%A5%E8%AF%A2%E6%95%B0%E7%BB%84/1.htm">MongoDB查询数组</a> <div>MongoDB查询数组 转载请出自出处：http://eksliang.iteye.com/blog/2177292 一、概述  MongoDB查询数组与查询标量值是一样的，例如，有一个水果列表，如下所示： > db.food.find() { "_id" : "001", "fruits" : [ "苹</div> </li> <li><a href="/article/2981.htm" title="cordova读写文件（1）" target="_blank">cordova读写文件（1）</a> <span class="text-muted">gundumw100</span> <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/Cordova/1.htm">Cordova</a> <div>使用cordova可以很方便的在手机sdcard中读写文件。 首先需要安装cordova插件：file 命令为： cordova plugin add org.apache.cordova.file 然后就可以读写文件了，这里我先是写入一个文件，具体的JS代码为： var datas=null;//datas need write var directory=&</div> </li> <li><a href="/article/3108.htm" title="HTML5 FormData 进行文件jquery ajax 上传 到又拍云" target="_blank">HTML5 FormData 进行文件jquery ajax 上传 到又拍云</a> <span class="text-muted">ileson</span> <a class="tag" taget="_blank" href="/search/jquery/1.htm">jquery</a><a class="tag" taget="_blank" href="/search/Ajax/1.htm">Ajax</a><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a><a class="tag" taget="_blank" href="/search/FormData/1.htm">FormData</a> <div>html5 新东西：FormData  可以提交二进制数据。 页面test.html <!DOCTYPE> <html> <head> <title> formdata file jquery ajax upload</title> </head> <body> <</div> </li> <li><a href="/article/3235.htm" title="swift appearanceWhenContainedIn:(version1.2 xcode6.4)" target="_blank">swift appearanceWhenContainedIn:(version1.2 xcode6.4)</a> <span class="text-muted">啸笑天</span> <a class="tag" taget="_blank" href="/search/version/1.htm">version</a> <div>  swift1.2中没有oc中对应的方法： + (instancetype)appearanceWhenContainedIn:(Class <UIAppearanceContainer>)ContainerClass, ... NS_REQUIRES_NIL_TERMINATION;  解决方法： 在swift项目中新建oc类如下： #import &</div> </li> <li><a href="/article/3362.htm" title="java实现SMTP邮件服务器" target="_blank">java实现SMTP邮件服务器</a> <span class="text-muted">macroli</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A8%8B/1.htm">编程</a> <div>电子邮件传递可以由多种协议来实现。目前，在Internet 网上最流行的三种电子邮件协议是SMTP、POP3 和 IMAP，下面分别简单介绍。 　　◆ SMTP 协议 　　简单邮件传输协议(Simple Mail Transfer Protocol,SMTP)是一个运行在TCP/IP之上的协议，用它发送和接收电子邮件。SMTP 服务器在默认端口25上监听。SMTP客户使用一组简单的、基于文本的</div> </li> <li><a href="/article/3489.htm" title="mongodb group by having where 查询sql" target="_blank">mongodb group by having where 查询sql</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/mongo/1.htm">mongo</a><a class="tag" taget="_blank" href="/search/%E7%BA%B5%E8%A7%82%E5%8D%83%E8%B1%A1/1.htm">纵观千象</a> <div>SELECT cust_id, SUM(price) as total FROM orders WHERE status = 'A' GROUP BY cust_id HAVING total > 250 db.orders.aggregate( [ { $match: { status: 'A' } }, { $group: { </div> </li> <li><a href="/article/3616.htm" title="Struts2 Pojo（六）" target="_blank">Struts2 Pojo（六）</a> <span class="text-muted">Luob.</span> <a class="tag" taget="_blank" href="/search/POJO/1.htm">POJO</a><a class="tag" taget="_blank" href="/search/strust2/1.htm">strust2</a> <div>注意：附件中有完整案例 1.采用POJO对象的方法进行赋值和传值 2.web配置 <?xml version="1.0" encoding="UTF-8"?> <web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee&q</div> </li> <li><a href="/article/3743.htm" title="struts2步骤" target="_blank">struts2步骤</a> <span class="text-muted">wuai</span> <a class="tag" taget="_blank" href="/search/struts/1.htm">struts</a> <div>1、添加jar包 2、在web.xml中配置过滤器 <filter>        <filter-name>struts2</filter-name>        <filter-class>org.apache.st</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>