HTML5使用实例

最新推荐文章于 2024-10-30 20:01:39 发布
最新推荐文章于 2024-10-30 20:01:39 发布
阅读量156 收藏
点赞数
文章标签： html5 之美 不足
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/charrysong/article/details/83972346
版权

从HTML4诞生以来，整个互联网环境、硬件环境都发生了翻天覆地的变化，开发者期望标准统一、用户渴望更好体验的呼声越来越高。20年磨一剑，HTML5作为下一代Web标准，它的新特性正在每个新式浏览器的版本中快速的得到支持和体现。随着HTML5和CSS3的发展和完善，Web应用程序正在逐渐的表现出桌面应用的性能和功能，和桌面应用之间的区别将越来越模糊。未来不能用HTML5来实现的功能将越来越少，未来绘图、视频编辑、3D建模等也将从单机软件转到浏览器上通过Web应用程序来实现。

    下文，我将结合实例，谈谈激动人心的HTML5之美。

1、语义之美

   语义化很美，在合适的地方使用合适的标签，把人和机器一视同仁。书写语义化的页面就像建造符合工业标准的建筑，阅读语义化的页面像阅读一本你熟识的优美著作。

    HTML5的语义化标签包括：

•<section>-代表文档中的一段或者一节；
•<nav>-用于构建导航；
•<article>-表示文档、页面、应用程序或网站中一体化的内容；
•<aside>-代表与页面内容相关、有别于主要内容的部分；
•<hgroup>-代表段或者节的标题；
•<header>-页面的页眉；
•<footer>-页面的页脚；
•<time>-表示日期和时间；
•<mark>-文档中需要突出的文字。
    和采用css+div进行页面布局的方式相比，这些新标签明确的表现了页面元素的结构和含义。下面的代码展示了这样的一个示例：(运行代码时请使用支持HTML5浏览器)

Html代码 运行
  1. <!DOCTYPE html>    
  2.   
  3. <html>    
  4.   
  5. <head>  
  6. <meta charset="utf8">  
  7. <title>HTML5</title>  
  8. <link rel="stylesheet" href="html5.css" mce_href="html5.css">  
  9. </head>  
  10. <header>  
  11. <h1>Title</h1>  
  12. <h2>Subtitle</h2>  
  13. </header>  
  14. <aside>  
  15. <nav>  
  16. <h2>Nav1</h2>  
  17. <ul>  
  18. <li>Link1</li>  
  19. <li>Link2</li>  
  20. </ul>  
  21. </nav>  
  22. <nav>  
  23. <h2>Nav2</h2>  
  24. <ul>  
  25. <li>Link3</li>  
  26. <li>Link4</li>  
  27. </ul>  
  28. </nav>  
  29. </aside>  
  30. <article>  
  31. <header>  
  32. <hgroup>  
  33. <h1>HTML5 is beautiful</h1>  
  34. <h2>Semantic, Natural, Simple and Useful</h2>  
  35. </hgroup>  
  36. </header>  
  37. <section>  
  38. <h2>Semantic</h2>  
  39. <p>HTML5 is Semantic.</p>  
  40. </section>  
  41. <section>  
  42. <h2>Natural</h2>  
  43. <p>HTML5 is Natural.</p>  
  44. </section>  
  45. </atricle>  
  46. <footer>  
  47. <a href="http://www.w3.org/TR" mce_href="http://www.w3.org/TR">W3C</a>  
  48. </footer>  
  49. </html>    
<!DOCTYPE html> 

<html> 

<head>
<meta charset="utf8">
<title>HTML5</title>
<link rel="stylesheet" href="html5.css" mce_href="html5.css">
</head>
<header>
<h1>Title</h1>
<h2>Subtitle</h2>
</header>
<aside>
<nav>
<h2>Nav1</h2>
<ul>
<li>Link1</li>
<li>Link2</li>
</ul>
</nav>
<nav>
<h2>Nav2</h2>
<ul>
<li>Link3</li>
<li>Link4</li>
</ul>
</nav>
</aside>
<article>
<header>
<hgroup>
<h1>HTML5 is beautiful</h1>
<h2>Semantic, Natural, Simple and Useful</h2>
</hgroup>
</header>
<section>
<h2>Semantic</h2>
<p>HTML5 is Semantic.</p>
</section>
<section>
<h2>Natural</h2>
<p>HTML5 is Natural.</p>
</section>
</atricle>
<footer>
<a href="http://www.w3.org/TR" mce_href="http://www.w3.org/TR">W3C</a>
</footer>
</html>

