1-前端基本知识-HTML

news2025/1/10 16:52:54

1-前端基本知识-HTML

文章目录

  • 1-前端基本知识-HTML
  • 总体概述
  • 什么是HTML？
    • 超文本
    • 标记语言
  • HTML基础结构
    • 文档声明
    • 根标签
    • 头部元素
    • 主体元素
    • 注释
  • HTML概念词汇：标签、属性、文本、元素
  • HTML基本语法规则
  • HTML常见标签
    • 标题标签
    • 段落标签
    • 换行标签
    • 列表标签
    • 超链接标签
    • 多媒体标签
    • 表格标签(重点)
    • 表单标签(重点)
    • 常见表单项标签(重点)
    • 布局相关标签
    • 特殊字符

总体概述

语言作用
HTML主要用于网页主体结构的搭建（页面元素和内容）
CSS主要用于页面的美化（页面元素的外观、位置、颜色、大小）
JavaScript主要用于页面元素的动态处理（交互效果）

什么是HTML？

HTML是Hyper Text Markup Language的缩写，意思是超文本标记语言

超文本

  • HTML文件本质上是文本文件
  • 普通的文本文件只能显示字符，但是HTML技术则通过HTML标签把其他网页、图片、音频、视频等各种多媒体资源引入到当前网页中，让网页有了非常丰富的呈现方式
  • 超文本就是：本身是文本，但是呈现出来的最终效果超越了文本

标记语言

  • HTML是由一系列标签组成的，每个标签都有它固定的含义和确定的页面显示效果
  • 不像编程语言一样，HTML只有标签，没有变量、常量、流程控制等

HTML基础结构

<!DOCTYPE html>
<html lang="en">
	<head>
        <meta charset="UTF-8">
        <title>我的第一个网页</title>
    </head>
    <body>
        hello html!!!
    </body>
</html>

文档声明

HTML文件第一行内容

  • HTML文档声明有两类：HTML4和HTML5（现在用）

  • HTML4的文档声明

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

  • HTML5的文档声明

    <!DOCTYPE html>

根标签

整个文档的根标签，其他所有标签都要放到里面

<html lang="en">
	.......
</html>

头部元素

用于定义文档的头部，其他头部元素都放在head标签里

  • 头部元素包括title标签、script标签、style标签、link标签、meta标签等
<html lang="en">
	.......
</html>

主体元素

body标签定义网页的主体内容，在浏览器窗口内显示的内容都定义到body标签内

注释

<!-- 注释内容 -->

HTML概念词汇：标签、属性、文本、元素

概念解释
标签代码中的一个 <> 叫做一个标签，有些标签成对出现，称之为双标签（一个叫开始标签；一个叫结束标签）；有些标签单独出现，称之为单标签
属性一般在开始标签中，用于定义标签的一些特征
文本双标签中间的文字，包含空格换行等结构
元素经过浏览器解析后，每一个完整的标签（标签+属性+文本）可以称之为一个元素

HTML基本语法规则

  • 1 根标签有且只能有一个

  • 2 无论是双标签还是单标签都需要正确关闭

  • 3 标签可以嵌套但不能交叉嵌套

  • 4 注释语法为 ，注意不能嵌套

  • 5 属性必须有值，值必须加引号，H5中属性名和值相同时可以省略属性值

  • 6 HTML中不严格区分字符串使用单双引号

  • 7 HTML标签不严格区分大小写，但是不能大小写混用

  • 8 HTML中不允许自定义标签名，强行自定义则无效

HTML常见标签

标题标签

一般用于在页面上定义一些标题性的内容，如新闻标题，文章标题等，有h1到h6六级标题

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

段落标签

一般用于定义一些在页面上要显示的大段文字，多个段落标签之间实现自动分段的效果

