神齐

HTML5 笔记

HTML5 是 HTML 最新的修订版本，2014 年 10 月由万维网联盟（W3C）完成标准制定。

HTML5 的设计目的之一是为了在移动设备上支持多媒体。

简介

改进

新元素
新属性
完全支持 CSS3
Video 和 Audio
2D/3D 制图
本地存储
Web 应用

应用

使用 HTML5，可以简单地开发应用。

本地数据存储
访问本地文件
JavaScript 开发
XHTMLHttpRequest 2

图形

使用 HTML5，可以简单地绘制图形：

使用元素
使用内联 SVG
使用 CSS3 2D/CSS 3D

使用 CSS3

新选择器
新属性
动画
2D/3D 转换
圆角
阴影效果
可下载的字体

新元素

为了更好地处理今天的互联网应用，HTML5 添加了很多新元素及功能，比如：图形的绘制、多媒体内容、更好的页面结构、更好的形式处理、几个 API 拖放元素、定位、存储、Web Worker 等。

Canvas 新元素

标签	描述
	标签定义图形，比如图表和其他图像。该标签基于 JavaScript 的绘图 API

新多媒体元素

标签	描述
	音频内容
	视频
	多媒体资源和
	嵌入的内容，比如插件
	为诸如和元素之类的媒介规定外部文本轨道

新表单元素

标签	描述
	选项列表。与 `input` 元素配合使用，来定义 `input` 可能的值
	用于表单的密钥对生成器字段
	不同类型的输出，比如脚本的输出

新的语义和结构元素

HTML5 提供了新的元素来创建更好的页面结构：

标签	描述
	页面独立的内容区域
	页面的侧边栏内容
	允许设置一段文本，使其脱离其父元素的文本方向设置
	命令按钮，比如单选按钮、复选框或按钮
	用于描述文档或文档某个部分的细节
	对话框，比如提示框
	标签包含 `details` 元素的标题
	规定独立的流内容（图像、图表、照片、代码等等）
	元素的标题
	`section` 或 `document` 的页脚
	文档的头部区域
	带有记号的文本
	度量衡。仅用于已知最大和最小值的度量
	导航链接的部分
	任何类型的任务的进度
	`ruby` 注释（中文注音或字符）
	字符（中文注音或字符）的解释或发音
	在 `ruby` 注释中使用，定义不支持 `ruby` 元素的浏览器所显示的内容
	文档中的节（`section`、区段）
	日期或时间
	在文本中的何处适合添加换行符

已移除的元素

以下的 HTML 4.01 元素在 HTML5 中已经被删除：

