一剑飘雪丶
前端技术分享之HTML&&HTML5

HTML
发展历史
HTML文档模式
标准模式
HTML 4.01 严格型
XHTML 1.0 严格型
HTML 5
准标准模式
HTML 4.01 过渡型
HTML元素
HTML文本级元素和块级元素
元素示例
块级元素
行内元素
二者区别
格式
内容模型
HTML5
语义化
离线&存储
应用缓存如何工作
一个简单的缓存清单文件
sessionStorage 和 localStorage
web storage和cookie的区别
多媒体
audio标签
基本用法
video标签
基本用法
WebRTC
兼容性
Camera API
兼容性
2D/3D 绘图
性能 & 集成
Web Workers
基本用法
History API
pushState(状态对象, 标题 , URL)
replaceState(状态对象, 标题 , URL)
window.onpopstate
Content Editable
简单的富文本编辑器
HTML 拖放 API
全屏 API
设备访问
触摸事件
地理位置定位
检测设备方向
处理方向事件
处理移动事件
实际开发中的运用
HTML

HTML（超文本标记语言——HyperText Markup Language）是构成 Web 世界的一砖一瓦。它定义了网页内容的含义和结构。除 HTML 以外的其它技术则通常用来描述一个网页的表现与展示效果（如 CSS），或功能与行为（如 JavaScript）。
发展历史

HTML是用于描述网页文档的标记语言。现在我们常常习惯于用数字来描述HTML的版本（如：HTML5），但是最初的时候我们并没有HTML1，而是1993年IETF团队的一个草案，并不是成型的标准。
两年之后，在1995年HTML有了第二版，即HTML2.0，当时是作为RFC1866发布的。
有了以上的两个历史版本，HTML的发展可谓突飞猛进。1996年
HTML3.2成为W3C推荐标准。之后在1997年和1999年，作为升级版本的4.0和4.01也相继成为W3C的推荐标准。
在2000年基于HTML4.01的ISO HTML 成为了国际标准化组织和国际电工委员会的标准。于是被沿用至今，这期间虽然有点小的改动但大方向上终归没有什么变化。从1993-2000之间短短的7年时间，HTML语言有着很大的发展，基于诸多人的努力，终于产生了我们现在用的HTML语言。
HTML文档模式

IE5.5引入了文档模式的概念，而这个概念是通过使用文档类型DOCTYPE切换实现的。
文档模式主要分为混杂模式和标准模式两种，而标准模式又可划分为标准模式，准标准模式，超级标准模式三种（其中标准模式和准标准模式非常接近，他们的差异几乎可以忽略不计）。具体区分如下图：
标准模式

可通过以下任何一种类型来开启：
HTML 4.01 严格型

XHTML 1.0 严格型

HTML 5

准标准模式

可通过使用过渡型（transitional）或框架集型（frameset）来触发，如下：
HTML 4.01 过渡型

HTML元素

HTML 使用“标记”（markup）来注明文本、图片和其他内容，以便于在 Web 浏览器中显示。HTML 标记包含一些特殊“元素”如：
，，<body>，<header>，<footer>，<article>，<section>，<p>，<div>，<span>，<img>，<aside>，<audio>，<canvas>，<datalist>，<details>，<embed>，<nav>，<output>，<progress>，<video>
</code></pre> 
  <h3>HTML文本级元素和块级元素</h3> 
  <p>HTML（超文本标记语言）中元素大多数都是“块级”元素或行内元素。块级元素占据其父元素（容器）的整个空间，因此创建了一个“块”。</p> 
  <h4>元素示例</h4> 
  <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>This <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span><span class="token punctuation">></span></span>span<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> is an inline element; its background has been colored to display both the beginning and end of the inline element's influence<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
</code></pre> 
  <h5>块级元素</h5> 
  <ul> 
   <li>div</li> 
   <li>h1, h2, h3, h4, h5, h6</li> 
   <li>address, center, pre, blockquote, marquee, hr</li> 
   <li>ul, li, ol, dl, dd, form, table</li> 
  </ul> 
  <h5>行内元素</h5> 
  <ul> 
   <li>b, big, i, small, tt</li> 
   <li>abbr, acronym, cite, code, dfn, em, kbd, strong, samp, var</li> 
   <li>a, bdo, br, img, map, object, q, script, span, sub, sup</li> 
   <li>button, input, label, select, textarea</li> 
  </ul> 
  <h4>二者区别</h4> 
  <h5>格式</h5> 
  <p>默认情况下，块级元素会新起一行。行内元素只能包含数据和其他行内元素。</p> 
  <h5>内容模型</h5> 
  <p>一般块级元素可以包含行内元素和其他块级元素。这种结构上的包含继承区别可以使块级元素创建比行内元素更”大型“的结构。<br> 默认情况下，行内元素不会以新行开始，而块级元素会新起一行。</p> 
  <h2>HTML5</h2> 
  <p>HTML5 是 HTML 标准的最新演进版本。 这个术语代表了两个不同的概念：它是一个新的 HTML 语言版本包含了新的元素，属性和行为，同时包含了一系列可以被用来让 Web 站点和应用更加多样化，功能更强大的技术。 这套技术往往被称作 HTML5 和它的朋友们，通常简称为 HTML5。</p> 
  <ul> 
   <li>语义化：能够让你更恰当地描述你的内容是什么。 连通性：能够让你和服务器之间通过创新的新技术方法进行通信。</li> 
   <li>离线&存储：能够让网页在客户端本地存储数据以及更高效地离线运行</li> 
   <li>多媒体：使 video 和 audio 成为了在所有 Web中的一等公民。</li> 
   <li>2D/3D 绘图 & 效果：提供了一个更加分化范围的呈现选择。</li> 
   <li>性能 &集成：提供了非常显著的性能优化和更有效的计算机硬件使用。</li> 
   <li>设备访问 Device Access：能够处理各种输入和输出设备。</li> 
  </ul> 
  <h3>语义化</h3> 
  <p>什么是语义化？就是用合理、正确的标签来展示内容，比如h1~h6定义标题。</p> 
  <ul> 
   <li>语义化优点： 易于用户阅读，样式丢失的时候能让页面呈现清晰的结构。</li> 
   <li>有利于SEO，搜索引擎根据标签来确定上下文和各个关键字的权重。</li> 
   <li>方便其他设备解析，如盲人阅读器根据语义渲染网页。</li> 
   <li>有利于开发和维护，语义化更具可读性，代码更好维护，与CSS3关系更和谐。</li> 
  </ul> 
  <p>主体结构标签，如图所示：<br> <a href="http://img.e-com-net.com/image/info8/bb1dbc796aa84c25b294f5b37863236c.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/bb1dbc796aa84c25b294f5b37863236c.jpg" alt="前端技术分享之HTML&&HTML5_第2张图片" width="650" height="430" style="border:1px solid black;"></a></p> 
  <h3>离线&存储</h3> 
  <p>HTML5 提供一种 应用程序缓存机制，使得基于web的应用程序可以离线运行。开发者可以使用 <em>Application Cache</em> (<em>AppCache</em>) 接口设定浏览器应该缓存的资源并使得离线用户可用。 在处于离线状态时，即使用户点击刷新按钮，应用也能正常加载与工作。</p> 
  <p>使用应用缓存可以得到以下益处：</p> 
  <ul> 
   <li>离线浏览: 用户可以在离线状态下浏览网站内容。</li> 
   <li>更快的速度: 因为数据被存储在本地，所以速度会更快。</li> 
   <li>减轻服务器的负载: 浏览器只会下载在服务器上发生改变的资源。</li> 
  </ul> 
  <h4>应用缓存如何工作</h4> 
  <p>若想为应用启用应用缓存，你需要在应用页面中的html元素上增加manifest 特性，请看下面的示例：</p> 
  <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span> <span class="token attr-name">manifest</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>example.appcache<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> 
  ...
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span>
</code></pre> 
  <p>manifest 特性与 缓存清单(cache manifest) 文件关联，这个文件包含了浏览器需要为你的应用程序缓存的资源(文件)列表。</p> 
  <p>我们应当在每一个意图缓存的页面上添加 manifest 特性。浏览器不会缓存不带有manifest 特性的页面，除非这个页面已经被写在清单文件内的列表里了。你没有必要添加所有你意图缓存的页面的清单文件，浏览器会暗中将用户访问过的并带有 manifest 特性的所有页面添加进应用缓存中。</p> 
  <h4>一个简单的缓存清单文件</h4> 
  <pre><code class="prism language-markup">CACHE MANIFEST
# v1 2019-10-08
# This is another comment
index.html
cache.html
style.css
image1.png

# Use from network if available
NETWORK:
network.html

# Fallback content
FALLBACK:
/ fallback.html
</code></pre> 
  <p>清单文件可以分为三段： <em>CACHE</em>， <em>NETWORK</em>，与 <em>FALLBACK</em>。</p> 
  <ul> 
   <li><strong>Cache</strong>:：这是缓存文件中记录所属的默认段落。在 CACHE后(或直接跟在 CACHE MANIFEST行后)列出的文件会在它们第一次下载完毕后缓存起来。</li> 
   <li><strong>NETWORK</strong>：在 NETWORK下列出的文件是需要与服务器连接的白名单资源。所有类似资源的请求都会绕过缓存，即使用户处于离线状态。可以使用通配符。</li> 
   <li><strong>FALLBACK</strong>：FALLBACK指定了一个后备页面，当资源无法访问时，浏览器会使用该页面。该段落的每条记录都列出两个 URI——第一个表示资源，第二个表示后备页面。两个 URI 都必须使用相对路径并且与清单文件同源。可以使用通配符。</li> 
  </ul> 
  <p>上面例子中的注释 「v1」很有必要存在。只有当清单文件发生变化时，浏览器才会去更新应用缓存。如果你要更改缓存资源(比如说，你使用了一张新的 header.png 图片)，你必须同时修改清单文件中的内容，以便让浏览器知道它们需要更新缓存。</p> 
  <h4>sessionStorage 和 localStorage</h4> 
  <p>HTML5中的Web Storage包括了两种存储方式：sessionStorage和localStorage。</p> 
  <p>sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。</p> 
  <p>而localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。</p> 
  <p>localStorage和sessionStorage操作： localStorage和sessionStorage都具有相同的操作方法，例如有setItem,getItem,removeItem,clear等。</p> 
  <h4>web storage和cookie的区别</h4> 
  <p>Web Storage的概念和cookie相似，区别是它是为了更大容量存储设计的。Cookie的大小是受限（约4096字节，sessionStorage和localStorage大小约为5M）的，并且每次你请求一个新的页面的时候Cookie都会被发送过去，这样无形中浪费了带宽，另外cookie还需要指定作用域，不可以跨域调用。</p> 
  <h3>多媒体</h3> 
  <p>audio 和 video元素嵌入并支持新的多媒体内容的操作。</p> 
  <h4>audio标签</h4> 
  <p>HTML audio元素用于在文档中表示音频内容。audio元素可以包含多个音频资源， 这些音频资源可以使用 src 属性或者source元素来进行描述； 浏览器将会选择最合适的一个来使用。对于不支持audio元素的浏览器，audio元素也可以作为浏览器不识别的内容加入到文档中。</p> 
  <h5>基本用法</h5> 
  <pre><code class="prism language-html"><span class="token comment"><!-- Simple audio playback --></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>audio</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>http://developer.mozilla.org/@api/deki/files/2926/=AudioTest_(1).ogg<span class="token punctuation">"</span></span> <span class="token attr-name">autoplay</span><span class="token punctuation">></span></span>
  Your browser does not support the <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>code</span><span class="token punctuation">></span></span>audio<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>code</span><span class="token punctuation">></span></span> element.
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>audio</span><span class="token punctuation">></span></span>

<span class="token comment"><!-- Audio playback with captions --></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>audio</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>foo.ogg<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>track</span> <span class="token attr-name">kind</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>captions<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>foo.en.vtt<span class="token punctuation">"</span></span> <span class="token attr-name">srclang</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>English<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>track</span> <span class="token attr-name">kind</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>captions<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>foo.sv.vtt<span class="token punctuation">"</span></span> <span class="token attr-name">srclang</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>sv<span class="token punctuation">"</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Svenska<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>audio</span><span class="token punctuation">></span></span>

<span class="token comment"><!-- controls --></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>audio</span> <span class="token attr-name">controls</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>controls<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
  Your browser does not support the <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>code</span><span class="token punctuation">></span></span>audio<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>code</span><span class="token punctuation">></span></span> element.
  <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>source</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>foo.wav<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>audio/wav<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>audio</span><span class="token punctuation">></span></span>
</code></pre> 
  <h4>video标签</h4> 
  <p>HTML video元素 用于在HTML或者XHTML文档中嵌入媒体播放器，用于支持文档内的视频播放。你也可以将video标签用于音频内容，但是audio元素可能在用户体验上更合适。</p> 
  <h5>基本用法</h5> 
  <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>video</span> <span class="token attr-name">controls</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>source</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>myVideo.mp4<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>video/mp4<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>source</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>myVideo.webm<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>video/webm<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>Your browser doesn't support HTML5 video. Here is a
  <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>myVideo.mp4<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>link to the video<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> instead.<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>video</span><span class="token punctuation">></span></span>
