熬夜超级玩家

【一文学会 HTML5】

HTML概述
- 基本概念
- HTML 发展历程
- HTML 基本结构
网页基本标签
- 标题标签（`
  ` - `
  `）
- 段落标签（`
  `）
- 换行标签（`
  `）
- 水平线标签（`
  `）
- 注释（``）
- 特殊符号
图像标签
- 基本语法
- 主要属性
- 图像的对齐和样式
- 响应式图像
链接标签
- 基本语法
- 重要属性
- - `href` 属性
  - `target` 属性
  - `title` 属性
  - `rel` 属性
  - `download` 属性
- 链接样式
- - 示例代码
- 特殊链接形式
- - 图像链接
  - 按钮链接
块元素和行内元素
- 块元素（Block Elements）
- - 特点
  - 常见的块元素
- 行内元素（Inline Elements）
- - 特点
  - 常见的行内元素
- 元素的转换
- - 示例
列表
- 无序列表（Unordered List）
- - 概述
  - 语法
  - 示例
  - 自定义项目符号样式
- 有序列表（Ordered List）
- - 概述
  - 语法
  - 示例
  - 自定义编号样式
- 定义列表（Definition List）
- - 概述
  - 语法
  - 示例
- 嵌套列表
表格
- 基本结构标签
- 表格的属性
- 表格的跨行和跨列
- 表格的分组标签
媒体元素
- `
- - 功能
  - 基本语法
  - 示例
  - 其他常用属性
  - 支持多种音频格式
- `
- - 功能
  - 基本语法
  - 示例
  - 其他常用属性
  - 支持多种视频格式
网页的简单布局
- 整体框架
- 头部信息（``）
- 主体内容（``）
- 辅助结构
内联框架 iframe
- 基本语法
- 示例代码
- 常用属性
- - `src`
  - `width` 和 `height`
  - `frameborder`
  - `allowfullscreen`
  - `sandbox`
表单
- 表单基础
- - 表单的定义
 - 基本结构
 - 提交方式
 - 表单提交的目标
