一剑飘雪丶
前端技术分享之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/1835065671130640384.htm"
                           title="前端基础面试题·第三篇——JavaScript（其二）" target="_blank">前端基础面试题·第三篇——JavaScript（其二）</a>
                        <span class="text-muted">DT——</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95/1.htm">前端面试</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a>
                        <div>1.深浅拷贝1.浅拷贝浅拷贝会创建一个新的对象，这个对象有着原始对象属性值的一份精确拷贝。如果属性是基本类型，拷贝的就是基本类型的值，如果属性是引用类型，拷贝就是改引用类型的地址。//常见的浅拷贝1.Object.assign({},obj)//对象浅拷贝assign⽅法可以⽤于处理数组，不过会把数组视为对象，⽐如这⾥会把⽬标数组视为是属性为0、1、2的对象，所以源数组的0、1属性的值覆盖了⽬标对</div>
                    </li>
                    <li><a href="/article/1833899249880887296.htm"
                           title="VUE3学习路线" target="_blank">VUE3学习路线</a>
                        <span class="text-muted">蜡笔小新星</span>
<a class="tag" taget="_blank" href="/search/Vue/1.htm">Vue</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/vue/1.htm">vue</a><a class="tag" taget="_blank" href="/search/%E7%BB%8F%E9%AA%8C%E5%88%86%E4%BA%AB/1.htm">经验分享</a>
                        <div>以下是一份详细的Vue3学习路线，涵盖从基础到进阶的各个方面，以帮助你系统掌握Vue3开发。第一阶段：基础知识理解前端基础HTML:了解文档结构，常用标签，语义化HTML。CSS:学习选择器、布局、Flexbox和Grid，基本的样式应用。JavaScript:理解基本语法、DOM操作、事件处理、异步编程（Promises,async/await），以及ES6+特性（如箭头函数、解构赋值、模块化）</div>
                    </li>
                    <li><a href="/article/1833678867869560832.htm"
                           title="前端基础知识点" target="_blank">前端基础知识点</a>
                        <span class="text-muted">der..</span>
<a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a>
                        <div>本人现在是一名准大二计算机系的学生，准备开始写博客，一方面是想在csdn留下自己的足迹，另一方面是想通过写博客来提高自己的能力。以后会分享一些学习心得，程序代码，以及我的一些学习计划，还有每天学习后的知识总结。如果你和我一样，不甘于平凡，那么，就请给我点一个关注，我们互相交流，共同进步。--------------------------------------------------------</div>
                    </li>
                    <li><a href="/article/1833602711271075840.htm"
                           title="前端基础面试题·第三篇——JavaScript（其四）" target="_blank">前端基础面试题·第三篇——JavaScript（其四）</a>
                        <span class="text-muted">DT——</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95/1.htm">前端面试</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a>
                        <div>highlight:atom-one-dark1.JSON.stringifyJSON.stringify()方法将一个JavaScript值（对象或者数组）转换为一个JSON字符串，如果指定了一个replacer函数，则可以替换值。语法：JSON.stringify(value,replacer,space)参数value：要转换的值。replacer：替换值，可以是一个函数或者数组。（这个参数</div>
                    </li>
                    <li><a href="/article/1833602459067576320.htm"
                           title="前端基础面试题·第二篇——CSS（其一）" target="_blank">前端基础面试题·第二篇——CSS（其一）</a>
                        <span class="text-muted">DT——</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95/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/css/1.htm">css</a>
                        <div>1.伪类与伪元素伪类，是用来描述元素的一个状态，比如第一个元素，元素被鼠标覆盖等等状态，写法为：伪元素，用于设置一个元素的特殊状态的一部分，写法为::伪元素于伪类：伪元素：::before::after::first-line伪类：:hover:active:focus:nth-child(n)2.单位px:像素，绝对单位em:相对单位，相对于父元素字体大小rem:相对单位，相对于根元素html的</div>
                    </li>
                    <li><a href="/article/1833600190687309824.htm"
                           title="前端基础面试题·第二篇——CSS（其二）" target="_blank">前端基础面试题·第二篇——CSS（其二）</a>
                        <span class="text-muted">DT——</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95/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/css/1.htm">css</a>
                        <div>1.CSS选择器的优先性：！important-强制生效样式-有即生效行内样式-有即生效权重：1000id选择器权重：100类选择器，伪类，属性选择器权重：10元素选择器，伪元素选择器，权重：1通配符，兄弟，后代，子代，权重：02.CSS继承性1.继承属性：1.字体系列属性font,font-family,font-weight,font-size,font-style,font-variant等</div>
                    </li>
                    <li><a href="/article/1833525688494288896.htm"
                           title="web前端基础——第八章" target="_blank">web前端基础——第八章</a>
                        <span class="text-muted">ZiminLi</span>
