HTML入门学习笔记

这篇具有很好参考价值的文章主要介绍了HTML入门学习笔记。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

HTML学习笔记详解

01 初识HTML

  • HTML

HTML,英文全称为 Hyper Text Markup Language,中文翻译为超文本标记语言,其中超文本包括:文字,图片,音频,视频,动画等

  • 目前

目前主流使用的是HTML5+CSS3

  • HTML的优势

    • 主流浏览器都支持
      • 微软
      • GOOGLE
      • 苹果
    • 市场的需求
    • 跨平台(类似JVM)
  • W3C标准

    • W3C

      • Wold Wide Web Consortium(万维网联盟)

      • 成立于1994年,Web技术领域最权威和具影响力的国际中立性技术标准机构

      • http://www.w3.org

      • http://www.chinaw3c.org

    • W3C标准包括

      • 结构化标准语言(HTML( 超越文本标记语言)、XML(配置文件 ))
      • 表现标准语言(CSS(表现标签语言 ))
      • 行为标准(DOM(文档对象模型 )、ECMAScript(JavaScript))

02 HTML基本结构

  • <body>、</body>等成对的标签,分别叫开放标签和闭合标签。
  • 单独呈现的标签(空元素),如"
    ;"意为用“/”来关闭元素
<!--DOCTYPE:告诉浏览器,本文件将使用什么规范-->
<!DOCTYPE html>
<html lang="en">
    <!-- head标签代表网页头部 -->
<head>
    <!--meta描述性标签,它用来描述我们网站的一些信息-->
    <!-- meta一般用来做SEO -->
    <meta charset="UTF-8">
    <meta name = "keywords" content = "学习前端">
    <meta name = "description" content = "can can need">
    <!--title网页标题(显示在上面的窗口里)-->
    <title>myFirstpage</title>
</head>
<!-- body标签代表网页主体 -->
<body>
        我的第一个web网页</p>
        Hello world!
        <image: src:"">
</body>
</html>

03 网页基本标签

  • 标题标签
  • 段落标签
  • 换行标签
  • 水平线标签
  • 字体样式标签
  • 注释和特殊符号
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>基本标签学习</title>
</head>
<body>

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

<!-- 段落标签  -->
<!-- 使用<p>和</p>  -->
<h3> 两只老虎 </h3>
<p>两只老虎,两只老虎,</p>
<p>跑得快,跑得快,</p>
<p>一只没有眼睛,</p>
<p>一只没有尾巴,</p>
<p>真奇怪!真奇怪!</p>
<p>两只老虎,两只老虎,</p>
<p>跑得快,跑得快,</p>
<p>一只没有耳朵,</p>
<p>一只没有尾巴,</p>
<p>真奇怪!真奇怪!</p>

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

<!-- 使用<br/>  -->
<!-- 注意两种换行方式的不同  -->
<h3> 两只老虎 </h3>
两只老虎,两只老虎,<br/>
跑得快,跑得快,<br/>
一只没有眼睛,<br/>
一只没有尾巴,<br/>
真奇怪!真奇怪!<br/>
两只老虎,两只老虎,<br/>
跑得快,跑得快,<br/>
一只没有耳朵,<br/>
一只没有尾巴,<br/>
真奇怪!真奇怪!<br/>

<hr/>

<!-- 粗体 斜体  -->
<h3>字体样式标签</h3>
粗体:<strong>I LOVE HTML</strong><br/>
斜体:<em>I LOVE HTML</em><br/>

<hr/>
<!-- 特殊符号  -->
<h3>特殊符号</h3>
1、空格:&nbsp;<br/>
空&nbsp;&nbsp;&nbsp;&nbsp;格<br/>
注意,按空格也会有,但是多个space只会显示一个<br/>
空    格<br/>
2、大于小于符号<br/>
&gt;:大于号<br/>
&lt;:小于号<br/>
&copy;:版权号<br/>
<!--
     特殊符号不记得时可以上百度查询