</code></li> <li><code><strike></code></li> <li><code><tt></code></li> </ul> <h2>Canvas</h2> <p><code><canvas></code> 元素是 HTML5 中的新元素。通过使用该元素，可以在网页中绘制所需的图形。</p> <p>标签定义图形，比如图表和其他图像。必须使用脚本来绘制图形。</p> <p>可以通过多种方法使用 Canvas 绘制路径、盒、圆、字符以及添加图像。</p> <h3>创建一个画布</h3> <p>一个画布（Canvas）在网页中是一个矩形框，通过 <code><canvas></code> 元素来绘制。</p> <p>默认情况下 <code><canvas></code> 元素没有边框和内容。</p> <p><code><canvas></code> 简单示例如下：</p> <pre><code class="html"><canvas id="myCanvas" width="200" height="100"></canvas> </code></pre> <p>标签通常需要指定 <code>id</code> 属性（脚本中经常引用），<code>width</code> 和 <code>height</code> 属性定义画布的大小。</p> <p>可以在 HTML 页面中使用多个 <code><canvas></code> 元素。</p> <p>使用 <code>style</code> 属性来添加边框：</p> <pre><code class="html"><canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"> </canvas> </code></pre> <h3>使用 JavaScript 绘制图像</h3> <p><code>canvas</code> 元素本身是没有绘图能力的。所有的绘制工作必须使用脚本完成：</p> <pre><code class="html"><script> var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.fillStyle = "#FF0000"; ctx.fillRect(0, 0, 150, 75); </script> </code></pre> <p><code>getContext("2d")</code> 对象是内置的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。</p> <p>下面的两行代码绘制一个红色的矩形：</p> <pre><code class="javascript">ctx.fillStyle = "#FF0000"; ctx.fillRect(0, 0, 150, 75); </code></pre> <p><code>fillStyle</code> 属性可以是 CSS 颜色、渐变或图案。<code>fillStyle</code> 默认设置是 #000000（黑色）。</p> <p><code>fillRect(x, y ,width, height)</code> 方法定义了矩形当前的填充方式。</p> <h3>坐标</h3> <p>Canvas 是一个二维网格。</p> <p>Canvas 的左上角坐标为 (0, 0)。</p> <p>上面的 <code>fillRect()</code> 方法有参数 <code>(0, 0, 150, 75)</code>。意思是：在画布上绘制 150×75 的矩形，从左上角开始。</p> <p>如下图所示，画布的 X 和 Y 坐标用于在画布上对绘画进行定位。</p> <div class="image-package"> <div class="image-container" style="max-width: 241px; max-height: 137px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/00a6fb7d030449e980909059f95e027a.png" target="_blank"><img src="http://img.e-com-net.com/image/info10/00a6fb7d030449e980909059f95e027a.png" width="241" height="137" alt="HTML5 笔记_第1张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"> Canvas 坐标示例 </div> </div> <h3>路径</h3> <p>在 Canvas 上画线，下面将使用以下两种方法：</p> <ul> <li> <code>moveTo(x, y)</code> 定义线条起始坐标；</li> <li> <code>lineTo(x, y)</code> 定义线条结束坐标。</li> </ul> <p>绘制线条必须使用到 “ink” 的方法，像 <code>stroke()</code>。</p> <pre><code class="javascript">var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.moveTo(0, 0); ctx.lineTo(200, 100); ctx.stroke(); </code></pre> <div class="image-package"> <div class="image-container" style="max-width: 206px; max-height: 107px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/273cf02726dd490783dac3aa04a28c3b.png" target="_blank"><img src="http://img.e-com-net.com/image/info10/273cf02726dd490783dac3aa04a28c3b.png" width="206" height="107" alt="HTML5 笔记_第2张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"> Canvas 画线 </div> </div> <p>在 Canvas 中绘制圆形，下面将使用以下方法：</p> <ul> <li><code>arc(x, y, r, start, stop)</code></li> </ul> <p>实际上在绘制圆形时使用了 “ink” 的方法，比如 <code>stroke()</code> 或者 <code>fill()</code>。</p> <pre><code class="javascript">var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.beginPath(); ctx.arc(95, 50, 40, 0, 2 * Math.PI); ctx.stroke(); </code></pre> <div class="image-package"> <div class="image-container" style="max-width: 208px; max-height: 107px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/3d7d1181ddb043109999f344f0265078.png" target="_blank"><img src="http://img.e-com-net.com/image/info10/3d7d1181ddb043109999f344f0265078.png" width="208" height="107" alt="HTML5 笔记_第3张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"> Canvas 画圆 </div> </div> <h3>文本</h3> <p>使用 Canvas 绘制文本，重要的属性和方法如下：</p> <ul> <li> <code>font</code>：定义字体；</li> <li> <code>fillText(text, x, y)</code>：在 Canvas 上绘制实心的文本；</li> <li> <code>strokeText(text, x, y)</code>：在 Canvas 上绘制空心的文本。</li> </ul> <p>使用 <code>fillText()</code>：</p> <pre><code class="javascript">var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.font = "30px Arial"; ctx.fillText("Hello World", 10, 50); </code></pre> <div class="image-package"> <div class="image-container" style="max-width: 208px; max-height: 106px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/c86b1eb7026a4c3e8726cf93ffbf5028.png" target="_blank"><img src="http://img.e-com-net.com/image/info10/c86b1eb7026a4c3e8726cf93ffbf5028.png" width="208" height="106" alt="HTML5 笔记_第4张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"> Canvas 绘制实心文本 </div> </div> <p>使用 <code>strokeText()</code>：</p> <pre><code class="javascript">var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.font = "30px Arial"; ctx.strokeText("Hello World", 10, 50); </code></pre> <div class="image-package"> <div class="image-container" style="max-width: 207px; max-height: 107px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/9a92a9d944624fbf91903b25c6dd62b7.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info10/9a92a9d944624fbf91903b25c6dd62b7.jpg" width="207" height="107" alt="HTML5 笔记_第5张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"> Canvas 绘制空心文本 </div> </div> <h3>渐变</h3> <p>渐变可以填充在矩形、圆形、线条、文本等等，各种形状可以自己定义不同的颜色。</p> <p>以下有两种不同的方式来设置 Canvas 渐变：</p> <ul> <li> <code>createLinearGradient(x, y, x1, y1)</code>：创建线条渐变；</li> <li> <code>createRadialGradient(x, y, r, x1, y1, r1)</code>：创建一个径向／圆渐变。</li> </ul> <p>当使用渐变对象时，必须使用两种或两种以上的停止颜色。</p> <p><code>addColorStop()</code> 方法指定颜色停止，参数使用坐标来描述，可以是 0 至 1。</p> <p>使用渐变，设置 <code>fillStyle</code> 或 <code>strokeStyle</code> 的值为渐变，然后绘制形状，如矩形、文本或一条线。</p> <p>使用 <code>createLinearGradient()</code>：</p> <pre><code class="javascript">var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); // 创建渐变 var grd = ctx.createLinearGradient(0, 0, 200, 0); grd.addColorStop(0, "red"); grd.addColorStop(1, "white"); // 填充渐变 ctx.fillStyle = grd; ctx.fillRect(10, 10, 150, 80); </code></pre> <div class="image-package"> <div class="image-container" style="max-width: 207px; max-height: 106px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/5273ff1808b24c47beba0b79323a8a83.png" target="_blank"><img src="http://img.e-com-net.com/image/info10/5273ff1808b24c47beba0b79323a8a83.png" width="207" height="106" alt="HTML5 笔记_第6张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"> Canvas 线性渐变 </div> </div> <p>使用 <code>createRadialGradient()</code>：</p> <pre><code class="javascript">// 创建渐变 var grd = ctx.createRadialGradient(75, 50, 5, 90, 60, 100); grd.addColorStop(0, "red"); grd.addColorStop(1, "white"); // 填充渐变 ctx.fillStyle = grd; ctx.fillRect(10, 10, 150, 80); </code></pre> <div class="image-package"> <div class="image-container" style="max-width: 207px; max-height: 108px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/9dbdc3fd262148e69ed33684fe24694c.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info10/9dbdc3fd262148e69ed33684fe24694c.jpg" width="207" height="108" alt="HTML5 笔记_第7张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"> Canvas 径向渐变 </div> </div> <h3>图像</h3> <p>把一幅图像放置到画布上，使用 <code>drawImage(image, x, y)</code> 方法。</p> <pre><code class="javascript">var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); var img = document.getElementById("scream"); ctx.drawImage(img, 10, 10); </code></pre> <div class="image-package"> <div class="image-container" style="max-width: 504px; max-height: 604px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/df225efc66684e428b1a7b44e1576c59.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info10/df225efc66684e428b1a7b44e1576c59.jpg" width="504" height="604" alt="HTML5 笔记_第8张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"> Canvas 图像 </div> </div> <h2>内联 SVG</h2> <p>SVG 表示可缩放矢量图形，是基于可扩展标记语言（标准通用标记语言的子集），用于描述二维矢量图形的一种图形格式。</p> <p>HTML5 支持内联 SVG。</p> <h3>什么是 SVG</h3> <ul> <li>SVG 指可伸缩矢量图形（<strong>S</strong>calable <strong>V</strong>ector <strong>G</strong>raphics）；</li> <li>SVG 用于定义用于网络的基于矢量的图形；</li> <li>SVG 使用 XML 格式定义图形；</li> <li>SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失；</li> <li>SVG 是万维网联盟的标准；</li> <li>SVG 与 DOM 和 XSL 之类的 W3C 标准是一个整体。</li> </ul> <h3>SVG 优势</h3> <p>与其他图像格式（比如 JPEG 和 GIF）相比，使用 SVG 的优势在于：</p> <ul> <li>SVG 图像可通过文本编辑器来创建和修改；</li> <li>SVG 图像可被搜索、索引、脚本化或压缩；</li> <li>SVG 是可伸缩的；</li> <li>SVG 图像可在任何的分辨率下被高质量地打印；</li> <li>SVG 可在图像质量不下降的情况下被放大。</li> </ul> <h3>把 SVG 直接嵌入 HTML 页面</h3> <p>在 HTML5 中，能够将 SVG 元素直接嵌入 HTML 页面中：</p> <pre><code class="html"><svg xmlns="https://www.w3.org/2000/svg" version="1.1" height="190"> <polygon points="100,10 40,180 190,60 10,60 160,180" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;"></polygon> </svg> </code></pre> <h3>SVG 与 Canvas 的区别</h3> <p>SVG 是一种使用 XML 描述 2D 图形的语言。</p> <p>Canvas 通过 JavaScript 来绘制 2D 图形。</p> <p>SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。可以为某个元素附加 JavaScript 事件处理器。</p> <p>在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。</p> <p>Canvas 是逐像素进行渲染的。在 Canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。</p> <table> <thead> <tr> <th style="text-align:center">Canvas</th> <th style="text-align:center">SVG</th> </tr> </thead> <tbody> <tr> <td style="text-align:center">依赖分辨率</td> <td style="text-align:center">不依赖分辨率</td> </tr> <tr> <td style="text-align:center">不支持事件处理器</td> <td style="text-align:center">支持事件处理器</td> </tr> <tr> <td style="text-align:center">文本渲染能力弱</td> <td style="text-align:center">最适合带有大型渲染区域的应用程序（比如 Google 地图）</td> </tr> <tr> <td style="text-align:center">能够以 .png 或 .jpg 格式保存结果图像</td> <td style="text-align:center">复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）</td> </tr> <tr> <td style="text-align:center">最适合图像密集型的游戏，其中的许多对象会被频繁重绘</td> <td style="text-align:center">不适合游戏应用</td> </tr> </tbody> </table> <h2>MathML</h2> <p>MathML 指的是<strong>数学标记语言</strong>，是一种基于 XML 的标准，用来在互联网上书写数学符号和公式的标记语言。</p> <p>MathML 与 HTML 相似度很高，但是比较繁琐。它继承了角括号和双标签（<code><标签> 内容 </标签></code>）的用法。</p> <p>HTML5 可以在文档中使用 MathML 元素，对应的标签是 <code><math></code>…<code></math></code>。</p> <p>以下是一个简单的 MathML 示例：</p> <pre><code class="html"><math xmlns="https://www.w3.org/1998/Math/MathML"> <mrow> <msup> <mi>a</mi> <mn>2</mn> </msup> <mo>+</mo> <msup> <mi>b</mi> <mn>2</mn> </msup> <mo>=</mo> <msup> <mi>c</mi> <mn>2</mn> </msup> </mrow> </math> </code></pre> <div class="image-package"> <div class="image-container" style="max-width: 188px; max-height: 53px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/dabf84cec25248c69e4ab8a452845f57.png" target="_blank"><img src="http://img.e-com-net.com/image/info10/dabf84cec25248c69e4ab8a452845f57.png" width="188" height="53"></a> </div> </div> <div class="image-caption"> 示例 1 </div> </div> <p>以下示例添加了一些运算符：</p> <pre><code class="html"><math xmlns="https://www.w3.org/1998/Math/MathML"> <mrow> <mrow> <msup> <mi>x</mi> <mn>2</mn> </msup> <mo>+</mo> <mrow> <mn>4</mn> <mo>⁢</mo> <mi>x</mi> </mrow> <mo>+</mo> <mn>4</mn> </mrow> <mo>=</mo> <mn>0</mn> </mrow> </math> </code></pre> <div class="image-package"> <div class="image-container" style="max-width: 232px; max-height: 52px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/3342b20da17e411fb92303f03ae7cf53.png" target="_blank"><img src="http://img.e-com-net.com/image/info10/3342b20da17e411fb92303f03ae7cf53.png" width="232" height="52"></a> </div> </div> <div class="image-caption"> 示例 2 </div> </div> <p>以下示例是一个 2×2 矩阵：</p> <pre><code class="html"><math xmlns="https://www.w3.org/1998/Math/MathML"> <mrow> <mi>A</mi> <mo>=</mo> <mfenced open="[" close="]"> <mtable> <mtr> <mtd> <mi>x</mi> </mtd> <mtd> <mi>y</mi> </mtd> </mtr> <mtr> <mtd> <mi>z</mi> </mtd> <mtd> <mi>w</mi> </mtd> </mtr> </mtable> </mfenced> </mrow> </math> </code></pre> <div class="image-package"> <div class="image-container" style="max-width: 164px; max-height: 112px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/e83519da6cf94e938aaebea211e68957.png" target="_blank"><img src="http://img.e-com-net.com/image/info10/e83519da6cf94e938aaebea211e68957.png" width="164" height="112" alt="HTML5 笔记_第9张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"> 示例 3 </div> </div> <p>由于数学符号和公式的结构复杂且符号与符号之间存在多种逻辑关系，MathML 的格式十分繁琐。因此，大多数人都不会去手写 MathML，而是利用其它的工具来编写，其中包括 TeX 到 MathML 的转换器。</p> <p>而且 MathML 的浏览器支持也不好。在现有的主流浏览器中，</p> <ul> <li>只有基于 Gecko 的浏览器（以 Firefox 为代表）提供最完备的原生支持；</li> <li>基于 WebKit 的浏览器（以 Safari 为代表）仅包含有限的支持；</li> <li>基于 Blink（以 Chrome 为代表）、Trident（以 Internet Explorer 为代表）和 EdgeHTML（以 Edge 为代表）的浏览器则不提供支持。</li> </ul> <h2>拖放</h2> <p>拖放的目的是将某个对象放置到想要的位置。</p> <p>拖放（Drag 和 Drop）是 HTML5 标准的组成部分。</p> <p>下面的例子是一个简单的拖放示例：</p> <pre><code class="html"><!DOCTYPE HTML> <html> <head> <script> function allowDrop(ev) { ev.preventDefault(); } function drag(ev) { ev.dataTransfer.setData("Text", ev.target.id); } function drop(ev) { ev.preventDefault(); var data = ev.dataTransfer.getData("Text"); ev.target.appendChild(document.getElementById(data)); } </script> </head> <body> <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69"> </body> </html> </code></pre> <p>它看上去也许有些复杂，不过下面会分别研究拖放事件的不同部分。</p> <h3>设置元素为可拖放</h3> <p>首先，为了使元素可拖动，把 <code>draggable</code> 属性设置为 true：</p> <pre><code class="html"><img draggable="true"> </code></pre> <h3>拖动什么</h3> <p>然后，规定当元素被拖动时会发生什么。</p> <p>在上面的例子中，<code>ondragstart</code> 属性调用了一个函数 <code>drag(event)</code>，它规定了被拖动的数据。</p> <p><code>dataTransfer.setData()</code> 方法设置被拖数据的数据类型和值：</p> <pre><code class="javascript">function drag(ev) { ev.dataTransfer.setData("Text", ev.target.id); } </code></pre> <p>在这个例子中，数据类型是 <code>Text</code>，值是可拖动元素的 id——<code>drag1</code>。</p> <h3>放到何处</h3> <p><code>ondragover</code> 事件规定在何处放置被拖动的数据。</p> <p>默认地，无法将数据／元素放置到其他元素中。如果需要设置允许放置，必须阻止对元素的默认处理方式。</p> <p>这要通过调用 <code>ondragover</code> 事件的 <code>event.preventDefault()</code> 方法：</p> <pre><code class="javascript">function allowDrop(ev) { ev.preventDefault(); } </code></pre> <h3>进行放置</h3> <p>当放置被拖数据时，会发生 <code>drop</code> 事件。</p> <p>在上面的例子中，<code>ondrop</code> 属性调用了一个函数 <code>drop(event)</code>：</p> <pre><code class="javascript">function drop(ev) { ev.preventDefault(); var data = ev.dataTransfer.getData("Text"); ev.target.appendChild(document.getElementById(data)); } </code></pre> <ul> <li>调用 <code>preventDefault()</code> 来避免浏览器对数据的默认处理（<code>drop</code> 事件的默认行为是以链接形式打开）；</li> <li>通过 <code>dataTransfer.getData("Text")</code> 方法获得被拖的数据。该方法将返回在 <code>setData()</code> 方法中设置为相同类型的任何数据；</li> <li>被拖数据是被拖元素的 id——<code>drag1</code>；</li> <li>把被拖元素追加到放置元素（目标元素）中。</li> </ul> <h2>地理定位</h2> <p>Geolocation（地理定位）用于定位用户的位置。</p> <p>Geolocation 通过请求一个位置信息，用户同意后，浏览器会返回一个包含经度和维度的位置信息。</p> <h3>使用地理定位</h3> <p>使用 <code>getCurrentPosition()</code> 方法来获得用户的位置。</p> <p>下例是一个简单的地理定位示例，可返回用户位置的经度和纬度：</p> <pre><code class="html"><script> var x = document.getElementById("demo"); function getLocation() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition); } else { x.innerHTML = "该浏览器不支持获取地理位置。"; } } function showPosition(position) { x.innerHTML = "Latitude:" + position.coords.latitude + "<br>Longitude:" + position.coords.longitude; } </script> </code></pre> <ul> <li>检测是否支持地理定位；</li> <li>如果支持，则运行 <code>getCurrentPosition()</code> 方法。如果不支持，则向用户显示一段消息；</li> <li>如果 <code>getCurrentPosition()</code> 运行成功，则向参数 <code>showPosition</code> 中规定的函数返回一个 <code>coordinates</code> 对象；</li> <li> <code>showPosition()</code> 函数获得并显示经度和纬度。</li> </ul> <p>上面的例子是一个非常基础的地理定位脚本，不含错误处理。</p> <p>Geolocation 的位置信息来源可以包括 GPS、IP 地址、RFID、WiFi 和蓝牙的 MAC 地址、以及 GSM/CDMS 的 ID 等等。</p> <h3>处理错误和拒绝</h3> <p><code>getCurrentPosition()</code> 方法的第二个参数用于处理错误。它规定当获取用户位置失败时运行的函数：</p> <pre><code class="javascript">function showError(error) { switch (error.code) { case error.PERMISSION_DENIED: x.innerHTML = "用户拒绝对获取地理位置的请求。"; break; case error.POSITION_UNAVAILABLE: x.innerHTML = "位置信息是不可用的。"; break; case error.TIMEOUT: x.innerHTML = "请求用户地理位置超时。"; break; case error.UNKNOWN_ERROR: x.innerHTML = "未知错误。"; break; } } </code></pre> <p>错误代码：</p> <ul> <li> <code>Permission denied</code>：用户不允许地理定位</li> <li> <code>Position unavailable</code>：无法获取当前位置</li> <li> <code>Timeout</code>：操作超时</li> </ul> <h3>在地图中显示结果</h3> <p>如需在地图中显示结果，需要访问可使用经纬度的地图服务，比如 Google 地图或百度地图：</p> <pre><code class="javascript">function showPosition(position) { var latlon = position.coords.latitude + "," + position.coords.longitude; var img_url = "https://maps.googleapis.com/maps/api/staticmap?center=" + latlon + "&zoom=14&size=400x300&sensor=false"; document.getElementById("mapholder").innerHTML = "<img src='" + img_url + "'>"; } </code></pre> <h3>给定位置的信息</h3> <p>本页演示的是如何在地图上显示用户的位置。不过，地理定位对于给定位置的信息同样很有用处。</p> <p>例子：</p> <ul> <li>更新本地信息</li> <li>显示用户周围的兴趣点</li> <li>交互式车载导航系统（GPS）</li> </ul> <h3>getCurrentPosition() 方法－返回数据</h3> <p>若成功，则 <code>getCurrentPosition()</code> 方法返回对象。始终会返回 <code>latitude</code>、<code>longitude</code> 以及 <code>accuracy</code> 属性。如果可用，则会返回其他下面的属性。</p> <table> <thead> <tr> <th style="text-align:center">属性</th> <th style="text-align:center">描述</th> </tr> </thead> <tbody> <tr> <td style="text-align:center"><code>coords.latitude</code></td> <td style="text-align:center">十进制数的纬度</td> </tr> <tr> <td style="text-align:center"><code>coords.longitude</code></td> <td style="text-align:center">十进制数的经度</td> </tr> <tr> <td style="text-align:center"><code>coords.accuracy</code></td> <td style="text-align:center">位置精度</td> </tr> <tr> <td style="text-align:center"><code>coords.altitude</code></td> <td style="text-align:center">海拔，海平面以上以米计</td> </tr> <tr> <td style="text-align:center"><code>coords.altitudeAccuracy</code></td> <td style="text-align:center">位置的海拔精度</td> </tr> <tr> <td style="text-align:center"><code>coords.heading</code></td> <td style="text-align:center">方向，从正北开始以度计</td> </tr> <tr> <td style="text-align:center"><code>coords.speed</code></td> <td style="text-align:center">速度，以米 / 每秒计</td> </tr> <tr> <td style="text-align:center"><code>timestamp</code></td> <td style="text-align:center">响应的日期／时间</td> </tr> </tbody> </table> <h3>Geolocation 对象－其他有趣的方法</h3> <ul> <li> <code>watchPosition()</code> 返回用户的当前位置，并继续返回用户移动时的更新位置（就像汽车上的 GPS）。</li> <li> <code>clearWatch()</code> 停止 <code>watchPosition()</code> 方法。</li> </ul> <p>下面的例子展示 <code>watchPosition()</code> 方法。需要一台精确的 GPS 设备来测试该例（比如智能手机）：</p> <pre><code class="html"><script> var x = document.getElementById("demo"); function getLocation() { if (navigator.geolocation) { navigator.geolocation.watchPosition(showPosition); } else { x.innerHTML = "该浏览器不支持获取地理位置。"; } } function showPosition(position) { x.innerHTML = "纬度：" + position.coords.latitude + "<br> 经度：" + position.coords.longitude; } </script> </code></pre> <h2>视频</h2> <h3>Video 如何工作</h3> <p>如需在 HTML5 中显示视频，所有需要的是：</p> <pre><code class="html"><video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> 该浏览器不支持 Video 标签。 </video> </code></pre> <p><code><video></code> 元素提供了播放、暂停和音量控件来控制视频。</p> <p>同时 <code><video></code> 元素也提供了 <code>width</code> 和 <code>height</code> 属性控制视频的尺寸。如果设置了高度和宽度，所需的视频空间会在页面加载时保留。如果没有设置这些属性，浏览器不知道大小的视频，浏览器就不能在加载时保留特定的空间，页面就会根据原始视频的大小而改变。</p> <p>与标签之间插入的内容是提供给不支持 <code>video</code> 元素的浏览器显示的。</p> <p><code><video></code> 元素支持多个 <code><source></code> 元素。<code><source></code> 元素可以链接不同的视频文件，浏览器将使用第一个可识别的格式。</p> <h3>视频格式</h3> <p>当前，<code><video></code> 元素支持三种视频格式：MP4、WebM 和 Ogg。</p> <h3>使用 DOM 进行控制</h3> <p><code><video></code> 元素同样拥有方法、属性和事件。</p> <p><code><video></code> 元素的方法、属性和事件可以使用 JavaScript 进行控制。</p> <p>其中的方法有用于播放、暂停以及加载等；其中的属性（比如时长、音量等）可以被读取或设置；其中的 DOM 事件能够通知，比如：视频开始播放、已暂停，已停止，等等。</p> <p>下例中通过简单的方法演示了如何使用 <code><video></code> 元素，读取并设置属性，以及如何调用方法。</p> <pre><code class="html"><div style="text-align:center"> <button onclick="playPause()">播放／暂停</button> <button onclick="makeBig()">放大</button> <button onclick="makeSmall()">缩小</button> <button onclick="makeNormal()">普通</button> <br> <video id="video1" width="420"> <source src="mov_bbb.mp4" type="video/mp4"> <source src="mov_bbb.ogg" type="video/ogg"> 该浏览器不支持 HTML5 video 标签。 </video> </div> <script> var myVideo = document.getElementById("video1"); function playPause() { if (myVideo.paused) myVideo.play(); else myVideo.pause(); } function makeBig() { myVideo.width = 560; } function makeSmall() { myVideo.width = 320; } function makeNormal() { myVideo.width = 420; } </script> </code></pre> <h3>Video 标签</h3> <table> <thead> <tr> <th style="text-align:center">标签</th> <th style="text-align:center">描述</th> </tr> </thead> <tbody> <tr> <td style="text-align:center"><code><video></code></td> <td style="text-align:center">定义一个视频</td> </tr> <tr> <td style="text-align:center"><code><source></code></td> <td style="text-align:center">定义多种媒体资源，比如 <code><video></code> 和 <code><audio></code> </td> </tr> <tr> <td style="text-align:center"><code><track></code></td> <td style="text-align:center">定义在媒体播放器的文本轨迹</td> </tr> </tbody> </table> <h2>音频</h2> <h3>Audio 如何工作</h3> <p>如需在 HTML5 中播放音频，需要使用以下代码：</p> <pre><code class="html"><audio controls> <source src="horse.ogg" type="audio/ogg"> <source src="horse.mp3" type="audio/mpeg"> 该浏览器不支持 audio 元素。 </audio> </code></pre> <p><code>control</code> 属性供添加播放、暂停和音量控件。</p> <p>在 <code><audio></code> 标签内需要插入浏览器不支持该元素的提示文本。</p> <p><code><audio></code> 元素允许使用多个 <code><source></code> 元素。<code><source></code> 元素可以链接不同的音频文件，浏览器将使用第一个支持的音频文件。</p> <h3>音频格式</h3> <p>目前，<code><audio></code> 元素支持三种音频格式文件：MP3、Wav 和 Ogg。</p> <h3>Audio 标签</h3> <table> <thead> <tr> <th style="text-align:center">标签</th> <th style="text-align:center">描述</th> </tr> </thead> <tbody> <tr> <td style="text-align:center"><code><audio></code></td> <td style="text-align:center">定义声音内容</td> </tr> <tr> <td style="text-align:center"><code><source></code></td> <td style="text-align:center">规定多媒体资源，可以是多个，在 <code><video></code> 与 <code><audio></code> 标签中使用</td> </tr> </tbody> </table> <h2>输入类型</h2> <p>HTML5 拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证。</p> <h3>color</h3> <p><code>color</code> 类型用在 <code>input</code> 字段主要用于选取颜色，如下所示：</p> <pre><code class="html"><form action="demo-form.php"> 选择喜欢的颜色： <input type="color" name="favcolor"> <br/> <input type="submit"> </form> </code></pre> <h3>date</h3> <p><code>date</code> 类型允许从一个日期选择器选择一个日期。</p> <pre><code class="html"><form action="demo-form.php"> 生日： <input type="date" name="bday"> <input type="submit"> </form> </code></pre> <blockquote> <p>至截稿时，Safari 尚未提供支持。</p> </blockquote> <h3>datetime-local</h3> <p><code>datetime-local</code> 类型允许选择一个日期和时间（无时区）。</p> <pre><code class="html"><form action="demo-form.php"> 生日 (日期和时间)： <input type="datetime-local" name="bdaytime"> <input type="submit"> </form> </code></pre> <blockquote> <p>至截稿时，Firefox 和 Safari 尚未提供支持。</p> </blockquote> <h3>email</h3> <p><code>email</code> 类型用于应该包含电子邮件地址的输入域。</p> <pre><code class="html"><form action="demo-form.php"> E-mail: <input type="email" name="usremail"> <input type="submit"> </form> </code></pre> <h3>month</h3> <p><code>month</code> 类型允许选择一个月份。</p> <pre><code class="html"><form action="demo-form.php"> 生日（月和年）： <input type="month" name="bdaymonth"> <input type="submit"> </form> </code></pre> <blockquote> <p>至截稿时，Firefox 和 Safari 尚未提供支持。</p> </blockquote> <h3>number</h3> <p><code>number</code> 类型用于应该包含数值的输入域。</p> <p>还可以设定对所接受的数字的限定：</p> <pre><code class="html"><form action="demo-form.php"> 数量（1 到 5 之间）： <input type="number" name="quantity" min="1" max="5"> <input type="submit"> </form> </code></pre> <p>使用下面的属性来规定对数字类型的限定：</p> <ul> <li> <code>max</code>：规定允许的最大值；</li> <li> <code>min</code>：规定允许的最小值；</li> <li> <code>step</code>：规定合法的数字间隔；</li> <li> <code>value</code>：规定默认值。</li> </ul> <h3>range</h3> <p><code>range</code> 类型用于应该包含一定范围内数字值的输入域。</p> <p><code>range</code> 类型显示为滑动条。</p> <pre><code class="html"><form action="demo-form.php" method="get"> Points: <input type="range" name="points" min="1" max="10"> <input type="submit"> </form> </code></pre> <p>使用下面的属性来规定对数字类型的限定：</p> <ul> <li> <code>max</code>：规定允许的最大值；</li> <li> <code>min</code>：规定允许的最小值；</li> <li> <code>step</code>：规定合法的数字间隔；</li> <li> <code>value</code>：规定默认值。</li> </ul> <h3>search</h3> <p><code>search</code> 类型用于搜索域，比如站点搜索或 Google 搜索。</p> <pre><code class="html"><form action="demo-form.php"> 使用 Google 搜索： <input type="search" name="googlesearch"> <br/> <input type="submit"> </form> </code></pre> <h3>tel</h3> <p><code>tel</code> 类型用于输入和编辑电话号码。</p> <pre><code class="html"><form action="demo-form.php"> 电话号码： <input type="tel" name="usrtel"> <br/> <input type="submit"> </form> </code></pre> <h3>time</h3> <p><code>time</code> 类型允许选择一个时间。</p> <pre><code class="html"><form action="demo-form.php"> 选择时间： <input type="time" name="usr_time"> <input type="submit"> </form> </code></pre> <blockquote> <p>至截稿时，Safari 尚未提供支持。</p> </blockquote> <h3>url</h3> <p><code>url</code> 类型用于应该包含 URL 地址的输入域。</p> <p>在提交表单时，会自动验证 <code>url</code> 域的值。</p> <pre><code class="html"><form action="demo-form.php"> 添加主页： <input type="url" name="homepage"> <br/> <input type="submit"> </form> </code></pre> <h3>week</h3> <p><code>week</code> 类型允许选择周和年。</p> <pre><code class="html"><form action="demo-form.php"> 选择周： <input type="week" name="year_week"> <input type="submit"> </form> </code></pre> <blockquote> <p>至截稿时，Firefox 和 Safari 尚未提供支持。</p> </blockquote> <h2>表单元素</h2> <p>HTML5 增加了如下新的表单元素：</p> <ul> <li><code><datalist></code></li> <li><code><keygen></code></li> <li><code><output></code></li> </ul> <h3>datalist</h3> <p><code><datalist></code> 元素规定输入域的选项列表。</p> <p><code><datalist></code> 属性规定 <code>form</code> 或 <code>input</code> 域应该拥有自动完成功能。当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项：</p> <p>使用 <code><input></code> 元素的列表属性与 <code><datalist></code> 元素绑定。</p> <pre><code class="html"><form action="demo-form.php" method="get"> <input list="browsers" name="browser"> <datalist id="browsers"> <option value="Internet Explorer"></option> <option value="Edge"></option> <option value="Firefox"></option> <option value="Chrome"></option> <option value="Opera"></option> <option value="Safari"></option> </datalist> <input type="submit"> </form> </code></pre> <blockquote> <p>至截稿时，Safari 尚未提供支持。</p> </blockquote> <h3>keygen</h3> <p><code><keygen></code> 元素的作用是提供一种验证用户的可靠方法。</p> <p><code><keygen></code> 标签规定用于表单的密钥对生成器字段。</p> <p>当提交表单时，会生成两个键，一个是私钥，一个公钥。</p> <p>私钥（private key）存储于客户端，公钥（public key）则被发送到服务器。公钥可用于之后验证用户的客户端证书（client certificate）。</p> <pre><code class="html"><form action="demo-form.php" method="get"> 用户名： <input type="text" name="usr_name"> 加密： <keygen name="security"> <input type="submit"> </form> </code></pre> <blockquote> <p>该特性已经从 Web 标准中删除，请避免使用。</p> </blockquote> <blockquote> <p>Edge 不提供支持。Chrome 49 中已弃用。</p> </blockquote> <h3>output</h3> <p><code><output></code> 元素用于不同类型的输出，比如计算或脚本输出：</p> <pre><code class="html"><form oninput="x.value=parseInt(a.value)+parseInt(b.value)"> 0 <input type="range" id="a" value="50"> 100 + <input type="number" id="b" value="50"> = <output name="x" for="a b"></output> </form> </code></pre> <h3>HTML5 新表单元素</h3> <table> <thead> <tr> <th style="text-align:center">标签</th> <th style="text-align:center">描述</th> </tr> </thead> <tbody> <tr> <td style="text-align:center"><code><datalist></code></td> <td style="text-align:center"> <code><datalist></code> 标签定义选项列表。与 <code>input</code> 元素配合使用，来定义 <code>input</code> 可能的值</td> </tr> <tr> <td style="text-align:center"><code><keygen></code></td> <td style="text-align:center"> <code><keygen></code> 标签规定用于表单的密钥对生成器字段</td> </tr> <tr> <td style="text-align:center"><code><output></code></td> <td style="text-align:center"> <code><output></code> 标签定义不同类型的输出，比如脚本的输出</td> </tr> </tbody> </table> <h2>表单属性</h2> <p>HTML5 的 <code><form></code> 和 <code><input></code> 标签增加了几个新属性。</p> <h3>form/input · autocomplete</h3> <p><code>autocomplete</code> 属性规定 <code>form</code> 或 <code>input</code> 域应该拥有自动完成功能。</p> <p>当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项。</p> <p><code>autocomplete</code> 属性有可能在 <code>form</code> 元素中是开启的，而在 <code>input</code> 元素中是关闭的。</p> <p><code>autocomplete</code> 适用于 <code><form></code> 标签，以及以下类型的 <code><input></code> 标签：<code>text</code>、<code>search</code>、<code>url</code>、<code>telephone</code>、<code>email</code>、<code>password</code>、<code>datepickers</code>、<code>range</code> 以及 <code>color</code>。</p> <pre><code class="html"><form action="demo-form.php" autocomplete="on"> First name: <input type="text" name="fname" value="你好"> <br/> Last name: <input type="text" name="lname"> <br/> E-mail: <input type="email" name="email" autocomplete="off" placehder="nihao"> <br/> <input type="submit"> </form> </code></pre> <h3>form · novalidate</h3> <p><code>novalidate</code> 是一个布尔属性。</p> <p><code>novalidate</code> 属性规定在提交表单时不应该验证 <code>form</code> 或 <code>input</code> 域。</p> <pre><code class="html"><form action="demo-form.php" novalidate> E-mail: <input type="email" name="user_email"> <input type="submit"> </form> </code></pre> <h3>input · autofocus</h3> <p><code>autofocus</code> 是一个布尔属性。</p> <p><code>autofocus</code> 属性规定在页面加载时，域自动地获得焦点。</p> <pre><code class="html"><form action="demo-form.php"> First name: <input type="text" name="fname" autofocus> <br/> Last name: <input type="text" name="lname"> <br/> <input type="submit"> </form> </code></pre> <h3>input · form</h3> <p><code>form</code> 属性规定输入域所属的一个或多个表单。</p> <p>如需引用一个以上的表单，使用空格分隔的列表。</p> <pre><code class="html"><form action="demo-form.php" id="form1"> First name: <input type="text" name="fname"> <br/> <input type="submit" value="提交"> </form> </code></pre> <h3>input · formaction</h3> <p><code>formaction</code> 属性用于描述表单提交的 URL 地址。</p> <p><code>formaction</code> 属性会覆盖 <code><form></code> 元素中的 <code>action</code> 属性。</p> <p><code>formaction</code> 属性用于 <code>input</code> 类型中的 <code>submit</code> 和 <code>image</code>。</p> <pre><code class="html"><form action="demo-form.php"> First name: <input type="text" name="fname"> <br/> Last name: <input type="text" name="lname"> <br/> <input type="submit" value="提交"> <br/> <input type="submit" formaction="demo-admin.php" value="以管理员提交"> </form> </code></pre> <h3>input · formenctype</h3> <p><code>formenctype</code> 属性描述了表单提交到服务器的数据编码（只对 <code>form</code> 表单中 <code>method="post"</code> 表单）。</p> <p><code>formenctype</code> 属性覆盖 <code>form</code> 元素的 <code>enctype</code> 属性。</p> <p>该属性与 <code>submit</code> 和 <code>image</code> 类型配合使用。</p> <pre><code class="html"><form action="demo_post_enctype.php" method="post"> First name: <input type="text" name="fname"> <br/> <input type="submit" value="提交"> <input type="submit" formenctype="multipart/form-data" value="以 Multipart/form-data 提交"> </form> </code></pre> <h3>input · formmethod</h3> <p><code>formmethod</code> 属性定义了表单提交的方式。</p> <p><code>formmethod</code> 属性覆盖了 <code><form></code> 元素的的 <code>method</code> 属性。</p> <p>该属性可以与 <code>submit</code> 和 <code>image</code> 类型配合使用。</p> <pre><code class="html"><form action="demo-form.php" method="get"> First name: <input type="text" name="fname"> <br/> Last name: <input type="text" name="lname"> <br/> <input type="submit" value="提交"> <input type="submit" formmethod="post" formaction="demo-post.php" value="使用 POST 提交"> </form> </code></pre> <h3>input · formnovalidate</h3> <p><code>formnovalidate</code> 属性是一个布尔属性。</p> <p><code>formnovalidate</code> 属性描述了 <code><input></code> 元素在表单提交时无需被验证。</p> <p><code>formnovalidate</code> 属性会覆盖 <code><form></code> 元素的 <code>novalidate</code> 属性。</p> <p><code>formnovalidate</code> 属性与 <code>submit</code> 类型一起使用。</p> <pre><code class="html"><form action="demo-form.php"> E-mail: <input type="email" name="userid"> <br/> <input type="submit" value="提交"> <br/> <input type="submit" formnovalidate="formnovalidate" value="不验证提交"> </form> </code></pre> <h3>input · formtarget</h3> <p><code>formtarget</code> 属性指定一个名称或一个关键字来指明表单提交数据接收后的展示。</p> <p><code>formtarget</code> 属性覆盖 <code><form></code> 元素的 <code>target</code> 属性。</p> <p><code>formtarget</code> 属性与 <code>submit</code> 和 <code>image</code> 类型配合使用</p> <pre><code class="html"><form action="demo-form.php"> First name: <input type="text" name="fname"> <br/> Last name: <input type="text" name="lname"> <br/> <input type="submit" value="正常提交"> <input type="submit" formtarget="_blank" value="提交到一个新的页面上"> </form> </code></pre> <h3>input · height 和 width</h3> <p><code>height</code> 和 <code>width</code> 属性规定用于 <code>image</code> 类型的 <code><input></code> 标签的图像高度和宽度。</p> <pre><code class="html"><form action="demo-form.php"> First name: <input type="text" name="fname"> <br/> Last name: <input type="text" name="lname"> <br/> <input type="image" src="submit.gif" alt="Submit" width="48" height="48"> </form> </code></pre> <h3>input · list</h3> <p><code>list</code> 属性规定输入域的 <code>datalist</code>。<code>datalist</code> 是输入域的选项列表。</p> <pre><code class="html"><form action="demo-form.php" method="get"> <input list="browsers" name="browser"> <datalist id="browsers"> <option value="Internet Explorer"></option> <option value="Edge"></option> <option value="Firefox"></option> <option value="Chrome"></option> <option value="Opera"></option> <option value="Safari"></option> </datalist> <input type="submit"> </form> </code></pre> <blockquote> <p>至截稿时，Safari 尚未提供支持。</p> </blockquote> <h3>input · min 和 max</h3> <p><code>min</code>、<code>max</code> 和 <code>step</code> 属性用于为包含数字或日期的 <code>input</code> 类型规定限定（约束）。</p> <p>适用于以下 <code>input</code> 类型：<code>number</code>、<code>range</code>、<code>date</code>、<code>datetime-local</code>、<code>month</code>、<code>time</code> 和 <code>week</code>。</p> <pre><code class="html"><form action="demo-form.php"> 输入 1980-01-01 之前的日期： <input type="date" name="bday" max="1979-12-31"> <br/> 输入 2000-01-01 之后的日期： <input type="date" name="lday" min="2000-01-02"> <br/> 数量 (在 1 和 5 之间)： <input type="number" name="quantity" min="1" max="5"> <br/> <input type="submit"> </form> </code></pre> <h3>input · step</h3> <p><code>step</code> 属性为输入域规定合法的数字间隔。</p> <p><code>step</code> 属性可以与 <code>max</code> 和 <code>min</code> 属性创建一个区域值。</p> <p>适用于以下 <code>input</code> 类型：<code>number</code>、<code>range</code>、<code>date</code>、<code>datetime-local</code>、<code>month</code>、<code>time</code> 和 <code>week</code>。</p> <pre><code class="html"><form action="demo-form.php"> <input type="number" name="points" step="3"> <input type="submit"> </form> </code></pre> <h3>input · multiple</h3> <p><code>multiple</code> 是一个布尔属性。</p> <p><code>multiple</code> 属性规定 <code><input></code> 元素中可选择多个值。</p> <p>适用于 <code>email</code> 和 <code>file</code> 类型。</p> <pre><code class="html"><form action="demo-form.php"> 选择图片： <input type="file" name="img" multiple> <input type="submit"> </form> </code></pre> <h3>input · pattern</h3> <p><code>pattern</code> 属性描述了一个正则表达式，用于验证 <code><input></code> 元素的值。</p> <p>适用于以下 <code><input></code> 类型：<code>text</code>、<code>date</code>、<code>search</code>、<code>url</code>、<code>tel</code>、<code>email</code> 和 <code>password</code>。</p> <pre><code class="html"><form action="demo-form.php"> Country code: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code"> <input type="submit"> </form> </code></pre> <h3>input · placeholder</h3> <p><code>placeholder</code> 属性提供一种提示（hint），描述输入域所期待的值。</p> <p>简短的提示在用户输入值前会显示在输入域上。</p> <p>适用于以下 <code><input></code> 类型：<code>text</code>、<code>search</code>、<code>url</code>、<code>tel</code>、<code>email</code> 和 <code>password</code>。</p> <pre><code class="html"><form action="demo-form.php"> <input type="text" name="fname" placeholder="First name"> <br/> <input type="text" name="lname" placeholder="Last name"> <br/> <input type="submit" value="提交"> </form> </code></pre> <h3>input · required</h3> <p><code>required</code> 是一个布尔属性。</p> <p><code>required</code> 属性规定必须在提交之前填写输入域（不能为空）。</p> <p>适用于以下 <code><input></code> 类型：<code>text</code>、<code>search</code>、<code>url</code>、<code>tel</code>、<code>email</code>、<code>password</code>、<code>date pickers</code>、<code>number</code>、<code>checkbox</code>、<code>radio</code> 和 <code>file</code>。</p> <pre><code class="html"><form action="demo-form.php"> 用户名： <input type="text" name="usrname" required> <input type="submit"> </form> </code></pre> <h2>语义元素</h2> <p>语义＝意义，语义元素＝元素的意义。</p> <p>一个语义元素能够清楚地描述其意义给浏览器和开发者。</p> <p><strong>无语义</strong>元素示例：<code><div></code> 和 <code><span></code>。无需考虑内容。</p> <p><strong>语义</strong>元素示例：<code><form></code>、<code><table></code> 和 <code><img></code>。清楚地定义了它的内容。</p> <p>HTML5 提供了新的语义元素来明确一个 Web 页面的不同部分：</p> <div class="image-package"> <div class="image-container" style="max-width: 219px; max-height: 258px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/25c2d27b7e034169bb3147bf650021b3.png" target="_blank"><img src="http://img.e-com-net.com/image/info10/25c2d27b7e034169bb3147bf650021b3.png" width="219" height="258" alt="HTML5 笔记_第10张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"> HTML5 新语义元素组成的 Web 页面 </div> </div> <h3>section</h3> <p><code><section></code> 标签定义文档中的节，例如章节、页眉、页脚或文档的其他部分。</p> <p><code>section</code> 包含了一组内容及其标题。</p> <pre><code class="html"><section> <h1>WWF</h1> <p> The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961. </p> </section> </code></pre> <p>使用提醒：</p> <ul> <li>如果元素内容可以分为几个部分的话，应该使用 <code>article</code> 而不是 <code>section</code>。</li> <li>不要把 <code>section</code> 元素作为一个普通的容器来使用，这本应该是 <code>div</code> 的用法（特别是当片段仅仅是为了美化样式的时候）。一般来说，一个 <code>section</code> 应当出现在文档大纲中。</li> </ul> <h3>article</h3> <p><code><article></code> 标签表示独立的自包含内容。</p> <p><code>article</code> 本身应当有意义，能独立于网站的其他部分。</p> <p>常见使用场景：论坛帖子、博客文章、新闻故事、评论。</p> <pre><code class="html"><article> <h1>Google Chrome</h1> <p>Google Chrome 是由 Google 开发的免费网络浏览器，于 2008 年发布。</p> </article> </code></pre> <h3>nav</h3> <p><code><nav></code> 标签定义一组导航链接。</p> <p>并非文档的所有链接都应位于 <code><nav></code> 元素内。<code><nav></code> 元素仅适用于主要导航链接块。</p> <pre><code class="html"><nav> <a href="/html/">HTML</a> | <a href="/css/">CSS</a> | <a href="/js/">JavaScript</a> | <a href="/jquery/">jQuery</a> </nav> </code></pre> <h3>aside</h3> <p><code><aside></code> 标签定义页面主区域内容之外的内容（比如侧边栏）。</p> <p><code>aside</code> 标签的内容应与主区域的内容相关。</p> <pre><code class="html"><p>My family and I visited The Epcot center this summer.</p> <aside> <h4>Epcot Center</h4> <p>The Epcot Center is a theme park in Disney World, Florida.</p> </aside> </code></pre> <h3>header</h3> <p><code><header></code> 元素表示一组引导性的帮助。</p> <p><code><header></code> 元素通常包含：一个或多个标题元素（<code><h1></code>～<code><h6></code>）、分节头部、徽标或图标、作者信息。</p> <p>在页面中可以使用多个 <code><header></code> 元素。</p> <pre><code class="html"><article> <header> <h1>Most important heading here</h1> <h3>Less important heading here</h3> <p>Some additional information here</p> </header> <p>Lorem Ipsum dolor set amet…</p> </article> </code></pre> <h3>footer</h3> <p><code><footer></code> 元素表示文档或一个章节的页脚。</p> <p>一个页脚通常包含该章节作者、版权数据或者与文档相关的链接等信息。</p> <p>文档中可以使用多个 <code><footer></code> 元素。</p> <pre><code class="html"><footer> <p>Posted by: Hege Refsnes</p> <p>Contact information: <a href="mailto:someone@example.com">someone@example.com</a>. </p> </footer> </code></pre> <h3>figure 和 figcaption</h3> <p><code><figure></code> 标签规定独立的流内容（图像、图表、照片、代码等等）。</p> <p><code><figure></code> 元素的内容应该与主内容相关，但如果被删除，则不应对文档流产生影响。<br> <code><figcaption></code> 标签定义 <code><figure></code> 元素的标题。</p> <p><code><figcaption></code> 元素应被置于 <code>figure</code> 元素的第一个或最后一个子元素的位置。</p> <pre><code class="html"><figure> <img src="pulpit.jpg" alt="The Pulpit Rock" width="304" height="228"> <figcaption>Fig.1 - A view of the pulpit rock in Norway.</figcaption> </figure> </code></pre> <h2>Web 存储</h2> <p>在 HTML5 之前，主要使用 Cookie 存储，其缺点有：</p> <ol> <li>Cookie 会被附加在每个 HTTP 请求中，所以无形中增加了流量；</li> <li>由于在 HTTP 请求中的 Cookie 是明文传递的，所以安全性成问题，除非使用 HTTPS；</li> <li>Cookie 的大小限制在 4 KB 左右，对于复杂的存储需求来说是不够用的。</li> </ol> <p>HTML5 Web 存储，一个比 Cookie 更好的本地存储方式。</p> <h3>什么是 HTML5 Web 存储</h3> <p>通过 Web 存储，Web 应用程序可以在用户的浏览器中本地存储数据。</p> <p>在 HTML5 之前，应用程序数据必须存储在 Cookie 中，包含在每个服务器请求中。Web 存储更安全，可以在本地存储大量数据，而不会影响网站性能。</p> <p>与 Cookie 不同，存储限制要大得多（至少 5 MB），信息永远不会传输到服务器。</p> <p>Web 存储是按来源（每个域和协议）。来自一个来源的所有页面都可以存储和访问相同的数据。</p> <h3>Web 存储对象</h3> <p>HTML Web 存储提供了两种用于在客户端上存储数据的对象：</p> <ul> <li> <code>localStorage</code>：没有时间限制的数据存储；</li> <li> <code>sessionStorage</code>：针对一个 Session 的数据存储。关闭浏览器标签页时数据丢失。</li> </ul> <h3>localStorage</h3> <p><code>localStorage</code> 对象存储的数据没有时间限制。当浏览器关闭时，数据不会被删除。第二天、第二周或下一年之后，数据依然可用。</p> <pre><code class="html"><script> // 存储 localStorage.setItem("lastname", "Smith"); // 检索 document.getElementById("result").innerHTML = localStorage.getItem("lastname"); </script> </code></pre> <ul> <li>使用 <code>key = "lastname"</code> 和 <code>value = "Smith"</code> 创建一个 <code>localStorage</code> 键／值对；</li> <li>检索 <code>lastname</code> 的值并将其插入到 <code>id = "result"</code> 的元素中。</li> </ul> <p>上面的例子也可以写成：</p> <pre><code class="html"><script> // 存储 localStorage.lastname = "Smith"; // 检索 document.getElementById("result").innerHTML = localStorage.lastname; </script> </code></pre> <p>移除 <code>localStorage</code> 中的 <code>lastname</code>：</p> <pre><code class="javascript">localStorage.removeItem("lastname"); </code></pre> <p>不管是 <code>localStorage</code>，还是 <code>sessionStorage</code>，可使用的 API 都相同，常用的有如下几个（以 <code>localStorage</code> 为例）：</p> <ul> <li>保存数据：<code>localStorage.setItem(key, value)</code>；</li> <li>读取数据：<code>localStorage.getItem(key)</code>；</li> <li>删除单个数据：<code>localStorage.removeItem(key)</code>；</li> <li>删除所有数据：<code>localStorage.clear()</code>；</li> <li>得到某个索引的键：<code>localStorage.key(index)</code>。</li> </ul> <p>键／值对通常以字符串存储，可以按照需要转换该格式。</p> <h3>sessionStorage</h3> <p><code>sessionStorage</code> 针对一个 Session 进行数据存储。当用户关闭浏览器窗口后，数据会被删除。</p> <p>创建并访问一个 <code>sessionStorage</code>：</p> <pre><code class="html"><script> function clickCounter() { if (sessionStorage.clickcount) { sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1; } else { sessionStorage.clickcount = 1; } document.getElementById("result").innerHTML = "在这个会话中你已经点击了该按钮 " + sessionStorage.clickcount + " 次"; } </script> <p> <button onclick="clickCounter()" type="button">点击此处</button> </p> <div id="result"></div> </code></pre> <h2>Web Worker</h2> <p>Web Worker 是运行在后台的 JavaScript，不会影响页面的性能。更好的解释是，可以使用 Web Worker 提供的一种简单的方法来为 Web 内容在后台线程中运行脚本，这些线程在执行任务的过程中并不会干扰用户界面。</p> <h3>什么是 Web Worker</h3> <p>当在 HTML 页面中执行脚本时，页面将变为无响应，直到脚本完成。</p> <p>Web Worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。可以继续执行其他操作：点击、选取内容等等。而此时 Web Worker 在后台运行。</p> <p>下面的例子创建了一个简单的 Web Worker，在后台计数：</p> <pre><code class="html"><p>计数： <output id="result"></output> </p> <button onclick="startWorker()">开始工作</button> <button onclick="stopWorker()">停止工作</button> <script> var w; function startWorker() { if (typeof (w) == "undefined") { w = new Worker("demo_workers.js"); } w.onmessage = function (event) { document.getElementById("result").innerHTML = event.data; }; } function stopWorker() { w.terminate(); w = undefined; } </script> </code></pre> <h3>创建 Web Worker 文件</h3> <p>在一个外部 JavaScript 中创建 Web Worker。</p> <p>这里创建了计数脚本，该脚本存储于 <code>demo_workers.js</code> 文件中：</p> <pre><code class="javascript">var i = 0; function timedCount() { i = i + 1; postMessage(i); setTimeout("timedCount()", 500); } timedCount(); </code></pre> <p>以上代码中重要的部分是 <code>postMessage()</code> 方法，它用于向 HTML 页面传回一段消息。</p> <p>通常，Web Worker 不用于如此简单的脚本，而是用于更耗费 CPU 资源的任务。</p> <h3>创建 Web Worker 对象</h3> <p>在有了 Web Worker 文件之后，现在需要从 HTML 页面调用它。</p> <p>下面的代码检测是否存在 Worker。若不存在，则创建一个新的 Web Worker 对象，然后运行 <code>demo_workers.js</code> 中的代码：</p> <pre><code class="javascript">if (typeof (w) == "undefined") { w = new Worker("demo_workers.js"); } </code></pre> <p>然后就可以从 Web Worker 发送和接收消息了。</p> <p>向 Web Worker 添加一个 <code>onmessage</code> 事件监听器：</p> <pre><code class="javascript">w.onmessage = function (event) { document.getElementById("result").innerHTML = event.data; }; </code></pre> <p>当 Web Worker 传递消息时，会执行事件监听器中的代码。来自 Web Worker 的数据存储在 <code>event.data</code> 中。</p> <h3>终止 Web Worker</h3> <p>当创建 Web Worker 对象后，它会继续监听消息（即使在外部脚本完成之后）直到其被终止为止。</p> <p>如需终止 Web Worker，并释放浏览器和计算机的资源，使用 <code>terminate()</code> 方法：</p> <pre><code class="javascript">w.terminate(); </code></pre> <h3>重用 Web Worker</h3> <p>如果将 Worker 变量设置为 <code>undefined</code>，则在终止后，可以重用代码：</p> <pre><code class="javascript">w = undefined; </code></pre> <h3>Web Worker 和 DOM</h3> <p>由于 Web Worker 位于外部文件中，因此无法访问下列 JavaScript 对象：</p> <ul> <li> <code>window</code> 对象</li> <li> <code>document</code> 对象</li> <li> <code>parent</code> 对象</li> </ul> <h2>SSE</h2> <p>服务器发送事件（<strong>S</strong>erver-<strong>S</strong>ent <strong>E</strong>vents）是基于 WebSocket 协议的一种服务器向客户端发送事件和数据的单向通讯。</p> <p>HTML5 SSE 允许网页获得来自服务器的更新。</p> <h3>单向消息传递</h3> <p>SSE 指的是网页自动从服务器获取更新。</p> <p>之前也可以做到这一点，但网页必须询问是否有可用的更新。使用 SSE，更新会自动进行。</p> <p>例子：Facebook/Twitter 更新、股票价格更新、新闻源、体育赛事结果等。</p> <blockquote> <p>至截稿时，Edge 尚未提供支持。</p> </blockquote> <h3>接收 SSE 通知</h3> <p><code>EventSource</code> 对象用于接收 SSE 通知：</p> <pre><code class="javascript">var source = new EventSource("demo_sse.php"); source.onmessage = function (event) { document.getElementById("result").innerHTML += event.data + "<br>"; }; </code></pre> <ul> <li>创建一个新的 <code>EventSource</code> 对象，然后规定发送更新的页面的 URL（本例中是 <code>demo_sse.php</code>）；</li> <li>每接收到一次更新，就会发生 <code>onmessage</code> 事件；</li> <li>当 <code>onmessage</code> 事件发生时，把已接收的数据放入 id 为 <code>result</code> 的元素中。</li> </ul> <h3>服务器端代码示例</h3> <p>为了让上面的例子可以运行，需要能够发送数据更新的服务器。</p> <p>服务器端事件流的语法是非常简单的。把 <code>Content-Type</code> 报头设置为 <code>text/event-stream</code>。现在可以开始发送事件流了。</p> <p>PHP 示例代码（<code>demo_sse.php</code>）：</p> <pre><code class="php"><?php header('Content-Type: text/event-stream'); header('Cache-Control: no-cache'); $time = date('r'); echo "data: The server time is: {$time}\n\n"; flush(); ?> </code></pre> <p>ASP 示例代码（<code>demo_sse.asp</code>）：</p> <pre><code class="html"><% Response.ContentType = "text/event-stream" Response.Expires = -1 Response.Write("data: The server time is:" & now()) Response.Flush() %> </code></pre> <ul> <li>把报头 <code>Content-Type</code> 设置为 <code>text/event-stream</code>；</li> <li>规定不对页面进行缓存；</li> <li>输出发送日期（始终以 <code>data:</code> 开头）；</li> <li>向网页刷新输出数据。</li> </ul> <h3>EventSource 对象</h3> <p>上面的例子使用了 <code>onmessage</code> 事件来获取消息。不过还可以使用其他事件：</p> <table> <thead> <tr> <th style="text-align:center">事件</th> <th style="text-align:center">描述</th> </tr> </thead> <tbody> <tr> <td style="text-align:center"><code>onopen</code></td> <td style="text-align:center">当通往服务器的连接被打开</td> </tr> <tr> <td style="text-align:center"><code>onmessage</code></td> <td style="text-align:center">当接收到消息</td> </tr> <tr> <td style="text-align:center"><code>onerror</code></td> <td style="text-align:center">当发生错误</td> </tr> </tbody> </table> </article> </div> </div> </div>  <div id="SOHUCS" sid="1248987166365831168"></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">你可能感兴趣的:(HTML5 笔记)</h4> <div id="paradigm-article-related"> <div class="recommend-post mb30"> <ul class="widget-links"> <li><a href="/article/1902968173678882816.htm" title="MySQL性能优化实战笔记 - 通俗易懂版" target="_blank">MySQL性能优化实战笔记 - 通俗易懂版</a> <span class="text-muted">泥潭硬拔</span> <a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a><a class="tag" taget="_blank" href="/search/%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96/1.htm">性能优化</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a> <div>1.存储引擎选择-到底选哪个？InnoDBvsMyISAM通俗对比想象你开了一家银行：InnoDB就像是有保险柜的银行支持事务：比如转账，要么都成功，要么都失败行级锁：小明在存钱时，小红还能同时取钱缺点：需要更多内存和CPUMyISAM就像是简易储物柜不支持事务：操作简单直接表级锁：一个人在用时，其他人要等待优点：读取速度快，占用资源少2.实战案例：常见性能问题及解决方案案例1：查询特别慢--糟糕</div> </li> <li><a href="/article/1902960355630444544.htm" title="rust学习笔记16-206.反转链表(递归)" target="_blank">rust学习笔记16-206.反转链表(递归)</a> <span class="text-muted">水蜜桃one</span> <a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a><a class="tag" taget="_blank" href="/search/%E9%93%BE%E8%A1%A8/1.htm">链表</a> <div>rust函数递归在14中已经提到，接下来我们把206.反转链表，用递归法实现递归函数通常包含两个主要部分：基准条件（BaseCase）：递归终止的条件，避免无限递归。递归步骤（RecursiveStep）：将问题分解为更小的子问题，并调用自身来解决这些子问题。//Definitionforsingly-linkedlist.#[derive(PartialEq,Eq,Clone,Debug)]pu</div> </li> <li><a href="/article/1902937768636510208.htm" title="嵌入式笔记 | 正点原子STM32F103ZET6 3 | 时钟系统" target="_blank">嵌入式笔记 | 正点原子STM32F103ZET6 3 | 时钟系统</a> <span class="text-muted">J鸟</span> <a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a><a class="tag" taget="_blank" href="/search/stm32/1.htm">stm32</a><a class="tag" taget="_blank" href="/search/%E5%8D%95%E7%89%87%E6%9C%BA/1.htm">单片机</a><a class="tag" taget="_blank" href="/search/%E5%B5%8C%E5%85%A5%E5%BC%8F%E7%A1%AC%E4%BB%B6/1.htm">嵌入式硬件</a> <div>1.RCC（复位和时钟控制）RCC（ResetandClockControl）是STM32的时钟系统控制模块，负责管理整个芯片的时钟信号。在使用任何外设之前，必须先使能其时钟。2.时钟系统框图解析时钟源（5种）HSI（高速内部时钟）由内部RC振荡器产生，默认8MHz精度较低，适用于对时钟精度要求不高的应用可作为系统时钟源HSE（高速外部时钟）由外部晶振（石英/陶瓷谐振器或外部时钟）产生，频率范围4</div> </li> <li><a href="/article/1902932334697574400.htm" title="25年申报工商年报前先看这篇笔记，帮你避坑，少走弯路！" target="_blank">25年申报工商年报前先看这篇笔记，帮你避坑，少走弯路！</a> <span class="text-muted">搬砖小杨聊资质</span> <a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a> <div>又到工商年报申报的时候了（25年截止日期6月30日）,今年年报申报与去年有点区别，我特意整理出来与大家分享，帮助大家避坑。笔记不长，5分钟时间让你事半功倍，你就是老板眼中最靓的仔！！1、今年国家企业信用信息公示系统做了个更新，未完成年报填写或有多家公司需要申报的，一定要点击退出登录，不要直接关闭网页。否则当你想要继续填写年报或申报其他公司的，需要等待系统【自动退出登录】，时间2-3个小时，会大大影</div> </li> <li><a href="/article/1902928045732327424.htm" title="day11 学习笔记" target="_blank">day11 学习笔记</a> <span class="text-muted">豆豆</span> <a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a> <div>文章目录前言一、类方法二、静态方法三、构造方法四、魔术方法前言通过今天的学习，我掌握了更多Python中有关面向对象编程思想中方法的概念与操作，包括类方法，静态方法，构造方法，魔术方法一、类方法类方法是属于类的行为，一般使用类而非对象进行调用类方法需要使用@classmethod装饰器定义类方法至少有一个形参用于绑定类，约定为cls类和该类的实例都可以调用类方法，但一般不用实例进行调用类方法不能访</div> </li> <li><a href="/article/1902926526555418624.htm" title="《Operating System Concepts》阅读笔记：p449-p459" target="_blank">《Operating System Concepts》阅读笔记：p449-p459</a> <span class="text-muted"></span> <a class="tag" taget="_blank" href="/search/%E6%93%8D%E4%BD%9C%E7%B3%BB%E7%BB%9F/1.htm">操作系统</a> <div>《OperatingSystemConcepts》学习第35天，p449-p459总结，总计11页。一、技术总结1.NVM&SSDFlash-memory-basedNVMisfrequentlyusedinadisk-drive-likecontainer,inwhichcaseitiscalledasolid-statedisk(SSD)(Figure11.3)。2.HDDScheduling</div> </li> <li><a href="/article/1902910260121759744.htm" title="数智读书笔记系列021《大数据医疗》：探索医疗行业的智能变革" target="_blank">数智读书笔记系列021《大数据医疗》：探索医疗行业的智能变革</a> <span class="text-muted">Allen_Lyb</span> <a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%99%BA%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0/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/%E5%81%A5%E5%BA%B7%E5%8C%BB%E7%96%97/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/python/1.htm">python</a> <div>一、书籍介绍《大数据医疗》由徐曼、沈江、余海燕合著，由机械工业出版社出版。徐曼是南开大学商学院副教授，在大数据驱动的智能决策研究领域颇有建树，尤其在大数据驱动的医疗与健康决策方面有着深入研究，曾获天津优秀博士论文、教育部博士研究生新人奖。沈江等作者也在相关学术和实践领域有着丰富的经验和深厚的专业知识。这本书系统且深入地探讨了大数据技术在医疗领域的应用与变革，对推动医疗行业的智能化发展具有重要的理论</div> </li> <li><a href="/article/1902871927253430272.htm" title="笔记：代码随想录算法训练营day57：99.岛屿数量深搜、岛屿数量广搜、100.岛屿的最大面积" target="_blank">笔记：代码随想录算法训练营day57：99.岛屿数量深搜、岛屿数量广搜、100.岛屿的最大面积</a> <span class="text-muted">jingjingjing1111</span> <a class="tag" taget="_blank" href="/search/%E6%B7%B1%E5%BA%A6%E4%BC%98%E5%85%88/1.htm">深度优先</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a> <div>学习资料：代码随想录注：文中含大模型生成内容99.岛屿数量卡码网题目链接（ACM模式）先看深搜方法：找到未标标记过的说明找到一片陆地的或者一片陆地的一个角落，dfs搜索是寻找相连接的陆地其余部分并做好标记#include#includeusingnamespacestd;intdirection[4][2]={0,1,-1,0,0,-1,1,0};voiddfs(constvector>&B612</div> </li> <li><a href="/article/1902865239704137728.htm" title="笔记：代码随想录算法训练营day56:图论理论基础、深搜理论基础、98. 所有可达路径、广搜理论基础" target="_blank">笔记：代码随想录算法训练营day56:图论理论基础、深搜理论基础、98. 所有可达路径、广搜理论基础</a> <span class="text-muted">jingjingjing1111</span> <a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a> <div>学习资料：代码随想录连通图是给无向图的定义，强连通图是给有向图的定义朴素存储：二维数组邻接矩阵邻接表：list基础知识：C++容器类|菜鸟教程深搜是沿着一个方向搜到头再不断回溯，转向；广搜是每一次搜索要把当前能够得到的方向搜个遍深搜三部曲：传入参数、终止条件、处理节点+递推+回溯98.所有可达路径卡码网题目链接（ACM模式）先是用邻接矩阵，矩阵的x,y表示从x到y有一条边主要还是用回溯方法遍历整个</div> </li> <li><a href="/article/1902863840878587904.htm" title="Neo4j GDS-02-graph-data-science 插件库安装实战笔记" target="_blank">Neo4j GDS-02-graph-data-science 插件库安装实战笔记</a> <span class="text-muted"></span> <a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AFjava/1.htm">后端java</a> <div>neo4japoc系列Neo4jAPOC-01-图数据库apoc插件介绍Neo4jAPOC-01-图数据库apoc插件安装neo4jonwindows10Neo4jAPOC-03-图数据库apoc实战使用使用Neo4jAPOC-04-图数据库apoc实战使用使用apoc.path.spanningTree最小生成树Neo4jAPOC-05-图数据库apoc实战使用使用labelFilterNeo4</div> </li> <li><a href="/article/1902805809620905984.htm" title="Windows使用Browser Use笔记" target="_blank">Windows使用Browser Use笔记</a> <span class="text-muted"></span> <a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BDai%E5%BC%80%E5%8F%91/1.htm">人工智能ai开发</a> <div>相关文档：https://docs.browser-use.com/quickstart首先安装UV命令行cmdpowershell-ExecutionPolicyByPass-c"irmhttps://astral.sh/uv/install.ps1|iex"设置环境变量setPath=C:\xx\.local\bin;%Path%查看版本uv-V查看可用和已安装的Python版本uvpytho</div> </li> <li><a href="/article/1902802570867437568.htm" title="使用spring data MongoDB对MongoDB进行简单CURD操作示例" target="_blank">使用spring data MongoDB对MongoDB进行简单CURD操作示例</a> <span class="text-muted">其实我就是个萌新</span> <a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/mongodb/1.htm">mongodb</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>本文章为作者个人学习笔记，仅作参考。1.application.properties配置spring.data.mongodb.database=[数据库名]spring.data.mongodb.host=localhost[主机名,本机：localhost]spring.data.mongodb.port=[数据库端口，默认:27017]2.根据数据库文档定义实体类：@RequiredArgs</div> </li> <li><a href="/article/1902796256476983296.htm" title="【Vue3笔记01】如何使用Vue3和Vite搭建前端项目的基础开发环境" target="_blank">【Vue3笔记01】如何使用Vue3和Vite搭建前端项目的基础开发环境</a> <span class="text-muted">Mr.小朱同学</span> <a class="tag" taget="_blank" href="/search/Web%E5%89%8D%E7%AB%AF%E7%AC%94%E8%AE%B0/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/%E7%AC%94%E8%AE%B0/1.htm">笔记</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/Vue3/1.htm">Vue3</a><a class="tag" taget="_blank" href="/search/Vite/1.htm">Vite</a><a class="tag" taget="_blank" href="/search/%E6%90%AD%E5%BB%BA%E9%A1%B9%E7%9B%AE%E7%8E%AF%E5%A2%83/1.htm">搭建项目环境</a> <div>这篇文章，主要介绍如何使用Vue3和Vite搭建前端项目的基础开发环境【知识星球】。目录一、搭建项目环境1.1、前提条件1.2、开始搭建1.3、下载依赖1.4、启动工程一、搭建项目环境目前前端开发中，使用最多的就是Vue.js框架，目前Vue.js框架常用的有Vue2、Vue3两个版本，Vue3和Vue2在语法上还是存在很大的差异的，这里我将介绍如何搭建Vue3开发环境。1.1、前提条件在创建Vu</div> </li> <li><a href="/article/1902791710207963136.htm" title="【自学笔记】NFT基础知识点总览-持续更新" target="_blank">【自学笔记】NFT基础知识点总览-持续更新</a> <span class="text-muted">Long_poem</span> <a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a><a class="tag" taget="_blank" href="/search/%E5%8C%BA%E5%9D%97%E9%93%BE/1.htm">区块链</a> <div>提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录NFT（非同质化代币）基础知识点总览1.NFT简介2.NFT的应用场景3.NFT的工作原理4.NFT的创建和发行5.代码示例代码解释总结NFT（非同质化代币）基础知识点总览1.NFT简介NFT（Non-FungibleToken，非同质化代币）是一种基于区块链技术的独特数字资产，每个NFT都是唯一的、不可互换的。与同质化代币（</div> </li> <li><a href="/article/1902735715096129536.htm" title="《算法笔记》9.2小节——数据结构专题(2)-＞二叉树的遍历问题 A: 复原二叉树（同问题 C: 二叉树遍历）" target="_blank">《算法笔记》9.2小节——数据结构专题(2)-＞二叉树的遍历问题 A: 复原二叉树（同问题 C: 二叉树遍历）</a> <span class="text-muted">圣保罗的大教堂</span> <a class="tag" taget="_blank" href="/search/%E3%80%8A%E7%AE%97%E6%B3%95%E7%AC%94%E8%AE%B0%E3%80%8B/1.htm">《算法笔记》</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a> <div>题目描述小明在做数据结构的作业，其中一题是给你一棵二叉树的前序遍历和中序遍历结果，要求你写出这棵二叉树的后序遍历结果。输入输入包含多组测试数据。每组输入包含两个字符串，分别表示二叉树的前序遍历和中序遍历结果。每个字符串由不重复的大写字母组成。输出对于每组输入，输出对应的二叉树的后续遍历结果。样例输入DBACEGFABCDEFGBCADCBAD样例输出ACBFGEDCDAB分析：不建树直接找的方法。</div> </li> <li><a href="/article/1902735337038344192.htm" title="数据结构复习笔记5.2：二叉树" target="_blank">数据结构复习笔记5.2：二叉树</a> <span class="text-muted">SGCGYU_Tan</span> <a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/1.htm">数据结构</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/1.htm">数据结构</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a><a class="tag" taget="_blank" href="/search/c%2B%2B/1.htm">c++</a> <div>1.二叉树的概念⼆叉树是每个结点最多有两个⼦树的树结构。也就是说⼆叉树不允许存在度⼤于2的树。它有五种最基本的形态：⼆叉树可以是空集。根可以有空的左⼦树或者右⼦树；或者左右⼦树都是空。其中只有左⼦树或者右子树的叫做斜树。为何要重点研究每结点最多只有两个“叉”的树？二叉树的结构最简单，规律性最强；可以证明，所有树都能转为唯一对应的二叉树，不失一般性。普通树（多叉树）若不转化为二叉树，则运算很难实现。</div> </li> <li><a href="/article/1902700531407712256.htm" title="数学建模清风课程笔记——第二章 TOPSIS法" target="_blank">数学建模清风课程笔记——第二章 TOPSIS法</a> <span class="text-muted">minpengyuanBITer</span> <a class="tag" taget="_blank" href="/search/%E6%95%B0%E5%AD%A6%E5%BB%BA%E6%A8%A1/1.htm">数学建模</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E5%AD%A6%E5%BB%BA%E6%A8%A1/1.htm">数学建模</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a> <div>TOPSIS(TechniqueforOrderPreferencebySimilaritytoIdealSolution)可翻译为逼近理想解排序法，国内简称为优劣解距离法。TOPSIS法是一种常用的综合评价方法，其能充分利用原始数据的信息，其结果能够精确地反映各评价方案之间的差距。评价类问题1TOPSIS法TOPSIS法概念：TOPSIS法是一种常用的综合评价方法，能充分利用原始数据的信息，其结</div> </li> <li><a href="/article/1902699899061858304.htm" title="JDK8 Stream 数据流效率分析，Java开发你需要了解的那些事" target="_blank">JDK8 Stream 数据流效率分析，Java开发你需要了解的那些事</a> <span class="text-muted">气质大叔</span> <a class="tag" taget="_blank" href="/search/%E7%A8%8B%E5%BA%8F%E5%91%98/1.htm">程序员</a><a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AF/1.htm">后端</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>此外还有一系列特化流，如IntStream，LongStream，DoubleStream等），Java8引入的的Stream主要用于取代部分Collection的操作，每个流代表一个值序列，流提供一系列常用的聚集操作，可以便捷的在它上面进行各种运算。集合类库也提供了便捷的方式使我们可以以操作流的方式使用集合、数组以及其它数据结构；作为阅读福利，小编也整理了一些Java学习笔记（包含面试真题+脑图</div> </li> <li><a href="/article/1902689931688472576.htm" title="计算机网络笔记、面试八股（二）—— HTTP协议" target="_blank">计算机网络笔记、面试八股（二）—— HTTP协议</a> <span class="text-muted">Your_Raymond</span> <a class="tag" taget="_blank" href="/search/%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%BD%91%E7%BB%9C/1.htm">计算机网络</a><a class="tag" taget="_blank" href="/search/http/1.htm">http</a><a class="tag" taget="_blank" href="/search/%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%BD%91%E7%BB%9C/1.htm">计算机网络</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a> <div>本章目录2.HTTP协议2.1HTTP协议简介2.2HTTP协议的优点2.3HTTP协议的缺点2.4HTTP协议属于哪一层2.5HTTP通信过程2.6常见请求方法2.7GET和POST的区别2.8请求报文与响应报文2.8.1HTTP请求报文2.8.2HTTP响应报文2.9响应状态码2.10HTTP1.0和1.1的区别2.10.1长连接2.10.2错误响应码2.10.3缓存处理2.10.4带宽的优化</div> </li> <li><a href="/article/1902683755080904704.htm" title="linuxcentos6笔记" target="_blank">linuxcentos6笔记</a> <span class="text-muted">lnes，</span> <a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/centos/1.htm">centos</a><a class="tag" taget="_blank" href="/search/vim/1.htm">vim</a> <div>目录Linux笔记11目录结构51.1基本指令51.2Ls指令：51.3Pwd指令：61.4Cd指令：71.5mkdir指令：71.6touch指令：71.7cp指令：71.8mv指令：81.9rm指令：81.10vim指令：91.11输出重定向：91.12cat指令：102进阶指令102.1Df指令：102.2free指令：102.3head指令：112.4tail指令：112.5less指令：</div> </li> <li><a href="/article/1902683628849131520.htm" title="【考研计算机网络】课堂笔记1 第一章概述" target="_blank">【考研计算机网络】课堂笔记1 第一章概述</a> <span class="text-muted">刘鑫磊up</span> <a class="tag" taget="_blank" href="/search/%23/1.htm">#</a><a class="tag" taget="_blank" href="/search/%E6%93%8D%E4%BD%9C%E7%B3%BB%E7%BB%9F/1.htm">操作系统</a><a class="tag" taget="_blank" href="/search/%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%BD%91%E7%BB%9C/1.htm">计算机网络</a><a class="tag" taget="_blank" href="/search/%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%BD%91%E7%BB%9C/1.htm">计算机网络</a> <div>文章目录：一：计算机网络的概述1.计算机网络的基本概念2.计算机网络的组成3.计算机网络的功能4.计算机网络的分类4.1分布范围分类4.2传输技术分类4.3按照拓扑结构分类4.4按照使用者分类4.5按照传输介质分类二：计算机网络的标准化工作及相关组织三：计算机网络的性能指标速率kb千Mb兆Gb吉Tb太的单位换算存储容量KBMBGBTB的单位换数四：网络分层五：计算机网络协议、接口、服务的概念1.协</div> </li> <li><a href="/article/1902682115355504640.htm" title="常用的pdf技术有哪些？--笔记" target="_blank">常用的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/%E7%AC%94%E8%AE%B0/1.htm">笔记</a> <div>常用的pdf技术有哪些？1.iTextPDF：iText是著名的开放项目，是用于生成PDF文档的一个java类库。通过iText不仅可以生成PDF或rtf的文档，而且可以将XML、Html文件转化为PDF文件。Openoffice：openoffice是开源软件且能在windows和linux平台下运行，可以灵活的将word或者Excel转化为PDF文档。JasperReport：是一个强大、灵活</div> </li> <li><a href="/article/1902674801533710336.htm" title="计算机网络笔记再战——理解几个经典的协议HTTP章4" target="_blank">计算机网络笔记再战——理解几个经典的协议HTTP章4</a> <span class="text-muted">charlie114514191</span> <a class="tag" taget="_blank" href="/search/%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%BD%91%E7%BB%9C%E5%AD%A6%E4%B9%A0/1.htm">计算机网络学习</a><a class="tag" taget="_blank" href="/search/%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%BD%91%E7%BB%9C/1.htm">计算机网络</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a><a class="tag" taget="_blank" href="/search/http/1.htm">http</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C%E5%8D%8F%E8%AE%AE/1.htm">网络协议</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C/1.htm">网络</a> <div>计算机网络笔记再战——理解几个经典的协议10HTTP章4确保Web安全的HTTPSHTTP是不安全的，它使用的是明文传递，这意味着潜在的报文纂改。这里我们将学习更加安全的HTTPS协议通信使用明文（不加密），内容可能会被窃听不验证通信方的身份，因此有可能遭遇伪装无法证明报文的完整性，所以有可能已遭篡改HTTP本身没有办法加密，但是可以跟SSL（SecureSocketLayer）或者是TLS（Tr</div> </li> <li><a href="/article/1902673288610508800.htm" title="C++ 结构型设计模式" target="_blank">C++ 结构型设计模式</a> <span class="text-muted">十七12138</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/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/1.htm">设计模式</a> <div>C++设计模式自己理解整理笔记结构型-适配器模式适配器模式（AdapterPattern）是一种结构型设计模式，它的主要作用是将一个类的接口转换成客户希望的另一个接口，使得原本由于接口不兼容而不能一起工作的那些类可以一起工作。适配器模式主要有两种实现方式：类适配器模式和对象适配器模式。类适配器类适配器通过多重继承实现，这种方式利用了继承优点直接调用：由于适配器类继承了被适配类，所以可以直接调用被适</div> </li> <li><a href="/article/1902664336317411328.htm" title="numpy学习笔记3：三维数组 np.ones((2, 3, 4)) 的详细解释" target="_blank">numpy学习笔记3：三维数组 np.ones((2, 3, 4)) 的详细解释</a> <span class="text-muted">宁宁可可</span> <a class="tag" taget="_blank" href="/search/%23/1.htm">#</a><a class="tag" taget="_blank" href="/search/%E6%9C%BA%E5%99%A8%E5%AD%A6%E4%B9%A0/1.htm">机器学习</a><a class="tag" taget="_blank" href="/search/%23/1.htm">#</a><a class="tag" taget="_blank" href="/search/Python%E5%9F%BA%E7%A1%80%E4%B8%8E%E8%BF%9B%E9%98%B6/1.htm">Python基础与进阶</a><a class="tag" taget="_blank" href="/search/numpy/1.htm">numpy</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/1.htm">学习笔记</a> <div>numpy学习笔记3：三维数组np.ones((2,3,4))的详细解释以下是关于三维数组np.ones((2,3,4))的详细解释：1.三维数组的形状形状(2,3,4)表示：最外层维度：2个“层”（或“块”）；中间维度：每个层有3行；最内层维度：每行有4个元素。可以类比为：2本书（外层），每本书有3页（中间层），每页有4行文字（内层）。2.创建全1三维数组代码示例：importnumpyasnp</div> </li> <li><a href="/article/1902651221613801472.htm" title="Ts学习笔记" target="_blank">Ts学习笔记</a> <span class="text-muted">初学者7.</span> <a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a><a class="tag" taget="_blank" href="/search/typescript/1.htm">typescript</a> <div>一、Ts与Js区别TsJsJavaScript的超集，用于解决大型项目的代码复杂性一种脚本语言，用于创建动态网页。强类型，支持静态和动态类型动态弱类型语言可以在编译期间发现并纠正错误只能在运行时发现错误不允许改变变量的数据类型变量可以被赋予不同类型的值二、Ts基础类型：boolean,number,string,undefined,null,any,unknown,void，neverany,un</div> </li> <li><a href="/article/1902634710253760512.htm" title="Qt爬坑笔记" target="_blank">Qt爬坑笔记</a> <span class="text-muted">klzed_</span> <a class="tag" taget="_blank" href="/search/qt/1.htm">qt</a><a class="tag" taget="_blank" href="/search/c%2B%2B/1.htm">c++</a><a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AF/1.htm">后端</a><a class="tag" taget="_blank" href="/search/ui/1.htm">ui</a> <div>1.自定义一个QWidget的派生类，将其作为子部件并设置样式表时，需要重写paintEvent事件，否则样式表可能无效，如下所示：voidCustomWidget::paintEvent(QPaintEvent*){QStyleOptionopt;opt.init(this);QPainterp(this);</div> </li> <li><a href="/article/1902631807359184896.htm" title="LeetCode刷题笔记" target="_blank">LeetCode刷题笔记</a> <span class="text-muted">小李李李李腊八</span> <a class="tag" taget="_blank" href="/search/leetcode/1.htm">leetcode</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>leetcode_01两数之和斐波那契数列三个数最大乘积反转链表x的平方根环形列表LeetCode随笔两数之和给定一个整数数组nums和一个整数目标值target，请你在该数组中找出和为目标值target的那两个整数，并返回它们的数组下标。你可以假设每种输入只会对应一个答案。但是，数组中同一个元素在答案里不能重复出现。你可以按任意顺序返回答案。暴力法记录下数组第一个数值，对数组进行循环，将之后的值</div> </li> <li><a href="/article/1902614652785848320.htm" title="numpy学习笔记2：ones = np.ones((2, 4)) 的详解" target="_blank">numpy学习笔记2：ones = np.ones((2, 4)) 的详解</a> <span class="text-muted">宁宁可可</span> <a class="tag" taget="_blank" href="/search/%23/1.htm">#</a><a class="tag" taget="_blank" href="/search/%E6%9C%BA%E5%99%A8%E5%AD%A6%E4%B9%A0/1.htm">机器学习</a><a class="tag" taget="_blank" href="/search/%23/1.htm">#</a><a class="tag" taget="_blank" href="/search/Python%E5%9F%BA%E7%A1%80%E4%B8%8E%E8%BF%9B%E9%98%B6/1.htm">Python基础与进阶</a><a class="tag" taget="_blank" href="/search/numpy/1.htm">numpy</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> <div>numpy学习笔记2：ones=np.ones((2,4))的详解np.ones()是NumPy中用于创建全1数组的核心函数，其用法和参数与np.zeros()类似，但生成的数组元素值全部为1。以下是详细解释：1、语法numpy.ones(shape,dtype=float,order='C')作用：生成一个指定形状和数据类型的全1数组。参数：shape：数组的形状，以元组形式传递（如(2,4)表</div> </li> <li><a href="/article/1902605695103070208.htm" title="软考中级软件设计师考点知识点笔记总结 day05" target="_blank">软考中级软件设计师考点知识点笔记总结 day05</a> <span class="text-muted">莫问alicia</span> <a class="tag" taget="_blank" href="/search/%E8%BD%AF%E8%80%83/1.htm">软考</a><a class="tag" taget="_blank" href="/search/%E4%B8%AD%E7%BA%A7%E8%BD%AF%E4%BB%B6%E8%AE%BE%E8%AE%A1%E5%B8%88/1.htm">中级软件设计师</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a> <div>文章目录4、栈和队列4.1、栈的定义4.2、队列定义5、串、数组、矩阵和广义表5.1、串5.2、数组5.3、稀疏矩阵5.4、广义表4、栈和队列4.1、栈的定义线性表是具有相同数据类型的n个数据元素的有限序列，n为表厂。n=0时线性表是一个空表L=（a1,a2,a3,…an）栈是只允许在一端进行插入或删除操作的线性表栈顶允许插入和删除的一端栈顶进栈顶出栈底不允许插入和删除的一端4.2、队列定义队列是</div> </li> <li><a href="/article/92.htm" title="log4j对象改变日志级别" target="_blank">log4j对象改变日志级别</a> <span class="text-muted">3213213333332132</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/log4j/1.htm">log4j</a><a class="tag" taget="_blank" href="/search/level/1.htm">level</a><a class="tag" taget="_blank" href="/search/log4j%E5%AF%B9%E8%B1%A1%E5%90%8D%E7%A7%B0/1.htm">log4j对象名称</a><a class="tag" taget="_blank" href="/search/%E6%97%A5%E5%BF%97%E7%BA%A7%E5%88%AB/1.htm">日志级别</a> <div>log4j对象改变日志级别可批量的改变所有级别，或是根据条件改变日志级别。 log4j配置文件： log4j.rootLogger=ERROR,FILE,CONSOLE,EXECPTION #log4j.appender.FILE=org.apache.log4j.RollingFileAppender log4j.appender.FILE=org.apache.l</div> </li> <li><a href="/article/219.htm" title="elk+redis 搭建nginx日志分析平台" target="_blank">elk+redis 搭建nginx日志分析平台</a> <span class="text-muted">ronin47</span> <a class="tag" taget="_blank" href="/search/elasticsearch/1.htm">elasticsearch</a><a class="tag" taget="_blank" href="/search/kibana/1.htm">kibana</a><a class="tag" taget="_blank" href="/search/logstash/1.htm">logstash</a> <div>             elk+redis 搭建nginx日志分析平台 logstash,elasticsearch,kibana 怎么进行nginx的日志分析呢？首先，架构方面，nginx是有日志文件的，它的每个请求的状态等都有日志文件进行记录。其次，需要有个队列，redis的l</div> </li> <li><a href="/article/346.htm" title="Yii2设置时区" target="_blank">Yii2设置时区</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/PHP/1.htm">PHP</a><a class="tag" taget="_blank" href="/search/timezone/1.htm">timezone</a><a class="tag" taget="_blank" href="/search/yii2/1.htm">yii2</a> <div>时区这东西，在开发的时候，你说重要吧，也还好，毕竟没它也能正常运行，你说不重要吧，那就纠结了。特别是linux系统，都TMD差上几小时，你能不痛苦吗？win还好一点。有一些常规方法，是大家目前都在采用的1、php.ini中的设置，这个就不谈了，2、程序中公用文件里设置，date_default_timezone_set一下时区3、或者。。。自己写时间处理函数，在遇到时间的时候，用这个函数处理（比较</div> </li> <li><a href="/article/473.htm" title="js实现前台动态添加文本框，后台获取文本框内容" target="_blank">js实现前台动态添加文本框，后台获取文本框内容</a> <span class="text-muted">171815164</span> <a class="tag" taget="_blank" href="/search/%E6%96%87%E6%9C%AC%E6%A1%86/1.htm">文本框</a> <div> <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w</div> </li> <li><a href="/article/600.htm" title="持续集成工具" target="_blank">持续集成工具</a> <span class="text-muted">g21121</span> <a class="tag" taget="_blank" href="/search/%E6%8C%81%E7%BB%AD%E9%9B%86%E6%88%90/1.htm">持续集成</a> <div>        持续集成是什么？我们为什么需要持续集成？持续集成带来的好处是什么？什么样的项目需要持续集成？...        持续集成(Continuous integration ,简称CI)，所谓集成可以理解为将互相依赖的工程或模块合并成一个能单独运行</div> </li> <li><a href="/article/727.htm" title="数据结构哈希表(hash)总结" target="_blank">数据结构哈希表(hash)总结</a> <span class="text-muted">永夜-极光</span> <a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/1.htm">数据结构</a> <div>1.什么是hash 来源于百度百科: Hash，一般翻译做“散列”，也有直接音译为“哈希”的，就是把任意长度的输入，通过散列算法，变换成固定长度的输出，该输出就是散列值。这种转换是一种压缩映射，也就是，散列值的空间通常远小于输入的空间，不同的输入可能会散列成相同的输出，所以不可能从散列值来唯一的确定输入值。简单的说就是一种将任意长度的消息压缩到某一固定长度的消息摘要的函数。   </div> </li> <li><a href="/article/854.htm" title="乱七八糟" target="_blank">乱七八糟</a> <span class="text-muted">程序员是怎么炼成的</span> <div>eclipse中的jvm字节码查看插件地址： http://andrei.gmxhome.de/eclipse/ 安装该地址的outline 插件  后重启，打开window下的view下的bytecode视图 http://andrei.gmxhome.de/eclipse/   jvm博客： http://yunshen0909.iteye.com/blog/2</div> </li> <li><a href="/article/981.htm" title="职场人伤害了“上司” 怎样弥补" target="_blank">职场人伤害了“上司” 怎样弥补</a> <span class="text-muted">aijuans</span> <a class="tag" taget="_blank" href="/search/%E8%81%8C%E5%9C%BA/1.htm">职场</a> <div> 由于工作中的失误，或者平时不注意自己的言行“伤害”、“得罪”了自己的上司，怎么办呢？　　在职业生涯中这种问题尽量不要发生。下面提供了一些解决问题的建议：　　一、利用一些轻松的场合表示对他的尊重　　即使是开明的上司也很注重自己的权威，都希望得到下属的尊重，所以当你与上司冲突后，最好让不愉快成为过去，你不妨在一些轻松的场合，比如会餐、联谊活动等，向上司问个好，敬下酒，表示你对对方的尊重，</div> </li> <li><a href="/article/1108.htm" title="深入浅出url编码" target="_blank">深入浅出url编码</a> <span class="text-muted">antonyup_2006</span> <a class="tag" taget="_blank" href="/search/%E5%BA%94%E7%94%A8%E6%9C%8D%E5%8A%A1%E5%99%A8/1.htm">应用服务器</a><a class="tag" taget="_blank" href="/search/%E6%B5%8F%E8%A7%88%E5%99%A8/1.htm">浏览器</a><a class="tag" taget="_blank" href="/search/servlet/1.htm">servlet</a><a class="tag" taget="_blank" href="/search/weblogic/1.htm">weblogic</a><a class="tag" taget="_blank" href="/search/IE/1.htm">IE</a> <div>出处：http://blog.csdn.net/yzhz  杨争   http://blog.csdn.net/yzhz/archive/2007/07/03/1676796.aspx 一、问题：         编码问题是JAVA初学者在web开发过程中经常会遇到问题，网上也有大量相关的</div> </li> <li><a href="/article/1235.htm" title="建表后创建表的约束关系和增加表的字段" target="_blank">建表后创建表的约束关系和增加表的字段</a> <span class="text-muted">百合不是茶</span> <a class="tag" taget="_blank" href="/search/%E6%A0%87%E7%9A%84%E7%BA%A6%E6%9D%9F%E5%85%B3%E7%B3%BB/1.htm">标的约束关系</a><a class="tag" taget="_blank" href="/search/%E5%A2%9E%E5%8A%A0%E8%A1%A8%E7%9A%84%E5%AD%97%E6%AE%B5/1.htm">增加表的字段</a> <div>  下面所有的操作都是在表建立后操作的,主要目的就是熟悉sql的约束,约束语句的万能公式   1,增加字段(student表中增加姓名字段)   alter table 增加字段的表名 add 增加的字段名增加字段的数据类型 alter table student add name varchar2(10);   &nb</div> </li> <li><a href="/article/1362.htm" title="Uploadify 3.2 参数属性、事件、方法函数详解" target="_blank">Uploadify 3.2 参数属性、事件、方法函数详解</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/uploadify/1.htm">uploadify</a> <div>一.属性属性名称默认值说明 auto true 设置为true当选择文件后就直接上传了，为false需要点击上传按钮才上传。 buttonClass ” 按钮样式 buttonCursor ‘hand’ 鼠标指针悬停在按钮上的样子 buttonImage null 浏览按钮的图片的路</div> </li> <li><a href="/article/1489.htm" title="精通Oracle10编程SQL(16)使用LOB对象" target="_blank">精通Oracle10编程SQL(16)使用LOB对象</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</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/plsql/1.htm">plsql</a> <div>/* *使用LOB对象 */ --LOB(Large Object)是专门用于处理大对象的一种数据类型，其所存放的数据长度可以达到4G字节 --CLOB/NCLOB用于存储大批量字符数据，BLOB用于存储大批量二进制数据，而BFILE则存储着指向OS文件的指针 /* *综合实例 */ --建立表空间 --#指定区尺寸为128k,如不指定，区尺寸默认为64k CR</div> </li> <li><a href="/article/1616.htm" title="【Resin一】Resin服务器部署web应用" target="_blank">【Resin一】Resin服务器部署web应用</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/resin/1.htm">resin</a> <div>工作中，在Resin服务器上部署web应用，通常有如下三种方式：   配置多个web-app 配置多个http id 为每个应用配置一个propeties、xml以及sh脚本文件配置多个web-app   在resin.xml中,可以为一个host配置多个web-app   <cluster id="app&q</div> </li> <li><a href="/article/1743.htm" title="red5简介及基础知识" target="_blank">red5简介及基础知识</a> <span class="text-muted">白糖_</span> <a class="tag" taget="_blank" href="/search/%E5%9F%BA%E7%A1%80/1.htm">基础</a> <div>  简介   Red5的主要功能和Macromedia公司的FMS类似，提供基于Flash的流媒体服务的一款基于Java的开源流媒体服务器。它由Java语言编写，使用RTMP作为流媒体传输协议，这与FMS完全兼容。它具有流化FLV、MP3文件，实时录制客户端流为FLV文件，共享对象，实时视频播放、Remoting等功能。用Red5替换FMS后,客户端不用更改可正</div> </li> <li><a href="/article/1870.htm" title="angular.fromJson" target="_blank">angular.fromJson</a> <span class="text-muted">boyitech</span> <a class="tag" taget="_blank" href="/search/AngularJS/1.htm">AngularJS</a><a class="tag" taget="_blank" href="/search/AngularJS+%E5%AE%98%E6%96%B9API/1.htm">AngularJS 官方API</a><a class="tag" taget="_blank" href="/search/AngularJS+API/1.htm">AngularJS API</a> <div>angular.fromJson 描述: 把Json字符串转为对象使用方法: angular.fromJson(json); 参数详解: Param Type Details json string JSON 字符串返回值: 对象, 数组, 字符串或者是一个数字示例: <!DOCTYPE HTML> <h</div> </li> <li><a href="/article/1997.htm" title="java-颠倒一个句子中的词的顺序。比如： I am a student颠倒后变成：student a am I" target="_blank">java-颠倒一个句子中的词的顺序。比如： I am a student颠倒后变成：student a am I</a> <span class="text-muted">bylijinnan</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div> public class ReverseWords { /** * 题目：颠倒一个句子中的词的顺序。比如： I am a student颠倒后变成：student a am I.词以空格分隔。 * 要求： * 1.实现速度最快,移动最少 * 2.不能使用String的方法如split,indexOf等等。 * 解答：两次翻转。 */ publ</div> </li> <li><a href="/article/2124.htm" title="web实时通讯" target="_blank">web实时通讯</a> <span class="text-muted">Chen.H</span> <a class="tag" taget="_blank" href="/search/Web/1.htm">Web</a><a class="tag" taget="_blank" href="/search/%E6%B5%8F%E8%A7%88%E5%99%A8/1.htm">浏览器</a><a class="tag" taget="_blank" href="/search/socket/1.htm">socket</a><a class="tag" taget="_blank" href="/search/%E8%84%9A%E6%9C%AC/1.htm">脚本</a> <div>关于web实时通讯，做一些监控软件。由web服务器组件从消息服务器订阅实时数据，并建立消息服务器到所述web服务器之间的连接，web浏览器利用从所述web服务器下载到web页面的客户端代理与web服务器组件之间的socket连接，建立web浏览器与web服务器之间的持久连接；利用所述客户端代理与web浏览器页面之间的信息交互实现页面本地更新，建立一条从消息服务器到web浏览器页面之间的消息通路</div> </li> <li><a href="/article/2251.htm" title="[基因与生物]远古生物的基因可以嫁接到现代生物基因组中吗?" target="_blank">[基因与生物]远古生物的基因可以嫁接到现代生物基因组中吗?</a> <span class="text-muted">comsci</span> <a class="tag" taget="_blank" href="/search/%E7%94%9F%E7%89%A9/1.htm">生物</a> <div>       大家仅仅把我说的事情当作一个IT行业的笑话来听吧..没有其它更多的意思     如果我们把大自然看成是一位伟大的程序员,专门为地球上的生态系统编制基因代码,并创造出各种不同的生物来,那么6500万年前的程序员开发的代码,是否兼容现代派的程序员的代码和架构呢?   </div> </li> <li><a href="/article/2378.htm" title="oracle 外部表" target="_blank">oracle 外部表</a> <span class="text-muted">daizj</span> <a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a><a class="tag" taget="_blank" href="/search/%E5%A4%96%E9%83%A8%E8%A1%A8/1.htm">外部表</a><a class="tag" taget="_blank" href="/search/external+tables/1.htm">external tables</a> <div>    oracle外部表是只允许只读访问，不能进行DML操作，不能创建索引，可以对外部表进行的查询，连接，排序，创建视图和创建同义词操作。 you can select, join, or sort external table data. You can also create views and synonyms for external tables. Ho</div> </li> <li><a href="/article/2505.htm" title="aop相关的概念及配置" target="_blank">aop相关的概念及配置</a> <span class="text-muted">daysinsun</span> <a class="tag" taget="_blank" href="/search/AOP/1.htm">AOP</a> <div>切面(Aspect): 通常在目标方法执行前后需要执行的方法（如事务、日志、权限），这些方法我们封装到一个类里面，这个类就叫切面。连接点（joinpoint） spring里面的连接点指需要切入的方法，通常这个joinpoint可以作为一个参数传入到切面的方法里面（非常有用的一个东西）。通知（Advice）通知就是切面里面方法的具体实现，分为前置、后置、最终、异常环</div> </li> <li><a href="/article/2632.htm" title="初一上学期难记忆单词背诵第二课" target="_blank">初一上学期难记忆单词背诵第二课</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/english/1.htm">english</a><a class="tag" taget="_blank" href="/search/word/1.htm">word</a> <div>middle 中间的，中级的 well 喔，那么；好吧 phone 电话，电话机 policeman 警察 ask 问 take 拿到；带到 address 地址 glad 高兴的，乐意的 why 为什么  China 中国 family 家庭 grandmother (外)祖母 grandfather (外)祖父 wife 妻子 husband 丈夫 da</div> </li> <li><a href="/article/2759.htm" title="Linux日志分析常用命令" target="_blank">Linux日志分析常用命令</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/log/1.htm">log</a> <div>1.查看文件内容 cat -n 显示行号 2.分页显示 more Enter 显示下一行空格显示下一页 F 显示下一屏 B 显示上一屏 less /get 查询"get"字符串并高亮显示 3.显示文件尾 tail -f 不退出持续显示 -n 显示文件最后n行 4.显示头文件 head -n 显示文件开始n行 5.内容排序 sort -n 按照</div> </li> <li><a href="/article/2886.htm" title="JSONP 原理分析" target="_blank">JSONP 原理分析</a> <span class="text-muted">fantasy2005</span> <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/jsonp/1.htm">jsonp</a><a class="tag" taget="_blank" href="/search/jsonp+%E8%B7%A8%E5%9F%9F/1.htm">jsonp 跨域</a> <div>转自 http://www.nowamagic.net/librarys/veda/detail/224 JavaScript是一种在Web开发中经常使用的前端动态脚本技术。在JavaScript中，有一个很重要的安全性限制，被称为“Same-Origin Policy”（同源策略）。这一策略对于JavaScript代码能够访问的页面内容做了很重要的限制，即JavaScript只能访问与包含它的</div> </li> <li><a href="/article/3013.htm" title="使用connect by进行级联查询" target="_blank">使用connect by进行级联查询</a> <span class="text-muted">234390216</span> <a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a><a class="tag" taget="_blank" href="/search/%E6%9F%A5%E8%AF%A2/1.htm">查询</a><a class="tag" taget="_blank" href="/search/%E7%88%B6%E5%AD%90/1.htm">父子</a><a class="tag" taget="_blank" href="/search/Connect+by/1.htm">Connect by</a><a class="tag" taget="_blank" href="/search/%E7%BA%A7%E8%81%94/1.htm">级联</a> <div>使用connect by进行级联查询          connect by可以用于级联查询，常用于对具有树状结构的记录查询某一节点的所有子孙节点或所有祖辈节点。          来看一个示例，现假设我们拥有一个菜单表t_menu，其中只有三个字段：</div> </li> <li><a href="/article/3140.htm" title="一个不错的能将HTML表格导出为excel,pdf等的jquery插件" target="_blank">一个不错的能将HTML表格导出为excel,pdf等的jquery插件</a> <span class="text-muted">jackyrong</span> <a class="tag" taget="_blank" href="/search/jquery%E6%8F%92%E4%BB%B6/1.htm">jquery插件</a> <div>发现一个老外写的不错的jquery插件，可以实现将HTML 表格导出为excel,pdf等格式，地址在： https://github.com/kayalshri/ 下面看个例子，实现导出表格到excel,pdf <html> <head> <title>Export html table to excel an</div> </li> <li><a href="/article/3267.htm" title="UI设计中我们为什么需要设计动效" target="_blank">UI设计中我们为什么需要设计动效</a> <span class="text-muted">lampcy</span> <a class="tag" taget="_blank" href="/search/UI/1.htm">UI</a><a class="tag" taget="_blank" href="/search/UI%E8%AE%BE%E8%AE%A1/1.htm">UI设计</a> <div>关于Unity3D中的Shader的知识首先先解释下Unity3D的Shader，Unity里面的Shaders是使用一种叫ShaderLab的语言编写的，它同微软的FX文件或者NVIDIA的CgFX有些类似。传统意义上的vertex shader和pixel shader还是使用标准的Cg/HLSL 编程语言编写的。因此Unity文档里面的Shader，都是指用ShaderLab编写的代码，</div> </li> <li><a href="/article/3394.htm" title="如何禁止页面缓存" target="_blank">如何禁止页面缓存</a> <span class="text-muted">nannan408</span> <a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/jsp/1.htm">jsp</a><a class="tag" taget="_blank" href="/search/cache/1.htm">cache</a> <div>禁止页面使用缓存~ ------------------------------------------------ jsp:页面no cache： response.setHeader("Pragma","No-cache"); response.setHeader("Cache-Control","no-cach</div> </li> <li><a href="/article/3521.htm" title="以代码的方式管理quartz定时任务的暂停、重启、删除、添加等" target="_blank">以代码的方式管理quartz定时任务的暂停、重启、删除、添加等</a> <span class="text-muted">Everyday都不同</span> <a class="tag" taget="_blank" href="/search/%E5%AE%9A%E6%97%B6%E4%BB%BB%E5%8A%A1%E7%AE%A1%E7%90%86/1.htm">定时任务管理</a><a class="tag" taget="_blank" href="/search/spring-quartz/1.htm">spring-quartz</a> <div>      【前言】在项目的管理功能中，对定时任务的管理有时会很常见。因为我们不能指望只在配置文件中配置好定时任务就行了，因为如果要控制定时任务的 “暂停” 呢？暂停之后又要在某个时间点 “重启” 该定时任务呢？或者说直接 “删除” 该定时任务呢？要改变某定时任务的触发时间呢？ “添加” 一个定时任务对于系统的使用者而言，是不太现实的，因为一个定时任务的处理逻辑他是不</div> </li> <li><a href="/article/3648.htm" title="EXT实例" target="_blank">EXT实例</a> <span class="text-muted">tntxia</span> <a class="tag" taget="_blank" href="/search/ext/1.htm">ext</a> <div>  （1）增加一个按钮   JSP:   <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); Stri</div> </li> <li><a href="/article/3775.htm" title="数学学习在计算机研究领域的作用和重要性" target="_blank">数学学习在计算机研究领域的作用和重要性</a> <span class="text-muted">xjnine</span> <a class="tag" taget="_blank" href="/search/Math/1.htm">Math</a> <div>最近一直有师弟师妹和朋友问我数学和研究的关系，研一要去学什么数学课。毕竟在清华，衡量一个研究生最重要的指标之一就是paper,而没有数学，是肯定上不了世界顶级的期刊和会议的，这在计算机学界尤其重要！你会发现，不论哪个领域有价值的东西，都一定离不开数学！在这样一个信息时代，当google已经让世界没有秘密的时候，一种卓越的数学思维，绝对可以成为你的核心竞争力.  无奈本人实在见地</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.  </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>