<body>
    <p>
        记者从工信部了解到，近年来我国算力产业规模快速增长，年增长率近30%，算力规模排名全球第二。
    </p>
    <p>
        工信部统计显示，截至去年底，我国算力总规模达到180百亿亿次浮点运算/秒，存力总规模超过1000EB（1万亿GB）。
        国家枢纽节点间的网络单向时延降低到20毫秒以内，算力核心产业规模达到1.8万亿元。中国信息通信研究院测算，
        算力每投入1元，将带动3至4元的GDP经济增长。
    </p>
    <p> 
        近年来，我国算力基础设施发展成效显著，梯次优化的算力供给体系初步构建，算力基础设施的综合能力显著提升。
        当前，算力正朝智能敏捷、绿色低碳、安全可靠方向发展。
    </p>
</body>

换行标签

单纯实现换行的标签是br，如果想添加分隔线，可以使用hr标签

<body>
        工信部统计显示，截至去年底，我国算力总规模达到180百亿亿次浮点运算/秒，存力总规模超过1000EB（1万亿GB）。
    <br>
        国家枢纽节点间的网络单向时延降低到20毫秒以内，算力核心产业规模达到1.8万亿元。
    <hr>
        中国信息通信研究院测算，算力每投入1元，将带动3至4元的GDP经济增长。
</body>

列表标签

有序列表： 分条列项展示数据的标签，其每一项前面的符号带有顺序特征

<ol>
    <li>JAVA</li>
    <li>前端</li>
    <li>大数据</li>
</ol>

image-20231030152047826

无序列表：分条列项展示数据的标签， 其每一项前面的符号不带有顺序特征

<ul>
    <li>JAVASE</li>
    <li>JAVAEE</li>
    <li>数据库</li>
</ul>

image-20231030152305563

嵌套列表：有序列表和无序列表嵌套

<ol>
    <li>
        JAVA
        <ul>
            <li>JAVASE</li>
            <li>JAVAEE</li>
            <li>数据库</li>
        </ul>
    </li>
    <li>前端</li>
    <li>大数据</li>
</ol>

image-20231030152349047

超链接标签

点击后带有链接跳转的标签 ，也叫作a标签

href属性用于定义连接

  • href中可以使用绝对路径，以/开头，始终以一个固定路径作为基准路径作为出发点
  • href中也可以使用相对路径，不以/开头，以当前文件所在路径为出发点
  • href中也可以定义完整的URL

target用于定义打开的方式

  • _blank 在新窗口中打开目标资源
  • _self 在当前窗口中打开目标资源
<body>
    <!-- 
        href属性用于定义连接
            href中可以使用绝对路径，以/开头，始终以一个路径作为基准路径作为出发点
            href中也可以使用相对路径，不以/开头，以当前文件所在路径为出发点
            href中也可以定义完整的URL
        target用于定义打开的方式
            _blank 在新窗口中打开目标资源
            _self  在当前窗口中打开目标资源
     -->
   <a href="01html的基本结构.html" target="_blank">相对路径本地资源连接</a> <br>
   <a href="/day01-html/01html的基本结构.html" target="_self">绝对路径本地资源连接</a> <br>
   <a href="http://www.atguigu.com" target="_blank">外部资源链接</a> <br>
   
</body>

多媒体标签

img（重点）图片标签，用于在页面上引入图片

<!-- 
    src
        用于定义图片的连接
    title
        用于定义鼠标悬停时显示的文字
    alt
        用于定义图片加载失败时显示的提示文字
--> 

<img src="img/logo.png"  title="尚硅谷" alt="尚硅谷logo" />

audio音频标签，用于在页面上引入一段声音

<!-- 
    src
        用于定义目标声音资源
    autoplay
        用于控制打开页面时是否自动播放
    controls
        用于控制是否展示控制面板
    loop
        用于控制是否进行循环播放
--> 
<audio src="img/music.mp3" autoplay="autoplay" controls="controls" loop="loop" />

video视频标签，用于在页面上引入一段视频

<body>
   <!-- 
    src
        用于定义目标视频资源
    autoplay
        用于控制打开页面时是否自动播放
    controls
        用于控制是否展示控制面板
    loop
        用于控制是否进行循环播放
    --> 
   <video src="img/movie.mp4" autoplay="autoplay" controls="controls" loop="loop" width="400px" />
</body>

表格标签(重点)

