HTML5

最新推荐文章于 2024-08-26 10:36:21 发布
最新推荐文章于 2024-08-26 10:36:21 发布
阅读量126 收藏
点赞数 1
分类专栏： HTML5 文章标签： html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44812479/article/details/120547129
版权
本文详细介绍了HTML的基础知识，包括HTML5的新特性、W3C标准、网页结构、标题、段落、图像、超链接、列表、表格、媒体元素以及表单的使用。内容涵盖了HTML的基本元素、属性及其应用场景，为初学者提供了全面的学习指南。
摘要由CSDN通过智能技术生成

初识HTML

  1. 什么是HTML：Hyper Text Markup Language（超文本标记语言），超文本包括文字、图片、音频、视频、动画等
  2. HTML5，提供了一些新的元素和一些有趣的新特性，同时也建立了一些新的规则。这些元素、特性和规则的建立，提供了许多新的网页功能，如使用网页实现动态渲染图形、图表、图象和动画，以及不需要安装任何插件直接使用网页播放视频等
  3. W3C标准
  • World Wide Web Consortium（万维网联盟）成立于1994年，是Web技术领域最权威和具影响力的国际中立性技术标准机构
  • W3C标准包括：结构化标准语言（HTML、XML），表现标准语言（CSS）和行为标准（DOM、ECMAScript）

网页基本信息

  1. DOCTYPE html：告诉浏览器我们要使用html规范，去掉也可以，因为浏览器默认使用html规范
  2. head标签代表网页头部
  3. body标签代表网页主体
  4. title标签是网页标题
  5. meta是描述性标签，用来描述网站的一些信息，一般用来做SEO，在meta里写的内容不像body里那样会出现在网页上，而是打开源代码查看后才能看到

网页基本标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本标签</title>
</head>
<body>

<!--标题标签-->
<!--一级标签最大，六级标签最小-->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>

<!--段落标签-->
<!--如果像写文档一样直接打回车，html是无法换行的，必须把同一段的内容写在p标签里，快捷键是p+tab-->
<p>两只老虎，两只老虎</p>
<p>跑得快，跑得快</p>

<!--换行标签-->
<!--换行标签的行间距没有段落标签的那么宽-->
两只老虎，两只老虎<br/>
跑得快，跑得快<br/>

<!--水平线标签-->
<hr/>

<!--粗体，斜体-->
<strong>粗体</strong>
<em>斜体</em>

<!--特殊字符-->
<!--特殊字符都是&开头，;结尾，不需要全部记下来，可以查或者让idea补全-->
空格&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;空格
大于号&gt;
小于号&lt;
版权符号&copy;

<!--注释-->
注释就是上面这种格式，快捷键为ctrl+/

</body>
</html>

图像标签

常见的图像格式：JPG、GIF、PNG、BMP

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像标签</title>
</head>
<body>

<!--
src（必填）：图片地址，包括相对地址和绝对地址，一般使用相对路径../返回上一级，然后一级一级找
alt（必填）：图像的替代文字，比如src写错了，找不到这张图片，就会在页面显示“lena图”这几个字，当然如果src正确，这里的内容不会显示
title：鼠标悬停提示文字
width：图像宽度
height：图像高度
-->
<img src="../resources/images/lena.jpg" alt="lena图" title="悬停文字" width="300" height="300">
</body>
</html>

超链接标签及应用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接标签</title>
</head>
<body>
<!--a标签
href（必填）：表示要跳转到哪个页面
target：表示窗口在哪里打开，_blank表示在新标签中打开，默认的是_self表示在当前的页面打开
-->

<a name="top">顶部</a><!--这个a标签是为了使用锚链接而定的一个“锚”，使用name作为标记-->

<!--页面间链接-->
<a href="3.图像标签.html" target="_blank">点击跳转到图像标签页面</a>
<br/>
<a href="https://www.baidu.com" target="_self">点击跳转到百度</a>
<br/>
<!--通过点击图片跳转到百度-->
<a href="https://www.baidu.com">
    <img src="../resources/images/lena.jpg" alt="lena图" title="悬停文字" width="300" height="300">
</a>

<!--锚链接
1.需要一个锚标记
2.跳转到标记
-->
<p>
    为了体现锚链接效果，多写一堆东西让页面出现滑动条
    <img src="../resources/images/lena.jpg" alt="lena图" title="悬停文字" width="300" height="300">
</p>
<p>
    为了体现锚链接效果，多写一堆东西让页面出现滑动条
    <img src="../resources/images/lena.jpg" alt="lena图" title="悬停文字" width="300" height="300">