相当简单和清晰，我可以不添加任何注释，人和机器都明白它所要构建的结构和内容。


    目前主要浏览器的新版本都支持HTML5语义化标签（下图从左到右依次为IE、Chrome、Firefox、Opera、Safari、QQ浏览器5）。

 

2、人性之美

    HTML5设计理念中的通用访问体现了人性化之美。通用访问包括可访问性、媒体中立和国际化支持三个概念。可访问性考虑了对残障用户的支持，媒体中立为所有的平台和终端上（例如Android和iPhone的平台上）建立统一标准；而国际化的支持体现在不同的语言和书写习惯上。

    就像CSS3中对国际化的支持体现在padding-start, padding-end（在Chrome新版本的设置中心中可以看到它的应用）等新属性一样，HTML5引入了Ruby标签。Ruby标签允许为一个或者多个文本添加附加注释（其命名来源于Ruby字符），例如下面的代码：(运行代码时请使用支持<b><span style="color: #b22222">HTML5浏览器</span></b>)

Html代码 运行
  1. <p>Hello,   
  2.   
  3. <ruby>  
  4. <rb>HTML5</rb>  
  5. <rp> (</rp>  
  6. <rt>Hyper Text Mark-up Language 5</rt>  
  7. <rp>) </rp>  
  8. </ruby>  
  9. </p>   
<p>Hello,

<ruby>
<rb>HTML5</rb>
<rp> (</rp>
<rt>Hyper Text Mark-up Language 5</rt>
<rp>) </rp>
</ruby>
</p>

 显示的文本如下：

    Ruby标签在中文、韩文和日文教科书和古文中非常有用，读者们可以方便了解文本的详细读音和含义。下面的诗句很美，而HTML5更美。

    有趣的是在IE、Firefox或Opera中复制粘贴上面的文本到编辑器中，会显示下面的文本，这是因为<rp>标签的特殊作用：允许在不支持Ruby标签的浏览器中优雅的降级，同时支持非格式化的复制和粘贴。

 

死生 契 (读音： qì ) 阔 (读音： kuò ) ，与子成说。执子之手，与子偕老。

 

    目前主要浏览器的新版本对于Ruby标签的支持程度如下：除Fifrefox和Opera外均提供支持。

3、简单之美

    大道至简，化繁为简是许多标准、规范、框架的终极目标。HTML5很好的诠释了这一点，例如以浏览器原生能力支持和代替复杂的Javascript代码、提供简单而强大的新API。

    HTML5自身即跨浏览器的JS库，使得开发者的工作更容易：例如新的表单标签和属性、内置拖拽事件使得完全不需要Javascript的支持就能实现许多常用的功能。

    我们再来看HTML5表单，它实现了许多简单易用的原生属性和控件，可以轻松的构建强大的表单，帮我们节约大量的Javascript代码。下面是一个HTML5表单的示例：

Html代码
  1. <form>  
  2. <p>  
  3. <label for="email">电子邮箱：</label>  
  4. <input type="email" required autofocus name="email" id="email" placeholder="您的电子邮箱">  
  5. </p>  
  6. <p>  
  7. <label for="username">用户名：</label>  
  8. <input type="text" pattern="^\w{6,12}$" required name="username" placeholder="6到12位的英文字符">  
  9. <input type="search" placeholder="用户名搜索" autosave="www.yujie.com" results="5" name="username-search" id="username-search">  
  10. </p>  
  11. <p>  
  12. <label for="username-search">生日：</label>  
  13. <input type="date" min="1980-01-01" max="2011-3-16" name="birthday" id="birthday" value="1982-10-10">  
  14. </p>  
  15. <p>  
  16. <label for="blog">博客地址：</label>  
  17. <input type="url" name="blog" placeholder="您的博客地址" id="blog">  
  18. </p>  
  19. <p>  
  20. <label for="mobile">手机：</label>  
  21. <input type="number" name="mobile" pattern="^1[0-9]{10}$" id="mobile" placeholder="您的手机号">  
  22. </p>  
  23. <p>  
  24. <label id="label-working-year" for="working-year">工作年限：</label>  
  25. <input type="range" min="1" step="1" max="20" name="slider" name="working-year" id="working-year" placeholder="您的工作年限" value="3">  
  26. </p>  
  27. <p>  
  28. <label for="age">年龄：</label>  
  29. <input type="number" name="age" id="age" value="20" autocomplete="off" placeholder="您的年龄">  
  30. </p>  
  31. <p>  
  32. <label for="avatar">头像：</label>  
  33. <input type="image" src="user.png" mce_src="user.png" name="avatar" id="avatar" placeholder="点击选择头像">  
  34. </p>  
  35. </form>   
