关于HTML/HTML5（二）

接上关于HTML/HTML5（一）http://www.jianshu.com/p/33fc7840c079

学习HTML5的最佳网站没有之一http://www.w3school.com.cn/html5/index.asp

HTML5简介：

HTML5 是最新的 HTML 标准，它是专门为承载丰富的 web 内容而设计的，并且无需额外插件，它拥有新的语义、图形以及多媒体元素，它提供的新元素和新的 API 简化了 web 应用程序的搭建，它是跨平台的，被设计为在不同类型的硬件（PC、平板、手机、电视机等等）之上运行。

HTML5支持无属性值（disabled），支持属性值无引号，支持属性值用单引号引起来，支持属性值用双引号引起来。

以下 HTML 4.01 元素已从 HTML5 中删除：

<~~acronym><~~applet><~~basefont><~~big><~~center><~~dir><~~font><~~frame><~~frameset><~~noframes><~~strike>~~~~~~~~~~~~~~~~~~~~~~

HTML5支持： - HTML5 中新的语义元素。（如果使用 HTML4 的话，通过类属性来设置页面元素的样式：header, top, bottom, footer, menu, navigation, main, container, content, article, sidebar, topnav, ...） article 文档内的文章。规定独立的自包含内容，可以独立于网站其他内容进行阅读。应用场景：论坛，博客，新闻， aside 页面内容之外的内容（比如侧栏）。应该与周围内容相关。 details 用户可查看或隐藏的额外细节。 footer 文档或节的页脚，应该提供有关其包含元素的信息。页脚通常包含文档的作者、版权信息、使用条款链接、联系信息等等。可以在一个文档中使用多个元素。 header 文档或节的页眉，应该被用作介绍性内容的容器。一个文档中可以有多个元素。 main 文档的主内容。 mark 重要或强调的内容。 nav 文档内的导航链接。旨在定义大型的导航链接块。不过，并非文档中所有链接都应该位于元素中！ section 文档中的节。（节（section）是有主题的内容组，通常具有标题），可以将网站首页划分为简介、内容、联系信息等节。 summary 是 details 元素的可见标题。 time 日期/时间。 figcaption 是figure元素的标题。 figure 自包含内容，比如图示、图表、照片、代码清单等。 HTML5的figcaption元素和figure元素在书籍和报纸中，与图片搭配的标题很常见。标题（caption）的作用是为图片添加可见的解释。通过 HTML5，图片和标题能够被组合在<figure>元素中。 <img>元素定义图像，<figcaption>元素定义标题。注意：<article>和在 HTML5 标准中，元素定义完整的相关元素自包含块。元素被定义为相关元素块。我们能够使用该定义来决定如何嵌套元素吗？不能！在因特网上，您会发现元素包含元素的 HTML 页面，还有元素包含元素的页面。您还会发现元素包含元素，同时元素包含元素。注释： Note Newspaper: The sports articles in the sports section, have a technical section in each article. HTML4到HTML5改变的内容：参考手册：http://www.w3school.com.cn/tags/html_ref_dtd.asp 1.文档类型（） 2.编码（，为了确保恰当的解释，以及正确的搜索引擎索引，在文档中对语言和字符编码的定义越早越好，在元素之前） 3.为IE添加支持的脚本/shiv （后面有讲） 4.添加了语义化元素（<header>，<footer>，<section>，<article>，<nav>等等） <hr> 除了以上元素，还增加了以下元素： <bdi> 与其他文本不同的文本方向。 <dialog> 对话框或窗口。 <enuitem> 用户能够从弹出菜单调用的命令/菜单项目。 <meter> 已知范围（尺度）内的标量测量。 <progress> 任务进度。 <rp> 在不支持 ruby 注释的浏览器中显示什么。 <rt> 关于字符的解释/发音（用于东亚字体）。 <ruby> ruby 注释（用于东亚字体）。 可能的折行（line-break）。 - 可以向 HTML 添加新元素，并为其定义样式（< myHero>）（ JavaScript 语句document.createElement("myHero")，仅适用于 IE。） <hr> Internet Explorer 的问题 上述方案可用于所有新的 HTML5 元素，但是： 注意：Internet Explorer 8 以及更早的版本，不允许对未知元素添加样式。 幸运的是，Sjoerd Visscher 创造了 "HTML5 Enabling JavaScript","the shiv"：  以上代码必须位于<head>元素内。 <hr> 所有浏览器，不论新旧，都会自动把未识别元素当做行内元素来处理。 <hr> 建议始终使用小写 <hr> 表单： HTML5中新增表单元素：<datalist>，<keygen>，<output> type IE Firefox Opera Chrome Safari datalist No No 9.5 No No keygen No No 10.5 3.0 No output No No 9.5 No No <datalist> 输入控件的预定义选项 / 规定输入域的选项列表，列表是通过 datalist 内的 option 元素创建的，option 元素永远都要设置 value 属性。 例子： <datalist>元素为<input>元素规定预定义选项列表。用户会在他们输入数据时看到预定义选项的下拉列表。<input>元素的list属性必须引用<datalist>元素的id属性。 <form action="action_page.php"> <input list="browsers"> <datalist id="browsers"> <option value="Internet Explorer"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"> </datalist> </form> 例子2： datalist 元素规定输入域的选项列表。列表是通过 datalist 内的 option 元素创建的。 如需把 datalist 绑定到输入域，请用输入域的 list 属性引用 datalist 的 id： Webpage: <input type="url"list="url_list"name="link" /> <datalist id="url_list"> <option label="W3School" value="http://www.W3School.com.cn" /> <option label="Google" value="http://www.google.com" /> <option label="Microsoft" value="http://www.microsoft.com" /> </datalist> <keygen> 键对生成器字段（用于表单）。 <keygen>元素的作用是提供一种验证用户的可靠方法，是密钥对生成器（key-pair generator）。当提交表单时，会生成两个键，一个是私钥，一个公钥。 私钥（private key）存储于客户端，公钥（public key）则被发送到服务器。公钥可用于之后验证用户的客户端证书（client certificate）。 目前，浏览器对此元素的糟糕的支持度不足以使其成为一种有用的安全标准。 例子： <form action="demo_form.asp" method="get"> Username: <input type="text" name="usr_name" /> Encryption:<keygen name="security" /> <input type="submit" /> </form> <output> 计算结果。（用于不同类型的输出，比如计算或脚本输出） <output id="result" onforminput="resCalc()"></output> = = = = = = = = = = = = HTML5新增输入类型：number，color，date，datetime，datetime-local，email，month，range，search，tel，time，url，week（注释：老式 web 浏览器不支持的输入类型，会被视为输入类型 text。） （Opera 对新的输入类型的支持最好。不过您已经可以在所有主流的浏览器中使用它们了。即使不被支持，仍然可以显示为常规的文本域。） type IE Firefox Opera Chrome Safari email No 4.0 9.0 10.0 No url No 4.0 9.0 10.0 No number No No 9.0 7.0 No range No No 9.0 4.0 4.0 Date pickers No No 9.0 10.0 No search No 4.0 11.0 10.0 No color No No 11.0 No No 数字输入：<input type="number" name="" min="" max="" step="10" value="30"> PS：提示：iPhone 中的 Safari 浏览器支持 number 输入类型，并通过改变触摸屏键盘来配合它（显示数字）。 颜色输入：<input type="color" name=""> 滑块控件：<input type="range" name="" min="" max="" step="" value=""> 邮件输入（会自动验证 email 域的值）：<input type="email" name=""> PS：iPhone 中的 Safari 浏览器支持 email 输入类型，并通过改变触摸屏键盘来配合它（添加 @ 和 .com 选项）。 搜索输入：<input type="search" name=""> 电话输入：<input type="tel" name=""> URL输入（会自动验证 url 域的值）：<input type="url" name=""> PS：提示：iPhone 中的 Safari 浏览器支持 url 输入类型，并通过改变触摸屏键盘来配合它（添加 .com 选项）。 Date Pickers： 日期输入：<input type="date" name="" max="2017-12-31" min="2000-01-02"> 月份输入：<input type="month" name="">（允许用户选择月份和年份。） 周/星期输入：<input type="week" name="">（允许用户选择周和年。） 时间输入：<input type="time" name=""> 日期时间输入：<input type="datetime" name="">（允许用户选择日期和时间（有时区）。） 日期时间输入：<input type="datetime-local" name="">（允许用户选择日期和时间（无时区）。） <hr> HTML新增表单属性： 新的<input>属性： autocomplete，autofocus，form，form overrides（formaction，formenctype，formmethod，formnovalidate，formtarget），height 和 width，list，min 和 max，step，multiple，pattern (regexp)，placeholder，required 新的<form>属性： autocomplete，novalidate type IE Firefox Opera Chrome Safari autocomplete 8.0 3.5 9.5 3.0 4.0 autofocus No No 10.0 3.0 4.0 form No No 9.5 No No form overrides No No 10.5 No No height and width 8.0 3.5 9.5 3.0 4.0 list No No 9.5 No No min, max and step No No 9.5 3.0 No multiple No 3.5 No 3.0 4.0 novalidate No No No No No pattern No No 9.5 3.0 No placeholder No No No 3.0 3.0 required No No 9.5 3.0 No autocomplete 属性规定form或input域是否应该自动完成。autocomplete 属性适用于<form>以及如下< input>类型：text、search、url、tel、email、password、datepickers、range 以及 color。（值为on/off） autofocus属性，规定在页面加载时，域自动地获得焦点，适用所有<input>类型。（值为true/false）。 form属性，规定输入域所属的一个或多个表单。适用所有<input>标签的类型。如需引用一个以上的表单，请使用空格分隔表单 id 列表。 例子：输入字段位于 HTML 表单之外（但仍属表单）： <form action="action_page.php" id="form1"> First name: <input type="text" name="fname"> <input type="submit" value="Submit"> </form> Last name: <input type="text" name="lname" form="form1"> 表单重写属性（form override attributes）允许重写 form 元素的某些属性设定，有： formaction 重写表单的action属性 formenctype 重写表单的enctype属性 formmethod 重写表单的method属性 formnovalidate 重写表单的novalidate属性 formtarget 重写表单的target属性 表单重写属性适用于以下类型的<input>标签：submit 和 image。 formaction属性规定当提交表单时处理该输入控件的文件的 URL。适用于 type="submit" 以及 type="image"。（如"demo_admin.asp"） formenctype属性规定当把表单数据（form-data）提交至服务器时如何对其进行编码（仅针对 method="post" 的表单）。适用于type="submit" 以及 type="image"。（如设置为"multipart/form-data"） formmethod属性定义用以向 action URL 发送表单数据（form-data）的 HTTP 方法。适用于 type="submit" 以及 type="image"。（如post） formnovalidate属性，如果设置，则规定在提交表单时不对 <input> 元素进行验证。可用于 type="submit"。（值为true/false） formtarget属性规定的名称或关键词指示提交表单后在何处显示接收到的响应。可与 type="submit" 和 type="image" 使用。（如"_blank"） height 和 width属性，用于 image 类型的 input 标签的图像高度和宽度。（注释：请始终规定图像的尺寸。） list属性，引用的<datalist>元素中包含了<input>元素的预定义选项。list 属性适用于以下类型的 <input>标签：text, search, url, telephone, email, date pickers, number, range 以及 color。（值为<datalist>的id） min 、max和step属性，用于为包含数字或日期的 input 类型规定限定（约束）。规定<input>元素的最小值和最大值以及合法数字间隔。适用于以下类型的 <input> 标签：date pickers、number 以及 range。 multiple属性，规定输入域中可选择多个值。适用于以下输入类型：email 和 file。（值为true/false） pattern (regexp)属性，规定用于验证 input 域的正则表达式。适用于以下输入类型：text、search、url、tel、email和 password。（提示：请使用全局的 title 属性对模式进行描述以帮助用户。） placeholder属性，提供一种提示（hint），描述输入域所期待的值。该提示会在用户输入值之前显示在输入字段中，在输入域获得焦点时消失。适用于以下输入类型：text、search、url、tel、email 以及 password。 required属性，必须在提交之前填写输入域（不能为空）。适用于以下输入类型：text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file。（值为true/false） novalidate属性，规定在提交表单时不应该验证 form 或 input 域。适用于 <form> 以及以下类型的 <input> 标签：text, search, url, telephone, email, password, date pickers, range 以及 color。 <hr> HTML5图像：canvas && svg（Scalable Vector Graphics） canvas（画布，使用 JavaScript 的图像绘制。） svg（可伸缩矢量图形，使用 SVG 的图像绘制。） 参考手册：http://www.w3school.com.cn/tags/html_ref_canvas.asp canvas画布是一个矩形区域，您可以控制其每一像素，它拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。 - 创建canvas元素（规定元素的 id、宽度和高度）： <canvas id="myCanvas" width="200" height="200">此处编写文字，当浏览器不支持canvas时会显示这些文字。</canvas> - 通过 JavaScript 来绘制（canvas 元素本身是没有绘图能力的）： <script type="text/javascript"> var canvas = document.getElementById('myCanvas"); //使用id来寻找canvas元素， var ctx = canvas.getContext("2d"); //然后创建context对象，getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。 ctx.fillStyle = "#F00"; //fillStyle 方法将其染成红色 ctx.fillRect(0,0,150,75); //fillRect 方法规定了形状、位置和尺寸，参数意义：从画布的(0,0)开始画150*75的矩形。这两行代码绘制一个红色的矩形 </script> 其他实例： - 线条（移去(10,10)；画到(150,50)；画到(10,50)；stroke()才真正的画，前面绘制的是路径） ctx.moveTo(10,10); ctx.lineTo(150,50); ctx.lintTo(10,50); ctx.stroke(); - 圆形（填充样式；开始路径；在画布(70,18)画一个半径为15的弧度为0到Math.PI*2的圆，true逆时针画，false顺时针画；关闭路径；fill()才真正的画，前面绘制的是路径） ctx.fillStyle="#FF0000"; ctx.beginPath(); ctx.arc(70,18,15,0,Math.PI*2,true); ctx.closePath(); ctx.fill(); - 渐变（创建线性的渐变对象，渐变从(0,0)开始，(175,50)结束；添加颜色位置；填充样式；绘制矩形 / 作为矩形的填充样式） var grd=cxt.createLinearGradient(0,0,175,50); grd.addColorStop(0,"#FF0000"); grd.addColorStop(1,"#00FF00"); cxt.fillStyle=grd; cxt.fillRect(0,0,175,50); - 图像（创建img元素，源文件路径，(0,0)画图像） var img=new Image() img.src="flower.png" ctx.drawImage(img,0,0); 更多canvas用法可以看官方文档：http://www.w3school.com.cn/tags/html_ref_canvas.asp 也可以看我写的另外的文章：http://hiuman.iteye.com/blog/2335334 = = = = = = = = = = = = = = = = svg介绍： Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持内联 SVG。 SVG 用于定义用于网络的基于矢量的图形，它使用 XML 格式定义图形，且SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失 优势（与其他图像格式相比（比如JPEG和GIF））： SVG 图像可通过文本编辑器来创建和修改，它可被搜索、索引、脚本化或压缩，而且是可伸缩的，它可在任何的分辨率下被高质量地打印，也可在图像质量不下降的情况下被放大。 例子：（按顺序画出(100,10)(40,180)(190,60)(10,60),(160,180)，结果是一个五角星，闭合的地方填充红色，绘制的线条蓝色，线宽3，填充规则(evenodd/nonzero) ） <svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190"> <polygon points="100,10 40,180 190,60 10,60 160,180" style="fill:red;stroke:blue;stroke-width:3;fill-rule:evenodd;" />  </svg> Canvas 与 SVG 的比较： Canvas 依赖分辨率 不支持事件处理器 弱的文本渲染能力 能够以 .png 或 .jpg 格式保存结果图像 最适合图像密集型的游戏，其中的许多对象会被频繁重绘 SVG 不依赖分辨率 支持事件处理器 最适合带有大型渲染区域的应用程序（比如谷歌地图） 复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快） 不适合游戏应用 <hr> HTML5新的媒介元素：video && audio &&embed && source && track audio 声音或音乐内容。 embed 外部应用程序的容器（比如插件）。 video 视频或影片内容。 source 是<video>和<audio>的来源。 track 是<video>和<audio>的轨道。 参考手册：http://www.w3school.com.cn/tags/html_ref_audio_video_dom.asp 多媒体：（详细请看官方http://www.w3school.com.cn/html/html_media.asp） 视频格式：（MP4 格式是一种新的即将普及的因特网视频格式。HTML5 、Flash 播放器以及优酷等视频网站均支持它。） 格式（文件扩展名） AVI（.avi），WMV（.wmv），MPEG（.mpg/.mpeg），QuickTime（.mov），RealVideo（.rm/.ram），Flash（.swf/.flv），Mpeg-4（.mp4） 声音格式：（WAVE 是因特网上最受欢迎的无压缩声音格式，所有流行的浏览器都支持它。如果您需要未经压缩的声音（音乐或演讲），那么您应该使用 WAVE 格式。 MP3 是最新的压缩录制音乐格式。MP3 这个术语已经成为数字音乐的代名词。如果您的网址从事录制音乐，那么 MP3 是一个选项。） 格式（文件扩展名） MIDI（.mid/.midi），RealAudio（.rm/.ram），Wave（.wav），WMA（.wma），MP3（.mp3/.mpga） = = = = = = = = = = = = = = = PS：当前，video 元素支持三种视频格式： 格式 IE Firefox Opera Chrome Safari Ogg No 3.5+ 10.5+ 5.0+ No MPEG 4 9.0+ No No 5.0+ 3.0+ WebM No 4.0+ 10.6+ 6.0+ No 在HTML5中显示视频：（control 属性供添加播放、暂停和音量控件。） <video src="movie.ogg" controls="controls" width="320" height="240"> 供不支持 video 元素的浏览器显示的 </video> 此时，仅适用于Firefox、Opera 以及 Chrome 浏览器。 要确保适用于 Safari 浏览器，视频文件必须是 MPEG4 类型。 <video width="320" height="240" controls="controls"> <source src="movie.ogg" type="video/ogg"> <source src="movie.mp4" type="video/mp4"> Your browser does not support the video tag. </video> 而IE，Internet Explorer 8 不支持 video 元素。在 IE 9 中，将提供对使用 MPEG4 的 video 元素的支持。 <video>标签的属性：（除了width，height，src，其他的属性值均为属性名） autoplay 如果出现该属性，则视频在就绪后马上播放。 controls 如果出现该属性，则向用户显示控件，比如播放按钮。 loop 如果出现该属性，则当媒介文件完成播放后再次开始播放。 preload 如果出现该属性，则视频在页面加载时进行加载，并预备播放。 如果使用 "autoplay"，则忽略该属性。 width 视频播放器的宽 height 视频播放器的高 src 视频URL HTML5<video> - 方法、属性以及事件（在所有属性中，只有 videoWidth 和 videoHeight 属性是立即可用的。在视频的元数据已加载后，其他属性才可用。） 方法：play()，pause()，load()，canPlayType 属性：currentSrc，currentTime，videoWidth，videoHeight，duration，ended，error，paused，muted，seeking，volume，height，width 事件：play，pause，progress，error，timeupdate，ended，abort，empty，emptied，waiting，loadedmetadata = = = = = = = = = = = = = = = = 音频： PS：当前，audio 元素支持三种音频格式： 类型 IE 9 Firefox 3.5 Opera 10.5 Chrome 3.0 Safari 3.0 Ogg Vorbis NO √ √ √ NO MP3 √ NO NO √ √ Wav NO √ √ NO √ 在HTML5中显示音频：（control 属性供添加播放、暂停和音量控件。） <audio src="song.ogg" controls="controls"> 供不支持 audio元素的浏览器显示的 </audio> 此时，仅适用于Firefox、Opera 以及 Chrome 浏览器。 要确保适用于 Safari 浏览器，音频文件必须是 MP3 或 Wav 类型。 <audio controls="controls"> <source src="song.ogg" type="audio/ogg"> <source src="song.mp3" type="audio/mpeg"> Your browser does not support the audio tag. </audio> 而IE，Internet Explorer 8 不支持 audio 元素。在 IE 9 中，将提供对 audio 元素的支持。 <audio>标签的属性 autoplay 如果出现该属性，则音频在就绪后马上播放。 controls 如果出现该属性，则向用户显示控件，比如播放按钮。 loop 如果出现该属性，则每当音频结束时重新开始播放。 preload 如果出现该属性，则音频在页面加载时进行加载，并预备播放。 如果使用 "autoplay"，则忽略该属性。 src 音频URL <hr> 地理定位略，回顾HTML/HTML5（一）已描述。 <hr> 拖放是 HTML5 标准的组成部分：任何元素都是可拖放的。 拖放（Drag 和 Drop）是很常见的特性。即抓取对象以后拖到另一个位置。 Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放。 注释：在 Safari 5.1.2 中不支持拖放。 官方例子：http://www.w3school.com.cn/tiy/t.asp?f=html5_draganddrop 部分代码： function allowDrop(ev) { ev.preventDefault(); } function drag(ev) { ev.dataTransfer.setData("text", ev.target.id); } function drop(ev) { ev.preventDefault(); var data = ev.dataTransfer.getData("text"); ev.target.appendChild(document.getElementById(data)); } <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69"> 代码分析： 把元素设置为可拖放：（img元素的draggable 属性设置为 true） 拖放的内容 - ondragstart 和 setData()：（规定当元素被拖动时发生的事情。 例子中，ondragstart 属性调用了一个 drag(event) 函数，规定拖动什么数据。 dataTransfer.setData() 方法设置被拖动数据的数据类型和值） function drag(ev) { ev.dataTransfer.setData("text", ev.target.id); } 在例子中，数据类型是 "text"，而值是这个可拖动元素的 id ("drag1")。 拖到何处 - ondragover：（规定被拖动的数据能够被放置到何处。 默认地，数据/元素无法被放置到其他元素中。为了实现拖放，我们必须阻止元素的这种默认的处理方式。由 ondragover 事件的 event.preventDefault() 方法完成） 进行放置 - ondrop：（当放开被拖数据时，会发生 drop 事件。） ondrop 属性调用了一个函数，drop(event)： function drop(ev) { ev.preventDefault(); var data = ev.dataTransfer.getData("text"); ev.target.appendChild(document.getElementById(data)); } 代码解释： 调用 preventDefault() 来阻止数据的浏览器默认处理方式（drop 事件的默认行为是以链接形式打开） 通过 dataTransfer.getData() 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据 被拖数据是被拖元素的 id ("drag1") 把被拖元素追加到放置元素中 另：来回拖放图片：http://www.w3school.com.cn/tiy/t.asp?f=html5_draganddrop2 <hr> 本地存储 / web存储（Local Storage） IE 8.0 Chrome 4.0 FF3.5 Safari 4.0 Opera 11.5 之前，这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得 cookie 速度很慢而且效率也不高。 在 HTML5 中，数据不是由每个服务器请求传递的，而是只有在请求时使用数据。它使在不影响网站性能的情况下存储大量数据成为可能。 对于不同的网站，数据存储于不同的区域，并且一个网站只能访问其自身的数据。 HTML5 使用 JavaScript 来存储和访问数据。 HTML 本地存储提供了两个在客户端存储数据的对象： window.localStorage - 没有时间限制的数据存储 window.sessionStorage - 针对一个 session 的数据存储（当关闭浏览器标签页时数据会丢失） 在使用本地存储时，请检测 localStorage 和 sessionStorage 的浏览器支持： if (typeof(Storage) !== "undefined") { // 针对 localStorage/sessionStorage 的代码 } else { // 抱歉！不支持 Web Storage .. } localStorage 对象：（存储的是没有截止日期的数据。当浏览器被关闭时数据不会被删除，在下一天、周或年中，都是可用的。） // 存储创建 localStorage 名称/值对 localStorage.setItem("lastname", "Gates"); // 取回取回 "lastname" 的值 document.getElementById("result").innerHTML = localStorage.getItem("lastname"); 或者这么写： // 存储 localStorage.lastname = "Gates"; // 取回 document.getElementById("result").innerHTML = localStorage.lastname; //删除 localStorage.removeItem("lastname"); 注释：名称/值对始终存储为字符串。如果需要请记得把它们转换为其他格式！ 例子： 下面的例子对用户点击按钮的次数进行计数。在代码中，值字符串被转换为数值，依次对计数进行递增： if (localStorage.clickcount) { localStorage.clickcount = Number(localStorage.clickcount) + 1; } else { localStorage.clickcount = 1; } document.getElementById("result").innerHTML = "您已经点击这个按钮 " + localStorage.clickcount + " 次。"; = = = = = = = = = = = = = sessionStorage 对象：（针对一个 session 进行数据存储。如果用户关闭具体的浏览器标签页，数据也会被删除。） 创建并访问一个 sessionStorage： sessionStorage.lastname="Smith"; document.write(sessionStorage.lastname); 下例在当前 session 中对用户点击按钮进行计数： if (sessionStorage.clickcount) { sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1; } else { sessionStorage.clickcount = 1; } document.getElementById("result").innerHTML = "在本 session 中，您已经点击这个按钮 " + sessionStorage.clickcount + " 次。"; <hr> 应用程序缓存：（通过创建 cache manifest 文件，可轻松创建 web 应用的离线版本。）可对 web 应用进行缓存，并可在没有因特网连接时进行访问。 Chrome 4.0 IE10.0 FF3.5 Safari 4.0 Opera 11.5 应用程序缓存为应用带来三个优势： 离线浏览 - 用户可在应用离线时使用它们 速度 - 已缓存资源加载得更快 减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源 例子：（展示了带有 cache manifest 的 HTML 文档（供离线浏览）http://www.w3school.com.cn/tiy/t.asp?f=html5_html_manifest） <!DOCTYPE html> <html manifest="demo.appcache"> <body> 文档内容.... </body> </html> 每个指定了 manifest 的页面在用户对其访问时都会被缓存。如果未指定 manifest 属性，则页面不会被缓存（除非在 manifest 文件中直接指定了该页面）。 manifest 文件的建议文件扩展名是：".appcache"。 注意：manifest 文件需要设置正确的 MIME-type，即 "text/cache-manifest"。必须在 web 服务器上进行配置。 Manifest 文件：（是简单的文本文件，它告知浏览器被缓存的内容（以及不缓存的内容）。） Manifest文件可分为三个部分： CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存 NETWORK - 在此标题下列出的文件需要与服务器的连接，且不会被缓存 FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面） CACHE MANIFEST：（第一行，CACHE MANIFEST，是必需的） CACHE MANIFEST /theme.css /logo.gif /main.js 上面的 manifest 文件列出了三个资源：一个 CSS 文件，一个 GIF 图像，以及一个 JavaScript 文件。当 manifest 文件被加载后，浏览器会从网站的根目录下载这三个文件。然后，无论用户何时与因特网断开连接，这些资源依然可用。 NETWORK： 下面的 NETWORK 部分规定文件 "login.php" 永远不会被缓存，且离线时是不可用的： NETWORK: login.asp 可以使用星号来指示所有其他其他资源/文件都需要因特网连接： NETWORK: * FALLBACK： 下面的FALLBACK部分规定如果无法建立因特网连接，则用 "offline.html" 替代 /html/ 目录中的所有文件： FALLBACK: /html/ /offline.html 注释：第一个 URI 是资源，第二个是替补。 更新缓存： 一旦应用被缓存，它就会保持缓存直到发生下列情况： - 用户清空浏览器缓存 - manifest 文件被修改（参阅下面的提示） - 由程序来更新应用缓存 例子：（完整的 Cache Manifest 文件） CACHE MANIFEST # 2012-02-21 v1.0.0 /theme.css /logo.gif /main.js NETWORK: login.asp FALLBACK: /html/ /offline.html （提示：以 "#" 开头的是注释行，但也可满足其他用途。应用的缓存只会在其 manifest 文件改变时被更新。如果您编辑了一幅图像，或者修改了一个 JavaScript 函数，这些改变都不会被重新缓存。更新注释行中的日期和版本号是一种使浏览器重新缓存文件的办法。） 关于应用程序缓存的注意事项： 请留心缓存的内容。 一旦文件被缓存，则浏览器会继续展示已缓存的版本，即使您修改了服务器上的文件。为了确保浏览器更新缓存，您需要更新 manifest 文件。 注释：浏览器对缓存数据的容量限制可能不太一样（某些浏览器的限制是每个站点 5MB）。 <hr> Web Workers：（是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 运行在后台。） Chrome4.0 IE10.0 FF3.5 Safari4.0 Opera11.5 官方例子（在后台计数）：http://www.w3school.com.cn/tiy/t.asp?f=html5_webworker 检测 Web Worker 支持： if (typeof(Worker) !== "undefined") { // 是的！支持 Web worker！ } else { // 抱歉！不支持 Web Worker！ } 创建Web Worker 文件（在一个外部 JavaScript 文件中创建）： 创建了计数脚本。该脚本存储于 "demo_workers.js" 文件中： var i = 0; function timedCount() { i = i + 1; postMessage(i); setTimeout("timedCount()",500); } timedCount(); 以上代码中重要的部分是 postMessage() 方法 - 它用于向 HTML 页面传回一段消息。 注释:web worker 通常不用于如此简单的脚本，而是用于更耗费 CPU 资源的任务。 创建 Web Worker 对象：（已经有了 web worker 文件，我们需要从 HTML 页面调用它。） 下面的代码行检测是否存在 worker，如果不存在，- 它会创建一个新的 web worker 对象，然后运行 "demo_workers.js" 中的代码： if (typeof(w) == "undefined") { w = new Worker("demo_workers.js"); } 然后我们就可以从 web worker 发生和接收消息了。 向 web worker 添加一个 "onmessage" 事件监听器： w.onmessage= function(event){ document.getElementById("result").innerHTML = event.data; }; 当 web worker 传送消息时，会执行事件监听器中的代码。来自 web worker 的数据会存储于 event.data 中。 终止 Web Worker： 当创建 web worker 后，它会继续监听消息（即使在外部脚本完成后）直到其被终止为止。 如需终止 web worker，并释放浏览器/计算机资源，请使用 terminate() 方法： w.terminate(); 复用 Web Worker： 如果您把 worker 变量设置为 undefined，在其被终止后，可以重复使用该代码：w =undefined; 完整的代码：http://www.w3school.com.cn/tiy/t.asp?f=html5_webworker Web Worker 和 DOM 由于 web worker 位于外部文件中，它们无法访问下例 JavaScript 对象： window 对象，document 对象，parent 对象 <hr> Server-Sent 事件（允许网页从服务器获得更新。）： Chrome6.0 IE不支持 FF6.0 Safari5.0 Opera11.5 Server-Sent 事件 - One Way Messaging单向消息传递： Server-Sent 事件指的是网页自动从服务器获得更新。 以前也可能做到这一点，前提是网页不得不询问是否有可用的更新。通过 Server-Sent 事件，更新能够自动到达。 例如：Facebook/Twitter 更新、股价更新、新的博文、赛事结果，等等。 接收 Server-Sent 事件通知： EventSource 对象用于接收服务器发送事件通知： 例子： var source = new EventSource("demo_sse.php"); source.onmessage = function(event) { document.getElementById("result").innerHTML += event.data + " "; }; 例子解释： 创建一个新的 EventSource 对象，然后规定发送更新的页面的 URL（本例中是 "demo_sse.php"） 每当接收到一次更新，就会发生 onmessage 事件 当 onmessage 事件发生时，把已接收的数据推入 id 为 "result" 的元素中 检测 Server-Sent 事件支持： 在 TIY 实例中，我们编写了一段额外的代码来检测服务器发送事件的浏览器支持： if(typeof(EventSource) !== "undefined") { // 是的！支持服务器发送事件！ } else { // 抱歉！不支持服务器发送事件！ } 服务器端代码实例： 为了使上例运行，您需要能够发送数据更新的服务器（比如 PHP 或 ASP）。 服务器端事件流的语法非常简单。请把 "Content-Type" 报头设置为 "text/event-stream"。现在，您可以开始发送事件流了。 PHP 中的代码 (demo_sse.php)： <?php header('Content-Type: text/event-stream'); header('Cache-Control: no-cache'); $time = date('r'); echo "data: The server time is: {$time}\n\n"; flush(); ?> ASP 中的代码 (VB) (demo_sse.asp)： <% Response.ContentType = "text/event-stream" Response.Expires = -1 Response.Write("data: The server time is: " & now()) Response.Flush() %> 代码解释： 把报头 "Content-Type" 设置为 "text/event-stream" 规定不对页面进行缓存 输出要发送的日期（始终以 "data: " 开头） 向网页刷新输出数据 EventSource 对象： 在上例中，我们使用 onmessage 事件来获取消息。不过还可以使用其他事件： 事件描述 onopen 当通往服务器的连接被打开 onmessage 当接收到消息 onerror 当发生错误 <hr> HTML标签： http://www.w3school.com.cn/tags/html_ref_byfunc.asp（功能排序） HTML全局属性： http://www.w3school.com.cn/tags/html_ref_standardattributes.asp </article> </div> </div> </div>  <div id="SOHUCS" sid="1177568609535324160"></div> <script type="text/javascript" src="/views/front/js/chanyan.js"></script>  <div class="youdao-fixed-ad" id="detail_ad_bottom"></div> </div> <div class="col-md-3"> <div class="row" id="ad">  <div id="right-1" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_1"> </div> </div>  <div id="right-2" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_2"></div> </div>  <div id="right-3" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_3"></div> </div> </div> </div> </div> </div> </div> <div class="container"> <h4 class="pt20 mb15 mt0 border-top">你可能感兴趣的:(关于HTML/HTML5（二）)</h4> <div id="paradigm-article-related"> <div class="recommend-post mb30"> <ul class="widget-links"> <li><a href="/article/1892576291241127936.htm" title="贪心之P8669 [蓝桥杯 2018 省 B] 乘积最大" target="_blank">贪心之P8669 [蓝桥杯 2018 省 B] 乘积最大</a> 筏.k <a class="tag" taget="_blank" href="/search/%E5%88%B7%E9%A2%98%E5%B0%8F%E8%AE%B0/1.htm">刷题小记</a><a class="tag" taget="_blank" href="/search/%E8%93%9D%E6%A1%A5%E6%9D%AF/1.htm">蓝桥杯</a><a class="tag" taget="_blank" href="/search/%E8%B4%AA%E5%BF%83%E7%AE%97%E6%B3%95/1.htm">贪心算法</a><a class="tag" taget="_blank" href="/search/c%2B%2B/1.htm">c++</a> <div>文章目录前言一、例题二、题目分析三、代码解答前言分享每日一题之洛谷P8669[蓝桥杯2018省B]乘积最大提示：以下是本篇文章正文内容，下面案例可供参考一、例题二、题目分析题意：在N个数中取K个数，使这K个数的乘积最大，答案对1000000009取模看到这题，首先想到贪心，第一是因为要求乘积最大，第二是因为数据不是特别大，遇到求一个极值的东西可以想想贪心，但也要结合题意和数据范围来具体判断到底用哪</div> </li> <li><a href="/article/1892572510000574464.htm" title="关于启动vue项目，出现：Error [ERR_MODULE_NOT_FOUND]: Cannot find module ‘xxx‘此类错误" target="_blank">关于启动vue项目，出现：Error [ERR_MODULE_NOT_FOUND]: Cannot find module ‘xxx‘此类错误</a> zkkkkkkkkkkkkk <a class="tag" taget="_blank" href="/search/vue/1.htm">vue</a><a class="tag" taget="_blank" href="/search/vue/1.htm">vue</a><a class="tag" taget="_blank" href="/search/node.js/1.htm">node.js</a><a class="tag" taget="_blank" href="/search/npm/1.htm">npm</a> <div>目录一、问题报错二、原因分析三、解决方法一、问题报错node环境变量配置有问题：(base)xxx@M73H-15:~/VueProject/pproject-vue$npmrundev/usr/bin/env:“node”:没有那个文件或目录vue项目启动有问题：(base)xxx:~/VueProject/pproject-vue$npmrundev>pproject-vue@0.0.0dev</div> </li> <li><a href="/article/1892572383710081024.htm" title="【Python】Python入门——判断语句" target="_blank">【Python】Python入门——判断语句</a> zhoushanguhe <a class="tag" taget="_blank" href="/search/Python/1.htm">Python</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A8%8B/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>Python入门——判断语句。内容包括if语句、条件表达式、三元运算、match语句等。目录一、if语句1.基本if-else语句2.常用比较运算符3.if-else连写4.pass语句5.变量的作用域二、条件表达式三、三元运算四、match语句五、其他一、if语句1.基本if-else语句当条件成立时，执行某些语句；否则执行另一些语句。注意：if和else后需要加上冒号:if语句的代码块需要缩进</div> </li> <li><a href="/article/1892572149642752000.htm" title="MyBatis-Plus结合Spring Boot实现数据权限" target="_blank">MyBatis-Plus结合Spring Boot实现数据权限</a> <div>一、场景介绍在开发过程中很多时候我们需要根据某些条件去做数据权限，比如：A组织只能看见A组织及其下属组织的数据，B部门只能看见自己的数据、等等，此时如果每次都去自己写SQL进行校验就会显得代码非常臃肿，因为就产生了自己去定义一套全局公用的数据权限过滤方式。二、实现思路借助于Spring的拦截器或过滤器，当请求进入到Controller时，将该用户的数据权限信息存入数据权限上下文中，在MyBatis</div> </li> <li><a href="/article/1892571879219195904.htm" title="Linux操作系统：个人云存储服务搭建开发" target="_blank">Linux操作系统：个人云存储服务搭建开发</a> 暮雨哀尘 <a class="tag" taget="_blank" href="/search/Linux%E7%9A%84%E9%82%A3%E7%82%B9%E4%BA%8B/1.htm">Linux的那点事</a><a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/%E8%BF%90%E7%BB%B4/1.htm">运维</a><a class="tag" taget="_blank" href="/search/%E6%9C%8D%E5%8A%A1%E5%99%A8/1.htm">服务器</a><a class="tag" taget="_blank" href="/search/%E5%A4%A7%E6%95%B0%E6%8D%AE/1.htm">大数据</a><a class="tag" taget="_blank" href="/search/%E9%9B%86%E7%BE%A4%E6%8A%80%E6%9C%AF/1.htm">集群技术</a><a class="tag" taget="_blank" href="/search/nginx/1.htm">nginx</a><a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a> <div>个人云存储服务搭建开发文档一、项目目标搭建一个类似Dropbox的个人云存储服务，实现文件的同步和备份功能，确保数据的安全性和便捷性。二、技术栈操作系统：Linux（推荐使用UbuntuServer或CentOS）云存储软件：Nextcloud或SeafileWeb服务器：Apache或Nginx数据库：MySQL或MariaDBSSL证书：自签名证书或Let'sEncrypt免费证书三、搭建步骤</div> </li> <li><a href="/article/1892570997295476736.htm" title="Linux 系统中的 .7z 压缩与解压详解" target="_blank">Linux 系统中的 .7z 压缩与解压详解</a> Crazy learner <a class="tag" taget="_blank" href="/search/Linux%E5%9F%BA%E6%9C%AC%E5%91%BD%E4%BB%A4/1.htm">Linux基本命令</a><a class="tag" taget="_blank" href="/search/C%2B%2B%E4%B8%8Epython%E7%BC%96%E7%A8%8B/1.htm">C++与python编程</a><a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/7z/1.htm">7z</a> <div>目录一、安装p7zip工具二、压缩文件到.7z格式三、解压.7z文件五、常见操作实例六、总结在Linux系统中，.7z是一种高效的压缩文件格式，通常使用p7zip工具来进行操作。7z格式以其高压缩率和支持多种压缩算法（如LZMA、LZMA2等）而闻名。本文将深入讲解如何在Linux环境下使用.7z文件格式进行压缩和解压操作，并通过多个实例帮助你掌握这些技能。一、安装p7zip工具在大多数Linux</div> </li> <li><a href="/article/1892566840337559552.htm" title="QT界面自适应" target="_blank">QT界面自适应</a> 天生爱打工 <a class="tag" taget="_blank" href="/search/qt/1.htm">qt</a><a class="tag" taget="_blank" href="/search/qt/1.htm">qt</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>一自适应工具类介绍:1.1功能控件能跟随界面大小的变化实现字体、大小同比例的变化1.2优点控件大小,字体可跟随界面大小同比例任意变化。同一套程序能兼容不同分辨率及不同DPI的显示器对于控件数目固定不变的UI区域:只需要将控件拖拽到指定位置即可，不需要使用弹簧及布局等qt属性对于控件数目有可能会根据需求变化的UI区域:可以使用qt原有的布局,但解放了qt原有布局中不能改变字体的属性。二自适应工具类使</div> </li> <li><a href="/article/1892566840790544384.htm" title="[QT] 断点调试" target="_blank">[QT] 断点调试</a> 天生爱打工 <a class="tag" taget="_blank" href="/search/qt/1.htm">qt</a><a class="tag" taget="_blank" href="/search/qt/1.htm">qt</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>目录一设置断点二调试窗口信息2.1默认窗口2.2详细窗口属性三调试方法和技巧一设置断点在QtCreator中我们有两种方式添加断点。用鼠标直接点击代码编辑窗口中的某一行按下F9添加/取消断点(操作的是当前鼠标光标所在的代码行)二调试窗口信息2.1默认窗口这里列出几个默认的窗口红色圆点表示断点,黄色箭头表示当前程序运行位置。stack:堆栈表示当前函数之间的调用关系，比如位于哪个函数体中。Local</div> </li> <li><a href="/article/1892564697887076352.htm" title="技术分享：MyBatis SQL 日志解析脚本" target="_blank">技术分享：MyBatis SQL 日志解析脚本</a> ￡漫步云端彡 <a class="tag" taget="_blank" href="/search/%E8%BF%90%E7%BB%B4%E8%B6%A3%E5%88%86%E4%BA%AB/1.htm">运维趣分享</a><a class="tag" taget="_blank" href="/search/sql/1.htm">sql</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/mybatis/1.htm">mybatis</a><a class="tag" taget="_blank" href="/search/%E6%97%A5%E5%BF%97%E8%A7%A3%E6%9E%90/1.htm">日志解析</a> <div>技术分享：MyBatisSQL日志解析脚本1.脚本功能概述2.实现细节2.1HTML结构2.2JavaScript逻辑3.脚本代码4.使用方法4.1示例5.总结在日常开发中，使用MyBatis作为持久层框架时，我们经常需要查看SQL日志以调试和优化查询。然而，MyBatis的日志输出通常包含占位符和参数信息，这使得直接执行这些SQL语句变得困难。为了解决这个问题，我们开发了一个简单的HTML和Ja</div> </li> <li><a href="/article/1892562803177353216.htm" title="前端：纯前端快速实现html导出word和pdf" target="_blank">前端：纯前端快速实现html导出word和pdf</a> m0_74823715 <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/word/1.htm">word</a> <div>实现html导出word，需要使用两个库。html-docx-js和file-saver导出word的js方法>npminstallhtml-docx-js>npminstallfile-saverjs引入importFileSaverfrom“file-saver”;importhtmlDocxfrom“html-docx-js/dist/html-docx”;/**导出word方法*/expo</div> </li> <li><a href="/article/1892561417320591360.htm" title="macOS Catalina 10.15 - 新增功能及其他信息记录" target="_blank">macOS Catalina 10.15 - 新增功能及其他信息记录</a> 伊织code <a class="tag" taget="_blank" href="/search/Apple/1.htm">Apple</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%2B/1.htm">开发+</a><a class="tag" taget="_blank" href="/search/10.15/1.htm">10.15</a><a class="tag" taget="_blank" href="/search/macOS/1.htm">macOS</a><a class="tag" taget="_blank" href="/search/Catalina/1.htm">Catalina</a><a class="tag" taget="_blank" href="/search/Sidecar/1.htm">Sidecar</a> <div>文章目录推荐阅读参考一、基本信息WWDC2019壁纸二、beta版本安装macOS10.15Xcode11三、新功能添加屏幕使用时间iPadOS应用可在Mac上运行APFS宗卷被拆分为只读的系统宗卷(System)和用户数据宗卷(Data)增加Findmy查找添加由Siri控制的「捷径」和「屏幕时间」AppleWatch可解锁MacSidecar：将iPad作为副显示屏四、其他变更终端shell建</div> </li> <li><a href="/article/1892558265674428416.htm" title="Linux：从入门到精通的全面指南" target="_blank">Linux：从入门到精通的全面指南</a> dbsnc1111 <a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/%E8%BF%90%E7%BB%B4/1.htm">运维</a><a class="tag" taget="_blank" href="/search/%E6%9C%8D%E5%8A%A1%E5%99%A8/1.htm">服务器</a> <div>一、引言Linux作为一种开源操作系统，犹如一座技术宝库，在当今的科技领域中占据着至关重要的地位。它以其卓越的稳定性、高度的安全性和无与伦比的灵活性，在服务器、嵌入式系统、个人计算机、超级计算机等众多领域广泛应用。无论是渴望提升技术水平的个人，还是寻求拓展职业道路的专业人士，学习Linux都无疑是开启新机遇之门的钥匙。以下是关于Linux的详细知识以及学习Linux的经验总结，希望能为正在学习或准</div> </li> <li><a href="/article/1892557634897244160.htm" title="游戏引擎学习第112天" target="_blank">游戏引擎学习第112天</a> 虾球xz <a class="tag" taget="_blank" href="/search/%E6%B8%B8%E6%88%8F%E5%BC%95%E6%93%8E/1.htm">游戏引擎</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>黑板：优化今天的内容是关于优化的，主要讨论了如何在开发中提高代码的效率，尤其是当游戏的帧率出现问题时。优化并不总是要将代码做到最快，而是要确保代码足够高效，以避免性能问题。优化的过程是一个反复迭代的过程，目标是找到一个“足够好”的解决方案，而不是追求极致优化。优化的第一步并不是直接优化代码，而是要进行测量和分析。这一步很重要，因为只有了解代码的表现和瓶颈，才能有效地进行优化。测量代码的性能，确定哪</div> </li> <li><a href="/article/1892555359852228608.htm" title="形参和实参" target="_blank">形参和实参</a> 2501_90124553 <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/1.htm">数据结构</a> <div>形参（形式参数）函数定义时指定的参数，形参是用来接收数据的，函数定义时，系统不会为形参申请内存，只有当函数调用时，系统才会为形参申请内存。主要用于存储实际参数，并且当函数返回时，系统会自动回收为形参申请的内存资源。（本质上所有函数都有一个return，只不过当我们的函数返回类型是void类型的时候，return是隐式）//关于默认returnvoidfun1(){//此时return;是不建议写出</div> </li> <li><a href="/article/1892551831196856320.htm" title="深入了解常见MCU架构：ARM、AVR与其他嵌入式系统" target="_blank">深入了解常见MCU架构：ARM、AVR与其他嵌入式系统</a> Crazy learner <a class="tag" taget="_blank" href="/search/%E6%A8%A1%E5%9E%8B%E9%83%A8%E7%BD%B2/1.htm">模型部署</a><a class="tag" taget="_blank" href="/search/%E6%9E%B6%E6%9E%84/1.htm">架构</a><a class="tag" taget="_blank" href="/search/mcu/1.htm">mcu</a> <div>目录**一、什么是MCU（微控制器单元）？****二、ARM架构微控制器****1.ARM架构简介****2.ARM架构特点****3.ARM架构应用领域****4.ARM架构的代表性MCU****三、AVR架构微控制器****1.AVR架构简介****2.AVR架构特点****3.AVR架构应用领域****4.AVR架构的代表性MCU****四、ARM与AVR架构对比****选择建议：****结</div> </li> <li><a href="/article/1892549055603601408.htm" title="C++ 给数组整体（批量）赋值" target="_blank">C++ 给数组整体（批量）赋值</a> xzal12 <a class="tag" taget="_blank" href="/search/C%2B%2B/1.htm">C++</a><a class="tag" taget="_blank" href="/search/c%2B%2B/1.htm">c++</a> <div>1、memset函数给数组按字节赋值为内存做初始化工作需要头文件#include(1)给char类型数组按字节赋值,其中char占一个字节(2)int类型数组按字节赋值0和1,其中int占4个字节=4*8位eg1:memset(a,0,sizeof(a));//将a数组所有元素均赋值为0eg2:memset(b,1,sizeof(b));//将b数组所有元素均赋值为二进制数2^0+2^8+2^16</div> </li> <li><a href="/article/1892544893620908032.htm" title="纯前端导入导出txt文件" target="_blank">纯前端导入导出txt文件</a> 今天吃了嘛o <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E5%AF%BC%E5%85%A5%E5%AF%BC%E5%87%BAtxt%E6%96%87%E4%BB%B6/1.htm">前端导入导出txt文件</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a> <div>1.html部分导入导出{{alone}}2.js部分导出的时候我尝试了很多次改变编码格式为gb2312的，但是无果，所以我再读取的时候先读取文件判断了文件编码格式，然后再去根据编码格式读取文件并展示页面。exportdefault{data(){return{works:[],};},methods:{handleBeforeUpload(file){this.fileList=[file];c</div> </li> <li><a href="/article/1892544513289809920.htm" title="jvm虚拟机详解（一）-----jvm概述" target="_blank">jvm虚拟机详解（一）-----jvm概述</a> Mir Su <a class="tag" taget="_blank" href="/search/JVM%E7%94%B1%E6%B5%85%E8%87%B3%E6%B7%B1/1.htm">JVM由浅至深</a><a class="tag" taget="_blank" href="/search/jvm/1.htm">jvm</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>写在前面本篇文章是再下人生中的第一次发布关于技术相关的文章。从事开发工作这么多年来，也算是对自己过往的工作的一个总结，对人生的一次重装再出发。从jvm谈起，然后是关于mysql、redis、消息中间件、微服务等最后在归纳一些常见的java面试方面的高频问题。这是开始我的一个写博计划，希望感兴趣的朋友加个关注一起探讨，有什么不做的地方也请欢迎指教。为什么要先说jvm呢？因为jvm是java程序蜕变的</div> </li> <li><a href="/article/1892541989010862080.htm" title="基于Linux平台的多实例RTSP|RTMP直播播放器深度解析与技术实现" target="_blank">基于Linux平台的多实例RTSP|RTMP直播播放器深度解析与技术实现</a> 音视频牛哥 <a class="tag" taget="_blank" href="/search/RTSP%E6%92%AD%E6%94%BE%E5%99%A8/1.htm">RTSP播放器</a><a class="tag" taget="_blank" href="/search/RTMP%E6%92%AD%E6%94%BE%E5%99%A8/1.htm">RTMP播放器</a><a class="tag" taget="_blank" href="/search/%E5%A4%A7%E7%89%9B%E7%9B%B4%E6%92%ADSDK/1.htm">大牛直播SDK</a><a class="tag" taget="_blank" href="/search/%E9%9F%B3%E8%A7%86%E9%A2%91/1.htm">音视频</a><a class="tag" taget="_blank" href="/search/%E5%AE%9E%E6%97%B6%E9%9F%B3%E8%A7%86%E9%A2%91/1.htm">实时音视频</a><a class="tag" taget="_blank" href="/search/%E8%A7%86%E9%A2%91%E7%BC%96%E8%A7%A3%E7%A0%81/1.htm">视频编解码</a><a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/rtsp%E6%92%AD%E6%94%BE%E5%99%A8/1.htm">rtsp播放器</a><a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/rtmp%E6%92%AD%E6%94%BE%E5%99%A8/1.htm">rtmp播放器</a><a class="tag" taget="_blank" href="/search/linux%E5%9B%BD%E4%BA%A7rtmp%E6%92%AD%E6%94%BE%E5%99%A8/1.htm">linux国产rtmp播放器</a><a class="tag" taget="_blank" href="/search/linux%E5%9B%BD%E4%BA%A7rtsp%E6%92%AD%E6%94%BE%E5%99%A8/1.htm">linux国产rtsp播放器</a> <div>一、引言在Linux平台上实现一个高性能、高并发的多实例播放器，是许多流媒体应用的核心需求。本文将结合大牛直播SDK的Linux平台RTSP/RTMP播放器功能，深入解析其实现原理、关键技术点以及优化策略。通过对代码的详细分析和实际应用的结合，帮助开发者更好地理解和应用该技术。二、项目概述本文基于以下代码实现了一个多实例播放器：multi_player_demo.cpp：主程序，负责初始化SDK、</div> </li> <li><a href="/article/1892541358825074688.htm" title="uniapp开发APP，主动连接mqtt，订阅消息" target="_blank">uniapp开发APP，主动连接mqtt，订阅消息</a> 路痴先森 <a class="tag" taget="_blank" href="/search/uni-app/1.htm">uni-app</a> <div>一、安装依赖通过查阅资料，了解到现在mqtt.js库的最新版本已经是5，但是目前应该mqtt@3.0.0版本最为稳定，我项目开发中使用的也是mqtt@3.0.0版本npminstallmqtt@3.0.0参考插件：MQTT使用-模板项目-DCloud插件市场参考文档：GitHub-mqttjs/MQTT.js:TheMQTTclientforNode.jsandthebrowser二、封装一个工具</div> </li> <li><a href="/article/1892540853390471168.htm" title="vuecli项目实战--管理系统" target="_blank">vuecli项目实战--管理系统</a> 团团kobebryant <a class="tag" taget="_blank" href="/search/%E9%A1%B9%E7%9B%AE/1.htm">项目</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/1.htm">前端框架</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</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/vue.js/1.htm">vue.js</a> <div>一、项目搭建HBuider直接：新建--项目--填项目名称、选地址、下拉选vue项目（2.6.10）项目结构这个样子：二、前端配置1.路由配置（地址）在src文件夹下创建router文件夹在router文件夹下面创建js文件index.js---配置组件的地址还有导航守卫、路由嵌套也配在这里1.组件路由2.组件路由嵌套3.路由导航记得跟vue对象关联还有导出路由嗷importVuefrom'vue</div> </li> <li><a href="/article/1892540094556991488.htm" title="Java 与设计模式（15）：模板方法模式" target="_blank">Java 与设计模式（15）：模板方法模式</a> 暗星涌动 <a class="tag" taget="_blank" href="/search/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/1.htm">设计模式</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/1.htm">设计模式</a><a class="tag" taget="_blank" href="/search/%E6%A8%A1%E6%9D%BF%E6%96%B9%E6%B3%95%E6%A8%A1%E5%BC%8F/1.htm">模板方法模式</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> <div>一、定义模板方法模式是一种行为设计模式，它定义了一个操作中的算法的骨架（也就是大致的步骤和流程），而将一些具体步骤的实现延迟到子类中。这样，子类可以不改变算法的结构即可重新定义算法的某些特定步骤。二、Java示例举个简单的例子：假设我们要泡一杯茶和一杯咖啡，这两者的制作过程有一些共同的步骤，比如烧水、倒水、搅拌等，但也有不同的地方，比如茶需要放茶叶，而咖啡需要放咖啡粉。泡茶的过程：烧水、放茶叶、倒</div> </li> <li><a href="/article/1892539968312635392.htm" title="基于若依和flowable6.7.2的ruoyi-nbcio流程管理系统正式发布" target="_blank">基于若依和flowable6.7.2的ruoyi-nbcio流程管理系统正式发布</a> 宁波阿成 <a class="tag" taget="_blank" href="/search/ruoyi-nbcio/1.htm">ruoyi-nbcio</a><a class="tag" taget="_blank" href="/search/%E8%8B%A5%E4%BE%9D/1.htm">若依</a><a class="tag" taget="_blank" href="/search/flowable/1.htm">flowable</a><a class="tag" taget="_blank" href="/search/flowable/1.htm">flowable</a><a class="tag" taget="_blank" href="/search/%E8%8B%A5%E4%BE%9D/1.htm">若依</a><a class="tag" taget="_blank" href="/search/ruoyi-nbcio/1.htm">ruoyi-nbcio</a><a class="tag" taget="_blank" href="/search/ruoyi/1.htm">ruoyi</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/vue/1.htm">vue</a> <div>更多ruoyi-nbcio功能请看演示系统gitee源代码地址前后端代码：https://gitee.com/nbacheng/ruoyi-nbcio演示地址：RuoYi-Nbcio后台管理系统项目概要本项目基于RuoYi-Flowable-Plus进行二次开发，从nbcio-boot(https://gitee.com/nbacheng/nbcio-boot)项目</</div> </li> <li><a href="/article/1892539085134819328.htm" title="记录App中加入Mqtt实现过程" target="_blank">记录App中加入Mqtt实现过程</a> 街角的小菜鸟 <a class="tag" taget="_blank" href="/search/Android%E5%BC%80%E5%8F%91/1.htm">Android开发</a> <div>前言因为公司项目里因为功能的修改，移除了关于无人机飞控控制的代码部分，软件中无人机信息变更为通过mqtt获取，通过翻阅网上资料后，终于实现了该功能。现在写下来，以免再次用到要重新查找资料。MQTT的相关了解Topic：订阅的主题。URI：MQTT服务器的地址例如："tcp://"+MQTT_HOST+":"+MQTT_PORTusername&password：账户与密码ClientId：客户端的</div> </li> <li><a href="/article/1892538707169308672.htm" title="若依前后端分离集成CAS详细教程" target="_blank">若依前后端分离集成CAS详细教程</a> Roc-xb <a class="tag" taget="_blank" href="/search/%E5%8D%95%E7%82%B9%E7%99%BB%E5%BD%95/1.htm">单点登录</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB/1.htm">前后端分离</a><a class="tag" taget="_blank" href="/search/CAS/1.htm">CAS</a> <div>目录一、后端配置1、添加cas依赖2、修改配置文件3、修改LoginUser.java4、修改Constants.java5、添加CasProperties.java6、添加CasUserDetailsService.java7、添加CasAuthenticationSuccessHandler.java8、修改SecurityConfig9、启动后端二、前端配置1、修改settings.js2、</div> </li> <li><a href="/article/1892538578999767040.htm" title="基于Transformer的YOLOv8检测头架构改进：提升目标检测精度的全新突破（YOLOv8）" target="_blank">基于Transformer的YOLOv8检测头架构改进：提升目标检测精度的全新突破（YOLOv8）</a> 步入烟尘 <a class="tag" taget="_blank" href="/search/transformer/1.htm">transformer</a><a class="tag" taget="_blank" href="/search/YOLO/1.htm">YOLO</a><a class="tag" taget="_blank" href="/search/%E7%9B%AE%E6%A0%87%E6%A3%80%E6%B5%8B/1.htm">目标检测</a> <div>本专栏专为AI视觉领域的爱好者和从业者打造。涵盖分类、检测、分割、追踪等多项技术，带你从入门到精通！后续更有实战项目，助你轻松应对面试挑战！立即订阅，开启你的YOLOv8之旅！专栏订阅地址：https://blog.csdn.net/mrdeam/category_12804295.html文章目录基于Transformer的YOLOv8检测头架构改进：提升目标检测精度的全新突破什么是DAtten</div> </li> <li><a href="/article/1892537571427282944.htm" title="一文读懂MUSIC算法DOA估计的数学原理并仿真" target="_blank">一文读懂MUSIC算法DOA估计的数学原理并仿真</a> 迎风打盹儿 <a class="tag" taget="_blank" href="/search/%E9%98%B5%E5%88%97%E4%BF%A1%E5%8F%B7%E5%A4%84%E7%90%86/1.htm">阵列信号处理</a><a class="tag" taget="_blank" href="/search/MUSIC%E7%AE%97%E6%B3%95/1.htm">MUSIC算法</a><a class="tag" taget="_blank" href="/search/DOA%E4%BC%B0%E8%AE%A1/1.htm">DOA估计</a><a class="tag" taget="_blank" href="/search/%E9%98%B5%E5%88%97%E4%BF%A1%E5%8F%B7%E5%A4%84%E7%90%86/1.htm">阵列信号处理</a><a class="tag" taget="_blank" href="/search/%E4%BF%A1%E5%8F%B7%E5%AD%90%E7%A9%BA%E9%97%B4/1.htm">信号子空间</a><a class="tag" taget="_blank" href="/search/%E5%99%AA%E5%A3%B0%E5%AD%90%E7%A9%BA%E9%97%B4/1.htm">噪声子空间</a> <div>一文读懂MUSIC算法DOA估计的数学原理并仿真文章目录前言一、DOA估计基本原理二、MATLAB仿真总结前言MUSIC（MultipleSignalClassification）算法于1979年由R.O.Schmidt提出，是阵列信号处理中广泛应用的经典DOA（DirectionofArrival）估计算法，凭借其超分辨的估计性能受到广泛关注。本文将从数学公式推导的角度出发系统阐述MUSIC算法</div> </li> <li><a href="/article/1892537067355828224.htm" title="排序算法：冒泡排序（Python）" target="_blank">排序算法：冒泡排序（Python）</a> 娱乐不打烊丶 <a class="tag" taget="_blank" href="/search/%E6%8E%92%E5%BA%8F%E7%AE%97%E6%B3%95/1.htm">排序算法</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/1.htm">数据结构</a> <div>思路：大家一定都喝过汽水吧，汽水中常常有许多小小的气泡，往上飘，这是因为组成小气泡的二氧化碳比水要轻，所以小气泡才会一点一点的向上浮。而冒泡排序之所以叫冒泡排序，正是因为这种排序算法的每一个元素都可以向小气泡一样，根据自身大小，一点一点向着数组的一侧移动。一图解百惑，上图！那么，话不多说，上代码！defbubble_sort(input_list):#冒泡排序：每次循环，锁定一个最值，并朝着最大或</div> </li> <li><a href="/article/1892536436008218624.htm" title="图片粘贴上传实现" target="_blank">图片粘贴上传实现</a> SarinaDu <a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a> <div>图片上传htmldemo直接粘贴本地运行查看效果即可，有看不懂的直接喂给deepseek会解释的很清晰粘贴图片上传示例-使用场景，粘贴桌面图片上传、粘贴word文档中图片上传、直接截图上传等body{font-family:Arial,sans-serif;padding:20px;}.upload-area{width:100%;height:200px;border:2pxdashed#ccc</div> </li> <li><a href="/article/1892535930644918272.htm" title="Vue 基础二（进阶使用）" target="_blank">Vue 基础二（进阶使用）</a> 诚信爱国敬业友善 <a class="tag" taget="_blank" href="/search/Vue/1.htm">Vue</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>一、Vue的响应式系统（一）Vue响应式的原理Vue的核心特性之一是响应式数据绑定系统。它允许我们轻松地将数据与视图进行绑定，当数据发生变化时，视图会自动更新。Vue内部通过Object.defineProperty或Proxy来实现这一特性。Object.defineProperty：在Vue2.x中，Vue使用Object.defineProperty来劫持对象的属性。当我们访问或修改被Obj</div> </li> <li><a href="/article/22.htm" title="redis学习笔记——不仅仅是存取数据" target="_blank">redis学习笔记——不仅仅是存取数据</a> Everyday都不同 <a class="tag" taget="_blank" href="/search/returnSource/1.htm">returnSource</a><a class="tag" taget="_blank" href="/search/expire%2Fdel/1.htm">expire/del</a><a class="tag" taget="_blank" href="/search/incr%2Flpush/1.htm">incr/lpush</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93%E5%88%86%E5%8C%BA/1.htm">数据库分区</a><a class="tag" taget="_blank" href="/search/redis/1.htm">redis</a> <div>最近项目中用到比较多redis，感觉之前对它一直局限于get/set数据的层面。其实作为一个强大的NoSql数据库产品，如果好好利用它，会带来很多意想不到的效果。（因为我搞java，所以就从jedis的角度来补充一点东西吧。PS：不一定全，只是个人理解，不喜勿喷） 1、关于JedisPool.returnSource(Jedis jeids) 这个方法是从red</div> </li> <li><a href="/article/149.htm" title="SQL性能优化-持续更新中。。。。。。" target="_blank">SQL性能优化-持续更新中。。。。。。</a> atongyeye <a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a><a class="tag" taget="_blank" href="/search/sql/1.htm">sql</a> <div>1 通过ROWID访问表--索引你可以采用基于ROWID的访问方式情况,提高访问表的效率, , ROWID包含了表中记录的物理位置信息..ORACLE采用索引(INDEX)实现了数据和存放数据的物理位置(ROWID)之间的联系. 通常索引提供了快速访问ROWID的方法,因此那些基于索引列的查询就可以得到性能上的提高. 2 共享SQL语句--相同的sql放入缓存 3 选择最有效率的表</div> </li> <li><a href="/article/276.htm" title="[JAVA语言]JAVA虚拟机对底层硬件的操控还不完善" target="_blank">[JAVA语言]JAVA虚拟机对底层硬件的操控还不完善</a> comsci <a class="tag" taget="_blank" href="/search/JAVA%E8%99%9A%E6%8B%9F%E6%9C%BA/1.htm">JAVA虚拟机</a> <div> 如果我们用汇编语言编写一个直接读写CPU寄存器的代码段，然后利用这个代码段去控制被操作系统屏蔽的硬件资源，这对于JVM虚拟机显然是不合法的，对操作系统来讲，这样也是不合法的，但是如果是一个工程项目的确需要这样做，合同已经签了，我们又不能够这样做，怎么办呢？那么一个精通汇编语言的那种X客，是否在这个时候就会发生某种至关重要的作用呢？ &n</div> </li> <li><a href="/article/403.htm" title="lvs- real" target="_blank">lvs- real</a> 男人50 <a class="tag" taget="_blank" href="/search/LVS/1.htm">LVS</a> <div>#!/bin/bash # # Script to start LVS DR real server. # description: LVS DR real server # #. /etc/rc.d/init.d/functions VIP=10.10.6.252 host='/bin/hostname' case "$1" in sta</div> </li> <li><a href="/article/530.htm" title="生成公钥和私钥" target="_blank">生成公钥和私钥</a> oloz <a class="tag" taget="_blank" href="/search/DSA/1.htm">DSA</a><a class="tag" taget="_blank" href="/search/%E5%AE%89%E5%85%A8%E5%8A%A0%E5%AF%86/1.htm">安全加密</a> <div>package com.msserver.core.util; import java.security.KeyPair; import java.security.PrivateKey; import java.security.PublicKey; import java.security.SecureRandom; public class SecurityUtil { </div> </li> <li><a href="/article/657.htm" title="UIView 中加入的cocos2d，背景透明" target="_blank">UIView 中加入的cocos2d，背景透明</a> 374016526 <a class="tag" taget="_blank" href="/search/cocos2d/1.htm">cocos2d</a><a class="tag" taget="_blank" href="/search/glClearColor/1.htm">glClearColor</a> <div>要点是首先pixelFormat:kEAGLColorFormatRGBA8，必须有alpha层才能透明。然后view设置为透明glView.opaque = NO;[director setOpenGLView:glView];[self.viewController.view setBackgroundColor:[UIColor clearColor]];[self.viewControll</div> </li> <li><a href="/article/784.htm" title="mysql常用命令" target="_blank">mysql常用命令</a> 香水浓 <a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a> <div>连接数据库 mysql -u troy -ptroy 备份表 mysqldump -u troy -ptroy mm_database mm_user_tbl > user.sql 恢复表（与恢复数据库命令相同） mysql -u troy -ptroy mm_database < user.sql 备份数据库 mysqldump -u troy -ptroy</div> </li> <li><a href="/article/911.htm" title="我的架构经验系列文章 - 后端架构 - 系统层面" target="_blank">我的架构经验系列文章 - 后端架构 - 系统层面</a> agevs <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/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a> <div>系统层面：高可用性所谓高可用性也就是通过避免单独故障加上快速故障转移实现一旦某台物理服务器出现故障能实现故障快速恢复。一般来说，可以采用两种方式，如果可以做业务可以做负载均衡则通过负载均衡实现集群，然后针对每一台服务器进行监控，一旦发生故障则从集群中移除；如果业务只能有单点入口那么可以通过实现Standby机加上虚拟IP机制，实现Active机在出现故障之后虚拟IP转移到Standby的快速</div> </li> <li><a href="/article/1038.htm" title="利用ant进行远程tomcat部署" target="_blank">利用ant进行远程tomcat部署</a> aijuans <a class="tag" taget="_blank" href="/search/tomcat/1.htm">tomcat</a> <div>在javaEE项目中，需要将工程部署到远程服务器上，如果部署的频率比较高，手动部署的方式就比较麻烦，可以利用Ant工具实现快捷的部署。这篇博文详细介绍了ant配置的步骤（http://www.cnblogs.com/GloriousOnion/archive/2012/12/18/2822817.html），但是在tomcat7以上不适用，需要修改配置，具体如下： 1.配置tomcat的用户角色</div> </li> <li><a href="/article/1165.htm" title="获取复利总收入" target="_blank">获取复利总收入</a> baalwolf <a class="tag" taget="_blank" href="/search/%E8%8E%B7%E5%8F%96/1.htm">获取</a> <div> public static void main(String args[]){ int money=200; int year=1; double rate=0.1; &</div> </li> <li><a href="/article/1292.htm" title="eclipse.ini解释" target="_blank">eclipse.ini解释</a> BigBird2012 <a class="tag" taget="_blank" href="/search/eclipse/1.htm">eclipse</a> <div>大多数java开发者使用的都是eclipse，今天感兴趣去eclipse官网搜了一下eclipse.ini的配置，供大家参考，我会把关键的部分给大家用中文解释一下。还是推荐有问题不会直接搜谷歌，看官方文档，这样我们会知道问题的真面目是什么，对问题也有一个全面清晰的认识。 Overview 1、Eclipse.ini的作用 Eclipse startup is controlled by th</div> </li> <li><a href="/article/1419.htm" title="AngularJS实现分页功能" target="_blank">AngularJS实现分页功能</a> bijian1013 <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/AngularJS/1.htm">AngularJS</a><a class="tag" taget="_blank" href="/search/%E5%88%86%E9%A1%B5/1.htm">分页</a> <div> 对于大多数web应用来说显示项目列表是一种很常见的任务。通常情况下，我们的数据会比较多，无法很好地显示在单个页面中。在这种情况下，我们需要把数据以页的方式来展示，同时带有转到上一页和下一页的功能。既然在整个应用中这是一种很常见的需求，那么把这一功能抽象成一个通用的、可复用的分页（Paginator）服务是很有意义的。 &nbs</div> </li> <li><a href="/article/1546.htm" title="[Maven学习笔记三]Maven archetype" target="_blank">[Maven学习笔记三]Maven archetype</a> bit1129 <a class="tag" taget="_blank" href="/search/ArcheType/1.htm">ArcheType</a> <div>archetype的英文意思是原型，Maven archetype表示创建Maven模块的模版，比如创建web项目，创建Spring项目等等. mvn archetype提供了一种命令行交互式创建Maven项目或者模块的方式， mvn archetype 1.在LearnMaven-ch03目录下，执行命令mvn archetype:gener</div> </li> <li><a href="/article/1673.htm" title="【Java命令三】jps" target="_blank">【Java命令三】jps</a> bit1129 <a class="tag" taget="_blank" href="/search/Java%E5%91%BD%E4%BB%A4/1.htm">Java命令</a> <div>jps很简单，用于显示当前运行的Java进程，也可以连接到远程服务器去查看 [hadoop@hadoop bin]$ jps -help usage: jps [-help] jps [-q] [-mlvV] [<hostid>] Definitions: <hostid>: <hostname>[:</div> </li> <li><a href="/article/1800.htm" title="ZABBIX2.2 2.4 等各版本之间的兼容性" target="_blank">ZABBIX2.2 2.4 等各版本之间的兼容性</a> ronin47 <div>zabbix更新很快，从2009年到现在已经更新多个版本，为了使用更多zabbix的新特性，随之而来的便是升级版本，zabbix版本兼容性是必须优先考虑的一点客户端AGENT兼容 zabbix1.x到zabbix2.x的所有agent都兼容zabbix server2.4：如果你升级zabbix server，客户端是可以不做任何改变，除非你想使用agent的一些新特性。 Zabbix代理（p</div> </li> <li><a href="/article/1927.htm" title="unity 3d还是cocos2dx哪个适合游戏？" target="_blank">unity 3d还是cocos2dx哪个适合游戏？</a> brotherlamp <a class="tag" taget="_blank" href="/search/unity%E8%87%AA%E5%AD%A6/1.htm">unity自学</a><a class="tag" taget="_blank" href="/search/unity%E6%95%99%E7%A8%8B/1.htm">unity教程</a><a class="tag" taget="_blank" href="/search/unity%E8%A7%86%E9%A2%91/1.htm">unity视频</a><a class="tag" taget="_blank" href="/search/unity%E8%B5%84%E6%96%99/1.htm">unity资料</a><a class="tag" taget="_blank" href="/search/unity/1.htm">unity</a> <div>unity 3d还是cocos2dx哪个适合游戏？问：unity 3d还是cocos2dx哪个适合游戏？答：首先目前来看unity视频教程因为是3d引擎，目前对2d支持并不完善，unity 3d 目前做2d普遍两种思路，一种是正交相机，3d画面2d视角，另一种是通过一些插件，动态创建mesh来绘制图形单元目前用的较多的是2d toolkit，ex2d，smooth moves，sm2， </div> </li> <li><a href="/article/2054.htm" title="百度笔试题：一个已经排序好的很大的数组，现在给它划分成m段，每段长度不定，段长最长为k，然后段内打乱顺序，请设计一个算法对其进行重新排序" target="_blank">百度笔试题：一个已经排序好的很大的数组，现在给它划分成m段，每段长度不定，段长最长为k，然后段内打乱顺序，请设计一个算法对其进行重新排序</a> bylijinnan <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a><a class="tag" taget="_blank" href="/search/%E7%99%BE%E5%BA%A6/1.htm">百度</a><a class="tag" taget="_blank" href="/search/%E6%8B%9B%E8%81%98/1.htm">招聘</a> <div> import java.util.Arrays; /** * 最早是在陈利人老师的微博看到这道题： * #面试题#An array with n elements which is K most sorted，就是每个element的初始位置和它最终的排序后的位置的距离不超过常数K * 设计一个排序算法。It should be faster than O(n*lgn)。</div> </li> <li><a href="/article/2181.htm" title="获取checkbox复选框的值" target="_blank">获取checkbox复选框的值</a> chiangfai <a class="tag" taget="_blank" href="/search/checkbox/1.htm">checkbox</a> <div><title>CheckBox</title> <script type = "text/javascript"> doGetVal: function doGetVal() { //var fruitName = document.getElementById("apple").value;//根据</div> </li> <li><a href="/article/2308.htm" title="MySQLdb用户指南" target="_blank">MySQLdb用户指南</a> chenchao051 <a class="tag" taget="_blank" href="/search/mysqldb/1.htm">mysqldb</a> <div>原网页被墙，放这里备用。 MySQLdb User's Guide Contents Introduction Installation _mysql MySQL C API translation MySQL C API function mapping Some _mysql examples MySQLdb </div> </li> <li><a href="/article/2435.htm" title="HIVE 窗口及分析函数" target="_blank">HIVE 窗口及分析函数</a> daizj <a class="tag" taget="_blank" href="/search/hive/1.htm">hive</a><a class="tag" taget="_blank" href="/search/%E7%AA%97%E5%8F%A3%E5%87%BD%E6%95%B0/1.htm">窗口函数</a><a class="tag" taget="_blank" href="/search/%E5%88%86%E6%9E%90%E5%87%BD%E6%95%B0/1.htm">分析函数</a> <div>窗口函数应用场景：（1）用于分区排序（2）动态Group By （3）Top N （4）累计计算（5）层次查询一、分析函数用于等级、百分点、n分片等。函数说明 RANK() &nbs</div> </li> <li><a href="/article/2562.htm" title="PHP ZipArchive 实现压缩解压Zip文件" target="_blank">PHP ZipArchive 实现压缩解压Zip文件</a> dcj3sjt126com <a class="tag" taget="_blank" href="/search/PHP/1.htm">PHP</a><a class="tag" taget="_blank" href="/search/zip/1.htm">zip</a> <div> PHP ZipArchive 是PHP自带的扩展类，可以轻松实现ZIP文件的压缩和解压，使用前首先要确保PHP ZIP 扩展已经开启，具体开启方法就不说了，不同的平台开启PHP扩增的方法网上都有，如有疑问欢迎交流。这里整理一下常用的示例供参考。一、解压缩zip文件 01 02 03 04 05 06 07 08 09 10 11 </div> </li> <li><a href="/article/2689.htm" title="精彩英语贺词" target="_blank">精彩英语贺词</a> dcj3sjt126com <a class="tag" taget="_blank" href="/search/%E8%8B%B1%E8%AF%AD/1.htm">英语</a> <div>I'm always here 我会一直在这里支持你 &nb</div> </li> <li><a href="/article/2816.htm" title="基于Java注解的Spring的IoC功能" target="_blank">基于Java注解的Spring的IoC功能</a> e200702084 <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/bean/1.htm">bean</a><a class="tag" taget="_blank" href="/search/IOC/1.htm">IOC</a><a class="tag" taget="_blank" href="/search/Office/1.htm">Office</a> <div> </div> </li> <li><a href="/article/2943.htm" title="java模拟post请求" target="_blank">java模拟post请求</a> geeksun <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>一般API接收客户端（比如网页、APP或其他应用服务）的请求，但在测试时需要模拟来自外界的请求，经探索，使用HttpComponentshttpClient可模拟Post提交请求。此处用HttpComponents的httpclient来完成使命。 import org.apache.http.HttpEntity ; import org.apache.http.HttpRespon</div> </li> <li><a href="/article/3070.htm" title="Swift语法之 ---- ?和!区别" target="_blank">Swift语法之 ---- ?和!区别</a> hongtoushizi <a class="tag" taget="_blank" href="/search/%3F/1.htm">?</a><a class="tag" taget="_blank" href="/search/swift/1.htm">swift</a><a class="tag" taget="_blank" href="/search/%21/1.htm">!</a> <div>转载自： http://blog.sina.com.cn/s/blog_71715bf80102ux3v.html Swift语言使用var定义变量，但和别的语言不同，Swift里不会自动给变量赋初始值，也就是说变量不会有默认值，所以要求使用变量之前必须要对其初始化。如果在使用变量之前不进行初始化就会报错： var stringValue : String //</div> </li> <li><a href="/article/3197.htm" title="centos7安装jdk1.7" target="_blank">centos7安装jdk1.7</a> jisonami <a class="tag" taget="_blank" href="/search/jdk/1.htm">jdk</a><a class="tag" taget="_blank" href="/search/centos/1.htm">centos</a> <div>安装JDK1.7 步骤1、解压tar包在当前目录 [root@localhost usr]#tar -xzvf jdk-7u75-linux-x64.tar.gz 步骤2：配置环境变量在etc/profile文件下添加 export JAVA_HOME=/usr/java/jdk1.7.0_75 export CLASSPATH=/usr/java/jdk1.7.0_75/lib </div> </li> <li><a href="/article/3324.htm" title="数据源架构模式之数据映射器" target="_blank">数据源架构模式之数据映射器</a> home198979 <a class="tag" taget="_blank" href="/search/PHP/1.htm">PHP</a><a class="tag" taget="_blank" href="/search/%E6%9E%B6%E6%9E%84/1.htm">架构</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E6%98%A0%E5%B0%84%E5%99%A8/1.htm">数据映射器</a><a class="tag" taget="_blank" href="/search/datamapper/1.htm">datamapper</a> <div>前面分别介绍了数据源架构模式之表数据入口、数据源架构模式之行和数据入口数据源架构模式之活动记录，相较于这三种数据源架构模式，数据映射器显得更加“高大上”。一、概念数据映射器（Data Mapper）：在保持对象和数据库（以及映射器本身）彼此独立的情况下，在二者之间移动数据的一个映射器层。概念永远都是抽象的，简单的说，数据映射器就是一个负责将数据映射到对象的类数据。 &nb</div> </li> <li><a href="/article/3451.htm" title="在Python中使用MYSQL" target="_blank">在Python中使用MYSQL</a> pda158 <a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a> <div>缘由　　近期在折腾一个小东西须要抓取网上的页面。然后进行解析。将结果放到数据库中。　　了解到 Python在这方面有优势，便选用之。　　由于我有台 server上面安装有 mysql，自然使用之。在进行数据库的这个操作过程中遇到了不少问题，这里记录一下，大家共勉。　　 python中mysql的调用　　百度之后能够通过MySQLdb进行数据库操作。</div> </li> <li><a href="/article/3578.htm" title="单例模式" target="_blank">单例模式</a> hxl1988_0311 <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%8D%95%E4%BE%8B/1.htm">单例</a><a class="tag" taget="_blank" href="/search/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/1.htm">设计模式</a><a class="tag" taget="_blank" href="/search/%E5%8D%95%E4%BB%B6/1.htm">单件</a> <div>package com.sosop.designpattern.singleton; /* * 单件模式：保证一个类必须只有一个实例，并提供全局的访问点 * * 所以单例模式必须有私有的构造器，没有私有构造器根本不用谈单件 * * 必须考虑到并发情况下创建了多个实例对象 * */ /** * 虽然有锁，但是只在第一次创建对象的时候加锁，并发时不会存在效率</div> </li> <li><a href="/article/3705.htm" title="27种迹象显示你应该辞掉程序员的工作" target="_blank">27种迹象显示你应该辞掉程序员的工作</a> vipshichg <a class="tag" taget="_blank" href="/search/%E5%B7%A5%E4%BD%9C/1.htm">工作</a> <div>1、你仍然在等待老板在2010年答应的要提拔你的暗示。 2、你的上级近10年没有开发过任何代码。 3、老板假装懂你说的这些技术，但实际上他完全不知道你在说什么。 4、你干完的项目6个月后才部署到现场服务器上。 5、时不时的，老板在检查你刚刚完成的工作时，要求按新想法重新开发。 6、而最终这个软件只有12个用户。 7、时间全浪费在办公室政治中，而不是用在开发好的软件上。 8、部署前5分钟才开始测试。</div> </li> </ul> </div> </div> </div> <div> <div class="container"> <div class="indexes"> 按字母分类： <a href="/tags/A/1.htm" target="_blank">A</a><a href="/tags/B/1.htm" target="_blank">B</a><a href="/tags/C/1.htm" target="_blank">C</a><a href="/tags/D/1.htm" target="_blank">D</a><a href="/tags/E/1.htm" target="_blank">E</a><a href="/tags/F/1.htm" target="_blank">F</a><a href="/tags/G/1.htm" target="_blank">G</a><a href="/tags/H/1.htm" target="_blank">H</a><a href="/tags/I/1.htm" target="_blank">I</a><a href="/tags/J/1.htm" target="_blank">J</a><a href="/tags/K/1.htm" target="_blank">K</a><a href="/tags/L/1.htm" target="_blank">L</a><a href="/tags/M/1.htm" target="_blank">M</a><a href="/tags/N/1.htm" target="_blank">N</a><a href="/tags/O/1.htm" target="_blank">O</a><a href="/tags/P/1.htm" target="_blank">P</a><a href="/tags/Q/1.htm" target="_blank">Q</a><a href="/tags/R/1.htm" target="_blank">R</a><a href="/tags/S/1.htm" target="_blank">S</a><a href="/tags/T/1.htm" target="_blank">T</a><a href="/tags/U/1.htm" target="_blank">U</a><a href="/tags/V/1.htm" target="_blank">V</a><a href="/tags/W/1.htm" target="_blank">W</a><a href="/tags/X/1.htm" target="_blank">X</a><a href="/tags/Y/1.htm" target="_blank">Y</a><a href="/tags/Z/1.htm" target="_blank">Z</a><a href="/tags/0/1.htm" target="_blank">其他</a> </div> </div> </div> <footer id="footer" class="mb30 mt30"> <div class="container"> <div class="footBglm"> <a target="_blank" href="/">首页</a> - <a target="_blank" href="/custom/about.htm">关于我们</a> - <a target="_blank" href="/search/Java/1.htm">站内搜索</a> - <a target="_blank" href="/sitemap.txt">Sitemap</a> - <a target="_blank" href="/custom/delete.htm">侵权投诉</a> </div> <div class="copyright">版权所有 IT知识库 CopyRight © 2000-2050 E-COM-NET.COM , All Rights Reserved.  </div> </div> </footer>  <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shCore.js"></script> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shLegacy.js"></script> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shAutoloader.js"></script> <link type="text/css" rel="stylesheet" href="/static/syntaxhighlighter/styles/shCoreDefault.css"/> <script type="text/javascript" src="/static/syntaxhighlighter/src/my_start_1.js"></script> </body> </html>