HTML5 简介

HTML5_01_画布_第3张图片

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

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

HTML5简单易学。

什么是 HTML5?

HTML5 是下一代 HTML 标准。

HTML 4.01的上一个版本诞生于 1999 年。

自从那以后15年间，昔日的婴儿如如今已经成长为亭亭玉立的少女,而Web 世界已经发生了巨变。

HTML5 仍处于完善之中。然而，大部分现代浏览器已经具备了某些 HTML5 支持。

HTML5 受包括Firefox（火狐浏览器），IE9及其更高版本，

Chrome（谷歌浏览器），Safari，Opera等国外主流浏览器的支持；

国内的傲游浏览器（Maxthon），360浏览器、搜狗浏览器、

QQ浏览器等同样具备支持HTML5的能力。

HTML5 是如何起步的？

HTML5 是 W3C 与 WHATWG 合作的结果,

WHATWG 指 Web Hypertext Application Technology Working Group。。

WHATWG 致力于 web 表单和应用程序，

而 W3C 专注于 XHTML 2.0。


在 2006 年这历史性的时刻，双方情投意合惺惺相惜,决定进行合作，

来给未来世界的人们创建一个全新版本的 HTML。她就是HTML5

HTML5 中的一些有趣的新特性：

  • 用于绘画的 canvas 元素

  • 用于媒介回放的 video 和 audio 元素

  • 对本地离线存储的更好的支持

  • 新的特殊内容元素，比如 article、footer、header、nav、section

  • 新的表单控件，比如 calendar、date、time、email、url、search

HTML5

声明必须位于 HTML5 文档中的第一行,使用非常简单:

最小的HTML5文档

下面是一个简单的HTML5文档：




<span style="margin:0px;padding:0px;">文档标题</span>



文档内容


HTML5的改进

  • 新元素

  • 新属性

  • 完全支持 CSS3

  • Video 和 Audio

  • 2D/3D 制图

  • 本地存储

  • 本地 SQL 数据

  • Web 应用

HTML5 多媒体

使用 HTML5 你可以简单的在网页中播放 视频(video)与音频 (audio) 。

  • HTML5 

  • HTML5 

HTML5 应用

使用 HTML5 你可以简单地开发应用

  • 本地数据存储

  • 访问本地文件

  • 本地 SQL 数据

  • 缓存引用

  • Javascript 工作者

  • XHTMLHttpRequest 2

HTML5 图形

使用 HTML5 你可以简单的绘制图形:

  • 使用  元素

  • 使用内联 SVG (Scalable Vector Graphics 可缩放矢量图形)

  • 使用 CSS3 2D/CSS 3D

HTML5 使用 CSS3

  • 新选择器

  • 新属性

  • 动画

  • 2D/3D 转换

  • 圆角

  • 阴影效果

  • 可下载的字体

语义要素

HTML5 添加了很多语义元素如下所示：

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

HTML5 表单

新表单元素, 新属性，新输入类型，自动验证。

已移除元素