<form>
<p>
<label for="email">电子邮箱：</label>
<input type="email" required autofocus name="email" id="email" placeholder="您的电子邮箱">
</p>
<p>
<label for="username">用户名：</label>
<input type="text" pattern="^\w{6,12}$" required name="username" placeholder="6到12位的英文字符">
<input type="search" placeholder="用户名搜索" autosave="www.yujie.com" results="5" name="username-search" id="username-search">
</p>
<p>
<label for="username-search">生日：</label>
<input type="date" min="1980-01-01" max="2011-3-16" name="birthday" id="birthday" value="1982-10-10">
</p>
<p>
<label for="blog">博客地址：</label>
<input type="url" name="blog" placeholder="您的博客地址" id="blog">
</p>
<p>
<label for="mobile">手机：</label>
<input type="number" name="mobile" pattern="^1[0-9]{10}$" id="mobile" placeholder="您的手机号">
</p>
<p>
<label id="label-working-year" for="working-year">工作年限：</label>
<input type="range" min="1" step="1" max="20" name="slider" name="working-year" id="working-year" placeholder="您的工作年限" value="3">
</p>
<p>
<label for="age">年龄：</label>
<input type="number" name="age" id="age" value="20" autocomplete="off" placeholder="您的年龄">
</p>
<p>
<label for="avatar">头像：</label>
<input type="image" src="user.png" mce_src="user.png" name="avatar" id="avatar" placeholder="点击选择头像">
</p>
</form>

示例中包含了email、search、date、url、range、number、image类型的输入框和required、autofocus、placeholder、pattern、autosave、results、min、max、step、autocomplete等新属性，它们简单到根据名字就可以揣测出用途。下面是效果图。

  HTML5表单在各浏览器里的支持程度和表现并不一致，例如Search输入框目前只被Webkit内核浏览器支持，而日期弹出框和拖动条刻度仅被Opera支持。以上的标签类型和属性目前没有一个浏览器完美支持。

 

4、实用之美
    HTML5的Web Worker、Web Socket、Web Storage等新API让很多后台的工作可以放到前端来处理，Web Worker解决Javascript单线程和阻塞的问题，相当于提供了分布式处理的框架；Web Socket提供了全双工的长连接通信, 利用它，我们可以实现微博消息推送、新邮件推送、实时游戏和聊天，减少了不必要的数据传输，提高了信息的实时性；Web Storage相当于前端的Memcached和数据库。

    而HTML5的Canvas是最强大的API之一，可以动态生成图形、图像和动画，在HTML5游戏中使用的非常普遍。在下面的例子中，我将展示HTML5 Canvas之美：实现图像颜色渐变效果。

    以前，我们在网站上显示灰度图像到彩色图像的渐变动画有两种实现方式：1、基于IE滤镜的方案，缺点是无法实现浏览器兼容；2、手动创建彩色图像的灰度版本。现在，利用HTML5的Canvas画布，我们可以高效简单的实现此动画效果。

    将鼠标放在左边的图片上，图片颜色将从灰度渐变到彩色，一切就在眼前鲜活起来。

    核心的Javascript代码如下：