<a class="tag" taget="_blank" href="/search/%E6%8A%80%E6%9C%AF%E6%A0%88%E7%AC%94%E8%AE%B0/1.htm">技术栈笔记</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a>
                        <div>目录八十五、对象的简介和基本操作八十六、属性名和属性值八十七、基本数据类型和引用数据类型八十八、对象字面量八十九、函数的简介九十、函数的参数九十一、函数的返回值九十二、实参可以是任何值九十三、返回值的类型九十四、立即执行函数九十五、方法九十六、枚举对象中的属性九十七、作用域（Scope）全局作用域变量的声明提前函数作用域九十八、this九十九、使用工厂方法创建对象一百、构造函数一百零一、原型对象一</div>
                    </li>
                    <li><a href="/article/1833053265667911680.htm"
                           title="python前端开发基础" target="_blank">python前端开发基础</a>
                        <span class="text-muted">GRKF15</span>
<a class="tag" taget="_blank" href="/search/python-%E5%89%8D%E7%AB%AF/1.htm">python-前端</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
                        <div>1.Python前端基础教程概述Python作为一门多用途的编程语言，近年来在前端开发领域也展现出了其独特的优势。以下是对Python前端基础教程的概述，包括主要概念、工具和实践方法。1.1Python在前端开发中的应用Python在前端开发中的应用主要体现在以下几个方面：自动化测试：使用Python编写自动化测试脚本，提高测试效率。Web开发框架：利用Flask和Django等框架快速搭建Web</div>
                    </li>
                    <li><a href="/article/1831926707498610688.htm"
                           title="350页前端校招面试题直击大厂：前端基础、前端核心、计算机基础、项目、Hr面" target="_blank">350页前端校招面试题直击大厂：前端基础、前端核心、计算机基础、项目、Hr面</a>
                        <span class="text-muted">2401_86400095</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
                        <div>**1.HTML2.CSS3.前端基础4.前端核心5.前端进阶6.移动端开发7.计算机基础8.算法与数据结构9.设计模式10.项目11.职业发展12.Hr面**正文HTML1.浏览器页面有哪三层构成，分别是什么，作用是什么?2.HTML5的优点与缺点？3.Doctype作用?严格模式与混杂模式如何区分？它们有何意义?4.HTML5有哪些新特性、移除了哪些元素？5.你做的网页在哪些浏览器测试过,这些</div>
                    </li>
                    <li><a href="/article/1831790574148087808.htm"
                           title="盘点简洁好用的8款静态网站搭建框架，小白易上手" target="_blank">盘点简洁好用的8款静态网站搭建框架，小白易上手</a>
                        <span class="text-muted">AI码上来</span>