</p>
<p>
    为了体现锚链接效果，多写一堆东西让页面出现滑动条
    <img src="../resources/images/lena.jpg" alt="lena图" title="悬停文字" width="300" height="300">
</p>
<p>
    为了体现锚链接效果，多写一堆东西让页面出现滑动条
    <img src="../resources/images/lena.jpg" alt="lena图" title="悬停文字" width="300" height="300">
</p>

<!--通过#加名字的方式定位锚
可以连着用，比如从一个页面跳到另一个页面的顶部，就直接在href的地址后面加#name-->
<a href="#top">回到顶部</a>
<a href="3.图像标签.html#down"></a>

<!--功能性链接
邮件链接mailto:
QQ链接，搜索QQ推广，打开官网——>推广工具，生成代码
-->
<br/>
<a href="mailto:123456@qq.com">点击联系我</a>

<br/>
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=&site=qq&menu=yes">
    <img border="0" src="http://wpa.qq.com/pa?p=2::53" alt="点击这里在线咨询" title="点击这里在线咨询"/>
</a>

</body>
</html>

块元素和行内元素

  1. 块元素：无论内容多少，该元素独占一行，比如段落标签p，标题标签h1~h6，写出来之后都是另起一行
  2. 行内元素：内容撑开宽度，左右都是行内元素的可以排在一行，比如a标签，粗体标签strong，斜体标签em，写出来可以并列放在同一行

列表标签

  1. 列表就是信息资源的一种展现形式。它可以使信息结构化和条理化，并以列表的样式显示出来，以便浏览者能更快捷地获得相应的信息
  2. 列表包括有序列表、无序列表和定义列表
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表</title>
</head>
<body>

<!--有序列表-->
<!--其实就是orderlist和list的缩写，有数字，一般应用在试卷、问答等地方-->
<ol>
    <li>前端</li>
    <li>后端</li>
</ol>

<!--无序列表-->
<!--其实就是unorderedlist和list的缩写，没有数字，一般应用在导航、侧边栏等地方-->
<ul>
    <li>前端</li>
    <li>后端</li>
</ul>

<!--自定义列表-->
<!--
dl：标签
dt：列表名称
dd：列表内容
一般用在公司网站底部
-->
<dl>
    <dt>java</dt>
    <dd>前端</dd>
    <dd>后端</dd>
</dl>
</body>
</html>

表格标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>

<!--表格table
tr：tablerows行
td：tabledatacell数据单元
border：加上边框，这里设定为1px
colspan：跨列，需要写一个参数，即跨几列，加在td后面，记得删掉多余的格子，不然会被挤出去
rowspan：跨行，需要写一个参数，即跨几列，加在td后面，记得删掉多余的格子，不然会被挤出去
-->
<table border="1px">
    <tr>
        <td colspan="2">1-1</td>
        <td>1-2</td>
    </tr>

    <tr>
        <td rowspan="2">2-1</td>
        <td>2-2</td>
        <td>2-3</td>
    </tr>

    <tr>
        <td>3-1</td>
        <td>3-2</td>
    </tr>
</table>
</body>
</html>

媒体元素（视频、音频）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>媒体元素</title>
</head>
<body>

<!--视频
src（必填）：视频路径
controls：控制播放暂停视频、下载、全屏等
autoplay：自动播放
-->
<video src="../resources/video/视频.mp4" controls autoplay></video>

<!--音频
src（必填）：音频路径
controls：控制播放暂停音频、下载、音量调节等
autoplay：自动播放
-->
<audio src="../resources/audio/音频.mp3" controls autoplay></audio>

</body>
</html>

页面结构分析

元素名描述
header头部区域的内容（用于页面或页面中的一块区域）
footer脚部区域的内容（用于页面或页面中的一块区域）
sectionWeb页面中的一块独立区域
article独立的文章内容
aside相关内容或应用（常用于侧边栏）
nav导航类辅助内容

iframe内联框架

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内联框架</title>
</head>
<body>

<!--iframe内联框架
就是在页面中嵌套了一个别的页面
src：引用页面地址
width：宽度
height：高度
name：框架标识名
-->
<iframe src="https://www.huya.com" name="hello" frameborder="0" width="1000px" height="1000px"></iframe>

<a href="https://blog.csdn.net/weixin_44812479?spm=1001.2014.3001.5343" target="hello">点击跳转</a>

</body>
</html>

初识表单post和get提交

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
</head>
<body>

<h1>注册</h1>
<!--表单form
action：表单提交的位置，可以是网站也可以是一个请求处理地址
method：post，get提交方式
使用get方式提交时，输入的用户名和密码会出现在url中，不安全但是高效，不能传输大文件
使用post方式提交时，输入的用户名和密码不会出现在url中，安全，可以传输大文件
-->