Javascript代码
  1. // 加载时就进行处理   
  2.   
  3. $(window).load(function(){   
  4. var img = $('#color-img');   
  5. // 复制图像   
  6. img.clone().addClass('gray-img').css({"position": "absolute", "z-index": "2", "opacity": "0"}).insertBefore(img);   
  7. img.attr('src', grayscale(img.attr('src')));   
  8.   
  9. // 图像的淡入   
  10.   
  11. $('#color-img').mouseover(function(){   
  12. $(this).stop().animate({opacity: 1}, 1000);   
  13. })   
  14.   
  15. // 图像的淡出   
  16.   
  17. $('.gray-img').mouseout(function(){   
  18.   
  19. $(this).stop().animate({opacity: 0}, 1000);   
  20.   
  21. });   
  22.   
  23. });   
  24.   
  25.   
  26.   
  27. // 创建灰度版的图像   
  28.   
  29. function grayscale(src) {   
  30.   
  31. // 取得canvas元素及其绘图上下文   
  32.   
  33. var canvas = document.createElement('canvas');   
  34.   
  35. var ctx = canvas.getContext('2d');   
  36.   
  37. var imgObj = new Image();   
  38.   
  39. imgObj.src = src;   
  40.   
  41. canvas.width = imgObj.width;   
  42.   
  43. canvas.height = imgObj.height;   
  44.   
  45.   
  46.   
  47. ctx.drawImage(imgObj, 0, 0); // 绘制一副图像   
  48.   
  49. var imgPixels = ctx.getImageData(0, 0, canvas.width, canvas.height); // 获取之前的数据   
  50.   
  51. for(var x = 0; x < imgPixels.height; x++){   
  52.   
  53. for(var y = 0; y < imgPixels.width; y++){   
  54.   
  55. var i = (x * 4) * imgPixels.width + y * 4;   
  56.   
  57. var avg = (imgPixels.data[i] + imgPixels.data[i + 1] + imgPixels.data[i + 2]) / 3; // 计算灰度值   
  58.   
  59. imgPixels.data[i] = avg; // rgb中的r   
  60.   
  61. imgPixels.data[i + 1] = avg; // rgb中的g   
  62.   
  63. imgPixels.data[i + 2] = avg; // rgb中的b   
  64.   
  65. // i + 3是alpha通道，我们现在不需要   
  66.   
  67. }   
  68.   
  69. }   
  70.   
  71. ctx.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height);   
  72.   
  73. return canvas.toDataURL();   
  74.   
  75. }  
// 加载时就进行处理

$(window).load(function(){
var img = $('#color-img');
// 复制图像
img.clone().addClass('gray-img').css({"position": "absolute", "z-index": "2", "opacity": "0"}).insertBefore(img);
img.attr('src', grayscale(img.attr('src')));

// 图像的淡入

$('#color-img').mouseover(function(){
$(this).stop().animate({opacity: 1}, 1000);
})

// 图像的淡出

$('.gray-img').mouseout(function(){

$(this).stop().animate({opacity: 0}, 1000);

});

});



// 创建灰度版的图像

function grayscale(src) {

// 取得canvas元素及其绘图上下文

var canvas = document.createElement('canvas');

var ctx = canvas.getContext('2d');

var imgObj = new Image();

imgObj.src = src;

canvas.width = imgObj.width;

canvas.height = imgObj.height;



ctx.drawImage(imgObj, 0, 0); // 绘制一副图像

var imgPixels = ctx.getImageData(0, 0, canvas.width, canvas.height); // 获取之前的数据

for(var x = 0; x < imgPixels.height; x++){

for(var y = 0; y < imgPixels.width; y++){

var i = (x * 4) * imgPixels.width + y * 4;

var avg = (imgPixels.data[i] + imgPixels.data[i + 1] + imgPixels.data[i + 2]) / 3; // 计算灰度值

imgPixels.data[i] = avg; // rgb中的r

imgPixels.data[i + 1] = avg; // rgb中的g

imgPixels.data[i + 2] = avg; // rgb中的b

// i + 3是alpha通道，我们现在不需要

}

}

ctx.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height);

return canvas.toDataURL();

}

针对不支持的旧浏览器，我们可以使用Modernizr Javascript库或者原生Javascript检测当前浏览器是否支持，并提供替代性的解决方案：