<a class="tag" taget="_blank" href="/search/AI/1.htm">AI</a><a class="tag" taget="_blank" href="/search/%E5%B7%A5%E5%85%B7/1.htm">工具</a><a class="tag" taget="_blank" href="/search/%E6%90%AD%E5%BB%BA%E7%BD%91%E7%AB%99/1.htm">搭建网站</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
                        <div>后台有个小伙伴最近接了一个私活，找了一个开源的静态网站框架，给一个小公司做了一个官网，部署到服务器上，顺手就赚了几千块钱。你眼红不？相对动态网站，静态网站不需要和后端的交互逻辑，所以只要有点前端基础都可以搞定。即使没有任何前端基础，也没问题，咱不是有GPT么？今天，就先给大家来盘点一下那些年简洁好用的静态网站框架。后续看情况给大家展示下：如何借助GPT+静态网站框架，搭建并部署一个网站。1.Wor</div>
                    </li>
                    <li><a href="/article/1830398960100012032.htm"
                           title="前端基础入门三大核心之HTML篇：深入解析PNG8、PNG16、PNG24与PNG32的差异及网页应用指南" target="_blank">前端基础入门三大核心之HTML篇：深入解析PNG8、PNG16、PNG24与PNG32的差异及网页应用指南</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%8Bhtml/1.htm">前端基础入门三大核心之html</a><a class="tag" taget="_blank" href="/search/HTML5/1.htm">HTML5</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/web/1.htm">web</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E4%B8%89%E5%A4%A7%E6%A0%B8%E5%BF%83/1.htm">前端三大核心</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E9%A1%B5%E5%BC%80%E5%8F%91/1.htm">网页开发</a>
                        <div>前端基础入门三大核心之HTML篇：深入解析PNG8、PNG16、PNG24与PNG32的差异及网页应用指南基础概念与作用说明PNG8PNG16PNG24PNG32代码示例与使用场景PNG8示例PNG24示例PNG32示例性能优化与最佳实践防范漏洞提示结语与讨论在网页设计与前端开发中，选择合适的图像格式是至关重要的一步，它直接关系到页面加载速度、视觉效果乃至用户体验。PNG作为一种广泛应用的图像格式</div>
                    </li>
                    <li><a href="/article/1830033034842304512.htm"
                           title="前端基础整理 | require / exports / import / export" target="_blank">前端基础整理 | require / exports / import / export</a>
                        <span class="text-muted">格致匠心</span>

                        <div>一、模块规范一句话总结：CommonJs用于服务端Node.js中，AMD和CMD是针对客户端的规范，为了不让引入依赖阻塞了代码进行，使用了异步加载模块。1.CommonJs：适用区域：用于服务端。导入：require导出：module.exports，exports。exports与module.exportsexports是module.exports的引用，varexports=module</div>
                    </li>
                    <li><a href="/article/1829012848999755776.htm"
                           title="【前端基础篇】JavaScript之jQuery介绍" target="_blank">【前端基础篇】JavaScript之jQuery介绍</a>
                        <span class="text-muted">Trouvaille ~</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/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/jquery/1.htm">jquery</a><a class="tag" taget="_blank" href="/search/%E4%BA%8B%E4%BB%B6/1.htm">事件</a><a class="tag" taget="_blank" href="/search/%E9%80%89%E6%8B%A9%E5%99%A8/1.htm">选择器</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a>
                        <div>文章目录前言JQuery基本介绍和使用方法引入依赖jQuery语法jQuery选择器jQuery事件操作元素获取/设置元素内容获取/设置元素属性获取/返回css属性添加元素删除元素总结：常用的jQuery方法-详细解释与示例事件处理拓展-详细解释与示例其他拓展内容前言在阅读过程中可以把代码片复制到vscode上去浏览器看实际效果，更易理解喔JQuery基本介绍和使用方法W3C标准给我们提供了⼀系列</div>
                    </li>
                    <li><a href="/article/1827891016699572224.htm"
                           title="后端程序员的前端基础-前端三剑客之JavaScript" target="_blank">后端程序员的前端基础-前端三剑客之JavaScript</a>
                        <span class="text-muted">yinying293</span>