- 表单元素
- - `` 元素
 - `` 元素</li> <li>`<select>` 和 `<option>` 元素</li> <li>`<datalist>` 元素</li> </ul> </li> <li>表单属性</li> <li> <ul> <li>通用属性</li> <li>HTML5 新增属性</li> </ul> </li> <li>表单验证</li> </ul> </li> </ul> </div> <h2>HTML概述</h2> HTML 即超文本标记语言（HyperText Markup Language），它是用于创建网页的标准标记语言 <h3>基本概念</h3> HTML 通过一系列的标记（标签）来描述网页的结构和内容。这些标签就像是建筑中的砖块和蓝图，告诉浏览器如何显示网页的各个部分，比如文本、图像、链接、表格等。浏览器（如 Chrome、Firefox 等）会读取 HTML 文件，并根据其中的标签将网页内容呈现给用户 <h3>HTML 发展历程</h3> HTML（超文本标记语言）是构建万维网的核心技术之一，其发展历程反映了互联网技术的演进和标准化进程。以下是HTML的主要发展阶段： 起源与HTML 1.0（1991-1993） <ul> <li>创始人：蒂姆·伯纳斯-李（Tim Berners-Lee）于1991年在欧洲核子研究中心（CERN）提出，旨在实现科学文档的共享。</li> <li>HTML 1.0：未正式标准化，支持基本文本格式（标题、段落、超链接），仅包含约20个标签。</li> </ul> HTML 2.0（1995） <ul> <li>首个官方标准：由IETF（互联网工程任务组）于1995年发布，定义了HTML的基础结构。</li> <li>功能增强：支持表单（<code><form></code>）、图像（<code><img></code>）、列表等，成为早期网页的通用标准。</li> </ul> HTML 3.2（1997） <ul> <li>W3C接管：万维网联盟（W3C）开始主导标准化，1997年发布HTML 3.2。</li> <li>新特性：引入表格（<code><table></code>）、字体样式、脚本支持（JavaScript）等，推动网页动态化。</li> </ul> HTML 4.01（1999） <ul> <li>里程碑版本：1999年发布，成为长期主流标准。</li> <li>关键改进： <ul> <li>分离结构与样式：鼓励使用CSS（层叠样式表）。</li> <li>框架（<code><frame></code>）、多媒体支持（需插件如Flash）。</li> <li>国际化支持（字符编码规范）。</li> </ul> </li> <li>三种变体：严格模式（Strict）、过渡模式（Transitional）、框架集（Frameset）。</li> </ul> XHTML（2000-2009） <ul> <li>XML化尝试：W3C于2000年推出XHTML 1.0，强制要求语法严格性（如标签闭合、小写标签）。</li> <li>目标：提高代码规范性和跨平台兼容性。</li> <li>争议：严格的语法规则导致开发复杂度上升，浏览器兼容性不足，最终未全面普及。</li> </ul> HTML5（2014至今） <ul> <li>现代Web基石：由W3C与WHATWG（网页超文本应用技术工作小组）合作开发，2014年正式定稿。</li> <li>核心特性： <ul> <li>语义化标签：<code><header></code>, <code><article></code>, <code><nav></code>等，提升可访问性和SEO。</li> <li>原生多媒体支持：<code><video></code>, <code><audio></code>标签取代Flash。</li> <li>图形与动画：<code><canvas></code>和SVG支持动态绘图。</li> <li>离线与存储：LocalStorage、IndexedDB、Service Worker。</li> <li>设备API：地理位置（Geolocation）、摄像头访问。</li> <li>响应式设计：<code><picture></code>、<code><meta viewport></code>适配多端。</li> </ul> </li> <li>持续演进：HTML5不再以版本号迭代，而是通过模块化标准持续更新（如HTML Living Standard）。</li> </ul> HTML发展特点 <ol> <li>标准化与开放：从IETF到W3C/WHATWG，推动技术统一。</li> <li>功能扩展：从静态文档到富媒体、复杂应用（如WebGL、WebAssembly）。</li> <li>生态协同：依赖CSS、JavaScript共同构建现代Web技术栈。</li> <li>移动优先：HTML5助力移动互联网爆发，支持跨平台开发。</li> </ol> <h3>HTML 基本结构</h3> <pre><code class="prism 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> </head> <body> <h1>这是一个一级标题</h1> <p>这是一个段落。</p> </body> </html> </code></pre> 结构解释： <ol> <li> <code><!DOCTYPE html></code> 这是文档类型声明，它位于 HTML 文档的第一行，告诉浏览器当前文档使用的是 HTML5 标准。不同的 HTML 版本有不同的文档类型声明，而 <code><!DOCTYPE html></code>是 HTML5 特有的简洁声明方式。 </li> <li> <code><html></code> 标签 <ul> <li><code><html></code> 标签是 HTML 文档的根标签，所有其他的 HTML 元素都必须包含在 <code><html></code> 和 <code></html></code> 标签之间。</li> <li><code>lang="zh-CN"</code> 是一个属性，用于指定文档的语言为中文（中国大陆地区），有助于搜索引擎和屏幕阅读器等工具更好地理解和处理页面内容。</li> </ul> </li> <li> <code><head></code> 标签 <ul> <li><code><head></code>标签包含了文档的元数据，这些数据不会直接显示在网页上，但对网页的运行和搜索引擎优化等方面起着重要作用。 <ul> <li><code><meta charset="UTF-8"></code>：设置文档的字符编码为 UTF - 8，这样可以正确显示各种语言的字符，避免出现乱码问题。</li> <li><code><meta name="viewport" content="width=device-width, initial-scale=1.0"></code>：这是一个针对移动设备的元标签，<code>width=device-width</code> 表示页面宽度等于设备的屏幕宽度，<code>initial-scale=1.0</code> 表示初始缩放比例为 1.0，确保网页在移动设备上能正确显示和缩放。</li> <li><code><title></code> 标签：定义了网页的标题，它会显示在浏览器的标题栏或标签页上，同时也是搜索引擎优化的重要元素之一。</li> </ul> </li> </ul> </li> <li> <code><body></code> 标签 <ul> <li><code><body></code>标签包含了网页的可见内容，如文本、图像、链接、表格等。所有用户在浏览器中看到的内容都应该放在<code><body></code>和<code></body></code>标签之间。 <ul> <li><code><h1></code> 标签：表示一级标题，HTML 提供了从 <code><h1></code> 到 <code><h6></code> 共六级标题，用于组织页面内容的层次结构。</li> <li><code></code> 标签：用于定义段落，将文本内容划分为不同的段落，使页面结构更清晰。</li> </ul> </li> </ul> </li> </ol> <h2>网页基本标签</h2> <h3>标题标签（<code><h1></code> - <code><h6></code>）</h3> 功能： 用于定义网页中不同级别的标题，从 <code><h1></code> 到 <code><h6></code> 重要性依次降低，字号也逐渐变小。<code><h1></code> 通常用于页面的主标题，而 <code><h6></code> 用于最低级别的子标题。 示例： <pre><code class="prism language-html"><h1>这是一级标题</h1> <h2>这是二级标题</h2> <h3>这是三级标题</h3> <h4>这是四级标题</h4> <h5>这是五级标题</h5> <h6>这是六级标题</h6> </code></pre> 注意事项： <ul> <li>搜索引擎会根据标题标签来理解页面的结构和内容重点，因此合理使用标题标签对 SEO 很重要。</li> <li>一般一个页面应该只有一个 <code><h1></code> 标签，用于突出页面的核心主题。</li> </ul> <h3>段落标签（<code></code>）</h3> 功能： 用于将文本内容组织成段落。浏览器会自动在段落前后添加一定的间距，使页面内容更具可读性。 示例： <pre><code class="prism language-html"><p>这是一个段落的内容。它可以包含多行文本，并且浏览器会自动处理段落之间的间距。</p> <p>这是另一个段落，与上一个段落会有明显的分隔。</p> </code></pre> 注意事项： <ul> <li>段落标签是块级元素，会独占一行，并且在前后产生换行效果。</li> <li>可以通过 CSS 对段落的样式（如字体、颜色、行高、边距等）进行进一步的定制。</li> </ul> <h3>换行标签（<code> </code>）</h3> 功能： 单标签，用于在文本中强制换行，使后续内容显示在下一行，但不会像段落标签那样产生额外的间距。 示例： <pre><code class="prism language-html">这是第一行文本<br>这是第二行文本，它紧跟在第一行之后，只是进行了换行。 </code></pre> 注意事项： <ul> <li>不要过度使用 <code> </code> 标签来分隔内容，对于有逻辑的段落划分，应该使用 <code></code> 标签。</li> <li><code> </code> 标签在 HTML 中是单标签，不需要闭合。</li> </ul> <h3>水平线标签（<code><hr></code>）</h3> 功能： 单标签，在网页中创建一条水平线，用于分隔不同的内容区域，视觉上起到划分页面板块的作用。 示例： <pre><code class="prism language-html"><p>这是第一段内容。</p> <hr> <p>这是第二段内容，与第一段通过水平线分隔开来。</p> </code></pre> 注意事项： <ul> <li><code><hr></code> 标签的样式（如颜色、粗细、长度等）可以通过 CSS 进行修改。</li> <li>同样，它也是单标签，无需闭合。</li> </ul> <h3>注释（<code></code>）</h3> 功能： 用于在 HTML 代码中添加注释，注释内容不会在浏览器中显示，主要是为开发者提供代码说明，方便后续的代码维护和团队协作。 示例： <pre><code class="prism language-html"> <p>这款产品具有多种功能，能满足您的不同需求。</p> </code></pre> 注意事项： <ul> <li>注释可以跨越多行，只要在 <code></code> 之间的内容都会被视为注释。</li> <li>合理使用注释可以提高代码的可读性，但不要添加过多无意义的注释。</li> </ul> <h3>特殊符号</h3> 功能： 在 HTML 中，有些字符具有特殊的含义（如 <code><</code>、<code>></code> 用于表示标签），如果要在页面中显示这些字符本身，就需要使用特殊符号（也称为 HTML 实体）。此外，还有一些常用的符号（如版权符号 ©、注册商标符号 ® 等）也可以通过特殊符号来表示。 示例： <table> <thead> <tr> <th>特殊符号</th> <th>描述</th> <th>HTML 实体</th> </tr> </thead> <tbody> <tr> <td><code><</code></td> <td>小于号</td> <td><code><</code></td> </tr> <tr> <td><code>></code></td> <td>大于号</td> <td><code>></code></td> </tr> <tr> <td><code>&</code></td> <td>和号</td> <td><code>&</code></td> </tr> <tr> <td><code>"</code></td> <td>引号</td> <td><code>"</code></td> </tr> <tr> <td><code>'</code></td> <td>单引号</td> <td><code>'</code></td> </tr> <tr> <td><code>©</code></td> <td>版权符号</td> <td><code>©</code></td> </tr> <tr> <td><code>®</code></td> <td>注册商标符号</td> <td><code>®</code></td> </tr> <tr> <td><code>™</code></td> <td>商标符号</td> <td><code>™</code></td> </tr> <tr> <td><code>空格</code></td> <td>多个连续空格在 HTML 中会被合并为一个，使用 <code> </code> 可以显示多个连续空格</td> <td><code> </code></td> </tr> </tbody> </table> <pre><code class="prism language-html"><p>这是一个小于号：<，这是一个大于号：>。</p> <p>这是版权符号：© 2025 公司名称。</p> </code></pre> 注意事项： <ul> <li>特殊符号以 <code>&</code> 开头，以 <code>;</code> 结尾，中间是特定的字符实体名称或编号。</li> <li>记住常用的特殊符号可以避免在页面中出现字符显示错误的问题。</li> </ul> <h2>图像标签</h2> 在 HTML 中，<code><img></code> 标签用于在网页上显示图像。以下是关于 <code><img></code> 标签的详细介绍： <h3>基本语法</h3> <code><img> </code>是一个空标签，即它只需要开始标签，不需要结束标签。其基本语法如下： <pre><code class="prism language-html"><img src="图像文件的路径或 URL" alt="替代文本"> </code></pre> <h3>主要属性</h3> <code>src</code> 属性 <ul> <li>作用：<code>src</code>（source 的缩写）属性是 <code><img></code> 标签必须的属性，它指定了要显示的图像的路径或 URL。</li> <li>示例 <ul> <li>本地图像：如果图像文件与 HTML 文件在同一目录下，直接写文件名即可。</li> </ul> </li> </ul> <pre><code class="prism language-html"><img src="example.jpg" alt="示例图片"> </code></pre> <ul> <li>指定子目录：若图像在子目录中，需要指定相对路径。</li> </ul> <pre><code class="prism language-html"><img src="images/example.jpg" alt="示例图片"> </code></pre> <ul> <li>远程图像：可以使用完整的 URL 引用互联网上的图像。</li> </ul> <pre><code class="prism language-html"><img src="https://example.com/images/example.jpg" alt="示例图片"> </code></pre> <code>alt</code> 属性 <ul> <li>作用：<code>alt</code>（alternative text 的缩写）属性提供了图像的替代文本。当图像无法显示时（如网络问题、文件路径错误等），浏览器会显示 <code>alt</code> 属性中的文本；同时，搜索引擎也会读取 <code>alt</code> 属性内容，有助于 SEO；对于使用屏幕阅读器的盲人用户，屏幕阅读器会朗读 <code>alt</code> 属性的内容。</li> <li>示例</li> </ul> <pre><code class="prism language-html"><img src="nonexistent.jpg" alt="这是一张本应显示但未成功加载的图片"> </code></pre> <code>width</code> 和 <code>height</code> 属性 <ul> <li>作用：这两个属性用于指定图像显示的宽度和高度，单位可以是像素（px）或百分比（%）。如果只设置其中一个属性，浏览器会按比例自动调整另一个属性的值，以保持图像的原始宽高比；如果同时设置两个属性，图像可能会被拉伸或压缩。</li> <li>示例</li> </ul> <pre><code class="prism language-html"> <img src="example.jpg" alt="示例图片" width="300" height="200">  <img src="example.jpg" alt="示例图片" width="50%"> </code></pre> <code>title</code> 属性 <ul> <li>作用：<code>title</code> 属性为图像提供额外的提示信息。当用户将鼠标悬停在图像上时，会显示 <code>title</code> 属性中的文本。</li> <li>示例</li> </ul> <pre><code class="prism language-html"><img src="example.jpg" alt="示例图片" title="点击查看大图"> </code></pre> <h3>图像的对齐和样式</h3> 虽然 <code><img></code> 标签本身也有一些用于对齐的属性（如 <code>align</code>），但现在更推荐使用 CSS 来控制图像的对齐和样式。 使用 CSS 控制对齐 <pre><code class="prism language-html"><!DOCTYPE html> <html lang="en"> <head> <style> .center-img { display: block; margin-left: auto; margin-right: auto; } .right-img { float: right; } </style> </head> <body>  <img src="example.jpg" alt="示例图片" class="center-img">  <img src="example.jpg" alt="示例图片" class="right-img"> </body> </html> </code></pre> <h3>响应式图像</h3> 为了使图像在不同设备和屏幕尺寸上都能良好显示，可以使用 <code>srcset</code> 和 <code>sizes</code> 属性。 <code>srcset</code> 和 <code>sizes</code> 属性 <ul> <li><code>srcset</code>：允许提供多个不同分辨率的图像文件，浏览器会根据设备的屏幕分辨率和视口大小选择合适的图像。</li> <li><code>sizes</code>：定义不同视口宽度下图像的显示宽度。</li> </ul> <pre><code class="prism language-html"><img src="small.jpg" srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 2000w" sizes="(max-width: 500px) 100vw, (max-width: 1000px) 50vw, 33vw" alt="响应式示例图片"> </code></pre> 在上述示例中： <ul> <li><code>srcset</code> 列出了不同分辨率的图像文件及其对应的宽度（以像素为单位，后面跟 <code>w</code>）。</li> <li><code>sizes</code> 定义了在不同视口宽度下图像的显示宽度。例如，当视口宽度小于等于 500px 时，图像宽度为视口宽度的 100%；当视口宽度小于等于 1000px 时，图像宽度为视口宽度的 50%；否则，图像宽度为视口宽度的 33%。浏览器会根据这些信息选择最合适的图像来显示。</li> </ul> <h2>链接标签</h2> 在 HTML 里，链接标签主要是 <code><a></code>（锚点标签），它能创建超链接，把当前网页与其他网页、文件、同一页面不同位置、电子邮件地址等连接起来。以下是对 <code><a></code> 标签的详细解析： <h3>基本语法</h3> 标签属于双标签，要有开始标签 <code><a></code> 和结束标签 <code></a></code>，中间可包含链接文本或其他可点击元素。其基本语法如下： <pre><code class="prism language-html"><a href="目标地址">链接文本</a> </code></pre> <h3>重要属性</h3> <h4><code>href</code> 属性</h4> <ul> <li>作用：<code>href</code>（hypertext reference 的缩写）是 <code><a></code> 标签核心属性，用于指定链接的目标地址，它可以是网页 URL、文件路径、电子邮件地址、同一页面内的锚点等。</li> <li>示例 <ul> <li>外部网页链接：能链接到其他网站的页面。</li> </ul> </li> </ul> <pre><code class="prism language-html"><a href="https://www.baidu.com">访问百度</a> </code></pre> <ul> <li>内部网页链接：可链接到同一网站内的其他页面，采用相对路径。</li> </ul> <pre><code class="prism language-html"><a href="products.html">产品展示</a> </code></pre> <ul> <li>文件下载链接：链接到一个文件，点击后会触发文件下载。</li> </ul> <pre><code class="prism language-html"><a href="report.docx">下载报告</a> </code></pre> <ul> <li>电子邮件链接：使用 <code>mailto:</code> 协议，点击链接会打开用户默认邮件客户端并填写收件人地址。</li> </ul> <pre><code class="prism language-html"><a href="mailto:support@example.com">联系客服</a> </code></pre> <ul> <li>同一页面内的锚点链接：先在目标位置设置 <code>id</code> 属性，然后在链接的 <code>href</code> 属性中用 <code>#</code> 加上该 <code>id</code> 值。</li> </ul> <pre><code class="prism language-html"><a href="#section3">跳至第三部分</a> <h2 id="section3">第三部分内容</h2> </code></pre> <h4><code>target</code> 属性</h4> <ul> <li>作用：<code>target</code> 属性用来指定链接的打开方式，即链接在哪个窗口或框架中打开。</li> <li>常见取值及示例 <ul> <li><code>_self</code>：这是默认值，会在当前窗口或框架中打开链接。</li> </ul> </li> </ul> <pre><code class="prism language-html"><a href="page.html" target="_self">在当前窗口打开</a> </code></pre> <ul> <li><code>_blank</code>：会在新窗口或新标签页中打开链接。</li> </ul> <pre><code class="prism language-html"><a href="https://www.google.com" target="_blank">在新窗口打开谷歌</a> </code></pre> <ul> <li><code>_parent</code>：在父框架中打开链接，若没有父框架，则等同于 <code>_self</code>。</li> <li><code>_top</code>：在整个浏览器窗口中打开链接，会取消所有框架。</li> </ul> <h4><code>title</code> 属性</h4> <ul> <li>作用：<code>title</code> 属性为链接提供额外提示信息。当用户将鼠标悬停在链接上时，会显示 <code>title</code> 属性中的文本。</li> <li>示例</li> </ul> <pre><code class="prism language-html"><a href="about.html" title="了解我们的公司历史和团队">关于我们</a> </code></pre> <h4><code>rel</code> 属性</h4> <ul> <li>作用：<code>rel</code>（relationship 的缩写）属性用于指定当前文档与链接文档之间的关系，常见用途包括搜索引擎优化和安全提示。</li> <li>常见取值及示例 <ul> <li><code>nofollow</code>：告知搜索引擎不要追踪该链接，常用于用户可提交内容的页面（如评论区），防止垃圾链接影响网站排名。</li> </ul> </li> </ul> <pre><code class="prism language-html"><a href="https://untrusted-site.com" rel="nofollow">不可信网站链接</a> </code></pre> <ul> <li><code>noopener</code>：当使用 <code>target="_blank"</code> 打开外部链接时，添加 <code>rel="noopener"</code> 可提高安全性，防止新窗口的脚本访问当前窗口的 <code>window.opener</code> 对象，避免潜在安全风险。</li> </ul> <pre><code class="prism language-html"><a href="https://external-site.com" target="_blank" rel="noopener">安全打开外部网站</a> </code></pre> <h4><code>download</code> 属性</h4> <ul> <li>作用：当链接指向一个文件时，添加 <code>download</code> 属性会强制浏览器下载该文件，而不是尝试打开它。</li> <li>示例</li> </ul> <pre><code class="prism language-html"><a href="image.jpg" download>下载图片</a> </code></pre> <h3>链接样式</h3> 可以运用 CSS 改变链接的外观，如颜色、下划线、鼠标悬停效果等。 <h4>示例代码</h4> <pre><code class="prism language-html"><!DOCTYPE html> <html lang="en"> <head> <style> /* 未访问的链接 */ a:link { color: #007BFF; text-decoration: none; } /* 已访问的链接 */ a:visited { color: #6C757D; } /* 鼠标悬停的链接 */ a:hover { color: #FFC107; text-decoration: underline; } /* 激活的链接（鼠标按下时） */ a:active { color: #DC3545; } </style> </head> <body> <a href="#">示例链接</a> </body> </html> </code></pre> <h3>特殊链接形式</h3> <h4>图像链接</h4> <code><a></code> 标签不仅能包含文本，还能包含图像，将图像转变为可点击的链接。 <pre><code class="prism language-html"><a href="https://example.com"> <img src="image.jpg" alt="示例图片"> </a> </code></pre> <h4>按钮链接</h4> 可以把 <code><button></code> 元素放在 <code><a></code> 标签内，实现按钮样式的链接。 <pre><code class="prism language-html"><a href="https://example.com"> <button>点击访问</button> </a> </code></pre> <h2>块元素和行内元素</h2> 在 HTML 中，元素根据其显示方式主要分为行内元素（Inline Elements）和块元素（Block Elements），它们在布局和呈现上有显著的差异。以下详细介绍这两种元素： <h3>块元素（Block Elements）</h3> <h4>特点</h4> <ul> <li>独占一行：块元素在页面中会独自占据一行，无论其内容多少，后续元素会自动换行显示在其下方。</li> <li>可设置宽高：可以通过 CSS 显式地设置块元素的宽度（<code>width</code>）和高度（<code>height</code>）属性。如果不设置宽度，默认情况下，块元素会扩展到其父元素的宽度。</li> <li>可包含其他元素：块元素通常可以包含行内元素和其他块元素，用于构建页面的整体结构。</li> </ul> <h4>常见的块元素</h4> <ul> <li><code><div></code>：是最常用的块元素之一，本身没有特定的语义，主要用于将页面内容进行分组，方便进行样式设置和布局控制。</li> </ul> <pre><code class="prism language-html"><div style="background-color: lightgray; padding: 10px;"> <p>这是一个包含在 div 中的段落。</p> </div> </code></pre> <ul> <li><code></code>：用于定义段落，浏览器会自动在段落前后添加一定的间距。</li> </ul> <pre><code class="prism language-html"><p>这是一个段落的文本内容。</p> </code></pre> <ul> <li><code><h1></code> - <code><h6></code>：用于定义不同级别的标题，<code><h1></code> 级别最高，字号最大，<code><h6></code> 级别最低，字号最小。</li> </ul> <pre><code class="prism language-html"><h1>这是一级标题</h1> </code></pre> <ul> <li><code><ul></code>、<code><ol></code> 和 <code><li></code>：<code><ul></code> 定义无序列表，<code><ol></code> 定义有序列表，<code><li></code> 定义列表项。</li> </ul> <pre><code class="prism language-html"><ul> <li>列表项 1</li> <li>列表项 2</li> </ul> </code></pre> <ul> <li><code><form></code>：用于创建 HTML 表单，用户可以在表单中输入数据并提交到服务器。</li> </ul> <pre><code class="prism language-html"><form action="submit.php" method="post"> <input type="text" name="username"> <input type="submit" value="提交"> </form> </code></pre> <h3>行内元素（Inline Elements）</h3> <h4>特点</h4> <ul> <li>不独占一行：行内元素会在同一行内显示，不会强制换行，直到当前行空间不足才会换行。</li> <li>宽度和高度由内容决定：行内元素的宽度和高度是由其内容的大小决定的，无法通过 CSS 直接设置其宽度和高度（但某些行内元素如 <code><img></code> 除外）。</li> <li>只能包含行内元素：一般情况下，行内元素只能包含其他行内元素，不能包含块元素。</li> </ul> <h4>常见的行内元素</h4> <ul> <li><code><a></code>：用于创建超链接，可以链接到其他网页、文件、电子邮件地址等。</li> </ul> <pre><code class="prism language-html"><a href="https://www.example.com">访问示例网站</a> </code></pre> <ul> <li><code><img></code>：用于在网页中插入图像。虽然它是行内元素，但可以设置宽度和高度属性。</li> </ul> <pre><code class="prism language-html"><img src="example.jpg" alt="示例图片" width="200" height="150"> </code></pre> <ul> <li><code><input></code>：用于创建各种输入字段，如文本框、密码框、复选框、单选框等。</li> </ul> <pre><code class="prism language-html"><input type="text" placeholder="请输入内容"> </code></pre> <ul> <li><code><label></code>：用于为表单元素定义标签，提高表单的可用性和可访问性。</li> </ul> <pre><code class="prism language-html"><label for="username">用户名：</label> <input type="text" id="username" name="username"> </code></pre> <ul> <li><code></code>：是一个通用的行内元素，本身没有特定的语义，主要用于对文本的一部分进行分组和样式设置。</li> </ul> <pre><code class="prism language-html"><p>这是一段 <span style="color: red;">红色</span> 的文本。</p> </code></pre> <h3>元素的转换</h3> 通过 CSS 的 <code>display</code> 属性，可以将块元素转换为行内元素，或将行内元素转换为块元素。 <h4>示例</h4> <ul> <li>将块元素转换为行内元素：</li> </ul> <pre><code class="prism language-html"><!DOCTYPE html> <html lang="en"> <head> <style> div { display: inline; background-color: lightblue; } </style> </head> <body> <div>这是一个转换为行内元素的 div。</div> <div>这是另一个转换为行内元素的 div。</div> </body> </html> </code></pre> <ul> <li>将行内元素转换为块元素：</li> </ul> <pre><code class="prism language-html"><!DOCTYPE html> <html lang="en"> <head> <style> span { display: block; background-color: lightgreen; margin-bottom: 5px; } </style> </head> <body> <span>这是一个转换为块元素的 span。</span> <span>这是另一个转换为块元素的 span。</span> </body> </html> </code></pre> <h2>列表</h2> 在 HTML 中，列表用于将相关信息进行分组和展示，使页面内容更加有条理。HTML 提供了三种主要类型的列表：无序列表、有序列表和定义列表。以下是对这三种列表的详细介绍： <h3>无序列表（Unordered List）</h3> <h4>概述</h4> 无序列表使用项目符号来标记每个列表项，列表项之间没有特定的顺序。常用于展示并列的信息，如菜单选项、要点列举等。 <h4>语法</h4> 无序列表使用 <code><ul></code> 标签作为容器，每个列表项使用 <code><li></code> 标签表示。 <pre><code class="prism language-html"><ul> <li>列表项 1</li> <li>列表项 2</li> <li>列表项 3</li> </ul> </code></pre> <h4>示例</h4> <pre><code class="prism language-html"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>无序列表示例</title> </head> <body> <h2>水果列表</h2> <ul> <li>苹果</li> <li>香蕉</li> <li>橙子</li> </ul> </body> </html> </code></pre> <h4>自定义项目符号样式</h4> 可以使用 CSS 的 <code>list-style-type</code> 属性来改变项目符号的样式，常见取值如下： <ul> <li><code>disc</code>：默认值，实心圆。</li> <li><code>circle</code>：空心圆。</li> <li><code>square</code>：实心方块。</li> <li><code>none</code>：不显示项目符号。</li> </ul> <pre><code class="prism language-html"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>自定义无序列表样式</title> <style> ul.square { list-style-type: square; } ul.none { list-style-type: none; } </style> </head> <body> <h2>自定义项目符号样式</h2> <ul class="square"> <li>项目 1</li> <li>项目 2</li> </ul> <ul class="none"> <li>无项目符号 1</li> <li>无项目符号 2</li> </ul> </body> </html> </code></pre> <h3>有序列表（Ordered List）</h3> <h4>概述</h4> 有序列表使用数字或字母来标记每个列表项，列表项之间有明确的顺序。常用于展示步骤、排名等信息。 <h4>语法</h4> 有序列表使用 <code><ol></code> 标签作为容器，每个列表项同样使用 <code><li></code> 标签表示。 <pre><code class="prism language-html"><ol> <li>列表项 1</li> <li>列表项 2</li> <li>列表项 3</li> </ol> </code></pre> <h4>示例</h4> <pre><code class="prism language-html"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>有序列表示例</title> </head> <body> <h2>考试步骤</h2> <ol> <li>进入考场</li> <li>找到座位</li> <li>等待发卷</li> </ol> </body> </html> </code></pre> <h4>自定义编号样式</h4> 可以使用 CSS 的 <code>list-style-type</code> 属性来改变编号的样式，常见取值如下： <ul> <li><code>decimal</code>：默认值，十进制数字（1, 2, 3…）。</li> <li><code>lower-roman</code>：小写罗马数字（i, ii, iii…）。</li> <li><code>upper-roman</code>：大写罗马数字（I, II, III…）。</li> <li><code>lower-alpha</code>：小写字母（a, b, c…）。</li> <li><code>upper-alpha</code>：大写字母（A, B, C…）。</li> </ul> <pre><code class="prism language-html"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>自定义有序列表样式</title> <style> ol.roman { list-style-type: lower-roman; } ol.alpha { list-style-type: upper-alpha; } </style> </head> <body> <h2>自定义编号样式</h2> <ol class="roman"> <li>项目 1</li> <li>项目 2</li> </ol> <ol class="alpha"> <li>项目 A</li> <li>项目 B</li> </ol> </body> </html> </code></pre> <h3>定义列表（Definition List）</h3> <h4>概述</h4> 定义列表用于展示术语及其定义，每个术语使用 <code><dt></code>（Definition Term）标签表示，对应的定义使用 <code><dd></code>（Definition Description）标签表示。 <h4>语法</h4> 定义列表使用 <code><dl></code> 标签作为容器，内部包含多个 <code><dt></code> 和 <code><dd></code> 标签对。 <pre><code class="prism language-html"><dl> <dt>术语 1</dt> <dd>术语 1 的定义</dd> <dt>术语 2</dt> <dd>术语 2 的定义</dd> </dl> </code></pre> <h4>示例</h4> <pre><code class="prism language-html"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>定义列表示例</title> </head> <body> <h2>计算机术语定义</h2> <dl> <dt>CPU</dt> <dd>中央处理器，是计算机的核心组件，负责执行指令和处理数据。</dd> <dt>RAM</dt> <dd>随机存取存储器，用于临时存储计算机正在运行的程序和数据。</dd> </dl> </body> </html> </code></pre> <h3>嵌套列表</h3> 在 HTML 中，列表可以进行嵌套，即在一个列表项中可以包含另一个列表。 <pre><code class="prism language-html"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>嵌套列表示例</title> </head> <body> <h2>嵌套列表</h2> <ul> <li>主列表项 1 <ol> <li>子列表项 1</li> <li>子列表项 2</li> </ol> </li> <li>主列表项 2</li> </ul> </body> </html> </code></pre> <h2>表格</h2> 在 HTML 中，<code><table></code> 标签用于创建表格，表格能够以结构化的方式展示数据，使信息更加清晰易读。以下是关于 HTML 表格的详细介绍： <h3>基本结构标签</h3> <code><table></code> 标签：这是创建表格的根元素，所有表格相关的内容都包含在 <code><table></code> 和 <code></table></code> 标签之间。 <pre><code class="prism language-html"><table>  </table> </code></pre> <code><tr></code> 标签：代表表格行（table row），一个 <code><tr></code> 标签表示表格中的一行数据，多个 <code><tr></code> 标签可以创建多行表格。 <pre><code class="prism language-html"><table> <tr>  </tr> <tr>  </tr> </table> </code></pre> <code><td></code> 标签：表示表格数据单元格（table data cell），用于定义表格行中的单个数据单元格。每个 <code><tr></code> 标签内可以包含多个 <code><td></code> 标签。 <pre><code class="prism language-html"><table> <tr> <td>单元格 1</td> <td>单元格 2</td> </tr> <tr> <td>单元格 3</td> <td>单元格 4</td> </tr> </table> </code></pre> <code><th></code> 标签：用于定义表头单元格（table header cell），通常位于表格的第一行，用于表示每一列的标题。<code><th></code> 标签内的文本通常会以粗体和居中的方式显示。 <pre><code class="prism language-html"><table> <tr> <th>姓名</th> <th>年龄</th> </tr> <tr> <td>张三</td> <td>25</td> </tr> <tr> <td>李四</td> <td>30</td> </tr> </table> </code></pre> <h3>表格的属性</h3> <code>border</code> 属性：早期用于定义表格边框的宽度，单位是像素。虽然现在不推荐直接在 HTML 标签中使用该属性（推荐用 CSS 来设置边框样式），但了解它的作用有助于理解表格的基本外观设置。 <pre><code class="prism language-html"><table border="1">  </table> </code></pre> <code>cellpadding</code> 属性：指定单元格内内容与单元格边框之间的空白距离，单位是像素。 <pre><code class="prism language-html"><table cellpadding="5">  </table> </code></pre> <code>cellspacing</code> 属性：定义相邻单元格之间的间距，单位是像素。 <pre><code class="prism language-html"><table cellspacing="2">  </table> </code></pre> <h3>表格的跨行和跨列</h3> <code>rowspan</code> 属性：用于使单元格跨行，<code>rowspan</code> 的值表示该单元格要跨越的行数。 <pre><code class="prism language-html"><table border="1"> <tr> <td rowspan="2">合并的单元格</td> <td>单元格 2</td> </tr> <tr> <td>单元格 4</td> </tr> </table> </code></pre> <code>colspan</code> 属性：用于使单元格跨列，<code>colspan</code> 的值表示该单元格要跨越的列数。 <pre><code class="prism language-html"><table border="1"> <tr> <td colspan="2">合并的单元格</td> </tr> <tr> <td>单元格 3</td> <td>单元格 4</td> </tr> </table> </code></pre> <h3>表格的分组标签</h3> <code><thead></code> 标签：用于定义表格的表头部分，通常包含 <code><tr></code> 和 <code><th></code> 标签。表头部分的内容在显示时可以与表格主体部分区分开来，比如设置不同的样式。 <pre><code class="prism language-html"><table> <thead> <tr> <th>列标题 1</th> <th>列标题 2</th> </tr> </thead> <tbody> <tr> <td>数据 1</td> <td>数据 2</td> </tr> <tr> <td>数据 3</td> <td>数据 4</td> </tr> </tbody> </table> </code></pre> <code><tbody></code> 标签：表示表格的主体部分，包含表格的实际数据行，由多个 <code><tr></code> 和 <code><td></code> 标签组成。 <code><tfoot></code> 标签：用于定义表格的表尾部分，通常用于显示表格的汇总信息等。 <h2>媒体元素</h2> 在 HTML 中，媒体元素主要用于在网页上嵌入音频、视频等多媒体内容，为用户带来更丰富的交互体验。以下是对 HTML 主要媒体元素的详细介绍： <h3><code><audio></code> 元素</h3> <h4>功能</h4> <code><audio></code> 元素用于在网页中嵌入音频文件，支持多种音频格式，如 MP3、WAV、OGG 等。用户可以直接在网页上播放音频，而无需跳转到其他播放器应用。 <h4>基本语法</h4> <pre><code class="prism language-html"><audio src="音频文件的 URL" controls></audio> </code></pre> <ul> <li><code>src</code> 属性：指定要播放的音频文件的路径或 URL。</li> <li><code>controls</code> 属性：添加该属性后，浏览器会显示音频播放器的控制条，用户可以进行播放、暂停、调节音量等操作。</li> </ul> <h4>示例</h4> <pre><code class="prism language-html"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>音频示例</title> </head> <body> <audio src="example.mp3" controls></audio> </body> </html> </code></pre> <h4>其他常用属性</h4> <ul> <li><code>autoplay</code>：音频页面加载完成后自动播放。但由于用户体验和数据流量等问题，部分浏览器对自动播放有一定限制。</li> </ul> <pre><code class="prism language-html"><audio src="example.mp3" controls autoplay></audio> </code></pre> <ul> <li><code>loop</code>：音频播放完后自动循环播放。</li> </ul> <pre><code class="prism language-html"><audio src="example.mp3" controls loop></audio> </code></pre> <ul> <li><code>preload</code>：指定音频在页面加载时的预加载策略，有三个可选值： <ul> <li><code>auto</code>：浏览器会在页面加载时尽可能多地预加载音频。</li> <li><code>metadata</code>：只预加载音频的元数据（如时长、比特率等）。</li> <li><code>none</code>：不进行预加载。</li> </ul> </li> </ul> <pre><code class="prism language-html"><audio src="example.mp3" controls preload="metadata"></audio> </code></pre> <h4>支持多种音频格式</h4> 为了确保在不同浏览器中都能正常播放音频，可以提供多种音频格式，使用 <code><source></code> 元素。 <pre><code class="prism language-html"><audio controls> <source src="example.mp3" type="audio/mpeg"> <source src="example.ogg" type="audio/ogg"> 您的浏览器不支持音频播放。 </audio> </code></pre> <h3><code><video></code> 元素</h3> <h4>功能</h4> <code><video></code> 元素用于在网页中嵌入视频文件，支持多种视频格式，如 MP4、WebM、OGG 等。用户可以在网页上直接播放视频，无需借助外部视频播放器。 <h4>基本语法</h4> <pre><code class="prism language-html"><video src="视频文件的 URL" controls width="640" height="360"></video> </code></pre> <ul> <li><code>src</code> 属性：指定要播放的视频文件的路径或 URL。</li> <li><code>controls</code> 属性：添加该属性后，浏览器会显示视频播放器的控制条，用户可以进行播放、暂停、调节音量、快进等操作。</li> <li><code>width</code> 和 <code>height</code> 属性：用于指定视频播放器的宽度和高度。</li> </ul> <h4>示例</h4> <pre><code class="prism language-html"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>视频示例</title> </head> <body> <video src="example.mp4" controls width="640" height="360"></video> </body> </html> </code></pre> <h4>其他常用属性</h4> <ul> <li><code>autoplay</code>：视频页面加载完成后自动播放，同样受浏览器限制。</li> </ul> <pre><code class="prism language-html"><video src="example.mp4" controls autoplay width="640" height="360"></video> </code></pre> <ul> <li><code>loop</code>：视频播放完后自动循环播放。</li> </ul> <pre><code class="prism language-html"><video src="example.mp4" controls loop width="640" height="360"></video> </code></pre> <ul> <li><code>preload</code>：指定视频在页面加载时的预加载策略，可选值与 <code><audio></code> 元素相同。</li> </ul> <pre><code class="prism language-html"><video src="example.mp4" controls preload="auto" width="640" height="360"></video> </code></pre> <ul> <li><code>poster</code>：指定视频播放前显示的海报图片的 URL，当用户还未开始播放视频时，会显示该图片。</li> </ul> <pre><code class="prism language-html"><video src="example.mp4" controls poster="poster.jpg" width="640" height="360"></video> </code></pre> <h4>支持多种视频格式</h4> 为了兼容不同浏览器，同样可以使用 <code><source></code> 元素提供多种视频格式。 <pre><code class="prism language-html"><video controls width="640" height="360"> <source src="example.mp4" type="video/mp4"> <source src="example.webm" type="video/webm"> 您的浏览器不支持视频播放。 </video> </code></pre> <h2>网页的简单布局</h2> HTML 页面具有特定的结构，合理的页面结构有助于提升网页的可读性、可维护性，同时也有利于搜索引擎优化（SEO）。下面从整体框架、头部信息、主体内容和辅助结构等方面详细分析 HTML 页面结构。 <h3>整体框架</h3> 一个标准的 HTML 页面包含文档类型声明、HTML 根元素，HTML 根元素内又分为头部（<code><head></code>）和主体（<code><body></code>）两大部分。以下是基本结构示例： <pre><code class="prism language-html"><!DOCTYPE html> <html lang="zh-CN"> <head>  </head> <body>  </body> </html> </code></pre> <ul> <li><code><!DOCTYPE html></code>：这是文档类型声明，它告诉浏览器当前页面使用的是 HTML5 标准。不同的 HTML 版本有不同的文档类型声明，HTML5 的声明最为简洁。</li> <li><code><html></code>：HTML 文档的根标签，所有的 HTML 元素都要包含在<code><html></code>和<code></html></code>之间。<code>lang="zh-CN"</code>表示页面语言为中文（中国大陆地区），这有助于搜索引擎和屏幕阅读器等工具更好地理解页面内容。</li> </ul> <h3>头部信息（<code><head></code>）</h3> 头部信息包含了页面的元数据，这些数据不会直接显示在页面上，但对页面的运行和搜索引擎优化等方面起着重要作用。 <pre><code class="prism language-html"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>页面标题</title> <link rel="stylesheet" href="styles.css"> <script src="script.js"></script> </head> </code></pre> <ul> <li><code><meta></code>标签 <ul> <li>字符编码：<code><meta charset="UTF-8"></code>指定了页面的字符编码为 UTF - 8，这样可以正确显示各种语言的字符，避免出现乱码问题。</li> <li>视口设置：<code><meta name="viewport" content="width=device-width, initial-scale=1.0"></code>用于适配移动设备，<code>width=device-width</code>表示页面宽度等于设备的屏幕宽度，<code>initial-scale=1.0</code>表示初始缩放比例为 1.0。</li> <li>其他元数据：还可以通过<code><meta></code>标签设置页面的描述、关键词等信息，例如<code><meta name="description" content="这是一个关于HTML页面结构的示例页面"></code>，这些信息有助于搜索引擎了解页面内容。</li> </ul> </li> <li><code><title></code>标签：定义了页面的标题，它会显示在浏览器的标题栏或标签页上，是搜索引擎优化的重要元素之一，应简洁明了地概括页面内容。</li> <li><code><link></code>标签：通常用于引入外部的 CSS 文件，为页面添加样式。<code>rel="stylesheet"</code>表示链接的是样式表，<code>href="styles.css"</code>指定了 CSS 文件的路径。</li> <li><code><script></code>标签：用于引入外部的 JavaScript 文件，为页面添加交互功能。<code>src="script.js"</code>指定了 JavaScript 文件的路径。</li> </ul> <h3>主体内容（<code><body></code>）</h3> 主体内容是用户在浏览器中实际看到的部分，包含了各种 HTML 元素，如标题、段落、图像、链接等。 <pre><code class="prism language-html"><body>  <header> <h1>网站标题</h1> <nav> <ul> <li><a href="#">首页</a></li> <li><a href="#">关于我们</a></li> <li><a href="#">服务项目</a></li> <li><a href="#">联系我们</a></li> </ul> </nav> </header>  <main> <article> <h2>文章标题</h2> <p>这是文章的正文内容。可以包含多个段落，详细阐述相关主题。</p> <img src="example.jpg" alt="示例图片"> </article> </main>  <aside> <h3>侧边栏标题</h3> <p>这里可以放置一些补充信息，如广告、推荐内容等。</p> </aside>  <footer> <p>版权所有 © 2025</p> </footer> </body> </code></pre> <ul> <li><code><header></code>标签：通常包含网站的标题、导航菜单等信息，作为页面或页面中某个区域的页眉。</li> <li><code><nav></code>标签：用于定义导航链接，包含一组导航菜单，方便用户在页面之间进行跳转。</li> <li><code><main></code>标签：表示页面的主要内容，一个页面应该只有一个<code><main></code>元素，它不包含侧边栏、页眉页脚等内容。</li> <li><code><article></code>标签：用于表示一个独立的、完整的内容块，如一篇文章、博客帖子等，具有自己的标题和正文。</li> <li><code><img></code>标签：用于在页面中插入图像，<code>src</code>属性指定图像的文件路径或 URL，<code>alt</code>属性提供图像的替代文本，当图像无法显示时会显示该文本。</li> <li><code><aside></code>标签：通常用于放置与主要内容相关的补充信息，如侧边栏、广告等。</li> <li><code><footer></code>标签：作为页面或页面中某个区域的页脚，通常包含版权信息、联系方式等。</li> </ul> <h3>辅助结构</h3> 除了上述主要部分，HTML 页面还可以包含一些辅助结构，如<code><section></code>标签用于将页面内容进行分段，<code><div></code>标签用于对元素进行分组，方便进行样式设置和布局控制。 <pre><code class="prism language-html"><section> <h2>分段标题</h2> <p>这是分段的内容。</p> </section> <div class="container"> <p>这是一个分组的内容。</p> </div> </code></pre> <ul> <li><code><section></code>标签：表示页面中的一个章节或区段，通常包含一个标题和相关的内容。</li> <li><code><div></code>标签：是一个通用的块级元素，本身没有特定的语义，主要用于将页面元素进行分组，通过 CSS 对其进行样式设置和布局控制。</li> </ul> <h2>内联框架 iframe</h2> HTML 内联框架 <code><iframe></code> 是一个非常实用的元素，它允许在当前 HTML 页面中嵌入另一个 HTML 页面。以下是关于 <code><iframe></code> 的详细介绍： <h3>基本语法</h3> <code><iframe></code>标签需要同时有开始标签 <code><iframe></code> 和结束标签 <code></iframe></code>，其基本语法如下： <pre><code class="prism language-html"><iframe src="URL" width="宽度" height="高度"></iframe> </code></pre> <ul> <li><code>src</code> 属性：必需属性，指定要嵌入的网页的 URL。</li> <li><code>width</code> 和 <code>height</code> 属性：用于设置内联框架的宽度和高度，单位可以是像素（px）或百分比（%）。</li> </ul> <h3>示例代码</h3> <pre><code class="prism language-html"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Iframe Example</title> </head> <body> <h1>使用 iframe 嵌入网页</h1> <iframe src="https://www.example.com" width="800" height="600"></iframe> </body> </html> </code></pre> 在这个例子中，一个宽度为 800 像素、高度为 600 像素的内联框架会被创建，并且在其中加载 <code>https://www.example.com</code> 这个网页。 <h3>常用属性</h3> <h4><code>src</code></h4> 指定要嵌入的网页的 URL，可以是外部网页，也可以是同一网站内的页面。 <pre><code class="prism language-html"><iframe src="local-page.html" width="500" height="300"></iframe> </code></pre> <h4><code>width</code> 和 <code>height</code></h4> 设置内联框架的宽度和高度。可以使用像素值或者百分比。 <pre><code class="prism language-html"><iframe src="https://example.com" width="50%" height="400px"></iframe> </code></pre> <h4><code>frameborder</code></h4> 设置内联框架的边框，值为 <code>0</code> 表示不显示边框，<code>1</code> 表示显示边框。不过该属性已逐渐被 CSS 替代，现在更推荐使用 CSS 来控制边框样式。 <pre><code class="prism language-html"><iframe src="page.html" frameborder="0"></iframe> </code></pre> <h4><code>allowfullscreen</code></h4> 允许内联框架中的内容以全屏模式显示，常用于嵌入视频等场景。 <pre><code class="prism language-html"><iframe src="video.html" allowfullscreen></iframe> </code></pre> <h4><code>sandbox</code></h4> 为内联框架提供额外的安全限制，它可以限制内联框架中页面的某些行为，例如阻止脚本执行、表单提交等。 <pre><code class="prism language-html"><iframe src="untrusted-page.html" sandbox></iframe> </code></pre> <code>sandbox</code> 属性可以有多个值，如 <code>allow-scripts</code> 允许执行脚本，<code>allow-forms</code> 允许提交表单等。例如： <pre><code class="prism language-html"><iframe src="untrusted-page.html" sandbox="allow-scripts allow-forms"></iframe> </code></pre> <h2>表单</h2> <h3>表单基础</h3> <h4>表单的定义</h4> HTML 表单是一种用于用户输入数据的结构，通过 <code><form></code> 元素创建。表单允许用户输入文本、选择选项、上传文件等，并将这些数据发送到服务器进行处理。 <h4>基本结构</h4> <pre><code class="prism language-html"><form action="处理数据的URL" method="提交方法">  <input type="text" name="字段名"> <input type="submit" value="提交"> </form> </code></pre> <ul> <li><code><form></code> 标签：是表单的容器，所有表单元素都应放在这个标签内部。</li> <li><code>action</code> 属性：指定表单数据要发送到的服务器端脚本的 URL。</li> <li><code>method</code> 属性：定义表单数据的提交方式，主要有 <code>GET</code> 和 <code>POST</code>。</li> </ul> <h4>提交方式</h4> <ul> <li>GET 方式 表单数据会附加在 URL 后面，以键值对的形式出现，例如 <code>http://example.com/form.php?username=john&age=25</code>。数据会显示在浏览器的地址栏中，不适合传输敏感信息，且传输的数据量有限。</li> </ul> <pre><code class="prism language-html"><form action="process.php" method="GET"> <input type="text" name="username"> <input type="submit" value="提交"> </form> </code></pre> <ul> <li>POST 方式 表单数据放在 HTTP 请求的消息体中，不会显示在 URL 中，适合传输敏感信息，且传输的数据量没有限制。</li> </ul> <pre><code class="prism language-html"><form action="process.php" method="POST"> <input type="text" name="username"> <input type="submit" value="提交"> </form> </code></pre> <h4>表单提交的目标</h4> 可以通过 <code>target</code> 属性指定表单提交后响应页面的显示位置。 <ul> <li><code>_self</code>：在当前窗口打开响应页面（默认值）。</li> <li><code>_blank</code>：在新窗口打开响应页面。</li> </ul> <pre><code class="prism language-html"><form action="process.php" method="POST" target="_blank"> <input type="text" name="username"> <input type="submit" value="提交"> </form> </code></pre> <h3>表单元素</h3> <h4><code><input></code> 元素</h4> <code><input></code> 是最常用的表单元素，通过 <code>type</code> 属性可以定义不同类型的输入框。 <ul> <li>文本输入框（<code>type="text"</code>）</li> </ul> <pre><code class="prism language-html"><input type="text" name="username" placeholder="请输入用户名"> </code></pre> <ul> <li>密码输入框（<code>type="password"</code>）</li> </ul> <pre><code class="prism language-html"><input type="password" name="password" placeholder="请输入密码"> </code></pre> <ul> <li>单选按钮（<code>type="radio"</code>）</li> </ul> <pre><code class="prism language-html"><input type="radio" name="gender" value="male"> 男 <input type="radio" name="gender" value="female"> 女 </code></pre> 同一组单选按钮需有相同的 <code>name</code> 属性，用户只能选择其中一个。 <ul> <li>复选框（<code>type="checkbox"</code>）</li> </ul> <pre><code class="prism language-html"><input type="checkbox" name="hobbies" value="reading"> 阅读 <input type="checkbox" name="hobbies" value="swimming"> 游泳 </code></pre> 用户可以选择多个复选框。 <ul> <li>文件选择框（<code>type="file"</code>）</li> </ul> <pre><code class="prism language-html"><input type="file" name="avatar"> </code></pre> 允许用户选择本地文件进行上传。 <ul> <li>隐藏输入框（<code>type="hidden"</code>）</li> </ul> <pre><code class="prism language-html"><input type="hidden" name="form_id" value="123"> </code></pre> 用于存储一些不需要用户看到但需要随表单一起提交的数据。 <ul> <li>提交按钮（<code>type="submit"</code>）</li> </ul> <pre><code class="prism language-html"><input type="submit" value="提交"> </code></pre> 点击该按钮会将表单数据提交到 <code>action</code> 指定的 URL。 <ul> <li>重置按钮（<code>type="reset"</code>）</li> </ul> <pre><code class="prism language-html"><input type="reset" value="重置"> </code></pre> 点击该按钮会将表单中的所有输入项重置为初始值。 <ul> <li>按钮（<code>type="button"</code>）</li> </ul> <pre><code class="prism language-html"><input type="button" value="自定义按钮" onclick="customFunction()"> </code></pre> 通常用于执行自定义的 JavaScript 函数。 <h4><code><textarea></code> 元素</h4> 用于输入多行文本。 <pre><code class="prism language-html"><textarea name="message" rows="5" cols="30" placeholder="请输入留言内容"></textarea> </code></pre> <ul> <li><code>rows</code> 属性指定文本框的行数。</li> <li><code>cols</code> 属性指定文本框的列数。</li> </ul> <h4><code><select></code> 和 <code><option></code> 元素</h4> 用于创建下拉列表。 <pre><code class="prism language-html"><select name="country"> <option value="china">中国</option> <option value="usa">美国</option> <option value="uk">英国</option> </select> </code></pre> 可以使用 <code>selected</code> 属性设置默认选中项： <pre><code class="prism language-html"><select name="country"> <option value="china" selected>中国</option> <option value="usa">美国</option> <option value="uk">英国</option> </select> </code></pre> <h4><code><datalist></code> 元素</h4> 与 <code><input></code> 元素配合使用，提供一个预定义的选项列表供用户选择。 <pre><code class="prism language-html"><input list="browsers" name="browser"> <datalist id="browsers"> <option value="Chrome"> <option value="Firefox"> <option value="Safari"> </datalist> </code></pre> <h3>表单属性</h3> <h4>通用属性</h4> <ul> <li><code>name</code> 属性：用于标识表单元素，服务器通过该属性名来获取表单数据。</li> <li><code>value</code> 属性：设置表单元素的值，对于不同类型的元素有不同的用途。</li> <li><code>disabled</code> 属性：禁用表单元素，用户无法对其进行操作。</li> </ul> <pre><code class="prism language-html"><input type="text" name="username" disabled> </code></pre> <ul> <li><code>readonly</code> 属性：设置表单元素为只读，用户可以看到其值但无法修改。</li> </ul> <pre><code class="prism language-html"><input type="text" name="email" value="example@example.com" readonly> </code></pre> <h4>HTML5 新增属性</h4> <ul> <li><code>placeholder</code> 属性：在输入框中显示提示信息，当用户输入内容时提示信息消失。</li> </ul> <pre><code class="prism language-html"><input type="text" name="username" placeholder="请输入用户名"> </code></pre> <ul> <li><code>autofocus</code> 属性：使表单元素在页面加载时自动获得焦点。</li> </ul> <pre><code class="prism language-html"><input type="text" name="username" autofocus> </code></pre> <ul> <li><code>required</code> 属性：指定表单元素为必填项。</li> </ul> <pre><code class="prism language-html"><input type="text" name="username" required> </code></pre> <h3>表单验证</h3> <ul> <li><code>pattern</code> 属性：使用正则表达式指定输入值必须匹配的模式。</li> </ul> <pre><code class="prism language-html"><input type="text" name="phone" pattern="[0-9]{11}" placeholder="请输入 11 位手机号码"> </code></pre> <ul> <li><code>min</code> 和 <code>max</code> 属性：适用于 <code>type="number"</code>、<code>type="date"</code> 等类型的输入框，设置输入值的最小值和最大值。</li> </ul> <pre><code class="prism language-html"><input type="number" name="age" min="18" max="100"> </code></pre> <ul> <li><code>minlength</code> 和 <code>maxlength</code> 属性：用于限制输入文本的最小和最大长度。</li> </ul> <pre><code class="prism language-html"><input type="text" name="password" minlength="6" maxlength="20"> </code></pre> </div> </div> </div> </div> </div>  <div id="SOHUCS" sid="1899035133520965632"></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">  <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>  <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>  <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/1940614214813020160.htm" title="axure基础操作" target="_blank">axure基础操作</a> 逾非时 <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/1940614088430252032.htm" title="URL时间戳参数深度解析：缓存破坏与前端优化的前世今生" target="_blank">URL时间戳参数深度解析：缓存破坏与前端优化的前世今生</a> 是2的10次方啊 <a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%B8%A9%E5%9D%91%E6%97%A5%E8%AE%B0/1.htm">开发踩坑日记</a><a class="tag" taget="_blank" href="/search/%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%9F%A5%E8%AF%86%E7%A7%91%E6%99%AE/1.htm">计算机知识科普</a><a class="tag" taget="_blank" href="/search/%E5%8E%9F%E7%90%86%E5%88%86%E6%9E%90/1.htm">原理分析</a><a class="tag" taget="_blank" href="/search/%E7%BC%93%E5%AD%98/1.htm">缓存</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>URL时间戳参数深度解析：缓存破坏与前端优化的前世今生在日常的Web开发中，你是否注意到很多接口URL后面都会带有一个时间戳参数？比如xxx/getMsg?_=1751413509056。这个看似简单的参数背后，却隐藏着前端缓存策略、性能优化等重要技术原理。今天，让我们跟随小李和小王的对话，深入探讨这个参数的前世今生。小李的困惑：神秘的URL参数小李：小王，我最近在工作中发现一个奇怪的现象，很多接</div> </li> <li><a href="/article/1940612828956258304.htm" title="打造 AI 产品的前端架构：响应式、流式、智能交互三合一" target="_blank">打造 AI 产品的前端架构：响应式、流式、智能交互三合一</a> <div>关键点AI产品前端挑战：AI产品前端需要处理流式响应、上下文管理、多模型切换和复杂的用户交互，同时保证高性能和响应式体验。流式响应：通过Server-SentEvents（SSE）或WebSocket实现实时数据流，提升用户感知的响应速度。多模型切换：支持动态切换AI模型（如GPT-4、Grok），并优化上下文缓存和token预估。会话持久化：通过本地存储或后端数据库保存用户会话，支持编辑和恢复功</div> </li> <li><a href="/article/1940610431387234304.htm" title="C# 解决请求被中止：无法建立SSL / TLS安全通道问题" target="_blank">C# 解决请求被中止：无法建立SSL / TLS安全通道问题</a> weixin_45866907 <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> 半吊子的程序狗 <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> COLDEHY <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/1940602862836969472.htm" title="写代码写到 60 岁：我是如何重新定义技术人生的" target="_blank">写代码写到 60 岁：我是如何重新定义技术人生的</a> 十步杀一人_千里不留行 <a class="tag" taget="_blank" href="/search/%E7%A8%8B%E5%BA%8F%E4%BA%BA%E7%94%9F/1.htm">程序人生</a> <div>我44岁，写了10年Java，现在在新西兰职场从头来过。曾经我也焦虑：“是不是到了这个年龄就该转管理？”但现在我清楚地知道，我依然热爱写代码，而且我可以一直写下去，只要我用对了方法、站稳了定位。我不想当CTO，我只想踏实交付系统这几年，我不断在Java、C#、React、.NET、前端、后端、移动端、AI等各种技术栈之间“穿梭”，有些是项目需要，有些是自学试验。有人问我：你到底擅长哪个领域？我的回</div> </li> <li><a href="/article/1940601728483258368.htm" title="【高频考点精讲】React Hooks使用指南：useEffect的依赖数组你真的用对了吗？" target="_blank">【高频考点精讲】React Hooks使用指南：useEffect的依赖数组你真的用对了吗？</a> 全栈老李技术面试 <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E9%AB%98%E9%A2%91%E8%80%83%E7%82%B9%E7%B2%BE%E8%AE%B2/1.htm">前端高频考点精讲</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><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95%E9%A2%98/1.htm">面试题</a><a class="tag" taget="_blank" href="/search/react/1.htm">react</a><a class="tag" taget="_blank" href="/search/vue/1.htm">vue</a> <div>ReactHooks使用指南：useEffect的依赖数组你真的用对了吗？‍作者：全栈老李更新时间：2025年5月‍适合人群：前端初学者、进阶开发者版权：本文由全栈老李原创，转载请注明出处。大家好，我是全栈老李。今天咱们来聊聊ReactHooks中那个让人又爱又恨的useEffect，特别是它的依赖数组——这个看似简单实则暗藏玄机的部分。依赖数组是什么鬼？useEffect的第二个参数是个数组，R</div> </li> <li><a href="/article/1940600594850967552.htm" title="请求被中止: 未能创建 SSL/TLS 安全通道（.net framework 4.0 解决方法）" target="_blank">请求被中止: 未能创建 SSL/TLS 安全通道（.net framework 4.0 解决方法）</a> dearbaba_11 <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/1940598702578135040.htm" title="那些年错过的React组件单元测试（上）" target="_blank">那些年错过的React组件单元测试（上）</a> 前端森林 <a class="tag" taget="_blank" href="/search/%E5%B8%A6%E4%BD%A0%E6%8E%A2%E7%A7%98%E5%89%8D%E7%AB%AF%E6%A3%AE%E6%9E%97/1.htm">带你探秘前端森林</a><a class="tag" taget="_blank" href="/search/%E5%8D%95%E5%85%83%E6%B5%8B%E8%AF%95/1.htm">单元测试</a><a class="tag" taget="_blank" href="/search/react.js/1.htm">react.js</a> <div>写在前面关于前端单元测试，其实两年前我就已经关注了，但那时候只是简单的知道断言，想着也不是太难的东西，项目中也没有用到，然后就想当然的认为自己就会了。两年后的今天，部门要对以往的项目补加单元测试。真到了开始着手的时候，却懵了我以为的我以为却把自己给坑了，我发现自己对于前端单元测试一无所知。然后我翻阅了大量的文档，发现基于dva的单元测试文档比较少，因此在有了一番实践之后，我梳理了几篇文章，希望对于</div> </li> <li><a href="/article/1940591645409996800.htm" title="导购APP的技术架构与用户体验优化" target="_blank">导购APP的技术架构与用户体验优化</a> 省赚客APP开发者@聚娃科技 <a class="tag" taget="_blank" href="/search/%E6%9E%B6%E6%9E%84/1.htm">架构</a><a class="tag" taget="_blank" href="/search/ux/1.htm">ux</a> <div>导购APP的技术架构与用户体验优化大家好，我是阿可，微赚淘客系统及省赚客APP创始人，是个冬天不穿秋裤，天冷也要风度的程序猿！随着移动互联网的快速发展，导购APP已成为连接用户与商品的桥梁。本文将探讨导购APP的技术架构设计以及如何通过技术手段优化用户体验。技术架构概览导购APP的技术架构通常包括以下几个关键部分：前端展示层：负责用户界面的展示和交互。后端服务层：处理业务逻辑，提供API接口。数据</div> </li> <li><a href="/article/1940571980860289024.htm" title="在LINUX下使用模拟器运行Android" target="_blank">在LINUX下使用模拟器运行Android</a> renjin252252252 <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> leoleocs <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/1940564285268750336.htm" title="Vue简介，什么是Vue（Vue3）？" target="_blank">Vue简介，什么是Vue（Vue3）？</a> 水云桐程序员 <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/1940557227597295616.htm" title="用鸿蒙打造真正的跨设备数据库：从零实现分布式存储" target="_blank">用鸿蒙打造真正的跨设备数据库：从零实现分布式存储</a> 网罗开发 <a class="tag" taget="_blank" href="/search/HarmonyOS/1.htm">HarmonyOS</a><a class="tag" taget="_blank" href="/search/%E5%AE%9E%E6%88%98%E6%BA%90%E7%A0%81/1.htm">实战源码</a><a class="tag" taget="_blank" href="/search/%E5%AE%9E%E6%88%98/1.htm">实战</a><a class="tag" taget="_blank" href="/search/harmonyos/1.htm">harmonyos</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/%E5%88%86%E5%B8%83%E5%BC%8F/1.htm">分布式</a> <div>网罗开发（小红书、快手、视频号同名）大家好，我是展菲，目前在上市企业从事人工智能项目研发管理工作，平时热衷于分享各种编程领域的软硬技能知识以及前沿技术，包括iOS、前端、HarmonyOS、Java、Python等方向。在移动端开发、鸿蒙开发、物联网、嵌入式、云原生、开源等领域有深厚造诣。图书作者：《ESP32-C3物联网工程开发实战》图书作者：《SwiftUI入门，进阶与实战》超级个体：CO</div> </li> <li><a href="/article/1940548526031302656.htm" title="OpenLayers 入门指南【一】：WebGIS基础与OpenLayers概述" target="_blank">OpenLayers 入门指南【一】：WebGIS基础与OpenLayers概述</a> 凌往昔 <a class="tag" taget="_blank" href="/search/OpenLayers/1.htm">OpenLayers</a><a class="tag" taget="_blank" href="/search/%E5%85%A5%E9%97%A8%E6%8C%87%E5%8D%97/1.htm">入门指南</a><a class="tag" taget="_blank" href="/search/WebGIS/1.htm">WebGIS</a><a class="tag" taget="_blank" href="/search/OpenLayers/1.htm">OpenLayers</a> <div>目录一、什么是WebGIS1.定义2.常用技术栈3.典型应用场景二、什么是OpenLayers1、核心功能特性2、对比Leaflet3、应用场景与发展趋势三、总结一、什么是WebGIS1.定义WebGIS（网络地理信息系统）是传统GIS在互联网领域的延伸，通过浏览器实现空间数据的发布、共享与交互。其核心在于将地理信息处理与Web技术结合，支持跨平台、分布式的地理数据访问2.常用技术栈前端框架：Op</div> </li> <li><a href="/article/1940546132056797184.htm" title="php 输出pdf流文件,php使用tcpdf导出pdf文件" target="_blank">php 输出pdf流文件,php使用tcpdf导出pdf文件</a> 传兮留学Transit <a class="tag" taget="_blank" href="/search/php/1.htm">php</a><a class="tag" taget="_blank" href="/search/%E8%BE%93%E5%87%BApdf%E6%B5%81%E6%96%87%E4%BB%B6/1.htm">输出pdf流文件</a> <div>需求:将页面中内容以pdf形式导出准备:TCPDF地址：https://tcpdf.org/思路:前端获取到要导出页面的html传递给后端，后端通过tcpdf来进行导出操作。前端代码如下://......//要导出的内容//......导出pdf//......functionexPdf(){varhtml=document.getElementById("pdf-content").innerH</div> </li> <li><a href="/article/1940542344348626944.htm" title="TypeScript简介" target="_blank">TypeScript简介</a> 難釋懷 <a class="tag" taget="_blank" href="/search/typescript/1.htm">typescript</a><a class="tag" taget="_blank" href="/search/ubuntu/1.htm">ubuntu</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>一、前言随着前端开发的快速发展，JavaScript已经成为构建现代Web应用的核心语言。然而，随着项目规模的增长，JavaScript在类型安全性、代码可维护性和团队协作方面逐渐显现出不足。为了解决这些问题，TypeScript应运而生。它不仅保留了JavaScript的灵活性，还引入了强大的静态类型系统和面向对象编程能力，极大地提升了大型项目的开发效率与稳定性。本文将带你全面了解TypeScr</div> </li> <li><a href="/article/1940526965727490048.htm" title="[转载] [Mark]分布式存储必读论文" target="_blank">[转载] [Mark]分布式存储必读论文</a> weixin_30945039 <a class="tag" taget="_blank" href="/search/%E5%A4%A7%E6%95%B0%E6%8D%AE/1.htm">大数据</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a> <div>原文:http://50vip.com/423.html分布式存储泛指存储存储和管理数据的系统，与无状态的应用服务器不同，如何处理各种故障以保证数据一致，数据不丢，数据持续可用，是分布式存储系统的核心问题，也是极具挑战的问题。本文总结了分布式存储领域的经典论文，供大家参考。TheGoogleFileSystem.SanjayGhemawat,HowardGobioff,andShun-TakLeu</div> </li> <li><a href="/article/1940515751102312448.htm" title="大数据项目-Django基于大数据技术实现的农产品销售系统" target="_blank">大数据项目-Django基于大数据技术实现的农产品销售系统</a> IT实战课堂-玲琳娜 <a class="tag" taget="_blank" href="/search/%E8%AE%A1%E7%AE%97%E6%9C%BA%E6%AF%95%E4%B8%9A%E8%AE%BE%E8%AE%A1/1.htm">计算机毕业设计</a><a class="tag" taget="_blank" href="/search/%E5%A4%A7%E6%95%B0%E6%8D%AE/1.htm">大数据</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/spark/1.htm">spark</a><a class="tag" taget="_blank" href="/search/%E7%88%AC%E8%99%AB/1.htm">爬虫</a> <div>《[含文档+PPT+源码等]Django基于大数据技术实现的农产品销售系统》该项目含有源码、文档、PPT、配套开发软件、软件安装教程、包运行成功以及课程答疑与微信售后交流群、送查重系统不限次数免费查重等福利！数据库管理工具：phpstudy/Navicat或者phpstudy/sqlyog后台管理系统涉及技术：后台使用框架：Django前端使用技术：Vue,HTML5,CSS3、JavaScrip</div> </li> <li><a href="/article/1940511713472344064.htm" title="axios的使用以及封装" target="_blank">axios的使用以及封装</a> whhhhhhhhhw <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/axios/1.htm">axios</a> <div>前言：在现代前端开发中，网络请求是不可避免的核心功能之一。无论是获取后端数据、提交表单信息，还是与第三方API交互，高效且可靠的HTTP请求库至关重要。axios作为一款基于Promise的HTTP客户端，凭借其简洁的API设计、强大的拦截器机制以及广泛的浏览器和Node.js兼容性，成为开发者首选的工具之一。axios不仅提供了基础的GET、POST等请求方法，还支持请求和响应的拦截、取消请求、</div> </li> <li><a href="/article/1940489139090681856.htm" title="＜电子幽灵＞前端第一件：HTML基础笔记下" target="_blank">＜电子幽灵＞前端第一件：HTML基础笔记下</a> 靈镌sama <a class="tag" taget="_blank" href="/search/%E7%94%B5%E5%AD%90%E5%B9%BD%E7%81%B5%E9%9A%8F%E6%89%8B%E8%AE%B0/1.htm">电子幽灵随手记</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a> <div>HTML基础笔记（下）介绍费曼学习法最重要的部分，即把知识教给一个完全不懂的孩子——或者小白。为了更好的自我学习，也为了让第一次接触某个知识范畴的同学快速入门，我会把我的学习笔记整理成电子幽灵系列。提示：文章的是以解释-代码块-解释的结构呈现的。当你看到代码块并准备复制复现的时候，最好先保证自己看过了代码块前后的解释。＜电子幽灵＞前端第一件：HTML基础笔记上中，最基础的一部分HTML标签和已经以</div> </li> <li><a href="/article/1940488256630091776.htm" title="基于 Three.js 与 WebGL 的商场全景 VR 导航系统源码级解析" target="_blank">基于 Three.js 与 WebGL 的商场全景 VR 导航系统源码级解析</a> 维小帮定位导航 <a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/vr/1.htm">vr</a><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/%E5%9C%BA%E6%99%AF%E4%BC%98%E5%8C%96/1.htm">场景优化</a><a class="tag" taget="_blank" href="/search/WebGL/1.htm">WebGL</a><a class="tag" taget="_blank" href="/search/%E7%89%A9%E8%81%94%E7%BD%91/1.htm">物联网</a><a class="tag" taget="_blank" href="/search/%E6%99%BA%E6%85%A7%E5%95%86%E5%9C%BA/1.htm">智慧商场</a> <div>本文面向Web前端开发者、WebGL/Three.js爱好者、对VR/AR应用开发感兴趣的技术人员、智慧商场解决方案开发者。详细介绍如何利用WebGL(Three.js框架)构建高性能的商场全景VR环境，并实现精准的室内定位与3D路径规划导航功能。如需获取商场全景VR导航系统解决方案请前往文章最下方获取，如有项目合作及技术交流欢迎私信作者。一、商场全景VR导航的核心技术概述商场全景VR导航融合了全</div> </li> <li><a href="/article/1940485359297163264.htm" title="基于 Vue + RuoYi 架构设计的商城Web/小程序实训课程" target="_blank">基于 Vue + RuoYi 架构设计的商城Web/小程序实训课程</a> 速易达网络 <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/uni-app/1.htm">uni-app</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a> <div>以下是基于Vue+RuoYi架构设计的商城Web/小程序实训课程方案，结合企业级开发需求与教学实践，涵盖全栈技术栈与实战模块：一、课程概述目标：通过Vue前端+RuoYi后端（SpringBoot）开发企业级电商系统，实现多终端（Web/H5/小程序）适配，覆盖从架构设计到部署上线的全流程。周期：8周（建议每日3小时）适合人群：具备基础Java/Vue知识的开发者，熟悉HTML/CSS/JavaS</div> </li> <li><a href="/article/1940485106791673856.htm" title="微信小程序实现websocket及单人聊天功能" target="_blank">微信小程序实现websocket及单人聊天功能</a> 蝶妹妹 <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/websocket/1.htm">websocket</a><a class="tag" taget="_blank" href="/search/%E5%B0%8F%E7%A8%8B%E5%BA%8F/1.htm">小程序</a> <div>一、什么是websocket：WebSocket是HTML5下一种新的协议（websocket协议本质上是一个基于tcp的协议）它实现了浏览器与服务器全双工通信，能更好的节省服务器资源和带宽并达到实时通讯的目的Websocket是一个持久化的协议二、websocket的原理：websocket约定了一个通信的规范，通过一个握手的机制，客户端和服务器之间能建立一个类似tcp的连接，从而方便它们之间的</div> </li> <li><a href="/article/1940479302260813824.htm" title="tauri v2 开源项目学习（二）" target="_blank">tauri v2 开源项目学习（二）</a> <div>前言:tauri2编程，前端部分和electron差不多，框架部分差别大，资料少，官网乱，AI又骗我所以在gitee上，寻找tauriv2开源项目，通过记录框架部分与rust部分的写法，对照确定编程方式tarui2插件，可以查看：https://github.com/tauri-apps/plugins-workspace1.EcoPastehttps://gitee.com/ayangweb/E</div> </li> <li><a href="/article/1940479301208043520.htm" title="tauri v2 开源项目学习（一）" target="_blank">tauri v2 开源项目学习（一）</a> <div>前言:tauri2编程，前端部分和electron差不多，框架部分差别大，资料少，官网乱，AI又骗我所以在gitee上，寻找tauriv2开源项目，通过记录框架部分与rust部分的写法，对照确定编程方式提示：不要在VSCode里自动运行Cargo，在powershell里运行Cargobuild，不会卡住1.tauri-desktophttps://gitee.com/MapleKing/taur</div> </li> <li><a href="/article/1940477916278222848.htm" title="前端与UI如何联手，让数字孪生走进现实生活？" target="_blank">前端与UI如何联手，让数字孪生走进现实生活？</a> 贝格前端工场 <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/ui/1.htm">ui</a> <div>数字孪生（DigitalTwin）作为工业互联网的核心技术，正在通过前端技术与用户界面设计的深度协同，从实验室走向大规模应用场景。这种虚实映射系统要求前端框架突破传统二维界面限制，与UI设计思维共同构建三维可视化、实时交互的新型人机界面。本文将从技术融合、系统挑战、交互创新、场景实践和团队协作五个维度，解析数字孪生落地的关键路径。一、技术融合：可视化框架与UI设计工具链的协同进化现代数字孪生系统需</div> </li> <li><a href="/article/1940475137061089280.htm" title="22-4 SQL注入攻击 - post 基于报错的注入" target="_blank">22-4 SQL注入攻击 - post 基于报错的注入</a> 技术探索 <a class="tag" taget="_blank" href="/search/Web%E5%AE%89%E5%85%A8%E6%94%BB%E9%98%B2%E5%85%A8%E8%A7%A3%E6%9E%90/1.htm">Web安全攻防全解析</a><a class="tag" taget="_blank" href="/search/sql/1.htm">sql</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a> <div>1、post基于错误单引号注入回显分析注入点位置已经发生变化。在浏览器中，无法直接查看和修改注入点。不过，可以通过使用相应的插件来完成修改任务。修改方法：(一般是网站前端做了限制，我们才需要用到bp绕开限制)要修改Less11注入点的请求，可以使用BurpSuite工具来捕获请求包，并使用其中的"Repeater"功能来进行修改。具体操作步骤如下：首先打开BurpSuite并设置代理，然后在浏览器</div> </li> <li><a href="/article/1940471602143621120.htm" title="SpringBoot返回文件让前端下载的几种方式" target="_blank">SpringBoot返回文件让前端下载的几种方式</a> 一朵梨花压海棠go <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/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AF/1.htm">后端</a> <div>01背景在后端开发中，通常会有文件下载的需求，常用的解决方案有两种：不通过后端应用，直接使用nginx直接转发文件地址下载（适用于一些公开的文件，因为这里不需要授权）通过后端进行下载，同时进行一些业务处理本篇主要以方法2进行介绍，方法2的原理步骤如下：读取文件，得到文件的字节流将字节流写入到响应输出流中02一次性读取到内存，通过响应输出流输出到前端@GetMapping("/file/downlo</div> </li> <li><a href="/article/26.htm" title="设计模式介绍" target="_blank">设计模式介绍</a> tntxia <a class="tag" taget="_blank" href="/search/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/1.htm">设计模式</a> <div>设计模式来源于土木工程师克里斯托弗亚历山大（http://en.wikipedia.org/wiki/Christopher_Alexander）的早期作品。他经常发表一些作品，内容是总结他在解决设计问题方面的经验，以及这些知识与城市和建筑模式之间有何关联。有一天，亚历山大突然发现，重复使用这些模式可以让某些设计构造取得我们期望的最佳效果。亚历山大与萨拉-石川佳纯和穆雷西乐弗斯坦合作</div> </li> <li><a href="/article/153.htm" title="android高级组件使用(一)" target="_blank">android高级组件使用(一)</a> 百合不是茶 <a class="tag" taget="_blank" href="/search/android/1.htm">android</a><a class="tag" taget="_blank" href="/search/RatingBar/1.htm">RatingBar</a><a class="tag" taget="_blank" href="/search/Spinner/1.htm">Spinner</a> <div>1、自动完成文本框（AutoCompleteTextView） AutoCompleteTextView从EditText派生出来，实际上也是一个文本编辑框，但它比普通编辑框多一个功能：当用户输入一个字符后，自动完成文本框会显示一个下拉菜单，供用户从中选择，当用户选择某个菜单项之后，AutoCompleteTextView按用户选择自动填写该文本框。使用AutoCompleteTex</div> </li> <li><a href="/article/280.htm" title="[网络与通讯]路由器市场大有潜力可挖掘" target="_blank">[网络与通讯]路由器市场大有潜力可挖掘</a> comsci <a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C/1.htm">网络</a> <div> 如果国内的电子厂商和计算机设备厂商觉得手机市场已经有点饱和了,那么可以考虑一下交换机和路由器市场的进入问题..... 这方面的技术和知识,目前处在一个开放型的状态,有利于各类小型电子企业进入 &nbs</div> </li> <li><a href="/article/407.htm" title="自写简单Redis内存统计shell" target="_blank">自写简单Redis内存统计shell</a> 商人shang <a class="tag" taget="_blank" href="/search/Linux+shell/1.htm">Linux shell</a><a class="tag" taget="_blank" href="/search/%E7%BB%9F%E8%AE%A1Redis%E5%86%85%E5%AD%98/1.htm">统计Redis内存</a> <div>#!/bin/bash address="192.168.150.128:6666,192.168.150.128:6666" hosts=(${address//,/ }) sfile="staticts.log" for hostitem in ${hosts[@]} do ipport=(${hostitem</div> </li> <li><a href="/article/534.htm" title="单例模式(饿汉 vs懒汉)" target="_blank">单例模式(饿汉 vs懒汉)</a> oloz <a class="tag" taget="_blank" href="/search/%E5%8D%95%E4%BE%8B%E6%A8%A1%E5%BC%8F/1.htm">单例模式</a> <div>package 单例模式; /* * 应用场景:保证在整个应用之中某个对象的实例只有一个 * 单例模式种的《懒汉模式》 * */ public class Singleton { //01 将构造方法私有化，外界就无法用new Singleton()的方式获得实例 private Singleton(){}; //02 申明类得唯一实例 priva</div> </li> <li><a href="/article/661.htm" title="springMvc json支持" target="_blank">springMvc json支持</a> 杨白白 <a class="tag" taget="_blank" href="/search/json+springmvc/1.htm">json springmvc</a> <div>1.Spring mvc处理json需要使用jackson的类库，因此需要先引入jackson包 2在spring mvc中解析输入为json格式的数据:使用@RequestBody来设置输入 @RequestMapping("helloJson") public @ResponseBody JsonTest helloJson() { </div> </li> <li><a href="/article/788.htm" title="android播放，掃描添加本地音頻文件" target="_blank">android播放，掃描添加本地音頻文件</a> 小桔子 <div> 最近幾乎沒有什麽事情，繼續鼓搗我的小東西。想在項目中加入一個簡易的音樂播放器功能，就像華為p6桌面上那麼大小的音樂播放器。用過天天動聽或者QQ音樂播放器的人都知道，可已通過本地掃描添加歌曲。不知道他們是怎麼實現的，我覺得應該掃描設備上的所有文件，過濾出音頻文件，每個文件實例化為一個實體，記錄文件名、路徑、歌手、類型、大小等信息。具體算法思想，</div> </li> <li><a href="/article/915.htm" title="oracle常用命令" target="_blank">oracle常用命令</a> aichenglong <a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a><a class="tag" taget="_blank" href="/search/dba/1.htm">dba</a><a class="tag" taget="_blank" href="/search/%E5%B8%B8%E7%94%A8%E5%91%BD%E4%BB%A4/1.htm">常用命令</a> <div>1 创建临时表空间 create temporary tablespace user_temp tempfile 'D:\oracle\oradata\Oracle9i\user_temp.dbf' size 50m autoextend on next 50m maxsize 20480m extent management local</div> </li> <li><a href="/article/1042.htm" title="25个Eclipse插件" target="_blank">25个Eclipse插件</a> AILIKES <a class="tag" taget="_blank" href="/search/eclipse%E6%8F%92%E4%BB%B6/1.htm">eclipse插件</a> <div>提高代码质量的插件1. FindBugsFindBugs可以帮你找到Java代码中的bug，它使用Lesser GNU Public License的自由软件许可。2. CheckstyleCheckstyle插件可以集成到Eclipse IDE中去，能确保Java代码遵循标准代码样式。3. ECLemmaECLemma是一款拥有Eclipse Public License许可的免费工具，它提供了</div> </li> <li><a href="/article/1169.htm" title="Spring MVC拦截器+注解方式实现防止表单重复提交" target="_blank">Spring MVC拦截器+注解方式实现防止表单重复提交</a> baalwolf <a class="tag" taget="_blank" href="/search/spring+mvc/1.htm">spring mvc</a> <div>原理：在新建页面中Session保存token随机码，当保存时验证，通过后删除，当再次点击保存时由于服务器端的Session中已经不存在了，所有无法验证通过。 1.新建注解： ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 </div> </li> <li><a href="/article/1296.htm" title="《Javascript高级程序设计(第3版)》闭包理解" target="_blank">《Javascript高级程序设计(第3版)》闭包理解</a> bijian1013 <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a> <div>“闭包是指有权访问另一个函数作用域中的变量的函数。”--《Javascript高级程序设计(第3版)》看以下代码： <script type="text/javascript"> function outer() { var i = 10; return f</div> </li> <li><a href="/article/1423.htm" title="AngularJS Module类的方法" target="_blank">AngularJS Module类的方法</a> bijian1013 <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/AngularJS/1.htm">AngularJS</a><a class="tag" taget="_blank" href="/search/Module/1.htm">Module</a> <div> AngularJS中的Module类负责定义应用如何启动，它还可以通过声明的方式定义应用中的各个片段。我们来看看它是如何实现这些功能的。一.Main方法在哪里如果你是从Java或者Python编程语言转过来的，那么你可能很想知道AngularJS里面的main方法在哪里？这个把所</div> </li> <li><a href="/article/1550.htm" title="[Maven学习笔记七]Maven插件和目标" target="_blank">[Maven学习笔记七]Maven插件和目标</a> bit1129 <a class="tag" taget="_blank" href="/search/maven%E6%8F%92%E4%BB%B6/1.htm">maven插件</a> <div>插件(plugin)和目标(goal) Maven，就其本质而言，是一个插件执行框架，Maven的每个目标的执行逻辑都是由插件来完成的，一个插件可以有1个或者几个目标，比如maven-compiler-plugin插件包含compile和testCompile，即maven-compiler-plugin提供了源代码编译和测试源代码编译的两个目标使用插件和目标使得我们可以干预</div> </li> <li><a href="/article/1677.htm" title="【Hadoop八】Yarn的资源调度策略" target="_blank">【Hadoop八】Yarn的资源调度策略</a> bit1129 <a class="tag" taget="_blank" href="/search/hadoop/1.htm">hadoop</a> <div>1. Hadoop的三种调度策略 Hadoop提供了3中作业调用的策略， FIFO Scheduler Fair Scheduler Capacity Scheduler 以上三种调度算法，在Hadoop MR1中就引入了，在Yarn中对它们进行了改进和完善.Fair和Capacity Scheduler用于多用户共享的资源调度 2. 多用户资源共享的调度 </div> </li> <li><a href="/article/1804.htm" title="Nginx使用Linux内存加速静态文件访问" target="_blank">Nginx使用Linux内存加速静态文件访问</a> ronin47 <div>Nginx是一个非常出色的静态资源web服务器。如果你嫌它还不够快，可以把放在磁盘中的文件，映射到内存中，减少高并发下的磁盘IO。先做几个假设。nginx.conf中所配置站点的路径是/home/wwwroot/res，站点所对应文件原始存储路径：/opt/web/res shell脚本非常简单，思路就是拷贝资源文件到内存中，然后在把网站的静态文件链接指向到内存中即可。具体如下： </div> </li> <li><a href="/article/1931.htm" title="关于Unity3D中的Shader的知识" target="_blank">关于Unity3D中的Shader的知识</a> brotherlamp <a class="tag" taget="_blank" href="/search/unity/1.htm">unity</a><a class="tag" taget="_blank" href="/search/unity%E8%B5%84%E6%96%99/1.htm">unity资料</a><a class="tag" taget="_blank" href="/search/unity%E6%95%99%E7%A8%8B/1.htm">unity教程</a><a class="tag" taget="_blank" href="/search/unity%E8%A7%86%E9%A2%91/1.htm">unity视频</a><a class="tag" taget="_blank" href="/search/unity%E8%87%AA%E5%AD%A6/1.htm">unity自学</a> <div>首先先解释下Unity3D的Shader，Unity里面的Shaders是使用一种叫ShaderLab的语言编写的，它同微软的FX文件或者NVIDIA的CgFX有些类似。传统意义上的vertex shader和pixel shader还是使用标准的Cg/HLSL 编程语言编写的。因此Unity文档里面的Shader，都是指用ShaderLab编写的代码，然后我们来看下Unity3D自带的60多个S</div> </li> <li><a href="/article/2058.htm" title="CopyOnWriteArrayList vs ArrayList" target="_blank">CopyOnWriteArrayList vs ArrayList</a> bylijinnan <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>package com.ljn.base; import java.util.ArrayList; import java.util.Iterator; import java.util.List; import java.util.concurrent.CopyOnWriteArrayList; /** * 总述： * 1.ArrayListi不是线程安全的，CopyO</div> </li> <li><a href="/article/2185.htm" title="内存中栈和堆的区别" target="_blank">内存中栈和堆的区别</a> chicony <a class="tag" taget="_blank" href="/search/%E5%86%85%E5%AD%98/1.htm">内存</a> <div> 1、内存分配方面：堆：一般由程序员分配释放，若程序员不释放，程序结束时可能由OS回收。注意它与数据结构中的堆是两回事，分配方式是类似于链表。可能用到的关键字如下：new、malloc、delete、free等等。栈：由编译器(Compiler)自动分配释放，存放函数的参数值，局部变量的值等。其操作方式类似于数据结构中</div> </li> <li><a href="/article/2312.htm" title="回答一位网友对Scala的提问" target="_blank">回答一位网友对Scala的提问</a> chenchao051 <a class="tag" taget="_blank" href="/search/scala/1.htm">scala</a><a class="tag" taget="_blank" href="/search/map/1.htm">map</a> <div>本来准备在私信里直接回复了，但是发现不太方便，就简要回答在这里。问题写道对于scala的简洁十分佩服，但又觉得比较晦涩，例如一例，Map("a" -> List(11,111)).flatMap(_._2)，可否说下最后那个函数做了什么，真正在开发的时候也会如此简洁？谢谢先回答一点，在实际使用中，Scala毫无疑问就是这么简单。</div> </li> <li><a href="/article/2439.htm" title="mysql 取每组前几条记录" target="_blank">mysql 取每组前几条记录</a> daizj <a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a><a class="tag" taget="_blank" href="/search/%E5%88%86%E7%BB%84/1.htm">分组</a><a class="tag" taget="_blank" href="/search/%E6%9C%80%E5%A4%A7%E5%80%BC/1.htm">最大值</a><a class="tag" taget="_blank" href="/search/%E6%9C%80%E5%B0%8F%E5%80%BC/1.htm">最小值</a><a class="tag" taget="_blank" href="/search/%E6%AF%8F%E7%BB%84%E4%B8%89%E6%9D%A1%E8%AE%B0%E5%BD%95/1.htm">每组三条记录</a> <div>一、对分组的记录取前N条记录：例如：取每组的前3条最大的记录 1.用子查询： SELECT * FROM tableName a WHERE 3> (SELECT COUNT(*) FROM tableName b WHERE b.id=a.id AND b.cnt>a. cnt) ORDER BY a.id,a.account DE</div> </li> <li><a href="/article/2566.htm" title="HTTP深入浅出 http请求" target="_blank">HTTP深入浅出 http请求</a> dcj3sjt126com <a class="tag" taget="_blank" href="/search/http/1.htm">http</a> <div> HTTP(HyperText Transfer Protocol)是一套计算机通过网络进行通信的规则。计算机专家设计出HTTP，使HTTP客户（如Web浏览器）能够从HTTP服务器(Web服务器)请求信息和服务，HTTP目前协议的版本是1.1.HTTP是一种无状态的协议，无状态是指Web浏览器和Web服务器之间不需要建立持久的连接，这意味着当一个客户端向服务器端发出请求，然后We</div> </li> <li><a href="/article/2693.htm" title="判断MySQL记录是否存在方法比较" target="_blank">判断MySQL记录是否存在方法比较</a> dcj3sjt126com <a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a> <div>把数据写入到数据库的时，常常会碰到先要检测要插入的记录是否存在，然后决定是否要写入。　　我这里总结了判断记录是否存在的常用方法：　　sql语句： select count ( * ) from tablename; 　　然后读取count(*)的值判断记录是否存在。对于这种方法性能上有些浪费，我们只是想判断记录记录是否存在，没有必要全部都查出来。</div> </li> <li><a href="/article/2820.htm" title="对HTML XML的一点认识" target="_blank">对HTML XML的一点认识</a> e200702084 <a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/xml/1.htm">xml</a> <div>感谢http://www.w3school.com.cn提供的资料 HTML 文档中的每个成分都是一个节点。节点根据 DOM，HTML 文档中的每个成分都是一个节点。 DOM 是这样规定的：整个文档是一个文档节点每个 HTML 标签是一个元素节点包含在 HTML 元素中的文本是文本节点每一个 HTML 属性是一个属性节点注释属于注释节点 Node 层次 </div> </li> <li><a href="/article/2947.htm" title="jquery分页插件" target="_blank">jquery分页插件</a> genaiwei <a class="tag" taget="_blank" href="/search/jquery/1.htm">jquery</a><a class="tag" taget="_blank" href="/search/Web/1.htm">Web</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%88%86%E9%A1%B5/1.htm">分页</a><a class="tag" taget="_blank" href="/search/%E6%8F%92%E4%BB%B6/1.htm">插件</a> <div>//jquery页码控件// 创建一个闭包 (function($) { // 插件的定义 $.fn.pageTool = function(options) { var totalPa</div> </li> <li><a href="/article/3201.htm" title="Mybatis与Ibatis对照入门于学习" target="_blank">Mybatis与Ibatis对照入门于学习</a> Josh_Persistence <a class="tag" taget="_blank" href="/search/mybatis/1.htm">mybatis</a><a class="tag" taget="_blank" href="/search/ibatis/1.htm">ibatis</a><a class="tag" taget="_blank" href="/search/%E5%8C%BA%E5%88%AB/1.htm">区别</a><a class="tag" taget="_blank" href="/search/%E8%81%94%E7%B3%BB/1.htm">联系</a> <div>一、为什么使用IBatis/Mybatis 对于从事 Java EE 的开发人员来说，iBatis 是一个再熟悉不过的持久层框架了，在 Hibernate、JPA 这样的一站式对象 / 关系映射（O/R Mapping）解决方案盛行之前，iBaits 基本是持久层框架的不二选择。即使在持久层框架层出不穷的今天，iBatis 凭借着易学易用、</div> </li> <li><a href="/article/3328.htm" title="C中怎样合理决定使用那种整数类型？" target="_blank">C中怎样合理决定使用那种整数类型？</a> 秋风扫落叶 <a class="tag" taget="_blank" href="/search/c/1.htm">c</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E7%B1%BB%E5%9E%8B/1.htm">数据类型</a> <div>如果需要大数值(大于32767或小于32767), 使用long 型。否则, 如果空间很重要 (如有大数组或很多结构), 使用 short 型。除此之外, 就使用 int 型。如果严格定义的溢出特征很重要而负值无关紧要, 或者你希望在操作二进制位和字节时避免符号扩展的问题, 请使用对应的无符号类型。但是, 要注意在表达式中混用有符号和无符号值的情况。 &nbs</div> </li> <li><a href="/article/3455.htm" title="maven问题" target="_blank">maven问题</a> zhb8015 <a class="tag" taget="_blank" href="/search/maven%E9%97%AE%E9%A2%98/1.htm">maven问题</a> <div> 问题1： Eclipse 中新建maven项目无法添加src/main/java 问题 eclipse创建maevn web项目，在选择maven_archetype_web原型后，默认只有src/main/resources这个Source Floder。按照maven目录结构，添加src/main/ja</div> </li> <li><a href="/article/3582.htm" title="(二)androidpn-server tomcat版源码解析之--push消息处理" target="_blank">(二)androidpn-server tomcat版源码解析之--push消息处理</a> spjich <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/androdipn/1.htm">androdipn</a><a class="tag" taget="_blank" href="/search/%E6%8E%A8%E9%80%81/1.htm">推送</a> <div>在 (一)androidpn-server tomcat版源码解析之--项目启动这篇中，已经描述了整个推送服务器的启动过程，并且把握到了消息的入口即XmppIoHandler这个类，今天我将继续往下分析下面的核心代码，主要分为3大块，链接创建，消息的发送，链接关闭。先贴一段XmppIoHandler的部分代码 /** * Invoked from an I/O proc</div> </li> <li><a href="/article/3709.htm" title="用js中的formData类型解决ajax提交表单时文件不能被serialize方法序列化的问题" target="_blank">用js中的formData类型解决ajax提交表单时文件不能被serialize方法序列化的问题</a> 中华好儿孙 <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/Ajax/1.htm">Ajax</a><a class="tag" taget="_blank" href="/search/Web/1.htm">Web</a><a class="tag" taget="_blank" href="/search/%E4%B8%8A%E4%BC%A0%E6%96%87%E4%BB%B6/1.htm">上传文件</a><a class="tag" taget="_blank" href="/search/FormData/1.htm">FormData</a> <div> var formData = new FormData($("#inputFileForm")[0]); $.ajax({ type:'post', url:webRoot+"/electronicContractUrl/webapp/uploadfile", data:formData, async: false, ca</div> </li> <li><a href="/article/3836.htm" title="mybatis常用jdbcType数据类型" target="_blank">mybatis常用jdbcType数据类型</a> ysj5125094 <a class="tag" taget="_blank" href="/search/mybatis/1.htm">mybatis</a><a class="tag" taget="_blank" href="/search/mapper/1.htm">mapper</a><a class="tag" taget="_blank" href="/search/jdbcType/1.htm">jdbcType</a> <div> MyBatis 通过包含的jdbcType 类型 BIT FLOAT CHAR </div> </li> </ul> </div> </div> </div> <div> <div class="container"> <div class="indexes"> 按字母分类： <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.  </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>

【一文学会 HTML5】

目录

` - `

`）