-->

</body>
</html>

04 图像标签

  • 常见的图像格式
    • JPG
    • GIF
    • PNG
    • BMP
    • .........
  • 调用格式
<img src="path" alt="text" title="text" width = "x" height = "y"/>

path:指图片加载路径(必填)

  • 建议使用相对地址(推荐),绝对地址(也可以,但不推荐)

HTML入门学习笔记

HTML入门学习笔记

  • 在这里可以看到copy过来的绝对地址或者在本project中的地址。

../:--上一级目录

alt:图片名字,指如果图片无法正常加载会出现的替代文本

title:当鼠标置于图片上时会显示图片名称

width:设置宽度

height:设置高度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>俾斯麦号战列舰</title>
</head>
<body>
      <h1>俾斯麦号战列舰</h1>
      <img src="../resource/image/bismarck.jpg" alt="俾斯麦号战列舰" title="bismarck" width = "1960" height="1080">
</body>
</html>

HTML入门学习笔记

05 链接标签

  • 使用格式
<a href = "path" target = "目标窗口位置">链接文本或图像</a>
<!-- a标签
    href:必填。表示要跳转到哪个页面
    target:表示窗口在哪里打开
        _blank  在新标签中打开
        _self   在当前页面的页面中打开
-->
  • 文本超链接
  • 图像超链接
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接标签学习</title>
</head>
<body>
<a name = "#top"></a>
<a href="imageTest.html" target="_blank">点我查看俾斯麦号高清大图</a><br/>
<a href="imageTest.html" target="_blank">
    <img src="../resource/image/bismarck.jpg" alt="俾斯麦号战列舰" title="bismarck" width = "120" height="100">
</a>
<p><img src="../resource/image/bismarck.jpg" alt="俾斯麦号战列舰" title="bismarck" width = "1960" height="1080"></p>
<p><img src="../resource/image/bismarck.jpg" alt="俾斯麦号战列舰" title="bismarck" width = "1960" height="1080"></p>
<p><img src="../resource/image/bismarck.jpg" alt="俾斯麦号战列舰" title="bismarck" width = "1960" height="1080"></p>
<p><img src="../resource/image/bismarck.jpg" alt="俾斯麦号战列舰" title="bismarck" width = "1960" height="1080"></p>
<p><img src="../resource/image/bismarck.jpg" alt="俾斯麦号战列舰" title="bismarck" width = "1960" height="1080"></p>
<p><img src="../resource/image/bismarck.jpg" alt="俾斯麦号战列舰" title="bismarck" width = "1960" height="1080"></p>
<a href="#top">点我回到顶部</a><br/>
<a name = "down">down</a>
</body>
</html>
  • 首先明确,超链接一共三类
    • 页面间链接
      • 从一个页面链接到另一个页面
    • 锚链接
    • 功能性链接

06 块元素和行内元素

  • 块元素
    • 无论内容多少,该元素独占一行
    • 例如(p,h1-h6,......)
  • 行内元素
    • 内容撑开宽度,左右都是行内元素的可以排在一行
    • (a.strong.em......)

07 列表标签

  • 什么是列表
    • 列表就是信息资源的一种展示形式。它可以使信息结构化和条理化,并以列表的形式显示出来,以便浏览者能更快捷的获得相应的信息。
  • 列表的分类
    • 无序列表
    • 有序列表
    • 自定义列表
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--有序列表
显示带数字
常用范围:试卷、问答之类
-->
<ol>
  <li>Java</li>
  <li>Python</li>
  <li>C/C++</li>
  <li>Linux</li>
</ol>

<hr>

<!--无序列表
显示只有黑点之类的类似markdown类似的排序
常用范围:导航、侧边栏
-->
<ul>
    <li>Java</li>
    <li>Python</li>
    <li>C/C++</li>
    <li>Linux</li>
</ul>