<a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AF%E7%A8%8B%E5%BA%8F%E5%91%98%E7%9A%84%E5%89%8D%E7%AB%AF%E8%B7%AF%E7%BA%BF/1.htm">后端程序员的前端路线</a><a class="tag" taget="_blank" href="/search/Java/1.htm">Java</a><a class="tag" taget="_blank" href="/search/%23/1.htm">#</a><a class="tag" taget="_blank" href="/search/JavaWeb/1.htm">JavaWeb</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a>
                        <div>后端程序员工作中需要用的前端技术，内容精简极致，目标核心掌握即可本模块分三部分，另外两篇请戳→后端程序员的前端基础-前端三剑客之一：HTML后端程序员的前端基础-前端三剑客之二:CSS后端程序员的前端基础-前端三剑客之三:本篇文章目录1JavaScript简介1.1JavaScript简介1.2JavaScript组成部分1.3JavaScript发展史2JavaScript基本语法2.1JS的引</div>
                    </li>
                    <li><a href="/article/1827885595234496512.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>
                        <div>Web标准：由W3C（万维网联盟）制定HTML:超文本标记语言，负责网页结构（页面元素和内容）CSS：层叠样式表，负责网页的表现（页面元素的外观，位置等）JavaScript：负责网页的行为（交互效果）</div>
                    </li>
                    <li><a href="/article/1827878790756397056.htm"
                           title="【前端基础篇】JavaScript之BOM介绍" target="_blank">【前端基础篇】JavaScript之BOM介绍</a>
                        <span class="text-muted">Trouvaille ~</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/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/microsoft/1.htm">microsoft</a><a class="tag" taget="_blank" href="/search/BOM/1.htm">BOM</a><a class="tag" taget="_blank" href="/search/Window/1.htm">Window</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>文章目录浏览器对象模型（BOM）介绍1.什么是BOM？2.Window对象2.1弹出框2.1.1警告框2.1.2确认框2.1.3提示框2.2定时事件2.2.1延时器2.2.2定时器2.3Window对象其他常用属性与方法2.3.1获取窗口尺寸2.3.2打开新窗口与关闭窗口2.3.3移动与调整窗口大小3.Navigator对象3.1判断浏览器类型3.2navigator对象及方法详细解释：4.Loc</div>
                    </li>
                    <li><a href="/article/1826286846175440896.htm"
                           title="如何学好uni-app" target="_blank">如何学好uni-app</a>
                        <span class="text-muted">梨园猫</span>
<a class="tag" taget="_blank" href="/search/uni-app/1.htm">uni-app</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/%E9%9D%92%E5%B0%91%E5%B9%B4%E7%BC%96%E7%A8%8B/1.htm">青少年编程</a>
                        <div>学习uni-app需要掌握以下技能：1.前端基础：熟悉HTML、CSS和JavaScript等前端开发技术，了解基本的前端框架如Vue.js。2.Vue.js：因为uni-app是基于Vue.js构建的，所以需要对Vue.js有深入的理解。可以先通过官方文档或者一些在线课程来学习Vue.js的基础知识。3.uni-app官方文档：阅读并理解uni-app的官方文档是非常重要的，它包含了所有关于un</div>
                    </li>
                    <li><a href="/article/1760571013386522624.htm"
                           title="前端基础：CSS字体属性" target="_blank">前端基础：CSS字体属性</a>
                        <span class="text-muted">曹莓奶昔</span>
<a class="tag" taget="_blank" href="/search/CSS/1.htm">CSS</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/css3/1.htm">css3</a><a class="tag" taget="_blank" href="/search/vscode/1.htm">vscode</a><a class="tag" taget="_blank" href="/search/visual/1.htm">visual</a><a class="tag" taget="_blank" href="/search/studio/1.htm">studio</a><a class="tag" taget="_blank" href="/search/code/1.htm">code</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
                        <div>目录1.字体系列2.字体大小3.字体粗细4.字体样式5.字体复合属性6.字体属性总结cssfonts（字体）属性用于字体系列、大小、粗细、文字样式（如斜体）。1.字体系列css使用font-family属性定义字体。P{font-family:"微软雅黑/MicrosoftYaHei";}各个字体之间必须用英文的逗号隔开空格隔开的多个单词组成的字体，加引号尽量使用系统默认字体，保证在任何用户的浏览</div>
                    </li>
                    <li><a href="/article/1759865687255379968.htm"
                           title="前端基础部分习题" target="_blank">前端基础部分习题</a>
                        <span class="text-muted">琼花霰</span>