以下的11个 HTML 4.01 元素在HTML5中已经被删除:

  • </strong></span></li> <li style="margin-top:0px;margin-left:0px;padding:0px;"><span style="color:#990000;"><strong><strike></strong></span></li> </ul> <hr style="color:rgb(0,0,0);margin-top:15px;margin-bottom:15px;padding:0px;height:0px;border-width:1px 0px 0px;border-top-style:solid;border-top-color:rgb(170,170,170);"> <h2 class="tutheader" style="color:rgb(0,0,0);margin-top:20px;margin-bottom:10px;padding:0px;line-height:1.7;font-size:16px;">每一章中的实例</h2> <p style="color:rgb(0,0,0);margin-bottom:5px;line-height:1.7;">示例代码:</p> <pre><code class="language-html"><!DOCTPYE html> <html> <head> <link rel="icon" href="beyond.jpg" type="image/x-icon"/> <meta charset="UTF-8"> <meta name="author" content="beyond"> <meta http-equiv="refresh" content="550"> <meta name="description" content="免费零基础教程"> <meta name="keywords" content="HTML,CSS,JAVASCRIPT"> <title>beyondの心中の动漫神作</title> <link rel="stylesheet" type="text/css" href="beyondbasestylewhite.css"> </head> <body> <div style="text-align:center"> <audio controls> <source src="daremoinai.ogg" type="audio/ogg"> <source src="daremoinai.mp3" type="audio/mpeg"> 您的浏览器不支持audio标签,embed没有闭合标签 <embed height="50" width="300" src="daremoinai.mp3" /> <object height="50" width="300" data="daremoinai.mp3"></object> </audio> <br/> <object width="300" height="338" data="http://localhost/static/images/daremoinai.jpg"></object> </div> <p style="text-align:center;font-style:normal;color: rgba(113,112,127,1);">空无一人的小镇.mp3</p> <p style="font-size:14px;text-align:center">     Copyright © <a>2018</a> Powered by <a>beyond</a></p> </body> </html></code></pre> <br> <p style="color:rgb(0,0,0);margin-bottom:5px;line-height:1.7;">效果如下:</p> <p style="color:rgb(0,0,0);margin-bottom:5px;line-height:1.7;"><a href="http://img.e-com-net.com/image/info8/289eba7db4fc4fe1aaec366efd2ba9dd.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/289eba7db4fc4fe1aaec366efd2ba9dd.jpg" alt="HTML5_01_画布_第4张图片" width="650" height="833" style="border:1px solid black;"></a><br></p> <p style="color:rgb(0,0,0);margin-bottom:5px;line-height:1.7;"><br></p> <p style="color:rgb(0,0,0);margin-bottom:5px;line-height:1.7;"><br></p> <hr style="color:rgb(0,0,0);margin-top:15px;margin-bottom:15px;padding:0px;height:0px;border-width:1px 0px 0px;border-top-style:solid;border-top-color:rgb(170,170,170);"> <h2 style="color:rgb(0,0,0);margin-top:20px;margin-bottom:10px;padding:0px;line-height:1.7;font-size:16px;">HTML5 - 新特性</h2> <p style="color:rgb(0,0,0);margin-bottom:5px;line-height:1.7;">HTML5 中的一些有趣的新特性：</p> <ul class="list-paddingleft-2" style="margin-top:10px;margin-bottom:10px;padding-left:30px;list-style-position:outside;list-style-image:none;line-height:1.7;"> <li style="margin-top:0px;margin-left:0px;padding:0px;"><p style="margin-bottom:5px;line-height:1.7;"><span style="color:rgb(0,0,0);">用于绘画的 </span><span style="color:#ff0000;"><strong>canvas</strong></span><span style="color:#000000;"> 元素</span></p></li> <li style="color:rgb(0,0,0);margin-top:0px;margin-left:0px;padding:0px;"><p style="margin-bottom:5px;color:rgb(0,0,0);line-height:1.7;">用于媒介回放的 video 和 audio 元素</p></li> <li style="margin-top:0px;margin-left:0px;padding:0px;"><p style="margin-bottom:5px;line-height:1.7;"><span style="color:rgb(0,0,0);">对本地</span><span style="color:#ff0000;"><strong>离线存储</strong></span><span style="color:#000000;">的更好的支持</span></p></li> <li style="margin-top:0px;margin-left:0px;padding:0px;"><p style="margin-bottom:5px;line-height:1.7;"><span style="color:rgb(0,0,0);">新的特殊内容元素，比如 </span><span style="color:#993399;"><strong>article、footer、header、nav、section</strong></span></p></li> <li style="margin-top:0px;margin-left:0px;padding:0px;"><p style="margin-bottom:5px;line-height:1.7;"><span style="color:rgb(0,0,0);">新的表单控件，比如</span><span style="color:#006600;"><strong> calendar、date、time、email、url、search</strong></span></p></li> </ul> <hr style="color:rgb(0,0,0);margin-top:15px;margin-bottom:15px;padding:0px;height:0px;border-width:1px 0px 0px;border-top-style:solid;border-top-color:rgb(170,170,170);"> <h2 style="color:rgb(0,0,0);margin-top:20px;margin-bottom:10px;padding:0px;line-height:1.7;font-size:16px;">HTML5 浏览器支持</h2> <p style="margin-bottom:5px;line-height:1.7;"><span style="color:rgb(0,0,0);">最新版本的 Safari、Chrome、Firefox 以及 Opera 支持</span><span style="color:#ff0000;"><strong>某些</strong></span><span style="color:#000000;"> HTML5 特性。</span></p> <p style="margin-bottom:5px;line-height:1.7;"><span style="color:rgb(0,0,0);">IE9 将支持</span><span style="color:#ff0000;"><strong>某些</strong></span><span style="color:#000000;"> HTML5 特性。</span></p> <p style="color:rgb(0,0,0);margin-bottom:5px;line-height:1.7;"><a href="http://img.e-com-net.com/image/info8/2927cfc4add64f42a53c1891fcdfc473.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/2927cfc4add64f42a53c1891fcdfc473.jpg" alt="HTML5_01_画布_第5张图片" style="padding:0px;border:0px;;border:1px solid black;" width="619" height="354"></a><br style="margin:0px;padding:0px;"></p> </div> </div> <p style="color:rgb(0,0,0);margin-bottom:5px;line-height:1.7;">IE9 以下版本浏览器兼容HTML5的方法，使用百度静态资源的html5shiv包</p> <p style="color:rgb(0,0,0);margin-bottom:5px;line-height:1.7;">源代码如下:</p> <pre><code class="language-javascript">(function(k,m){var g="3.7.0";var d=k.html5||{};var h=/^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i;var c=/^(?:a|b|code|div|fieldset|h1|h2|h3|h4|h5|h6|i|label|li|ol|p|q|span|strong|style|table|tbody|td|th|tr|ul)$/i;var q;var i="_html5shiv";var a=0;var o={};var e;(function(){try{var t=m.createElement("a");t.innerHTML="<xyz></xyz>";q=("hidden" in t);e=t.childNodes.length==1||(function(){(m.createElement)("a");var v=m.createDocumentFragment();return(typeof v.cloneNode=="undefined"||typeof v.createDocumentFragment=="undefined"||typeof v.createElement=="undefined")}())}catch(u){q=true;e=true}}());function f(t,v){var w=t.createElement("p"),u=t.getElementsByTagName("head")[0]||t.documentElement;w.innerHTML="x<style>"+v+"</style>";return u.insertBefore(w.lastChild,u.firstChild)}function l(){var t=j.elements;return typeof t=="string"?t.split(" "):t}function p(t){var u=o[t[i]];if(!u){u={};a++;t[i]=a;o[a]=u}return u}function n(w,t,v){if(!t){t=m}if(e){return t.createElement(w)}if(!v){v=p(t)}var u;if(v.cache[w]){u=v.cache[w].cloneNode()}else{if(c.test(w)){u=(v.cache[w]=v.createElem(w)).cloneNode()}else{u=v.createElem(w)}}return u.canHaveChildren&&!h.test(w)?v.frag.appendChild(u):u}function r(v,x){if(!v){v=m}if(e){return v.createDocumentFragment()}x=x||p(v);var y=x.frag.cloneNode(),w=0,u=l(),t=u.length;for(;w<t;w++){y.createElement(u[w])}return y}function s(t,u){if(!u.cache){u.cache={};u.createElem=t.createElement;u.createFrag=t.createDocumentFragment;u.frag=u.createFrag()}t.createElement=function(v){if(!j.shivMethods){return u.createElem(v)}return n(v,t,u)};t.createDocumentFragment=Function("h,f","return function(){var n=f.cloneNode(),c=n.createElement;h.shivMethods&&("+l().join().replace(/[\w\-]+/g,function(v){u.createElem(v);u.frag.createElement(v);return'c("'+v+'")'})+");return n}")(j,u.frag)}function b(t){if(!t){t=m}var u=p(t);if(j.shivCSS&&!q&&!u.hasCSS){u.hasCSS=!!f(t,"article,aside,dialog,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}mark{background:#FF0;color:#000}template{display:none}")}if(!e){s(t,u)}return t}var j={elements:d.elements||"abbr article aside audio bdi canvas data datalist details dialog figcaption figure footer header hgroup main mark meter nav output progress section summary template time video",version:g,shivCSS:(d.shivCSS!==false),supportsUnknownElements:e,shivMethods:(d.shivMethods!==false),type:"default",shivDocument:b,createElement:n,createDocumentFragment:r};k.html5=j;b(m)}(this,document));</code></pre> <br> <p style="color:rgb(0,0,0);margin-bottom:5px;line-height:1.7;">使用方式如下:</p> <p style="color:rgb(0,0,0);margin-bottom:5px;line-height:1.7;">lt 就是 less than < 的意思</p> <pre style="color:rgb(0,0,0);margin-top:15px;margin-bottom:15px;padding:10px 5px;width:auto;max-width:700px;line-height:1.7;background:rgb(239,239,239);font-size:14px;font-family:Consolas, 'Courier New', Courier, monospace;border:1px solid rgb(221,221,221);white-space:pre-wrap;"><span class="icon-copy" style="margin:0px;padding:0px;font-family:FontAwesome;text-decoration:inherit;width:auto;height:auto;line-height:normal;vertical-align:baseline;background-image:none;background-position:0% 0%;background-repeat:repeat;"></span><span class="icon-edit" style="margin:0px;padding:0px;font-family:FontAwesome;text-decoration:inherit;width:auto;height:auto;line-height:normal;vertical-align:baseline;background-image:none;background-position:0% 0%;background-repeat:repeat;"></span><code class="text" style="margin:0px;background:none;color:rgb(51,51,51);font-family:Consolas, 'Courier New', Courier, monospace;"><span style="margin:0px;padding:0px;"><!--[if lt IE9]> <script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script> <![endif]--></span></code></pre> <p style="color:rgb(0,0,0);margin-bottom:5px;line-height:1.7;">载入后，然后再初始化新标签的CSS样式为块级,因为:</p> <p style="margin-bottom:5px;line-height:1.7;"><span style="color:rgb(0,0,0);">HTML5 定了 8 个新的 HTML </span><span style="color:#ff0000;"><strong>语义(semantic)元素</strong></span><span style="color:#000000;">。</span></p> <p style="margin-bottom:5px;line-height:1.7;"><span style="color:#000000;">所有这些元素都是 </span><span style="color:#ff0000;"><strong>块级</strong></span><span style="color:#000000;"> 元素。</span><br><span style="color:#000000;">为了能让旧版本的浏览器正确显示这些元素，</span></p> <p style="margin-bottom:5px;line-height:1.7;"><span style="color:#000000;">你可以设置 CSS 的 display 属性值为 </span><span style="color:#ff0000;"><strong>block</strong></span><span style="color:#000000;">:</span><br></p> <pre style="color:rgb(0,0,0);margin-top:15px;margin-bottom:15px;padding:10px 5px;width:auto;max-width:700px;line-height:1.7;background:rgb(239,239,239);font-size:14px;font-family:Consolas, 'Courier New', Courier, monospace;border:1px solid rgb(221,221,221);white-space:pre-wrap;"><span class="icon-copy" style="margin:0px;padding:0px;font-family:FontAwesome;text-decoration:inherit;width:auto;height:auto;line-height:normal;vertical-align:baseline;background-image:none;background-position:0% 0%;background-repeat:repeat;"></span><span class="icon-edit" style="margin:0px;padding:0px;font-family:FontAwesome;text-decoration:inherit;width:auto;height:auto;line-height:normal;vertical-align:baseline;background-image:none;background-position:0% 0%;background-repeat:repeat;"></span><code class="text" style="margin:0px;background:none;color:rgb(51,51,51);font-family:Consolas, 'Courier New', Courier, monospace;"><span style="margin:0px;padding:0px;">/*html5*/</span><span style="margin:0px;padding:0px;"> article</span><span style="margin:0px;padding:0px;">,</span><span style="margin:0px;padding:0px;">aside</span><span style="margin:0px;padding:0px;">,</span><span style="margin:0px;padding:0px;">dialog</span><span style="margin:0px;padding:0px;">,</span><span style="margin:0px;padding:0px;">footer</span><span style="margin:0px;padding:0px;">,</span><span style="margin:0px;padding:0px;">header</span><span style="margin:0px;padding:0px;">,</span><span style="margin:0px;padding:0px;">section</span><span style="margin:0px;padding:0px;">,</span><span style="margin:0px;padding:0px;">footer</span><span style="margin:0px;padding:0px;">,</span><span style="margin:0px;padding:0px;">nav</span><span style="margin:0px;padding:0px;">,</span><span style="margin:0px;padding:0px;">figure</span><span style="margin:0px;padding:0px;">,</span><span style="margin:0px;padding:0px;">menu</span><span style="margin:0px;padding:0px;">{</span><span style="margin:0px;padding:0px;">display</span><span style="margin:0px;padding:0px;">:</span><span style="margin:0px;padding:0px;">block</span><span style="margin:0px;padding:0px;">}</span></code></pre> </div> </div> <p></p> <div class="content-bg" style="margin:0px;padding:0px;width:auto;max-width:980px;font-family:Verdana, Arial, Helvetica, sans-serif;font-size:14px;background-color:rgb(255,255,255);"> <div class="content-intro view-box" style="margin-right:0px;margin-bottom:0px;margin-left:0px;padding:15px 0px 20px;line-height:1.7;min-height:600px;margin-top:0px;"> <div class="article-body" style="margin:0px;padding:0px;"> <div class="article-intro" style="margin:0px;padding:0px;"> <h2 style="color:rgb(0,0,0);margin-top:0px;margin-bottom:10px;padding:.25em 0px 0px;line-height:1.7;font-size:16px;border-top:none;">HTML5 <span class="color_h1" style="margin:0px;padding:0px;">浏览器支持</span></h2> <hr style="color:rgb(0,0,0);margin-top:15px;margin-bottom:15px;padding:0px;height:0px;border-width:1px 0px 0px;border-top-style:solid;border-top-color:rgb(170,170,170);"> <p class="intro" style="color:rgb(0,0,0);margin-bottom:5px;line-height:1.7;">目前市面上的浏览器有很多版本，</p> <p class="intro" style="color:rgb(0,0,0);margin-bottom:5px;line-height:1.7;">你可以想想办法让一些较早的<span style="color:rgb(0,0,0);font-family:Verdana, Arial, Helvetica, sans-serif;background-color:rgb(255,255,255);">不支持HTML5的</span>浏览器 支持 HTML5。</p> <hr style="color:rgb(0,0,0);margin-top:15px;margin-bottom:15px;padding:0px;height:0px;border-width:1px 0px 0px;border-top-style:solid;border-top-color:rgb(170,170,170);"> <h2 style="color:rgb(0,0,0);margin-top:20px;margin-bottom:10px;padding:0px;line-height:1.7;font-size:16px;">HTML5 浏览器支持</h2> <p style="color:rgb(0,0,0);margin-bottom:5px;line-height:1.7;">现代的浏览器都支持 HTML5。</p> <p style="margin-bottom:5px;line-height:1.7;"><span style="color:rgb(0,0,0);">此外，所有浏览器，包括旧的和最新的，对无法识别的元素会作为</span><span style="color:#ff0000;"><strong>内联元素</strong></span><span style="color:#000000;">自动处理。</span></p> <p style="color:rgb(0,0,0);margin-bottom:5px;line-height:1.7;">正因为如此，你可以 <span style="margin:0px;padding:0px;">"手把手调教"</span> 浏览器处理 <span style="margin:0px;padding:0px;">"未知"</span> 的 HTML 元素</p> <h2 style="color:rgb(0,0,0);margin-top:20px;margin-bottom:10px;padding:0px;line-height:1.7;font-size:16px;">将 HTML5 元素定义为块元素</h2> <p style="color:rgb(0,0,0);margin-bottom:5px;line-height:1.7;">HTML5 定了 8 个新的 HTML <span style="margin:0px;padding:0px;">语义(semantic)</span> 元素。</p> <p style="margin-bottom:5px;line-height:1.7;"><span style="color:#000000;">所有这些元素都是 </span><span style="margin:0px;padding:0px;"><span style="color:#ff0000;"><strong>块级</strong></span></span><span style="color:#000000;"> 元素。</span></p> <p style="color:rgb(0,0,0);margin-bottom:5px;line-height:1.7;">为了能让旧版本的浏览器正确显示这些元素，</p> <p style="color:rgb(0,0,0);margin-bottom:5px;line-height:1.7;">你可以设置 CSS 的 <span style="margin:0px;padding:0px;">display</span> 属性值为 <span style="margin:0px;padding:0px;">block</span>:</p> <div class="example" style="color:rgb(51,51,51);margin:10px 0px;padding:10px 15px;background-color:rgb(239,239,239);border:1px solid rgb(221,221,221);max-width:700px;"> <h2 class="example" style="margin-top:0px;margin-bottom:10px;padding:0px;color:rgb(144,11,9);line-height:1.7;font-size:14px;border:none;max-width:700px;">实例</h2> <div class="example_code" style="margin:0px;padding:10px;background-color:rgb(255,255,255);border:1px solid rgb(221,221,221);font-family:Consolas, 'Courier New', Courier, monospace;line-height:1.7;"> header, section, footer, aside, nav, main, article, figure { <br style="margin:0px;padding:0px;">   display: block;  <br style="margin:0px;padding:0px;">} </div> </div> <br style="margin:0px;padding:0px;"> <hr style="color:rgb(0,0,0);margin-top:15px;margin-bottom:15px;padding:0px;height:0px;border-width:1px 0px 0px;border-top-style:solid;border-top-color:rgb(170,170,170);"> <h2 style="color:rgb(0,0,0);margin-top:20px;margin-bottom:10px;padding:0px;line-height:1.7;font-size:16px;">为 HTML 添加新元素</h2> <p style="color:rgb(0,0,0);margin-bottom:5px;line-height:1.7;">你可以为 HTML 添加 新的元素 。</p> <p style="color:rgb(0,0,0);margin-bottom:5px;line-height:1.7;">该实例向 HTML 添加的 新的元素，并为该元素定义样式，</p> <p style="color:rgb(0,0,0);margin-bottom:5px;line-height:1.7;">元素名为 <span style="margin:0px;padding:0px;"><myHero></span> </p> <p style="color:rgb(0,0,0);margin-bottom:5px;line-height:1.7;">代码如下:</p> <pre><code class="language-html"><!DOCTPYE html> <html> <head> <link rel="icon" href="beyond.jpg" type="image/x-icon"/> <meta charset="UTF-8"> <meta name="author" content="beyond"> <meta http-equiv="refresh" content="550"> <meta name="description" content="免费零基础教程"> <meta name="keywords" content="HTML,CSS,JAVASCRIPT"> <title>beyondの心中の动漫神作</title> <link rel="stylesheet" type="text/css" href="beyondbasestylewhite.css"> <script type="text/javascript"> document.createElement("Beyond"); </script> <style type="text/css"> beyond{ display: block; text-align: center; background-color: rgb(249,241,224); font-size: 30px; color: black; padding: 50; } </style> </head> <body> <beyond>这是一个新的HTML标签</beyond> <p style="text-align:center;font-style:normal;color: rgba(113,112,127,1);">空无一人的小镇.mp3</p> <p style="font-size:14px;text-align:center">     Copyright © <a>2018</a> Powered by <a>beyond</a></p> </body> </html></code></pre> <br> <p style="color:rgb(0,0,0);margin-bottom:5px;line-height:1.7;">效果如下:</p> <p style="color:rgb(0,0,0);margin-bottom:5px;line-height:1.7;"><a href="http://img.e-com-net.com/image/info8/bfba019935c34e83ae3bd1108ff2cce6.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/bfba019935c34e83ae3bd1108ff2cce6.jpg" alt="HTML5_01_画布_第6张图片" width="650" height="504" style="border:1px solid black;"></a><br></p> <p style="margin-bottom:5px;line-height:1.7;"><span style="color:rgb(0,0,0);"><br></span></p> <p style="margin-bottom:5px;line-height:1.7;"><span style="color:rgb(0,0,0);">JavaScript 语句 <span style="margin:0px;padding:0px;">document.createElement("beyond")</span> 是为了给 </span><span style="color:#ff0000;"><strong>IE的浏览器</strong></span><span style="color:#000000;">添加新的beyond元素。</span></p> <hr style="color:rgb(0,0,0);margin-top:15px;margin-bottom:15px;padding:0px;height:0px;border-width:1px 0px 0px;border-top-style:solid;border-top-color:rgb(170,170,170);"> <h2 style="color:rgb(0,0,0);margin-top:20px;margin-bottom:10px;padding:0px;line-height:1.7;font-size:16px;">Internet Explorer 浏览器问题</h2> <p style="color:rgb(0,0,0);margin-bottom:5px;line-height:1.7;">你可以使用以上的方法来为 IE 浏览器添加 HTML5 元素，</p> <p style="color:rgb(0,0,0);margin-bottom:5px;line-height:1.7;">但是：</p> <table class="lamp" style="color:rgb(0,0,0);margin:15px 0px;padding:0px;width:699px;table-layout:fixed;border-spacing:0px;border:1px solid rgb(221,221,221);"> <tbody style="margin:0px;padding:0px;"> <tr class="firstRow" style="margin:0px;padding:0px;"> <th style="margin:0px;padding:10px 5px 10px 10px;background-color:rgb(255,255,255);border-color:rgb(204,204,204);color:rgb(102,102,102);width:34px;">注意</th> <td style="margin:0px;padding:4px 10px;min-width:40px;height:30px;border-style:none;vertical-align:middle;">Internet Explorer 8 及更早 IE 版本的浏览器<span style="color:#ff0000;"><strong> 不支持 </strong></span>以上的方式。</td> </tr> </tbody> </table> <p style="margin-bottom:5px;line-height:1.7;"><span style="color:rgb(0,0,0);">我们可以使用 Sjoerd Visscher 创建的 "</span><span style="color:#ff0000;"><strong>HTML5 Enabling JavaScript</strong></span><span style="color:#000000;">",</span></p> <p style="margin-bottom:5px;line-height:1.7;"><span style="color:#000000;"> "</span><span style="color:rgb(0,0,0);margin:0px;padding:0px;"> shiv</span><span style="color:#000000;">" 来解决该问题:</span></p> <div class="example" style="color:rgb(51,51,51);margin:10px 0px;padding:10px 15px;background-color:rgb(239,239,239);border:1px solid rgb(221,221,221);max-width:700px;"> <div class="example_code notranslate htmlHigh" style="margin:0px;padding:10px;background-color:rgb(255,255,255);border:1px solid rgb(221,221,221);font-family:Consolas, 'Courier New', Courier, monospace;line-height:1.7;"> <!--[if lt IE 9]> <br style="margin:0px;padding:0px;">  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <br style="margin:0px;padding:0px;"><![endif]--> </div> </div> <p style="margin-bottom:5px;line-height:1.7;"><span style="color:rgb(0,0,0);">以上代码是一个注释，作用是在 IE 浏览器的版本</span><span style="color:#ff0000;"><strong>小于 IE9</strong></span><span style="color:#000000;"> 时将读取 html5.js 文件，并解析它。</span></p> <p style="color:rgb(0,0,0);margin-bottom:5px;line-height:1.7;"><span style="margin:0px;padding:0px;"><br></span></p> <p style="color:rgb(0,0,0);margin-bottom:5px;line-height:1.7;"><span style="margin:0px;padding:0px;">注意：</span>国内用户请使用百度静态资源库（Google 资源库在国内不稳定）：</p> <div class="example" style="color:rgb(51,51,51);margin:10px 0px;padding:10px 15px;background-color:rgb(239,239,239);border:1px solid rgb(221,221,221);max-width:700px;"> <div class="example_code notranslate htmlHigh" style="margin:0px;padding:10px;background-color:rgb(255,255,255);border:1px solid rgb(221,221,221);font-family:Consolas, 'Courier New', Courier, monospace;line-height:1.7;"> <!--[if lt IE 9]> <br style="margin:0px;padding:0px;">  <script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script> <br style="margin:0px;padding:0px;"><![endif]--> </div> </div> <p style="color:rgb(0,0,0);margin-bottom:5px;line-height:1.7;">也可以直接使用百度资源库的源码:</p> <pre><code class="language-javascript">(function(k,m){var g="3.7.0";var d=k.html5||{};var h=/^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i;var c=/^(?:a|b|code|div|fieldset|h1|h2|h3|h4|h5|h6|i|label|li|ol|p|q|span|strong|style|table|tbody|td|th|tr|ul)$/i;var q;var i="_html5shiv";var a=0;var o={};var e;(function(){try{var t=m.createElement("a");t.innerHTML="<xyz></xyz>";q=("hidden" in t);e=t.childNodes.length==1||(function(){(m.createElement)("a");var v=m.createDocumentFragment();return(typeof v.cloneNode=="undefined"||typeof v.createDocumentFragment=="undefined"||typeof v.createElement=="undefined")}())}catch(u){q=true;e=true}}());function f(t,v){var w=t.createElement("p"),u=t.getElementsByTagName("head")[0]||t.documentElement;w.innerHTML="x<style>"+v+"</style>";return u.insertBefore(w.lastChild,u.firstChild)}function l(){var t=j.elements;return typeof t=="string"?t.split(" "):t}function p(t){var u=o[t[i]];if(!u){u={};a++;t[i]=a;o[a]=u}return u}function n(w,t,v){if(!t){t=m}if(e){return t.createElement(w)}if(!v){v=p(t)}var u;if(v.cache[w]){u=v.cache[w].cloneNode()}else{if(c.test(w)){u=(v.cache[w]=v.createElem(w)).cloneNode()}else{u=v.createElem(w)}}return u.canHaveChildren&&!h.test(w)?v.frag.appendChild(u):u}function r(v,x){if(!v){v=m}if(e){return v.createDocumentFragment()}x=x||p(v);var y=x.frag.cloneNode(),w=0,u=l(),t=u.length;for(;w<t;w++){y.createElement(u[w])}return y}function s(t,u){if(!u.cache){u.cache={};u.createElem=t.createElement;u.createFrag=t.createDocumentFragment;u.frag=u.createFrag()}t.createElement=function(v){if(!j.shivMethods){return u.createElem(v)}return n(v,t,u)};t.createDocumentFragment=Function("h,f","return function(){var n=f.cloneNode(),c=n.createElement;h.shivMethods&&("+l().join().replace(/[\w\-]+/g,function(v){u.createElem(v);u.frag.createElement(v);return'c("'+v+'")'})+");return n}")(j,u.frag)}function b(t){if(!t){t=m}var u=p(t);if(j.shivCSS&&!q&&!u.hasCSS){u.hasCSS=!!f(t,"article,aside,dialog,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}mark{background:#FF0;color:#000}template{display:none}")}if(!e){s(t,u)}return t}var j={elements:d.elements||"abbr article aside audio bdi canvas data datalist details dialog figcaption figure footer header hgroup main mark meter nav output progress section summary template time video",version:g,shivCSS:(d.shivCSS!==false),supportsUnknownElements:e,shivMethods:(d.shivMethods!==false),type:"default",shivDocument:b,createElement:n,createDocumentFragment:r};k.html5=j;b(m)}(this,document));</code></pre> <br> <p style="color:rgb(0,0,0);margin-bottom:5px;line-height:1.7;"><br></p> <p style="margin-bottom:5px;line-height:1.7;"><span style="color:rgb(0,0,0);">针对IE浏览器</span><span style="color:#ff0000;"><strong>html5shiv</strong></span><span style="color:#000000;"> 是比较好的解决方案。</span></p> <p style="margin-bottom:5px;line-height:1.7;"><span style="color:rgb(0,0,0);">html5shiv主要解决:HTML5提出的新的元素不被</span><span style="color:#ff0000;"><strong>IE6.7.8</strong></span><span style="color:#000000;">识别，</span></p> <p style="color:rgb(0,0,0);margin-bottom:5px;line-height:1.7;">这些新元素不能作为父节点包裹子元素，并且不能应用CSS样式。</p> <br> <hr style="color:rgb(0,0,0);margin-top:15px;margin-bottom:15px;padding:0px;height:0px;border-width:1px 0px 0px;border-top-style:solid;border-top-color:rgb(170,170,170);"> <h2 style="color:rgb(0,0,0);margin-top:20px;margin-bottom:10px;padding:0px;line-height:1.7;font-size:16px;">完美的 Shiv 解决方案 </h2> <p>完整的代码如下:</p> <pre><code class="language-html"><!DOCTPYE html> <html> <head> <link rel="icon" href="beyond.jpg" type="image/x-icon"/> <meta charset="UTF-8"> <meta name="author" content="beyond"> <meta http-equiv="refresh" content="520"> <meta name="description" content="免费零基础教程"> <meta name="keywords" content="HTML,CSS,JAVASCRIPT"> <title>beyondの心中の动漫神作</title> <link rel="stylesheet" type="text/css" href="beyondbasestylewhite.css"> <!--[if lt IE 9]> <script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script> <![endif]--> </head> <body> <article style="text-align:center;">这个是HTML5的新标签:article标签</article> <p style="font-size:14px;text-align:center">Copyright © <a>2018</a> Powered by <a>beyond</a></p> </body> </html></code></pre> <br> <p>效果如下:</p> <p><a href="http://img.e-com-net.com/image/info8/f49e1a2789224dbd969e8101cfbdc2ee.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/f49e1a2789224dbd969e8101cfbdc2ee.jpg" alt="HTML5_01_画布_第7张图片" width="650" height="266" style="border:1px solid black;"></a><br></p> <p style="color:rgb(0,0,0);margin-bottom:5px;line-height:1.7;"><br></p> <p style="color:rgb(0,0,0);margin-bottom:5px;line-height:1.7;">注意:</p> <p style="color:rgb(0,0,0);margin-bottom:5px;line-height:1.7;">html5shiv.js 引用代码必须放在  <span style="color:#900b09;"><span><u><head></u></span></span> 元素中，</p> <p style="color:rgb(0,0,0);margin-bottom:5px;line-height:1.7;">因为 IE 浏览器在解析 HTML5 新元素时需要先加载该文件。</p> </div> </div> </div> </div> <p><br></p> <p></p> <div class="content-bg" style="margin:0px;padding:0px;width:auto;max-width:980px;font-family:Verdana, Arial, Helvetica, sans-serif;font-size:14px;background-color:rgb(255,255,255);"> <div class="content-intro view-box" style="margin-right:0px;margin-bottom:0px;margin-left:0px;padding:15px 0px 20px;line-height:1.7;min-height:600px;margin-top:0px;"> <h2 style="color:rgb(0,0,0);margin-top:0px;margin-bottom:10px;padding:.25em 0px 0px;line-height:1.7;font-size:16px;border-top:none;">HTML5 <span class="color_h1" style="margin:0px;padding:0px;">新元素</span></h2> <div style="color:rgb(0,0,0);margin:0px;padding:0px;"> <span class="color_h1" style="margin:0px;padding:0px;">随着HTML版本的更新迭代，有很多元素的使用也在不断的发生着变化，</span> </div> <div style="color:rgb(0,0,0);margin:0px;padding:0px;"> <span class="color_h1" style="margin:0px;padding:0px;">本节我们将介绍HTML5中的一些新的元素！</span> </div> <hr style="color:rgb(0,0,0);margin-top:15px;margin-bottom:15px;padding:0px;height:0px;border-width:1px 0px 0px;border-top-style:solid;border-top-color:rgb(170,170,170);"> <h2 style="color:rgb(0,0,0);margin-top:20px;margin-bottom:10px;padding:0px;line-height:1.7;font-size:16px;">HTML5 新元素</h2> <p style="color:rgb(0,0,0);margin-bottom:5px;line-height:1.7;">自1999年以后HTML 4.01 已经改变了很多,</p> <p style="color:rgb(0,0,0);margin-bottom:5px;line-height:1.7;">15年以后的今天，在HTML 4.01中的有几个元素已经被废弃，</p> <p style="color:rgb(0,0,0);margin-bottom:5px;line-height:1.7;">这些元素在HTML5中已经被删除或重新定义。</p> <p style="color:rgb(0,0,0);margin-bottom:5px;line-height:1.7;">为了更好地处理今天的互联网及移动应用，</p> <p style="color:rgb(0,0,0);margin-bottom:5px;line-height:1.7;">HTML5添加了很多新元素及功能，</p> <p style="color:rgb(0,0,0);margin-bottom:5px;line-height:1.7;">比如: </p> <p style="margin-bottom:5px;line-height:1.7;"><span style="color:#ff0000;"><strong>图形</strong></span><span style="color:rgb(0,0,0);">的绘制，</span></p> <p style="color:rgb(0,0,0);margin-bottom:5px;line-height:1.7;">多媒体内容，</p> <p style="margin-bottom:5px;line-height:1.7;"><span style="color:rgb(0,0,0);">更好的</span><span style="color:#ff0000;"><strong>页面结构</strong></span><span style="color:#000000;">，</span></p> <p style="color:rgb(0,0,0);margin-bottom:5px;line-height:1.7;">更好的形式 处理，</p> <p style="margin-bottom:5px;line-height:1.7;"><span style="color:rgb(0,0,0);">和几个api</span><span style="color:#ff0000;"><strong>拖放元素，定位</strong></span><span style="color:#000000;">，</span></p> <p style="margin-bottom:5px;line-height:1.7;"><span style="color:rgb(0,0,0);">包括网页应用程序</span><span style="color:#ff0000;"><strong>缓存，存储</strong></span><span style="color:#000000;">，</span></p> <p style="margin-bottom:5px;line-height:1.7;"><span style="color:#ff0000;"><strong>网络工作者</strong></span><span style="color:rgb(0,0,0);">等等。</span></p> <hr style="color:rgb(0,0,0);margin-top:15px;margin-bottom:15px;padding:0px;height:0px;border-width:1px 0px 0px;border-top-style:solid;border-top-color:rgb(170,170,170);"> <h2 style="color:rgb(0,0,0);margin-top:20px;margin-bottom:10px;padding:0px;line-height:1.7;font-size:16px;"><canvas> 新元素</h2> <table class="reference notranslate" style="color:rgb(0,0,0);margin:4px 0px;padding:0px;width:699px;table-layout:fixed;border-spacing:0px;"> <tbody style="margin:0px;padding:0px;"> <tr style="margin:0px;padding:0px;background-color:rgb(239,239,239);"> <th align="left" width="110" style="margin:0px;padding:3px;background-color:rgb(189,189,189);border-top-color:rgb(189,189,189);border-right-color:rgb(189,189,189);border-bottom:none;border-left-color:rgb(189,189,189);color:rgb(255,255,255);vertical-align:top;">标签</th> <th align="left" style="margin:0px;padding:3px;background-color:rgb(189,189,189);border-top-color:rgb(189,189,189);border-right-color:rgb(189,189,189);border-bottom:none;border-left-color:rgb(189,189,189);color:rgb(255,255,255);vertical-align:top;">描述</th> </tr> <tr style="margin:0px;padding:0px;background-color:rgb(255,255,255);"> <td style="margin:0px;padding:7px 5px;min-width:40px;height:30px;vertical-align:top;"><span style="color:#900b09;"><span><u><canvas></u></span></span></td> <td style="margin:0px;padding:7px 5px;min-width:40px;height:30px;vertical-align:top;">标签定义图形，比如图表和其他图像。<br>该标签基于 JavaScript 的绘图 API</td> </tr> </tbody> </table> <br style="margin:0px;padding:0px;"> <hr style="color:rgb(0,0,0);margin-top:15px;margin-bottom:15px;padding:0px;height:0px;border-width:1px 0px 0px;border-top-style:solid;border-top-color:rgb(170,170,170);"> <h2 style="color:rgb(0,0,0);margin-top:20px;margin-bottom:10px;padding:0px;line-height:1.7;font-size:16px;">新多媒体元素</h2> <table class="reference" style="color:rgb(0,0,0);margin:4px 0px;padding:0px;width:699px;table-layout:fixed;border-spacing:0px;"> <tbody style="margin:0px;padding:0px;"> <tr style="margin:0px;padding:0px;background-color:rgb(239,239,239);"> <th align="left" width="110" style="margin:0px;padding:3px;background-color:rgb(189,189,189);border-top-color:rgb(189,189,189);border-right-color:rgb(189,189,189);border-bottom:none;border-left-color:rgb(189,189,189);color:rgb(255,255,255);vertical-align:top;">标签</th> <th align="left" style="margin:0px;padding:3px;background-color:rgb(189,189,189);border-top-color:rgb(189,189,189);border-right-color:rgb(189,189,189);border-bottom:none;border-left-color:rgb(189,189,189);color:rgb(255,255,255);vertical-align:top;">描述</th> </tr> <tr style="margin:0px;padding:0px;background-color:rgb(255,255,255);"> <td style="margin:0px;padding:7px 5px;min-width:40px;height:30px;vertical-align:top;"><span style="color:#900b09;"><span><u><audio></u></span></span></td> <td style="margin:0px;padding:7px 5px;min-width:40px;height:30px;vertical-align:top;">定义音频内容</td> </tr> <tr style="margin:0px;padding:0px;background-color:rgb(239,239,239);"> <td style="margin:0px;padding:7px 5px;min-width:40px;height:30px;vertical-align:top;"><span style="color:#900b09;"><span><u><video></u></span></span></td> <td style="margin:0px;padding:7px 5px;min-width:40px;height:30px;vertical-align:top;">定义视频（video 或者 movie）</td> </tr> <tr style="margin:0px;padding:0px;background-color:rgb(255,255,255);"> <td style="margin:0px;padding:7px 5px;min-width:40px;height:30px;vertical-align:top;"><span style="color:#900b09;"><span><u><source></u></span></span></td> <td style="margin:0px;padding:7px 5px;min-width:40px;height:30px;vertical-align:top;">定义多媒体资源 <video> 和 <audio></td> </tr> <tr style="margin:0px;padding:0px;background-color:rgb(239,239,239);"> <td style="margin:0px;padding:7px 5px;min-width:40px;height:30px;vertical-align:top;"><span style="color:#900b09;"><span><u><embed></u></span></span></td> <td style="margin:0px;padding:7px 5px;min-width:40px;height:30px;vertical-align:top;">定义嵌入的内容，比如插件。</td> </tr> <tr style="margin:0px;padding:0px;background-color:rgb(255,255,255);"> <td style="margin:0px;padding:7px 5px;min-width:40px;height:30px;vertical-align:top;"><span style="color:#900b09;"><span><u><track></u></span></span></td> <td style="margin:0px;padding:7px 5px;min-width:40px;height:30px;vertical-align:top;">为诸如 <video> 和 <audio> 元素之类的媒介规定外部<span style="color:#ff0000;"><strong>文本轨道(字幕)</strong></span>。</td> </tr> </tbody> </table> <br style="margin:0px;padding:0px;"> <hr style="color:rgb(0,0,0);margin-top:15px;margin-bottom:15px;padding:0px;height:0px;border-width:1px 0px 0px;border-top-style:solid;border-top-color:rgb(170,170,170);"> <h2 style="color:rgb(0,0,0);margin-top:20px;margin-bottom:10px;padding:0px;line-height:1.7;font-size:16px;">新表单元素</h2> <table class="reference" style="color:rgb(0,0,0);margin:4px 0px;padding:0px;width:699px;table-layout:fixed;border-spacing:0px;"> <tbody style="margin:0px;padding:0px;"> <tr style="margin:0px;padding:0px;background-color:rgb(239,239,239);"> <th align="left" width="110" style="margin:0px;padding:3px;background-color:rgb(189,189,189);border-top-color:rgb(189,189,189);border-right-color:rgb(189,189,189);border-bottom:none;border-left-color:rgb(189,189,189);color:rgb(255,255,255);vertical-align:top;">标签</th> <th align="left" style="margin:0px;padding:3px;background-color:rgb(189,189,189);border-top-color:rgb(189,189,189);border-right-color:rgb(189,189,189);border-bottom:none;border-left-color:rgb(189,189,189);color:rgb(255,255,255);vertical-align:top;">描述</th> </tr> <tr style="margin:0px;padding:0px;background-color:rgb(255,255,255);"> <td style="margin:0px;padding:7px 5px;min-width:40px;height:30px;vertical-align:top;"><span style="color:#900b09;"><span><u><datalist></u></span></span></td> <td style="margin:0px;padding:7px 5px;min-width:40px;height:30px;vertical-align:top;">定义选项列表。<br>请与 <span style="color:#ff0000;"><strong>input 元素</strong></span>配合使用该元素，来定义<span style="color:#ff0000;"><strong> input 可能的值</strong></span>。</td> </tr> <tr style="margin:0px;padding:0px;background-color:rgb(239,239,239);"> <td style="margin:0px;padding:7px 5px;min-width:40px;height:30px;vertical-align:top;"><span style="color:#900b09;"><span><u><keygen></u></span></span></td> <td style="margin:0px;padding:7px 5px;min-width:40px;height:30px;vertical-align:top;">规定用于表单的<span style="color:#ff0000;"><strong>密钥对生成器</strong></span>字段。</td> </tr> <tr style="margin:0px;padding:0px;background-color:rgb(255,255,255);"> <td style="margin:0px;padding:7px 5px;min-width:40px;height:30px;vertical-align:top;"><span style="color:#900b09;"><span><u><output></u></span></span></td> <td style="margin:0px;padding:7px 5px;min-width:40px;height:30px;vertical-align:top;">定义不同类型的输出，比如<span style="color:#ff0000;"><strong>脚本的输出</strong></span>。</td> </tr> </tbody> </table> <br> <br style="margin:0px;padding:0px;"> <hr style="color:rgb(0,0,0);margin-top:15px;margin-bottom:15px;padding:0px;height:0px;border-width:1px 0px 0px;border-top-style:solid;border-top-color:rgb(170,170,170);"> <h2 style="color:rgb(0,0,0);margin-top:20px;margin-bottom:10px;padding:0px;line-height:1.7;font-size:16px;">新的语义和结构元素</h2> <p style="color:rgb(0,0,0);margin-bottom:5px;line-height:1.7;">HTML5提供了新的元素来创建更好的页面结构：</p> <table class="reference notranslate" style="color:rgb(0,0,0);margin:4px 0px;padding:0px;width:699px;table-layout:fixed;border-spacing:0px;"> <tbody style="margin:0px;padding:0px;"> <tr style="margin:0px;padding:0px;background-color:rgb(239,239,239);"> <th align="left" width="110" style="margin:0px;padding:3px;background-color:rgb(189,189,189);border-top-color:rgb(189,189,189);border-right-color:rgb(189,189,189);border-bottom:none;border-left-color:rgb(189,189,189);color:rgb(255,255,255);vertical-align:top;">标签</th> <th align="left" style="margin:0px;padding:3px;background-color:rgb(189,189,189);border-top-color:rgb(189,189,189);border-right-color:rgb(189,189,189);border-bottom:none;border-left-color:rgb(189,189,189);color:rgb(255,255,255);vertical-align:top;">描述</th> </tr> <tr style="margin:0px;padding:0px;background-color:rgb(255,255,255);"> <td style="margin:0px;padding:7px 5px;min-width:40px;height:30px;vertical-align:top;"><span style="color:#900b09;"><span><u><article></u></span></span></td> <td style="margin:0px;padding:7px 5px;min-width:40px;height:30px;vertical-align:top;">定义页面 <span style="color:#ff0000;"><strong>独立的 内容区域</strong></span>。</td> </tr> <tr style="margin:0px;padding:0px;background-color:rgb(239,239,239);"> <td style="margin:0px;padding:7px 5px;min-width:40px;height:30px;vertical-align:top;"><span style="color:#900b09;"><span><u><aside></u></span></span></td> <td style="margin:0px;padding:7px 5px;min-width:40px;height:30px;vertical-align:top;">定义页面的 <span style="color:#660000;"><strong>侧边栏 内容</strong></span>。</td> </tr> <tr style="margin:0px;padding:0px;background-color:rgb(255,255,255);"> <td style="margin:0px;padding:7px 5px;min-width:40px;height:30px;vertical-align:top;"><span style="color:#900b09;"><span><u><bdi></u></span></span></td> <td style="margin:0px;padding:7px 5px;min-width:40px;height:30px;vertical-align:top;">允许您设置一段文本，使其 <span style="color:#996633;"><strong>脱离其父元素的文本方向</strong></span> 设置。</td> </tr> <tr style="margin:0px;padding:0px;background-color:rgb(239,239,239);"> <td style="margin:0px;padding:7px 5px;min-width:40px;height:30px;vertical-align:top;"><span style="color:#900b09;"><span><u><command></u></span></span></td> <td style="margin:0px;padding:7px 5px;min-width:40px;height:30px;vertical-align:top;">定义 <span style="color:#ff0000;"><strong>命令按钮</strong></span>，比如单选按钮、复选框或按钮</td> </tr> <tr style="margin:0px;padding:0px;background-color:rgb(255,255,255);"> <td style="margin:0px;padding:7px 5px;min-width:40px;height:30px;vertical-align:top;"><span style="color:#900b09;"><span><u><details></u></span></span></td> <td style="margin:0px;padding:7px 5px;min-width:40px;height:30px;vertical-align:top;">用于描述文档或文档某个部分的 <span style="color:#ff0000;"><strong>细节</strong></span></td> </tr> <tr style="margin:0px;padding:0px;background-color:rgb(239,239,239);"> <td style="margin:0px;padding:7px 5px;min-width:40px;height:30px;vertical-align:top;"><span style="color:#900b09;"><span><u><dialog></u></span></span></td> <td style="margin:0px;padding:7px 5px;min-width:40px;height:30px;vertical-align:top;">定义 <span style="color:#ff0000;"><strong>对话框</strong></span>，比如提示框</td> </tr> <tr style="margin:0px;padding:0px;background-color:rgb(255,255,255);"> <td style="margin:0px;padding:7px 5px;min-width:40px;height:30px;vertical-align:top;"><span style="color:#900b09;"><span><u><summary></u></span></span></td> <td style="margin:0px;padding:7px 5px;min-width:40px;height:30px;vertical-align:top;">标签包含 details 元素的 <span style="color:#990000;"><strong>标题</strong></span></td> </tr> <tr style="margin:0px;padding:0px;background-color:rgb(239,239,239);"> <td style="margin:0px;padding:7px 5px;min-width:40px;height:30px;vertical-align:top;"><span style="color:#900b09;"><span><u><figure></u></span></span></td> <td style="margin:0px;padding:7px 5px;min-width:40px;height:30px;vertical-align:top;">规定独立的 <span style="color:#ff0000;"><strong>流内容</strong></span>（图像、图表、照片、代码等等）。</td> </tr> <tr style="margin:0px;padding:0px;background-color:rgb(255,255,255);"> <td style="margin:0px;padding:7px 5px;min-width:40px;height:30px;vertical-align:top;"><span style="color:#900b09;"><span><u><figcaption></u></span></span></td> <td style="margin:0px;padding:7px 5px;min-width:40px;height:30px;vertical-align:top;">定义 <figure> 元素的<span style="color:#660000;"><strong>标题</strong></span></td> </tr> <tr style="margin:0px;padding:0px;background-color:rgb(239,239,239);"> <td style="margin:0px;padding:7px 5px;min-width:40px;height:30px;vertical-align:top;"><span style="color:#900b09;"><span><u><footer></u></span></span></td> <td style="margin:0px;padding:7px 5px;min-width:40px;height:30px;vertical-align:top;">定义 section 或 document 的 页脚。</td> </tr> <tr style="margin:0px;padding:0px;background-color:rgb(255,255,255);"> <td style="margin:0px;padding:7px 5px;min-width:40px;height:30px;vertical-align:top;"><span style="color:#900b09;"><span><u><header></u></span></span></td> <td style="margin:0px;padding:7px 5px;min-width:40px;height:30px;vertical-align:top;">定义了文档的 头部 区域</td> </tr> <tr style="margin:0px;padding:0px;background-color:rgb(239,239,239);"> <td style="margin:0px;padding:7px 5px;min-width:40px;height:30px;vertical-align:top;"><span style="color:#900b09;"><span><u><mark></u></span></span></td> <td style="margin:0px;padding:7px 5px;min-width:40px;height:30px;vertical-align:top;">定义带有<span style="color:#ff0000;"><strong>记号</strong></span>的文本。</td> </tr> <tr style="margin:0px;padding:0px;background-color:rgb(255,255,255);"> <td style="margin:0px;padding:7px 5px;min-width:40px;height:30px;vertical-align:top;"><span style="color:#900b09;"><span><u><meter></u></span></span></td> <td style="margin:0px;padding:7px 5px;min-width:40px;height:30px;vertical-align:top;">定义 <span style="color:#ff0000;"><strong>度量衡</strong></span>。仅用于已知<span style="color:#ff0000;"><strong> 最大和最小值 </strong></span>的度量。</td> </tr> <tr style="margin:0px;padding:0px;background-color:rgb(239,239,239);"> <td style="margin:0px;padding:7px 5px;min-width:40px;height:30px;vertical-align:top;"><span style="color:#900b09;"><span><u><nav></u></span></span></td> <td style="margin:0px;padding:7px 5px;min-width:40px;height:30px;vertical-align:top;">定义运行中的<span style="color:#ff0000;"><strong>进度</strong></span>（<span style="color:#ff0000;"><strong>进程</strong></span>）。</td> </tr> <tr style="margin:0px;padding:0px;background-color:rgb(255,255,255);"> <td style="margin:0px;padding:7px 5px;min-width:40px;height:30px;vertical-align:top;"><span style="color:#900b09;"><span><u><progress></u></span></span></td> <td style="margin:0px;padding:7px 5px;min-width:40px;height:30px;vertical-align:top;">定义任何类型的任务的<span style="color:#006600;"><strong>进度</strong></span>。</td> </tr> <tr style="margin:0px;padding:0px;background-color:rgb(239,239,239);"> <td style="margin:0px;padding:7px 5px;min-width:40px;height:30px;vertical-align:top;"><span style="color:#900b09;"><span><u><ruby></u></span></span></td> <td style="margin:0px;padding:7px 5px;min-width:40px;height:30px;vertical-align:top;">定义 ruby 注释（中文注音或字符）。</td> </tr> <tr style="margin:0px;padding:0px;background-color:rgb(255,255,255);"> <td style="margin:0px;padding:7px 5px;min-width:40px;height:30px;vertical-align:top;"><span style="color:#900b09;"><span><u><rt></u></span></span></td> <td style="margin:0px;padding:7px 5px;min-width:40px;height:30px;vertical-align:top;">定义字符（中文注音或字符）的 <span style="color:#ff0000;"><strong>解释或发音</strong></span>。</td> </tr> <tr style="margin:0px;padding:0px;background-color:rgb(239,239,239);"> <td style="margin:0px;padding:7px 5px;min-width:40px;height:30px;vertical-align:top;"><span style="color:#900b09;"><span><u><rp></u></span></span></td> <td style="margin:0px;padding:7px 5px;min-width:40px;height:30px;vertical-align:top;">在 ruby 注释中使用，<br>定义不支持 ruby 元素的浏览器所显示的内容。</td> </tr> <tr style="margin:0px;padding:0px;background-color:rgb(255,255,255);"> <td style="margin:0px;padding:7px 5px;min-width:40px;height:30px;vertical-align:top;"><span style="color:#900b09;"><span><u><section></u></span></span></td> <td style="margin:0px;padding:7px 5px;min-width:40px;height:30px;vertical-align:top;">定义文档中的 <span style="color:#ff0000;"><strong>节</strong></span>（section、区段）。</td> </tr> <tr style="margin:0px;padding:0px;background-color:rgb(239,239,239);"> <td style="margin:0px;padding:7px 5px;min-width:40px;height:30px;vertical-align:top;"><span style="color:#900b09;"><span><u><time></u></span></span></td> <td style="margin:0px;padding:7px 5px;min-width:40px;height:30px;vertical-align:top;">定义日期或时间。</td> </tr> <tr style="margin:0px;padding:0px;background-color:rgb(255,255,255);"> <td style="margin:0px;padding:7px 5px;min-width:40px;height:30px;vertical-align:top;"><span style="color:#900b09;"><span><u><wbr></u></span></span></td> <td style="margin:0px;padding:7px 5px;min-width:40px;height:30px;vertical-align:top;">规定在文本中的何处适合添加 <span style="color:#ff0000;"><strong>换行符</strong></span>。</td> </tr> </tbody> </table> <br style="margin:0px;padding:0px;"> <hr style="color:rgb(0,0,0);margin-top:15px;margin-bottom:15px;padding:0px;height:0px;border-width:1px 0px 0px;border-top-style:solid;border-top-color:rgb(170,170,170);"> <h2 style="color:rgb(0,0,0);margin-top:20px;margin-bottom:10px;padding:0px;line-height:1.7;font-size:16px;">已移除的元素</h2> <p style="margin-bottom:5px;line-height:1.7;"><span style="color:rgb(0,0,0);">以下的</span><span style="color:#ff0000;"><strong>12个</strong></span><span style="color:#000000;"> HTML 4.01 元素在HTML5中已经被删除:</span></p> <ul style="color:rgb(0,0,0);margin-top:10px;margin-bottom:10px;padding-left:30px;list-style-position:outside;list-style-image:none;line-height:1.7;"> <li style="margin-top:0px;margin-left:0px;padding:0px;"><acronym></li> <li style="margin-top:0px;margin-left:0px;padding:0px;"><applet></li> <li style="margin-top:0px;margin-left:0px;padding:0px;"><basefont></li> <li style="margin-top:0px;margin-left:0px;padding:0px;"><big></li> <li style="margin-top:0px;margin-left:0px;padding:0px;"><center></li> <li style="margin-top:0px;margin-left:0px;padding:0px;"><dir></li> <li style="margin-top:0px;margin-left:0px;padding:0px;"><font></li> <li style="margin-top:0px;margin-left:0px;padding:0px;"><frame></li> <li style="margin-top:0px;margin-left:0px;padding:0px;"><frameset></li> <li style="margin-top:0px;margin-left:0px;padding:0px;"><noframes></li> <li style="margin-top:0px;margin-left:0px;padding:0px;"><strike></li> <li style="margin-top:0px;margin-left:0px;padding:0px;"><tt></li> </ul> </div> </div> <p><br></p> <p></p> <div class="content-bg" style="margin:0px;padding:0px;width:auto;max-width:980px;font-family:Verdana, Arial, Helvetica, sans-serif;font-size:14px;background-color:rgb(255,255,255);"> <div class="content-intro view-box" style="margin-right:0px;margin-bottom:0px;margin-left:0px;padding:15px 0px 20px;line-height:1.7;min-height:600px;margin-top:0px;"> <h2 style="color:rgb(0,0,0);margin-top:0px;margin-bottom:10px;padding:.25em 0px 0px;line-height:1.7;font-size:16px;border-top:none;">HTML5 <span class="color_h1" style="margin:0px;padding:0px;">Canvas</span></h2> <div style="color:rgb(0,0,0);margin:0px;padding:0px;"> <span class="color_h1" style="margin:0px;padding:0px;"><canvas>元素是HTML5中的新元素，</span> </div> <div style="margin:0px;padding:0px;"> <span class="color_h1" style="margin:0px;padding:0px;"><span style="color:#000000;">通过使用该元素，你可以在网页中</span><span style="color:#ff0000;"><strong>绘制</strong></span><span style="color:#000000;">所需的图形。</span></span> </div> <hr style="color:rgb(0,0,0);margin-top:15px;margin-bottom:15px;padding:0px;height:0px;border-width:1px 0px 0px;border-top-style:solid;border-top-color:rgb(170,170,170);"> <p class="intro" style="color:rgb(0,0,0);margin-bottom:5px;line-height:1.7;">标签定义图形，比如图表和其他图像，</p> <p class="intro" style="color:rgb(0,0,0);margin-bottom:5px;line-height:1.7;">您必须使用脚本来绘制图形。</p> <p class="intro" style="color:rgb(0,0,0);margin-bottom:5px;line-height:1.7;">例如:</p> <p class="intro" style="color:rgb(0,0,0);margin-bottom:5px;line-height:1.7;">在画布上（Canvas）画一个红色矩形，渐变矩形，彩色矩形，和一些彩色的文字。 <a href="http://img.e-com-net.com/image/info8/45d8fc0c4237449b83abe4186130a528.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/45d8fc0c4237449b83abe4186130a528.png" alt="HTML5_01_画布_第8张图片" style="padding:0px;border:0px;;border:1px solid black;" width="284" height="172"></a></p> <hr style="color:rgb(0,0,0);margin-top:15px;margin-bottom:15px;padding:0px;height:0px;border-width:1px 0px 0px;border-top-style:solid;border-top-color:rgb(170,170,170);"> <h2 style="color:rgb(0,0,0);margin-top:20px;margin-bottom:10px;padding:0px;line-height:1.7;font-size:16px;">什么是 Canvas?</h2> <p style="color:rgb(0,0,0);margin-bottom:5px;line-height:1.7;">HTML5 元素用于图形的绘制，是通过脚本 (通常是<span style="color:#900b09;"><span><u>JavaScript</u></span></span>)来完成.</p> <p style="margin-bottom:5px;line-height:1.7;"><span style="color:rgb(0,0,0);">标签只是一个 </span><span style="color:#ff0000;"><strong>图形的容器</strong></span><span style="color:#000000;">，您必须使用</span><span style="color:#ff0000;"><strong>脚本</strong></span><span style="color:#000000;">来绘制图形。</span></p> <p style="color:rgb(0,0,0);margin-bottom:5px;line-height:1.7;">你可以通过多种方法使用Canva绘制 路径<span style="color:rgb(0,0,0);font-family:Verdana, Arial, Helvetica, sans-serif;background-color:rgb(255,255,255);">、</span>盒、圆、字符以及添加图像。</p> <hr style="color:rgb(0,0,0);margin-top:15px;margin-bottom:15px;padding:0px;height:0px;border-width:1px 0px 0px;border-top-style:solid;border-top-color:rgb(170,170,170);"> <h2 style="color:rgb(0,0,0);margin-top:20px;margin-bottom:10px;padding:0px;line-height:1.7;font-size:16px;">浏览器支持</h2> <p style="color:rgb(0,0,0);margin-bottom:5px;line-height:1.7;">IE 9+, Firefox, Opera, Chrome, 和 Safari 支持 元素.</p> <p style="margin-bottom:5px;line-height:1.7;"><span style="color:rgb(0,0,0);"><span style="margin:0px;padding:0px;">注意:</span> IE 8 及更早 IE 版本的浏览器</span><span style="color:#ff0000;"><strong>不支持</strong></span><span style="color:#000000;"> <canvas> 元素.</span></p> <hr style="color:rgb(0,0,0);margin-top:15px;margin-bottom:15px;padding:0px;height:0px;border-width:1px 0px 0px;border-top-style:solid;border-top-color:rgb(170,170,170);"> <h2 style="color:rgb(0,0,0);margin-top:20px;margin-bottom:10px;padding:0px;line-height:1.7;font-size:16px;">创建一个画布（Canvas）</h2> <p style="color:rgb(0,0,0);margin-bottom:5px;line-height:1.7;">一个画布在网页中是一个矩形框，通过 <canvas> 元素来绘制.</p> <p style="margin-bottom:5px;line-height:1.7;"><span style="color:rgb(0,0,0);">注意: 默认情况下 <canvas> 元素</span><span style="color:#ff0000;"><strong>没有边框和内容</strong></span><span style="color:#000000;">。</span></p> <p style="color:rgb(0,0,0);margin-bottom:5px;line-height:1.7;"><canvas>简单实例如下:</p> <div class="code notranslate" style="color:rgb(0,0,0);margin:15px 0px;padding:10px 5px;width:auto;max-width:700px;line-height:1.7;background:rgb(239,239,239);font-family:Consolas, 'Courier New', Courier, monospace;border:1px solid rgb(221,221,221);white-space:pre-wrap;"> <div style="margin:0px;padding:0px;"> <canvas id="beyondCanvas" width="200" height="100"></canvas> </div> </div> <p style="color:rgb(0,0,0);margin-bottom:5px;line-height:1.7;"><span style="margin:0px;padding:0px;line-height:1.7;white-space:pre-wrap;">注意:</span><span style="margin:0px;padding:0px;line-height:1.7;white-space:pre-wrap;"> </span></p> <p style="color:rgb(0,0,0);margin-bottom:5px;line-height:1.7;"><span style="margin:0px;padding:0px;line-height:1.7;white-space:pre-wrap;">标签通常需要指定一个id属性 (脚本中经常引用), </span></p> <p style="color:rgb(0,0,0);margin-bottom:5px;line-height:1.7;"><span style="margin:0px;padding:0px;line-height:1.7;white-space:pre-wrap;">width 和 height 属性定义的画布的大小。</span></p> <p style="color:rgb(0,0,0);margin-bottom:5px;line-height:1.7;"><span style="margin:0px;padding:0px;line-height:1.7;white-space:pre-wrap;"><br></span></p> <p style="color:rgb(0,0,0);margin-bottom:5px;line-height:1.7;"><span style="margin:0px;padding:0px;">提示:</span></p> <p style="color:rgb(0,0,0);margin-bottom:5px;line-height:1.7;"> 你可以在HTML页面中使用多个 <canvas> 元素.</p> <p style="color:rgb(0,0,0);margin-bottom:5px;line-height:1.7;">使用 style 属性来添加边框:</p> <p style="color:rgb(0,0,0);margin-bottom:5px;line-height:1.7;">代码如下:</p> <pre><code class="language-html"><!DOCTPYE html> <html> <head> <link rel="icon" href="beyond.jpg" type="image/x-icon"/> <meta charset="UTF-8"> <meta name="author" content="beyond"> <meta http-equiv="refresh" content="520"> <meta name="description" content="免费零基础教程"> <meta name="keywords" content="HTML,CSS,JAVASCRIPT"> <title>beyondの心中の动漫神作</title> <link rel="stylesheet" type="text/css" href="beyondbasestylewhite.css"> <!--[if lt IE 9]> <script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script> <![endif]--> </head> <body> <div style="text-align:center;"> <canvas id="beyondCanvas" width="200" height="100" style="border:10px dotted #000;background:#eee;"> 您的浏览器不支持HTML Canvas标签 </canvas> </div> <p style="font-size:14px;text-align:center">Copyright © <a>2018</a> Powered by <a>beyond</a></p> </body> </html></code></pre> <br> <p style="color:rgb(0,0,0);margin-bottom:5px;line-height:1.7;">效果如下:</p> <p style="color:rgb(0,0,0);margin-bottom:5px;line-height:1.7;"><a href="http://img.e-com-net.com/image/info8/18201dcf22d34e7ba1797bb902b891c2.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/18201dcf22d34e7ba1797bb902b891c2.jpg" alt="HTML5_01_画布_第9张图片" width="650" height="404" style="border:1px solid black;"></a><br></p> <p style="color:rgb(0,0,0);margin-bottom:5px;line-height:1.7;"><br style="margin:0px;padding:0px;"></p> <hr style="color:rgb(0,0,0);margin-top:15px;margin-bottom:15px;padding:0px;height:0px;border-width:1px 0px 0px;border-top-style:solid;border-top-color:rgb(170,170,170);"> <h2 style="color:rgb(0,0,0);margin-top:20px;margin-bottom:10px;padding:0px;line-height:1.7;font-size:16px;">使用 JavaScript 来绘制图像</h2> <p style="color:rgb(0,0,0);margin-bottom:5px;line-height:1.7;">canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成:</p> <p style="color:rgb(0,0,0);margin-bottom:5px;line-height:1.7;">代码如下:</p> <pre><code class="language-html"><!DOCTPYE html> <html> <head> <link rel="icon" href="beyond.jpg" type="image/x-icon"/> <meta charset="UTF-8"> <meta name="author" content="beyond"> <meta http-equiv="refresh" content="520"> <meta name="description" content="免费零基础教程"> <meta name="keywords" content="HTML,CSS,JAVASCRIPT"> <title>beyondの心中の动漫神作</title> <link rel="stylesheet" type="text/css" href="beyondbasestylewhite.css"> <!--[if lt IE 9]> <script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script> <![endif]--> </head> <body> <div style="text-align:center;"> <canvas id="beyondCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> 您的浏览器不支持HTML5的Canvas </canvas> </div> <script type="text/javascript"> var canvas = document.getElementById("beyondCanvas"); // 取得上下文 var context = canvas.getContext("2d"); // 设置填充颜色 context.fillStyle="#ddd" // 填充一个矩形 context.fillRect(10,10,180,80); </script> <p style="font-size:14px;text-align:center">Copyright © <a>2018</a> Powered by <a>beyond</a></p> </body> </html></code></pre> <br> <p style="color:rgb(0,0,0);margin-bottom:5px;line-height:1.7;">效果如下:</p> <p style="color:rgb(0,0,0);margin-bottom:5px;line-height:1.7;"><a href="http://img.e-com-net.com/image/info8/66afce1989c140daaa09007fa4fb26fb.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/66afce1989c140daaa09007fa4fb26fb.jpg" alt="HTML5_01_画布_第10张图片" width="650" height="380" style="border:1px solid black;"></a><br></p> <p style="color:rgb(0,0,0);margin-bottom:5px;line-height:1.7;"><br></p> <p style="color:rgb(0,0,0);margin-bottom:5px;line-height:1.7;"><span style="margin:0px;padding:0px;">实例解析:</span></p> <p style="color:rgb(0,0,0);margin-bottom:5px;line-height:1.7;">首先，找到 <canvas> 元素:<span style="margin:0px;padding:0px;background-color:rgb(239,239,239);font-family:Consolas, 'Courier New', Courier, monospace;white-space:pre-wrap;"></span></p> <div class="code notranslate" style="color:rgb(0,0,0);margin:15px 0px;padding:10px 5px;width:auto;max-width:700px;line-height:1.7;background:rgb(239,239,239);font-family:Consolas, 'Courier New', Courier, monospace;border:1px solid rgb(221,221,221);white-space:pre-wrap;"> <div style="margin:0px;padding:0px;"> var c=document.getElementById("beyondCanvas"); </div> </div> <p style="color:rgb(0,0,0);margin-bottom:5px;line-height:1.7;">然后，创建 context 对象：<span style="margin:0px;padding:0px;background-color:rgb(239,239,239);font-family:Consolas, 'Courier New', Courier, monospace;white-space:pre-wrap;"></span></p> <div class="code notranslate" style="color:rgb(0,0,0);margin:15px 0px;padding:10px 5px;width:auto;max-width:700px;line-height:1.7;background:rgb(239,239,239);font-family:Consolas, 'Courier New', Courier, monospace;border:1px solid rgb(221,221,221);white-space:pre-wrap;"> <div style="margin:0px;padding:0px;"> var context=c.getContext("2d"); </div> </div> <p style="color:rgb(0,0,0);margin-bottom:5px;line-height:1.7;">getContext("2d") 对象是内建的 HTML5 对象，</p> <p style="color:rgb(0,0,0);margin-bottom:5px;line-height:1.7;">拥有多种 绘制路径、矩形、圆形、字符以及添加图像的方法。</p> <p style="color:rgb(0,0,0);margin-bottom:5px;line-height:1.7;"><br></p> <p style="color:rgb(0,0,0);margin-bottom:5px;line-height:1.7;">下面的两行代码绘制一个红色的矩形：<span style="margin:0px;padding:0px;background-color:rgb(239,239,239);font-family:Consolas, 'Courier New', Courier, monospace;white-space:pre-wrap;"></span></p> <div class="code notranslate" style="color:rgb(0,0,0);margin:15px 0px;padding:10px 5px;width:auto;max-width:700px;line-height:1.7;background:rgb(239,239,239);font-family:Consolas, 'Courier New', Courier, monospace;border:1px solid rgb(221,221,221);white-space:pre-wrap;"> <div style="margin:0px;padding:0px;"> context.fillStyle="#ddd"; <br style="margin:0px;padding:0px;">context.fillRect(10,10,180,80); </div> </div> <p style="margin-bottom:5px;line-height:1.7;"><span style="color:rgb(0,0,0);">设置<span style="color:#900b09;"><span><u>fillStyle属性</u></span></span>可以是:</span><span style="color:#ff0000;"><strong>CSS颜色，渐变，或图案</strong></span><span style="color:#000000;">。</span></p> <p style="margin-bottom:5px;line-height:1.7;"><span style="color:rgb(0,0,0);">fillStyle默认设置是<strong>#</strong></span><span style="color:#000000;"><strong>000000</strong>（黑色）。</span></p> <p style="margin-bottom:5px;line-height:1.7;"><span style="color:#000000;">fillRect(</span><span style="margin:0px;padding:0px;"><span style="color:#ff0000;"><strong>x,y,width,height</strong></span></span><span style="color:#000000;">) 方法定义了矩形当前的填充方式。</span></p> <hr style="color:rgb(0,0,0);margin-top:15px;margin-bottom:15px;padding:0px;height:0px;border-width:1px 0px 0px;border-top-style:solid;border-top-color:rgb(170,170,170);"> <h2 style="color:rgb(0,0,0);margin-top:20px;margin-bottom:10px;padding:0px;line-height:1.7;font-size:16px;">Canvas 坐标</h2> <p style="color:rgb(0,0,0);margin-bottom:5px;line-height:1.7;">canvas 是一个二维网格。</p> <p style="margin-bottom:5px;line-height:1.7;"><span style="color:rgb(0,0,0);">canvas 的</span><span style="color:#ff0000;"><strong>左上角</strong></span><span style="color:#000000;">坐标为 (0,0)</span></p> <p style="color:rgb(0,0,0);margin-bottom:5px;line-height:1.7;">上面的 fillRect 方法拥有参数 (10,10,180,80)。</p> <p style="color:rgb(0,0,0);margin-bottom:5px;line-height:1.7;">意思是：在画布上绘制 180x80 的矩形，从左上角开始 (10,10)。</p> <p style="color:rgb(0,0,0);margin-bottom:5px;line-height:1.7;"><span style="margin:0px;padding:0px;">坐标实例</span></p> <p style="color:rgb(0,0,0);margin-bottom:5px;line-height:1.7;">如下图所示，画布的 X 和 Y 坐标用于在画布上对绘画进行定位。</p> <p style="color:rgb(0,0,0);margin-bottom:5px;line-height:1.7;"></p> <div style="color:rgb(0,0,0);margin:0px;padding:0px;"> <div style="margin:0px;padding:0px;width:402px;float:left;"></div> </div> <hr style="color:rgb(0,0,0);margin-top:15px;margin-bottom:15px;padding:0px;height:0px;border-width:1px 0px 0px;border-top-style:solid;border-top-color:rgb(170,170,170);"> <h2 style="color:rgb(0,0,0);margin-top:20px;margin-bottom:10px;padding:0px;line-height:1.7;font-size:16px;">Canvas - 路径</h2> <p style="color:rgb(0,0,0);margin-bottom:5px;line-height:1.7;">在Canvas上画线，我们将使用以下两种方法：</p> <ul class="list-paddingleft-2" style="margin-top:10px;margin-bottom:10px;padding-left:30px;list-style-position:outside;list-style-image:none;line-height:1.7;"> <li style="margin-top:0px;margin-left:0px;padding:0px;"><p style="margin-bottom:5px;line-height:1.7;"><span style="color:rgb(0,0,0);">moveTo(<span style="margin:0px;padding:0px;">x,y</span>) 定义线条</span><span style="color:#ff0000;"><strong>开始坐标</strong></span></p></li> <li style="margin-top:0px;margin-left:0px;padding:0px;"><p style="margin-bottom:5px;line-height:1.7;"><span style="color:rgb(0,0,0);">lineTo(<span style="margin:0px;padding:0px;">x,y</span>) 定义线条</span><span style="color:#ff0000;"><strong>结束坐标</strong></span></p></li> </ul> <p style="margin-bottom:5px;line-height:1.7;"><span style="color:rgb(0,0,0);">绘制线条我们必须使用到 "</span><span style="color:#cc0000;"><strong>ink</strong></span><span style="color:#000000;">" 的方法???Excuse Me???  就<span style="color:#000000;font-family:Verdana, Arial, Helvetica, sans-serif;background-color:rgb(255,255,255);">像</span><span style="color:#ff0000;font-family:Verdana, Arial, Helvetica, sans-serif;background-color:rgb(255,255,255);"><strong>stroke()</strong></span></span></p> <p style="margin-bottom:5px;line-height:1.7;"><span style="color:#000000;">代码如下:</span></p> <pre><code class="language-html"><!DOCTPYE html> <html> <head> <link rel="icon" href="beyond.jpg" type="image/x-icon"/> <meta charset="UTF-8"> <meta name="author" content="beyond"> <meta http-equiv="refresh" content="520"> <meta name="description" content="免费零基础教程"> <meta name="keywords" content="HTML,CSS,JAVASCRIPT"> <title>beyondの心中の动漫神作</title> <link rel="stylesheet" type="text/css" href="beyondbasestylewhite.css"> <!--[if lt IE 9]> <script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script> <![endif]--> </head> <body> <div style="text-align:center;"> <canvas id="beyondCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> 您的浏览器不支持HTML5的Canvas </canvas> </div> <script type="text/javascript"> var canvas = document.getElementById("beyondCanvas"); // 取得上下文 var context = canvas.getContext("2d"); // 线条起点 context.moveTo(10,10); // 线条终点 context.lineTo(190,90); // 闭合线条 context.stroke(); </script> <p style="font-size:14px;text-align:center">Copyright © <a>2018</a> Powered by <a>beyond</a></p> </body> </html></code></pre> <br> <p style="margin-bottom:5px;line-height:1.7;"><span style="color:#000000;">效果如下:</span></p> <p style="margin-bottom:5px;line-height:1.7;"><span style="color:#000000;"><a href="http://img.e-com-net.com/image/info8/efd049db22ab4de19e1882bfacd5c43f.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/efd049db22ab4de19e1882bfacd5c43f.jpg" alt="HTML5_01_画布_第11张图片" width="650" height="379" style="border:1px solid black;"></a><br></span></p> <p style="margin-bottom:5px;line-height:1.7;"><span style="color:#000000;"><br></span></p> <p style="margin-bottom:5px;line-height:1.7;"><span style="color:#000000;"><br></span></p> <p style="margin-bottom:5px;line-height:1.7;"><br></p> <p style="margin-bottom:5px;line-height:1.7;"><span style="color:rgb(0,0,0);">在canvas中绘制</span><span style="color:#ff0000;"><strong>圆形</strong></span><span style="color:#000000;">, 我们将使用以下方法:</span></p> <ul class="list-paddingleft-2" style="color:rgb(0,0,0);margin-top:10px;margin-bottom:10px;padding-left:30px;list-style-position:outside;list-style-image:none;line-height:1.7;"> <li style="margin-top:0px;margin-left:0px;padding:0px;"><p style="margin-bottom:5px;color:rgb(0,0,0);line-height:1.7;">arc(x,y,r,start,stop)</p></li> </ul> <p style="color:rgb(0,0,0);margin-bottom:5px;line-height:1.7;">实际上我们在绘制圆形时使用了 "ink" 的方法, 比如 stroke() 或者 fill(). </p> <p style="color:rgb(0,0,0);margin-bottom:5px;line-height:1.7;">代码如下:</p> <pre><code class="language-html"><!DOCTPYE html> <html> <head> <link rel="icon" href="beyond.jpg" type="image/x-icon"/> <meta charset="UTF-8"> <meta name="author" content="beyond"> <meta http-equiv="refresh" content="520"> <meta name="description" content="免费零基础教程"> <meta name="keywords" content="HTML,CSS,JAVASCRIPT"> <title>beyondの心中の动漫神作</title> <link rel="stylesheet" type="text/css" href="beyondbasestylewhite.css"> <!--[if lt IE 9]> <script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script> <![endif]--> </head> <body> <div style="text-align:center;"> <canvas id="beyondCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> 您的浏览器不支持HTML5的Canvas </canvas> </div> <script type="text/javascript"> var canvas = document.getElementById("beyondCanvas"); // 取得上下文 var context = canvas.getContext("2d"); // 开始路径 context.beginPath(); // arc(x,y,r,start,stop) context.arc(100,50,40,0,2*Math.PI); // 闭合线条 context.stroke(); </script> <p style="font-size:14px;text-align:center">Copyright © <a>2018</a> Powered by <a>beyond</a></p> </body> </html></code></pre> <br> <p style="color:rgb(0,0,0);margin-bottom:5px;line-height:1.7;">效果如下:</p> <p style="color:rgb(0,0,0);margin-bottom:5px;line-height:1.7;"><a href="http://img.e-com-net.com/image/info8/60ce92a3e9e847aba6f07996df07197f.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/60ce92a3e9e847aba6f07996df07197f.jpg" alt="HTML5_01_画布_第12张图片" width="650" height="379" style="border:1px solid black;"></a><br></p> <p style="color:rgb(0,0,0);margin-bottom:5px;line-height:1.7;"><br style="margin:0px;padding:0px;"></p> <hr style="color:rgb(0,0,0);margin-top:15px;margin-bottom:15px;padding:0px;height:0px;border-width:1px 0px 0px;border-top-style:solid;border-top-color:rgb(170,170,170);"> <h2 style="color:rgb(0,0,0);margin-top:20px;margin-bottom:10px;padding:0px;line-height:1.7;font-size:16px;">Canvas - 文本</h2> <p style="color:rgb(0,0,0);margin-bottom:5px;line-height:1.7;">使用 canvas 绘制文本，重要的属性和方法如下：</p> <ul class="list-paddingleft-2" style="margin-top:10px;margin-bottom:10px;padding-left:30px;list-style-position:outside;list-style-image:none;line-height:1.7;"> <li style="margin-top:0px;margin-left:0px;padding:0px;"><p style="margin-bottom:5px;line-height:1.7;"><span style="color:#ff0000;"><strong>font</strong></span><span style="color:rgb(0,0,0);"> - 定义字体</span></p></li> <li style="margin-top:0px;margin-left:0px;padding:0px;"><p style="margin-bottom:5px;line-height:1.7;"><span style="color:rgb(0,0,0);">fillText(<span style="margin:0px;padding:0px;">text,x,y</span>) - 在 canvas 上绘制</span><span style="color:#ff0000;"><strong>实心的文本</strong></span></p></li> <li style="margin-top:0px;margin-left:0px;padding:0px;"><p style="margin-bottom:5px;line-height:1.7;"><span style="color:rgb(0,0,0);">strokeText(<span style="margin:0px;padding:0px;">text,x,y</span>) - 在 canvas 上绘制</span><span style="color:#ff0000;"><strong>空心的文本</strong></span></p></li> </ul> <p style="color:rgb(0,0,0);margin-bottom:5px;line-height:1.7;">使用 fillText():使用 "Arial" 字体在画布上绘制一个高 30px 的文字（实心）</p> <p style="color:rgb(0,0,0);margin-bottom:5px;line-height:1.7;">注意: 起点位置x,y,对于文本,基准线y在文字的下方<br></p> <p style="color:rgb(0,0,0);margin-bottom:5px;line-height:1.7;">代码如下:</p> <pre><code class="language-html"><!DOCTPYE html> <html> <head> <link rel="icon" href="beyond.jpg" type="image/x-icon"/> <meta charset="UTF-8"> <meta name="author" content="beyond"> <meta http-equiv="refresh" content="520"> <meta name="description" content="免费零基础教程"> <meta name="keywords" content="HTML,CSS,JAVASCRIPT"> <title>beyondの心中の动漫神作</title> <link rel="stylesheet" type="text/css" href="beyondbasestylewhite.css"> <!--[if lt IE 9]> <script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script> <![endif]--> </head> <body> <div style="text-align:center;"> <canvas id="beyondCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> 您的浏览器不支持HTML5的Canvas </canvas> </div> <script type="text/javascript"> var canvas = document.getElementById("beyondCanvas"); // 取得上下文 var context = canvas.getContext("2d"); // 实心文本 context.font = "30px Arial"; // 起点位置x,y,对于文本,基准线y在文字的下方 context.fillText("Hello Beyond",12,60); </script> <p style="font-size:14px;text-align:center">Copyright © <a>2018</a> Powered by <a>beyond</a></p> </body> </html></code></pre> <br> <p style="color:rgb(0,0,0);margin-bottom:5px;line-height:1.7;">效果如下:</p> <p style="color:rgb(0,0,0);margin-bottom:5px;line-height:1.7;"><a href="http://img.e-com-net.com/image/info8/115fa024f328473cb9caf0d2547123d8.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/115fa024f328473cb9caf0d2547123d8.jpg" alt="HTML5_01_画布_第13张图片" width="650" height="379" style="border:1px solid black;"></a><br></p> <p style="color:rgb(0,0,0);margin-bottom:5px;line-height:1.7;"><br></p> <p style="color:rgb(0,0,0);margin-bottom:5px;line-height:1.7;">使用 strokeText(),使用 "Arial" 字体在画布上绘制一个高 30px 的文字（空心）：</p> <p style="color:rgb(0,0,0);margin-bottom:5px;line-height:1.7;">注意:</p> <p style="color:rgb(0,0,0);margin-bottom:5px;line-height:1.7;"><span style="color:rgb(0,0,0);font-family:Verdana, Arial, Helvetica, sans-serif;background-color:rgb(255,255,255);">注意: 起点位置x,y,对于文本,基准线y在文字的下方</span><br></p> <p style="color:rgb(0,0,0);margin-bottom:5px;line-height:1.7;">代码如下:</p> <pre><code class="language-html"><div style="text-align:center;"> <canvas id="beyondCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> 您的浏览器不支持HTML5的Canvas </canvas> </div> <script type="text/javascript"> var canvas = document.getElementById("beyondCanvas"); // 取得上下文 var context = canvas.getContext("2d"); // 空心文本 context.font = "30px Arial"; // 起点位置x,y,对于文本,基准线y在文字的下方 context.strokeText("Hello Beyond",12,60); </script></code></pre> <br> <p style="color:rgb(0,0,0);margin-bottom:5px;line-height:1.7;">效果如下:</p> <p style="color:rgb(0,0,0);margin-bottom:5px;line-height:1.7;"><a href="http://img.e-com-net.com/image/info8/20c385887a124af7a3aea0b54298dafe.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/20c385887a124af7a3aea0b54298dafe.jpg" alt="HTML5_01_画布_第14张图片" width="650" height="375" style="border:1px solid black;"></a><br></p> <p style="color:rgb(0,0,0);margin-bottom:5px;line-height:1.7;"><br></p> <p style="color:rgb(0,0,0);margin-bottom:5px;line-height:1.7;"><br style="margin:0px;padding:0px;"></p> <hr style="color:rgb(0,0,0);margin-top:15px;margin-bottom:15px;padding:0px;height:0px;border-width:1px 0px 0px;border-top-style:solid;border-top-color:rgb(170,170,170);"> <h2 style="color:rgb(0,0,0);margin-top:20px;margin-bottom:10px;padding:0px;line-height:1.7;font-size:16px;">Canvas -  渐变</h2> <p style="margin-bottom:5px;line-height:1.7;"><span style="color:rgb(0,0,0);">渐变 可以填充在</span><span style="color:#ff0000;"><strong>矩形, 圆形, 线条, 文本</strong></span><span style="color:#000000;">等等,</span></p> <p style="margin-bottom:5px;line-height:1.7;"><span style="color:#000000;"> 各种形状可以自己定义不同的颜色。</span></p> <p style="color:rgb(0,0,0);margin-bottom:5px;line-height:1.7;">以下有两种不同的方式来设置Canvas渐变：</p> <ul class="list-paddingleft-2" style="margin-top:10px;margin-bottom:10px;padding-left:30px;list-style-position:outside;list-style-image:none;line-height:1.7;"> <li style="margin-top:0px;margin-left:0px;padding:0px;"><p style="margin-bottom:5px;line-height:1.7;"><span style="color:rgb(0,0,0);">createLinearGradient(<span style="margin:0px;padding:0px;">x,y,x1,y1</span>) - 创建</span><span style="color:#ff0000;"><strong>线性渐变</strong></span></p></li> <li style="margin-top:0px;margin-left:0px;padding:0px;"><p style="margin-bottom:5px;line-height:1.7;"><span style="color:rgb(0,0,0);">createRadialGradient(<span style="margin:0px;padding:0px;">x,y,r,x1,y1,r1</span>) - 创建一个</span><span style="color:#ff0000;"><strong>径向/圆渐变</strong></span></p></li> </ul> <p style="color:rgb(0,0,0);margin-bottom:5px;line-height:1.7;"><br></p> <p style="margin-bottom:5px;line-height:1.7;"><span style="color:rgb(0,0,0);">当我们使用渐变对象，必须使用两种或两种以上的 </span><span style="color:#ff0000;"><strong>停止颜色</strong></span><span style="color:#000000;">。</span></p> <p style="margin-bottom:5px;line-height:1.7;"><span style="color:rgb(0,0,0);">addColorStop()方法</span><span style="color:#ff0000;"><strong>指定颜色停止</strong></span><span style="color:#000000;">，参数使用坐标来描述，可以是0至1.???Excuse Me???</span></p> <p style="color:rgb(0,0,0);margin-bottom:5px;line-height:1.7;">使用渐变的步骤:</p> <p style="color:rgb(0,0,0);margin-bottom:5px;line-height:1.7;">1.设置fillStyle或strokeStyle的值为渐变，</p> <p style="color:rgb(0,0,0);margin-bottom:5px;line-height:1.7;">2.然后绘制形状，如矩形，文本，或一条线。</p> <p style="color:rgb(0,0,0);margin-bottom:5px;line-height:1.7;">使用 createLinearGradient()创建一个线性渐变。使用渐变填充矩形：:</p> <p style="color:rgb(0,0,0);margin-bottom:5px;line-height:1.7;">代码如下:</p> <pre><code class="language-html"><!DOCTPYE html> <html> <head> <link rel="icon" href="beyond.jpg" type="image/x-icon"/> <meta charset="UTF-8"> <meta name="author" content="beyond"> <meta http-equiv="refresh" content="520"> <meta name="description" content="免费零基础教程"> <meta name="keywords" content="HTML,CSS,JAVASCRIPT"> <title>beyondの心中の动漫神作</title> <link rel="stylesheet" type="text/css" href="beyondbasestylewhite.css"> <!--[if lt IE 9]> <script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script> <![endif]--> </head> <body> <div style="text-align:center;"> <canvas id="beyondCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> 您的浏览器不支持HTML5的Canvas </canvas> </div> <script type="text/javascript"> var canvas = document.getElementById("beyondCanvas"); // 取得上下文 var context = canvas.getContext("2d"); // 绘制线性渐变 createLinearGradient(x,y,x1,y1) // 类似PS中,拖出一条直线 ---> // 线条的方向决定了渐变的方向 // 线条的起点和终点位置,决定了渐变的程度 var gradient = context.createLinearGradient(0,50,200,50); gradient.addColorStop(0,'red'); gradient.addColorStop(0.5,'white'); // 填充矩形 context.fillStyle = gradient; context.fillRect(0,10,200,80); </script> <p style="font-size:14px;text-align:center">Copyright © <a>2018</a> Powered by <a>beyond</a></p> </body> </html></code></pre> <br> <p style="color:rgb(0,0,0);margin-bottom:5px;line-height:1.7;">效果如下:</p> <p style="color:rgb(0,0,0);margin-bottom:5px;line-height:1.7;"><a href="http://img.e-com-net.com/image/info8/61d0fe2467eb4469a148c04e75f273fa.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/61d0fe2467eb4469a148c04e75f273fa.jpg" alt="HTML5_01_画布_第15张图片" width="650" height="377" style="border:1px solid black;"></a><br></p> <p style="color:rgb(0,0,0);margin-bottom:5px;line-height:1.7;"><br></p> <p style="color:rgb(0,0,0);margin-bottom:5px;line-height:1.7;">使用 createRadialGradient()创建一个径向/圆渐变。使用渐变填充矩形：:</p> <p style="color:rgb(0,0,0);margin-bottom:5px;line-height:1.7;">代码如下:</p> <pre><code class="language-html"><!DOCTPYE html> <html> <head> <link rel="icon" href="beyond.jpg" type="image/x-icon"/> <meta charset="UTF-8"> <meta name="author" content="beyond"> <meta http-equiv="refresh" content="520"> <meta name="description" content="免费零基础教程"> <meta name="keywords" content="HTML,CSS,JAVASCRIPT"> <title>beyondの心中の动漫神作</title> <link rel="stylesheet" type="text/css" href="beyondbasestylewhite.css"> <!--[if lt IE 9]> <script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script> <![endif]--> </head> <body> <div style="text-align:center;"> <canvas id="beyondCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> 您的浏览器不支持HTML5的Canvas </canvas> </div> <script type="text/javascript"> var canvas = document.getElementById("beyondCanvas"); // 取得上下文 var context = canvas.getContext("2d"); // 绘制径向渐变 /* context.createRadialGradient(x , y , r , x1 , y1 , r1) 括号内的参数有如下的含义: x：表示渐变的开始圆心的 x 坐标 y：表示渐变的开始圆心的 y 坐标 r：表示开始圆的半径 x1：表示渐变的结束圆心的 x 坐标 y1：表示渐变的结束圆心的 y 坐标 r1：表示结束圆的半径 */ var startX = 100; var startY = 50; var startRadius = 5; var endX = startX ; var endY = startY ; var endRadius = startRadius + 35; var radialGradient = context.createRadialGradient(startX,startY,startRadius,endX,endY,endRadius); radialGradient.addColorStop(0,"red"); radialGradient.addColorStop(1,"white"); // 填充矩形 context.fillStyle = radialGradient; context.fillRect(0,10,200,80); </script> <p style="font-size:14px;text-align:center">Copyright © <a>2018</a> Powered by <a>beyond</a></p> </body> </html></code></pre> <br> <p style="color:rgb(0,0,0);margin-bottom:5px;line-height:1.7;">效果如下:</p> <p style="color:rgb(0,0,0);margin-bottom:5px;line-height:1.7;"><a href="http://img.e-com-net.com/image/info8/47d7c4d671894a1584590935e7ccf25e.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/47d7c4d671894a1584590935e7ccf25e.jpg" alt="HTML5_01_画布_第16张图片" width="650" height="375" style="border:1px solid black;"></a><br></p> <p style="color:rgb(0,0,0);margin-bottom:5px;line-height:1.7;"><br></p> <p style="color:rgb(0,0,0);margin-bottom:5px;line-height:1.7;"><span style="margin:0px;padding:0px;">提示：</span>当使用<canvas>元素创建径向渐变的时候 </p> <p style="color:rgb(0,0,0);margin-bottom:5px;line-height:1.7;">context.createRadialGradient(x , y , r , x1 , y1 , r1) 括号内的参数有如下的含义:</p> <ul style="color:rgb(0,0,0);margin-top:10px;margin-bottom:10px;padding-left:30px;list-style-position:outside;list-style-image:none;line-height:1.7;"> <li style="margin-top:0px;margin-left:0px;padding:0px;"> x：表示渐变的开始圆心的 x 坐标</li> <li style="margin-top:0px;margin-left:0px;padding:0px;"> y：表示渐变的开始圆<span style="color:rgb(0,0,0);font-family:Verdana, Arial, Helvetica, sans-serif;font-size:14px;text-align:left;background-color:rgb(255,255,255);">心</span>的 y 坐标</li> <li style="margin-top:0px;margin-left:0px;padding:0px;"> r：表示开始圆的半径</li> <li style="margin-top:0px;margin-left:0px;padding:0px;"> x1：表示渐变的结束圆<span style="color:rgb(0,0,0);font-family:Verdana, Arial, Helvetica, sans-serif;font-size:14px;text-align:left;background-color:rgb(255,255,255);">心</span>的 x 坐标</li> <li style="margin-top:0px;margin-left:0px;padding:0px;"> y1：表示渐变的结束圆<span style="color:rgb(0,0,0);font-family:Verdana, Arial, Helvetica, sans-serif;font-size:14px;text-align:left;background-color:rgb(255,255,255);">心</span>的 y 坐标</li> <li style="margin-top:0px;margin-left:0px;padding:0px;"> r1：表示结束圆的半径</li> </ul> <p style="color:rgb(0,0,0);margin-bottom:5px;line-height:1.7;"><br style="margin:0px;padding:0px;"></p> <hr style="color:rgb(0,0,0);margin-top:15px;margin-bottom:15px;padding:0px;height:0px;border-width:1px 0px 0px;border-top-style:solid;border-top-color:rgb(170,170,170);"> <h2 style="color:rgb(0,0,0);margin-top:20px;margin-bottom:10px;padding:0px;line-height:1.7;font-size:16px;">Canvas - 图像</h2> <p style="color:rgb(0,0,0);margin-bottom:5px;line-height:1.7;">把一幅图像放置到画布上, 使用以下方法:</p> <ul class="list-paddingleft-2" style="color:rgb(0,0,0);margin-top:10px;margin-bottom:10px;padding-left:30px;list-style-position:outside;list-style-image:none;line-height:1.7;"> <li style="margin-top:0px;margin-left:0px;padding:0px;"><p style="margin-bottom:5px;color:rgb(0,0,0);line-height:1.7;">drawImage(<span style="margin:0px;padding:0px;">image,x,y</span>) </p></li> </ul> <p style="color:rgb(0,0,0);margin-bottom:5px;line-height:1.7;">代码如下:</p> <pre><code class="language-html"><!DOCTPYE html> <html> <head> <link rel="icon" href="beyond.jpg" type="image/x-icon"/> <meta charset="UTF-8"> <meta name="author" content="beyond"> <meta http-equiv="refresh" content="520"> <meta name="description" content="免费零基础教程"> <meta name="keywords" content="HTML,CSS,JAVASCRIPT"> <title>beyondの心中の动漫神作</title> <link rel="stylesheet" type="text/css" href="beyondbasestylewhite.css"> <!--[if lt IE 9]> <script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script> <![endif]--> </head> <body> <div style="text-align:center;"> <img src="http://localhost/static/images/bingguo.png" id="bingguo" alt="冰菓" width="200" height="200" /> <br/> <canvas id="beyondCanvas" width="200" height="200" style="border:1px solid #c3c3c3;"> 您的浏览器不支持HTML5的Canvas </canvas> </div> <script type="text/javascript"> var canvas = document.getElementById("beyondCanvas"); // 取得上下文 var context = canvas.getContext("2d"); // 取得图片 var bingGuoImg = document.getElementById("bingguo"); // 图片加载完成时,就进行绘制到画布 bingGuoImg.onload = function(){ // 图片左上角起点的x 和 y 和 宽 和 高;图片严重失真!!! context.drawImage(bingGuoImg,0,0,200,200); } </script> <p style="font-size:14px;text-align:center">Copyright © <a>2018</a> Powered by <a>beyond</a></p> </body> </html></code></pre> <br> <p style="color:rgb(0,0,0);margin-bottom:5px;line-height:1.7;">效果如下:</p> <p style="color:rgb(0,0,0);margin-bottom:5px;line-height:1.7;"><a href="http://img.e-com-net.com/image/info8/df578623fabb45ba8212d8188b1d1dd8.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/df578623fabb45ba8212d8188b1d1dd8.jpg" alt="HTML5_01_画布_第17张图片" width="650" height="801" style="border:1px solid black;"></a><br></p> <p style="color:rgb(0,0,0);margin-bottom:5px;line-height:1.7;">补充:</p> <p style="color:rgb(0,0,0);margin-bottom:5px;line-height:1.7;">CanvasRenderingContext2D.drawImage()<br>drawImage 方法是 Canvas 2D 对象的方法，作用是将一张图片绘制到 canvas 画布中。<br><br>创建一个 Canvas 2D 对象：<br>var canvas = document.getElementById('beyondCanvas');<br>var cxt = canvas.getContext('2d');<br>drawImage 有 3 种调用方式：<br>ctx.drawImage(image, dx, dy);<br>ctx.drawImage(image, dx, dy, dWidth, dHeight);<br>ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);<br>各个参数的意义：<br>image 图片元素，除了图片，还支持其他 3 种格式，</p> <p style="color:rgb(0,0,0);margin-bottom:5px;line-height:1.7;">分别是 HTMLVideoElement </p> <p style="color:rgb(0,0,0);margin-bottom:5px;line-height:1.7;">HTMLCanvasElement </p> <p style="color:rgb(0,0,0);margin-bottom:5px;line-height:1.7;">ImageBitmap，</p> <p style="margin-bottom:5px;line-height:1.7;"><span style="color:rgb(0,0,0);">本文只涉及图片<br>sx 要绘制到 目标canvas 画布的 </span><span style="color:#ff0000;"><strong>源图片区域（矩形）在 X 轴上的偏移量</strong></span><span style="color:#000000;">（相对源图片左上角）</span><br><span style="color:#000000;">sy 与 sx 同理，只是换成 Y 轴</span></p> <p style="margin-bottom:5px;line-height:1.7;"><span style="color:#000000;"><br>sWidth 要绘制到 目标canvas 画布中的 </span><span style="color:#ff0000;"><strong>源图片区域的宽度</strong></span><span style="color:#000000;">，如果没有指定这个值，宽度则是 sx 到图片最右边的距离</span></p> <p style="margin-bottom:5px;line-height:1.7;"><span style="color:#000000;"><br>sHeight 要绘制到 目标Canvas画布中的 </span><span style="color:#ff0000;"><strong>源图片区域的高度</strong></span><span style="color:#000000;">，如果没有指定这个值，高度则是 sy 到图片最下边的距离</span></p> <p style="margin-bottom:5px;line-height:1.7;"><span style="color:#000000;"><br>dx :在 目标canvas 画布 X 轴上的偏移量 (左上角)</span><br><span style="color:#000000;">dy : 在 目标画布canvas Y 轴上的偏移量 (左上角)</span><br><span style="color:#000000;">dWidth 在 目标 canvas 画布上将要占的宽度</span><br><span style="color:#000000;">dHeight <span style="color:rgb(0,0,0);font-family:Verdana, Arial, Helvetica, sans-serif;background-color:rgb(255,255,255);">在 目标 canvas 画布上将要占的高度</span></span><br><span style="color:#000000;">是不是有点晕了？下面这张图可以直观地说明它们的关系：</span></p> <p style="margin-bottom:5px;line-height:1.7;"><span style="color:#000000;"><a href="http://img.e-com-net.com/image/info8/a05b8d84551f4d148b1d309cfa84ea9e.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/a05b8d84551f4d148b1d309cfa84ea9e.jpg" alt="HTML5_01_画布_第18张图片" width="300" height="290" style="border:1px solid black;"></a><br></span></p> <p style="margin-bottom:5px;line-height:1.7;"><span style="color:#000000;">可以这么理解：</span></p> <p style="margin-bottom:5px;line-height:1.7;"><span style="color:#000000;">首先用 sx 和 sy 这两个值去定位源图片上的左上角坐标，</span></p> <p style="margin-bottom:5px;line-height:1.7;"><span style="color:#000000;">再根据这个左上角的坐标点去图片中挖出一个矩形，</span></p> <p style="margin-bottom:5px;line-height:1.7;"><span style="color:#000000;">挖出的矩形的宽高就是 sWidth 和 sHeight 了。</span></p> <p style="margin-bottom:5px;line-height:1.7;"><span style="color:#000000;"><br></span></p> <p style="margin-bottom:5px;line-height:1.7;"><span style="color:#000000;">矩形挖出来了，现在要把它绘制到画布中去，</span></p> <p style="margin-bottom:5px;line-height:1.7;"><span style="color:#000000;">这时用 dx 和 dy 两个值来确定矩形在目标画布中的左上角坐标位置，</span></p> <p style="margin-bottom:5px;line-height:1.7;"><span style="color:#000000;">再用 dWidth 和 dHeight 确定将占用目标画布<span style="color:rgb(0,0,0);font-family:Verdana, Arial, Helvetica, sans-serif;background-color:rgb(255,255,255);">多大的矩形</span>区域。</span><br></p> <p style="color:rgb(0,0,0);margin-bottom:5px;line-height:1.7;"><br></p> <hr style="color:rgb(0,0,0);margin-top:15px;margin-bottom:15px;padding:0px;height:0px;border-width:1px 0px 0px;border-top-style:solid;border-top-color:rgb(170,170,170);"> <h2 style="color:rgb(0,0,0);margin-top:20px;margin-bottom:10px;padding:0px;line-height:1.7;font-size:16px;">HTML Canvas 参考手册</h2> <p style="color:rgb(0,0,0);margin-bottom:5px;line-height:1.7;">标签的完整属性可以参考<span style="color:#900b09;"><span><u>Canvas 参考手册.</u></span></span></p> <h2 style="color:rgb(0,0,0);margin-top:20px;margin-bottom:10px;padding:0px;line-height:1.7;font-size:16px;">The HTML Tag</h2> <table class="reference notranslate" style="color:rgb(0,0,0);margin:4px 0px;padding:0px;width:699px;table-layout:fixed;border-spacing:0px;"> <tbody style="margin:0px;padding:0px;"> <tr class="firstRow" style="margin:0px;padding:0px;background-color:rgb(239,239,239);"> <th width="150" align="left" style="margin:0px;padding:3px;background-color:rgb(189,189,189);border-top-color:rgb(189,189,189);border-right-color:rgb(189,189,189);border-bottom:none;border-left-color:rgb(189,189,189);color:rgb(255,255,255);vertical-align:top;">Tag</th> <th align="left" style="margin:0px;padding:3px;background-color:rgb(189,189,189);border-top-color:rgb(189,189,189);border-right-color:rgb(189,189,189);border-bottom:none;border-left-color:rgb(189,189,189);color:rgb(255,255,255);vertical-align:top;">描述</th> </tr> <tr style="margin:0px;padding:0px;background-color:rgb(255,255,255);"> <td style="margin:0px;padding:7px 5px;min-width:40px;height:30px;vertical-align:top;"><span style="color:#900b09;"><span><u><canvas></u></span></span></td> <td style="margin:0px;padding:7px 5px;min-width:40px;height:30px;vertical-align:top;">HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。</td> </tr> </tbody> </table> <hr style="color:rgb(0,0,0);margin-top:15px;margin-bottom:15px;padding:0px;height:0px;border-width:1px 0px 0px;border-top-style:solid;border-top-color:rgb(170,170,170);"> <h2 style="color:rgb(0,0,0);margin-top:20px;margin-bottom:10px;padding:0px;line-height:1.7;font-size:16px;">参考阅读</h2> <p style="color:rgb(0,0,0);margin-bottom:5px;line-height:1.7;">HTML DOM 参考手册：<span style="color:#900b09;"><span><u>HTML DOM Canvas 对象</u></span></span></p> </div> </div> <p><br></p> <p></p> <div class="content-bg" style="margin:0px;padding:0px;width:auto;max-width:980px;font-family:Verdana, Arial, Helvetica, sans-serif;font-size:14px;background-color:rgb(255,255,255);"> <div class="content-intro view-box" style="margin-right:0px;margin-bottom:0px;margin-left:0px;padding:15px 0px 20px;line-height:1.7;min-height:600px;margin-top:0px;"> <h2 style="color:rgb(0,0,0);margin-top:0px;margin-bottom:10px;padding:.25em 0px 0px;line-height:1.7;font-size:16px;border-top:none;">HTML5 <span class="color_h1" style="margin:0px;padding:0px;">内联 SVG</span></h2> <div style="margin:0px;padding:0px;"> <span class="color_h1" style="margin:0px;padding:0px;"><span style="color:#000000;">SVG表示 </span><span style="color:#ff0000;"><strong>可缩放矢量图形</strong></span><span style="color:#000000;">，Scalable Vector Graphics,</span></span> </div> <div style="margin:0px;padding:0px;"> <span class="color_h1" style="margin:0px;padding:0px;"><span style="color:#000000;">是基于可扩展标记语言（标准通用标记语言的子集）的，</span></span> </div> <div style="margin:0px;padding:0px;"> <span class="color_h1" style="margin:0px;padding:0px;"><span style="color:#000000;">SVG用于描述二维矢量图形的一种图形格式，</span></span> </div> <div style="margin:0px;padding:0px;"> <span class="color_h1" style="margin:0px;padding:0px;"><span style="color:#000000;">它在2003年1月14日正式成为W3C推荐标准。</span><br style="margin:0px;padding:0px;"></span> </div> <hr style="color:rgb(0,0,0);margin-top:15px;margin-bottom:15px;padding:0px;height:0px;border-width:1px 0px 0px;border-top-style:solid;border-top-color:rgb(170,170,170);"> <p class="intro" style="color:rgb(0,0,0);margin-bottom:5px;line-height:1.7;">HTML5 支持内联 SVG。</p> <hr style="color:rgb(0,0,0);margin-top:15px;margin-bottom:15px;padding:0px;height:0px;border-width:1px 0px 0px;border-top-style:solid;border-top-color:rgb(170,170,170);"> <h2 style="color:rgb(0,0,0);margin-top:20px;margin-bottom:10px;padding:0px;line-height:1.7;font-size:16px;">什么是SVG？</h2> <ul class="list-paddingleft-2" style="margin-top:10px;margin-bottom:10px;padding-left:30px;list-style-position:outside;list-style-image:none;line-height:1.7;"> <li style="margin-top:0px;margin-left:0px;padding:0px;"><p style="margin-bottom:5px;line-height:1.7;"><span style="color:rgb(0,0,0);">SVG 指</span><span style="color:#ff0000;"><strong>可伸缩矢量图形 (Scalable Vector Graphics)</strong></span></p></li> <li style="margin-top:0px;margin-left:0px;padding:0px;"><p style="margin-bottom:5px;line-height:1.7;"><span style="color:rgb(0,0,0);">SVG 用于定义用于网络的基于</span><span style="color:#ff0000;"><strong>矢量</strong></span><span style="color:#000000;">的图形</span></p></li> <li style="margin-top:0px;margin-left:0px;padding:0px;"><p style="margin-bottom:5px;line-height:1.7;"><span style="color:rgb(0,0,0);">SVG 使用 </span><span style="color:#ff0000;"><strong>XML 格式定义图形</strong></span></p></li> <li style="margin-top:0px;margin-left:0px;padding:0px;"><p style="margin-bottom:5px;line-height:1.7;"><span style="color:rgb(0,0,0);">SVG 图像在放大或改变尺寸的情况下其图形质量</span><span style="color:#ff0000;"><strong>永远不会失真</strong></span></p></li> <li style="color:rgb(0,0,0);margin-top:0px;margin-left:0px;padding:0px;"><p style="margin-bottom:5px;color:rgb(0,0,0);line-height:1.7;">SVG 是万维网联盟的标准</p></li> <li style="margin-top:0px;margin-left:0px;padding:0px;"><p style="margin-bottom:5px;line-height:1.7;"><span style="color:rgb(0,0,0);">SVG 与 DOM 和 </span><span style="color:#ff0000;"><strong>XSL</strong></span><span style="color:#000000;"> 之类的 W3C 标准是一个整体</span><br style="margin:0px;padding:0px;"></p></li> </ul> <hr style="color:rgb(0,0,0);margin-top:15px;margin-bottom:15px;padding:0px;height:0px;border-width:1px 0px 0px;border-top-style:solid;border-top-color:rgb(170,170,170);"> <h2 style="color:rgb(0,0,0);margin-top:20px;margin-bottom:10px;padding:0px;line-height:1.7;font-size:16px;">SVG优势</h2> <p style="color:rgb(0,0,0);margin-bottom:5px;line-height:1.7;">与其他图像格式相比（比如 JPEG 和 GIF），使用 SVG 的优势在于：</p> <ul class="list-paddingleft-2" style="margin-top:10px;margin-bottom:10px;padding-left:30px;list-style-position:outside;list-style-image:none;line-height:1.7;"> <li style="margin-top:0px;margin-left:0px;padding:0px;"><p style="margin-bottom:5px;line-height:1.7;"><span style="color:rgb(0,0,0);">SVG 图像可通过</span><span style="color:#ff0000;"><strong>文本编辑器</strong></span><span style="color:#000000;">来创建和修改</span></p></li> <li style="margin-top:0px;margin-left:0px;padding:0px;"><p style="margin-bottom:5px;line-height:1.7;"><span style="color:rgb(0,0,0);">SVG 图像可被</span><span style="color:#ff0000;"><strong>搜索、索引、脚本化或压缩</strong></span></p></li> <li style="color:rgb(0,0,0);margin-top:0px;margin-left:0px;padding:0px;"><p style="margin-bottom:5px;color:rgb(0,0,0);line-height:1.7;">SVG 是可伸缩的</p></li> <li style="color:rgb(0,0,0);margin-top:0px;margin-left:0px;padding:0px;"><p style="margin-bottom:5px;color:rgb(0,0,0);line-height:1.7;">SVG 图像可在任何的分辨率下永远地被高质量地打印</p></li> <li style="color:rgb(0,0,0);margin-top:0px;margin-left:0px;padding:0px;"><p style="margin-bottom:5px;color:rgb(0,0,0);line-height:1.7;">SVG 可在图像质量没有任何损失和下降的情况下被无限地放大</p></li> </ul> <hr style="color:rgb(0,0,0);margin-top:15px;margin-bottom:15px;padding:0px;height:0px;border-width:1px 0px 0px;border-top-style:solid;border-top-color:rgb(170,170,170);"> <h2 style="color:rgb(0,0,0);margin-top:20px;margin-bottom:10px;padding:0px;line-height:1.7;font-size:16px;">浏览器支持</h2> <p style="color:rgb(0,0,0);margin-bottom:5px;line-height:1.7;"><img src="http://img.e-com-net.com/image/info8/c8fe8e467add49da9ccec8d07e787aec.gif" alt="Internet Explorer" title="Internet Explorer" height="30" width="31" style="padding:0px;border:0px;"><img src="http://img.e-com-net.com/image/info8/2da229014efc4966b889425172ef3fae.gif" alt="Firefox" title="Firefox" height="30" width="31" style="padding:0px;border:0px;"><img src="http://img.e-com-net.com/image/info8/3ab36f1c492f42259d84f1cb7ab3805a.gif" alt="Opera" title="Opera" height="30" width="28" style="padding:0px;border:0px;"><img src="http://img.e-com-net.com/image/info8/b833fdff32164e29bcd2fd4ad76cd023.gif" alt="Google Chrome" title="Google Chrome" height="30" width="31" style="padding:0px;border:0px;"><img src="http://img.e-com-net.com/image/info8/8824d4ad4a2c4e1eb3d1f986e3ab0bcd.jpg" alt="Safari" title="Safari" height="30" width="28" style="padding:0px;border:0px;"></p> <p style="margin-bottom:5px;line-height:1.7;"><span style="color:rgb(0,0,0);">IE 9+, Firefox, Opera, Chrome, 和 Safari 全部无条件地支持</span><span style="color:#ff0000;"><strong>内联SVG</strong></span><span style="color:#000000;">。</span></p> <hr style="color:rgb(0,0,0);margin-top:15px;margin-bottom:15px;padding:0px;height:0px;border-width:1px 0px 0px;border-top-style:solid;border-top-color:rgb(170,170,170);"> <h2 style="color:rgb(0,0,0);margin-top:20px;margin-bottom:10px;padding:0px;line-height:1.7;font-size:16px;">把 SVG 直接嵌入 HTML 页面</h2> <p style="color:rgb(0,0,0);margin-bottom:5px;line-height:1.7;">在 HTML5 中，您能够将 SVG 元素直接嵌入 HTML 页面中:</p> <p style="color:rgb(0,0,0);margin-bottom:5px;line-height:1.7;">代码如下:</p> <pre><code class="language-html"><!DOCTPYE html> <html> <head> <link rel="icon" href="beyond.jpg" type="image/x-icon"/> <meta charset="UTF-8"> <meta name="author" content="beyond"> <meta http-equiv="refresh" content="520"> <meta name="description" content="免费零基础教程"> <meta name="keywords" content="HTML,CSS,JAVASCRIPT"> <title>beyondの心中の动漫神作</title> <link rel="stylesheet" type="text/css" href="beyondbasestylewhite.css"> <!--[if lt IE 9]> <script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script> <![endif]--> </head> <body> <div style="text-align:center;padding-left:100;"> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190"> <polygon style="fill:rgb(249,241,224);stroke:rgb(29,29,29);stroke-width:5;fill-rule:evenodd;" points="100,10 40,180 190,60 10,60 160,180"/> </svg> </div> <p style="font-size:14px;text-align:center">Copyright © <a>2018</a> Powered by <a>beyond</a></p> </body> </html></code></pre> <br> <p style="color:rgb(0,0,0);margin-bottom:5px;line-height:1.7;">效果如下:</p> <p style="color:rgb(0,0,0);margin-bottom:5px;line-height:1.7;"><a href="http://img.e-com-net.com/image/info8/23f9c8d1481c4cd8a9570d0bea3f4b28.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/23f9c8d1481c4cd8a9570d0bea3f4b28.jpg" alt="HTML5_01_画布_第19张图片" width="650" height="502" style="border:1px solid black;"></a><br></p> <p style="color:rgb(0,0,0);margin-bottom:5px;line-height:1.7;"><br></p> <p style="color:rgb(0,0,0);margin-bottom:5px;line-height:1.7;">更多SVG图形的绘制方法,将单独做一个SVG系列<span style="color:rgb(0,0,0);font-family:Verdana, Arial, Helvetica, sans-serif;background-color:rgb(255,255,255);">教程</span></p> <hr style="color:rgb(0,0,0);margin-top:15px;margin-bottom:15px;padding:0px;height:0px;border-width:1px 0px 0px;border-top-style:solid;border-top-color:rgb(170,170,170);"> <h2 style="color:rgb(0,0,0);margin-top:20px;margin-bottom:10px;padding:0px;line-height:1.7;font-size:16px;">SVG 与 Canvas两者间的区别</h2> <p style="margin-bottom:5px;line-height:1.7;"><span style="color:rgb(0,0,0);">SVG 是一种使用</span><span style="color:#ff0000;"><strong> XML 描述 2D 图形</strong></span><span style="color:#000000;">的语言。</span></p> <p style="margin-bottom:5px;line-height:1.7;"><span style="color:rgb(0,0,0);">Canvas 通过 </span><span style="color:#ff0000;"><strong>JavaScript 来绘制 2D </strong></span><span style="color:#000000;">图形。</span></p> <p style="color:rgb(0,0,0);margin-bottom:5px;line-height:1.7;">SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。</p> <p style="color:rgb(0,0,0);margin-bottom:5px;line-height:1.7;">您可以为某个元素附加 JavaScript 事件处理器。</p> <p style="color:rgb(0,0,0);margin-bottom:5px;line-height:1.7;"><br></p> <p style="margin-bottom:5px;line-height:1.7;"><span style="color:rgb(0,0,0);">在 SVG 中，每个被绘制的</span><span style="color:#ff0000;"><strong>图形</strong></span><span style="color:#000000;">均被视为对象。</span></p> <p style="margin-bottom:5px;line-height:1.7;"><span style="color:#000000;">如果 SVG </span><span style="color:#ff0000;"><strong>对象的属性</strong></span><span style="color:#000000;">发生变化，那么浏览器能够</span><span style="color:#ff0000;"><strong>自动重现图形</strong></span><span style="color:#000000;">。</span><strong><span style="color:#339999;">牛X</span></strong></p> <p style="margin-bottom:5px;line-height:1.7;"><span style="color:#000000;"><br></span></p> <p style="margin-bottom:5px;line-height:1.7;"><span style="color:rgb(0,0,0);">Canvas 是</span><span style="color:#ff0000;"><strong>逐像素</strong></span><span style="color:#000000;">进行渲染的。</span></p> <p style="margin-bottom:5px;line-height:1.7;"><span style="color:#000000;">在 canvas 中，一旦图形被绘制完成，它就</span><span style="color:#ff0000;"><strong>不会继续得到浏览器的关注</strong></span><span style="color:#000000;">。</span></p> <p style="margin-bottom:5px;line-height:1.7;"><span style="color:#000000;">但是,如果其位置发生了变化，那么整个场景也还是需要重新绘制的，包括任何或许已被图形覆盖的对象。</span></p> <hr style="color:rgb(0,0,0);margin-top:15px;margin-bottom:15px;padding:0px;height:0px;border-width:1px 0px 0px;border-top-style:solid;border-top-color:rgb(170,170,170);"> <h2 style="color:rgb(0,0,0);margin-top:20px;margin-bottom:10px;padding:0px;line-height:1.7;font-size:16px;">Canvas 与 SVG 的比较</h2> <p style="color:rgb(0,0,0);margin-bottom:5px;line-height:1.7;">下表列出了 canvas 与 SVG 之间的一些不同之处。</p> <table class="reference notranslate" style="color:rgb(0,0,0);margin:4px 0px;padding:0px;width:699px;table-layout:fixed;border-spacing:0px;"> <tbody style="margin:0px;padding:0px;"> <tr class="firstRow" style="margin:0px;padding:0px;background-color:rgb(239,239,239);"> <th width="50%" align="left" style="margin:0px;padding:3px;background-color:rgb(189,189,189);border-top-color:rgb(189,189,189);border-right-color:rgb(189,189,189);border-bottom:none;border-left-color:rgb(189,189,189);color:rgb(255,255,255);vertical-align:top;">Canvas</th> <th width="50%" align="left" style="margin:0px;padding:3px;background-color:rgb(189,189,189);border-top-color:rgb(189,189,189);border-right-color:rgb(189,189,189);border-bottom:none;border-left-color:rgb(189,189,189);color:rgb(255,255,255);vertical-align:top;">SVG</th> </tr> <tr style="margin:0px;padding:0px;background-color:rgb(255,255,255);"> <td style="margin:0px;padding:7px 5px;min-width:40px;height:30px;vertical-align:top;"> <ul class="list-paddingleft-2" style="margin-top:10px;margin-bottom:10px;padding-left:30px;list-style-position:outside;list-style-image:none;line-height:1.7;"> <li style="margin-top:0px;margin-left:0px;padding:0px;"><p style="margin-bottom:5px;color:rgb(0,0,0);line-height:1.7;">依赖分辨率</p></li> <li style="margin-top:0px;margin-left:0px;padding:0px;"><p style="margin-bottom:5px;color:rgb(0,0,0);line-height:1.7;">不支持事件处理器</p></li> <li style="margin-top:0px;margin-left:0px;padding:0px;"><p style="margin-bottom:5px;color:rgb(0,0,0);line-height:1.7;">弱的文本渲染能力</p></li> <li style="margin-top:0px;margin-left:0px;padding:0px;"><p style="margin-bottom:5px;color:rgb(0,0,0);line-height:1.7;">能够以 .png 或 .jpg 格式保存结果图像</p></li> <li style="margin-top:0px;margin-left:0px;padding:0px;"><p style="margin-bottom:5px;line-height:1.7;"><span style="color:rgb(0,0,0);">最适合</span><span style="color:#ff0000;"><strong>图像密集型</strong></span><span style="color:#000000;">的游戏，其中的许多对象会被</span><span style="color:#ff0000;"><strong>频繁重绘</strong></span></p></li> </ul></td> <td style="margin:0px;padding:7px 5px;min-width:40px;height:30px;vertical-align:top;"> <ul class="list-paddingleft-2" style="margin-top:10px;margin-bottom:10px;padding-left:30px;list-style-position:outside;list-style-image:none;line-height:1.7;"> <li style="margin-top:0px;margin-left:0px;padding:0px;"><p style="margin-bottom:5px;color:rgb(0,0,0);line-height:1.7;">不依赖分辨率</p></li> <li style="margin-top:0px;margin-left:0px;padding:0px;"><p style="margin-bottom:5px;color:rgb(0,0,0);line-height:1.7;">支持事件处理器</p></li> <li style="margin-top:0px;margin-left:0px;padding:0px;"><p style="margin-bottom:5px;color:rgb(0,0,0);line-height:1.7;">最适合带有大型渲染区域的应用程序（比如谷歌地图）</p></li> <li style="margin-top:0px;margin-left:0px;padding:0px;"><p style="margin-bottom:5px;color:rgb(0,0,0);line-height:1.7;">复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）</p></li> <li style="margin-top:0px;margin-left:0px;padding:0px;"><p style="margin-bottom:5px;line-height:1.7;"><span style="color:#ff0000;"><strong>不适合游戏应用</strong></span></p></li> </ul></td> </tr> </tbody> </table> </div> </div> <p></p> <p style="background-color:rgb(255,255,255);"><span style="margin:0px;padding:0px;font-size:24px;">附录:</span></p> <div class="content-bg" style="margin:0px;padding:0px;color:rgb(0,0,0);font-family:Verdana, Arial, Helvetica, sans-serif;font-size:14px;background-color:rgb(255,255,255);"> <div class="content-intro view-box" style="margin:0px;padding:15px 0px 20px;line-height:1.7;min-height:600px;"> <div class="content-body" style="margin:0px;padding:0px;"> <div class="article-intro" style="margin:0px;padding:0px;"> <h2 style="font-family:'PingFang SC', 'Microsoft YaHei', SimHei, Arial, SimSun;margin-top:0px;margin-bottom:10px;padding:.25em 0px 0px;color:rgb(0,0,0);font-size:16px;line-height:1.7;border-top:none;">HTML 参考手册- <span class="color_h1" style="margin:0px;padding:0px;font-weight:400;">(HTML5 标准)</span></h2> <hr style="margin-top:15px;margin-bottom:15px;border-width:1px 0px 0px;border-top-style:solid;border-top-color:rgb(170,170,170);padding:0px;"> <h2 style="font-family:'PingFang SC', 'Microsoft YaHei', SimHei, Arial, SimSun;margin-top:20px;margin-bottom:10px;padding:0px;color:rgb(0,0,0);font-size:16px;line-height:1.7;">按字母顺序排列</h2> <p style="margin-bottom:5px;color:rgb(0,0,0);line-height:1.7;"><span class="new" style="margin:0px;padding:0px 1px;float:left;color:rgb(255,255,255);background-color:rgb(174,65,65);border:1px solid rgb(255,255,255);line-height:16px;">New</span> : HTML5新标签</p> <table class="reference notranslate" style="width:780px;margin:4px 0px;padding:0px;table-layout:fixed;border-spacing:0px;"> <tbody style="margin:0px;padding:0px;"> <tr style="background-color:rgb(239,239,239);margin:0px;padding:0px;"> <th width="25%" align="left" style="border-top-color:rgb(189,189,189);border-right-color:rgb(189,189,189);border-bottom:none;border-left-color:rgb(189,189,189);color:rgb(255,255,255);padding:3px;background-color:rgb(189,189,189);margin:0px;vertical-align:top;">标签</th> <th width="75%" align="left" style="border-top-color:rgb(189,189,189);border-right-color:rgb(189,189,189);border-bottom:none;border-left-color:rgb(189,189,189);color:rgb(255,255,255);padding:3px;background-color:rgb(189,189,189);margin:0px;vertical-align:top;">描述</th> </tr> <tr style="background-color:rgb(255,255,255);margin:0px;padding:0px;"> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;"><span style="margin:0px;padding:0px;color:rgb(144,11,9);"><!--...--></span></td> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;">-->√定义注释</td> </tr> <tr style="background-color:rgb(239,239,239);margin:0px;padding:0px;"> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;"><span style="margin:0px;padding:0px;color:rgb(144,11,9);"><!DOCTYPE></span></td> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;">-->√定义文档类型</td> </tr> <tr style="background-color:rgb(255,255,255);margin:0px;padding:0px;"> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;"><span style="margin:0px;padding:0px;color:rgb(144,11,9);"><a></span></td> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;">-->√定义超文本链接</td> </tr> <tr style="background-color:rgb(239,239,239);margin:0px;padding:0px;"> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;"><span style="margin:0px;padding:0px;color:rgb(144,11,9);"><abbr></span></td> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;">-->√定义<span style="margin:0px;padding:0px;color:rgb(255,0,0);"><span style="margin:0px;padding:0px;font-weight:700;">缩写</span></span></td> </tr> <tr style="background-color:rgb(255,255,255);margin:0px;padding:0px;"> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;"><span style="margin:0px;padding:0px;color:rgb(144,11,9);"><acronym></span></td> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;"><span class="deprecated" style="margin:0px;padding:0px;color:rgb(255,0,0);background-color:transparent;">定义</span><span class="deprecated" style="margin:0px;padding:0px;background-color:transparent;"><span style="margin:0px;padding:0px;color:rgb(51,51,255);"><span style="margin:0px;padding:0px;font-weight:700;">只取首字母的缩写</span></span></span><span class="deprecated" style="margin:0px;padding:0px;color:rgb(255,0,0);background-color:transparent;">，不支持HTML5  </span><span class="deprecated" style="margin:0px;padding:0px;background-color:transparent;"><span style="margin:0px;padding:0px;color:rgb(51,51,51);"><span style="margin:0px;padding:0px;font-weight:700;">???Excuse Me???</span></span></span></td> </tr> <tr style="background-color:rgb(239,239,239);margin:0px;padding:0px;"> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;"><span style="margin:0px;padding:0px;color:rgb(144,11,9);"><address></span></td> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;">定义文档作者或拥有者的联系信息</td> </tr> <tr style="background-color:rgb(255,255,255);margin:0px;padding:0px;"> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;"><span style="margin:0px;padding:0px;color:rgb(144,11,9);"><applet></span></td> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;">定义嵌入的 applet。<span style="margin:0px;padding:0px;">HTML5中不支持使用。</span></td> </tr> <tr style="background-color:rgb(239,239,239);margin:0px;padding:0px;"> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;"><span style="margin:0px;padding:0px;color:rgb(144,11,9);"><area></span></td> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;">-->√定义图像映射内部的区域</td> </tr> <tr style="background-color:rgb(255,255,255);margin:0px;padding:0px;"> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;"><span style="margin:0px;padding:0px;color:rgb(144,11,9);"><article></span><span class="new" style="margin:0px;padding:0px 1px;float:right;color:rgb(255,255,255);background-color:rgb(174,65,65);border:1px solid rgb(255,255,255);line-height:16px;">New</span></td> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;">定义一个文章区域</td> </tr> <tr style="background-color:rgb(239,239,239);margin:0px;padding:0px;"> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;"><span style="margin:0px;padding:0px;color:rgb(144,11,9);"><aside></span><span class="new" style="margin:0px;padding:0px 1px;float:right;color:rgb(255,255,255);background-color:rgb(174,65,65);border:1px solid rgb(255,255,255);line-height:16px;">New</span></td> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;">定义页面的侧边栏内容</td> </tr> <tr style="background-color:rgb(255,255,255);margin:0px;padding:0px;"> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;"><span style="margin:0px;padding:0px;color:rgb(144,11,9);"><audio></span><span class="new" style="margin:0px;padding:0px 1px;float:right;color:rgb(255,255,255);background-color:rgb(174,65,65);border:1px solid rgb(255,255,255);line-height:16px;">New</span></td> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;">-->√定义音频内容</td> </tr> <tr style="background-color:rgb(239,239,239);margin:0px;padding:0px;"> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;"><span style="margin:0px;padding:0px;color:rgb(144,11,9);"><b></span></td> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;">-->√定义文本粗体</td> </tr> <tr style="background-color:rgb(255,255,255);margin:0px;padding:0px;"> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;"><span style="margin:0px;padding:0px;color:rgb(144,11,9);"><base></span></td> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;">-->√定义页面中所有链接的默认地址或默认目标。</td> </tr> <tr style="background-color:rgb(239,239,239);margin:0px;padding:0px;"> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;"><span style="margin:0px;padding:0px;color:rgb(144,11,9);"><basefont></span></td> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;">定义页面中文本的默认字体、颜色或尺寸。<span style="margin:0px;padding:0px;">HTML5不支持使用。</span></td> </tr> <tr style="background-color:rgb(255,255,255);margin:0px;padding:0px;"> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;"><span style="margin:0px;padding:0px;color:rgb(144,11,9);"><bdi></span><span class="new" style="margin:0px;padding:0px 1px;float:right;color:rgb(255,255,255);background-color:rgb(174,65,65);border:1px solid rgb(255,255,255);line-height:16px;">New</span></td> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;">允许您设置一段文本，使其脱离其父元素的文本方向设置。</td> </tr> <tr style="background-color:rgb(239,239,239);margin:0px;padding:0px;"> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;"><span style="margin:0px;padding:0px;color:rgb(144,11,9);"><bdo></span></td> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;">-->√定义文字方向, 例如:从右往左,就是 <span style="margin:0px;padding:0px;color:rgb(255,0,0);"><span style="margin:0px;padding:0px;font-weight:700;">dir="rtl"</span></span></td> </tr> <tr style="background-color:rgb(255,255,255);margin:0px;padding:0px;"> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;"><span style="margin:0px;padding:0px;color:rgb(144,11,9);"><big></span></td> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;">定义大号文本，<span style="margin:0px;padding:0px;color:rgb(255,0,0);"><span style="margin:0px;padding:0px;font-weight:700;">HTML5不支持使用</span></span>。</td> </tr> <tr style="background-color:rgb(239,239,239);margin:0px;padding:0px;"> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;"><span style="margin:0px;padding:0px;color:rgb(144,11,9);"><blockquote></span></td> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;">-->√定义长的引用</td> </tr> <tr style="background-color:rgb(255,255,255);margin:0px;padding:0px;"> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;"><span style="margin:0px;padding:0px;color:rgb(144,11,9);"><body></span></td> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;">-->√定义文档的主体</td> </tr> <tr style="background-color:rgb(239,239,239);margin:0px;padding:0px;"> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;"><span style="margin:0px;padding:0px;color:rgb(144,11,9);"><br></span></td> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;">-->√定义换行</td> </tr> <tr style="background-color:rgb(255,255,255);margin:0px;padding:0px;"> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;"><span style="margin:0px;padding:0px;color:rgb(144,11,9);"><button></span></td> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;">-->√定义一个点击按钮</td> </tr> <tr style="background-color:rgb(239,239,239);margin:0px;padding:0px;"> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;"><span style="margin:0px;padding:0px;color:rgb(144,11,9);"><canvas></span><span class="new" style="margin:0px;padding:0px 1px;float:right;color:rgb(255,255,255);background-color:rgb(174,65,65);border:1px solid rgb(255,255,255);line-height:16px;">New</span></td> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;">-->√定义图形，比如图表和其他图像,标签只是图形容器，您必须使用脚本来绘制图形</td> </tr> <tr style="background-color:rgb(255,255,255);margin:0px;padding:0px;"> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;"><span style="margin:0px;padding:0px;color:rgb(144,11,9);"><caption></span></td> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;">-->√定义表格标题</td> </tr> <tr style="background-color:rgb(239,239,239);margin:0px;padding:0px;"> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;"><span style="margin:0px;padding:0px;color:rgb(144,11,9);"><center></span></td> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;">定义居中文本。<span style="margin:0px;padding:0px;"><span style="margin:0px;padding:0px;color:rgb(255,0,0);"><span style="margin:0px;padding:0px;font-weight:700;">HTML5不支持使用。</span></span></span></td> </tr> <tr style="background-color:rgb(255,255,255);margin:0px;padding:0px;"> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;"><span style="margin:0px;padding:0px;color:rgb(144,11,9);"><cite></span></td> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;">-->√定义引用(citation)</td> </tr> <tr style="background-color:rgb(239,239,239);margin:0px;padding:0px;"> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;"><span style="margin:0px;padding:0px;color:rgb(144,11,9);"><code></span></td> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;">-->√定义计算机代码文本</td> </tr> <tr style="background-color:rgb(255,255,255);margin:0px;padding:0px;"> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;"><span style="margin:0px;padding:0px;color:rgb(144,11,9);"><col></span></td> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;">-->√定义表格中一个或多个列的属性值</td> </tr> <tr style="background-color:rgb(239,239,239);margin:0px;padding:0px;"> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;"><span style="margin:0px;padding:0px;color:rgb(144,11,9);"><colgroup></span></td> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;">定义表格中供格式化的列组</td> </tr> <tr style="background-color:rgb(255,255,255);margin:0px;padding:0px;"> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;"><span style="margin:0px;padding:0px;color:rgb(144,11,9);"><command></span><span class="new" style="margin:0px;padding:0px 1px;float:right;color:rgb(255,255,255);background-color:rgb(174,65,65);border:1px solid rgb(255,255,255);line-height:16px;">New</span></td> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;">定义命令按钮，比如单选按钮、复选框或按钮</td> </tr> <tr style="background-color:rgb(239,239,239);margin:0px;padding:0px;"> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;"><span style="margin:0px;padding:0px;color:rgb(144,11,9);"><datalist></span><span class="new" style="margin:0px;padding:0px 1px;float:right;color:rgb(255,255,255);background-color:rgb(174,65,65);border:1px solid rgb(255,255,255);line-height:16px;">New</span></td> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;">定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。</td> </tr> <tr style="background-color:rgb(255,255,255);margin:0px;padding:0px;"> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;"><span style="margin:0px;padding:0px;color:rgb(144,11,9);"><dd></span></td> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;">-->√定义定义列表中项目的描述</td> </tr> <tr style="background-color:rgb(239,239,239);margin:0px;padding:0px;"> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;"><span style="margin:0px;padding:0px;color:rgb(144,11,9);"><del></span></td> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;">-->√定义被<span style="margin:0px;padding:0px;color:rgb(255,0,0);">删除</span>文本 (删除线效果)</td> </tr> <tr style="background-color:rgb(255,255,255);margin:0px;padding:0px;"> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;"><span style="margin:0px;padding:0px;color:rgb(144,11,9);"><details></span><span class="new" style="margin:0px;padding:0px 1px;float:right;color:rgb(255,255,255);background-color:rgb(174,65,65);border:1px solid rgb(255,255,255);line-height:16px;">New</span></td> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;">用于描述文档或文档某个部分的细节</td> </tr> <tr style="background-color:rgb(239,239,239);margin:0px;padding:0px;"> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;"><span style="margin:0px;padding:0px;color:rgb(144,11,9);"><dfn></span></td> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;">定义定义项目</td> </tr> <tr style="background-color:rgb(255,255,255);margin:0px;padding:0px;"> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;"><span style="margin:0px;padding:0px;color:rgb(144,11,9);"><dialog></span><span class="new" style="margin:0px;padding:0px 1px;float:right;color:rgb(255,255,255);background-color:rgb(174,65,65);border:1px solid rgb(255,255,255);line-height:16px;">New</span></td> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;">定义对话框，比如提示框</td> </tr> <tr style="background-color:rgb(239,239,239);margin:0px;padding:0px;"> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;"><span style="margin:0px;padding:0px;color:rgb(144,11,9);"><dir></span></td> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;">定义目录列表。<span style="margin:0px;padding:0px;"><span style="margin:0px;padding:0px;color:rgb(255,0,0);"><span style="margin:0px;padding:0px;font-weight:700;">HTML5不支持使用</span></span>。</span></td> </tr> <tr style="background-color:rgb(255,255,255);margin:0px;padding:0px;"> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;"><span style="margin:0px;padding:0px;color:rgb(144,11,9);"><div></span></td> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;">-->√定义文档中的节</td> </tr> <tr style="background-color:rgb(239,239,239);margin:0px;padding:0px;"> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;"><span style="margin:0px;padding:0px;color:rgb(144,11,9);"><dl></span></td> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;">-->√定义列表详情</td> </tr> <tr style="background-color:rgb(255,255,255);margin:0px;padding:0px;"> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;"><span style="margin:0px;padding:0px;color:rgb(144,11,9);"><dt></span></td> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;">-->√定义列表中的项目</td> </tr> <tr style="background-color:rgb(239,239,239);margin:0px;padding:0px;"> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;"><span style="margin:0px;padding:0px;color:rgb(144,11,9);"><em></span></td> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;">-->√定义强调文本</td> </tr> <tr style="background-color:rgb(255,255,255);margin:0px;padding:0px;"> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;"><span style="margin:0px;padding:0px;color:rgb(144,11,9);"><embed></span><span class="new" style="margin:0px;padding:0px 1px;float:right;color:rgb(255,255,255);background-color:rgb(174,65,65);border:1px solid rgb(255,255,255);line-height:16px;">New</span></td> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;">-->√定义嵌入的内容，比如插件。<span style="margin:0px;padding:0px;color:rgb(255,0,0);"><span style="font-weight:700;">无关闭标签</span></span></td> </tr> <tr style="background-color:rgb(239,239,239);margin:0px;padding:0px;"> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;"><span style="margin:0px;padding:0px;color:rgb(144,11,9);"><fieldset></span></td> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;">-->√定义围绕表单中元素的<span style="margin:0px;padding:0px;color:rgb(255,0,0);"><span style="margin:0px;padding:0px;font-weight:700;">边框</span></span></td> </tr> <tr style="background-color:rgb(255,255,255);margin:0px;padding:0px;"> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;"><span style="margin:0px;padding:0px;color:rgb(144,11,9);"><figcaption></span><span class="new" style="margin:0px;padding:0px 1px;float:right;color:rgb(255,255,255);background-color:rgb(174,65,65);border:1px solid rgb(255,255,255);line-height:16px;">New</span></td> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;">定义<figure> 元素的标题</td> </tr> <tr style="background-color:rgb(239,239,239);margin:0px;padding:0px;"> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;"><span style="margin:0px;padding:0px;color:rgb(144,11,9);"><figure></span><span class="new" style="margin:0px;padding:0px 1px;float:right;color:rgb(255,255,255);background-color:rgb(174,65,65);border:1px solid rgb(255,255,255);line-height:16px;">New</span></td> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;">规定独立的流内容（图像、图表、照片、代码等等）。</td> </tr> <tr style="background-color:rgb(255,255,255);margin:0px;padding:0px;"> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;"><span style="margin:0px;padding:0px;color:rgb(144,11,9);"><font></span></td> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;">定义文字的字体、尺寸和颜色。<span style="margin:0px;padding:0px;"><span style="margin:0px;padding:0px;color:rgb(255,0,0);"><span style="margin:0px;padding:0px;font-weight:700;">HTML5不支持使用</span></span>。</span></td> </tr> <tr style="background-color:rgb(239,239,239);margin:0px;padding:0px;"> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;"><span style="margin:0px;padding:0px;color:rgb(144,11,9);"><footer></span><span class="new" style="margin:0px;padding:0px 1px;float:right;color:rgb(255,255,255);background-color:rgb(174,65,65);border:1px solid rgb(255,255,255);line-height:16px;">New</span></td> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;">定义 section 或 document 的页脚。</td> </tr> <tr style="background-color:rgb(255,255,255);margin:0px;padding:0px;"> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;"><span style="margin:0px;padding:0px;color:rgb(144,11,9);"><form></span></td> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;">-->√定义了HTML文档的表单</td> </tr> <tr style="background-color:rgb(239,239,239);margin:0px;padding:0px;"> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;"><span style="margin:0px;padding:0px;color:rgb(144,11,9);"><frame></span></td> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;">-->√定义框架集的窗口或框架</td> </tr> <tr style="background-color:rgb(255,255,255);margin:0px;padding:0px;"> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;"><span style="margin:0px;padding:0px;color:rgb(144,11,9);"><frameset></span></td> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;">-->√定义框架集</td> </tr> <tr style="background-color:rgb(239,239,239);margin:0px;padding:0px;"> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;"><span style="margin:0px;padding:0px;color:rgb(144,11,9);"><h1> to <h6></span></td> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;">-->√定义 HTML 标题</td> </tr> <tr style="background-color:rgb(255,255,255);margin:0px;padding:0px;"> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;"><span style="margin:0px;padding:0px;color:rgb(144,11,9);"><head></span></td> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;">-->√定义关于文档的信息</td> </tr> <tr style="background-color:rgb(239,239,239);margin:0px;padding:0px;"> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;"><span style="margin:0px;padding:0px;color:rgb(144,11,9);"><header></span><span class="new" style="margin:0px;padding:0px 1px;float:right;color:rgb(255,255,255);background-color:rgb(174,65,65);border:1px solid rgb(255,255,255);line-height:16px;">New</span></td> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;">定义了文档的头部区域</td> </tr> <tr style="background-color:rgb(255,255,255);margin:0px;padding:0px;"> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;"><span style="margin:0px;padding:0px;color:rgb(144,11,9);"><hr></span></td> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;">-->√定义水平线</td> </tr> <tr style="background-color:rgb(239,239,239);margin:0px;padding:0px;"> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;"><span style="margin:0px;padding:0px;color:rgb(144,11,9);"><html></span></td> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;">-->√定义 HTML 文档</td> </tr> <tr style="background-color:rgb(255,255,255);margin:0px;padding:0px;"> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;"><span style="margin:0px;padding:0px;color:rgb(144,11,9);"><i></span></td> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;">-->√定义斜体字</td> </tr> <tr style="background-color:rgb(239,239,239);margin:0px;padding:0px;"> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;"><span style="margin:0px;padding:0px;color:rgb(144,11,9);"><iframe></span></td> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;">-->√定义内联框架</td> </tr> <tr style="background-color:rgb(255,255,255);margin:0px;padding:0px;"> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;"><span style="margin:0px;padding:0px;color:rgb(144,11,9);"><img></span></td> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;">-->√定义图像</td> </tr> <tr style="background-color:rgb(239,239,239);margin:0px;padding:0px;"> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;"><span style="margin:0px;padding:0px;color:rgb(144,11,9);"><input></span></td> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;">-->√定义输入控件</td> </tr> <tr style="background-color:rgb(255,255,255);margin:0px;padding:0px;"> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;"><span style="margin:0px;padding:0px;color:rgb(144,11,9);"><ins></span></td> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;">-->√定义被<span style="margin:0px;padding:0px;color:rgb(255,0,0);">插入</span>文本 (下划线效果)</td> </tr> <tr style="background-color:rgb(239,239,239);margin:0px;padding:0px;"> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;"><span style="margin:0px;padding:0px;color:rgb(144,11,9);"><kbd></span></td> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;">-->√定义键盘文本</td> </tr> <tr style="background-color:rgb(255,255,255);margin:0px;padding:0px;"> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;"><span style="margin:0px;padding:0px;color:rgb(144,11,9);"><keygen></span><span class="new" style="margin:0px;padding:0px 1px;float:right;color:rgb(255,255,255);background-color:rgb(174,65,65);border:1px solid rgb(255,255,255);line-height:16px;">New</span></td> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;">规定用于表单的密钥对生成器字段。</td> </tr> <tr style="background-color:rgb(239,239,239);margin:0px;padding:0px;"> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;"><span style="margin:0px;padding:0px;color:rgb(144,11,9);"><label></span></td> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;">定义 input 元素的标注</td> </tr> <tr style="background-color:rgb(255,255,255);margin:0px;padding:0px;"> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;"><span style="margin:0px;padding:0px;color:rgb(144,11,9);"><legend></span></td> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;">-->√定义 fieldset 元素的<span style="margin:0px;padding:0px;color:rgb(255,0,0);"><span style="margin:0px;padding:0px;font-weight:700;">标题</span></span>。</td> </tr> <tr style="background-color:rgb(239,239,239);margin:0px;padding:0px;"> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;"><span style="margin:0px;padding:0px;color:rgb(144,11,9);"><li></span></td> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;">-->√定义列表的项目</td> </tr> <tr style="background-color:rgb(255,255,255);margin:0px;padding:0px;"> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;"><span style="margin:0px;padding:0px;color:rgb(144,11,9);"><link></span></td> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;">-->√定义文档与外部资源的关系</td> </tr> <tr style="background-color:rgb(239,239,239);margin:0px;padding:0px;"> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;"><span style="margin:0px;padding:0px;color:rgb(144,11,9);"><map></span></td> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;">-->√定义图像映射</td> </tr> <tr style="background-color:rgb(255,255,255);margin:0px;padding:0px;"> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;"><span style="margin:0px;padding:0px;color:rgb(144,11,9);"><mark></span><span class="new" style="margin:0px;padding:0px 1px;float:right;color:rgb(255,255,255);background-color:rgb(174,65,65);border:1px solid rgb(255,255,255);line-height:16px;">New</span></td> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;">定义带有记号的文本。请在需要突出显示文本时使用 <m> 标签。</td> </tr> <tr style="background-color:rgb(239,239,239);margin:0px;padding:0px;"> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;"><span style="margin:0px;padding:0px;color:rgb(144,11,9);"><menu></span></td> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;">定义菜单列表。<span style="margin:0px;padding:0px;"><span style="margin:0px;padding:0px;color:rgb(255,0,0);"><span style="margin:0px;padding:0px;font-weight:700;">HTML5不支持</span></span>使用。</span></td> </tr> <tr style="background-color:rgb(255,255,255);margin:0px;padding:0px;"> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;"><span style="margin:0px;padding:0px;color:rgb(144,11,9);"><meta></span></td> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;">-->√定义关于 HTML 文档的元信息。</td> </tr> <tr style="background-color:rgb(239,239,239);margin:0px;padding:0px;"> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;"><span style="margin:0px;padding:0px;color:rgb(144,11,9);"><meter></span><span class="new" style="margin:0px;padding:0px 1px;float:right;color:rgb(255,255,255);background-color:rgb(174,65,65);border:1px solid rgb(255,255,255);line-height:16px;">New</span></td> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;">定义度量衡。仅用于已知最大和最小值的度量。</td> </tr> <tr style="background-color:rgb(255,255,255);margin:0px;padding:0px;"> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;"><span style="margin:0px;padding:0px;color:rgb(144,11,9);"><nav></span><span class="new" style="margin:0px;padding:0px 1px;float:right;color:rgb(255,255,255);background-color:rgb(174,65,65);border:1px solid rgb(255,255,255);line-height:16px;">New</span></td> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;">定义导航链接的部分</td> </tr> <tr style="background-color:rgb(239,239,239);margin:0px;padding:0px;"> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;"><span style="margin:0px;padding:0px;color:rgb(144,11,9);"><noframes></span></td> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;">定义针对不支持框架的用户的替代内容。<span style="margin:0px;padding:0px;color:rgb(255,0,0);"><span style="margin:0px;padding:0px;font-weight:700;">HTML5不支持</span></span></td> </tr> <tr style="background-color:rgb(255,255,255);margin:0px;padding:0px;"> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;"><span style="margin:0px;padding:0px;color:rgb(144,11,9);"><noscript></span></td> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;">-->√定义针对不支持客户端脚本的用户的替代内容。</td> </tr> <tr style="background-color:rgb(239,239,239);margin:0px;padding:0px;"> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;"><span style="margin:0px;padding:0px;color:rgb(144,11,9);"><object></span></td> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;">-->√定义内嵌对象 源使用的是<span style="margin:0px;padding:0px;color:rgb(255,0,0);"><span style="font-weight:700;">data属性</span></span></td> </tr> <tr style="background-color:rgb(255,255,255);margin:0px;padding:0px;"> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;"><span style="margin:0px;padding:0px;color:rgb(144,11,9);"><ol></span></td> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;">-->√定义有序列表。</td> </tr> <tr style="background-color:rgb(239,239,239);margin:0px;padding:0px;"> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;"><span style="margin:0px;padding:0px;color:rgb(144,11,9);"><optgroup></span></td> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;">定义选择列表中相关选项的组合。</td> </tr> <tr style="background-color:rgb(255,255,255);margin:0px;padding:0px;"> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;"><span style="margin:0px;padding:0px;color:rgb(144,11,9);"><option></span></td> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;">-->√定义选择列表中的选项。</td> </tr> <tr style="background-color:rgb(239,239,239);margin:0px;padding:0px;"> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;"><span style="margin:0px;padding:0px;color:rgb(144,11,9);"><output></span><span class="new" style="margin:0px;padding:0px 1px;float:right;color:rgb(255,255,255);background-color:rgb(174,65,65);border:1px solid rgb(255,255,255);line-height:16px;">New</span></td> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;">定义不同类型的输出，比如脚本的输出。</td> </tr> <tr style="background-color:rgb(255,255,255);margin:0px;padding:0px;"> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;"><span style="margin:0px;padding:0px;color:rgb(144,11,9);"><p></span></td> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;">-->√定义段落。</td> </tr> <tr style="background-color:rgb(239,239,239);margin:0px;padding:0px;"> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;"><span style="margin:0px;padding:0px;color:rgb(144,11,9);"><param></span></td> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;">定义对象的参数。</td> </tr> <tr style="background-color:rgb(255,255,255);margin:0px;padding:0px;"> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;"><span style="margin:0px;padding:0px;color:rgb(144,11,9);"><pre></span></td> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;">-->√定义预格式文本。</td> </tr> <tr style="background-color:rgb(239,239,239);margin:0px;padding:0px;"> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;"><span style="margin:0px;padding:0px;color:rgb(144,11,9);"><progress></span><span class="new" style="margin:0px;padding:0px 1px;float:right;color:rgb(255,255,255);background-color:rgb(174,65,65);border:1px solid rgb(255,255,255);line-height:16px;">New</span></td> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;">定义运行中的进度（进程）。</td> </tr> <tr style="background-color:rgb(255,255,255);margin:0px;padding:0px;"> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;"><span style="margin:0px;padding:0px;color:rgb(144,11,9);"><q></span></td> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;">-->√定义短的<span style="margin:0px;padding:0px;color:rgb(255,0,0);"><span style="margin:0px;padding:0px;font-weight:700;">引用</span></span>。</td> </tr> <tr style="background-color:rgb(239,239,239);margin:0px;padding:0px;"> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;"><span style="margin:0px;padding:0px;color:rgb(144,11,9);"><rp></span><span class="new" style="margin:0px;padding:0px 1px;float:right;color:rgb(255,255,255);background-color:rgb(174,65,65);border:1px solid rgb(255,255,255);line-height:16px;">New</span></td> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;"><rp> 标签在 ruby 注释中使用，以定义不支持 ruby 元素的浏览器所显示的内容。</td> </tr> <tr style="background-color:rgb(255,255,255);margin:0px;padding:0px;"> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;"><span style="margin:0px;padding:0px;color:rgb(144,11,9);"><rt></span><span class="new" style="margin:0px;padding:0px 1px;float:right;color:rgb(255,255,255);background-color:rgb(174,65,65);border:1px solid rgb(255,255,255);line-height:16px;">New</span></td> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;"><rt> 标签定义字符（中文注音或字符）的解释或发音。</td> </tr> <tr style="background-color:rgb(239,239,239);margin:0px;padding:0px;"> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;"><span style="margin:0px;padding:0px;color:rgb(144,11,9);"><ruby></span><span class="new" style="margin:0px;padding:0px 1px;float:right;color:rgb(255,255,255);background-color:rgb(174,65,65);border:1px solid rgb(255,255,255);line-height:16px;">New</span></td> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;"><ruby> 标签定义 ruby 注释（中文注音或字符）。</td> </tr> <tr style="background-color:rgb(255,255,255);margin:0px;padding:0px;"> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;"><span style="margin:0px;padding:0px;color:rgb(144,11,9);"><s></span></td> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;"><span style="margin:0px;padding:0px;color:rgb(255,0,0);"><span style="margin:0px;padding:0px;font-weight:700;">不赞成使用</span></span>。定义加删除线的文本。</td> </tr> <tr style="background-color:rgb(239,239,239);margin:0px;padding:0px;"> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;"><span style="margin:0px;padding:0px;color:rgb(144,11,9);"><samp></span></td> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;">-->√定义计算机代码样本。</td> </tr> <tr style="background-color:rgb(255,255,255);margin:0px;padding:0px;"> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;"><span style="margin:0px;padding:0px;color:rgb(144,11,9);"><script></span></td> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;">-->√定义客户端脚本。</td> </tr> <tr style="background-color:rgb(239,239,239);margin:0px;padding:0px;"> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;"><span style="margin:0px;padding:0px;color:rgb(144,11,9);"><section></span><span class="new" style="margin:0px;padding:0px 1px;float:right;color:rgb(255,255,255);background-color:rgb(174,65,65);border:1px solid rgb(255,255,255);line-height:16px;">New</span></td> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;"><section> 标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。</td> </tr> <tr style="background-color:rgb(255,255,255);margin:0px;padding:0px;"> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;"><span style="margin:0px;padding:0px;color:rgb(144,11,9);"><select></span></td> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;">-->√定义选择列表（<span style="margin:0px;padding:0px;color:rgb(255,0,0);"><span style="margin:0px;padding:0px;font-weight:700;">下拉</span></span>列表）。</td> </tr> <tr style="background-color:rgb(239,239,239);margin:0px;padding:0px;"> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;"><span style="margin:0px;padding:0px;color:rgb(144,11,9);"><small></span></td> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;">-->√定义<span style="margin:0px;padding:0px;color:rgb(255,0,0);"><span style="margin:0px;padding:0px;font-weight:700;">小号文本</span></span>。</td> </tr> <tr style="background-color:rgb(255,255,255);margin:0px;padding:0px;"> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;"><span style="margin:0px;padding:0px;color:rgb(144,11,9);"><source></span><span class="new" style="margin:0px;padding:0px 1px;float:right;color:rgb(255,255,255);background-color:rgb(174,65,65);border:1px solid rgb(255,255,255);line-height:16px;">New</span></td> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;">-->√<source> 标签为媒介元素（比如 <video> 和 <audio>）定义媒介资源。</td> </tr> <tr style="background-color:rgb(239,239,239);margin:0px;padding:0px;"> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;"><span style="margin:0px;padding:0px;color:rgb(144,11,9);"><span></span></td> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;">定义文档中的节。</td> </tr> <tr style="background-color:rgb(255,255,255);margin:0px;padding:0px;"> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;"><span style="margin:0px;padding:0px;color:rgb(144,11,9);"><strike></span></td> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;"><span style="margin:0px;padding:0px;color:rgb(255,0,0);"><span style="margin:0px;padding:0px;font-weight:700;">HTML5不支持</span></span>，不赞成使用。定义加删除线文本。</td> </tr> <tr style="background-color:rgb(239,239,239);margin:0px;padding:0px;"> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;"><span style="margin:0px;padding:0px;color:rgb(144,11,9);"><strong></span></td> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;">-->√定义强调文本。</td> </tr> <tr style="background-color:rgb(255,255,255);margin:0px;padding:0px;"> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;"><span style="margin:0px;padding:0px;color:rgb(144,11,9);"><style></span></td> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;">-->√定义文档的样式信息。</td> </tr> <tr style="background-color:rgb(239,239,239);margin:0px;padding:0px;"> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;"><span style="margin:0px;padding:0px;color:rgb(144,11,9);"><sub></span></td> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;">-->√定义<span style="margin:0px;padding:0px;color:rgb(255,0,0);"><span style="margin:0px;padding:0px;font-weight:700;">下标</span></span>文本。</td> </tr> <tr style="background-color:rgb(255,255,255);margin:0px;padding:0px;"> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;"><span style="margin:0px;padding:0px;color:rgb(144,11,9);"><summary></span><span class="new" style="margin:0px;padding:0px 1px;float:right;color:rgb(255,255,255);background-color:rgb(174,65,65);border:1px solid rgb(255,255,255);line-height:16px;">New</span></td> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;"><summary> 标签包含 details 元素的标题，"details" 元素用于描述有关文档或文档片段的详细信息。</td> </tr> <tr style="background-color:rgb(239,239,239);margin:0px;padding:0px;"> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;"><span style="margin:0px;padding:0px;color:rgb(144,11,9);"><sup></span></td> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;">-->√定义<span style="margin:0px;padding:0px;color:rgb(255,0,0);"><span style="margin:0px;padding:0px;font-weight:700;">上标</span></span>文本。</td> </tr> <tr style="background-color:rgb(255,255,255);margin:0px;padding:0px;"> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;"><span style="margin:0px;padding:0px;color:rgb(144,11,9);"><table></span></td> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;">-->√定义表格。</td> </tr> <tr style="background-color:rgb(239,239,239);margin:0px;padding:0px;"> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;"><span style="margin:0px;padding:0px;color:rgb(144,11,9);"><tbody></span></td> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;">定义表格中的主体内容。</td> </tr> <tr style="background-color:rgb(255,255,255);margin:0px;padding:0px;"> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;"><span style="margin:0px;padding:0px;color:rgb(144,11,9);"><td></span></td> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;">-->√定义表格中的单元。</td> </tr> <tr style="background-color:rgb(239,239,239);margin:0px;padding:0px;"> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;"><span style="margin:0px;padding:0px;color:rgb(144,11,9);"><textarea></span></td> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;">-->√定义多行的文本输入控件。</td> </tr> <tr style="background-color:rgb(255,255,255);margin:0px;padding:0px;"> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;"><span style="margin:0px;padding:0px;color:rgb(144,11,9);"><tfoot></span></td> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;">定义表格中的表注内容（脚注）。</td> </tr> <tr style="background-color:rgb(239,239,239);margin:0px;padding:0px;"> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;"><span style="margin:0px;padding:0px;color:rgb(144,11,9);"><th></span></td> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;">-->√定义表格中的表头单元格。</td> </tr> <tr style="background-color:rgb(255,255,255);margin:0px;padding:0px;"> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;"><span style="margin:0px;padding:0px;color:rgb(144,11,9);"><thead></span></td> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;">定义表格中的表头内容。</td> </tr> <tr style="background-color:rgb(239,239,239);margin:0px;padding:0px;"> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;"><span style="margin:0px;padding:0px;color:rgb(144,11,9);"><time></span><span class="new" style="margin:0px;padding:0px 1px;float:right;color:rgb(255,255,255);background-color:rgb(174,65,65);border:1px solid rgb(255,255,255);line-height:16px;">New</span></td> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;">定义日期或时间，或者两者。</td> </tr> <tr style="background-color:rgb(255,255,255);margin:0px;padding:0px;"> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;"><span style="margin:0px;padding:0px;color:rgb(144,11,9);"><title></span></td> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;">-->√定义文档的标题。</td> </tr> <tr style="background-color:rgb(239,239,239);margin:0px;padding:0px;"> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;"><span style="margin:0px;padding:0px;color:rgb(144,11,9);"><tr></span></td> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;">-->√定义表格中的行。</td> </tr> <tr style="background-color:rgb(255,255,255);margin:0px;padding:0px;"> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;"><span style="margin:0px;padding:0px;color:rgb(144,11,9);"><track></span><span class="new" style="margin:0px;padding:0px 1px;float:right;color:rgb(255,255,255);background-color:rgb(174,65,65);border:1px solid rgb(255,255,255);line-height:16px;">New</span></td> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;"><track> 标签为诸如 video 元素之类的媒介规定外部文本轨道。</td> </tr> <tr style="background-color:rgb(239,239,239);margin:0px;padding:0px;"> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;"><span style="margin:0px;padding:0px;color:rgb(144,11,9);"><tt></span></td> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;">定义打字机文本。</td> </tr> <tr style="background-color:rgb(255,255,255);margin:0px;padding:0px;"> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;"><span style="margin:0px;padding:0px;color:rgb(144,11,9);"><u></span></td> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;"><span style="margin:0px;padding:0px;color:rgb(255,0,0);"><span style="margin:0px;padding:0px;font-weight:700;">不赞成使用</span></span>。定义下划线文本。</td> </tr> <tr style="background-color:rgb(239,239,239);margin:0px;padding:0px;"> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;"><span style="margin:0px;padding:0px;color:rgb(144,11,9);"><ul></span></td> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;">-->√定义无序列表。</td> </tr> <tr style="background-color:rgb(255,255,255);margin:0px;padding:0px;"> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;"><span style="margin:0px;padding:0px;color:rgb(144,11,9);"><var></span></td> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;">定义文本的变量部分。</td> </tr> <tr style="background-color:rgb(239,239,239);margin:0px;padding:0px;"> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;"><span style="margin:0px;padding:0px;color:rgb(144,11,9);"><video></span><span class="new" style="margin:0px;padding:0px 1px;float:right;color:rgb(255,255,255);background-color:rgb(174,65,65);border:1px solid rgb(255,255,255);line-height:16px;">New</span></td> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;">-->√<video> 标签定义视频，比如电影片段或其他视频流。</td> </tr> <tr style="background-color:rgb(255,255,255);margin:0px;padding:0px;"> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;"><span style="margin:0px;padding:0px;color:rgb(144,11,9);"><wbr></span><span class="new" style="margin:0px;padding:0px 1px;float:right;color:rgb(255,255,255);background-color:rgb(174,65,65);border:1px solid rgb(255,255,255);line-height:16px;">New</span></td> <td style="padding:7px 5px;margin:0px;min-width:40px;vertical-align:top;">规定在文本中的何处适合添加换行符。</td> </tr> </tbody> </table> </div> </div> </div> </div> <p style="background-color:rgb(255,255,255);"><span style="margin:0px;padding:0px;font-weight:700;color:rgb(255,0,0);font-family:Verdana, Arial, Helvetica, sans-serif;"><br></span></p> <p style="background-color:rgb(255,255,255);"><span style="margin:0px;padding:0px;font-weight:700;color:rgb(255,0,0);font-family:Verdana, Arial, Helvetica, sans-serif;">未完待续,下一章节,つづく</span><br></p> <p style="background-color:rgb(255,255,255);"><img src="http://img.e-com-net.com/image/info8/0cdc73dcdb83446c90c00b19d987364b.jpg" alt="" style="border:0px;" width="0" height="0"></p> <br> </div> </div> </div> </div> </div> <!--PC和WAP自适应版--> <div id="SOHUCS" sid="1304005547451781120"></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/H5)</h4> <div id="paradigm-article-related"> <div class="recommend-post mb30"> <ul class="widget-links"> <li><a href="/article/1950232820773351424.htm" title="移动端城市区县二级联动选择功能实现包" target="_blank">移动端城市区县二级联动选择功能实现包</a> <span class="text-muted">good2know</span> <div>本文还有配套的精品资源，点击获取简介：本项目是一套为移动端设计的jQuery实现方案，用于简化用户在选择城市和区县时的流程。它包括所有必需文件：HTML、JavaScript、CSS及图片资源。通过动态更新下拉菜单选项，实现城市到区县的联动效果，支持数据异步加载。开发者可以轻松集成此功能到移动网站或应用，并可基于需求进行扩展和优化。1.jQuery移动端解决方案概述jQuery技术简介jQuery</div> </li> <li><a href="/article/1950225381961297920.htm" title="SpringMVC的执行流程" target="_blank">SpringMVC的执行流程</a> <span class="text-muted"></span> <div>1、什么是MVCMVC是一种设计模式。MVC的原理图如下所示M-Model模型（完成业务逻辑：有javaBean构成，service+dao+entity）V-View视图（做界面的展示jsp，html……）C-Controller控制器（接收请求—>调用模型—>根据结果派发页面2、SpringMVC是什么SpringMVC是一个MVC的开源框架，SpringMVC=Struts2+Spring，</div> </li> <li><a href="/article/1950221589622616064.htm" title="EasyPlayer播放器系列开发计划2025" target="_blank">EasyPlayer播放器系列开发计划2025</a> <span class="text-muted">xiejiashu</span> <a class="tag" taget="_blank" href="/search/EasyPlayer/1.htm">EasyPlayer</a><a class="tag" taget="_blank" href="/search/EasyPlayer/1.htm">EasyPlayer</a><a class="tag" taget="_blank" href="/search/EasyPlayer%E6%92%AD%E6%94%BE%E5%99%A8/1.htm">EasyPlayer播放器</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/js%E6%92%AD%E6%94%BE%E5%99%A8/1.htm">js播放器</a><a class="tag" taget="_blank" href="/search/Web%E6%92%AD%E6%94%BE%E5%99%A8/1.htm">Web播放器</a> <div>EasyPlayer系列产品发展至今，已经超过10年，从最早的EasyPlayerRTSP播放器，到如今维护的3条线：EasyPlayer-RTSP播放器：Windows、Android、iOS；EasyPlayerPro播放器：Windows、Android、iOS；EasyPlayer.js播放器：H5；这3个播放器各有各的应用场景，用户量也是巨大，像RTSP版本的播放器，到今天依然还有很多低</div> </li> <li><a href="/article/1950208989954371584.htm" title="Selenium 特殊控件操作与 ActionChains 实践详解" target="_blank">Selenium 特殊控件操作与 ActionChains 实践详解</a> <span class="text-muted">小馋喵知识杂货铺</span> <a class="tag" taget="_blank" href="/search/selenium/1.htm">selenium</a><a class="tag" taget="_blank" href="/search/%E6%B5%8B%E8%AF%95%E5%B7%A5%E5%85%B7/1.htm">测试工具</a> <div>1.下拉框单选操作(a)使用SeleniumSelect类（标准HTML标签）Selenium提供了内置的Select类用于操作标准下拉框，这种方式简单且直观。fromselenium.webdriver.support.uiimportSelect#定位下拉框dropdown=Select(driver.find_element("id","dropdown_id"))#通过以下三种方式选择单个</div> </li> <li><a href="/article/1950207097413103616.htm" title="微信公众号回调java_处理微信公众号消息回调" target="_blank">微信公众号回调java_处理微信公众号消息回调</a> <span class="text-muted">weixin_39607620</span> <a class="tag" taget="_blank" href="/search/%E5%BE%AE%E4%BF%A1%E5%85%AC%E4%BC%97%E5%8F%B7%E5%9B%9E%E8%B0%83java/1.htm">微信公众号回调java</a> <div>1、背景在上一节中，咱们知道如何接入微信公众号，可是以后公众号会与咱们进行交互，那么微信公众号如何通知到咱们本身的服务器呢？咱们知道咱们接入的时候提供的url是GET/mp/entry，那么公众号以后产生的事件将会以POST/mp/entry发送到咱们本身的服务器上。html2、代码实现，此处仍是使用weixin-java-mp这个框架实现一、引入weixin-java-mpcom.github.</div> </li> <li><a href="/article/1950201094361640960.htm" title="人工智能应用研究快讯 2021-11-30" target="_blank">人工智能应用研究快讯 2021-11-30</a> <span class="text-muted">峰谷皆平</span> <div>[HTML]ArtificialIntelligenceforSkinCancerDetection:ScopingReviewATakiddin,JSchneider,YYang,AAbd-Alrazaq...JournalofMedicalInternet...,2021ABSTACT:Background:Skincanceristhemostcommoncancertypeaffectin</div> </li> <li><a href="/article/1950195876991397888.htm" title="【Jupyter】个人开发常见命令" target="_blank">【Jupyter】个人开发常见命令</a> <span class="text-muted">TIM老师</span> <a class="tag" taget="_blank" href="/search/%23/1.htm">#</a><a class="tag" taget="_blank" href="/search/Pycharm/1.htm">Pycharm</a><a class="tag" taget="_blank" href="/search/%26amp%3B/1.htm">&amp;</a><a class="tag" taget="_blank" href="/search/VSCode/1.htm">VSCode</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/Jupyter/1.htm">Jupyter</a> <div>1.查看python版本importsysprint(sys.version)2.ipynb/py文件转换jupyternbconvert--topythonmy_file.ipynbipynb转换为mdjupyternbconvert--tomdmy_file.ipynbipynb转为htmljupyternbconvert--tohtmlmy_file.ipynbipython转换为pdfju</div> </li> <li><a href="/article/1950194742100815872.htm" title="用代码生成艺术字：设计个性化海报的秘密" target="_blank">用代码生成艺术字：设计个性化海报的秘密</a> <span class="text-muted"></span> <div>本文围绕“用代码生成艺术字：设计个性化海报的秘密”展开，先概述代码生成艺术字在海报设计中的独特价值，接着介绍常用的代码工具（如HTML、CSS、JavaScript等），详细阐述从构思到实现的完整流程，包括字体样式设计、动态效果添加等，还分享了提升艺术字质感的技巧及实际案例。最后总结代码生成艺术字的优势，为设计师提供打造个性化海报的实用指南，助力提升海报设计的独特性与吸引力，符合搜索引擎SEO标准</div> </li> <li><a href="/article/1950191165710069760.htm" title="前端面试每日 3+1 —— 第39天" target="_blank">前端面试每日 3+1 —— 第39天</a> <span class="text-muted">浪子神剑</span> <div>今天的面试题(2019.05.25)——第39天[html]title与h1、b与strong、i与em的区别分别是什么？[css]写出你知道的CSS水平和垂直居中的方法[js]说说你对模块化的理解[软技能]公钥加密和私钥加密是什么？《论语》，曾子曰：“吾日三省吾身”（我每天多次反省自己）。前端面试每日3+1题，以面试题来驱动学习，每天进步一点！让努力成为一种习惯，让奋斗成为一种享受！欢迎在Iss</div> </li> <li><a href="/article/1950187223672483840.htm" title="GDP经济社会人文民生栅格数据下载网站汇总" target="_blank">GDP经济社会人文民生栅格数据下载网站汇总</a> <span class="text-muted">疯狂学习GIS</span> <div>  本文为“GIS数据获取整理”专栏（https://blog.csdn.net/zhebushibiaoshifu/category_10857546.html）中第八篇独立博客，因此本文全部标题均由“8”开头。本文对目前主要的GDP、社会与经济数据获取网站加以整理与介绍，若需其它GIS领域数据（如遥感影像数据、气象数据、土地土壤数据、农业数据等），大家可以点击上方专栏查看，也可以看这一篇汇总文</div> </li> <li><a href="/article/1950180497007112192.htm" title="【MySQL】MySQL数据库如何改名" target="_blank">【MySQL】MySQL数据库如何改名</a> <span class="text-muted">武昌库里写JAVA</span> <a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95%E9%A2%98%E6%B1%87%E6%80%BB%E4%B8%8E%E8%A7%A3%E6%9E%90/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><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</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/%E5%AD%A6%E4%B9%A0/1.htm">学习</a> <div>MySQL建库授权语句https://www.jianshu.com/p/2237a9649ceeMySQL数据库改名的三种方法https://www.cnblogs.com/gomysql/p/3584881.htmlMySQL安全修改数据库名几种方法https://blog.csdn.net/haiross/article/details/51282417MySQL重命名数据库https://</div> </li> <li><a href="/article/1950130722157162496.htm" title="移动端适配rem方案" target="_blank">移动端适配rem方案</a> <span class="text-muted">简单的码农</span> <div>1.rem+动态html的font-size1.rem单位是相对于html元素的font-size来设置的，那么如果我们需要在不同的屏幕下有不同的尺寸，可以动态的修改html的font-size尺寸。2.比如如下案例：设置一个盒子的宽度是2rem；设置不同的屏幕上html的font-size不同；image这样在开发中，我们只需要考虑两个问题：问题一：针对不同的屏幕，设置html不同的font-s</div> </li> <li><a href="/article/1950130692448907264.htm" title="Vue CSR 到 Nuxt 3 SSR 迁移：技术实现与问题解决实录" target="_blank">Vue CSR 到 Nuxt 3 SSR 迁移：技术实现与问题解决实录</a> <span class="text-muted">二倍速播放</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a> <div>1.迁移动机与技术选型1.1CSR架构的局限性基于Vue3和Vite构建的客户端渲染(CSR)单页应用(SPA)提供了良好的开发体验和用户交互流畅性。但是其核心局限在于：搜索引擎优化(SEO)：初始HTML响应仅包含一个根div元素，实际内容由JavaScript在浏览器端动态生成。虽然主流搜索引擎（如Google）能够执行部分JavaScript，但其抓取效率和稳定性不如直接获取完整HTML。非</div> </li> <li><a href="/article/1950127794931429376.htm" title="redis反弹shell时kali无法接收回弹的解决方法" target="_blank">redis反弹shell时kali无法接收回弹的解决方法</a> <span class="text-muted">显哥无敌</span> <a class="tag" taget="_blank" href="/search/shell/1.htm">shell</a><a class="tag" taget="_blank" href="/search/redis/1.htm">redis</a> <div>无法接受回谈大概率是bash命令写的不对，那个crontab中间的星号个数是有意义的，不是随便加的，下面贴一下crontab的基本用法https://www.cnblogs.com/zhoading/p/11572630.html{minute}{hour}{day-of-month}{month}{day-of-week}{full-path-to-shell-script}如果是要cronta</div> </li> <li><a href="/article/1950121289456873472.htm" title="native.js设置可缩放的webview并隐藏缩放控件" target="_blank">native.js设置可缩放的webview并隐藏缩放控件</a> <span class="text-muted">Nanayai</span> <div>需求明确:webview页面可以手指缩放,并且不要那个原生控件;实现思路:1.使用h5+封装好的方法:设置scalable属性,并在html中设置meta标签:user-scalable=yes或不设置,minimum-scale和maximum-scale需要注意不要都设为1:mui.openWindow({url:"someThing",id:"someThing",styles:{scala</div> </li> <li><a href="/article/1950117078799282176.htm" title="Redis反弹Shell" target="_blank">Redis反弹Shell</a> <span class="text-muted">波吉爱睡觉</span> <a class="tag" taget="_blank" href="/search/web%E5%AE%89%E5%85%A8/1.htm">web安全</a><a class="tag" taget="_blank" href="/search/%23%E6%9C%AA%E6%8E%88%E6%9D%83%E8%AE%BF%E9%97%AE%E6%BC%8F%E6%B4%9E/1.htm">#未授权访问漏洞</a><a class="tag" taget="_blank" href="/search/%23SSRF/1.htm">#SSRF</a><a class="tag" taget="_blank" href="/search/redis/1.htm">redis</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C%E5%AE%89%E5%85%A8/1.htm">网络安全</a><a class="tag" taget="_blank" href="/search/web%E5%AE%89%E5%85%A8/1.htm">web安全</a> <div>这里我来总结几种Redis反弹Shell的方法一、利用Redis写WebShell前提条件开了web服务器，并且知道路径，还需要有文件读写增删改查的权限条件比较苛刻，但是满足条件上传就会简单一点，我们直接将文件写入www目录下，完了使用工具连接即可。语句：redis:6379>configsetdir/var/www/html/redis:6379>configsetdbfilenameshell</div> </li> <li><a href="/article/1950112039502409728.htm" title="H5UI微信小程序前端框架实战指南" target="_blank">H5UI微信小程序前端框架实战指南</a> <span class="text-muted">ai</span> <div>本文还有配套的精品资源，点击获取简介：H5UI是一个为微信小程序开发设计的前端框架，基于H5技术，提供简洁高效的组件库。框架集成了丰富的UI元素，如按钮、表格、导航栏等，简化了界面布局和交互的实现。通过安装、引入、使用组件和事件绑定四个步骤，开发者可以轻松构建功能齐全的应用。了解性能优化等注意事项对于高效开发同样重要。1.微信小程序前端开发框架介绍微信小程序概述微信小程序是微信官方推出的一种无需下</div> </li> <li><a href="/article/1950108839089074176.htm" title="Windows下Oracle安装图解" target="_blank">Windows下Oracle安装图解</a> <span class="text-muted">叫我老村长</span> <div>Windows下Oracle安装图解----oracle-win-64-11g详细安装步骤一、Oracle下载官方下地址http://www.oracle.com/technetwork/database/enterprise-edition/downloads/index.htmlwin32位操作系统下载地址：http://download.oracle.com/otn/nt/oracle11g</div> </li> <li><a href="/article/1950104727928762368.htm" title="震惊！DOM变化监控神器MutationObserver，前端开发必知的隐藏武器！" target="_blank">震惊！DOM变化监控神器MutationObserver，前端开发必知的隐藏武器！</a> <span class="text-muted">coding随想</span> <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/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a> <div>一、什么是MutationObserver？如果你是一个前端开发者，一定会遇到这样的场景：页面动态加载内容后，某些操作失效了。比如，你写了一个监听按钮点击的代码，但按钮是通过AJAX动态加载的，你的代码根本无法触发。这个时候，你就需要一个“监控哨兵”——MutationObserver，它能实时监听DOM树的变化，帮你捕获那些“暗中作祟”的节点变动。MutationObserver是HTML5引入</div> </li> <li><a href="/article/1950100184717389824.htm" title="11. HTML 中 DOCTYPE 的作用" target="_blank">11. HTML 中 DOCTYPE 的作用</a> <span class="text-muted">yqcoder</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95-CSS/1.htm">前端面试-CSS</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>总结H5的声明HTML5的DOCTYPE声明HTML5中的声明用于告诉浏览器当前文档使用的是HTML5的文档类型。它必须是文档中的第一行内容（在任何HTML标签之前），以确保浏览器能够正确地解析和渲染页面。DOCTYPE的作用触发标准模式：DOCTYPE声明的主要作用是让浏览器以标准模式（StandardsMode）来解析和渲染页面，而不是以兼容模式（QuirksMode）。兼容性：在没有DOCT</div> </li> <li><a href="/article/1950100058422702080.htm" title="从0到1学PHP（一）：PHP 基础入门：开启后端开发之旅" target="_blank">从0到1学PHP（一）：PHP 基础入门：开启后端开发之旅</a> <span class="text-muted"></span> <div>目录一、PHP简介与发展历程1.1PHP定义与特点1.2在后端开发中的地位1.3发展阶段及重要版本更新二、PHP开发环境搭建2.1Windows系统下搭建步骤2.2Mac系统下搭建方法及常用工具2.3适合初学者的集成开发环境三、第一个PHP程序3.1编写"HelloWorld"程序3.2程序基本结构和执行过程3.3PHP代码的嵌入方式（在HTML中）一、PHP简介与发展历程1.1PHP定义与特点P</div> </li> <li><a href="/article/1950076871731376128.htm" title="C# 单问号 ? 与 双问号 ??" target="_blank">C# 单问号 ? 与 双问号 ??</a> <span class="text-muted">三分明月墨</span> <a class="tag" taget="_blank" href="/search/C%23/1.htm">C#</a> <div>https://www.runoob.com/csharp/csharp-nullable.html</div> </li> <li><a href="/article/1950005884310581248.htm" title="JSP编程从入门到精通：现代Web开发与AI集成实战指南" target="_blank">JSP编程从入门到精通：现代Web开发与AI集成实战指南</a> <span class="text-muted">AI编程员</span> <a class="tag" taget="_blank" href="/search/001AI%E4%BC%A0%E7%BB%9F%EF%BC%86%E7%BC%96%E7%A8%8B%E8%AF%AD%E8%A8%80/1.htm">001AI传统＆编程语言</a><a class="tag" taget="_blank" href="/search/002AI%E7%BC%96%E7%A8%8B%E5%B7%A5%E5%85%B7%E6%B1%87%E6%80%BB/1.htm">002AI编程工具汇总</a><a class="tag" taget="_blank" href="/search/003AI%E7%BC%96%E7%A8%8B%E4%BD%9C%E5%93%81%E6%B1%87%E6%80%BB/1.htm">003AI编程作品汇总</a><a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a><a class="tag" taget="_blank" href="/search/AI%E7%BC%96%E7%A8%8B/1.htm">AI编程</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/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><a class="tag" taget="_blank" href="/search/%E6%B7%B1%E5%BA%A6%E5%AD%A6%E4%B9%A0/1.htm">深度学习</a> <div>JSP编程从入门到精通：现代Web开发与AI集成实战指南一、JSP基础与环境搭建1.1JSP核心概念与工作原理JSP（JavaServerPages）是一种动态网页开发技术，通过在HTML中嵌入Java代码实现服务器端逻辑。其本质是Servlet的扩展，当客户端首次请求JSP页面时，服务器会将其编译为Servlet类（如index_jsp.java），再执行该类的_jspService()方法生成</div> </li> <li><a href="/article/1949991125741793280.htm" title="《博客园精华集》web标准分册第2论筛选结果文章列表" target="_blank">《博客园精华集》web标准分册第2论筛选结果文章列表</a> <span class="text-muted"></span> <div>《博客园精华集》web标准部分筛选结果（共55篇）一个喜欢网页设计的程序员作者：Awen根本不存在DIV+CSS布局这回事作者：CatChen欲练CSS，必先宫IE作者：CatChen你有强迫症吗？作者：CatChenSPAN元素和DIV元素的区别作者：ChrisLiudiv的认识作者：ChrisLiu实时检验您的页面是否符合XHTML标准——使用ValidatorModule作者：Dflying</div> </li> <li><a href="/article/1949966916076498944.htm" title="vue 使用 iFrame 嵌套带有登录的网站 登录成功 无法跳转" target="_blank">vue 使用 iFrame 嵌套带有登录的网站 登录成功 无法跳转</a> <span class="text-muted">WHY<=小氣鬼=></span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>这个问题有点好玩，当时做的时候没想起来，哎不说讲一下问题1.项目在使用iFrame标签嵌套其他，网址或者自己的网址的时候如果没有登录只是浏览是没有问题的2.如个你使用Frame标签嵌套的网址是带有登录的需要注意两个网站是不是在统一域名下面如果在就可以正常登录，如果不在的话会出现登录成功但是无法跳转的问题3.在Vue项目中使用iFrame嵌套本地.html文件，本地.html文件向父页面抛出的方法或</div> </li> <li><a href="/article/1949950148306071552.htm" title="响应式电子邮件设计指南：MJML实践教程" target="_blank">响应式电子邮件设计指南：MJML实践教程</a> <span class="text-muted"></span> <div>本文还有配套的精品资源，点击获取简介：响应式设计在电子邮件领域至关重要，确保邮件内容在各种设备上均能良好显示。MJML（MailjetMarkupLanguage）是一个专门用于创建响应式电子邮件模板的开源标记语言。本示例详细介绍了如何使用MJML来设计自适应的邮件模板，涵盖安装工具、使用预定义组件、编译HTML代码等关键步骤。通过实际操作MJML的预定义组件如mj-head、mj-body、mj</div> </li> <li><a href="/article/1949949895343403008.htm" title="android开发------编写用户界面之相对布局" target="_blank">android开发------编写用户界面之相对布局</a> <span class="text-muted">cc-Cocos2D-X</span> <a class="tag" taget="_blank" href="/search/Android%E5%9F%BA%E7%A1%80/1.htm">Android基础</a> <div>元素之间总是相对于它们的同级元素或父元素进行排列布局。http://www.cnblogs.com/ai-developers/p/android_relativelayout.html</div> </li> <li><a href="/article/1949940049067962368.htm" title="对接支付宝 java sdk 文档" target="_blank">对接支付宝 java sdk 文档</a> <span class="text-muted">java叶新东老师</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a> <div>AlipayH5Servicepackagecom;importcom.alibaba.fastjson.JSON;importcom.alipay.api.AlipayApiException;importcom.alipay.api.AlipayClient;importcom.alipay.api.AlipayConfig;importcom.alipay.api.DefaultAlipay</div> </li> <li><a href="/article/1949900466318012416.htm" title="初始化 K8s 主节点时 报错failed to pull image registry.aliyuncs.com/google_containers/kube-apiserver:v1.23.17" target="_blank">初始化 K8s 主节点时 报错failed to pull image registry.aliyuncs.com/google_containers/kube-apiserver:v1.23.17</a> <span class="text-muted">Ashmcracker</span> <a class="tag" taget="_blank" href="/search/kubernetes/1.htm">kubernetes</a><a class="tag" taget="_blank" href="/search/%E5%AE%B9%E5%99%A8/1.htm">容器</a><a class="tag" taget="_blank" href="/search/%E4%BA%91%E5%8E%9F%E7%94%9F/1.htm">云原生</a> <div>运行r如下命令初始化kubernetes的master节点2025年3月12日更新：阿里云的镜像仓库目前只给它自己云上的服务器使用了，建议更换华为云的镜像加速器https://support.huaweicloud.com/usermanual-swr/swr_01_0045.htmlkubeadminit\--kubernetes-version=v1.23.17\--image-reposit</div> </li> <li><a href="/article/1949899078280212480.htm" title="十年爬虫经验告诉你爬虫被封怎么办" target="_blank">十年爬虫经验告诉你爬虫被封怎么办</a> <span class="text-muted">congqian8750</span> <a class="tag" taget="_blank" href="/search/%E7%88%AC%E8%99%AB/1.htm">爬虫</a> <div>十年爬虫经验告诉你爬虫被封怎么办现在很多站长都会有抓取数据的需求，因此网络爬虫在一定程度上越来越火爆，其实爬虫的基本功能很简单，就是分析大量的url的html页面，从而提取新的url，但是在实际操作中通常都会遇到各种各样的问题，比如说抓取数据的过程中需要根据实际需求来筛选url继续爬行；或者说为了能正常爬取，减少别人服务器的压力，你需要控制住爬取的速度和工作量···但是即便再小心，很多时候也会遇到</div> </li> <li><a href="/article/108.htm" title="Nginx负载均衡" target="_blank">Nginx负载均衡</a> <span class="text-muted">510888780</span> <a class="tag" taget="_blank" href="/search/nginx/1.htm">nginx</a><a class="tag" taget="_blank" href="/search/%E5%BA%94%E7%94%A8%E6%9C%8D%E5%8A%A1%E5%99%A8/1.htm">应用服务器</a> <div>Nginx负载均衡一些基础知识: nginx 的 upstream目前支持 4 种方式的分配 1)、轮询（默认） &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 每个请求按时间顺序逐一分配到不同的后端服务器，如果后端服务器down掉，能自动剔除。 2)、weight &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 指定轮询几率，weight和访问比率成正比</div> </li> <li><a href="/article/235.htm" title="RedHat 6.4 安装 rabbitmq" target="_blank">RedHat 6.4 安装 rabbitmq</a> <span class="text-muted">bylijinnan</span> <a class="tag" taget="_blank" href="/search/erlang/1.htm">erlang</a><a class="tag" taget="_blank" href="/search/rabbitmq/1.htm">rabbitmq</a><a class="tag" taget="_blank" href="/search/redhat/1.htm">redhat</a> <div>在 linux 下安装软件就是折腾，首先是测试机不能上外网要找运维开通，开通后发现测试机的 yum 不能使用于是又要配置 yum 源，最后安装 rabbitmq 时也尝试了两种方法最后才安装成功 机器版本： [root@redhat1 rabbitmq]# lsb_release LSB Version: :base-4.0-amd64:base-4.0-noarch:core</div> </li> <li><a href="/article/362.htm" title="FilenameUtils工具类" target="_blank">FilenameUtils工具类</a> <span class="text-muted">eksliang</span> <a class="tag" taget="_blank" href="/search/FilenameUtils/1.htm">FilenameUtils</a><a class="tag" taget="_blank" href="/search/common-io/1.htm">common-io</a> <div>转载请出自出处：http://eksliang.iteye.com/blog/2217081 一、概述 这是一个Java操作文件的常用库，是Apache对java的IO包的封装，这里面有两个非常核心的类FilenameUtils跟FileUtils，其中FilenameUtils是对文件名操作的封装;FileUtils是文件封装，开发中对文件的操作，几乎都可以在这个框架里面找到。 非常的好用。 </div> </li> <li><a href="/article/489.htm" title="xml文件解析SAX" target="_blank">xml文件解析SAX</a> <span class="text-muted">不懂事的小屁孩</span> <a class="tag" taget="_blank" href="/search/xml/1.htm">xml</a> <div>xml文件解析:xml文件解析有四种方式， 1.DOM生成和解析XML文档(SAX是基于事件流的解析) 2.SAX生成和解析XML文档(基于XML文档树结构的解析) 3.DOM4J生成和解析XML文档 4.JDOM生成和解析XML 本文章用第一种方法进行解析，使用android常用的DefaultHandler import org.xml.sax.Attributes; </div> </li> <li><a href="/article/616.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>使用python脚本作为命令脚本，linux的定时任务来每天定时执行 #!/usr/bin/python # -*- coding: utf8 -*- import pymysql import datetime import calendar #要分区的表 table_name = 'my_table' #连接数据库的信息 host,user,passwd,db = </div> </li> <li><a href="/article/743.htm" title="如何搭建数据湖架构？听听专家的意见" target="_blank">如何搭建数据湖架构？听听专家的意见</a> <span class="text-muted">蓝儿唯美</span> <a class="tag" taget="_blank" href="/search/%E6%9E%B6%E6%9E%84/1.htm">架构</a> <div>Edo Interactive在几年前遇到一个大问题：公司使用交易数据来帮助零售商和餐馆进行个性化促销，但其数据仓库没有足够时间去处理所有的信用卡和借记卡交易数据 &nbsp;“我们要花费27小时来处理每日的数据量，”Edo主管基础设施和信息系统的高级副总裁Tim Garnto说道：“所以在2013年，我们放弃了现有的基于PostgreSQL的关系型数据库系统，使用了Hadoop集群作为公司的数</div> </li> <li><a href="/article/870.htm" title="spring学习——控制反转与依赖注入" target="_blank">spring学习——控制反转与依赖注入</a> <span class="text-muted">a-john</span> <a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a> <div>&nbsp; &nbsp; &nbsp; &nbsp;控制反转（Inversion of Control，英文缩写为IoC）是一个重要的面向对象编程的法则来削减计算机程序的耦合问题，也是轻量级的Spring框架的核心。 控制反转一般分为两种类型，依赖注入（Dependency Injection，简称DI）和依赖查找（Dependency Lookup）。依赖注入应用比较广泛。 &nbsp; </div> </li> <li><a href="/article/997.htm" title="用spool+unixshell生成文本文件的方法" target="_blank">用spool+unixshell生成文本文件的方法</a> <span class="text-muted">aijuans</span> <a class="tag" taget="_blank" href="/search/xshell/1.htm">xshell</a> <div>例如我们把scott.dept表生成文本文件的语句写成dept.sql,内容如下: 　　set pages 50000; 　　set lines 200; 　　set trims on; 　　set heading off; 　　spool /oracle_backup/log/test/dept.lst; 　　select deptno||','||dname||','||loc </div> </li> <li><a href="/article/1124.htm" title="1、基础--名词解析(OOA/OOD/OOP)" target="_blank">1、基础--名词解析(OOA/OOD/OOP)</a> <span class="text-muted">asia007</span> <a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0%E5%9F%BA%E7%A1%80%E7%9F%A5%E8%AF%86/1.htm">学习基础知识</a> <div>OOA:Object-Oriented Analysis（面向对象分析方法） 是在一个系统的开发过程中进行了系统业务调查以后，按照面向对象的思想来分析问题。OOA与结构化分析有较大的区别。OOA所强调的是在系统调查资料的基础上，针对OO方法所需要的素材进行的归类分析和整理，而不是对管理业务现状和方法的分析。 　　OOA（面向对象的分析）模型由5个层次（主题层、对象类层、结构层、属性层和服务层）</div> </li> <li><a href="/article/1251.htm" title="浅谈java转成json编码格式技术" target="_blank">浅谈java转成json编码格式技术</a> <span class="text-muted">百合不是茶</span> <a class="tag" taget="_blank" href="/search/json%E7%BC%96%E7%A0%81/1.htm">json编码</a><a class="tag" taget="_blank" href="/search/java%E8%BD%AC%E6%88%90json%E7%BC%96%E7%A0%81/1.htm">java转成json编码</a> <div>json编码;是一个轻量级的数据存储和传输的语言 &nbsp;&nbsp; &nbsp; &nbsp;在java中需要引入json相关的包,引包方式在工程的lib下就可以了 &nbsp; JSON与JAVA数据的转换（JSON 即 JavaScript Object Natation，它是一种轻量级的数据交换格式，非 &nbsp; 常适合于服务器与 JavaScript 之间的数据的交</div> </li> <li><a href="/article/1378.htm" title="web.xml之Spring配置(基于Spring+Struts+Ibatis)" target="_blank">web.xml之Spring配置(基于Spring+Struts+Ibatis)</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/web.xml/1.htm">web.xml</a><a class="tag" taget="_blank" href="/search/SSI/1.htm">SSI</a><a class="tag" taget="_blank" href="/search/spring%E9%85%8D%E7%BD%AE/1.htm">spring配置</a> <div>指定Spring配置文件位置 &lt;context-param&gt; &lt;param-name&gt;contextConfigLocation&lt;/param-name&gt; &lt;param-value&gt; /WEB-INF/spring-dao-bean.xml,/WEB-INF/spring-resources.xml, /WEB-INF/</div> </li> <li><a href="/article/1505.htm" title="Installing SonarQube（Fail to download libraries from server）" target="_blank">Installing SonarQube（Fail to download libraries from server）</a> <span class="text-muted">sunjing</span> <a class="tag" taget="_blank" href="/search/Install/1.htm">Install</a><a class="tag" taget="_blank" href="/search/Sonar/1.htm">Sonar</a> <div>1.&nbsp; Download and unzip the SonarQube distribution 2. &nbsp;Starting the Web Server The default port is &quot;9000&quot; and the context path is &quot;/&quot;. These values can be changed in &l</div> </li> <li><a href="/article/1632.htm" title="【MongoDB学习笔记十一】Mongo副本集基本的增删查" target="_blank">【MongoDB学习笔记十一】Mongo副本集基本的增删查</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/mongodb/1.htm">mongodb</a> <div>一、创建复本集 &nbsp; 假设mongod,mongo已经配置在系统路径变量上，启动三个命令行窗口，分别执行如下命令： &nbsp; mongod --port 27017 --dbpath data1 --replSet rs0 mongod --port 27018 --dbpath data2 --replSet rs0 mongod --port 27019 -</div> </li> <li><a href="/article/1759.htm" title="Anychart图表系列二之执行Flash和HTML5渲染" target="_blank">Anychart图表系列二之执行Flash和HTML5渲染</a> <span class="text-muted">白糖_</span> <a class="tag" taget="_blank" href="/search/Flash/1.htm">Flash</a> <div>今天介绍Anychart的Flash和HTML5渲染功能 &nbsp; HTML5 Anychart从6.0第一个版本起，已经逐渐开始支持各种图的HTML5渲染效果了，也就是说即使你没有安装Flash插件，只要浏览器支持HTML5，也能看到Anychart的图形（不过这些是需要做一些配置的）。 这里要提醒下大家，Anychart6.0版本对HTML5的支持还不算很成熟，目前还处于</div> </li> <li><a href="/article/1886.htm" title="Laravel版本更新异常4.2.8-> 4.2.9 Declaration of ... CompilerEngine ... should be compa" target="_blank">Laravel版本更新异常4.2.8-> 4.2.9 Declaration of ... CompilerEngine ... should be compa</a> <span class="text-muted">bozch</span> <a class="tag" taget="_blank" href="/search/laravel/1.htm">laravel</a> <div>昨天在为了把laravel升级到最新的版本，突然之间就出现了如下错误： ErrorException thrown with message &quot;Declaration of Illuminate\View\Engines\CompilerEngine::handleViewException() should be compatible with Illuminate\View\Eng</div> </li> <li><a href="/article/2013.htm" title="编程之美-NIM游戏分析-石头总数为奇数时如何保证先动手者必胜" target="_blank">编程之美-NIM游戏分析-石头总数为奇数时如何保证先动手者必胜</a> <span class="text-muted">bylijinnan</span> <a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A8%8B%E4%B9%8B%E7%BE%8E/1.htm">编程之美</a> <div> import java.util.Arrays; import java.util.Random; public class Nim { /**编程之美 NIM游戏分析 问题： 有N块石头和两个玩家A和B，玩家A先将石头随机分成若干堆，然后按照BABA...的顺序不断轮流取石头， 能将剩下的石头一次取光的玩家获胜，每次取石头时，每个玩家只能从若干堆石头中任选一堆，</div> </li> <li><a href="/article/2140.htm" title="lunce创建索引及简单查询" target="_blank">lunce创建索引及简单查询</a> <span class="text-muted">chengxuyuancsdn</span> <a class="tag" taget="_blank" href="/search/%E6%9F%A5%E8%AF%A2/1.htm">查询</a><a class="tag" taget="_blank" href="/search/%E5%88%9B%E5%BB%BA%E7%B4%A2%E5%BC%95/1.htm">创建索引</a><a class="tag" taget="_blank" href="/search/lunce/1.htm">lunce</a> <div>import java.io.File; import java.io.IOException; import org.apache.lucene.analysis.Analyzer; import org.apache.lucene.analysis.standard.StandardAnalyzer; import org.apache.lucene.document.Docume</div> </li> <li><a href="/article/2267.htm" title="[IT与投资]坚持独立自主的研究核心技术" target="_blank">[IT与投资]坚持独立自主的研究核心技术</a> <span class="text-muted">comsci</span> <a class="tag" taget="_blank" href="/search/it/1.htm">it</a> <div> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 和别人合作开发某项产品....如果互相之间的技术水平不同,那么这种合作很难进行,一般都会成为强者控制弱者的方法和手段..... &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 所以弱者,在遇到技术难题的时候,最好不要一开始就去寻求强者的帮助,因为在我们这颗星球上,生物都有一种控制其</div> </li> <li><a href="/article/2394.htm" title="flashback transaction闪回事务查询" target="_blank">flashback transaction闪回事务查询</a> <span class="text-muted">daizj</span> <a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a><a class="tag" taget="_blank" href="/search/sql/1.htm">sql</a><a class="tag" taget="_blank" href="/search/%E9%97%AA%E5%9B%9E%E4%BA%8B%E5%8A%A1/1.htm">闪回事务</a> <div>&nbsp;&nbsp; 闪回事务查询有别于闪回查询的特点有以下3个： （1）其正常工作不但需要利用撤销数据，还需要事先启用最小补充日志。 （2）返回的结果不是以前的“旧”数据，而是能够将当前数据修改为以前的样子的撤销SQL（Undo SQL）语句。 （3）集中地在名为flashback_transaction_query表上查询，而不是在各个表上通过“as of”或“vers</div> </li> <li><a href="/article/2521.htm" title="Java I/O之FilenameFilter类列举出指定路径下某个扩展名的文件" target="_blank">Java I/O之FilenameFilter类列举出指定路径下某个扩展名的文件</a> <span class="text-muted">游其是你</span> <a class="tag" taget="_blank" href="/search/FilenameFilter/1.htm">FilenameFilter</a> <div>这是一个FilenameFilter类用法的例子，实现的列举出“c:\\folder“路径下所有以“.jpg”扩展名的文件。 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 </div> </li> <li><a href="/article/2648.htm" title="C语言学习五函数，函数的前置声明以及如何在软件开发中合理的设计函数来解决实际问题" target="_blank">C语言学习五函数，函数的前置声明以及如何在软件开发中合理的设计函数来解决实际问题</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/c/1.htm">c</a> <div># include &lt;stdio.h&gt; int f(void) //括号中的void表示该函数不能接受数据，int表示返回的类型为int类型 { return 10; //向主调函数返回10 } void g(void) //函数名前面的void表示该函数没有返回值 { //return 10; //error 与第8行行首的void相矛盾 } in</div> </li> <li><a href="/article/2775.htm" title="今天在测试环境使用yum安装，遇到一个问题： Error: Cannot retrieve metalink for repository: epel. Pl" target="_blank">今天在测试环境使用yum安装，遇到一个问题： Error: Cannot retrieve metalink for repository: epel. Pl</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/centos/1.htm">centos</a> <div>今天在测试环境使用yum安装，遇到一个问题： Error: Cannot retrieve metalink for repository: epel. Please verify its path and try again &nbsp; 处理很简单，修改文件“/etc/yum.repos.d/epel.repo”， 将baseurl的注释取消， mirrorlist注释掉。即可。 &n</div> </li> <li><a href="/article/2902.htm" title="单例模式" target="_blank">单例模式</a> <span class="text-muted">shuizhaosi888</span> <a class="tag" taget="_blank" href="/search/%E5%8D%95%E4%BE%8B%E6%A8%A1%E5%BC%8F/1.htm">单例模式</a> <div>单例模式&nbsp;&nbsp; &nbsp;&nbsp; 懒汉式 public class RunMain { /** * 私有构造 */ private RunMain() { } /** * 内部类，用于占位，只有 */ private static class SingletonRunMain { priv</div> </li> <li><a href="/article/3029.htm" title="Spring Security（09）——Filter" target="_blank">Spring Security（09）——Filter</a> <span class="text-muted">234390216</span> <a class="tag" taget="_blank" href="/search/Spring+Security/1.htm">Spring Security</a> <div>Filter 目录 1.1&nbsp;&nbsp;&nbsp;&nbsp; Filter顺序 1.2&nbsp;&nbsp;&nbsp;&nbsp; 添加Filter到FilterChain 1.3&nbsp;&nbsp;&nbsp;&nbsp; DelegatingFilterProxy 1.4&nbsp;&nbsp;&nbsp;&nbsp; FilterChainProxy 1.5</div> </li> <li><a href="/article/3156.htm" title="公司项目NODEJS实践0.1" target="_blank">公司项目NODEJS实践0.1</a> <span class="text-muted">逐行分析JS源代码</span> <a class="tag" taget="_blank" href="/search/mongodb/1.htm">mongodb</a><a class="tag" taget="_blank" href="/search/nginx/1.htm">nginx</a><a class="tag" taget="_blank" href="/search/ubuntu/1.htm">ubuntu</a><a class="tag" taget="_blank" href="/search/nodejs/1.htm">nodejs</a> <div>&nbsp; 一、前言 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;前端如何独立用nodeJs实现一个简单的注册、登录功能，是不是只用nodejs+sql就可以了？其实是可以实现，但离实际应用还有距离，那要怎么做才是实际可用的。 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;网上有很多nod</div> </li> <li><a href="/article/3283.htm" title="java.lang.Math" target="_blank">java.lang.Math</a> <span class="text-muted">liuhaibo_ljf</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/Math/1.htm">Math</a><a class="tag" taget="_blank" href="/search/lang/1.htm">lang</a> <div>System.out.println(Math.PI); System.out.println(Math.abs(1.2)); System.out.println(Math.abs(1.2)); System.out.println(Math.abs(1)); System.out.println(Math.abs(111111111)); System.out.println(Mat</div> </li> <li><a href="/article/3410.htm" title="linux下时间同步" target="_blank">linux下时间同步</a> <span class="text-muted">nonobaba</span> <a class="tag" taget="_blank" href="/search/ntp/1.htm">ntp</a> <div>今天在linux下做hbase集群的时候，发现hmaster启动成功了，但是用hbase命令进入shell的时候报了一个错误&nbsp; PleaseHoldException: Master is initializing，查看了日志，大致意思是说master和slave时间不同步，没办法，只好找一种手动同步一下，后来发现一共部署了10来台机器，手动同步偏差又比较大，所以还是从网上找现成的解决方</div> </li> <li><a href="/article/3537.htm" title="ZooKeeper3.4.6的集群部署" target="_blank">ZooKeeper3.4.6的集群部署</a> <span class="text-muted">roadrunners</span> <a class="tag" taget="_blank" href="/search/zookeeper/1.htm">zookeeper</a><a class="tag" taget="_blank" href="/search/%E9%9B%86%E7%BE%A4/1.htm">集群</a><a class="tag" taget="_blank" href="/search/%E9%83%A8%E7%BD%B2/1.htm">部署</a> <div>ZooKeeper是Apache的一个开源项目，在分布式服务中应用比较广泛。它主要用来解决分布式应用中经常遇到的一些数据管理问题，如：统一命名服务、状态同步、集群管理、配置文件管理、同步锁、队列等。这里主要讲集群中ZooKeeper的部署。 &nbsp; 1、准备工作 我们准备3台机器做ZooKeeper集群，分别在3台机器上创建ZooKeeper需要的目录。 &nbsp; 数据存储目录</div> </li> <li><a href="/article/3664.htm" title="Java高效读取大文件" target="_blank">Java高效读取大文件</a> <span class="text-muted">tomcat_oracle</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>　　读取文件行的标准方式是在内存中读取，Guava 和Apache Commons IO都提供了如下所示快速读取文件行的方法： 　　Files.readLines(new File(path), Charsets.UTF_8); 　　FileUtils.readLines(new File(path)); 　　这种方法带来的问题是文件的所有行都被存放在内存中，当文件足够大时很快就会导致</div> </li> <li><a href="/article/3791.htm" title="微信支付api返回的xml转换为Map的方法" target="_blank">微信支付api返回的xml转换为Map的方法</a> <span class="text-muted">xu3508620</span> <a class="tag" taget="_blank" href="/search/xml/1.htm">xml</a><a class="tag" taget="_blank" href="/search/map/1.htm">map</a><a class="tag" taget="_blank" href="/search/%E5%BE%AE%E4%BF%A1api/1.htm">微信api</a> <div>举例如下： &lt;xml&gt; &nbsp;&nbsp; &lt;return_code&gt;&lt;![CDATA[SUCCESS]]&gt;&lt;/return_code&gt; &nbsp;&nbsp; &lt;return_msg&gt;&lt;![CDATA[OK]]&gt;&lt;/return_msg&gt; &nbsp;&nbsp; &lt;appid&gt;&lt</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>