<hr>
<!--自定义列表
dl:标签
dt:列表名称
dd:列表内容
常用范围:常见于网站底部的导航栏
-->

<dl>
    <dt>计算机编程语言</dt>
    <dd>Java</dd>
    <dd>Python</dd>
    <dd>C/C++</dd>
    <dd>Linux</dd>
</dl>

</body>
</html>

08 表格标签

  • 为什么使用表格

    • 简单通用
    • 结构稳定
  • 基本结构

    • 单元格
    • 跨行
    • 跨列
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>table</title>
</head>
<body>

<table border="1px">
  <tr>
    <td colspan="3" text>学生成绩</td>
  </tr>
    <td rowspan="2">吴同</td>
    <td>语文</td>
    <td>100</td>
  </tr>
    <td>数学</td>
    <td>100</td>
  </tr>
    <td rowspan="2">肉食动物</td>
    <td>语文</td>
    <td>100</td>
  </tr>
    <td>数学</td>
    <td>100</td>
  </tr>
</table>

</body>
</html>

09 视频和音频

  • 视频元素
    • video
  • 音频元素
    • audio
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>媒体元素调用</title>
</head>
<!-- 音频和视频
src:资源路径
controls:控制条
outplay:自动播放
ps:有些人的自动播放功能可以不太好使,可能是浏览器设置问题。解决思路可以上网去查。
-->
<body>

<video src="../resource/video/xxx.mp4" controls autoplay></video>

<audio src="../resource/audio/xxx.mp3" controls></audio>
</body>

</html>

10 页面结构分析

元素名 描述
header 标题头部区域的内容(用户页面或页面中的一块区域)
footer 标记脚部区域的内容(用于整个页面或页面的一块区域)
section Web页面中的一块独立区域
article 独立的文章内容
aside 相关内容或应用(常用于侧边栏)
nav 导航类辅助内容
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<header>
    <h2>网页头部</h2>
</header>

<section>
    <h2>网页主体</h2>
</section>

<footer>
    <h2>网页脚部</h2>
</footer>

</body>
</html>

11 iframe内联框架

  • 使用结构
<iframe src="path" name="mainFrame" width="??px" height="??px"></iframe>
  • path:引用页面地址
  • mainFrame:框架识别名
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>iframe网站内联框架</title>
</head>
<body>

<iframe src="https://www.bilibili.com/" frameborder="0" width="1000px" height="800px"></iframe>

<!--<iframe src="//player.bilibili.com/player.html?aid=55631961&bvid=BV1x4411V75C&cid=97257967&page=11"
        scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>-->

</body>
</html>
  • 有些网站如baidu等拒绝使用内联框架访问,所以显示不成功可以换一个网站,如b站
  • 下一个示例是在内联窗口中打开跳转网页
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>iframe网站内联框架</title>
</head>
<body>

<iframe src="" name = "bgm" frameborder="0" width="1000px" height="800px"></iframe>
<a href = "媒体元素学习.html" target="bgm">点击跳转</a>

</body>
</html>

12 初识表单和提交

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
</head>
<body>
      <h1>登录注册</h1>
<!--表单form

action:表单提交的位置,可以是网站,也可以是一个请求处理的地址
method: post get提交方式
        get方式提交:我们可以在url中看到我们提交的信息,不安全,但是高效
        post方式提交:比较安全,可以传输大文件
-->    
    
    
      <form action="myFirstpage.html" method="post">
          <!--文本输入框:input type="text"-->
          <p>用户:<input type="text" name = "username"></p>
          <!--密码框:input = "password"-->
          <p>密码:<input type="password" name = "pwd"></p>
          <p>
              <input type="submit">
              <input type="reset">
              <input type="button" value="注册" name = "register">
          </p>
      </form>