<a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/js/1.htm">js</a><a class="tag" taget="_blank" href="/search/vue/1.htm">vue</a><a class="tag" taget="_blank" href="/search/%E5%B0%8F%E7%A8%8B%E5%BA%8F/1.htm">小程序</a>
                        <div>1/HTML1.DOCTYPE的作用是什么？标准模式与兼容模式各有什么区别?声明文档的解析类型(document.compatMode)，避免浏览器的怪异模式。!DOCTYPE是一种标准通用标记语言的文档类型声明，它的目的是要告诉浏览器它应该使用什么样的文档类型定义（DTD）来解析文档。标准模式，浏览器按照W3C的标准解析渲染页面，这样一来，你的页面在所有的浏览器里显示的就都是一个样子了。标准模式</div>
                    </li>
                    <li><a href="/article/1759827048731340800.htm"
                           title="一起来使用node.js制作一个视频吧" target="_blank">一起来使用node.js制作一个视频吧</a>
                        <span class="text-muted"></span>

                        <div>theme:fancyTNTWeb-全称腾讯新闻前端团队，组内小伙伴在Web前端、NodeJS开发、UI设计、移动APP等大前端领域都有所实践和积累。目前团队主要支持腾讯新闻各业务的前端开发，业务开发之余也积累沉淀了一些前端基础设施，赋能业务提效和产品创新。团队倡导开源共建，拥有各种技术大牛，团队Github地址：https://github.com/tnfe今天为大家介绍FFCreator，项目</div>
                    </li>
                    <li><a href="/article/1759825520645730304.htm"
                           title="一起来使用node.js制作一个视频吧" target="_blank">一起来使用node.js制作一个视频吧</a>
                        <span class="text-muted"></span>

                        <div>theme:fancyTNTWeb-全称腾讯新闻前端团队，组内小伙伴在Web前端、NodeJS开发、UI设计、移动APP等大前端领域都有所实践和积累。目前团队主要支持腾讯新闻各业务的前端开发，业务开发之余也积累沉淀了一些前端基础设施，赋能业务提效和产品创新。团队倡导开源共建，拥有各种技术大牛，团队Github地址：https://github.com/tnfe今天为大家介绍FFCreator，项目</div>
                    </li>
                    <li><a href="/article/1759604238436102144.htm"
                           title="SpringBootWeb学习笔记——12万字大合集" target="_blank">SpringBootWeb学习笔记——12万字大合集</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/j2ee/1.htm">j2ee</a><a class="tag" taget="_blank" href="/search/springboot/1.htm">springboot</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/boot/1.htm">boot</a><a class="tag" taget="_blank" href="/search/intellij-idea/1.htm">intellij-idea</a>
                        <div>0.写在前面注：这套笔记是根据黑马程序员B站2023-3-21的视频学习的成果，其中省略了前端基础部分、Maven部分和数据库基础部分，详情可见目录。注注：目前文章内结尾处多幅图片加载不出来，因为图片还存在本地没被传上来，过段时间再改~所有的Spring项目都基于SpringFrameworkSpringFramework配置繁琐，入门难度大文章目录0.写在前面1.SpringBootWeb入门简</div>
                    </li>
                    <li><a href="/article/1759432628114632704.htm"
                           title="前端八股文" target="_blank">前端八股文</a>
                        <span class="text-muted">╰゛Maud</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
                        <div>前端八股文通常包含一系列问题，涉及HTML、CSS、JavaScript等前端基础知识。以下是一些常见问题及其简要答案：HTML八股文什么是HTML？HTML（HypertextMarkupLanguage）是一种用于创建网页结构的标记语言。了解详细...HTML5有哪些新特性？包括语义化标签（如、等）、音视频支持、本地存储、Canvas绘图等特性。了解详细...CSS八股文什么是盒模型？盒模型指</div>
                    </li>
                    <li><a href="/article/1757848195683074048.htm"
                           title="前端基础 03、JavaScript 入门" target="_blank">前端基础 03、JavaScript 入门</a>
                        <span class="text-muted">yjtuuige</span>

                        <div>一、什么是JavaScript1.概述JavaScript是世界上最流行的脚本语言；JavaScript是运行在浏览器中的，解释型的编程语言；JavaScript≠Java；只用了10天设计完成；后端人员，必须要精通JavaScript；在Web世界里，只有JavaScript能跨平台、跨浏览器，驱动网页，与用户交互；2.JavaScript历史1995年，网景公司凭借Navigator浏览器，成</div>
                    </li>
                    <li><a href="/article/1757386973120577536.htm"
                           title="前端基础(五)_运算符(算术运算符、赋值运算符、比较运算符、逻辑运算符、三目运算符、运算符优先级和结合性、数据类型的隐式转换)" target="_blank">前端基础(五)_运算符(算术运算符、赋值运算符、比较运算符、逻辑运算符、三目运算符、运算符优先级和结合性、数据类型的隐式转换)</a>
                        <span class="text-muted">六卿</span>