常规表格

  • table标签：代表表格
  • thead标签：代表表头，可以省略不写
  • tbody标签：代表表体，可以省略不写
  • tfoot标签：代表表尾，可以省略不写
  • tr标签：代表一行
  • td标签：代表行内的一格
  • th标签：自带加粗和居中效果的td
<h3 style="text-align: center;">员工技能竞赛评分表</h3>
<table  border="1px" style="width: 400px; margin: 0px auto;">
    <tr>
        <th>排名</th>
        <th>姓名</th>
        <th>分数</th>
    </tr>
    <tr>
        <td>1</td>
        <td>张小明</td>
        <td>100</td>
    </tr>
    <tr>
        <td>2</td>
        <td>李小东</td></td>
        <td>99</td>
    </tr>
    <tr>
        <td>3</td>
        <td>王小虎</td>
        <td>98</td>
    </tr>
</table>

单元格跨行

  • 通过td的rowspan属性实现上下跨行
<h3 style="text-align: center;">员工技能竞赛评分表</h3>
<table  border="1px" style="width: 400px; margin: 0px auto;">
    <tr>
        <th>排名</th>
        <th>姓名</th>
        <th>分数</th>
        <th>备注</th>
    </tr>
    <tr>
        <td>1</td>
        <td>张小明</td>
        <td>100</td>
        <td rowspan="3">
            前三名升职加薪
        </td>
    </tr>
    <tr>
        <td>2</td>
        <td>李小东</td></td>
        <td>99</td>
    </tr>
    <tr>
        <td>3</td>
        <td>王小虎</td>
        <td>98</td>
    </tr>
</table>

单元格跨列

  • 通过td的colspan属性实现左右的跨列
    <h3 style="text-align: center;">员工技能竞赛评分表</h3>
    <table  border="1px" style="width: 400px; margin: 0px auto;">
        <tr>
            <th>排名</th>
            <th>姓名</th>
            <th>分数</th>
            <th>备注</th>
        </tr>
        <tr>
            <td>1</td>
            <td>张小明</td>
            <td>100</td>
            <td rowspan="6">
                前三名升职加薪
            </td>
        </tr>
        <tr>
            <td>2</td>
            <td>李小东</td></td>
            <td>99</td>
        </tr>
        <tr>
            <td>3</td>
            <td>王小虎</td>
            <td>98</td>
        </tr>
        <tr>
            <td>总人数</td>
            <td colspan="2">2000</td>
        </tr>
        <tr>
            <td>平均分</td>
            <td colspan="2">90</td>
        </tr>
        <tr>
            <td>及格率</td>
            <td colspan="2">80%</td>
        </tr>
    </table>
  • 效果

1681197299564

表单标签(重点)

可以实现让用户在界面上输入各种信息并提交的一种标签. 是向服务端发送数据主要的方式之一

   <form action="http://www.atguigu.com" method="get">
        用户名 <input type="text" name="username" /> <br>
        密&nbsp;&nbsp;&nbsp;码 <input type="password" name="password" /> <br>
        <input type="submit"  value="登录" />
        <input type="reset"  value="重置" />
   </form>

form标签：表单标签，其内部用于定义可以让用户输入信息的表单项标签

  • action，属性之一，用于定义信息提交的服务器的地址
  • method， 属性之一，用于定义信息的提交方式
    • get方式， 数据会缀到url后，以?作为参数开始的标识，多个参数用&隔开
    • post方式，数据会通过请求体发送，不会在缀到url后

input标签：主要的表单项标签，可以用于定义表单项

  • name，属性之一，用于定义提交的参数名
  • type，属性之一，用于定义表单项类型
    • text，文本框
    • password，密码框
    • submit，提交按钮
    • reset，重置按钮

常见表单项标签(重点)

单行文本框

个性签名：<input type="text" name="signal"/><br/>

密码框

密码：<input type="password" name="secret"/><br/>

单选框

你的性别是：
<input type="radio" name="sex" value="spring" />男
<input type="radio" name="sex" value="summer" checked="checked" />女

  • name属性相同的radio为一组，组内互斥

  • 当用户选择了一个radio并提交表单，这个radio的name属性和value属性组成一个键值对发送给服务器

  • 设置checked="checked"属性设置默认被选中的radio

  • 如果属性名和属性值一样的话，可以省略属性值，只写checked即可