Javascript代码
  1. if(!Modernizr.canvas) { // 或者使用!document.createElement('canvas').getContext      
  2.          $(document).ready(backupFunc);      
  3. }  
if(!Modernizr.canvas) { // 或者使用!document.createElement('canvas').getContext   
         $(document).ready(backupFunc);   
}

 

目前主要浏览器的新版本都提供Canvas标签的支持：

 

5、HTML5的不足
    目前HTML5还有哪些不足之处？

    1、安全：像之前Firefox 4的Web Socket和透明代理的实现存在严重安全问题，同时Web Storage、Web Socket这样的功能很容易被黑客利用，来盗取用户的信息和资料，另外HTTP的机制导致了Web应用安全性有所欠缺，这将在很长的时间内成为问题。

    2、性能：某些平台上的引擎问题导致HTML5性能低下。同时在不加入GPU加速的情况下，HTML5处理复杂音视频、动画的性能不尽如人意。

    3、完善性：HTML5还在成熟和发展中，像之前曾经支持的Web SQL Database，W3C已经决定不再维护。许多特性各浏览器的支持程度也不一样，而地理定位API在国内的前途还不清晰。

    4、技术门槛：HTML5简化开发者工作的同时代表了有许多新的属性和API需要开发者学习，像Web Worker、Web Socket、Web Storage等新特性要求对于后台的技术需要有一定的了解，甚至需要深入了解其后面原理和逻辑，而Canvas要求视觉和图像算法的一些知识。传统的前端开发者需要掌握更多算法、视觉、后台甚至浏览器原理的知识，机遇的同时也是巨大挑战。
6、总结
    上面的大多数不足是HTML5发展过程的中间状态导致的，从长期来看，浏览器厂商的支持、移动互联网的蓬勃发展使得HTML5的前景一片光明，开发者对此必须要要有清楚的认识和长远的目光，提前做好技术储备。

    对于HTML5，我认为不仅要了解技术细节，还要从根本上理解HTML5的架构，从更高的层面上理解它的深层次含义，它的设计理念，你会发现它的架构之美，对于个人架构设计能力和境界提升有很大帮助。

    Web应用程序和移动互联网是大势所趋，IE6终将消亡，Web和浏览器标准终将统一，HTML5就是道之所藏、美之所在，让我们一起迎接和拥抱HTML5的到来！

转自：http://www.ok22.org/art_detail.aspx?id=162

charrysong
关注
html5fify-v0.5.crx
07-13
用来看html5视频 google 浏览器看视频都插件
HTML5 详细介绍 及应用实例
绝对秋香
10-27 1015
 HTML5 概况 什么是 HTML5   HTML 5有两大特点：首先，强化了 Web 网页的表现性能。其次，追加了本地数据库等 Web 应用的功能。 HTML 5是近十年来Web开发标准最巨大的飞跃。和以前的版本不同，HTML 5并非仅仅用来表示Web内容，它的新使命是将Web带入一个成熟的应用平台，在HTML 5平台上，视频，音频，图象，动画，以及同电脑的交互都被标准化。 ...