<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%EF%BC%88JS%EF%BC%89/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/%E8%BF%90%E7%AE%97%E7%AC%A6/1.htm">运算符</a>
                        <div>一、算术运算符算术运算符即：加（+）减（-）乘（*）除（/）取余（%）加加（++）减减（–）算术运算符里比较特殊的是+，它即可以是字符串连接，也可以是加法运算。大致规则是：如果两边都是数字，则就是普通的数学计算如果有一边是字符串，则另一边也转成字符串，变成字符串的拼接如果没有字符串，则调用Number方法，转成数字，再进行相加如果有一边是对象，则对象调用toString得到字符串表示，再进行计算例</div>
                    </li>
                    <li><a href="/article/1757240619601772544.htm"
                           title="（代码示例）css实现等高布局的三种方式" target="_blank">（代码示例）css实现等高布局的三种方式</a>
                        <span class="text-muted">PHP9年架构师</span>

                        <div>本篇文章给大家带来的内容是关于css实现等高布局的三种方式（代码示例），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。本文讲的等高布局是在不手动设置元素高度的情况下，使用纯css实现各个元素高度都相当的效果。如图：首先小编在这里谢谢大家一直的支持，每天都会更新十个web前端基础内容，需要的可以关注我，另外也可以进我的web学习交流群1045267283，领取资料学习资料笔记，可以跟</div>
                    </li>
                    <li><a href="/article/1757149881400573952.htm"
                           title="JS逆向手记01__前端基础" target="_blank">JS逆向手记01__前端基础</a>
                        <span class="text-muted">跃上青空</span>
<a class="tag" taget="_blank" href="/search/spider/1.htm">spider</a><a class="tag" taget="_blank" href="/search/%E7%88%AC%E8%99%AB/1.htm">爬虫</a>
                        <div>系列文章目录系列手记占位文章目录系列文章目录前言一、js自执行函数语法二、js变量类型的转换（与字符串相加）三、浏览器环境（BOM）四、html渲染环境（DOM）五、html发起请求（表单form）六、js两种访问对象属性的方法总结前言会带着记录些反爬相关的前端基础。一、js自执行函数语法js加载的时候会自动运行!(function(){...})()这函数也可以命名二、js变量类型的转换（与字符</div>
                    </li>
                    <li><a href="/article/1756779836770107392.htm"
                           title="2019-03-21" target="_blank">2019-03-21</a>
                        <span class="text-muted">樊小勇</span>

                        <div>web前端记录1.第一次尝试写这个文档，这个文档将记录我对一些东西的总结和运用。2.首先在这里列一个大纲web前端基础学习技术大纲1.html基础常用标签2.css基础常用标签3.less的引入4.盒子模型5.reset重置样式的引用6.pc、移动端公共样式7.pc端浮动、定位8.div+flex移动端布局9.BFC10.阿里图标的使用</div>
                    </li>
                    <li><a href="/article/1756769429397454848.htm"
                           title="vue3初识" target="_blank">vue3初识</a>
                        <span class="text-muted">余识-</span>
<a class="tag" taget="_blank" href="/search/vue/1.htm">vue</a><a class="tag" taget="_blank" href="/search/vue3/1.htm">vue3</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/node/1.htm">node</a><a class="tag" taget="_blank" href="/search/npm/1.htm">npm</a>
                        <div>目录一、前言二、主观感受三、vue3初探原文以及该系列教程文章后续可点击这里查看：vue初识一、前言Vue.js是一款流行的前端框架，最初由尤雨溪（EvanYou）于2014年创建，非常的年轻。官网为vue3，但要注意，vue框架本身是基于前端基础知识之上的，所以学习vue的前提是，你已经理解、并能够熟练的使用html、css、JavaScript这三大前端基石去开发基本的网页应用了。如果你对这些</div>
                    </li>
                    <li><a href="/article/1756270436884168704.htm"
                           title="JavaScript -- jQuery网页开发案例笔记" target="_blank">JavaScript -- jQuery网页开发案例笔记</a>
                        <span class="text-muted">秣凡</span>
<a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/jquery/1.htm">jquery</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
                        <div>视频地址：黑马程序员前端基础必备教程|jQuery网页开发案例精讲_哔哩哔哩_bilibili视频代码地址：JavaScript_jQuery测试案例:本仓库是学习jQuery相关知识。视频网址：https://www.bilibili.com/video/BV1a4411w7Gx?share_source=copy_web&vd_source=d60891811856d864c216f6f099</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>