<!--文本输入框input
默认的type是text
密码的type是password
提交的type是submit
重置的type是reset
value：默认初始值
maxlength：最长能写几个字符
size：文本框长度
-->
<form action="3.图像标签.html" method="get">
<p>用户名：<input type="text" name="username"></p>
<p>密码：<input type="password" name="pwd"></p>
<p>
    <input type="submit">
    <input type="reset">
</p>
</form>

</body>
</html>

表单的一些基本控件

  • 表单元素格式：
属性说明
type指定元素的类型，默认为text。text、password、checkbox、radio、submit、reset、file、hidden、image和button
name指定表单元素的名称
value元素的初始值。type为radio时必须指定一个值
size指定表单元素的初始宽度。当type为text或password时，表单元素的大小以字符为单位。对于其他类型，宽度以像素为单位
maxlengthtype为text或password时，输入的最大字符数
checkedtype为radio或checked时，指定按钮是否是被选中
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
</head>
<body>

<h1>注册</h1>

<!--表单form
action：表单提交的位置，可以是网站也可以是一个请求处理地址
method：post，get提交方式
使用get方式提交时，输入的用户名和密码会出现在url中，不安全但是高效，不能传输大文件
使用post方式提交时，输入的用户名和密码不会出现在url中，安全，可以传输大文件
-->
<form action="3.图像标签.html" method="get">

<!--文本输入框的type是text，这也是input标签默认的type
value：默认初始值
maxlength：最长能写几个字符
size：文本框长度
-->
<p>用户名：<input type="text" name="username" value="zcf" maxlength="8" size="30"></p>

<!--密码框的type是password-->
<p>密码：<input type="password" name="pwd"></p>

<!--单选框标签的type是radio
默认选项在后面加checked
value：单选框的值
name：表示组
要放在同一组下才会是单选，即单选框的name要一致
-->
<p>性别：
    <input type="radio" value="boy" name="sex" checked>男
    <input type="radio" value="girl" name="sex">女
</p>

<!--多选框的type是checkbox
默认选项在后面加checked
-->
<p>爱好：
    <input type="checkbox" value="sleep" name="hobby" checked>睡觉
    <input type="checkbox" value="code" name="hobby">敲代码
    <input type="checkbox" value="chat" name="hobby">聊天
    <input type="checkbox" value="game" name="hobby">打游戏
</p>

<!--下拉框
默认选项在后面加selected
-->
<p>下拉框：
    <select name="列表名称">
        <option value="CHN" selected>中国</option>
        <option value="USA">美国</option>
        <option value="JPN">日本</option>
    </select>
</p>
    
<!--文本域
cols：列
rows：行
-->
<p>文本域：
    <textarea name="textarea" cols="50" rows="10">文本内容</textarea>
</p>

<!--文件域type是file-->
<p>文件域：
    <input type="file" name="files">
</p>

<!--邮箱验证type是email-->
<p>邮箱：
    <input type="email" name="email">
</p>

<!--URLtype是url-->
<p>URL：
    <input type="url" name="url">
</p>

<!--数字type是number
应用于商品数量，设置步长为1，添加到购物车里
-->
<p>数字：
    <input type="number" name="number" max="100" min="0" step="10">
</p>

<!--滑块type是range-->
<p>滑块：
    <input type="range" name="voice" min="0" max="100" step="2">
</p>

<!--搜索框type是search-->
<p>搜索框：
    <input type="search" name="search">
</p>

<!--按钮
普通按钮的type是button
图片按钮的type是image，需要一个src，点击图片提交跳转，拥有和submit一样的效果
提交按钮的type是submit
重置按钮的type是reset，就是前面的单选、多选框点选后点击重置按钮就会清空
-->
<p>按钮：
    <input type="button" name="btn1" value="点击">
    <input type="submit">
    <input type="reset">
    <input type="image" src="../resources/images/lena.jpg">
</p>
</form>

</body>
</html>

表单的应用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单应用</title>
</head>
<body>

<p>只读：
    <input type="text" name="username" value="admin" readonly>
</p>

<p>隐藏：
    <input type="password" name="pwd" value="123456" hidden>
</p>

<p>禁用：
    <input type="radio" name="sex" value="boy" disabled>男
    <input type="radio" name="sex" value="girl">女
</p>

<!--增强鼠标可用性
点击label可以自动锁定到文本框
通过id对应
-->
<p>点击label可以自动锁定到文本框：
    <label for="mark">label</label>
    <input type="text" id="mark">