</code></pre> 
  <h4>WebRTC</h4> 
  <p>WebRTC中的RTC是实时通信的简称，这是一种支持在浏览器客户端之间语音/视频交流和数据分享的技术。WebRTC作为一项标准,使得所有浏览器无需安装插件或第三方软件，就可以点对点地分享应用数据和进行电话会议。</p> 
  <p>WebRTC组件是通过JavaScript APIs获得的。目前正在开发中的APIs包括：网络流API(能够提供音频和视频)，点对点连接API(允许两个或更多用户通过浏览器进行联系)。同样在开发中的还有数据API，能够让浏览器在实时游戏，文字聊天，文件传输和其他应用中与其他类型数据进行交流。</p> 
  <h5>兼容性</h5> 
  <p><a href="http://img.e-com-net.com/image/info8/f7250a90d1584dc7a8e4af1e2441fde5.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/f7250a90d1584dc7a8e4af1e2441fde5.jpg" alt="前端技术分享之HTML&&HTML5_第3张图片" width="650" height="766" style="border:1px solid black;"></a></p> 
  <h4>Camera API</h4> 
  <p>通过Camera API，我们可以使用手机的摄像头拍照，然后把拍到的照片发送给当前网页。这些操作主要是通过一个input元素来实现的，其中该元素的type属性必须为"file"，accept属性要允许图片格式，这样才能知道这个文件选择框是用来选择图片的。完整的HTML结构看起来是这样的：</p> 
  <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>file<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>take-picture<span class="token punctuation">"</span></span> <span class="token attr-name">accept</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>image/*<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</code></pre> 
  <p>当用户激活这个HTML元素的时候，系统会呈现给用户一个选择界面，其中一个选项是选择本地的图片文件，另一个选项是要通过摄像头直接拍摄照片作为所选文件。如果用户选择了摄像头，则会进入手机的拍照模式。拍照结束后，用户可以选择确定还是放弃。如果接受了，则该照片会作为所选文件发送给那个< input type=“file” >元素，同时触发该元素的onchange事件。</p> 
  <h5>兼容性</h5> 
  <table> 
   <thead> 
    <tr> 
     <th>Feature</th> 
     <th>Chrome</th> 
     <th>Firefox (Gecko)</th> 
     <th>Internet Explorer</th> 
     <th>Opera</th> 
     <th>Safari</th> 
    </tr> 
   </thead> 
   <tbody> 
    <tr> 
     <td>Camera API</td> 
     <td>未实现</td> 
     <td>未实现</td> 
     <td>未实现</td> 
     <td>未实现</td> 
     <td>未实现</td> 
    </tr> 
    <tr> 
     <td>createObjectURL()</td> 
     <td>16</td> 
     <td>8.0 (8.0)</td> 
     <td>10+</td> 
     <td>未实现</td> 
     <td>未实现</td> 
    </tr> 
    <tr> 
     <td>FileReader</td> 
     <td>16</td> 
     <td>3.6 (1.9.2)</td> 
     <td>10+</td> 
     <td>未实现</td> 
     <td>未实现</td> 
    </tr> 
   </tbody> 
  </table> 
  <h4>2D/3D 绘图</h4> 
  <p>canvas是一个可以使用脚本(通常为<em>JavaScript</em>)来绘制图形的 HTML 元素。例如，它可以用于绘制图表、制作图片构图或者制作简单的（以及不那么简单的）动画。下方的图片展示了一些 canvas的实现示例。<br> <a href="http://img.e-com-net.com/image/info8/3de04fb96bd640eda237014b4681fd05.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/3de04fb96bd640eda237014b4681fd05.jpg" alt="前端技术分享之HTML&&HTML5_第4张图片" width="200" height="450" style="border:1px solid black;"></a><br> WebGL (Web图形库) 是一种JavaScript API，用于在任何兼容的Web浏览器中呈现交互式3D和2D图形，而无需使用插件。WebGL通过引入一个与OpenGL ES 2.0紧密相符合的API，可以在HTML5 canvas元素中使用。</p> 
  <blockquote> 
   <p>图片来源Echarts官网，侵删<br> <a href="http://img.e-com-net.com/image/info8/e3cb23016a824c23aca4c2434e7ccbfa.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/e3cb23016a824c23aca4c2434e7ccbfa.jpg" alt="前端技术分享之HTML&&HTML5_第5张图片" width="400" height="300" style="border:1px solid black;"></a></p> 
  </blockquote> 
  <h4>性能 & 集成</h4> 
  <h5>Web Workers</h5> 
  <p>Web Worker为Web内容在后台线程中运行脚本提供了一种简单的方法。线程可以执行任务而不干扰用户界面。此外，他们可以使用XMLHttpRequest执行 I/O过将消息发布到该代码指定的事件处理程序（反之亦然）。</p> 
  <p>在worker线程中你可以运行任何你喜欢的代码，不过有一些例外情况。比如：在worker内，不能直接操作DOM节点，也不能使用window对象的默认方法和属性。然而你可以使用大量window对象之下的东西，包括WebSockets，IndexedDB以及FireFox OS专用的Data Store API等数据存储机制。</p> 
  <p>workers和主线程间的数据传递通过这样的消息机制进行——双方都使用postMessage()方法发送各自的消息，使用onmessage事件处理函数来响应消息（消息被包含在Message事件的data属性中）。这个过程中数据并不是被共享而是被复制。</p> 
  <h6>基本用法</h6> 
  <pre><code class="prism language-javascript"><span class="token comment">/* 这段代码中变量first和second代表2个<input>元素；
   它们当中任意一个的值发生改变时，myWorker.postMessage([first.value,second.value])会将这2个值组成数组发送给worker。
*/</span>
<span class="token keyword">var</span> myWorker <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Worker</span><span class="token punctuation">(</span><span class="token string">'worker.js'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

first<span class="token punctuation">.</span><span class="token function-variable function">onchange</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  myWorker<span class="token punctuation">.</span><span class="token function">postMessage</span><span class="token punctuation">(</span><span class="token punctuation">[</span>first<span class="token punctuation">.</span>value<span class="token punctuation">,</span>second<span class="token punctuation">.</span>value<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Message posted to worker'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

second<span class="token punctuation">.</span><span class="token function-variable function">onchange</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  myWorker<span class="token punctuation">.</span><span class="token function">postMessage</span><span class="token punctuation">(</span><span class="token punctuation">[</span>first<span class="token punctuation">.</span>value<span class="token punctuation">,</span>second<span class="token punctuation">.</span>value<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Message posted to worker'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre> 
  <p>在worker中接收到消息后，我们可以写这样一个事件处理函数代码作为响应（worker.js）：</p> 
  <pre><code class="prism language-javascript"><span class="token function-variable function">onmessage</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span>e<span class="token punctuation">)</span> <span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Message received from main script'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token keyword">var</span> workerResult <span class="token operator">=</span> <span class="token string">'Result: '</span> <span class="token operator">+</span> <span class="token punctuation">(</span>e<span class="token punctuation">.</span>data<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span> <span class="token operator">*</span> e<span class="token punctuation">.</span>data<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Posting message back to main script'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token function">postMessage</span><span class="token punctuation">(</span>workerResult<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre> 
  <p>回到主线程，我们再次使用onmessage以响应worker回传的消息：</p> 
  <pre><code class="prism language-javascript">myWorker<span class="token punctuation">.</span><span class="token function-variable function">onmessage</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span>e<span class="token punctuation">)</span> <span class="token punctuation">{</span>
  result<span class="token punctuation">.</span>textContent <span class="token operator">=</span> e<span class="token punctuation">.</span>data<span class="token punctuation">;</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Message received from worker'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre> 
  <h5>History API</h5> 
  <p>DOM window 对象通过 history 对象提供了对浏览器的会话历史的访问。它暴露了很多有用的方法和属性，允许你在用户浏览历史中向前和向后跳转，同时——从HTML5开始——提供了对history栈中内容的操作。</p> 
  <pre><code class="prism language-javascript"><span class="token comment">// 在history中向后跳转：</span>
window<span class="token punctuation">.</span>history<span class="token punctuation">.</span><span class="token function">back</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// 在history中向前跳转：</span>
window<span class="token punctuation">.</span>history<span class="token punctuation">.</span><span class="token function">forward</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// 跳转到 history 中指定的一个点</span>
<span class="token comment">// 向后移动一个页面 (等同于调用 back()):</span>
window<span class="token punctuation">.</span>history<span class="token punctuation">.</span><span class="token function">go</span><span class="token punctuation">(</span><span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// 向前移动一个页面, 等同于调用了 forward():</span>
window<span class="token punctuation">.</span>history<span class="token punctuation">.</span><span class="token function">go</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// 可以通过查看长度属性的值来确定的历史堆栈中页面的数量:</span>
<span class="token keyword">let</span> numberOfEntries <span class="token operator">=</span> window<span class="token punctuation">.</span>history<span class="token punctuation">.</span>length<span class="token punctuation">;</span>
</code></pre> 
  <p>HTML5引入了 history.pushState() 和 history.replaceState() 方法，它们分别可以添加和修改历史记录条目。这些方法通常与window.onpopstate 配合使用。</p> 
  <h6>pushState(状态对象, 标题 , URL)</h6> 
  <pre><code class="prism language-javascript"><span class="token keyword">let</span> stateObj <span class="token operator">=</span> <span class="token punctuation">{</span>
    foo<span class="token punctuation">:</span> <span class="token string">"bar"</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>

history<span class="token punctuation">.</span><span class="token function">pushState</span><span class="token punctuation">(</span>stateObj<span class="token punctuation">,</span> <span class="token string">"page 2"</span><span class="token punctuation">,</span> <span class="token string">"bar.html"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> 
  <p>这将使浏览器地址栏显示为 http://mozilla.org/bar.html，但并不会导致浏览器加载 bar.html ，甚至不会检查bar.html 是否存在。</p> 
  <h6>replaceState(状态对象, 标题 , URL)</h6> 
  <p>history.replaceState() 的使用与 history.pushState() 非常相似，区别在于 replaceState() 是修改了当前的历史记录项而不是新建一个。 注意这并不会阻止其在全局浏览器历史记录中创建一个新的历史记录项。</p> 
  <pre><code class="prism language-javascript"><span class="token keyword">let</span> stateObj <span class="token operator">=</span> <span class="token punctuation">{</span>
    foo<span class="token punctuation">:</span> <span class="token string">"bar"</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>

history<span class="token punctuation">.</span><span class="token function">pushState</span><span class="token punctuation">(</span>stateObj<span class="token punctuation">,</span> <span class="token string">"page 2"</span><span class="token punctuation">,</span> <span class="token string">"bar.html"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

history<span class="token punctuation">.</span><span class="token function">replaceState</span><span class="token punctuation">(</span>stateObj<span class="token punctuation">,</span> <span class="token string">"page 3"</span><span class="token punctuation">,</span> <span class="token string">"bar2.html"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> 
  <p>这将会导致地址栏显示http://mozilla.org/bar2.html,，但是浏览器并不会去加载bar2.html 甚至都不需要检查 bar2.html 是否存在。</p> 
  <p>假设现在用户重新导向到了http://www.microsoft.com，然后点击了回退按钮。这里，地址栏会显示http://mozilla.org/bar2.html。假如用户再次点击回退按钮，地址栏会显示http://mozilla.org/foo.html，完全跳过了bar.html。</p> 
  <h6>window.onpopstate</h6> 
  <p>window.onpopstate是popstate事件在window对象上的事件处理程序。</p> 
  <p>调用history.pushState()或者history.replaceState()不会触发popstate事件。popstate事件只会在浏览器某些行为下触发，比如点击后退、前进按钮(或者在JavaScript中调用history.back()、history.forward()、history.go()方法)。</p> 
  <pre><code class="prism language-javascript">window<span class="token punctuation">.</span><span class="token function-variable function">onpopstate</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span>event<span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">"location: "</span> <span class="token operator">+</span> document<span class="token punctuation">.</span>location <span class="token operator">+</span> <span class="token string">", state: "</span> <span class="token operator">+</span> <span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">stringify</span><span class="token punctuation">(</span>event<span class="token punctuation">.</span>state<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>

<span class="token comment">//绑定事件处理函数. </span>
history<span class="token punctuation">.</span><span class="token function">pushState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>page<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token string">"title 1"</span><span class="token punctuation">,</span> <span class="token string">"?page=1"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>    <span class="token comment">//添加并激活一个历史记录条目 http://example.com/example.html?page=1,条目索引为1</span>

history<span class="token punctuation">.</span><span class="token function">pushState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>page<span class="token punctuation">:</span> <span class="token number">2</span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token string">"title 2"</span><span class="token punctuation">,</span> <span class="token string">"?page=2"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>    <span class="token comment">//添加并激活一个历史记录条目 http://example.com/example.html?page=2,条目索引为2</span>

history<span class="token punctuation">.</span><span class="token function">replaceState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>page<span class="token punctuation">:</span> <span class="token number">3</span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token string">"title 3"</span><span class="token punctuation">,</span> <span class="token string">"?page=3"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//修改当前激活的历史记录条目 http://ex..?page=2 变为 http://ex..?page=3,条目索引为3</span>

history<span class="token punctuation">.</span><span class="token function">back</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 弹出 "location: http://example.com/example.html?page=1, state: {"page":1}"</span>

history<span class="token punctuation">.</span><span class="token function">back</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 弹出 "location: http://example.com/example.html, state: null</span>

history<span class="token punctuation">.</span><span class="token function">go</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">;</span>  <span class="token comment">// 弹出 "location: http://example.com/example.html?page=3, state: {"page":3}</span>
</code></pre> 
  <h5>Content Editable</h5> 
  <p>在HTML中，任何元素都可以编辑。通过使用一些JavaScript事件处理程序，您可以将您的网页转换为完整且快速的富文本编辑器。</p> 
  <p>为了使元素可编辑，我们所要做的就是在html标签上设置"contenteditable"属性，它几乎支持所有的HTML元素。</p> 
  <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">contenteditable</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>true<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
  This text can be edited by the user.
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
</code></pre> 
  <h6>简单的富文本编辑器</h6> 
  <pre><code class="prism language-html"><span class="token doctype"><!doctype html></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>Rich Text Editor<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text/javascript<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script language-javascript">
<span class="token keyword">var</span> oDoc<span class="token punctuation">,</span> sDefTxt<span class="token punctuation">;</span>

<span class="token keyword">function</span> <span class="token function">initDoc</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  oDoc <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"textBox"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  sDefTxt <span class="token operator">=</span> oDoc<span class="token punctuation">.</span>innerHTML<span class="token punctuation">;</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span>document<span class="token punctuation">.</span>compForm<span class="token punctuation">.</span>switchMode<span class="token punctuation">.</span>checked<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token function">setDocMode</span><span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token keyword">function</span> <span class="token function">formatDoc</span><span class="token punctuation">(</span>sCmd<span class="token punctuation">,</span> sValue<span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token function">validateMode</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> document<span class="token punctuation">.</span><span class="token function">execCommand</span><span class="token punctuation">(</span>sCmd<span class="token punctuation">,</span> <span class="token boolean">false</span><span class="token punctuation">,</span> sValue<span class="token punctuation">)</span><span class="token punctuation">;</span> oDoc<span class="token punctuation">.</span><span class="token function">focus</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token keyword">function</span> <span class="token function">validateMode</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>document<span class="token punctuation">.</span>compForm<span class="token punctuation">.</span>switchMode<span class="token punctuation">.</span>checked<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token boolean">true</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span>
  <span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">"Uncheck \"Show HTML\"."</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  oDoc<span class="token punctuation">.</span><span class="token function">focus</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token keyword">return</span> <span class="token boolean">false</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token keyword">function</span> <span class="token function">setDocMode</span><span class="token punctuation">(</span>bToSource<span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">var</span> oContent<span class="token punctuation">;</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span>bToSource<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    oContent <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createTextNode</span><span class="token punctuation">(</span>oDoc<span class="token punctuation">.</span>innerHTML<span class="token punctuation">)</span><span class="token punctuation">;</span>
    oDoc<span class="token punctuation">.</span>innerHTML <span class="token operator">=</span> <span class="token string">""</span><span class="token punctuation">;</span>
    <span class="token keyword">var</span> oPre <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">"pre"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    oDoc<span class="token punctuation">.</span>contentEditable <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">;</span>
    oPre<span class="token punctuation">.</span>id <span class="token operator">=</span> <span class="token string">"sourceText"</span><span class="token punctuation">;</span>
    oPre<span class="token punctuation">.</span>contentEditable <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">;</span>
    oPre<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>oContent<span class="token punctuation">)</span><span class="token punctuation">;</span>
    oDoc<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>oPre<span class="token punctuation">)</span><span class="token punctuation">;</span>
    document<span class="token punctuation">.</span><span class="token function">execCommand</span><span class="token punctuation">(</span><span class="token string">"defaultParagraphSeparator"</span><span class="token punctuation">,</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token string">"div"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>document<span class="token punctuation">.</span>all<span class="token punctuation">)</span> <span class="token punctuation">{</span>
      oDoc<span class="token punctuation">.</span>innerHTML <span class="token operator">=</span> oDoc<span class="token punctuation">.</span>innerText<span class="token punctuation">;</span>
    <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
      oContent <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createRange</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      oContent<span class="token punctuation">.</span><span class="token function">selectNodeContents</span><span class="token punctuation">(</span>oDoc<span class="token punctuation">.</span>firstChild<span class="token punctuation">)</span><span class="token punctuation">;</span>
      oDoc<span class="token punctuation">.</span>innerHTML <span class="token operator">=</span> oContent<span class="token punctuation">.</span><span class="token function">toString</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    oDoc<span class="token punctuation">.</span>contentEditable <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
  oDoc<span class="token punctuation">.</span><span class="token function">focus</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token keyword">function</span> <span class="token function">printDoc</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span><span class="token function">validateMode</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span><span class="token punctuation">;</span> <span class="token punctuation">}</span>
  <span class="token keyword">var</span> oPrntWin <span class="token operator">=</span> window<span class="token punctuation">.</span><span class="token function">open</span><span class="token punctuation">(</span><span class="token string">""</span><span class="token punctuation">,</span><span class="token string">"_blank"</span><span class="token punctuation">,</span><span class="token string">"width=450,height=470,left=400,top=100,menubar=yes,toolbar=no,location=no,scrollbars=yes"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  oPrntWin<span class="token punctuation">.</span>document<span class="token punctuation">.</span><span class="token function">open</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  oPrntWin<span class="token punctuation">.</span>document<span class="token punctuation">.</span><span class="token function">write</span><span class="token punctuation">(</span><span class="token string">"<!doctype html><html><head><title>Print<\/title><\/head><body οnlοad=\"print();\">"</span> <span class="token operator">+</span> oDoc<span class="token punctuation">.</span>innerHTML <span class="token operator">+</span> <span class="token string">"<\/body><\/html>"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  oPrntWin<span class="token punctuation">.</span>document<span class="token punctuation">.</span><span class="token function">close</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text/css<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token style language-css">
<span class="token selector">.intLink</span> <span class="token punctuation">{</span> <span class="token property">cursor</span><span class="token punctuation">:</span> pointer<span class="token punctuation">;</span> <span class="token punctuation">}</span>
<span class="token selector">img.intLink</span> <span class="token punctuation">{</span> <span class="token property">border</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token punctuation">}</span>
<span class="token selector">#toolBar1 select</span> <span class="token punctuation">{</span> <span class="token property">font-size</span><span class="token punctuation">:</span>10px<span class="token punctuation">;</span> <span class="token punctuation">}</span>
<span class="token selector">#textBox</span> <span class="token punctuation">{</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 540px<span class="token punctuation">;</span>
  <span class="token property">height</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span>
  <span class="token property">border</span><span class="token punctuation">:</span> 1px #000000 solid<span class="token punctuation">;</span>
  <span class="token property">padding</span><span class="token punctuation">:</span> 12px<span class="token punctuation">;</span>
  <span class="token property">overflow</span><span class="token punctuation">:</span> scroll<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">#textBox #sourceText</span> <span class="token punctuation">{</span>
  <span class="token property">padding</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
  <span class="token property">margin</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
  <span class="token property">min-width</span><span class="token punctuation">:</span> 498px<span class="token punctuation">;</span>
  <span class="token property">min-height</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">#editMode label</span> <span class="token punctuation">{</span> <span class="token property">cursor</span><span class="token punctuation">:</span> pointer<span class="token punctuation">;</span> <span class="token punctuation">}</span>
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span> <span class="token attr-name">onload</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>initDoc();<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>compForm<span class="token punctuation">"</span></span> <span class="token attr-name">method</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>post<span class="token punctuation">"</span></span> <span class="token attr-name">action</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>sample.php<span class="token punctuation">"</span></span> <span class="token attr-name">onsubmit</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>if(validateMode()){this.myDoc.value=oDoc.innerHTML;return true;}return false;<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>hidden<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>myDoc<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>toolBar1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>select</span> <span class="token attr-name">onchange</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>formatDoc(<span class="token punctuation">'</span>formatblock<span class="token punctuation">'</span>,this[this.selectedIndex].value);this.selectedIndex=0;<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">selected</span><span class="token punctuation">></span></span>- formatting -<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>h1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Title 1 <span class="token entity"><</span>h1<span class="token entity">></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>h2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Title 2 <span class="token entity"><</span>h2<span class="token entity">></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>h3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Title 3 <span class="token entity"><</span>h3<span class="token entity">></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>h4<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Title 4 <span class="token entity"><</span>h4<span class="token entity">></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>h5<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Title 5 <span class="token entity"><</span>h5<span class="token entity">></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>h6<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Subtitle <span class="token entity"><</span>h6<span class="token entity">></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>p<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Paragraph <span class="token entity"><</span>p<span class="token entity">></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>pre<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Preformatted <span class="token entity"><</span>pre<span class="token entity">></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>select</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>select</span> <span class="token attr-name">onchange</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>formatDoc(<span class="token punctuation">'</span>fontname<span class="token punctuation">'</span>,this[this.selectedIndex].value);this.selectedIndex=0;<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>heading<span class="token punctuation">"</span></span> <span class="token attr-name">selected</span><span class="token punctuation">></span></span>- font -<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span>Arial<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span>Arial Black<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span>Courier New<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span>Times New Roman<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>select</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>select</span> <span class="token attr-name">onchange</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>formatDoc(<span class="token punctuation">'</span>fontsize<span class="token punctuation">'</span>,this[this.selectedIndex].value);this.selectedIndex=0;<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>heading<span class="token punctuation">"</span></span> <span class="token attr-name">selected</span><span class="token punctuation">></span></span>- size -<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Very small<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>A bit small<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Normal<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>4<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Medium-large<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>5<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Big<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>6<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Very big<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>7<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Maximum<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>select</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>select</span> <span class="token attr-name">onchange</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>formatDoc(<span class="token punctuation">'</span>forecolor<span class="token punctuation">'</span>,this[this.selectedIndex].value);this.selectedIndex=0;<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>heading<span class="token punctuation">"</span></span> <span class="token attr-name">selected</span><span class="token punctuation">></span></span>- color -<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>red<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Red<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>blue<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Blue<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>green<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Green<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>black<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Black<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>select</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>select</span> <span class="token attr-name">onchange</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>formatDoc(<span class="token punctuation">'</span>backcolor<span class="token punctuation">'</span>,this[this.selectedIndex].value);this.selectedIndex=0;<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>heading<span class="token punctuation">"</span></span> <span class="token attr-name">selected</span><span class="token punctuation">></span></span>- background -<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>red<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Red<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>green<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Green<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>black<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Black<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>select</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>toolBar2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>intLink<span class="token punctuation">"</span></span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Clean<span class="token punctuation">"</span></span> <span class="token attr-name">onclick</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>if(validateMode()&&confirm(<span class="token punctuation">'</span>Are you sure?<span class="token punctuation">'</span>)){oDoc.innerHTML=sDefTxt};<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>data:image/gif;base64,R0lGODlhFgAWAIQbAD04KTRLYzFRjlldZl9vj1dusY14WYODhpWIbbSVFY6O7IOXw5qbms+wUbCztca0ccS4kdDQjdTLtMrL1O3YitHa7OPcsd/f4PfvrvDv8Pv5xv///////////////////yH5BAEKAB8ALAAAAAAWABYAAAV84CeOZGmeaKqubMteyzK547QoBcFWTm/jgsHq4rhMLoxFIehQQSAWR+Z4IAyaJ0kEgtFoLIzLwRE4oCQWrxoTOTAIhMCZ0tVgMBQKZHAYyFEWEV14eQ8IflhnEHmFDQkAiSkQCI2PDC4QBg+OAJc0ewadNCOgo6anqKkoIQA7<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>intLink<span class="token punctuation">"</span></span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Print<span class="token punctuation">"</span></span> <span class="token attr-name">onclick</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>printDoc();<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAAABGdBTUEAALGPC/xhBQAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9oEBxcZFmGboiwAAAAIdEVYdENvbW1lbnQA9syWvwAAAuFJREFUOMvtlUtsjFEUx//n3nn0YdpBh1abRpt4LFqtqkc3jRKkNEIsiIRIBBEhJJpKlIVo4m1RRMKKjQiRMJRUqUdKPT71qpIpiRKPaqdF55tv5vvusZjQTjOlseUkd3Xu/3dPzusC/22wtu2wRn+jG5So/OCDh8ycMJDflehMlkJkVK7KUYN+ufzA/RttH76zaVocDptRxzQtNi3mRWuPc+6cKtlXZ/sddP2uu9uXlmYXZ6Qm8v4Tz8lhF1H+zDQXt7S8oLMXtbF4e8QaFHjj3kbP2MzkktHpiTjp9VH6iHiA+whtAsX5brpwueMGdONdf/2A4M7ukDs1JW662+XkqTkeUoqjKtOjm2h53YFL15pSJ04Zc94wdtibr26fXlC2mzRvBccEbz2kiRFD414tKMlEZbVGT33+qCoHgha81SWYsew0r1uzfNylmtpx80pngQQ91LwVk2JGvGnfvZG6YcYRAT16GFtW5kKKfo1EQLtfh5Q2etT0BIWF+aitq4fDbk+ImYo1OxvGF03waFJQvBCkvDffRyEtxQiFFYgAZTHS0zwAGD7fG5TNnYNTp8/FzvGwJOfmgG7GOx0SAKKgQgDMgKBI0NJGMEImpGDk5+WACEwEd0ywblhGUZ4Hw5OdUekRBLT7DTgdEgxACsIznx8zpmWh7k4rkpJcuHDxCul6MDsmmBXDlWCH2+XozSgBnzsNCEE4euYV4pwCpsWYPW0UHDYBKSWu1NYjENDReqtKjwn2+zvtTc1vMSTB/mvev/WEYSlASsLimcOhOBJxw+N3aP/SjefNL5GePZmpu4kG7OPr1+tOfPyUu3BecWYKcwQcDFmwFKAUo90fhKDInBCAmvqnyMgqUEagQwCoHBDc1rjv9pIlD8IbVkz6qYViIBQGTJPx4k0XpIgEZoRN1Da0cij4VfR0ta3WvBXH/rjdCufv6R2zPgPH/e4pxSBCpeatqPrjNiso203/5s/zA171Mv8+w1LOAAAAAElFTkSuQmCC<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>intLink<span class="token punctuation">"</span></span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Undo<span class="token punctuation">"</span></span> <span class="token attr-name">onclick</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>formatDoc(<span class="token punctuation">'</span>undo<span class="token punctuation">'</span>);<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>data:image/gif;base64,R0lGODlhFgAWAOMKADljwliE33mOrpGjuYKl8aezxqPD+7/I19DV3NHa7P///////////////////////yH5BAEKAA8ALAAAAAAWABYAAARR8MlJq7046807TkaYeJJBnES4EeUJvIGapWYAC0CsocQ7SDlWJkAkCA6ToMYWIARGQF3mRQVIEjkkSVLIbSfEwhdRIH4fh/DZMICe3/C4nBQBADs=<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>intLink<span class="token punctuation">"</span></span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Redo<span class="token punctuation">"</span></span> <span class="token attr-name">onclick</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>formatDoc(<span class="token punctuation">'</span>redo<span class="token punctuation">'</span>);<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>data:image/gif;base64,R0lGODlhFgAWAMIHAB1ChDljwl9vj1iE34Kl8aPD+7/I1////yH5BAEKAAcALAAAAAAWABYAAANKeLrc/jDKSesyphi7SiEgsVXZEATDICqBVJjpqWZt9NaEDNbQK1wCQsxlYnxMAImhyDoFAElJasRRvAZVRqqQXUy7Cgx4TC6bswkAOw==<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>intLink<span class="token punctuation">"</span></span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Remove formatting<span class="token punctuation">"</span></span> <span class="token attr-name">onclick</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>formatDoc(<span class="token punctuation">'</span>removeFormat<span class="token punctuation">'</span>)<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAAABGdBTUEAALGPC/xhBQAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAAd0SU1FB9oECQMCKPI8CIIAAAAIdEVYdENvbW1lbnQA9syWvwAAAuhJREFUOMtjYBgFxAB501ZWBvVaL2nHnlmk6mXCJbF69zU+Hz/9fB5O1lx+bg45qhl8/fYr5it3XrP/YWTUvvvk3VeqGXz70TvbJy8+Wv39+2/Hz19/mGwjZzuTYjALuoBv9jImaXHeyD3H7kU8fPj2ICML8z92dlbtMzdeiG3fco7J08foH1kurkm3E9iw54YvKwuTuom+LPt/BgbWf3//sf37/1/c02cCG1lB8f//f95DZx74MTMzshhoSm6szrQ/a6Ir/Z2RkfEjBxuLYFpDiDi6Af///2ckaHBp7+7wmavP5n76+P2ClrLIYl8H9W36auJCbCxM4szMTJac7Kza////R3H1w2cfWAgafPbqs5g7D95++/P1B4+ECK8tAwMDw/1H7159+/7r7ZcvPz4fOHbzEwMDwx8GBgaGnNatfHZx8zqrJ+4VJBh5CQEGOySEua/v3n7hXmqI8WUGBgYGL3vVG7fuPK3i5GD9/fja7ZsMDAzMG/Ze52mZeSj4yu1XEq/ff7W5dvfVAS1lsXc4Db7z8C3r8p7Qjf///2dnZGxlqJuyr3rPqQd/Hhyu7oSpYWScylDQsd3kzvnH738wMDzj5GBN1VIWW4c3KDon7VOvm7S3paB9u5qsU5/x5KUnlY+eexQbkLNsErK61+++VnAJcfkyMTIwffj0QwZbJDKjcETs1Y8evyd48toz8y/ffzv//vPP4veffxpX77z6l5JewHPu8MqTDAwMDLzyrjb/mZm0JcT5Lj+89+Ybm6zz95oMh7s4XbygN3Sluq4Mj5K8iKMgP4f0////fv77//8nLy+7MCcXmyYDAwODS9jM9tcvPypd35pne3ljdjvj26+H2dhYpuENikgfvQeXNmSl3tqepxXsqhXPyc666s+fv1fMdKR3TK72zpix8nTc7bdfhfkEeVbC9KhbK/9iYWHiErbu6MWbY/7//8/4//9/pgOnH6jGVazvFDRtq2VgiBIZrUTIBgCk+ivHvuEKwAAAAABJRU5ErkJggg==<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>intLink<span class="token punctuation">"</span></span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Bold<span class="token punctuation">"</span></span> <span class="token attr-name">onclick</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>formatDoc(<span class="token punctuation">'</span>bold<span class="token punctuation">'</span>);<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>data:image/gif;base64,R0lGODlhFgAWAID/AMDAwAAAACH5BAEAAAAALAAAAAAWABYAQAInhI+pa+H9mJy0LhdgtrxzDG5WGFVk6aXqyk6Y9kXvKKNuLbb6zgMFADs=<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>intLink<span class="token punctuation">"</span></span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Italic<span class="token punctuation">"</span></span> <span class="token attr-name">onclick</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>formatDoc(<span class="token punctuation">'</span>italic<span class="token punctuation">'</span>);<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>data:image/gif;base64,R0lGODlhFgAWAKEDAAAAAF9vj5WIbf///yH5BAEAAAMALAAAAAAWABYAAAIjnI+py+0Po5x0gXvruEKHrF2BB1YiCWgbMFIYpsbyTNd2UwAAOw==<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>intLink<span class="token punctuation">"</span></span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Underline<span class="token punctuation">"</span></span> <span class="token attr-name">onclick</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>formatDoc(<span class="token punctuation">'</span>underline<span class="token punctuation">'</span>);<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>data:image/gif;base64,R0lGODlhFgAWAKECAAAAAF9vj////////yH5BAEAAAIALAAAAAAWABYAAAIrlI+py+0Po5zUgAsEzvEeL4Ea15EiJJ5PSqJmuwKBEKgxVuXWtun+DwxCCgA7<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>intLink<span class="token punctuation">"</span></span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Left align<span class="token punctuation">"</span></span> <span class="token attr-name">onclick</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>formatDoc(<span class="token punctuation">'</span>justifyleft<span class="token punctuation">'</span>);<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>data:image/gif;base64,R0lGODlhFgAWAID/AMDAwAAAACH5BAEAAAAALAAAAAAWABYAQAIghI+py+0Po5y02ouz3jL4D4JMGELkGYxo+qzl4nKyXAAAOw==<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>intLink<span class="token punctuation">"</span></span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Center align<span class="token punctuation">"</span></span> <span class="token attr-name">onclick</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>formatDoc(<span class="token punctuation">'</span>justifycenter<span class="token punctuation">'</span>);<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>data:image/gif;base64,R0lGODlhFgAWAID/AMDAwAAAACH5BAEAAAAALAAAAAAWABYAQAIfhI+py+0Po5y02ouz3jL4D4JOGI7kaZ5Bqn4sycVbAQA7<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>intLink<span class="token punctuation">"</span></span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Right align<span class="token punctuation">"</span></span> <span class="token attr-name">onclick</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>formatDoc(<span class="token punctuation">'</span>justifyright<span class="token punctuation">'</span>);<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>data:image/gif;base64,R0lGODlhFgAWAID/AMDAwAAAACH5BAEAAAAALAAAAAAWABYAQAIghI+py+0Po5y02ouz3jL4D4JQGDLkGYxouqzl43JyVgAAOw==<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>intLink<span class="token punctuation">"</span></span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Numbered list<span class="token punctuation">"</span></span> <span class="token attr-name">onclick</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>formatDoc(<span class="token punctuation">'</span>insertorderedlist<span class="token punctuation">'</span>);<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>data:image/gif;base64,R0lGODlhFgAWAMIGAAAAADljwliE35GjuaezxtHa7P///////yH5BAEAAAcALAAAAAAWABYAAAM2eLrc/jDKSespwjoRFvggCBUBoTFBeq6QIAysQnRHaEOzyaZ07Lu9lUBnC0UGQU1K52s6n5oEADs=<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>intLink<span class="token punctuation">"</span></span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Dotted list<span class="token punctuation">"</span></span> <span class="token attr-name">onclick</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>formatDoc(<span class="token punctuation">'</span>insertunorderedlist<span class="token punctuation">'</span>);<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>data:image/gif;base64,R0lGODlhFgAWAMIGAAAAAB1ChF9vj1iE33mOrqezxv///////yH5BAEAAAcALAAAAAAWABYAAAMyeLrc/jDKSesppNhGRlBAKIZRERBbqm6YtnbfMY7lud64UwiuKnigGQliQuWOyKQykgAAOw==<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>intLink<span class="token punctuation">"</span></span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Quote<span class="token punctuation">"</span></span> <span class="token attr-name">onclick</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>formatDoc(<span class="token punctuation">'</span>formatblock<span class="token punctuation">'</span>,<span class="token punctuation">'</span>blockquote<span class="token punctuation">'</span>);<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>data:image/gif;base64,R0lGODlhFgAWAIQXAC1NqjFRjkBgmT9nqUJnsk9xrFJ7u2R9qmKBt1iGzHmOrm6Sz4OXw3Odz4Cl2ZSnw6KxyqO306K63bG70bTB0rDI3bvI4P///////////////////////////////////yH5BAEKAB8ALAAAAAAWABYAAAVP4CeOZGmeaKqubEs2CekkErvEI1zZuOgYFlakECEZFi0GgTGKEBATFmJAVXweVOoKEQgABB9IQDCmrLpjETrQQlhHjINrTq/b7/i8fp8PAQA7<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>intLink<span class="token punctuation">"</span></span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Delete indentation<span class="token punctuation">"</span></span> <span class="token attr-name">onclick</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>formatDoc(<span class="token punctuation">'</span>outdent<span class="token punctuation">'</span>);<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>data:image/gif;base64,R0lGODlhFgAWAMIHAAAAADljwliE35GjuaezxtDV3NHa7P///yH5BAEAAAcALAAAAAAWABYAAAM2eLrc/jDKCQG9F2i7u8agQgyK1z2EIBil+TWqEMxhMczsYVJ3e4ahk+sFnAgtxSQDqWw6n5cEADs=<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>intLink<span class="token punctuation">"</span></span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Add indentation<span class="token punctuation">"</span></span> <span class="token attr-name">onclick</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>formatDoc(<span class="token punctuation">'</span>indent<span class="token punctuation">'</span>);<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>data:image/gif;base64,R0lGODlhFgAWAOMIAAAAADljwl9vj1iE35GjuaezxtDV3NHa7P///////////////////////////////yH5BAEAAAgALAAAAAAWABYAAAQ7EMlJq704650B/x8gemMpgugwHJNZXodKsO5oqUOgo5KhBwWESyMQsCRDHu9VOyk5TM9zSpFSr9gsJwIAOw==<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>intLink<span class="token punctuation">"</span></span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Hyperlink<span class="token punctuation">"</span></span> <span class="token attr-name">onclick</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>var sLnk=prompt(<span class="token punctuation">'</span>Write the URL here<span class="token punctuation">'</span>,<span class="token punctuation">'</span>http:\/\/<span class="token punctuation">'</span>);if(sLnk&&sLnk!=<span class="token punctuation">'</span><span class="token punctuation">'</span>&&sLnk!=<span class="token punctuation">'</span>http://<span class="token punctuation">'</span>){formatDoc(<span class="token punctuation">'</span>createlink<span class="token punctuation">'</span>,sLnk)}<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>data:image/gif;base64,R0lGODlhFgAWAOMKAB1ChDRLY19vj3mOrpGjuaezxrCztb/I19Ha7Pv8/f///////////////////////yH5BAEKAA8ALAAAAAAWABYAAARY8MlJq7046827/2BYIQVhHg9pEgVGIklyDEUBy/RlE4FQF4dCj2AQXAiJQDCWQCAEBwIioEMQBgSAFhDAGghGi9XgHAhMNoSZgJkJei33UESv2+/4vD4TAQA7<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>intLink<span class="token punctuation">"</span></span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Cut<span class="token punctuation">"</span></span> <span class="token attr-name">onclick</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>formatDoc(<span class="token punctuation">'</span>cut<span class="token punctuation">'</span>);<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>data:image/gif;base64,R0lGODlhFgAWAIQSAB1ChBFNsRJTySJYwjljwkxwl19vj1dusYODhl6MnHmOrpqbmpGjuaezxrCztcDCxL/I18rL1P///////////////////////////////////////////////////////yH5BAEAAB8ALAAAAAAWABYAAAVu4CeOZGmeaKqubDs6TNnEbGNApNG0kbGMi5trwcA9GArXh+FAfBAw5UexUDAQESkRsfhJPwaH4YsEGAAJGisRGAQY7UCC9ZAXBB+74LGCRxIEHwAHdWooDgGJcwpxDisQBQRjIgkDCVlfmZqbmiEAOw==<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>intLink<span class="token punctuation">"</span></span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Copy<span class="token punctuation">"</span></span> <span class="token attr-name">onclick</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>formatDoc(<span class="token punctuation">'</span>copy<span class="token punctuation">'</span>);<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>data:image/gif;base64,R0lGODlhFgAWAIQcAB1ChBFNsTRLYyJYwjljwl9vj1iE31iGzF6MnHWX9HOdz5GjuYCl2YKl8ZOt4qezxqK63aK/9KPD+7DI3b/I17LM/MrL1MLY9NHa7OPs++bx/Pv8/f///////////////yH5BAEAAB8ALAAAAAAWABYAAAWG4CeOZGmeaKqubOum1SQ/kPVOW749BeVSus2CgrCxHptLBbOQxCSNCCaF1GUqwQbBd0JGJAyGJJiobE+LnCaDcXAaEoxhQACgNw0FQx9kP+wmaRgYFBQNeAoGihCAJQsCkJAKOhgXEw8BLQYciooHf5o7EA+kC40qBKkAAAGrpy+wsbKzIiEAOw==<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>intLink<span class="token punctuation">"</span></span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Paste<span class="token punctuation">"</span></span> <span class="token attr-name">onclick</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>formatDoc(<span class="token punctuation">'</span>paste<span class="token punctuation">'</span>);<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>data:image/gif;base64,R0lGODlhFgAWAIQUAD04KTRLY2tXQF9vj414WZWIbXmOrpqbmpGjudClFaezxsa0cb/I1+3YitHa7PrkIPHvbuPs+/fvrvv8/f///////////////////////////////////////////////yH5BAEAAB8ALAAAAAAWABYAAAWN4CeOZGmeaKqubGsusPvBSyFJjVDs6nJLB0khR4AkBCmfsCGBQAoCwjF5gwquVykSFbwZE+AwIBV0GhFog2EwIDchjwRiQo9E2Fx4XD5R+B0DDAEnBXBhBhN2DgwDAQFjJYVhCQYRfgoIDGiQJAWTCQMRiwwMfgicnVcAAAMOaK+bLAOrtLUyt7i5uiUhADs=<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>textBox<span class="token punctuation">"</span></span> <span class="token attr-name">contenteditable</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>true<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>Lorem ipsum<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>editMode<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>checkbox<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>switchMode<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>switchBox<span class="token punctuation">"</span></span> <span class="token attr-name">onchange</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>setDocMode(this.checked);<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>switchBox<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Show HTML<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>submit<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Send<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span>
</code></pre> 
  <p>在浏览器运行后结果如下：<br> <a href="http://img.e-com-net.com/image/info8/42ded3135da34be0809322a8be93c640.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/42ded3135da34be0809322a8be93c640.jpg" alt="前端技术分享之HTML&&HTML5_第6张图片" width="647" height="391" style="border:1px solid black;"></a><br> 格式化之后结果如下：<a href="http://img.e-com-net.com/image/info8/2a7fb0b7ffcc4b10ac3529feff1323c1.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/2a7fb0b7ffcc4b10ac3529feff1323c1.jpg" alt="前端技术分享之HTML&&HTML5_第7张图片" width="634" height="390" style="border:1px solid black;"></a><br> 我们查看下转换后的HTML代码：</p> 
  <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>font</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>#ff0000<span class="token punctuation">"</span></span><span class="token style-attr language-css"><span class="token attr-name"> <span class="token attr-name">style</span></span><span class="token punctuation">="</span><span class="token attr-value"><span class="token property">background-color</span><span class="token punctuation">:</span> black<span class="token punctuation">;</span> <span class="token property">font-weight</span><span class="token punctuation">:</span> normal<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span> <span class="token attr-name">face</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Times New Roman<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>i</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>u</span><span class="token punctuation">></span></span>Hello World<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>u</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>i</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>font</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span>
</code></pre> 
  <h5>HTML 拖放 API</h5> 
  <p>HTML 拖放（Drag and Drop）接口使应用程序能够在Firefox和其他浏览器中使用拖放功能。例如，通过这些功能，用户可以使用鼠标选择可拖动元素，将元素拖动到可放置元素，并通过释放鼠标按钮来放置这些元素。可拖动元素的一个半透明表示在拖动操作期间跟随鼠标指针。</p> 
  <p>HTML 的 drag & drop 使用了 DOM event model 以及从mouse events 继承而来的 drag events 。一个典型的drag操作是这样开始的：用户用鼠标选中一个可拖动的（draggable）元素，移动鼠标到一个可放置的（droppable）元素，然后释放鼠标。 在操作期间，会触发一些事件类型，有一些事件类型可能会被多次触发（比如drag 和 dragover 事件类型）。</p> 
  <table> 
   <thead> 
    <tr> 
     <th>Event</th> 
     <th>On Event Handler</th> 
     <th>Fires when…</th> 
    </tr> 
   </thead> 
   <tbody> 
    <tr> 
     <td>drag</td> 
     <td>ondrag</td> 
     <td>当拖动元素或选中的文本时触发。</td> 
    </tr> 
    <tr> 
     <td>dragend</td> 
     <td>ondragend</td> 
     <td>当拖拽操作结束时触发 (比如松开鼠标按键或敲“Esc”键)。</td> 
    </tr> 
    <tr> 
     <td>dragenter</td> 
     <td>ondragenter</td> 
     <td>当拖动元素或选中的文本到一个可释放目标时触发。</td> 
    </tr> 
    <tr> 
     <td>dragexit</td> 
     <td>ondragexit</td> 
     <td>当元素变得不再是拖动操作的选中目标时触发。</td> 
    </tr> 
    <tr> 
     <td>dragleave</td> 
     <td>ondragleave</td> 
     <td>当拖动元素或选中的文本离开一个可释放目标时触发。</td> 
    </tr> 
    <tr> 
     <td>dragover</td> 
     <td>ondragover</td> 
     <td>当元素或选中的文本被拖到一个可释放目标上时触发（每100毫秒触发一次）。</td> 
    </tr> 
    <tr> 
     <td>dragstart</td> 
     <td>ondragstart</td> 
     <td>当用户开始拖动一个元素或选中的文本时触发。</td> 
    </tr> 
    <tr> 
     <td>drop</td> 
     <td>ondrop</td> 
     <td>当元素或选中的文本在可释放目标上被释放时触发。</td> 
    </tr> 
   </tbody> 
  </table> 
  <blockquote> 
   <p>图片来源：https://segmentfault.com/a/1190000012811776<br> 作者：李春雨<br> 侵权联系删除<br> <a href="http://img.e-com-net.com/image/info8/efd2354cca69478d8fc7eb8b211f5d9d.gif" target="_blank"><img src="http://img.e-com-net.com/image/info8/efd2354cca69478d8fc7eb8b211f5d9d.gif" alt="前端技术分享之HTML&&HTML5_第8张图片" width="800" height="448" style="border:1px solid black;"></a><br> js部分代码如下：<br> git仓库地址：[https://github.com/pluslicy/drag]<br> 作者：pluslicy<br> 侵权联系删除</p> 
  </blockquote> 
  <pre><code class="prism language-javascript"><span class="token function">$</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token comment">//解决火狐弹出新选项卡的问题</span>
  <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'.container'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">bind</span><span class="token punctuation">(</span><span class="token string">'drop'</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span>event<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    event<span class="token punctuation">.</span><span class="token function">preventDefault</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    event<span class="token punctuation">.</span><span class="token function">stopPropagation</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

  <span class="token comment">//拖拽开始时将被拖拽元素透明度设置为50%</span>
  <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'.canDrog > li'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">bind</span><span class="token punctuation">(</span><span class="token string">'dragstart'</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span>event<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">var</span> event <span class="token operator">=</span> event<span class="token punctuation">.</span>originalEvent<span class="token punctuation">;</span>
    event<span class="token punctuation">.</span>target<span class="token punctuation">.</span>style<span class="token punctuation">.</span>opacity <span class="token operator">=</span> <span class="token number">0.5</span><span class="token punctuation">;</span>
    <span class="token keyword">var</span> dataText <span class="token operator">=</span> <span class="token function">$</span><span class="token punctuation">(</span>event<span class="token punctuation">.</span>target<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">attr</span><span class="token punctuation">(</span><span class="token string">'data-text'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token comment">//firefox 必须添加</span>
    event<span class="token punctuation">.</span>dataTransfer<span class="token punctuation">.</span><span class="token function">setData</span><span class="token punctuation">(</span><span class="token string">'text'</span><span class="token punctuation">,</span> dataText<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

  <span class="token comment">//拖拽过程不执行任何操作。将会被持续触发</span>
  <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'.canDrog > li'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">bind</span><span class="token punctuation">(</span><span class="token string">'drag'</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span>event<span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

  <span class="token comment">//拖拽之后恢复被拖拽元素的透明度</span>
  <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'.canDrog > li'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">bind</span><span class="token punctuation">(</span><span class="token string">'dragend'</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span>event<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">var</span> event <span class="token operator">=</span> event<span class="token punctuation">.</span>originalEvent<span class="token punctuation">;</span>
    event<span class="token punctuation">.</span>target<span class="token punctuation">.</span>style<span class="token punctuation">.</span>opacity <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

  <span class="token comment">//将元素拖入当前元素</span>
  <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'.dataTbl'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">bind</span><span class="token punctuation">(</span><span class="token string">'dragenter'</span><span class="token punctuation">,</span> <span class="token string">'td'</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span>event<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">var</span> event <span class="token operator">=</span> event<span class="token punctuation">.</span>originalEvent<span class="token punctuation">;</span>
    event<span class="token punctuation">.</span>target<span class="token punctuation">.</span>style<span class="token punctuation">.</span>backgroundColor <span class="token operator">=</span> <span class="token string">'#fdfdfd'</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  
  <span class="token comment">//google chrome,opera需要添加</span>
  <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'.dataTbl'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">bind</span><span class="token punctuation">(</span><span class="token string">'dragover'</span><span class="token punctuation">,</span> <span class="token string">'td'</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span>e<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    e<span class="token punctuation">.</span>originalEvent<span class="token punctuation">.</span><span class="token function">preventDefault</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  
  <span class="token comment">//将元素拖离当前元素</span>
  <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'.dataTbl'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">bind</span><span class="token punctuation">(</span><span class="token string">'dragleave'</span><span class="token punctuation">,</span> <span class="token string">'td'</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span>event<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">var</span> event <span class="token operator">=</span> event<span class="token punctuation">.</span>originalEvent<span class="token punctuation">;</span>
    event<span class="token punctuation">.</span>target<span class="token punctuation">.</span>style<span class="token punctuation">.</span>backgroundColor <span class="token operator">=</span> <span class="token string">''</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

  <span class="token comment">//将元素释放到当前元素中</span>
  <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'.dataTbl'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">bind</span><span class="token punctuation">(</span><span class="token string">'drop'</span><span class="token punctuation">,</span> <span class="token string">'td'</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span>event<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">var</span> event <span class="token operator">=</span> event<span class="token punctuation">.</span>originalEvent<span class="token punctuation">;</span>
    <span class="token keyword">var</span> text <span class="token operator">=</span> event<span class="token punctuation">.</span>dataTransfer<span class="token punctuation">.</span><span class="token function">getData</span><span class="token punctuation">(</span><span class="token string">'text'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token comment">//重置背景色</span>
    event<span class="token punctuation">.</span>target<span class="token punctuation">.</span>style<span class="token punctuation">.</span>backgroundColor <span class="token operator">=</span> <span class="token string">''</span><span class="token punctuation">;</span>
    <span class="token comment">//添加拖拽元素的类型</span>
    <span class="token function">$</span><span class="token punctuation">(</span>event<span class="token punctuation">.</span>target<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">removeClass</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token function">$</span><span class="token punctuation">(</span>event<span class="token punctuation">.</span>target<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">addClass</span><span class="token punctuation">(</span>text<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token function">$</span><span class="token punctuation">(</span>event<span class="token punctuation">.</span>target<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">text</span><span class="token punctuation">(</span>text<span class="token punctuation">)</span><span class="token punctuation">;</span>

    event<span class="token punctuation">.</span><span class="token function">preventDefault</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    event<span class="token punctuation">.</span><span class="token function">stopPropagation</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> 
  <h5>全屏 API</h5> 
  <p>全屏 API 为用户的整个屏幕展现网络内容提供了一种简单的方式。这种API让你可以简单地控制浏览器，使得一个元素与其子元素，如果存在的话，可以占据整个屏幕，并在此期间，从屏幕上隐藏所有的浏览器用户界面以及其他应用。</p> 
  <p>全屏 API 在 Document 和 Element 接口中增加了一些方法，可用于允许打开关闭全屏模式。</p> 
  <pre><code class="prism language-javascript"><span class="token comment">// 用于请求从全屏模式切换到窗口模式，</span>
<span class="token comment">// 会返回一个 Promise，会在全屏模式完全关闭的时候被置为 resolved 状态。</span>
Document<span class="token punctuation">.</span><span class="token function">exitFullscreen</span><span class="token punctuation">(</span><span class="token punctuation">)</span>

<span class="token comment">// 请求浏览器（user agent）将特定元素（甚至延伸到它的后代元素）置为全屏模式，</span>
<span class="token comment">// 隐去屏幕上的浏览器所有 UI 元素，以及其它应用。</span>
<span class="token comment">// 返回一个 Promise，并会在全屏模式被激活的时候变成 resolved 状态。</span>
Element<span class="token punctuation">.</span><span class="token function">requestFullscreen</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
</code></pre> 
  <h4>设备访问</h4> 
  <h5>触摸事件</h5> 
  <p>为了给基于触摸的用户界面提供高质量的支持，触摸事件提供了在触摸屏或触控板上解释手指（或触控笔）活动的能力。</p> 
  <p>触摸事件接口是较为底层的 API，可为特定程序提供多点触控交互（比如双指手势）的支持。多点触控交互开始于一个手指（或触控笔）开始接触设备平面的时刻。随后其他手指也可触摸设备表面，并随意进行划动。当所有手指离开设备平面时，交互结束。整个交互期间，程序接收开始、移动、结束三个阶段的触摸事件。</p> 
  <h5>地理位置定位</h5> 
  <p>地理位置 API 允许用户向 Web 应用程序提供他们的位置。出于隐私考虑，报告地理位置前会先请求用户许可。<br> <a href="http://img.e-com-net.com/image/info8/c99281de09664011a985b6849ae7a09c.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/c99281de09664011a985b6849ae7a09c.jpg" alt="前端技术分享之HTML&&HTML5_第9张图片" width="530" height="295" style="border:1px solid black;"></a><br> 地理位置 API 通过 navigator.geolocation 提供。如果该对象存在，那么地理位置服务可用。</p> 
  <pre><code class="prism language-javascript"><span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token string">"geolocation"</span> <span class="token keyword">in</span> navigator<span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token comment">/* 地理位置服务可用 */</span>
<span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
  <span class="token comment">/* 地理位置服务不可用 */</span>
<span class="token punctuation">}</span>
</code></pre> 
  <p>我们可以调用 getCurrentPosition() 函数获取用户当前定位位置。这会异步地请求获取用户位置，并查询定位硬件来获取最新信息。当定位被确定后，定义的回调函数就会被执行。您可以选择性地提供第二个回调函数，当有错误时会被执行。第三个参数也是可选的，您可以通过该对象参数设定最长可接受的定位返回时间、等待请求的时间和是否获取高精度定位。</p> 
  <pre><code class="prism language-javascript"><span class="token comment">// 当获取位置后 do_something() 函数会被执行。</span>
navigator<span class="token punctuation">.</span>geolocation<span class="token punctuation">.</span><span class="token function">getCurrentPosition</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span>position<span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token function">do_something</span><span class="token punctuation">(</span>position<span class="token punctuation">.</span>coords<span class="token punctuation">.</span>latitude<span class="token punctuation">,</span> position<span class="token punctuation">.</span>coords<span class="token punctuation">.</span>longitude<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> 
  <h5>检测设备方向</h5> 
  <p>越来越多的网络设备能够确定它们的方向；也就是说，它们可以提供一些数据，表明它们的方向与引力有关的变化。特别是手持设备，如移动电话，可以利用这些信息来自动旋转屏幕，使其保持直立状态，当设备旋转时，会呈现出web内容的宽屏幕视图，使其宽度大于高度。</p> 
  <p>有两种JavaScript事件负责处理设备方向信息。第一种是DeviceOrientationEvent，它会在加速度传感器检测到设备在方向上产生变化时触发。通过处理该事件传来的数据信息，可以响应用户移动设备的旋转和仰角变化。</p> 
  <p>第二个事件是DeviceMotionEvent，它会在加速度改变时触发。 它与DeviceOrientationEvent不同，因为它监听的是加速度的变化而不是方向的变化。 传感器通常具有监听DeviceMotionEvent的能力，包括笔记中用于保护移动存储设备的传感器，以保护移动存储设备。而DeviceOrientationEvent在移动设备中更为常见。</p> 
  <h5>处理方向事件</h5> 
  <pre><code class="prism language-javascript">window<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">"deviceorientation"</span><span class="token punctuation">,</span> handleOrientation<span class="token punctuation">,</span> <span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token keyword">function</span> <span class="token function">handleOrientation</span><span class="token punctuation">(</span>orientData<span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">var</span> absolute <span class="token operator">=</span> orientData<span class="token punctuation">.</span>absolute<span class="token punctuation">;</span>  <span class="token comment">// 表示该设备是否提供绝对定位数据 (这个数据是关于地球的坐标系) 或者使用了由设备决定的专门的坐标系. </span>
  <span class="token keyword">var</span> alpha <span class="token operator">=</span> orientData<span class="token punctuation">.</span>alpha<span class="token punctuation">;</span>  <span class="token comment">// 表示设备沿z轴上的旋转角度，范围为0~360。</span>
  <span class="token keyword">var</span> beta <span class="token operator">=</span> orientData<span class="token punctuation">.</span>beta<span class="token punctuation">;</span>  <span class="token comment">// 表示设备在x轴上的旋转角度，范围为-180~180。它描述的是设备由前向后旋转的情况。</span>
  <span class="token keyword">var</span> gamma <span class="token operator">=</span> orientData<span class="token punctuation">.</span>gamma<span class="token punctuation">;</span>  <span class="token comment">// 表示设备在y轴上的旋转角度，范围为-90~90。它描述的是设备由左向右旋转的情况。</span>

  <span class="token comment">// Do stuff with the new orientation data</span>
<span class="token punctuation">}</span>
</code></pre> 
  <blockquote> 
   <p>图片来源：极客标签（http://ghmagical.com/article/page/id/fne4pvvxdduu）<br> 作者： TG<br> 侵权联系删除</p> 
  </blockquote> 
  <p><a href="http://img.e-com-net.com/image/info8/c374939de4e34d148c0ace1b13d747c0.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/c374939de4e34d148c0ace1b13d747c0.png" alt="前端技术分享之HTML&&HTML5_第10张图片" width="415" height="388" style="border:1px solid black;"></a><br> <a href="http://img.e-com-net.com/image/info8/11b7250bb2814b92846200c6eb4ddd77.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/11b7250bb2814b92846200c6eb4ddd77.png" alt="前端技术分享之HTML&&HTML5_第11张图片" width="415" height="388" style="border:1px solid black;"></a><br> <a href="http://img.e-com-net.com/image/info8/542b2ff0f2ba46869d48389108233f0e.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/542b2ff0f2ba46869d48389108233f0e.png" alt="前端技术分享之HTML&&HTML5_第12张图片" width="415" height="388" style="border:1px solid black;"></a><br> <a href="http://img.e-com-net.com/image/info8/56729f08bcbb4c908ad0279ee9e798cc.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/56729f08bcbb4c908ad0279ee9e798cc.png" alt="前端技术分享之HTML&&HTML5_第13张图片" width="415" height="388" style="border:1px solid black;"></a></p> 
  <h5>处理移动事件</h5> 
  <p>移动事件的处理跟方向事件是一样的，除了他们有自己的事件名：devicemotion</p> 
  <pre><code class="prism language-javascript">window<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">"devicemotion"</span><span class="token punctuation">,</span> handleMotion<span class="token punctuation">,</span> <span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> 
  <p>真正不同的是做为参数传递给HandleMotion函数的DeviceMotionEvent对象所包含的信息。</p> 
  <p>这个对象包含四个属性：</p> 
  <pre><code class="prism language-javascript">DeviceMotionEvent<span class="token punctuation">.</span>acceleration
DeviceMotionEvent<span class="token punctuation">.</span>accelerationIncludingGravity
DeviceMotionEvent<span class="token punctuation">.</span>rotationRate
DeviceMotionEvent<span class="token punctuation">.</span>interval
</code></pre> 
  <p>acceleration 和 accelerationIncludingGravity，都包含下面三个轴：</p> 
  <ul> 
   <li>x: 西向东</li> 
   <li>y: 南向北</li> 
   <li>z: 垂直地面</li> 
  </ul> 
  <p>rotationRate 的情况有点不同；三个轴的信息对应着以下三种情况：</p> 
  <ul> 
   <li>alpha:：设备沿着垂直屏幕的轴的旋转速率 (桌面设备相对于键盘)</li> 
   <li>beta：设备沿着屏幕左至右方向的轴的旋转速率(桌面设备相对于键盘)</li> 
   <li>gamma： 设备沿着屏幕下至上方向的轴的旋转速率(桌面设备相对于键盘)</li> 
  </ul> 
  <h5>实际开发中的运用</h5> 
  <ol> 
   <li>用触发手机的横屏和竖屏之间的切换的事件：</li> 
  </ol> 
  <pre><code class="prism language-javascript">window<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span>
  <span class="token string">'orientationchange'</span><span class="token punctuation">,</span>
  <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">// 获取新方向的数值</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>window<span class="token punctuation">.</span>orientation <span class="token operator">==</span> <span class="token number">180</span> <span class="token operator">||</span> window<span class="token punctuation">.</span>orientation <span class="token operator">==</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">'竖屏状态！'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>window<span class="token punctuation">.</span>orientation <span class="token operator">==</span> <span class="token number">90</span> <span class="token operator">||</span> window<span class="token punctuation">.</span>orientation <span class="token operator">==</span> <span class="token operator">-</span><span class="token number">90</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">'横屏状态！'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token boolean">false</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>

</code></pre> 
  <ol start="2"> 
   <li>css判断横竖屏幕</li> 
  </ol> 
  <pre><code class="prism language-css"><span class="token comment">/* 横屏 */</span>
<span class="token atrule"><span class="token rule">@media</span> screen and <span class="token punctuation">(</span><span class="token property">orientation</span><span class="token punctuation">:</span>portrait<span class="token punctuation">)</span></span> <span class="token punctuation">{</span>
<span class="token comment">/* portrait-specific styles */</span>
<span class="token punctuation">}</span>

<span class="token comment">/* 竖屏*/</span>
<span class="token atrule"><span class="token rule">@media</span> screen and <span class="token punctuation">(</span><span class="token property">orientation</span><span class="token punctuation">:</span>landscape<span class="token punctuation">)</span></span> <span class="token punctuation">{</span>
<span class="token comment">/* landscape-specific styles */</span>
<span class="token punctuation">}</span>
</code></pre> 
 </div> 
</div>
                            </div>
                        </div>
                    </div>
                    <!--PC和WAP自适应版-->
                    <div id="SOHUCS" sid="1275881121703280640"></div>
                    <script type="text/javascript" src="/views/front/js/chanyan.js"></script>
                    <!-- 文章页-底部 动态广告位 -->
                    <div class="youdao-fixed-ad" id="detail_ad_bottom"></div>
                </div>
                <div class="col-md-3">
                    <div class="row" id="ad">
                        <!-- 文章页-右侧1 动态广告位 -->
                        <div id="right-1" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad">
                            <div class="youdao-fixed-ad" id="detail_ad_1"> </div>
                        </div>
                        <!-- 文章页-右侧2 动态广告位 -->
                        <div id="right-2" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad">
                            <div class="youdao-fixed-ad" id="detail_ad_2"></div>
                        </div>
                        <!-- 文章页-右侧3 动态广告位 -->
                        <div id="right-3" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad">
                            <div class="youdao-fixed-ad" id="detail_ad_3"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="container">
        <h4 class="pt20 mb15 mt0 border-top">你可能感兴趣的:(前端基础)</h4>
        <div id="paradigm-article-related">
            <div class="recommend-post mb30">
                <ul class="widget-links">
                    <li><a href="/article/1950140903616212992.htm"
                           title="Java朴实无华按天计划从入门到实战（强化速战版-66天）" target="_blank">Java朴实无华按天计划从入门到实战（强化速战版-66天）</a>
                        <span class="text-muted">岫珩</span>
<a class="tag" taget="_blank" href="/search/Java/1.htm">Java</a><a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AF/1.htm">后端</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/Java/1.htm">Java</a><a class="tag" taget="_blank" href="/search/%E6%97%B6%E9%97%B4%E5%AE%89%E6%8E%92/1.htm">时间安排</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0%E8%AE%A1%E5%88%92/1.htm">学习计划</a>
                        <div>致敬读者感谢阅读笑口常开生日快乐⬛早点睡觉博主相关博主信息博客首页专栏推荐活动信息文章目录Java朴实无华按天计划从入门到实战（强化速战版-66天）1.基础（18）1.1JavaSE核心（5天）1.2数据库与SQL（5天）1.3前端基础（8天）2.进阶（17天）2.1JavaWeb核心（5天）2.2Mybatis与Spring全家桶（6天）2.3中间件入门（4天）2.4实践项目（2天）3.高阶（1</div>
                    </li>
                    <li><a href="/article/1950002983613820928.htm"
                           title="前端基础知识Vue3系列 - 04（Vue3.0 所采用的 Composition Api 与 Vue2.x 使用的 Options Api 有什么不同）" target="_blank">前端基础知识Vue3系列 - 04（Vue3.0 所采用的 Composition Api 与 Vue2.x 使用的 Options Api 有什么不同）</a>
                        <span class="text-muted"></span>

                        <div>开始之前CompositionAPI可以说是Vue3的最大特点，那么为什么要推出CompositionApi，解决了什么问题？通常使用Vue2开发的项目，普遍会存在以下问题：代码的可读性随着组件变大而变差每一种代码复用的方式，都存在缺点TypeScript支持有限以上通过使用CompositionApi都能迎刃而解正文一、OptionsApiOptionsAPI，即大家常说的选项API，即以vue</div>
                    </li>
                    <li><a href="/article/1948999677756108800.htm"
                           title="前端基础知识Vue系列 - 19（Vue常用的修饰符）" target="_blank">前端基础知识Vue系列 - 19（Vue常用的修饰符）</a>
                        <span class="text-muted"></span>

                        <div>一、修饰符是什么在程序世界里，修饰符是用于限定类型以及类型成员的声明的一种符号在Vue中，修饰符处理了许多DOM事件的细节，让我们不再需要花大量的时间去处理这些烦恼的事情，而能有更多的精力专注于程序的逻辑处理vue中修饰符分为以下五种：表单修饰符事件修饰符鼠标按键修饰符键值修饰符v-bind修饰符二、修饰符的作用表单修饰符在我们填写表单的时候用得最多的是input标签，指令用得最多的是v-mode</div>
                    </li>
                    <li><a href="/article/1948999425577775104.htm"
                           title="前端基础知识HTTP系列 - 04（OSI七层模型）" target="_blank">前端基础知识HTTP系列 - 04（OSI七层模型）</a>
                        <span class="text-muted">前端小白从0开始</span>
<a class="tag" taget="_blank" href="/search/http/1.htm">http</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>一、是什么OSI（OpenSystemInterconnect）模型全称为开放式通信系统互连参考模型，是国际标准化组织(ISO)提出的一个试图使各种计算机在世界范围内互连为网络的标准框架OSI将计算机网络体系结构划分为七层，每一层实现各自的功能和协议，并完成与相邻层的接口通信。即每一层扮演固定的角色，互不打扰二、划分OSI主要划分了七层，如下所示：应用层应用层位于OSI参考模型的第七层，其作用是通</div>
                    </li>
                    <li><a href="/article/1948558323011874816.htm"
                           title="前端基础知识Vue系列 - 25（SSR解决了什么问题）" target="_blank">前端基础知识Vue系列 - 25（SSR解决了什么问题）</a>
                        <span class="text-muted">前端小白从0开始</span>
<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/SSR/1.htm">SSR</a>
                        <div>一、是什么Server-SideRendering我们称其为SSR，意为服务端渲染指由服务侧完成页面的HTML结构拼接的页面处理技术，发送到浏览器，然后为其绑定状态与事件，成为完全可交互页面的过程先来看看Web3个阶段的发展史：传统服务端渲染SSR单页面应用SPA服务端渲染SSR传统web开发网页内容在服务端渲染完成，⼀次性传输到浏览器打开页面查看源码，浏览器拿到的是全部的dom结构单页应用SPA</div>
                    </li>
                    <li><a href="/article/1947538123235848192.htm"
                           title="前端基础知识Vue系列 - 17（vue中key的原理）" target="_blank">前端基础知识Vue系列 - 17（vue中key的原理）</a>
                        <span class="text-muted"></span>

                        <div>一、Key是什么开始之前，我们先还原两个实际工作场景当我们在使用v-for时，需要给单元加上key...用+newDate()生成的时间戳作为key，手动强制触发重新渲染那么这背后的逻辑是什么，key的作用又是什么？一句话来讲key是给每一个vnode的唯一id，也是diff的一种优化策略，可以根据key，更准确，更快的找到对应的vnode节点场景背后的逻辑当我们在使用v-for时，需要给单元加上</div>
                    </li>
                    <li><a href="/article/1946835105938993152.htm"
                           title="《前端基础核心知识笔记：HTML、CSS、JavaScript 及 BOM/DOM》" target="_blank">《前端基础核心知识笔记：HTML、CSS、JavaScript 及 BOM/DOM》</a>
                        <span class="text-muted">萌新小白的逆袭</span>
<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/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a>
                        <div>html前端三剑客的介绍：HTML:页面内容的载体Css：用来美化和指定页面的显示效果JavaScript：页面显示的过程中，可以动态改变页面的内容重点属性type="text"文本输入type="password"密码输入SerlvertC超链接type="radio"value="值"单选框type="checkbox"value="值"多选框在作用设置编码格式 action是跳转的界面met</div>
                    </li>
                    <li><a href="/article/1943393827750473728.htm"
                           title="从AI辅助编码到自动部署：前端开发提效全流程实践" target="_blank">从AI辅助编码到自动部署：前端开发提效全流程实践</a>
                        <span class="text-muted">程序猿全栈の董（董翔）</span>
<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/%E7%83%AD%E9%97%A8%E6%8A%80%E6%9C%AF%E9%A2%86%E5%9F%9F/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/%E6%96%B0%E5%85%B4%E9%A2%86%E5%9F%9F/1.htm">新兴领域</a><a class="tag" taget="_blank" href="/search/%E7%83%AD%E9%97%A8%E6%8A%80%E6%9C%AF/1.htm">热门技术</a>
                        <div>从AI辅助编码到自动部署：前端开发提效全流程实践**摘要本文结合ChatGPT、GitHubCopilot等AI工具，分享从需求分析、代码编写到自动化部署的全流程提效技巧。通过真实案例演示如何利用AI工具提升30%以上的开发效率，适合有一定前端基础的开发者阅读。一、引言：AI时代的前端开发变革现状：据StackOverflow2023调查，65%的开发者使用AI辅助工具，平均减少35%的调试时间。</div>
                    </li>
                    <li><a href="/article/1941618973070127104.htm"
                           title="web前端基础知识:表单标签" target="_blank">web前端基础知识:表单标签</a>
                        <span class="text-muted">黄昏终结者</span>
<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/javascript/1.htm">javascript</a>
                        <div>一.input系列标签语法:form表单用来收集用户信息的input输入type类型type属性值:text文本password密码框radio单选框checkbox多选框file选择文件submit提交按钮reset重置按钮button普通按钮1.input系列标签-text文本框属性:placeholder占位符文本输入框语法:昵称:2.input系列标签-password密码框属性:plac</div>
                    </li>
                    <li><a href="/article/1941047403159285760.htm"
                           title="【前端】一文快速回顾 Html+CSS+JS" target="_blank">【前端】一文快速回顾 Html+CSS+JS</a>
                        <span class="text-muted">CoderSharry</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/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/css/1.htm">css</a>
                        <div>文章目录前言Preface1.HTML快速回顾1.1基本结构1.2简单语法回顾2.CSS快速回顾2.1三种引入方式2.2选择器2.3布局2.3.1盒子模型2.3.2定位2.3.3浮动2.4简单练习3.JavaScript快速回顾3.1JavaScript引入方式3.2JavaScript基本语法3.2.1变量3.2.2函数与箭头函数3.3简单练习4.总结参考资料一文快速回顾前端基础三件套：HTML</div>
                    </li>
                    <li><a href="/article/1939593626833186816.htm"
                           title="前端基础知识JavaScript系列 - 25（Javascript本地存储）" target="_blank">前端基础知识JavaScript系列 - 25（Javascript本地存储）</a>
                        <span class="text-muted">前端小白从0开始</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a>
                        <div>一、方式javaScript本地缓存的方法我们主要讲述以下四种：cookiesessionStoragelocalStorageindexedDBcookieCookie，类型为「小型文本文件」，指某些网站为了辨别用户身份而储存在用户本地终端上的数据。是为了解决HTTP无状态导致的问题作为一段一般不超过4KB的小型文本数据，它由一个名称（Name）、一个值（Value）和其它几个用于控制cooki</div>
                    </li>
                    <li><a href="/article/1939045354578178048.htm"
                           title="Java web%10" target="_blank">Java web%10</a>
                        <span class="text-muted">好学且牛逼的马</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/AI%E7%BC%96%E7%A8%8B/1.htm">AI编程</a>
                        <div>%10新路线Javawebai笔记阶段时长内容Web前端基础2天HTML、CSS、JS、Vue3、AjaxWeb后端基础4天Maven、HTTP协议、SpringIOC、DI、MySQL、JDBC、MybatisWeb后端实战6天Tlias案例（基于案例讲解web开发的核心知识）Web后端进阶2天SpringAOP、SpringBoot原理、自定义Starter、Maven高级前端web实战4天V</div>
                    </li>
                    <li><a href="/article/1937022778293153792.htm"
                           title="前端基础知识JavaScript系列 - 06（深拷贝浅拷贝）" target="_blank">前端基础知识JavaScript系列 - 06（深拷贝浅拷贝）</a>
                        <span class="text-muted"></span>

                        <div>一、数据类型存储前面文章我们讲到，JavaScript中存在两大数据类型：基本类型引用类型基本类型数据保存在在栈内存中引用类型数据保存在堆内存中，引用数据类型的变量是一个指向堆内存中实际对象的引用，存在栈中二、浅拷贝浅拷贝，指的是创建新的数据，这个数据有着原始数据属性值的一份精确拷贝如果属性是基本类型，拷贝的就是基本类型的值。如果属性是引用类型，拷贝的就是内存地址即浅拷贝是拷贝一层，深层次的引用类</div>
                    </li>
                    <li><a href="/article/1936989379901845504.htm"
                           title="前端基础知识CSS系列 - 13（响应式设计的基本原理）" target="_blank">前端基础知识CSS系列 - 13（响应式设计的基本原理）</a>
                        <span class="text-muted">前端小白从0开始</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E5%93%8D%E5%BA%94%E5%BC%8F/1.htm">响应式</a>
                        <div>一、是什么响应式网站设计（ResponsiveWebdesign）是一种网络页面设计布局，页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整描述响应式界面最著名的一句话就是“Contentislikewater”大白话便是“如果将屏幕看作容器，那么内容就像水一样”响应式网站常见特点：同时适配PC+平板+手机等标签导航在接近手持终端设备时改变为经典的抽</div>
                    </li>
                    <li><a href="/article/1936989380388384768.htm"
                           title="前端基础知识CSS系列 - 15（单行／多行文本溢出的省略样式）" target="_blank">前端基础知识CSS系列 - 15（单行／多行文本溢出的省略样式）</a>
                        <span class="text-muted">前端小白从0开始</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a>
                        <div>一、前言在日常开发展示页面，如果一段文本的数量过长，受制于元素宽度的因素，有可能不能完全显示，为了提高用户的使用体验，这个时候就需要我们把溢出的文本显示成省略号对于文本的溢出，我们可以分成两种形式：单行文本溢出多行文本溢出二、实现方式单行文本溢出省略理解也很简单，即文本在一行内显示，超出部分以省略号的形式展现实现方式也很简单，涉及的css属性有：text-overflow：规定当文本溢出时，显示省</div>
                    </li>
                    <li><a href="/article/1936662490746253312.htm"
                           title="前端基础知识JavaScript系列 - 01（JavaScript中的数据类型？存储上的差别？）" target="_blank">前端基础知识JavaScript系列 - 01（JavaScript中的数据类型？存储上的差别？）</a>
                        <span class="text-muted">前端小白从0开始</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a>
                        <div>前言在JavaScript中，我们可以分成两种类型：基本类型复杂类型两种类型的区别是：存储位置不同一、基本类型基本类型主要为以下6种：NumberStringBooleanUndefinednullsymbolNumber数值最常见的整数类型格式则为十进制，还可以设置八进制（零开头）、十六进制（0x开头）letintNum=55//10进制的55letnum1=070//8进制的56lethexN</div>
                    </li>
                    <li><a href="/article/1936043309600403456.htm"
                           title="移动应用开发专业核心课程以及就业方向" target="_blank">移动应用开发专业核心课程以及就业方向</a>
                        <span class="text-muted"></span>

                        <div>移动应用开发专业聚焦移动端软件的设计、开发与测试，课程设置与产业需求紧密衔接，就业面向移动互联网高速增长的市场。以下是核心课程及就业方向的系统分析：一、核心课程体系专业基础课程：移动端UI设计：掌握应用界面布局、交互逻辑及用户体验优化，为原型设计奠基。网页设计与制作：学习HTML/CSS/JavaScript等前端基础，实现响应式Web开发。面向对象程序设计（Java/C#等）：培养编程思维与代码</div>
                    </li>
                    <li><a href="/article/1935546681164623872.htm"
                           title="MFE微前端高级版：Angular + Module Federation + webpack + 路由（Route way）完整示例" target="_blank">MFE微前端高级版：Angular + Module Federation + webpack + 路由（Route way）完整示例</a>
                        <span class="text-muted">crary,记忆</span>
<a class="tag" taget="_blank" href="/search/Angular/1.htm">Angular</a><a class="tag" taget="_blank" href="/search/%E5%BE%AE%E5%89%8D%E7%AB%AF-MFE/1.htm">微前端-MFE</a><a class="tag" taget="_blank" href="/search/angular.js/1.htm">angular.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/webpack/1.htm">webpack</a><a class="tag" taget="_blank" href="/search/angular/1.htm">angular</a>
                        <div>在查看这篇文章之前，可以先简单预览一下这篇基础版的博客：MFE微前端基础版：Angular+ModuleFederation+webpack+路由（Routeway）完整示例-CSDN博客这篇Angular+ModuleFederation高级路由配置详解包括嵌套路由、路由守卫、懒加载策略和动态路由等高级功能。1.主应用(Shell)高级路由配置shell/src/app/app-routing.</div>
                    </li>
                    <li><a href="/article/1935107589536804864.htm"
                           title="Web前端基础之HTML" target="_blank">Web前端基础之HTML</a>
                        <span class="text-muted"></span>

                        <div>一、浏览器火狐浏览器、谷歌浏览器(推荐)、IE浏览器推荐谷歌浏览器原因：1、简洁大方,打开速度快2、开发者调试工具（右键空白处->检查，打开调试模式）二、开发工具核心IDE工具VisualStudioCode(VSCode)‌微软开发的免费跨平台编辑器，支持智能提示、Git集成、调试功能及丰富的扩展插件‌。轻量高效，适用于HTML/CSS/JavaScript及主流前端框架开发‌。WebStorm</div>
                    </li>
                    <li><a href="/article/1934122667368050688.htm"
                           title="从搬砖工到架构师，Java全栈知识体系（2025版）" target="_blank">从搬砖工到架构师，Java全栈知识体系（2025版）</a>
                        <span class="text-muted">程序员岳彬</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/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/%E7%A8%8B%E5%BA%8F%E4%BA%BA%E7%94%9F/1.htm">程序人生</a>
                        <div>文章目录一、前端技术体系1.前端基础2.前端框架与生态3.工程化工具4.跨端与性能优化二、后端Java技术体系1.Java核心基础2.后端Web开发3.持久层技术4.微服务与中间件三、运维与DevOps1.Linux服务器2.容器与集群3.持续集成/部署4.监控与日志四、AI算法与大模型集成1.基础算法2.大模型工程实践3.应用场景五、工程工具与最佳实践1.开发工具2.代码规范与质量3.架构设计六</div>
                    </li>
                    <li><a href="/article/1933196436887891968.htm"
                           title="微信小程序-功德木鱼（含设置面板功能）" target="_blank">微信小程序-功德木鱼（含设置面板功能）</a>
                        <span class="text-muted">weixin_48077625</span>
<a class="tag" taget="_blank" href="/search/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F/1.htm">微信小程序</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%B0%8F%E7%A8%8B%E5%BA%8F/1.htm">小程序</a>
                        <div>基于微信小程序所开发的电子木鱼项目，十分适合作为微信小程序开发初学者在完成前端基础学习后进行练手学习项目。##功能亮点：计数器、敲击震动效果、设置面板（自定义漂浮文字内容、可选择文字颜色、可选择木鱼样式）一、界面展示二、功能介绍自动计数木鱼敲击动画文字上飘动画敲击震动设置面板自定义漂浮文字可选择字体颜色可选择木鱼样式三、核心代码setting(){this.setData({isSetting:t</div>
                    </li>
                    <li><a href="/article/1933066952893329408.htm"
                           title="前端基础知识ES6系列 - 03（数组新增了哪些扩展）" target="_blank">前端基础知识ES6系列 - 03（数组新增了哪些扩展）</a>
                        <span class="text-muted">前端小白从0开始</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/es6/1.htm">es6</a><a class="tag" taget="_blank" href="/search/ecmascript/1.htm">ecmascript</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a>
                        <div>一、扩展运算符的应用ES6通过扩展元素符...，好比rest参数的逆运算，将一个数组转为用逗号分隔的参数序列console.log(...[1,2,3])//123console.log(1,...[2,3,4],5)//12345[...document.querySelectorAll('div')]//[,,]主要用于函数调用的时候，将一个数组变为参数序列functionpush(array</div>
                    </li>
                    <li><a href="/article/1932768285875564544.htm"
                           title="MFE微前端基础版：Angular + Module Federation + webpack + 路由（Route way）完整示例" target="_blank">MFE微前端基础版：Angular + Module Federation + webpack + 路由（Route way）完整示例</a>
                        <span class="text-muted">crary,记忆</span>
<a class="tag" taget="_blank" href="/search/%E5%BE%AE%E5%89%8D%E7%AB%AF-MFE/1.htm">微前端-MFE</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/webpack/1.htm">webpack</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/angular/1.htm">angular</a>
                        <div>1.项目结构microfrontend-demo/├──shell/#主应用(Shell)├──mfe1/#微前端应用1├──mfe2/#微前端应用2└──shared/#共享库2.主应用(Shell)配置shell/webpack.config.jsconstModuleFederationPlugin=require("webpack/lib/container/ModuleFederatio</div>
                    </li>
                    <li><a href="/article/1932378682328936448.htm"
                           title="javascript常见100问|前端基础知识|13-14-options 请求Restful-API-method前端知识体系14-总结，软技能是否看过红宝书code review CR 检查什么" target="_blank">javascript常见100问|前端基础知识|13-14-options 请求Restful-API-method前端知识体系14-总结，软技能是否看过红宝书code review CR 检查什么</a>
                        <span class="text-muted">学习记录wanxiaowan</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E5%85%AB%E8%82%A1%E6%96%87/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/restful/1.htm">restful</a>
                        <div>14-options请求题目跨域为何需要options请求？跨域浏览器同源策略，默认限制跨域请求。跨域的解决方案jsonpCORS//CORS配置允许跨域（服务端）response.setHeader("Access-Control-Allow-Origin","http://localhost:8011")//或者'*'response.</div>
                    </li>
                    <li><a href="/article/1929846201159577600.htm"
                           title="2024年网络安全最全什么情况，听说网络安全工程师已经没落？_网络工程师现在废了" target="_blank">2024年网络安全最全什么情况，听说网络安全工程师已经没落？_网络工程师现在废了</a>
                        <span class="text-muted">2401_84264536</span>
<a class="tag" taget="_blank" href="/search/web%E5%AE%89%E5%85%A8/1.htm">web安全</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C/1.htm">网络</a><a class="tag" taget="_blank" href="/search/%E5%AE%89%E5%85%A8/1.htm">安全</a>
                        <div>数据库基础基础阶段的最后一部分，可以来接触一些数据库的基础知识了。这个阶段主要学一些理论知识，重点掌握库、表、索引等概念，然后学习SQL的编写，学会增删改查数据。暂时不用编程来操作数据库。青铜（筑基期）度过了石器时代，你已经储备了一些计算机的基础知识：操作系统的使用，网络协议，前端基础，数据库初识，但这距离做网络安全还不够，在第二个青铜阶段，你还需要再进一步学习基础，在第一阶段之上，难度会开始慢慢</div>
                    </li>
                    <li><a href="/article/1929143052128022528.htm"
                           title="TCP和UDP协议之间的区别，前端基础面试题" target="_blank">TCP和UDP协议之间的区别，前端基础面试题</a>
                        <span class="text-muted">天渺工作室</span>
<a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C%E7%9F%A5%E8%AF%86/1.htm">网络知识</a><a class="tag" taget="_blank" href="/search/TCP%E5%92%8CUDP/1.htm">TCP和UDP</a><a class="tag" taget="_blank" href="/search/tcp/1.htm">tcp</a><a class="tag" taget="_blank" href="/search/udp/1.htm">udp</a>
                        <div>前端基础面试题,TCP和UDP协议之间的区别tcp和udp作为传输层的两个协议,主要区别:1，tcp是面向链接的,（http协议握手）就类似打电话要先建立拨号，在进行链接。而udp在发送前不需要建立链接，直接发送（不在乎接收端是否完全接收到）。2，tcp可传输可靠服务,能保证数据传输的无差错，不丢失，不重复，且按序到达。而udp只是尽最大努力进行传输，不能保证传输是否可靠。3，基于上面两条的原因，</div>
                    </li>
                    <li><a href="/article/1928839209561419776.htm"
                           title="Python就业方向有哪些？" target="_blank">Python就业方向有哪些？</a>
                        <span class="text-muted">IT-博通哥</span>
<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>Python作为一门通用、易学且功能强大的编程语言，在多个领域都有广泛的应用，因此就业方向也非常多样化。以下是Python主要的就业方向及相关技能要求。1.Web开发岗位：PythonWeb开发工程师、后端工程师、全栈工程师技术栈：框架：Django、Flask、FastAPI数据库：PostgreSQL、MySQL、MongoDB前端基础：HTML/CSS/JavaScript（配合Vue/Re</div>
                    </li>
                    <li><a href="/article/1928367035339829248.htm"
                           title="前端基础入门三大核心之JS篇 —— JavaScript编写油猴脚本：让浏览器做你的私人定制助手【含代码示例】" target="_blank">前端基础入门三大核心之JS篇 —— JavaScript编写油猴脚本：让浏览器做你的私人定制助手【含代码示例】</a>
                        <span class="text-muted">DTcode7</span>
<a class="tag" taget="_blank" href="/search/HTML%E7%BD%91%E7%AB%99%E5%BC%80%E5%8F%91/1.htm">HTML网站开发</a><a class="tag" taget="_blank" href="/search/%23/1.htm">#</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E5%9F%BA%E7%A1%80%E5%85%A5%E9%97%A8%E4%B8%89%E5%A4%A7%E6%A0%B8%E5%BF%83%E4%B9%8BJS/1.htm">前端基础入门三大核心之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><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a>
                        <div>前端基础入门三大核心之JS篇——JavaScript编写油猴脚本：让浏览器做你的私人定制助手【含代码示例】油猴脚本：浏览器的魔法外挂安装油猴创建你的第一个脚本基础概念：@match与用户脚本元数据实战演练：给网页添加个性化问候目标代码示例不同角度的使用思路实战技巧与问题排查遇到问题怎么办？结语：你的创意，无界延伸在前端开发的广袤宇宙里，JavaScript（简称JS）是我们手中最闪耀的光剑。而当这</div>
                    </li>
                    <li><a href="/article/1927540809104683008.htm"
                           title="【前端基础】正则表达式 详解" target="_blank">【前端基础】正则表达式 详解</a>
                        <span class="text-muted">前端自习室</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E5%9F%BA%E7%A1%80/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/%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F/1.htm">正则表达式</a>
                        <div>文章目录一、什么是正则表达式？二、为什么要使用正则表达式？三、正则表达式的基本语法与核心概念1.普通字符(LiteralCharacters)2.元字符(Metacharacters)3.字符集合(CharacterSets)4.预定义字符类(PredefinedCharacterClasses/Shorthands)5.量词(Quantifiers)6.分组与捕获(GroupingandCapt</div>
                    </li>
                    <li><a href="/article/1927486714092253184.htm"
                           title="Rust 在前端基建中的使用" target="_blank">Rust 在前端基建中的使用</a>
                        <span class="text-muted">brrdg_sefg</span>
<a class="tag" taget="_blank" href="/search/rust/1.htm">rust</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%8A%B6%E6%80%81%E6%A8%A1%E5%BC%8F/1.htm">状态模式</a>
                        <div>摘要随着前端技术的不断发展，前端基础设施（前端基建）的建设已成为提升开发效率、保障产品质量的关键环节。然而，在应对复杂业务场景与高性能需求时，传统的前端技术栈逐渐暴露出诸多不足。近年来，Rust语言以其独特的优势，在前端基建领域崭露头角。本文将详细说明Rust在当前前端基建中的使用情况，以及其解决传统技术栈不足的方案。文章首先介绍了传统技术栈的不足，包括技术更新速度快、技术栈老旧、JavaScri</div>
                    </li>
                                <li><a href="/article/73.htm"
                                       title="Hadoop(一)" target="_blank">Hadoop(一)</a>
                                    <span class="text-muted">朱辉辉33</span>
<a class="tag" taget="_blank" href="/search/hadoop/1.htm">hadoop</a><a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a>
                                    <div>今天在诺基亚第一天开始培训大数据，因为之前没接触过Linux，所以这次一起学了，任务量还是蛮大的。 
首先下载安装了Xshell软件，然后公司给了账号密码连接上了河南郑州那边的服务器，接下来开始按照给的资料学习，全英文的，头也不讲解，说锻炼我们的学习能力，然后就开始跌跌撞撞的自学。这里写部分已经运行成功的代码吧. 
   在hdfs下，运行hadoop fs -mkdir /u</div>
                                </li>
                                <li><a href="/article/200.htm"
                                       title="maven An error occurred while filtering resources" target="_blank">maven An error occurred while filtering resources</a>
                                    <span class="text-muted">blackproof</span>
<a class="tag" taget="_blank" href="/search/maven/1.htm">maven</a><a class="tag" taget="_blank" href="/search/%E6%8A%A5%E9%94%99/1.htm">报错</a>
                                    <div>转：http://stackoverflow.com/questions/18145774/eclipse-an-error-occurred-while-filtering-resources 
  
maven报错： 
maven An error occurred while filtering resources 
  
Maven -> Update Proje</div>
                                </li>
                                <li><a href="/article/327.htm"
                                       title="jdk常用故障排查命令" target="_blank">jdk常用故障排查命令</a>
                                    <span class="text-muted">daysinsun</span>
<a class="tag" taget="_blank" href="/search/jvm/1.htm">jvm</a>
                                    <div>linux下常见定位命令： 
1、jps      输出Java进程 
      -q       只输出进程ID的名称，省略主类的名称； 
      -m      输出进程启动时传递给main函数的参数； 
    &nb</div>
                                </li>
                                <li><a href="/article/454.htm"
                                       title="java 位移运算与乘法运算" target="_blank">java 位移运算与乘法运算</a>
                                    <span class="text-muted">周凡杨</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E4%BD%8D%E7%A7%BB/1.htm">位移</a><a class="tag" taget="_blank" href="/search/%E8%BF%90%E7%AE%97/1.htm">运算</a><a class="tag" taget="_blank" href="/search/%E4%B9%98%E6%B3%95/1.htm">乘法</a>
                                    <div>  
对于 JAVA 编程中，适当的采用位移运算，会减少代码的运行时间，提高项目的运行效率。这个可以从一道面试题说起：  
   
   问题：  
用最有效率的方法算出2   乘以8   等於几?”        
答案：2 << 3    
由此就引发了我的思考，为什么位移运算会比乘法运算更快呢？其实简单的想想，计算机的内存是用由 0 和 1 组成的二</div>
                                </li>
                                <li><a href="/article/581.htm"
                                       title="java中的枚举(enmu)" target="_blank">java中的枚举(enmu)</a>
                                    <span class="text-muted">g21121</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a>
                                    <div>从jdk1.5开始，java增加了enum(枚举)这个类型，但是大家在平时运用中还是比较少用到枚举的，而且很多人和我一样对枚举一知半解，下面就跟大家一起学习下enmu枚举。先看一个最简单的枚举类型，一个返回类型的枚举： 
public enum ResultType {
	
	/**
	 * 成功
	 */
	SUCCESS,
	/**
	 * 失败
	 */
	FAIL,
	</div>
                                </li>
                                <li><a href="/article/708.htm"
                                       title="MQ初级学习" target="_blank">MQ初级学习</a>
                                    <span class="text-muted">510888780</span>
<a class="tag" taget="_blank" href="/search/activemq/1.htm">activemq</a>
                                    <div>1.下载ActiveMQ 
去官方网站下载：http://activemq.apache.org/ 
 
2.运行ActiveMQ 
解压缩apache-activemq-5.9.0-bin.zip到C盘，然后双击apache-activemq-5.9.0-\bin\activemq-admin.bat运行ActiveMQ程序。 
 
启动ActiveMQ以后，登陆：http://localhos</div>
                                </li>
                                <li><a href="/article/835.htm"
                                       title="Spring_Transactional_Propagation" target="_blank">Spring_Transactional_Propagation</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/transactional/1.htm">transactional</a>
                                    <div>//事务传播属性 
@Transactional(propagation=Propagation.REQUIRED)//如果有事务，那么加入事务，没有的话新创建一个 
@Transactional(propagation=Propagation.NOT_SUPPORTED)//这个方法不开启事务 
@Transactional(propagation=Propagation.REQUIREDS_N</div>
                                </li>
                                <li><a href="/article/962.htm"
                                       title="我的spring学习笔记12-idref与ref的区别" target="_blank">我的spring学习笔记12-idref与ref的区别</a>
                                    <span class="text-muted">aijuans</span>
<a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a>
                                    <div>idref用来将容器内其他bean的id传给<constructor-arg>/<property>元素，同时提供错误验证功能。例如： 
 
<bean id ="theTargetBean" class="..." />
<bean id ="theClientBean" class=&quo</div>
                                </li>
                                <li><a href="/article/1089.htm"
                                       title="Jqplot之折线图" target="_blank">Jqplot之折线图</a>
                                    <span class="text-muted">antlove</span>
<a class="tag" taget="_blank" href="/search/js/1.htm">js</a><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/timeseries/1.htm">timeseries</a><a class="tag" taget="_blank" href="/search/jqplot/1.htm">jqplot</a>
                                    <div>timeseriesChart.html 
<script type="text/javascript" src="jslib/jquery.min.js"></script>  
<script type="text/javascript" src="jslib/excanvas.min.js&</div>
                                </li>
                                <li><a href="/article/1216.htm"
                                       title="JDBC中事务处理应用" target="_blank">JDBC中事务处理应用</a>
                                    <span class="text-muted">百合不是茶</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/JDBC%E7%BC%96%E7%A8%8B/1.htm">JDBC编程</a><a class="tag" taget="_blank" href="/search/%E4%BA%8B%E5%8A%A1%E6%8E%A7%E5%88%B6%E8%AF%AD%E5%8F%A5/1.htm">事务控制语句</a>
                                    <div>  
解释事务的概念; 事务控制是sql语句中的核心之一;事务控制的作用就是保证数据的正常执行与异常之后可以恢复 
  
事务常用命令: 
            Commit提交 
        </div>
                                </li>
                                <li><a href="/article/1343.htm"
                                       title="[转]ConcurrentHashMap Collections.synchronizedMap和Hashtable讨论" target="_blank">[转]ConcurrentHashMap Collections.synchronizedMap和Hashtable讨论</a>
                                    <span class="text-muted">bijian1013</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%A4%9A%E7%BA%BF%E7%A8%8B/1.htm">多线程</a><a class="tag" taget="_blank" href="/search/%E7%BA%BF%E7%A8%8B%E5%AE%89%E5%85%A8/1.htm">线程安全</a><a class="tag" taget="_blank" href="/search/HashMap/1.htm">HashMap</a>
                                    <div>在Java类库中出现的第一个关联的集合类是Hashtable，它是JDK1.0的一部分。 Hashtable提供了一种易于使用的、线程安全的、关联的map功能，这当然也是方便的。然而，线程安全性是凭代价换来的――Hashtable的所有方法都是同步的。此时，无竞争的同步会导致可观的性能代价。Hashtable的后继者HashMap是作为JDK1.2中的集合框架的一部分出现的，它通过提供一个不同步的</div>
                                </li>
                                <li><a href="/article/1470.htm"
                                       title="ng-if与ng-show、ng-hide指令的区别和注意事项" target="_blank">ng-if与ng-show、ng-hide指令的区别和注意事项</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/AngularJS/1.htm">AngularJS</a>
                                    <div>        angularJS中的ng-show、ng-hide、ng-if指令都可以用来控制dom元素的显示或隐藏。ng-show和ng-hide根据所给表达式的值来显示或隐藏HTML元素。当赋值给ng-show指令的值为false时元素会被隐藏，值为true时元素会显示。ng-hide功能类似，使用方式相反。元素的显示或</div>
                                </li>
                                <li><a href="/article/1597.htm"
                                       title="【持久化框架MyBatis3七】MyBatis3定义typeHandler" target="_blank">【持久化框架MyBatis3七】MyBatis3定义typeHandler</a>
                                    <span class="text-muted">bit1129</span>
<a class="tag" taget="_blank" href="/search/TypeHandler/1.htm">TypeHandler</a>
                                    <div>什么是typeHandler? 
typeHandler用于将某个类型的数据映射到表的某一列上，以完成MyBatis列跟某个属性的映射 
  内置typeHandler 
MyBatis内置了很多typeHandler，这写typeHandler通过org.apache.ibatis.type.TypeHandlerRegistry进行注册，比如对于日期型数据的typeHandler， </div>
                                </li>
                                <li><a href="/article/1724.htm"
                                       title="上传下载文件rz,sz命令" target="_blank">上传下载文件rz,sz命令</a>
                                    <span class="text-muted">bitcarter</span>
<a class="tag" taget="_blank" href="/search/linux%E5%91%BD%E4%BB%A4rz/1.htm">linux命令rz</a>
                                    <div>刚开始使用rz上传和sz下载命令： 
因为我们是通过secureCRT终端工具进行使用的所以会有上传下载这样的需求： 
 
我遇到的问题： 
sz下载A文件10M左右，没有问题 
但是将这个文件A再传到另一天服务器上时就出现传不上去，甚至出现乱码，死掉现象，具体问题 
 
解决方法： 
上传命令改为;rz -ybe 
下载命令改为：sz -be filename 
 
如果还是有问题： 
那就是文</div>
                                </li>
                                <li><a href="/article/1851.htm"
                                       title="通过ngx-lua来统计nginx上的虚拟主机性能数据" target="_blank">通过ngx-lua来统计nginx上的虚拟主机性能数据</a>
                                    <span class="text-muted">ronin47</span>
<a class="tag" taget="_blank" href="/search/ngx-lua%E3%80%80%E7%BB%9F%E8%AE%A1+%E8%A7%A3%E7%A6%81ip/1.htm">ngx-lua　统计 解禁ip</a>
                                    <div>介绍 
以前我们为nginx做统计,都是通过对日志的分析来完成.比较麻烦,现在基于ngx_lua插件,开发了实时统计站点状态的脚本,解放生产力.项目主页: https://github.com/skyeydemon/ngx-lua-stats 功能 
 
 支持分不同虚拟主机统计, 同一个虚拟主机下可以分不同的location统计. 
 可以统计与query-times request-time </div>
                                </li>
                                <li><a href="/article/1978.htm"
                                       title="java-68-把数组排成最小的数。一个正整数数组，将它们连接起来排成一个数，输出能排出的所有数字中最小的。例如输入数组{32, 321}，则输出32132" target="_blank">java-68-把数组排成最小的数。一个正整数数组，将它们连接起来排成一个数，输出能排出的所有数字中最小的。例如输入数组{32, 321}，则输出32132</a>
                                    <span class="text-muted">bylijinnan</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a>
                                    <div>
import java.util.Arrays;
import java.util.Comparator;

public class MinNumFromIntArray {

	/**
	 * Q68输入一个正整数数组，将它们连接起来排成一个数，输出能排出的所有数字中最小的一个。
	 * 例如输入数组{32,  321}，则输出这两个能排成的最小数字32132。请给出解决问题</div>
                                </li>
                                <li><a href="/article/2105.htm"
                                       title="Oracle基本操作" target="_blank">Oracle基本操作</a>
                                    <span class="text-muted">ccii</span>
<a class="tag" taget="_blank" href="/search/Oracle+SQL%E6%80%BB%E7%BB%93/1.htm">Oracle SQL总结</a><a class="tag" taget="_blank" href="/search/Oracle+SQL%E8%AF%AD%E6%B3%95/1.htm">Oracle SQL语法</a><a class="tag" taget="_blank" href="/search/Oracle%E5%9F%BA%E6%9C%AC%E6%93%8D%E4%BD%9C/1.htm">Oracle基本操作</a><a class="tag" taget="_blank" href="/search/Oracle+SQL/1.htm">Oracle SQL</a>
                                    <div>一、表操作 
 
1. 常用数据类型 
NUMBER(p,s)：可变长度的数字。p表示整数加小数的最大位数，s为最大小数位数。支持最大精度为38位 
NVARCHAR2(size)：变长字符串，最大长度为4000字节（以字符数为单位） 
VARCHAR2(size)：变长字符串，最大长度为4000字节（以字节数为单位） 
CHAR(size)：定长字符串，最大长度为2000字节，最小为1字节，默认</div>
                                </li>
                                <li><a href="/article/2232.htm"
                                       title="[强人工智能]实现强人工智能的路线图" target="_blank">[强人工智能]实现强人工智能的路线图</a>
                                    <span class="text-muted">comsci</span>
<a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a>
                                    <div> 
    1：创建一个用于记录拓扑网络连接的矩阵数据表 
     2:自动构造或者人工复制一个包含10万个连接(1000*1000)的流程图 
     3：将这个流程图导入到矩阵数据表中 
     4：在矩阵的每个有意义的节点中嵌入一段简单的</div>
                                </li>
                                <li><a href="/article/2359.htm"
                                       title="给Tomcat，Apache配置gzip压缩(HTTP压缩)功能" target="_blank">给Tomcat，Apache配置gzip压缩(HTTP压缩)功能</a>
                                    <span class="text-muted">cwqcwqmax9</span>
<a class="tag" taget="_blank" href="/search/apache/1.htm">apache</a>
                                    <div>背景： 
HTTP 压缩可以大大提高浏览网站的速度，它的原理是，在客户端请求网页后，从服务器端将网页文件压缩，再下载到客户端，由客户端的浏览器负责解压缩并浏览。相对于普通的浏览过程HTML ,CSS,Javascript , Text ，它可以节省40%左右的流量。更为重要的是，它可以对动态生成的，包括CGI、PHP , JSP , ASP , Servlet,SHTML等输出的网页也能进行压缩，</div>
                                </li>
                                <li><a href="/article/2486.htm"
                                       title="SpringMVC and Struts2" target="_blank">SpringMVC and Struts2</a>
                                    <span class="text-muted">dashuaifu</span>
<a class="tag" taget="_blank" href="/search/struts2/1.htm">struts2</a><a class="tag" taget="_blank" href="/search/springMVC/1.htm">springMVC</a>
                                    <div>SpringMVC  VS Struts2

1:
spring3开发效率高于struts
2:
spring3 mvc可以认为已经100%零配置
3:
struts2是类级别的拦截， 一个类对应一个request上下文，
springmvc是方法级别的拦截，一个方法对应一个request上下文，而方法同时又跟一个url对应
所以说从架构本身上 spring3 mvc就容易实现r</div>
                                </li>
                                <li><a href="/article/2613.htm"
                                       title="windows常用命令行命令" target="_blank">windows常用命令行命令</a>
                                    <span class="text-muted">dcj3sjt126com</span>
<a class="tag" taget="_blank" href="/search/windows/1.htm">windows</a><a class="tag" taget="_blank" href="/search/cmd/1.htm">cmd</a><a class="tag" taget="_blank" href="/search/command/1.htm">command</a>
                                    <div>在windows系统中，点击开始－运行，可以直接输入命令行，快速打开一些原本需要多次点击图标才能打开的界面，如常用的输入cmd打开dos命令行，输入taskmgr打开任务管理器。此处列出了网上搜集到的一些常用命令。winver 检查windows版本 wmimgmt.msc 打开windows管理体系结构(wmi) wupdmgr windows更新程序 wscrip</div>
                                </li>
                                <li><a href="/article/2740.htm"
                                       title="再看知名应用背后的第三方开源项目" target="_blank">再看知名应用背后的第三方开源项目</a>
                                    <span class="text-muted">dcj3sjt126com</span>
<a class="tag" taget="_blank" href="/search/ios/1.htm">ios</a>
                                    <div>知名应用程序的设计和技术一直都是开发者需要学习的，同样这些应用所使用的开源框架也是不可忽视的一部分。此前《 
iOS第三方开源库的吐槽和备忘》中作者ibireme列举了国内多款知名应用所使用的开源框架，并对其中一些框架进行了分析，同样国外开发者 
@iOSCowboy也在博客中给我们列出了国外多款知名应用使用的开源框架。另外txx's blog中详细介绍了 
Facebook Paper使用的第三</div>
                                </li>
                                <li><a href="/article/2867.htm"
                                       title="Objective-c单例模式的正确写法" target="_blank">Objective-c单例模式的正确写法</a>
                                    <span class="text-muted">jsntghf</span>
<a class="tag" taget="_blank" href="/search/%E5%8D%95%E4%BE%8B/1.htm">单例</a><a class="tag" taget="_blank" href="/search/ios/1.htm">ios</a><a class="tag" taget="_blank" href="/search/iPhone/1.htm">iPhone</a>
                                    <div>一般情况下，可能我们写的单例模式是这样的： 
#import <Foundation/Foundation.h>

@interface Downloader : NSObject

+ (instancetype)sharedDownloader;

@end


#import "Downloader.h"

@implementation</div>
                                </li>
                                <li><a href="/article/2994.htm"
                                       title="jquery easyui datagrid 加载成功，选中某一行" target="_blank">jquery easyui datagrid 加载成功，选中某一行</a>
                                    <span class="text-muted">hae</span>
<a class="tag" taget="_blank" href="/search/jquery/1.htm">jquery</a><a class="tag" taget="_blank" href="/search/easyui/1.htm">easyui</a><a class="tag" taget="_blank" href="/search/datagrid/1.htm">datagrid</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%8A%A0%E8%BD%BD/1.htm">数据加载</a>
                                    <div>1.首先你需要设置datagrid的onLoadSuccess   
$( 
'#dg' 
).datagrid({onLoadSuccess :  
function 
(data){   
     
$( 
'#dg' 
).datagrid( 
'selectRow' 
,3);   
}});       
2.onL</div>
                                </li>
                                <li><a href="/article/3121.htm"
                                       title="jQuery用户数字打分评价效果" target="_blank">jQuery用户数字打分评价效果</a>
                                    <span class="text-muted">ini</span>
<a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><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/css/1.htm">css</a>
                                    <div>效果体验：http://hovertree.com/texiao/jquery/5.htmHTML文件代码： 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery用户数字打分评分代码 - HoverTree</</div>
                                </li>
                                <li><a href="/article/3248.htm"
                                       title="mybatis的paramType" target="_blank">mybatis的paramType</a>
                                    <span class="text-muted">kerryg</span>
<a class="tag" taget="_blank" href="/search/DAO/1.htm">DAO</a><a class="tag" taget="_blank" href="/search/sql/1.htm">sql</a>
                                    <div>MyBatis传多个参数： 
1、采用#{0},#{1}获得参数： 
   Dao层函数方法： 
    public User selectUser(String name,String area); 
 对应的Mapper.xml 
   <select id="selectUser" result</div>
                                </li>
                                <li><a href="/article/3375.htm"
                                       title="centos 7安装mysql5.5" target="_blank">centos 7安装mysql5.5</a>
                                    <span class="text-muted">MrLee23</span>
<a class="tag" taget="_blank" href="/search/centos/1.htm">centos</a>
                                    <div>首先centos7 已经不支持mysql，因为收费了你懂得，所以内部集成了mariadb，而安装mysql的话会和mariadb的文件冲突，所以需要先卸载掉mariadb，以下为卸载mariadb，安装mysql的步骤。 
  
#列出所有被安装的rpm package rpm -qa | grep mariadb 
  
#卸载 
rpm -e mariadb-libs-5.</div>
                                </li>
                                <li><a href="/article/3502.htm"
                                       title="利用thrift来实现消息群发" target="_blank">利用thrift来实现消息群发</a>
                                    <span class="text-muted">qifeifei</span>
<a class="tag" taget="_blank" href="/search/thrift/1.htm">thrift</a>
                                    <div>           Thrift项目一般用来做内部项目接偶用的，还有能跨不同语言的功能，非常方便，一般前端系统和后台server线上都是3个节点，然后前端通过获取client来访问后台server，那么如果是多太server，就是有一个负载均衡的方法，然后最后访问其中一个节点。那么换个思路，能不能发送给所有节点的server呢，如果能就</div>
                                </li>
                                <li><a href="/article/3629.htm"
                                       title="实现一个sizeof获取Java对象大小" target="_blank">实现一个sizeof获取Java对象大小</a>
                                    <span class="text-muted">teasp</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/HotSpot/1.htm">HotSpot</a><a class="tag" taget="_blank" href="/search/%E5%86%85%E5%AD%98/1.htm">内存</a><a class="tag" taget="_blank" href="/search/%E5%AF%B9%E8%B1%A1%E5%A4%A7%E5%B0%8F/1.htm">对象大小</a><a class="tag" taget="_blank" href="/search/sizeof/1.htm">sizeof</a>
                                    <div>   由于Java的设计者不想让程序员管理和了解内存的使用，我们想要知道一个对象在内存中的大小变得比较困难了。本文提供了可以获取对象的大小的方法，但是由于各个虚拟机在内存使用上可能存在不同，因此该方法不能在各虚拟机上都适用，而是仅在hotspot 32位虚拟机上，或者其它内存管理方式与hotspot 32位虚拟机相同的虚拟机上 适用。 
  
  </div>
                                </li>
                                <li><a href="/article/3756.htm"
                                       title="SVN错误及处理" target="_blank">SVN错误及处理</a>
                                    <span class="text-muted">xiangqian0505</span>
<a class="tag" taget="_blank" href="/search/SVN%E6%8F%90%E4%BA%A4%E6%96%87%E4%BB%B6%E6%97%B6%E6%9C%8D%E5%8A%A1%E5%99%A8%E5%BC%BA%E8%A1%8C%E5%85%B3%E9%97%AD/1.htm">SVN提交文件时服务器强行关闭</a>
                                    <div>在SVN服务控制台打开资源库“SVN无法读取current” ---摘自网络 写道   SVN无法读取current修复方法 Can't read file : End of file found 
 
文件：repository/db/txn_current、repository/db/current 
  
其中current记录当前最新版本号，txn_current记录版本库中版本</div>
                                </li>
                </ul>
            </div>
        </div>
    </div>

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





</body>

</html>