复选框

你喜欢的球队是：
<input type="checkbox" name="team" value="Brazil"/>巴西
<input type="checkbox" name="team" value="German" checked/>德国
<input type="checkbox" name="team" value="France"/>法国
<input type="checkbox" name="team" value="China" checked="checked"/>中国
<input type="checkbox" name="team" value="Italian"/>意大利
  • 设置checked="checked"属性设置默认被选中的checkbox

下拉框

你喜欢的运动是：
<select name="interesting">
    <option value="swimming">游泳</option>
    <option value="running">跑步</option>
    <option value="shooting" selected="selected">射击</option>
    <option value="skating">溜冰</option>
</select>
  • 下拉列表用到了两种标签，其中select标签用来定义下拉列表，而option标签设置列表项。
  • name属性在select标签中设置，value属性在option标签中设置。
  • option标签的标签体是显示出来给用户看的，提交到服务器的是value属性的值。
  • 通过在option标签中设置selected="selected"属性实现默认选中的效果。

按钮

<button type="button">普通按钮</button>或<input type="button" value="普通按钮"/>
<button type="reset">重置按钮</button>或<input type="reset" value="重置按钮"/>
<button type="submit">提交按钮</button>或<input type="submit" value="提交按钮"/>
  • 普通按钮: 点击后无效果，需要通过JavaScript绑定单击响应函数
  • 重置按钮: 点击后将表单内的所有表单项都恢复为默认值
  • 提交按钮: 点击后提交表单

隐藏域

<input type="hidden" name="userId" value="2233"/>
  • 通过表单隐藏域设置的表单项不会显示到页面上，用户看不到。但是提交表单时会一起被提交。用来设置一些需要和表单一起提交但是不希望用户看到的数据，例如：用户id等等。

多行文本框

自我介绍：<textarea name="desc"></textarea>
  • textarea没有value属性，如果要设置默认值需要写在开始和结束标签之间。

文件标签

头像:<input type="file" name="file"/>
  • 不同浏览器显示的样式有微小差异

布局相关标签

div标签：俗称"块"，主要用于划分页面结构，做页面布局

span标签：俗称"层"，主要用于划分元素范围，配合CSS做页面元素样式的修饰

    <div style="width: 500px; height: 400px;background-color: cadetblue;">
        <div style="width: 400px; height: 100px;background-color: beige;margin: 10px auto;">
            <span style="color: blueviolet;">页面开头部分</span>
        </div> 
        <div style="width: 400px; height: 100px;background-color: blanchedalmond;margin: 10px auto;">
            <span style="color: blueviolet;">页面中间部分</span>
        </div> 
        <div style="width: 400px; height: 100px;background-color: burlywood;margin: 10px auto;">
            <span style="color: blueviolet;">页面结尾部分</span>
        </div> 
    </div>

特殊字符

对于有特殊含义的字符，需要通过转移字符来表示

  • 该类字符对大小写敏感

  • 有数学符号、希腊字母、其他等字符

    &lt;span&gt;  <br>
    &lt;a href="http://www.atguigu.com"&gt;尚&nbsp;硅&nbsp;谷&lt;/a&gt; <br>
    &amp;amp;

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1183004.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

华为取消6000万订单影响在扩大，高通嘴硬强调不受影响

华为取消6000万订单影响在扩大，高通嘴硬强调不受影响

高通公布了2023年第三季度的业绩&#xff0c;业绩显示营收下滑24%&#xff0c;净利润下滑36%&#xff0c;不过高通强调预计今年四季度业绩将回升&#xff0c;意思是说华为取消订单带来的影响较小。 一、高通处境不利已延续4年时间 2019年美国对华为采取措施&#xff0c;众多中国…
阅读更多...
go程序获取工作目录及可执行程序存放目录的方法-linux

go程序获取工作目录及可执行程序存放目录的方法-linux

简介 工作目录 通常就是指用户启动应用程序时&#xff0c;用户当时所在的文件夹的绝对路径。 如&#xff1a;root用户登录到linux系统后&#xff0c;一顿cd&#xff08;change directory&#xff09;后, 到了/tmp文件夹下。此时&#xff0c;用户要启动某个应用程序&#xff0…
阅读更多...
组成原理备考学习 day1 （第一章）

