关于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.编码 (,为了确保恰当的解释,以及正确的搜索引擎索引,在文档中对语言和字符编码的定义越早越好,在元素之前)</p> <p>3.为IE添加支持的脚本/shiv (后面有讲)</p> <p>4.添加了语义化元素(<header>,<footer>,<section>,<article>,<nav>等等)</p> <hr> <p>除了以上元素,还增加了以下元素:<br></p> <p><bdi> 与其他文本不同的文本方向。</p> <p><dialog> 对话框或窗口。</p> <p><enuitem> 用户能够从弹出菜单调用的命令/菜单项目。</p> <p><meter> 已知范围(尺度)内的标量测量。</p> <p><progress> 任务进度。</p> <p><rp> 在不支持 ruby 注释的浏览器中显示什么。</p> <p><rt> 关于字符的解释/发音(用于东亚字体)。</p> <p><ruby> ruby 注释(用于东亚字体)。</p> <p><wbr> 可能的折行(line-break)。</p> <p><br></p> <p>- 可以向 HTML 添加新元素,并为其定义样式(<<br>myHero>)( JavaScript 语句document.createElement("myHero"),仅适用于 IE。)</p> <hr> <p>Internet Explorer 的问题<br></p> <p>上述方案可用于所有新的 HTML5 元素,但是:</p> <p>注意:Internet Explorer 8 以及更早的版本,不允许对未知元素添加样式。</p> <p>幸运的是,Sjoerd Visscher 创造了 "HTML5 Enabling JavaScript",<i>"the shiv"</i>:</p> <p><!--[if lt IE 9]></p> <p><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"><br></p> <p><![endif]--></p> <p>以上代码必须位于<head>元素内。<br></p> <hr> <p><i>所有浏览器,不论新旧,都会自动把未识别元素当做行内元素来处理。</i><br></p> <hr> <p><i>建议始终使用小写</i></p> <hr> <p>表单:</p> <p><br></p> <p>HTML5中新增表单元素:<datalist>,<keygen>,<output><br></p> <p><br></p> <p>type       IE       Firefox       Opera     Chrome     Safari</p> <p>datalist     No       No             9.5             No           No</p> <p>keygen      No      No              10.5          3.0          No</p> <p>output        No      No              9.5            No           No</p> <p><br></p> <p><datalist> 输入控件的预定义选项 / 规定输入域的选项列表,列表是通过 datalist 内的 option 元素创建的,<i>option 元素永远都要设置 value 属性。</i><br></p> <p>例子:</p> <p><datalist>元素为<input>元素规定预定义选项列表。用户会在他们输入数据时看到预定义选项的下拉列表。<input>元素的list属性必须引用<datalist>元素的id属性。</p> <p><form action="action_page.php"></p> <p><input list="browsers"></p> <p><datalist id="browsers"></p> <p><option value="Internet Explorer"></p> <p><option value="Firefox"></p> <p><option value="Chrome"></p> <p><option value="Opera"></p> <p><option value="Safari"></p> <p></datalist></p> <p></form></p> <p><br></p> <p>例子2:</p> <p>datalist 元素规定输入域的选项列表。列表是通过 datalist 内的 option 元素创建的。</p> <p>如需把 datalist 绑定到输入域,请用输入域的 list 属性引用 datalist 的 id:<br></p> <p>Webpage: <input type="url"list="url_list"name="link" /></p> <p><datalist id="url_list"></p> <p><option label="W3School" value="http://www.W3School.com.cn" /></p> <p><option label="Google" value="http://www.google.com" /></p> <p><option label="Microsoft" value="http://www.microsoft.com" /></p> <p></datalist></p> <p><br></p> <p><keygen> 键对生成器字段(用于表单)。</p> <p><keygen>元素的作用是提供一种验证用户的可靠方法,是密钥对生成器(key-pair generator)。当提交表单时,会生成两个键,一个是私钥,一个公钥。</p> <p>私钥(private key)存储于客户端,公钥(public key)则被发送到服务器。公钥可用于之后验证用户的客户端证书(client certificate)。<br></p> <p><b><i>目前,浏览器对此元素的糟糕的支持度不足以使其成为一种有用的安全标准。</i></b><br></p> <p>例子:</p> <p><form action="demo_form.asp" method="get"></p> <p>Username: <input type="text" name="usr_name" /></p> <p>Encryption:<keygen name="security" /></p> <p><input type="submit" /></p> <p></form></p> <p><br></p> <p><output> 计算结果。(用于不同类型的输出,比如计算或脚本输出)</p> <p><output id="result" onforminput="resCalc()"></output></p> <p>= = = = = = = = = = = =</p> <p>HTML5新增输入类型:number,color,date,datetime,datetime-local,email,month,range,search,tel,time,url,week(注释:老式 web 浏览器不支持的输入类型,会被视为输入类型 text。)<br></p> <p><br></p> <p>(Opera 对新的输入类型的支持最好。不过您已经可以在所有主流的浏览器中使用它们了。即使不被支持,仍然可以显示为常规的文本域。)<br></p> <p>type          IE     Firefox     Opera      Chrome       Safari</p> <p>email          No         4.0          9.0         10.0           No</p> <p>url              No          4.0           9.0           10.0         No</p> <p>number       No        No            9.0            7.0          No</p> <p>range           No          No          9.0           4.0          4.0</p> <p>Date pickers   No       No          9.0          10.0          No</p> <p>search          No         4.0           11.0          10.0       No</p> <p>color             No         No            11.0         No          No</p> <p><br></p> <p>数字输入:<input type="number" name="" min="" max="" step="10" value="30"></p> <p><i>PS:提示:iPhone 中的 Safari 浏览器支持 number 输入类型,并通过改变触摸屏键盘来配合它(显示数字)。</i></p> <p>颜色输入:<input type="color" name=""></p> <p>滑块控件:<input type="range" name="" min="" max="" step="" value=""></p> <p>邮件输入(会自动验证 email 域的值):<input type="email" name=""><br></p> <p><i>PS:iPhone 中的 Safari 浏览器支持 email 输入类型,并通过改变触摸屏键盘来配合它(添加 @ 和 .com 选项)。</i></p> <p>搜索输入:<input type="search" name=""></p> <p>电话输入:<input type="tel" name=""></p> <p>URL输入(会自动验证 url 域的值):<input type="url" name=""></p> <p><i>PS:提示:iPhone 中的 Safari 浏览器支持 url 输入类型,并通过改变触摸屏键盘来配合它(添加 .com 选项)。</i></p> <p><i><br></i></p> <p><i>Date Pickers:</i></p> <p><i>日期输入:<input type="date" name="" max="2017-12-31" min="2000-01-02"><br></i></p> <p><i>月份输入:<input type="month" name="">(允许用户选择月份和年份。)<br></i></p> <p><i>周/星期输入:<input type="week" name="">(允许用户选择周和年。)<br></i></p> <p><i>时间输入:<input type="time" name=""><br></i></p> <p><i>日期时间输入:<input type="datetime" name="">(允许用户选择日期和时间(有时区)。)<br></i></p> <p>日期时间输入:<input type="datetime-local" name="">(允许用户选择日期和时间(无时区)。)</p> <hr> <p>HTML新增表单属性:</p> <p>新的<input>属性:</p> <p>autocomplete,autofocus,form,form overrides(formaction,formenctype,formmethod,formnovalidate,formtarget),height 和 width,list,min 和 max,step,multiple,pattern (regexp),placeholder,required</p> <p>新的<form>属性:</p> <p>autocomplete,novalidate</p> <p><br></p> <p>type                        IE      Firefox     Opera    Chrome      Safari<br></p> <p>autocomplete         8.0        3.5          9.5         3.0            4.0</p> <p>autofocus               No         No         10.0         3.0           4.0</p> <p>form                       No          No           9.5          No          No</p> <p>form overrides        No         No           10.5          No        No</p> <p>height and width     8.0        3.5            9.5           3.0       4.0</p> <p>list                           No       No             9.5           No        No</p> <p>min, max and step   No       No            9.5           3.0        No</p> <p>multiple                    No      3.5             No           3.0        4.0</p> <p>novalidate                No      No              No           No         No</p> <p>pattern                     No      No              9.5           3.0         No</p> <p>placeholder              No     No                No          3.0         3.0</p> <p>required                   No      No               9.5          3.0         No</p> <p><br></p> <p>autocomplete 属性规定form或input域是否应该自动完成。autocomplete 属性适用于<form>以及如下<<br>input>类型:text、search、url、tel、email、password、datepickers、range 以及 color。(值为on/off)</p> <p>autofocus属性,规定在页面加载时,域自动地获得焦点,适用所有<input>类型。(值为true/false)。</p> <p>form属性,规定输入域所属的一个或多个表单。适用所有<input>标签的类型。如需引用一个以上的表单,请使用空格分隔表单 id 列表。</p> <p>例子:输入字段位于 HTML 表单之外(但仍属表单):</p> <p><form action="action_page.php" <b>id="form1"</b>></p> <p>First name: <input type="text" name="fname"><br></p> <p><input type="submit" value="Submit"></p> <p></form></p> <p>Last name: <input type="text" name="lname" <b>form="form1"</b>></p> <p><br></p> <p>表单重写属性(form override attributes)允许重写 form 元素的某些属性设定,有:</p> <p>formaction 重写表单的action属性<br></p> <p>formenctype 重写表单的enctype属性<br></p> <p>formmethod 重写表单的method属性<br></p> <p>formnovalidate 重写表单的novalidate属性<br></p> <p>formtarget 重写表单的target属性<br></p> <p><i>表单重写属性适用于以下类型的<input>标签:submit 和 image。<br></i></p> <p><br></p> <p>formaction属性规定当提交表单时处理该输入控件的文件的 URL。适用于 type="submit" 以及 type="image"。(如"demo_admin.asp")<br></p> <p>formenctype属性规定当把表单数据(form-data)提交至服务器时如何对其进行编码(仅针对 method="post" 的表单)。适用于type="submit" 以及 type="image"。(如设置为"multipart/form-data")</p> <p>formmethod属性定义用以向 action URL 发送表单数据(form-data)的 HTTP 方法。适用于 type="submit" 以及 type="image"。(如post)</p> <p>formnovalidate属性,如果设置,则规定在提交表单时不对 <input> 元素进行验证。可用于 type="submit"。(值为true/false)</p> <p>formtarget属性规定的名称或关键词指示提交表单后在何处显示接收到的响应。可与 type="submit" 和 type="image" 使用。(如"_blank")</p> <p><br></p> <p>height 和 width属性,用于 image 类型的 input 标签的图像高度和宽度。(注释:请始终规定图像的尺寸。)</p> <p>list属性,引用的<datalist>元素中包含了<input>元素的预定义选项。list 属性适用于以下类型的 <input>标签:text, search, url, telephone, email, date pickers, number, range 以及 color。(<i>值为<datalist>的id</i>)</p> <p>min 、max和step属性,用于为包含数字或日期的 input 类型规定限定(约束)。规定<input>元素的最小值和最大值以及合法数字间隔。适用于以下类型的 <input> 标签:date pickers、number 以及 range。</p> <p>multiple属性,规定输入域中可选择多个值。适用于以下输入类型:email 和 file。(值为true/false)</p> <p>pattern (regexp)属性,规定用于验证 input 域的正则表达式。适用于以下输入类型:text、search、url、tel、email和 password。(提示:请使用全局的 title 属性对模式进行描述以帮助用户。)</p> <p>placeholder属性,提供一种提示(hint),描述输入域所期待的值。该提示会在用户输入值之前显示在输入字段中,在输入域获得焦点时消失。适用于以下输入类型:text、search、url、tel、email 以及 password。</p> <p>required属性,必须在提交之前填写输入域(不能为空)。适用于以下输入类型:text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file。(值为true/false)</p> <p>novalidate属性,规定在提交表单时不应该验证 form 或 input 域。适用于 <form> 以及以下类型的 <input> 标签:text, search, url, telephone, email, password, date pickers, range 以及 color。</p> <hr> <p><i>HTML5图像:canvas && svg(Scalable Vector Graphics)</i><br></p> <p><i>canvas(画布,使用 JavaScript 的图像绘制。)</i></p> <p><i>svg(可伸缩矢量图形,使用 SVG 的图像绘制。)</i></p> <p><i>参考手册:http://www.w3school.com.cn/tags/html_ref_canvas.asp</i></p> <p><i><br></i></p> <p>canvas画布是一个矩形区域,您可以控制其每一像素,它拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。</p> <p>- 创建canvas元素(规定元素的 id、宽度和高度):</p> <p><canvas id="myCanvas" width="200" height="200">此处编写文字,当浏览器不支持canvas时会显示这些文字。</canvas></p> <p><br></p> <p>- 通过 JavaScript 来绘制(canvas 元素本身是没有绘图能力的):</p> <p><script type="text/javascript"></p> <p>var canvas = document.getElementById('myCanvas");  //使用id来寻找canvas元素,</p> <p>var ctx = canvas.getContext("2d");  //然后创建context对象,getContext("2d") 对象是内建的 HTML5 对象,拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。</p> <p>ctx.fillStyle = "#F00";  //fillStyle 方法将其染成红色</p> <p>ctx.fillRect(0,0,150,75); //fillRect 方法规定了形状、位置和尺寸,参数意义:从画布的(0,0)开始画150*75的矩形。这两行代码绘制一个红色的矩形</p> <p></script></p> <p><br></p> <p>其他实例:</p> <p>- 线条(移去(10,10);画到(150,50);画到(10,50);stroke()才真正的画,前面绘制的是路径)<br></p> <p>ctx.moveTo(10,10);</p> <p>ctx.lineTo(150,50);</p> <p>ctx.lintTo(10,50);</p> <p>ctx.stroke();</p> <p><br></p> <p>- 圆形(填充样式;开始路径;在画布(70,18)画一个半径为15的弧度为0到Math.PI*2的圆,true逆时针画,false顺时针画;关闭路径;fill()才真正的画,前面绘制的是路径)<br></p> <p>ctx.fillStyle="#FF0000";</p> <p>ctx.beginPath();</p> <p>ctx.arc(70,18,15,0,Math.PI*2,true);</p> <p>ctx.closePath();</p> <p>ctx.fill();</p> <p><br></p> <p>- 渐变(创建线性的渐变对象,渐变从(0,0)开始,(175,50)结束;添加颜色位置;填充样式;绘制矩形 / 作为矩形的填充样式)<br></p> <p>var grd=cxt.createLinearGradient(0,0,175,50);</p> <p>grd.addColorStop(0,"#FF0000");</p> <p>grd.addColorStop(1,"#00FF00");</p> <p>cxt.fillStyle=grd;</p> <p>cxt.fillRect(0,0,175,50);</p> <p><br></p> <p>- 图像(创建img元素,源文件路径,(0,0)画图像)<br></p> <p>var img=new Image()</p> <p>img.src="flower.png"</p> <p>ctx.drawImage(img,0,0);</p> <p><br></p> <p>更多canvas用法可以看官方文档:http://www.w3school.com.cn/tags/html_ref_canvas.asp<br></p> <p>也可以看我写的另外的文章:http://hiuman.iteye.com/blog/2335334</p> <p>= = = = = = = = = = = = = = = =</p> <p>svg介绍:</p> <p>Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持内联 SVG。<br></p> <p><br></p> <p>SVG 用于定义用于网络的基于矢量的图形,它使用 XML 格式定义图形,且SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失</p> <p><br></p> <p>优势(与其他图像格式相比(比如JPEG和GIF)):<br></p> <p>SVG 图像可通过文本编辑器来创建和修改,它可被搜索、索引、脚本化或压缩,而且是可伸缩的,它可在任何的分辨率下被高质量地打印,也可在图像质量不下降的情况下被放大。</p> <p><br></p> <p>例子:(按顺序画出(100,10)(40,180)(190,60)(10,60),(160,180),结果是一个五角星,闭合的地方填充红色,绘制的线条蓝色,线宽3,填充规则(evenodd/nonzero) )<br></p> <p><svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190"></p> <p><polygon points="100,10 40,180 190,60 10,60 160,180" style="fill:red;stroke:blue;stroke-width:3;fill-rule:evenodd;" /></p> <p><!-- polygon元素用来创建含有不少于三个边的图形 --></p> <p></svg></p> <p><br></p> <p>Canvas 与 SVG 的比较:<br></p> <p>Canvas</p> <p>依赖分辨率</p> <p>不支持事件处理器</p> <p>弱的文本渲染能力</p> <p>能够以 .png 或 .jpg 格式保存结果图像</p> <p>最适合图像密集型的游戏,其中的许多对象会被频繁重绘</p> <p>SVG</p> <p>不依赖分辨率<br></p> <p>支持事件处理器</p> <p>最适合带有大型渲染区域的应用程序(比如谷歌地图)</p> <p>复杂度高会减慢渲染速度(任何过度使用 DOM 的应用都不快)</p> <p>不适合游戏应用</p> <hr> <p><i>HTML5新的媒介元素:video && audio &&embed && source && track</i><br></p> <p><i>audio 声音或音乐内容。</i></p> <p><i>embed 外部应用程序的容器(比如插件)。</i></p> <p><i>video 视频或影片内容。</i></p> <p><i><i>source 是<<i>video>和<<i>audio>的来源。</i></i></i><br></i></p> <p><i>track 是<<i>video>和<</i></i><i>audio>的轨道。</i></p> <p><i><br></i></p> <p><i>参考手册:http://www.w3school.com.cn/tags/html_ref_audio_video_dom.asp</i></p> <p><i><br></i></p> <p>多媒体:(详细请看官方http://www.w3school.com.cn/html/html_media.asp)</p> <p>视频格式:(MP4 格式是一种新的即将普及的因特网视频格式。HTML5 、Flash 播放器以及优酷等视频网站均支持它。)</p> <p>格式(文件扩展名)</p> <p><i>AVI(.avi),WMV(.wmv),MPEG(.mpg/.mpeg),QuickTime(.mov),RealVideo(.rm/.ram),Flash(.swf/.flv),Mpeg-4(.mp4)<br></i></p> <p><i><br></i></p> <p><i>声音格式:(WAVE 是因特网上最受欢迎的<i>无压缩</i>声音格式,所有流行的浏览器都支持它。如果您需要未经压缩的声音(音乐或演讲),那么您应该使用 WAVE 格式。<br></i></p> <p><i>MP3 是最新的<i>压缩</i>录制音乐格式。MP3 这个术语已经成为数字音乐的代名词。如果您的网址从事录制音乐,那么 MP3 是一个选项。)<br></i></p> <p>格式(文件扩展名)</p> <p>MIDI(.mid/.midi),RealAudio(.rm/.ram),Wave(.wav),WMA(.wma),MP3(.mp3/.mpga)</p> <p><i><br></i></p> <p><i>= = = = = = = = = = = = = = =</i></p> <p><i>PS:当前,video 元素支持三种视频格式:</i></p> <p>格式       IE      Firefox    Opera   Chrome    Safari</p> <p>Ogg        No        3.5+       10.5+       5.0+      No</p> <p>MPEG 4   9.0+     No         No          5.0+       3.0+</p> <p>WebM      No        4.0+       10.6+      6.0+      No</p> <p><i><br></i></p> <p><i>在HTML5中显示视频:(control 属性供添加播放、暂停和音量控件。)</i></p> <p><i><video src="movie.ogg" controls="controls" width="320" height="240"></i></p> <p><i>供不支持 video 元素的浏览器显示的<br></i></p> <p></video><br></p> <p><br></p> <p>此时,仅适用于Firefox、Opera 以及 Chrome 浏览器。</p> <p>要确保适用于 Safari 浏览器,视频文件必须是 MPEG4 类型。</p> <p><video width="320" height="240" controls="controls"></p> <p><source src="movie.ogg" type="video/ogg"></p> <p><source src="movie.mp4" type="video/mp4"></p> <p>Your browser does not support the video tag.</p> <p></video></p> <p><br></p> <p>而IE,Internet Explorer 8 不支持 video 元素。在 IE 9 中,将提供对使用 MPEG4 的 video 元素的支持。</p> <p><br></p> <p><video>标签的属性:(除了width,height,src,其他的属性值均为属性名)</p> <p>autoplay 如果出现该属性,则视频在就绪后马上播放。</p> <p>controls 如果出现该属性,则向用户显示控件,比如播放按钮。</p> <p>loop 如果出现该属性,则当媒介文件完成播放后再次开始播放。</p> <p>preload 如果出现该属性,则视频在页面加载时进行加载,并预备播放。</p> <p>如果使用 "autoplay",则忽略该属性。</p> <p>width 视频播放器的宽</p> <p>height 视频播放器的高</p> <p>src 视频URL</p> <p><br></p> <p>HTML5<video> - 方法、属性以及事件(在所有属性中,只有 videoWidth 和 videoHeight 属性是立即可用的。在视频的元数据已加载后,其他属性才可用。)</p> <p>方法:play(),pause(),load(),canPlayType</p> <p>属性:currentSrc,currentTime,videoWidth,videoHeight,duration,ended,error,paused,muted,seeking,volume,height,width</p> <p>事件:play,pause,progress,error,timeupdate,ended,abort,empty,emptied,waiting,loadedmetadata</p> <p>= = = = = = = = = = = = = = = =</p> <p>音频:</p> <p>PS:当前,audio 元素支持三种音频格式:</p> <p>类型          IE 9  Firefox 3.5  Opera 10.5   Chrome 3.0  Safari 3.0</p> <p>Ogg Vorbis  NO        √                  √                     √               NO</p> <p>MP3             √         NO                NO                  √                √</p> <p>Wav            NO        √                    √                    NO              √</p> <p><br></p> <p><i>在HTML5中显示音频:(control 属性供添加播放、暂停和音量控件。)</i></p> <p><i><audio src="song.ogg" controls="controls"></i></p> <p><i><i>供不支持 audio元素的浏览器显示的</i><br></i></p> <p><i></audio><br></i></p> <p><br></p> <p>此时,仅适用于Firefox、Opera 以及 Chrome 浏览器。</p> <p>要确保适用于 Safari 浏览器,音频文件必须是 MP3 或 Wav 类型。</p> <p><audio controls="controls"></p> <p><source src="song.ogg" type="audio/ogg"></p> <p><source src="song.mp3" type="audio/mpeg"></p> <p>Your browser does not support the audio tag.</p> <p></audio></p> <p><br></p> <p>而IE,Internet Explorer 8 不支持 audio 元素。在 IE 9 中,将提供对 audio 元素的支持。</p> <p><br></p> <p><audio>标签的属性</p> <p>autoplay 如果出现该属性,则音频在就绪后马上播放。</p> <p>controls 如果出现该属性,则向用户显示控件,比如播放按钮。</p> <p>loop 如果出现该属性,则每当音频结束时重新开始播放。</p> <p>preload 如果出现该属性,则音频在页面加载时进行加载,并预备播放。</p> <p>如果使用 "autoplay",则忽略该属性。</p> <p>src 音频URL</p> <hr> <p><i>地理定位略,回顾HTML/HTML5(一)已描述。</i></p> <hr> <p>拖放 是 HTML5 标准的组成部分:任何元素都是可拖放的。</p> <p>拖放(Drag 和 Drop)是很常见的特性。即抓取对象以后拖到另一个位置。</p> <p><br></p> <p>Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放。</p> <p>注释:在 Safari 5.1.2 中不支持拖放。</p> <p><br></p> <p>官方例子:http://www.w3school.com.cn/tiy/t.asp?f=html5_draganddrop<br></p> <p>部分代码:</p> <p>function allowDrop(ev) {<br></p> <p>ev.preventDefault();</p> <p>}</p> <p>function drag(ev) {</p> <p>ev.dataTransfer.setData("text", ev.target.id);</p> <p>}</p> <p>function drop(ev) {</p> <p>ev.preventDefault();</p> <p>var data = ev.dataTransfer.getData("text");</p> <p>ev.target.appendChild(document.getElementById(data));</p> <p>}</p> <p><br></p> <p><div id="div1"<i> ondrop="drop(event)" ondragover="allowDrop(event)"</i>></div></p> <p><img id="drag1" src="img_logo.gif" <i>draggable="true" ondragstart="drag(event)"</i> width="336" height="69"></p> <p><br></p> <p>代码分析:</p> <p>把元素设置为可拖放:(img元素的draggable 属性设置为 true)<br></p> <p><br></p> <p>拖放的内容 - ondragstart 和 setData():(规定当元素被拖动时发生的事情。</p> <p>例子中,ondragstart 属性调用了一个 drag(event) 函数,规定拖动什么数据。</p> <p>dataTransfer.setData() 方法设置被拖动数据的数据类型和值)</p> <p>function drag(ev) {<br></p> <p>ev.dataTransfer.setData("text", ev.target.id);</p> <p>}</p> <p>在例子中,数据类型是 "text",而值是这个可拖动元素的 id ("drag1")。</p> <p><br></p> <p>拖到何处 - ondragover:(规定被拖动的数据能够被放置到何处。<br></p> <p>默认地,数据/元素无法被放置到其他元素中。为了实现拖放,我们必须阻止元素的这种默认的处理方式。由 ondragover 事件的 event.preventDefault() 方法完成)</p> <p><br></p> <p>进行放置 - ondrop:(当放开被拖数据时,会发生 drop 事件。)<br></p> <p>ondrop 属性调用了一个函数,drop(event):<br></p> <p>function drop(ev) {</p> <p>ev.preventDefault();</p> <p>var data = ev.dataTransfer.getData("text");</p> <p>ev.target.appendChild(document.getElementById(data));</p> <p>}</p> <p>代码解释:</p> <p>调用 preventDefault() 来阻止数据的浏览器默认处理方式(drop 事件的默认行为是以链接形式打开)</p> <p>通过 dataTransfer.getData() 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据</p> <p>被拖数据是被拖元素的 id ("drag1")</p> <p>把被拖元素追加到放置元素中</p> <p><br></p> <p>另:来回拖放图片:http://www.w3school.com.cn/tiy/t.asp?f=html5_draganddrop2</p> <hr> <p>本地存储 / web存储(Local Storage) <br></p> <p>IE 8.0 Chrome 4.0 FF3.5 Safari 4.0 Opera 11.5</p> <p><br></p> <p>之前,这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储,因为它们由每个对服务器的请求来传递,这使得 cookie 速度很慢而且效率也不高。</p> <p>在 HTML5 中,数据不是由每个服务器请求传递的,而是只有在请求时使用数据。它使在不影响网站性能的情况下存储大量数据成为可能。<br></p> <p>对于不同的网站,数据存储于不同的区域,并且一个网站只能访问其自身的数据。<br></p> <p>HTML5 使用 JavaScript 来存储和访问数据。</p> <p><br></p> <p>HTML 本地存储提供了两个在客户端存储数据的对象:</p> <p>window.localStorage - 没有时间限制的数据存储</p> <p>window.sessionStorage - 针对一个 session 的数据存储(当关闭浏览器标签页时数据会丢失)</p> <p><br></p> <p><i>在使用本地存储时,请检测 localStorage 和 sessionStorage 的浏览器支持:</i></p> <p>if (typeof(Storage) !== "undefined") {</p> <p>// 针对 localStorage/sessionStorage 的代码</p> <p>} else {</p> <p>// 抱歉!不支持 Web Storage ..</p> <p>}</p> <p><br></p> <p>localStorage 对象:(存储的是没有截止日期的数据。当浏览器被关闭时数据不会被删除,在下一天、周或年中,都是可用的。)</p> <p>// 存储  创建 localStorage 名称/值对</p> <p>localStorage.setItem("lastname", "Gates");</p> <p>// 取回  取回 "lastname" 的值</p> <p>document.getElementById("result").innerHTML = localStorage.getItem("lastname");</p> <p><br></p> <p>或者这么写:</p> <p><br></p> <p>// 存储</p> <p>localStorage.lastname = "Gates";</p> <p>// 取回</p> <p>document.getElementById("result").innerHTML = localStorage.lastname;</p> <p><br></p> <p>//删除</p> <p>localStorage.removeItem("lastname");</p> <p><br></p> <p><i>注释:名称/值对始终存储为字符串。如果需要请记得把它们转换为其他格式!</i></p> <p><i><br></i></p> <p>例子:</p> <p>下面的例子对用户点击按钮的次数进行计数。在代码中,值字符串被转换为数值,依次对计数进行递增:</p> <p>if (localStorage.clickcount) {</p> <p>localStorage.clickcount = Number(localStorage.clickcount) + 1;</p> <p>} else {</p> <p>localStorage.clickcount = 1;</p> <p>}</p> <p>document.getElementById("result").innerHTML = "您已经点击这个按钮 " + localStorage.clickcount + " 次。";</p> <p>= = = = = = = = = = = = =</p> <p>sessionStorage 对象:(针对一个 session 进行数据存储。如果用户关闭具体的浏览器标签页,数据也会被删除。)</p> <p><br></p> <p>创建并访问一个 sessionStorage:</p> <p>sessionStorage.lastname="Smith";</p> <p>document.write(sessionStorage.lastname);<br></p> <p><br></p> <p>下例在当前 session 中对用户点击按钮进行计数:</p> <p>if (sessionStorage.clickcount) {</p> <p>sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1;</p> <p>} else {</p> <p>sessionStorage.clickcount = 1;</p> <p>}</p> <p>document.getElementById("result").innerHTML = "在本 session 中,您已经点击这个按钮 " + sessionStorage.clickcount + " 次。";</p> <hr> <p>应用程序缓存:(通过创建 cache manifest 文件,可轻松创建 web 应用的离线版本。)可对 web 应用进行缓存,并可在没有因特网连接时进行访问。<br></p> <p><br></p> <p>Chrome 4.0 IE10.0 FF3.5 Safari 4.0 Opera 11.5</p> <p><br></p> <p>应用程序缓存为应用带来三个优势:</p> <p>离线浏览 - 用户可在应用离线时使用它们</p> <p>速度 - 已缓存资源加载得更快</p> <p>减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源</p> <p>例子:(展示了带有 cache manifest 的 HTML 文档(供离线浏览)http://www.w3school.com.cn/tiy/t.asp?f=html5_html_manifest)</p> <p><!DOCTYPE html></p> <p><i><html manifest="demo.appcache"></i></p> <p><body></p> <p>文档内容....</p> <p></body></p> <p></html></p> <p><br></p> <p>每个指定了 manifest 的页面在用户对其访问时都会被缓存。如果未指定 manifest 属性,则页面不会被缓存(除非在 manifest 文件中直接指定了该页面)。</p> <p>manifest 文件的建议文件扩展名是:".appcache"。</p> <p>注意:manifest 文件需要设置<i>正确的 MIME-type</i>,即 "text/cache-manifest"。必须在 web 服务器上进行配置。</p> <p>Manifest 文件:(是简单的文本文件,它告知浏览器被缓存的内容(以及不缓存的内容)。)</p> <p><br></p> <p>Manifest文件可分为三个部分:</p> <p>CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存</p> <p>NETWORK - 在此标题下列出的文件需要与服务器的连接,且不会被缓存</p> <p>FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面(比如 404 页面)</p> <p><br></p> <p><b>CACHE MANIFEST</b>:(第一行,CACHE MANIFEST,是必需的)</p> <p>CACHE MANIFEST</p> <p>/theme.css</p> <p>/logo.gif</p> <p>/main.js</p> <p>上面的 manifest 文件列出了三个资源:一个 CSS 文件,一个 GIF 图像,以及一个 JavaScript 文件。当 manifest 文件被加载后,浏览器会从网站的根目录下载这三个文件。然后,无论用户何时与因特网断开连接,这些资源依然可用。</p> <p><br></p> <p><b>NETWORK:</b></p> <p>下面的 NETWORK 部分规定文件 "login.php" 永远不会被缓存,且离线时是不可用的:</p> <p>NETWORK:</p> <p>login.asp</p> <p><i>可以使用星号</i>来指示所有其他其他资源/文件都<i>需要因特网连接</i>:</p> <p>NETWORK:</p> <p>*</p> <p><br></p> <p><b>FALLBACK:</b></p> <p>下面的<i>FALLBACK</i>部分规定如果无法建立因特网连接,则用 "offline.html" 替代 /html/ 目录中的所有文件:</p> <p>FALLBACK:</p> <p>/html/ /offline.html</p> <p>注释:第一个 URI 是资源,第二个是替补。</p> <p><br></p> <p>更新缓存:</p> <p>一旦应用被缓存,它就会保持缓存直到发生下列情况:</p> <p>- 用户清空浏览器缓存</p> <p>- manifest 文件被修改(参阅下面的提示)</p> <p>- 由程序来更新应用缓存</p> <p><br></p> <p>例子:(完整的 Cache Manifest 文件)</p> <p>CACHE MANIFEST</p> <p># 2012-02-21 v1.0.0</p> <p>/theme.css</p> <p>/logo.gif</p> <p>/main.js</p> <p>NETWORK:</p> <p>login.asp</p> <p>FALLBACK:</p> <p>/html/ /offline.html</p> <p>(提示:以 "#" 开头的是注释行,但也可满足其他用途。应用的缓存只会在其 manifest 文件改变时被更新。如果您编辑了一幅图像,或者修改了一个 JavaScript 函数,这些改变都不会被重新缓存。更新注释行中的日期和版本号是一种使浏览器重新缓存文件的办法。)</p> <p><br></p> <p>关于应用程序缓存的注意事项:</p> <p>请留心缓存的内容。</p> <p>一旦文件被缓存,则浏览器会继续展示已缓存的版本,即使您修改了服务器上的文件。为了确保浏览器更新缓存,您需要更新 manifest 文件。</p> <p>注释:浏览器对缓存数据的容量限制可能不太一样(某些浏览器的限制是每个站点 5MB)。</p> <hr> <p>Web Workers:(是运行在后台的 JavaScript,独立于其他脚本,不会影响页面的性能。您可以继续做任何愿意做的事情:点击、选取内容等等,而此时 web worker 运行在后台。)<br></p> <p><br></p> <p>Chrome4.0 IE10.0 FF3.5 Safari4.0 Opera11.5</p> <p><br></p> <p>官方例子(在后台计数):http://www.w3school.com.cn/tiy/t.asp?f=html5_webworker</p> <p><br></p> <p>检测 Web Worker 支持:<br></p> <p>if (typeof(Worker) !== "undefined") {<br></p> <p>// 是的!支持 Web worker!</p> <p>} else {</p> <p>// 抱歉!不支持 Web Worker!</p> <p>}</p> <p><br></p> <p>创建Web Worker 文件(在一个外部 JavaScript 文件中创建):</p> <p>创建了计数脚本。该脚本存储于 "demo_workers.js" 文件中:<br></p> <p>var i = 0;</p> <p>function timedCount() {  </p> <p>i = i + 1;</p> <p><i><b>postMessage(i);</b></i></p> <p>setTimeout("timedCount()",500);</p> <p>}</p> <p>timedCount();</p> <p>以上代码中重要的部分是 postMessage() 方法 - 它用于向 HTML 页面传回一段消息。<br></p> <p><i>注释:web worker 通常不用于如此简单的脚本,而是用于更耗费 CPU 资源的任务。</i><br></p> <p><br></p> <p>创建 Web Worker 对象:(已经有了 web worker 文件,我们需要从 HTML 页面调用它。)<br></p> <p>下面的代码行检测是否存在 worker,如果不存在,- 它会创建一个新的 web worker 对象,然后运行 "demo_workers.js" 中的代码:<br></p> <p>if (typeof(w) == "undefined") {</p> <p>w = new Worker("demo_workers.js");</p> <p>}</p> <p>然后我们就可以从 web worker 发生和接收消息了。</p> <p>向 web worker 添加一个 "onmessage" 事件监听器:</p> <p>w.onmessage= function(event){    </p> <p>document.getElementById("result").innerHTML = event.data;</p> <p>};</p> <p>当 web worker 传送消息时,会执行事件监听器中的代码。来自 web worker 的数据会存储于 event.data 中。</p> <p><br></p> <p>终止 Web Worker:<br></p> <p>当创建 web worker 后,它会继续监听消息(即使在外部脚本完成后)直到其被终止为止。<br></p> <p>如需终止 web worker,并释放浏览器/计算机资源,请使用 terminate() 方法:</p> <p><b><i>w.terminate();</i></b></p> <p><br></p> <p>复用 Web Worker:<br></p> <p>如果您把 worker 变量设置为 undefined,在其被终止后,可以重复使用该代码:w =undefined;</p> <p><br></p> <p>完整的代码:http://www.w3school.com.cn/tiy/t.asp?f=html5_webworker</p> <p><br></p> <p>Web Worker 和 DOM<br></p> <p>由于 web worker 位于外部文件中,它们无法访问下例 JavaScript 对象:</p> <p>window 对象,document 对象,parent 对象</p> <hr> <p>Server-Sent 事件(允许网页从服务器获得更新。):<br></p> <p><br></p> <p>Chrome6.0 IE不支持 FF6.0 Safari5.0 Opera11.5</p> <p><br></p> <p><i>Server-Sent 事件 - One Way Messaging单向消息传递:</i><br></p> <p>Server-Sent 事件指的是网页自动从服务器获得更新。</p> <p>以前也可能做到这一点,前提是网页不得不询问是否有可用的更新。通过 Server-Sent 事件,更新能够自动到达。</p> <p>例如:Facebook/Twitter 更新、股价更新、新的博文、赛事结果,等等。</p> <p><br></p> <p><i>接收 Server-Sent 事件通知:</i><br></p> <p>EventSource 对象用于接收服务器发送事件通知:</p> <p>例子:</p> <p>var source = new EventSource("demo_sse.php");<br></p> <p>source.onmessage = function(event) {</p> <p>document.getElementById("result").innerHTML += event.data + "<br>";</p> <p>};</p> <p>例子解释:<br></p> <p>创建一个新的 EventSource 对象,然后规定发送更新的页面的 URL(本例中是 "demo_sse.php")</p> <p>每当接收到一次更新,就会发生 onmessage 事件</p> <p>当 onmessage 事件发生时,把已接收的数据推入 id 为 "result" 的元素中</p> <p><br></p> <p><i>检测 Server-Sent 事件支持:</i><br></p> <p>在 TIY 实例中,我们编写了一段额外的代码来检测服务器发送事件的浏览器支持:</p> <p>if(typeof(EventSource) !== "undefined") {</p> <p>// 是的!支持服务器发送事件!</p> <p>} else {</p> <p>// 抱歉!不支持服务器发送事件!</p> <p>}</p> <p><br></p> <p>服务器端代码实例:<br></p> <p>为了使上例运行,您需要能够发送数据更新的服务器(比如 PHP 或 ASP)。</p> <p>服务器端事件流的语法非常简单。请把 "Content-Type" 报头设置为 "text/event-stream"。现在,您可以开始发送事件流了。</p> <p>PHP 中的代码 (demo_sse.php):<br></p> <p><?php</p> <p>header('Content-Type: text/event-stream');</p> <p>header('Cache-Control: no-cache');</p> <p>$time = date('r');</p> <p>echo "data: The server time is: {$time}\n\n";</p> <p>flush();</p> <p>?></p> <p><br></p> <p>ASP 中的代码 (VB) (demo_sse.asp):</p> <p><%</p> <p>Response.ContentType = "text/event-stream"</p> <p>Response.Expires = -1</p> <p>Response.Write("data: The server time is: " & now())</p> <p>Response.Flush()</p> <p>%></p> <p>代码解释:</p> <p>把报头 "Content-Type" 设置为 "text/event-stream"</p> <p>规定不对页面进行缓存</p> <p>输出要发送的日期(始终以 "data: " 开头)</p> <p>向网页刷新输出数据</p> <p><br></p> <p>EventSource 对象:<br></p> <p>在上例中,我们使用 onmessage 事件来获取消息。不过还可以使用其他事件:</p> <p>事件描述</p> <p>onopen  当通往服务器的连接被打开</p> <p>onmessage  当接收到消息</p> <p>onerror  当发生错误</p> <hr> <p>HTML标签:<br></p> <p>http://www.w3school.com.cn/tags/html_ref_byfunc.asp(功能排序)<br></p> <p>HTML全局属性:</p> <p>http://www.w3school.com.cn/tags/html_ref_standardattributes.asp</p> </article> </div> </div> </div> <!--PC和WAP自适应版--> <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"> <!-- 文章页-右侧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">你可能感兴趣的:(关于HTML/HTML5(二))</h4> <div id="paradigm-article-related"> <div class="recommend-post mb30"> <ul class="widget-links"> <li><a href="/article/1835514464028422144.htm" title="情绪觉察日记第37天" target="_blank">情绪觉察日记第37天</a> <span class="text-muted">露露_e800</span> <div>今天是家庭关系规划师的第二阶最后一天,慧萍老师帮我做了个案,帮我处理了埋在心底好多年的一份恐惧,并给了我深深的力量!这几天出来学习,爸妈过来婆家帮我带小孩,妈妈出于爱帮我收拾东西,并跟我先生和婆婆产生矛盾,妈妈觉得他们没有照顾好我…。今晚回家见到妈妈,我很欣赏她并赞扬她,妈妈说今晚要跟我睡我说好,当我们俩躺在床上准备睡觉的时候,我握着妈妈的手对她说:妈妈这几天辛苦你了,你看你多利害把我们的家收拾得</div> </li> <li><a href="/article/1835514207114719232.htm" title="关于沟通这件事,项目经理不需要每次都面对面进行" target="_blank">关于沟通这件事,项目经理不需要每次都面对面进行</a> <span class="text-muted">流程大师兄</span> <div>很多项目经理都会遇到这样的问题,项目中由于事情太多,根本没有足够的时间去召开会议,那在这种情况下如何去有效地管理项目中的利益相关者?当然,不建议电子邮件也不需要开会的话,建议可以采取下面几种方式来形成有效的沟通,这几种方式可以帮助你努力的通过各种办法来保持和各方面的联系。项目经理首先要问自己几个问题,项目中哪些利益相关者是必须要进行沟通的?可以列出项目中所有的利益相关者清单,同时也整理出项目中哪些</div> </li> <li><a href="/article/1835513440525971456.htm" title="一百九十四章. 自相矛盾" target="_blank">一百九十四章. 自相矛盾</a> <span class="text-muted">巨木擎天</span> <div>唉!就这么一夜,林子感觉就像过了很多天似的,先是回了阳间家里,遇到了那么多不可思议的事情儿。特别是小伙伴们,第二次与自己见面时,僵硬的表情和恐怖的气氛,让自己如坐针毡,打从心眼里难受!还有东子,他现在还好吗?有没有被人欺负?护城河里的小鱼小虾们,还都在吗?水不会真的干枯了吧?那对相亲相爱漂亮的太平鸟儿,还好吧!春天了,到了做窝、下蛋、喂养小鸟宝宝的时候了,希望它们都能够平安啊!虽然没有看见家人,也</div> </li> <li><a href="/article/1835512809883004928.htm" title="10月|愿你的青春不负梦想-读书笔记-01" target="_blank">10月|愿你的青春不负梦想-读书笔记-01</a> <span class="text-muted">Tracy的小书斋</span> <div>本书的作者是俞敏洪,大家都很熟悉他了吧。俞敏洪老师是我行业的领头羊吧,也是我事业上的偶像。本日摘录他书中第一章中的金句:『一个人如果什么目标都没有,就会浑浑噩噩,感觉生命中缺少能量。能给我们能量的,是对未来的期待。第一件事,我始终为了进步而努力。与其追寻全世界的骏马,不如种植丰美的草原,到时骏马自然会来。第二件事,我始终有阶段性的目标。什么东西能给我能量?答案是对未来的期待。』读到这里的时候,我便</div> </li> <li><a href="/article/1835512542735200256.htm" title="C语言宏函数" target="_blank">C语言宏函数</a> <span class="text-muted">南林yan</span> <a class="tag" taget="_blank" href="/search/C%E8%AF%AD%E8%A8%80/1.htm">C语言</a><a class="tag" taget="_blank" href="/search/c%E8%AF%AD%E8%A8%80/1.htm">c语言</a> <div>一、什么是宏函数?通过宏定义的函数是宏函数。如下,编译器在预处理阶段会将Add(x,y)替换为((x)*(y))#defineAdd(x,y)((x)*(y))#defineAdd(x,y)((x)*(y))intmain(){inta=10;intb=20;intd=10;intc=Add(a+d,b)*2;cout<<c<<endl;//800return0;}二、为什么要使用宏函数使用宏函数</div> </li> <li><a href="/article/1835512178023690240.htm" title="谢谢你们,爱你们!" target="_blank">谢谢你们,爱你们!</a> <span class="text-muted">鹿游儿</span> <div>昨天家人去泡温泉,二个孩子也带着去,出发前一晚,匆匆下班,赶回家和孩子一起收拾。饭后,我拿出笔和本子(上次去澳门时做手帐的本子)写下了1\2\3\4\5\6\7\8\9,让后让小壹去思考,带什么出发去旅游呢?她在对应的数字旁边画上了,泳衣、泳圈、肖恩、内衣内裤、tapuy、拖鞋……画完后,就让她自己对着这个本子,将要带的,一一带上,没想到这次带的书还是这本《便便工厂》(晚上姑婆发照片过来,妹妹累得</div> </li> <li><a href="/article/1835510656011431936.htm" title="爬山后遗症" target="_blank">爬山后遗症</a> <span class="text-muted">璃绛</span> <div>爬山,攀登,一步一步走向制高点,是一种挑战。成功抵达是一种无法言语的快乐,在山顶吹吹风,看看风景,这是从未有过的体验。然而,爬山一时爽,下山腿打颤,颠簸的路,一路向下走,腿部力量不够,走起来抖到不行,停不下来了!第二天必定腿疼,浑身酸痛,坐立难安!</div> </li> <li><a href="/article/1835509898507546624.htm" title="《策划经理回忆录之二》" target="_blank">《策划经理回忆录之二》</a> <span class="text-muted">路基雅虎</span> <div>话说三年变六年,飘了,飘了……眨眼,2013年5月,老吴回到了他的家乡——油城从新开启他的工作幻想症生涯。很庆幸,这是一家很有追求,同时敢于尝试的,且实力不容低调的新星房企——金源置业(前身泰源置业)更值得庆幸的是第一个盘就是油城十路的标杆之一:金源盛世。2013年5月,到2015年11月,两年的陪伴,迎来了一场大爆发。2000个筹,5万/筹,直接回笼1个亿!!!这……让我开始认真审视这座看似五线</div> </li> <li><a href="/article/1835509770287673344.htm" title="swagger访问路径" target="_blank">swagger访问路径</a> <span class="text-muted">igotyback</span> <a class="tag" taget="_blank" href="/search/swagger/1.htm">swagger</a> <div>Swagger2.x版本访问地址:http://{ip}:{port}/{context-path}/swagger-ui.html{ip}是你的服务器IP地址。{port}是你的应用服务端口,通常为8080。{context-path}是你的应用上下文路径,如果应用部署在根路径下,则为空。Swagger3.x版本对于Swagger3.x版本(也称为OpenAPI3)访问地址:http://{ip</div> </li> <li><a href="/article/1835508130608410624.htm" title="html 中如何使用 uniapp 的部分方法" target="_blank">html 中如何使用 uniapp 的部分方法</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/uni-app/1.htm">uni-app</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>示例代码:Documentconsole.log(window);效果展示:好了,现在就可以uni.使用相关的方法了</div> </li> <li><a href="/article/1835507358353158144.htm" title="《大清方方案》| 第二话" target="_blank">《大清方方案》| 第二话</a> <span class="text-muted">谁佐清欢</span> <div>和珅究竟说了些什么?竟能令堂堂九五之尊龙颜失色!此处暂且按下不表;单说这位乾隆皇帝,果真不愧是康熙从小带过的,一旦决定了要做的事,便杀伐决断毫不含糊。他当即亲自拟旨,着令和珅为钦差大臣,全权负责处理方方事件,并钦赐尚方宝剑,遇急则三品以下官员可先斩后奏。和珅身负皇上重托,岂敢有半点怠慢,当夜即率领相关人等,马不停蹄杀奔江汉。这一路上,和珅的几位幕僚一直在商讨方方事件的处置方案。有位年轻幕僚建议快刀</div> </li> <li><a href="/article/1835507248395284480.htm" title="【一起学Rust | 设计模式】习惯语法——使用借用类型作为参数、格式化拼接字符串、构造函数" target="_blank">【一起学Rust | 设计模式】习惯语法——使用借用类型作为参数、格式化拼接字符串、构造函数</a> <span class="text-muted">广龙宇</span> <a class="tag" taget="_blank" href="/search/%E4%B8%80%E8%B5%B7%E5%AD%A6Rust/1.htm">一起学Rust</a><a class="tag" taget="_blank" href="/search/%23/1.htm">#</a><a class="tag" taget="_blank" href="/search/Rust%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/1.htm">Rust设计模式</a><a class="tag" taget="_blank" href="/search/rust/1.htm">rust</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%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录前言一、使用借用类型作为参数二、格式化拼接字符串三、使用构造函数总结前言Rust不是传统的面向对象编程语言,它的所有特性,使其独一无二。因此,学习特定于Rust的设计模式是必要的。本系列文章为作者学习《Rust设计模式》的学习笔记以及自己的见解。因此,本系列文章的结构也与此书的结构相同(后续可能会调成结构),基本上分为三个部分</div> </li> <li><a href="/article/1835507105168191488.htm" title="本周第二次约练" target="_blank">本周第二次约练</a> <span class="text-muted">2cfbdfe28a51</span> <div>中原焦点团队中24初26刘霞2021.12.3约练161次,分享第368天当事人虽然是带着问题来的,但是咨询过程中发现,她是经过自己不断地调整和努力才走到现在的,看到当事人的不容易,找到例外,发现资源,力量感也就随之而来。增强画面感,或者说重温,会给当事人带来更深刻的感受。</div> </li> <li><a href="/article/1835506721141911552.htm" title="2022-07-08" target="_blank">2022-07-08</a> <span class="text-muted">保利学府里李楚怡1307022</span> <div>——保利碧桂园学府里——童梦奇趣【科学实验室】「7.9-7.10」✏玩出大智慧约99-144㎡二期全新升级力作</div> </li> <li><a href="/article/1835504564879585280.htm" title="直抒《紫罗兰永恒花园外传》" target="_blank">直抒《紫罗兰永恒花园外传》</a> <span class="text-muted">雷姆的黑色童话</span> <div>没看过《紫罗兰永恒花园》的我莫名的看完了《紫罗兰永恒花园外传》,又莫名的被故事中的姐妹之情狠狠地感动了的一把。感动何在:困苦中相依为命的姐妹二人被迫分离,用一个人的自由换取另一个人的幸福。之后,虽相隔不知几许依旧心心念念彼此牵挂。这种深深的姐妹情谊就是令我为之动容的所在。贝拉和泰勒分别影片开始,海天之间一个孩童凭栏眺望,手中拿着折旧的信纸。镜头一转,挑灯伏案的薇尔莉特正在打字机前奋笔疾书。这些片段</div> </li> <li><a href="/article/1835502451877310464.htm" title="基于社交网络算法优化的二维最大熵图像分割" target="_blank">基于社交网络算法优化的二维最大熵图像分割</a> <span class="text-muted">智能算法研学社(Jack旭)</span> <a class="tag" taget="_blank" href="/search/%E6%99%BA%E8%83%BD%E4%BC%98%E5%8C%96%E7%AE%97%E6%B3%95%E5%BA%94%E7%94%A8/1.htm">智能优化算法应用</a><a class="tag" taget="_blank" href="/search/%E5%9B%BE%E5%83%8F%E5%88%86%E5%89%B2/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/php/1.htm">php</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.前言2.二维最大熵阈值分割原理3.基于社交网络优化的多阈值分割4.算法结果:5.参考文献:6.Matlab代码摘要:本文介绍基于最大熵的图像分割,并且应用社交网络算法进行阈值寻优。1.前言阅读此文章前,请阅读《图像分割:直方图区域划分及信息统计介绍》htt</div> </li> <li><a href="/article/1835501821569888256.htm" title="关于提高复杂业务逻辑代码可读性的思考" target="_blank">关于提高复杂业务逻辑代码可读性的思考</a> <span class="text-muted">编程经验分享</span> <a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E7%BB%8F%E9%AA%8C/1.htm">开发经验</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>目录前言需求场景常规写法拆分方法领域对象总结前言实际工作中大部分时间都是在写业务逻辑,一般都是三层架构,表示层(Controller)接收客户端请求,并对入参做检验,业务逻辑层(Service)负责处理业务逻辑,一般开发都是在这一层中写具体的业务逻辑。数据访问层(Dao)是直接和数据库交互的,用于查数据给业务逻辑层,或者是将业务逻辑层处理后的数据写入数据库。简单的增删改查接口不用多说,基本上写好一</div> </li> <li><a href="/article/1835501774031646720.htm" title="18-115 一切思考不能有效转化为行动,都TM是扯淡!" target="_blank">18-115 一切思考不能有效转化为行动,都TM是扯淡!</a> <span class="text-muted">成长时间线</span> <div>7月25号写了一篇关于为什么会断更如此严重的反思,然而,之后日更仅仅维持了一周,又出现了这次更严重的现象。从8月2号到昨天8月6号,5天!又是5天没有更文!虽然这次断更时间和上次一样,那为什么说这次更严重?因为上次之后就分析了问题的原因,以及应该如何解决,按理说应该会好转,然而,没过几天严重断更的现象再次出现,想想,经过反思,问题依然没有解决与改变,这让我有些担忧。到底是哪里出了问题,难道我就真的</div> </li> <li><a href="/article/1835501643085475840.htm" title="郎朗大婚娶公主:所有光环的背后,都是十年如一日的自律" target="_blank">郎朗大婚娶公主:所有光环的背后,都是十年如一日的自律</a> <span class="text-muted">简小尘</span> <div>近日,关于郎朗大婚的新闻上了热搜,看了新娘的照片,既有天使般的面容,更有魔鬼般的身材,关键是人家还身世好,又有才华,这真的是让所有男人羡慕嫉妒恨哪。有些人不禁会想,“凭什么郎朗的人生就象开挂了一样,可我却每天都活得这么狼狈!”其实,每个开挂的人生背后,都是苦行僧般的自律。01欲戴王冠,必承其重。练琴不能只靠兴趣,更需要自律!我们先来看一下朗朗在小时候的作息时间表:早晨5:45起床,练琴1小时。中午</div> </li> <li><a href="/article/1835501383751659520.htm" title="《中华小厨师》单行VS爱藏:姜是老的辣,书是新的好" target="_blank">《中华小厨师》单行VS爱藏:姜是老的辣,书是新的好</a> <span class="text-muted">cicoky</span> <div>《汉书·郦食其传》有曰:“王者以民为天,而民以食为天。”自古以来,吃饱饭是每一个人的基本要求,而吃好饭却是每一个人的最终追求。于是,厨师这一职业孕育而生,其渊源之久,甚至可追溯到4000年前的奴隶时代。职业本身无贵贱,但职业能力却有高低之分。所以一家餐馆生意好不好,厨师的水平决定一切,而站在所有厨师顶端的就被称之为“特级厨师”。今天要说的就是一个关于“特级厨师刘昴星”的故事。连载历程1995年第4</div> </li> <li><a href="/article/1835499615491813376.htm" title="四章-32-点要素的聚合" target="_blank">四章-32-点要素的聚合</a> <span class="text-muted">彩云飘过</span> <div>本文基于腾讯课堂老胡的课《跟我学Openlayers--基础实例详解》做的学习笔记,使用的openlayers5.3.xapi。源码见1032.html,对应的官网示例https://openlayers.org/en/latest/examples/cluster.htmlhttps://openlayers.org/en/latest/examples/earthquake-clusters.</div> </li> <li><a href="/article/1835499109436452864.htm" title="如果做到轻松在股市赚钱?只要坚持这三个原则。" target="_blank">如果做到轻松在股市赚钱?只要坚持这三个原则。</a> <span class="text-muted">履霜之人</span> <div>大A股里向来就有七亏二平一赚的说法,能赚钱的都是少数人。否则股市就成了慈善机构,人人都有钱赚,谁还要上班?所以说亏钱是正常的,或者说是应该的。那么那些赚钱的人又是如何做到的呢?普通人能不能找到捷径去分一杯羹呢?方法是有的,但要做到需要你有极高的自律。第一,控制仓位,散户最大的问题是追涨杀跌,只要涨起来,就把钱往股票上砸,然后被套,隔天跌的受不了,又一刀切,全部割肉。来来回回间,遍体鳞伤。所以散户首</div> </li> <li><a href="/article/1835498925755297792.htm" title="DIV+CSS+JavaScript技术制作网页(旅游主题网页设计与制作)云南大理" target="_blank">DIV+CSS+JavaScript技术制作网页(旅游主题网页设计与制作)云南大理</a> <span class="text-muted">STU学生网页设计</span> <a class="tag" taget="_blank" href="/search/%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1/1.htm">网页设计</a><a class="tag" taget="_blank" href="/search/%E6%9C%9F%E6%9C%AB%E7%BD%91%E9%A1%B5%E4%BD%9C%E4%B8%9A/1.htm">期末网页作业</a><a class="tag" taget="_blank" href="/search/html%E9%9D%99%E6%80%81%E7%BD%91%E9%A1%B5/1.htm">html静态网页</a><a class="tag" taget="_blank" href="/search/html5%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">html5期末大作业</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1/1.htm">网页设计</a><a class="tag" taget="_blank" href="/search/web%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web大作业</a> <div>️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业:【HTML5网页期末作业(1000套)】程序员有趣的告白方式:【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面:计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程</div> </li> <li><a href="/article/1835498602294767616.htm" title="特殊的拜年" target="_blank">特殊的拜年</a> <span class="text-muted">飘雪的天堂</span> <div>文/雪儿大年初一,家家户户没有了轰响的鞭炮声,大街上没有了人流涌动的喧闹,几乎看不到人影,变得冷冷清清。天刚亮不大会儿,村里的大喇叭响了起来:由于当前正值疾病高发期,流感流行的高峰期。同时,新型冠状病毒感染的肺炎进入第二波流行的上升期。为了自己和他人的健康安全着想,请大家尽量不要串门拜年,不要在街里走动。可以通过手机微信,视频,电话,信息拜年……今年的春节真是特别。禁止燃放鞭炮,烟花爆竹,禁止出村</div> </li> <li><a href="/article/1835497965330984960.htm" title="398顺境,逆境" target="_blank">398顺境,逆境</a> <span class="text-muted">戴骁勇</span> <div>2018.11.27周二雾霾最近儿子进入了一段顺境期,今天表现尤其不错。今天的数学测试成绩喜人,没有出现以往的计算错误,整个卷面书写工整,附加题也在规定时间内完成且做对。为迎接体育测试的锻炼有了质的飞跃。坐位体前屈成绩突飞猛进,估测成绩能达到12cm,这和上次测试的零分来比,简直是逆袭。儿子还在不断锻炼和提升,唯恐到时候掉链子。跑步姿势在我的调教下,逐渐正规起来,速度随之也有了提升。今晚测试的50</div> </li> <li><a href="/article/1835497077891756032.htm" title="想明白这个问题,你才能写下去" target="_blank">想明白这个问题,你才能写下去</a> <span class="text-muted">文自拾</span> <div>春节放假的时候,又有一天梦见她,第二天她冒着漫天大雪,傻傻地跑来见我。她说,见见傻傻的我,天很冷,心很暖。她回去后,我写了一篇文章,题目叫——从此梦中只有你。我们没在一起的很长一段时间里,她都在我的心底,一次次出现在我的梦里。我对她说,在一起之前,是胆小且闷骚,在一起之后,我变得不要脸了。不要脸的——去爱你。那文章没写完,火车上,给她看了。我有点小失望,花了好几个小时写,她分分钟就看完,很希望她逐</div> </li> <li><a href="/article/1835496149843275776.htm" title="关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript" target="_blank">关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript</a> <span class="text-muted">二挡起步</span> <a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web前端期末大作业</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E6%97%85%E6%B8%B8/1.htm">旅游</a><a class="tag" taget="_blank" href="/search/%E9%A3%8E%E6%99%AF/1.htm">风景</a> <div>⛵源码获取文末联系✈Web前端开发技术描述网页设计题材,DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业,Web大学生网页HTML:结构CSS:样式在操作方面上运用了html5和css3,采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip</div> </li> <li><a href="/article/1835496148601761792.htm" title="HTML网页设计制作大作业(div+css) 云南我的家乡旅游景点 带文字滚动" target="_blank">HTML网页设计制作大作业(div+css) 云南我的家乡旅游景点 带文字滚动</a> <span class="text-muted">二挡起步</span> <a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web前端期末大作业</a><a class="tag" taget="_blank" href="/search/web%E8%AE%BE%E8%AE%A1%E7%BD%91%E9%A1%B5%E8%A7%84%E5%88%92%E4%B8%8E%E8%AE%BE%E8%AE%A1/1.htm">web设计网页规划与设计</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/dreamweaver/1.htm">dreamweaver</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>Web前端开发技术描述网页设计题材,DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML:结构CSS:样式在操作方面上运用了html5和css3,采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript:做与用户的交互行为文章目录前端学习路线</div> </li> <li><a href="/article/1835494257746604032.htm" title="MYSQL面试系列-04" target="_blank">MYSQL面试系列-04</a> <span class="text-muted">king01299</span> <a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a><a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a> <div>MYSQL面试系列-0417.关于redolog和binlog的刷盘机制、redolog、undolog作用、GTID是做什么的?innodb_flush_log_at_trx_commit及sync_binlog参数意义双117.1innodb_flush_log_at_trx_commit该变量定义了InnoDB在每次事务提交时,如何处理未刷入(flush)的重做日志信息(redolog)。它</div> </li> <li><a href="/article/1835494258262503424.htm" title="【JS】执行时长(100分) |思路参考+代码解析(C++)" target="_blank">【JS】执行时长(100分) |思路参考+代码解析(C++)</a> <span class="text-muted">l939035548</span> <a class="tag" taget="_blank" href="/search/JS/1.htm">JS</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><a class="tag" taget="_blank" href="/search/c%2B%2B/1.htm">c++</a> <div>题目为了充分发挥GPU算力,需要尽可能多的将任务交给GPU执行,现在有一个任务数组,数组元素表示在这1秒内新增的任务个数且每秒都有新增任务。假设GPU最多一次执行n个任务,一次执行耗时1秒,在保证GPU不空闲情况下,最少需要多长时间执行完成。题目输入第一个参数为GPU一次最多执行的任务个数,取值范围[1,10000]第二个参数为任务数组长度,取值范围[1,10000]第三个参数为任务数组,数字范围</div> </li> <li><a href="/article/22.htm" title="redis学习笔记——不仅仅是存取数据" target="_blank">redis学习笔记——不仅仅是存取数据</a> <span class="text-muted">Everyday都不同</span> <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> <span class="text-muted">atongyeye</span> <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> <span class="text-muted">comsci</span> <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> <span class="text-muted">男人50</span> <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> <span class="text-muted">oloz</span> <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> <span class="text-muted">374016526</span> <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> <span class="text-muted">香水浓</span> <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> <span class="text-muted">agevs</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/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> <span class="text-muted">aijuans</span> <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> <span class="text-muted">baalwolf</span> <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> <span class="text-muted">BigBird2012</span> <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> <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><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> <span class="text-muted">bit1129</span> <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> <span class="text-muted">bit1129</span> <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> <span class="text-muted">ronin47</span> <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> <span class="text-muted">brotherlamp</span> <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> <span class="text-muted">bylijinnan</span> <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> <span class="text-muted">chiangfai</span> <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> <span class="text-muted">chenchao051</span> <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> <span class="text-muted">daizj</span> <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> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/PHP/1.htm">PHP</a><a class="tag" taget="_blank" href="/search/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> <span class="text-muted">dcj3sjt126com</span> <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> <span class="text-muted">e200702084</span> <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> <span class="text-muted">geeksun</span> <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> <span class="text-muted">hongtoushizi</span> <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> <span class="text-muted">jisonami</span> <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> <span class="text-muted">home198979</span> <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> <span class="text-muted">pda158</span> <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> <span class="text-muted">hxl1988_0311</span> <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> <span class="text-muted">vipshichg</span> <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"> <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>