html5经典实例代码,Js经典案例的实例代码
weixin_36040903的博客
06-10 426
本文讲述了JS实现鼠标悬停切换图片，显示天气预报，利用焦点实现选择网站的实例代码，分享给大家供大家参考，具体如下：鼠标悬停切换图片：function mouseOver(){document.getElementById('b1').src ="diaochan.jpg"}function mouseOut(){document.getElementById('b1').src ="noimage...
HTML+JS好例子集锦
cnds123的专栏
02-28 1万+
HTML+JS好例子集锦 一些HTML+JavaScript好例子，有些例子照网络资料，包括HTML+JS限时小学数学出题、打开对话框选择本地文件、简单画布画板、俄罗斯方块游戏、落英纷飞动画、随机点名器的示例 、生成二维码等。...
ajax html例子,AJAX实例
weixin_28727943的博客
08-05 762
AJAX实例实例一：一个简单的AJAX实例创建一个简单的XMLHttpRequest，从一个TXT文件中返回数据实例functionloadXMLDoc(){varxmlhttp;if(window.XMLHttpRequest){//IE7+,Firefox,Chrome,Opera,Safari浏览器执行代码xmlhttp=newXMLHttpRequest();}els...
使用HTML5代码实现图文混排
m0_66563570的博客
01-22 4255
编写思路： 准备好图片，使用图像标签<img />插入需要的图片； 设置图片的水平边距hspce=”30”以及左对齐align=”left”以及width图片宽度属性； 使用标题标签<h2>突出标题设置相关属性； 使用段落标签<p>来实现三段文字，设置字号size，字体颜色color属性。 源代码： 实现效果 ...
html5调用摄像头实例
热门推荐
binquan_liang的博客
03-08 1万+
最近在学习在做HTML5的项目，看了博客上html5调用摄像头拍照的文章，但各有瑕疵。于是自己查阅书籍写了一个demo，主要分三步，废话不多说上代码。HTML代码部分：&lt;!--video用于显示媒体设备的视频流，自动播放--&gt; &lt;video id="video" autoplay style="width: 480px;height: 320px"&gt;&lt;/vid...
html代码中使用全局变量
bzwjz的博客
08-01 6636
html代码中使用全局变量
html+js输出5-10的随机数实例
仿站、源码搭建/迁移技术博客
09-10 2570
实例代码 <script> function Num() { document.getElementById("field").value=Math.floor(Math.random()*5+5) + Math.ceil(Math.random()*10)/10 } </script> <button onclick="Num()">输出5-10的随机数</button> <input type="text" id="field">
HTML5版Epub阅读器（带实例）
09-17
此工具运行于服务器下，体积小，但非常强大，在index.html中简单调用，即可解析epub文件，速度非常快，默认是解析亚马逊站点的一本epub样例，你可以轻易改成你自己的epub文件，详情查看压缩包中的使用说明。
使用html5读取摄像头的例子.rar
07-10
这个"使用html5读取摄像头的例子.rar"压缩包就是一个演示如何利用HTML5 API来访问和展示用户摄像头内容的实例。 在HTML5中，`<video>`元素用于播放视频，但更重要的是，它还可以用来实时显示摄像头流。通过使用`...
HTML5利用约束验证API来检查表单的输入数据的代码实例
01-19
我猜你肯定会以浏览器兼容作为借口不愿意使用这些“新功能”，但这绝不应该成为使你停滞不前的原因，况且还有像Modernizr和ployfill这样的工具库帮助你在不支持Html5的浏览器上进行回退处理。当你真正试着使用这些...
html5网站实例
12-29
本实例将详细讲解如何利用HTML5来构建一个完整的网站，包括布局、登录功能以及内容展示。 一、HTML5的基础结构 HTML5的文档类型声明由`<!DOCTYPE html>`简化，这标志着文档类型为HTML5。紧接着是`<html>`元素，它是...
HTML5+CSS3网页设计实例教程实例源代码.rar
01-05
HTML5+CSS3网页设计实例教程实例源代码
用HTML5 + JavaScript绘制花、树
cnds123的专栏
02-12 3341
春季来了，万物渐次复苏，花木亦然。让我们用HTML5 + JavaScript描绘一下吧
一
qq_27891023的博客
02-15 3064
前言 什么是HTML5：HTML5是由W3C开发的一个规范——–http://dev.w3.org/html5/spec/ 第一章：基本语法和语义 问题：想要创建一个HTML5页面 在页面的最开始处指定HTML5 DOCTYPE： //DOCTYPE不区分大小写 html> ... html> DOCTYPE文档类型声明，告诉浏览器和验证器，该页面是使
【HTML5】html5开篇基础（6）
最新发布
Easonmax的博客
10-30 1117
该标签支持多种视频格式，并提供了一些属性和方法来控制视频的播放。对于autoplay在谷歌中不添加muted是自动播放不了的。标签也支持多种音频格式，并且提供了一些控制音频播放的属性。在学习html5和css3的基础上使我们的前端使用更高级。对于audio中controls和src是最重要的。对于video中controls和src是最重要的。在谷歌中autoplay是禁用的，用不了。在学习html5的基础上更加熟练运用前端。我们通常用MP4，这在所有游览器中通用。学习前端知识，更好的运用它。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值