组成原理备考学习 day1 （第一章）

组成原理备考学习 day1 第一章 系统概述1.1 计算机发展史1.1.1 计算机软硬件的发展计算机硬件的发展计算机软件的发展 1.1.2 计算机的分类和发展方向 1.2 计算机系统层次结构1.2.1 计算机系统的组成1.2.2 CPU及工作过程取数指令 1.2.3 I/O设备1.2.4 软件系统计算机编程语言 1.2…
阅读更多...
Android Studio新建项目下载依赖慢，只需一个操作解决

Android Studio新建项目下载依赖慢，只需一个操作解决

新建的安卓工程&#xff0c;下载依赖贼慢怎么办&#xff1f;水一篇吧。 首先新建工程&#xff0c;建好以后项目就自动开始下载了&#xff0c;底部开始出现进度条&#xff0c;但是进度条一直不怎么动&#xff0c;网速也就十几k&#xff0c;要是等他下载得下一天。 直入主题&…
阅读更多...
html+css 通过div模拟出一个表格样式，优化多个边框导致的宽度计算问题

html+css 通过div模拟出一个表格样式，优化多个边框导致的宽度计算问题

htmlcss 通过div模拟出一个表格样式&#xff0c;优化多个边框导致的宽度计算问题 实现代码 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, i…
阅读更多...
json字符串转为开闭区间

json字符串转为开闭区间