</body>
</html>
  • 但事实上,使用post也十分危险,按F12打开开发者工具,进入网络监听(Network,然后在左边点击提交

HTML入门学习笔记

  • 可以看到右下角出现一个提交文件,点开后在上面选择payload,即可以看到传输的相关内容

HTML入门学习笔记

HTML入门学习笔记

  • 因此其实这个也不安全,具体何种方法传输此类保密信息比较安全,需后期进一步学习。

13 表单元素格式

属性 说明
type 指定元素类型。text、password、checkbox(多选)、radio(单选)、reset、file、hidden、image和button。默认为text
name 指定表单元素的名称(后期java程序读取该属性)
value 元素的初始值。type为radio时必须指定一个值
size 指定表单元素的初识宽度。当type为text或password时,表单元素的大小以字符为单位。对于其他类型,宽度以像素为单位(px)
maxlength type为text或password时,输入的最大字符数
checked type为radio或checkbox时,指定按钮是否被选中

14 文本框和单选框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
</head>
<body>
<h1>注册</h1>
<form action="表单学习.html" method="get">
    
    <!-- 文本输入框 input type="text"
    value="xxx" 默认初始值
    maxlength="x" 最长能写几个字符
    size="x" 文本框的长度
    -->
    <p>用户:<input type="text" name = "username"></p>
    
    
    <p>密码:<input type="password" name = "pwd"></p>
    <!--单选框标签
         input type="radio"
         value="boy"单选框的值,选中这个项传输的也是这个
         name = ""分组类别。如果想让两个选项在一个组中就必须统一name
         最后面的中文是填充在单选框中的内容
      -->
    <p>性别:
        <input type="radio" value="boy" name = "sex"/>男
        <input type="radio" value="girl" name = "sex"/>女
    </p>
    <p>
        <input type="submit">
        <input type="reset">
    </p>
</form>

</body>
</html>

15 多选框和按钮

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
</head>
<body background="../resource/image/checkin.jpg"
      style="background-repeat:no-repeat;
               background-attachment:fixed;
               background-size:100% 100%; ">
<h1 style="text-align:center;" >注册</h1>
<form action="表单学习.html" method="get">
    <!-- 文本输入框 input type="text"
    value="xxx" 默认初始值
    maxlength="x" 最长能写几个字符
    size="x" 文本框的长度
    -->
    <p style="text-align:center;" >用户:<input type="text" name = "username"></p>

    <!--密码框
    input type="password"
    会自动将输入字符转变为*
    -->
    <p style="text-align:center;" >密码:<input type="password" name = "pwd"></p>

    <!--单选框
    input type="radio"
    value="xx" 单选框的值
    name = "xx" 表示哪一组
    checked 在此单选框下的默认取值
    最后写单选框内容
    -->
    <p style="text-align:center;" >性别:
        <input type="radio" value="boy" name = "sex" checked/>男
        <input type="radio" value="girl" name = "sex"/>女
    </p>

    <!--多选框
    input type="checkbox"
    value="xx" 多选框的值
    name = "xx" 表示哪一组
    最后写多选框内容
    -->
    <p style="text-align:center;" >爱好:
        <input type="checkbox" value="sleep" name = "hobby"/>睡觉
        <input type="checkbox" value="learn" name = "hobby"/>学习
        <input type="checkbox" value="chat" name = "hobby"/>聊天
        <input type="checkbox" value="game" name = "hobby"/>游戏
    </p>
    
    
    <p style="text-align:center;" >
        <input type="submit">
        <input type="reset">
    </p>
    <p style="text-align:center;">
        电子木鱼:
        <input type="button" value="功德+1" name="gongde"/>
    </p>
   <!-- <p style="text-align:center;">
        <input type="image" src="../resource/image/bismarck.jpg" width="128px" height="80px">
    </p>-->

    <!--下拉框选择-->
    <p style="text-align:center;">
        国籍:
        <select name = "国籍" >
            <option value="ch">中国</option>
            <option value="usa">美国</option>
            <option value="swz">瑞士</option>
            <option value="jpa" selected>日本</option>
        </select>
    </p>

    <!-- 文本域 -->
    <p style="text-align:center;">
        反馈:
        <textarea name="textarea" cols="50" rows="10"></textarea>
    </p>

    <!--文件域-->
    <p style="text-align:center;">
        上传文件:
        <input type="file" name="files">
        <input type="button" value="提交" name="upload">
    </p>

</form>

</body>
</html>
  • html中按钮有4种

    • input type="button" 普通按钮
    • input type="image" 图像按钮
    • input type="submit" 提交按钮
    • input type="reset" 重置
  • 除了button按钮外,剩余三种都会产生不同效果。

  • image点击会直接进入上方action对象中

  • 提交按钮和image类似

  • 重置即清空当前页面的表单内容

16 列表框文本域和文件域

<!--下拉框选择-->
    <p style="text-align:center;">
        国籍:
        <select name = "国籍" >
            <option value="ch">中国</option>
            <option value="usa">美国</option>
            <option value="swz">瑞士</option>
            <option value="jpa" selected>日本</option>
        </select>
    </p>

    <!-- 文本域 
         cols="50" rows="10"
    -->
    <p style="text-align:center;">
        反馈:
        <textarea name="textarea" cols="50" rows="10"></textarea>
    </p>

    <!--文件域
             type="file" name="files
     -->
    <p style="text-align:center;">
        上传文件:
        <input type="file" name="files">
        <input type="button" value="提交" name="upload">
    </p>

17 搜索框滑块和简单验证

    <!--邮箱验证-->
    <p style="text-align:center;">邮箱:
        <input type="email" name="email">
    </p>

    <!--URL-->
    <p style="text-align:center;">URL:
        <input type="url" name="url">
    </p>

    <!--数字
    input type="number"
    max:最大值
    min:最小值
    step:点击右边上下按钮增减步长
    -->
    <p style="text-align:center;">数量:
        <input type="number" name="name" max="100" min="0" step="1">
    </p>


    <!--音量
    input type="range"
    max:最大值
    min:最小值
    -->
    <p style="text-align:center;">音量:
        <input type="range" name="voic" max="100" min="0">
    </p>

    <!--搜索
       input type="search"
     -->
    <p style="text-align:center;">搜索:
        <input type="search" name="search">
    </p>

18 表单应用

  • 隐藏域 hidden
  • 只读 readonly
  • 禁用 disabled

拓展:使用label增强鼠标可用性,即点击某部分会进入某一编辑部分

 <p style="text-align:center;">
        <label for="mark">点点看吧</label>
    </p>
    <p style="text-align:center;">
        <input type="text" name="text" id="mark">
    </p>

19 表单初级验证

  • 为什么要进行初级验证
    • 对输入内容进行简单判断,从而降低服务器负载
    • 安全,进行初级验证可以对用户输入内容进行简单查验,对系统有一定保护作用
  • 常用方式:
    • placeholder 提示信息
    • required 非空判断
    • pattern 正则表达式

20 总结

HTML入门学习笔记文章来源地址https://www.toymoban.com/news/detail-423499.html

到了这里,关于HTML入门学习笔记的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 初识自动驾驶技术之旅 第一课 学习笔记

      ​  🎬  江城开朗的豌豆 :个人主页  📝   个人网站   :《 江城开朗的豌豆🫛 》   🔥  个人专栏  : 《 VUE 》 《 javaScript 》 ⛺️  生活的理想,就是为了理想的生活 ! ​ 目录   📚 前言   📘 1.  自动驾驶人才需求与挑战                   📘 2.  Apo

    2024年02月09日
    浏览(41)
  • [word] word 怎样批量把英文单词的首字母全部改成大写 #笔记#其他#学习方法

    word 怎样批量把英文单词的首字母全部改成大写 word在处理长文档的过程中,有时候一个单词在多页重复出现。如果要把该单词的首字母改成大写,如果一个一个的改,费时费力。 方法:替换功能 如:我要把camtasia批量改成Camtasia 第一步:点击【替换】

    2024年02月21日
    浏览(49)
  • LuoJiaAI学习笔记——1.初识LuoJiaSET和LuoJiaNET

    存在问题: 缺乏一个标准的大规模图像智能解读任务的 样本数据库 ,使用户能够有效地检索、访问、标记和分享数据。 忽略了遥感数据的 幅尺寸大、尺度变化大、多数据通道、地理知识嵌入等 特点,从而影响了计算效率和准确性。 LuoJiaSET拥有一个 广泛的公开可用的图像

    2024年01月17日
    浏览(48)
  • (二)小程序学习笔记——初识:标签、数据绑定、指令介绍

    (1)src图片的地址 (2)mode:图片剪裁、缩放的模式 (3)show-menu-by-longpress:长按图片显示的菜单,复制,收藏,保存,转发等 (4)lazy-load:图片懒加载 (在滑动到上下三屏)以后展示图片 (1)user-select:本文是否可选,用于长按选择文本 (2)space:显示连续空格 ensp:显

    2024年04月28日
    浏览(33)
  • 初识C语言——详细入门(系统性学习day4)

    目录 前言 一、C语言简单介绍、特点、基本构成 简单介绍: 特点: 基本构成: 二、认识C语言程序 标准格式: 简单C程序: 三、基本构成分类详细介绍    (1) (2)数据类型 计算机中常用存储单位 数据类型的取值范围 打印输入类型 (3)常量和变量 常量的分类:

    2024年02月08日
    浏览(37)
  • Python学习笔记_基础篇(一)_初识python

    Python简介 python的创始人为吉多·范罗苏姆(Guido van Rossum)。1989年的圣诞节期间,吉多·范罗苏姆为了在阿姆斯特丹打发时间,决心开发一个新的脚本解释程序,作为ABC语言的一种继承。 Python和其他语言的对比: C 和 Python、Java、C#等 C语言: 代码编译得到 机器码 ,机器码在

    2024年02月13日
    浏览(45)
  • 019 - STM32学习笔记 - Fatfs文件系统(一) - FatFs文件系统初识

    019 - STM32学习笔记 - Fatfs文件系统(一) - FatFs文件系统初识 最近工作比较忙,没时间摸鱼学习,抽空学点就整理一点笔记。 1、文件系统 在之前学习Flash的时候,可以调用 SPI_FLASH_BufferWrite 函数,将数据内容写入到Flash芯片中,需要使用的时候,可以再从Flash中读取出来,但是

    2024年02月15日
    浏览(33)
  • 「HTML和CSS入门指南」label 详解

            在 HTML 中, label 标签用于定义表单元素的标签。使用 label 标签可以帮助您提高表单的可访问性,并使用户更易于理解和使用表单。 以下是 label 标签的基本语法: 其中: for  属性指定与哪个表单元素相关联。 input  元素的  id  属性必须与  for  属性的值相同,

    2024年02月07日
    浏览(49)
  • 「HTML和CSS入门指南」th 标签详解

            在 HTML 中, th 标签用于创建表格中的表头单元格。表头单元格通常用于标识每列中的数据,并且与普通单元格不同之处在于它们具有更强的语义含义。 以下是 th 标签的基本语法: 其中: table  标签用于创建表格。 thead  标签用于标识表格的表头部分。 tr  标签

    2024年02月08日
    浏览(49)
  • 「HTML和CSS入门指南」aside 标签详解

            在 HTML 中, aside 标签用于表示与页面或文章内容相关,但又不属于主要内容的侧边栏、导航区域、广告、标注等内容。通常用于包含附加信息、引用和其他次要元素。 以下是 aside 标签的基本语法: 请注意, aside 标签必须闭合,并且任何文本都应该放置在起始和

    2024年02月08日
    浏览(45)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包