</p>

</body>
</html>

表单初级验证

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单初级验证</title>
</head>
<body>

<form action="3.图像标签.html" method="get">
<!--placeholder用来写在文本框内提示用户输入什么信息-->
<!--required不能为空-->
<p>
    用户名：<input type="text" name="username" placeholder="请输入用户名">
    密码：<input type="password" name="pwd" required>
</p>

<!--通过正则表达式的方式限定只能输入邮箱
具体用到的正则表达式百度可以查一下，比如例子里的email格式的正则表达式
-->
<p>自定义邮箱：
    <input type="text" name="diymail" pattern="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$">
</p>
<p>按钮：
    <input type="submit">
    <input type="reset">
</p>

</form>

</body>
</html>
CRUSH-0725
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
你真的熟练运用 HTML5 了吗，这10 个酷炫的 H5 特性你会几个？
努力是为了站在万人之中，成为别人的光
07-05 26万+
HTML5不是什么新鲜事。自初始版本（2008 年 1 月）以来，我们一直在使用它的几个功能。我再次仔细查看了 HTML5 功能列表。看看我发现了什么？到目前为止，我还没有真正使用过很多！ 在本文中，我列出了 10 个这样的HTML5功能，这些功能过去我用得不多，但现在发现它们很有用。我还创建了一个工作示例流程并托管在Netlify. 希望你也觉得它有用。让我们开始了解有关它们中的每一个的解释、代码和快速提示。 https://wanghao221.github.io/html-tips-tricks/
html标签
Crush_xu的博客
08-23 152
html标签
HTML5实现拖放
上庸者-不服周
09-30 3833
在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放
制作HTML5百科页面
酷小亚
09-22 9312
先建一个index.html(首页)，代码如下： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HTML5 百科</title> </head> <body> <p align="center"> <a href="page01.html" target="_self"><img src="image
H5(html5)入门教程
热门推荐
DAIYA_JIE的博客
09-11 1万+
html零基础01
HTML5： select标签
Hr_ving的博客
10-05 5397
HTML5： select标签 select标签作为一个HTML的双标签，存在两个常用的属性 name属性： 表示select标签的名字 id属性： 表示select标签的id，也可以作为label 标签链接的组件 用法为： ​ 其选择项option标签中的value值表示的是select标签选中后的value值，option标签中的内容表示显示 的内容 ​ select标签初始值为默认选中第一项 <select name="color"> <option value
程序员给女朋友用HTML5制作的3D相册
04-21
HTML5是一种强大的网页开发技术，它为网页开发者提供了丰富的功能和接口，使得创建交互式、动态和响应式的网站成为可能。在这个"程序员给女朋友用HTML5制作的3D相册"项目中，我们可以看到HTML5如何被巧妙地利用来...
纯HTML5拓扑图编辑器源代码
04-07
屌爆的纯HTML5拓扑图编辑器源代码，找了很久终于申请到，运行就是这个效果 http://www.hightopo.com/blog/wp-content/uploads/2014/08/Screen-Shot-2014-08-12-at-8.57.11-PM.png 可参考这篇博客 ...
50余款手机页面模版源码html5
11-16
50余款手机页面模版源码html5 1.1【32赞HTM5响应式系列之右侧多级滑动式】仿Slideby触屏版html5响应式手机wap网站模板 2【32赞HTML5响应式系列之订餐模板】微官网美食订餐html5触屏响应式手机wap网站订餐模板 5【32...
CSS3 +HTML5入门到精通
07-01
【标题】"CSS3 +HTML5入门到精通"与【描述】"《HTML+5+从入门到精通》-中文学习教程"所涵盖的知识点主要围绕着Web开发的基础技术——HTML5和CSS3展开，这两者是现代网页设计与开发不可或缺的组成部分。以下是关于这...
HTML5有格调的个人介绍网站源码
接受定制，友情互惠，致力于前端的全类型模板，打造通用模板源码，进阶于前后端联合模板，适用于全类型。
08-26 1587
HTML5有格调的个人介绍网站源码，个人网站下载，html源码下载，响应式布局，动态展示数据效果，界面整洁，布局清晰。页面分为个人信息，项目统计，我的相册，朋友评价，保持联系等模块，根据自己需求可以扩展自己需要的功能。注释完整，代码规范，各种风格都有，代码上手简单，代码独立，可以直接运行使用。也可直接预览效果。
数据结构试题参考及答案.doc
08-29
内容概要：本资源提供了一份详尽的数据结构试题参考及答案，覆盖了从基础概念到复杂算法的多个层面。读者可以通过这份材料，系统地学习和复习数据结构的理论知识和应用实践，包括但不限于时间复杂度分析、线性表操作、树与图的遍历、排序算法等。 适合人群：适合计算机科学与技术专业的学生、准备数据结构考试或面试的研发人员，以及任何希望提升数据结构和算法知识的编程爱好者。 能学到什么： 1. 如何分析和计算算法的时间复杂度，掌握不同算法性能评估的方法。 2. 线性表的存储结构，包括顺序表和链表的特点及其操作实现。 3. 图和树的遍历算法，理解深度优先搜索和广度优先搜索的应用场景。 4. 排序算法的原理和实现，包括快速排序、归并排序等。 5. 哈希表的设计与冲突解决策略，理解哈希函数的重要性。 6. 递归算法和非递归算法的设计思想，学习如何选择合适的算法实现。 阅读建议：此资源不仅包含了数据结构的基础知识点，还提供了丰富的例题和解答，适合读者进行自我测试和深化理解。在学习过程中，建议结合实际编程实践，将理论知识应用到具体的算法实现中。同时，鼓励读者在理解的基础上，自行推导和验证答案，以加深记忆和理解。
有住网（装修小程序源码）.zip
08-29
有住网（装修小程序源码）.zip
d3dcsx_46.dll
08-29
Windows 8 SDK 此 SDK 于 2012 年 11 月发布，可用于创建适用于 Windows 8 或更早版本的 Windows 应用 () 使用 Web 技术、本机和托管代码;或使用本机或托管编程模型的桌面应用。
汇编语言I/O专题教程.ppt
08-29
资源描述： 内容概要：《汇编语言》资源是一本深入浅出介绍汇编编程语言的教程，覆盖了从基础语法到高级程序设计技巧的全方位知识。通过本教程，读者将学习到汇编语言的基本概念、输入输出程序设计、中断处理、以及如何利用汇编语言直接控制硬件等核心内容。 适合人群：本资源适合对计算机底层工作原理感兴趣的学习者，包括计算机科学专业的学生、嵌入式系统开发者、硬件工程师以及任何希望深入理解计算机系统工作的编程爱好者。 能学到什么： 1. 汇编语言的基础知识，包括指令集、寄存器使用、内存管理等。 2. I/O设备的数据传送方式，如无条件传送、查询式传送和中断传送方式。 3. 程序直接控制I/O方式，包括I/O端口的使用、I/O指令的应用以及实际的I/O程序设计示例。 4. 中断传送方式的工作原理和实现，包括中断类型、中断向量表、中断处理过程和中断优先级管理。 5. 汇编语言在性能优化和硬件交互中的应用，以及如何编写高效的I/O程序。 6. 实际的汇编程序设计技巧，如发声程序、打印字符程序和中断处理程序的编写。 阅读建议：此资源不仅注重代码的编写实现，也强调对汇编语言程序设计背后的原理和硬件操作的理解
提供题库的创建和管理，试卷的设计和管理，考试的安排和管理，灵活的评分系统，全面的分析系统以及及时的反馈系统.zip
08-29
提供题库的创建和管理，试卷的设计和管理，考试的安排和管理，灵活的评分系统，全面的分析系统以及及时的反馈系统，为用户量身打造适合自己
手写迷你mybatis框架，里面使用了mybatis设计模式和框架.zip
08-29
手写迷你mybatis框架，里面使用了mybatis设计模式和框架
这是一个用C#写的总控调度系统
最新发布
08-29
c【项目资源】：包含前端、后端、移动开发、人工智能、物联网、信息化管理、数据库、硬件开发、大数据、课程资源，毕业设计等各种技术项目的源码。包括C++、Java、python、web、C#、EDA等项目的源码。 【适用人群】：适用于希望学习不同技术领域的初学者或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。 【附加价值】：项目具有较高的学习借鉴价值，也可直接拿来修改复刻。对于有一定基础或热衷于研究的人来说，可以在这些基础代码上进行修改和扩展，实现其他功能。 【沟通交流】：有任何使用上的问题，欢迎随时与博主沟通，博主会及时解答。鼓励下载和使用，并欢迎大家互相学习，共同进步。
基于微信小程序的网约巴士订票平台的设计与实现.docx
08-29
基于微信小程序的网约巴士订票平台的设计与实现.docx
HTML5设计原理探索
"HTML5设计原理" HTML5设计原理是指创建HTML5规范时所依据的核心理念和考虑因素。HTML5作为现代网页开发的基石，其设计目标是为了提升用户体验，简化开发者的工作流程，并增强网络应用的功能。在讨论HTML5设计原理...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值