1.需求背景 1.1 前端页面展示 1.2 前后端约定交互json 按照页面每一行的从左到右 * 示例 [{"leftSymbol":">","leftNum":100,"relation":"无","rightSymbol":null,"rightNum":0}, {"left…
阅读更多...
【Unity细节】VS不能附加到Unity程序中解决方法大全

【Unity细节】VS不能附加到Unity程序中解决方法大全

&#x1f468;‍&#x1f4bb;个人主页&#xff1a;元宇宙-秩沅 hallo 欢迎 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! 本文由 秩沅 原创 &#x1f636;‍&#x1f32b;️收录于专栏&#xff1a;unity细节和bug &#x1f636;‍&#x1f32b;️优质专栏 ⭐【…
阅读更多...
Socks5代理怎么样？安全性高吗？

Socks5代理怎么样？安全性高吗？

Socks5代理IP的安全性取决于多个因素&#xff0c;包括代理服务器的信任度、代理提供商的可靠性以及你在使用代理时的需要注意一些动作。 下面分享一些关于Socks5代理IP安全性的重要考虑因素&#xff1a; 1. 代理服务器的信任度&#xff1a;使用代理时&#xff0c;您要确保选择信…
阅读更多...
【笔记】原型和原型链（持续完善）

【笔记】原型和原型链（持续完善）

概念 原型&#xff1a;函数都具有 prototype 属性&#xff0c;称之为原型&#xff0c;也称之为原型对象 1.1 原型可以放一些属性和方法&#xff0c;共享给实例对象使用&#xff08;也就是原生方法&#xff09;。 1.2 原型可以做继承原型链&#xff1a;对象都有 __proto__ 属性…
阅读更多...
「Verilog学习笔记」多功能数据处理器

「Verilog学习笔记」多功能数据处理器

专栏前言 本专栏的内容主要是记录本人学习Verilog过程中的一些知识点&#xff0c;刷题网站用的是牛客网 分析 注意题目要求输入信号为有符号数&#xff0c;另外输出信号可能是输入信号的和&#xff0c;所以需要拓展一位&#xff0c;防止溢出。 timescale 1ns/1ns module data_…
阅读更多...
HR人才测评，采用线上测评做春招秋招

HR人才测评，采用线上测评做春招秋招

从人力资源管理的工作&#xff0c;已经有好些年了&#xff0c;我只想说这不是一个有创意和创造性的工作&#xff0c;因为大部分时间我都在从事数据方面的工作。关于公司内部的文案工作先且不说&#xff0c;这里分享下我做招聘工作的过程。 每年春秋两季的校招&#xff0c;算是…
阅读更多...
安防监控EasyCVR视频汇聚平台使用海康SDK播放时，画面播放缓慢该如何解决？

安防监控EasyCVR视频汇聚平台使用海康SDK播放时，画面播放缓慢该如何解决？

视频云存储/安防监控EasyCVR视频汇聚平台基于云边端智能协同&#xff0c;支持海量视频的轻量化接入与汇聚、转码与处理、全网智能分发、视频集中存储等。安防视频平台EasyCVR拓展性强&#xff0c;视频能力丰富&#xff0c;具体可实现视频监控直播、视频轮播、视频录像、云存储、…
阅读更多...
MySQL数据库调优策略

MySQL数据库调优策略

1. 数据库调优的措施 1.1 调优的目标 尽可能节省系统资源&#xff0c;以便系统可以提供更大负荷的服务。&#xff08;吞吐量更大&#xff09; 合理的结构设计和参数调整&#xff0c;以提高用户操作 响应的速度。&#xff08;响应速度更快&#xff09; 减少系统的瓶颈&#xff0…
阅读更多...
抽象工厂模式 rust和java的实现

抽象工厂模式 rust和java的实现

文章目录 抽象工厂模式介绍抽象工厂模式包含以下几个核心角色&#xff1a;实现架构图java实现rust实现rust代码仓库 抽象工厂模式 抽象工厂模式&#xff08;Abstract Factory Pattern&#xff09;是围绕一个超级工厂创建其他工厂。该超级工厂又称为其他工厂的工厂。 在抽象工…
阅读更多...
快速灵敏的Flink2

快速灵敏的Flink2

flink基础知识 TumblingEventTimeWindows 滚动开窗 package org.apache.flink.streaming.api.windowing.assigners;import org.apache.flink.annotation.PublicEvolving; import org.apache.flink.api.common.ExecutionConfig; import org.apache.flink.api.common.typeutils.…
阅读更多...
快速了解什么是跳跃表（skip list）

快速了解什么是跳跃表（skip list）

什么是跳跃表&#xff08;skip list&#xff09; 跳跃表&#xff08;Skip List&#xff09;是一种概率性的数据结构&#xff0c;它通过在多层链表的基础上添加“快速通道”来提高搜索效率。跳跃表的效率可以与平衡树相媲美&#xff0c;即在平均和最坏的情况下&#xff0c;查找…
阅读更多...
alibaba店铺所有商品数据接口（alibaba.item_search_shop）

alibaba店铺所有商品数据接口（alibaba.item_search_shop）

阿里巴巴店铺的所有商品数据接口&#xff08;item_search_shop&#xff09;可以获取到店铺内所有商品的信息&#xff0c;包括产品的ID、SKU信息、价格、库存、图片等。这些数据可以用于构建各种业务场景&#xff0c;例如供应链管理、电商平台的价格比较、竞品分析、实时库存查询…
阅读更多...
Java练习题一

Java练习题一

韩顺平老师的Java练习题 大家可以尝试着做一做 package exer;public class Demo01 {public static void main(String[] args) {double total 100000d;int count0;while(true){if (total > 50000) {total total*0.95;count;}else if (total<50000){total total-1000;co…
阅读更多...
最新Next 14快速上手基础部分

最新Next 14快速上手基础部分

最新Next 14快速上手基础部分 最新的NEXT快速上手文档&#xff0c;2023.10.27 英文官网同步&#xff0c;版本Next14.0.0 本项目案例&#xff1a;GitHub地址&#xff0c;可以根据git回滚代码到对应知识&#xff0c;若有错误&#xff0c;欢迎指正&#xff01; 一、介绍 1.什么是…
阅读更多...
Flink SQL TopN语句详解

Flink SQL TopN语句详解

TopN 定义&#xff08;⽀持 Batch\Streaming&#xff09;&#xff1a; TopN 对应离线数仓的 row_number()&#xff0c;使⽤ row_number() 对某⼀个分组的数据进⾏排序。 应⽤场景&#xff1a; 根据 某个排序 条件&#xff0c;计算 某个分组 下的排⾏榜数据。 SQL 语法标准&am…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023