一、HTML 简介
HTML 是什么?
HTML 指的是 超文本标记语言 : HyperText Markup Language
HTML 骨架
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
<!DOCTYPE html>:
- 声明 HTML5 文档
- 声明有助于浏览器中正确显示网页
<html lang="en">:
- HTML 页面的根元素
lang="en": 表示网页语言是英语,如果想设置成中文可以写成lang="zh-CN"
<head>:
- 存放网页配置信息,不会显示在页面上(简单来说是给浏览器看的内容),比如后面用 CSS 写的内容
title之间放网页标题<meta charset="UTF-8">: 作用使用 UTF-8(国际通用编码)防止中文乱码<meta name="viewport" content="width=device-width, initial-scale=1.0">:- 视口设置:移动端适配必备。
width=device-width:宽度 = 设备屏幕宽度initial-scale=1.0:默认不缩放
<body> 元素包含了可见的页面内容(简单来说就是用户可以直接看到的),比如图片、文字
</html>: 关闭根标签,网页结束
二、HTML 标签语法
标签结构
- 标签要成对出现,中间包裹内容
<>里面放英文字母(标签名)- 结束标签比开始标签多
/, 如<body></body> - 标签分类:双标签和单标签(相对于双标签会少很多)
双标签:成对出现,如 <p></p>, 段落标签
单标签:单独出现,如 <br>, 换行标签
快速生成骨架的方法(VSCode):
在 HTML 文件中,先按下 !(英文),然后配合 Enter/Tab 键
向前缩进:Tab
向后缩进:Shift+Tab
标签嵌套关系(父子、兄弟)
父子关系(嵌套关系):子级标签换行且缩进(Tab 键)
<html>
<body></body>
</html>
兄弟关系(并列关系):兄弟标签要换行要对齐 —— 同级别关系
<head></head>
<body></body>
HTML 注释和调试
注释: <!-- 这里是注释! -->
为了方便与自己后续理解代码的含义和方便别人理解,所以根据需求写适当的注释可以提高程序的可读性
VSCode 中快速添加注释的方法:
添加/删除注释的快捷键:Ctrl+/
调试
当代码出现问题,不易看出时,可以使用调试功能
在自己使用的浏览器中 鼠标右键 -> 检查 即可查看代码,或者按快捷键 F12 或者按 Fn + F12 (笔记本电脑)
三、HTML 文本排版标签
标题标签 h1~h6
标题标签特点:<h+num></h+num>
- 以
<h+ 数字>来表示标题标签 - 文字加粗
- 随着数字增大而减小
- 独自占一行
- 自动换行
注意:h1 标签在一个网页中只能用一次,其他的标题标签可以多次使用
实践样例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>HawkPP 进阶之路</h1>
<h2>html 入门</h2>
<h3>html 进阶</h3>
<h4>css 入门</h4>
<h5>css 进阶</h5>
<h6>前端工程师 HawkPP</h6>
</body>
</html>
显示效果:

段落标签 p
段落标签特点 <p>这里是段落内容</p>
- 独占一行
- 整段段落的字体大小相同
- 段落之间存在间隙
实践样例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>HawkPP is pretty much a noob.</p>
</body>
</html>
样例显示:

换行 br、水平线 hr
<br>: 换行标签
<hr>: 水平线标签
实践样例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>HawkPP is pretty much a noob.</p>
<p>But, hawkPP want to be a full stack Web developer!</p>
<hr>
<br>
<hr>
<p>HawkPP is pretty much a noob.</p>
<p><hr>But, hawkPP want to be a full stack Web developer!</p>
<hr>
</body>
</html>
样例显示:

文本格式化标签
| 标签 | 作用 | 示例 |
|---|---|---|
<b> | 定义粗体文本(无语义) | <b>粗体</b> |
<strong> | 定义重要文本(语义强调) | <strong>重要(加粗)</strong> |
<i> | 定义斜体文本(无语义) | <i>斜体</i> |
<em> | 定义强调文本(语义强调) | <em>强调(斜体)</em> |
<mark> | 定义高亮/标记文本 | <mark>高亮</mark> |
<small> | 定义小号字体文本 | <small>小号</small> |
<del> | 定义删除文本(带删除线) | <del>删除</del> |
<ins> | 定义插入文本(带下划线) | <ins>插入</ins> |
<sub> | 定义下标文本 | H<sub>2</sub>O |
<sup> | 定义上标文本 | X<sup>2</sup> |
<u> | 定义下划线文本 | <u>下划线</u> |
<s> | 定义不准确的文本(带删除线) | <s>原价</s> |
提示:
<strong>和<em>具有语义化,利于 SEO(Search Engine Optimization(搜索引擎优化)的缩写)和屏幕阅读器<b>和<i>仅表示样式,无额外语义<s>和<del>的区别:<s>:内容"不再准确",<del>:内容"已被删除"
实践样例:
按表格顺序展示各标签的显示效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p><b>HawkPP</b> is pretty much <strong>a noob</strong>,<i>but</i> he want to be a <em>full stack developer</em>!!</p>
<p><mark>HawkPP</mark> is <small>not</small> a professional yet, <del>but</del> he is <ins>working hard</ins> to become one!!!
HawkPP want to drink H2O
HawkPP's growth rate is 10-n
HawkPP
HawkPP want to study!!
样例显示:

块级元素 div & 行内元素 span
<div>:块级 (block-level) 元素,用于创建页面结构和布局,独占一行,会以块的形式占据可用空间
<span>:内联元素 (inline),用于对文本或行内元素进行样式化或包裹,不换行,只占据其内容的宽度
实践样例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>HawkPP</div>
<div>HawkPP want to study!!</div>
<span>HawkPP want to study!!</span>
<span>HawkPP</span>
</body>
</html>
样例显示

四、HTML 图像与路径
相对路径与绝对路径
| 类型 | 写法特点 | 优点 | 缺点 | 常用场景 |
|---|---|---|---|---|
| 绝对路径 | 从根 / 完整网址开始 | 定位准确 | 换目录就失效 | 外部资源、静态 CDN |
| 相对路径 | 以当前文件为起点 | 灵活、可移植 | 依赖当前位置 | 项目内部图片、页面 |
相对路径查找方式: 从当前项目文件位置出发查找目标文件 使用文件和项目在同一个文件夹(同级文件夹) →
./使用文件和项目在其他文件夹(子文件夹文件) →文件夹名/使用文件在项目在上一级文件夹(父文件夹) →../
实践样例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 相对路径样例 -->
<!-- 文件在其他文件夹 -->
<img src = "img/1.jpg">
<!-- 文件在当前文件夹 -->
<img src = "./壁纸.jpeg">
<!-- 文件在上一文件夹 -->
<img src = "../壁纸 3.jpg" width="500px">
<!-- 绝对路径样例 -->
<img src = "C:\Users\33518\Desktop\壁纸 2.jpg">
</body>
</html>
样例显示:

图像标签 img
图片标签结构:<img src="url" alt="some_text" title = "text">
src = "url": src 指 "source",源属性的值是图像的 URL 地址,是必须属性。alt ="": 替代文本(图片加载失败时显示)width height: width(宽度)与 height(高度)属性用于设置图像的宽度与高度title: 提示文本,鼠标悬停时显示 title 引号里面的文字
实践样例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<img src = "img/1.jpg" alt = "photo1" height = "400" title = "photo1">
<img src = "./壁纸.jpeg" alt = "photo2">
<img src = "../壁纸 3.jpg" alt="photo3" width = "500">
</body>
</html>
样例显示:

五、HTML 超链接
超链接结构:<a href="URL">链接文本</a>
<a>标签:定义了一个超链接(anchor)。它是 HTML 中用来创建可点击链接的主要标签。href属性:指定目标 URL,当点击链接时,浏览器将导航到此 URLtarget属性:_blank: 在新窗口或新标签页中打开链接_self: 在当前窗口或标签页中打开链接(默认)_parent: 在父框架中打开链接_top: 在整个窗口中打开链接,取消任何框架
rel: 定义链接与目标页面的关系,nofollow: 表示搜索引擎不应跟踪该链接,常用于外部链接,noopener和noreferrer: 防止在新标签中打开链接时的安全问题
注意:当使用
target="_blank"时,新页面可以通过 window.opener 访问原页面,存在安全风险,所以使用target="_blank"时,应该添加rel = "noopener noreferrer"
实践样例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<a href="https://example.com" target="_blank" rel = "noopener noreferrer">HawkPP 的第一篇博客</a>
</body>
</html>
样例效果:

六、HTML 列表
无序列表 ul li
无序列表:ul 嵌套 li,ul 是无序列表,li 是列表条目,用于布局排列整齐的不需要规定顺序的区域,显示效果为粗体圆点(典型的小黑圆圈)
结构:
<ul>
<li> </li>
<li></li>
</ul>
实践样例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul>
<li>HawkPP</li>
<li>HawkPlusPlus</li>
</ul>
</body>
</html>
样例显示:

有序列表 ol li
有序列表:ol 嵌套 li,ol 是有序列表,li 是列表条目,布局排列整齐的需要规定顺序的区域,列表项目使用数字进行标记
结构:
<ol>
<li></li>
<li></li>
</ol>
实践样例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ol>
<li>HawkPP</li>
<li>HawkPlusPlus</li>
</ol>
</body>
</html>
样例效果:

定义列表 dl dt dd
定义列表:dl 嵌套 dt 和 dd,dl 是定义列表,dt 是定义列表的标题,dd 是定义列表的描述 / 详情
结构:
<dl>
<dt>列表标题</dt>
<dd>列表描述 / 详情</dd>
</dl>
实践样例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<dl>
<dt>HawkPP</dt>
<dd>HawkPP want to be a full stack developer!!!!</dd>
<dt>HawkPlusPlus</dt>
<dd>HawkPP is growing!!</dd>
</dl>
</body>
</html>
样例效果:

七、HTML 表格
表格基本结构
| 标签 | 名称 | 描述 | 示例代码 |
|---|---|---|---|
<table> | 表格容器 | 定义整个表格 | <table>...</table> |
<tr> | 表格行 | 定义表格中的一行 | <tr>...</tr> |
<td> | 表格单元格 | 定义普通单元格 | <td>内容</td> |
<th> | 表头单元格 | 定义标题单元格(加粗居中) | <th>标题</th> |
为方便记忆对应标签功能(提供下面对应标签的英文)
tr:tr是 table row 的缩写,表示表格的一行。td:td是 table data 的缩写,表示表格的数据单元格。th:th是 table header 的缩写,表示表格的表头单元格。
表头、表体、表尾
| 标签 | 名称 | 作用 | 示例 |
|---|---|---|---|
<thead> | 表头组 | 包裹表头行,语义化分组 | <thead><tr><th>姓名</th></tr></thead> |
<tbody> | 表体组 | 包裹表格主体内容 | <tbody><tr><td>HawkPP</td></tr></tbody> |
<tfoot> | 表尾组 | 包裹表格汇总或底部内容 | <tfoot><tr><td>rating:-1000</td></tr></tfoot> |
结构:
<table>
<thead>
<tr>
<th>列标题 1</th>
<th>列标题 2</th>
<th>列标题 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>行 1, 列 1</td>
<td>行 1, 列 2</td>
<td>行 1, 列 3</td>
</tr>
<tr>
<td>行 2, 列 1</td>
<td>行 2, 列 2</td>
<td>行 2, 列 3</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>最后一行,列 1</td>
<>最后一行,列 2
最后一行,列 3
实践样例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table>
<thead>
<tr>
<th>比赛次数</th>
<th>参赛人员</th>
<th>比赛成绩</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>HawkPP</td>
<td>59</td>
</tr>
2
HawkPP
49
比赛总次数:2
参赛人:HawkPP
平均得分:54
样例效果

注意: 如果不定义边框属性,表格将不显示边框,如果要显示边框,在
table标签里面添加边框属性border
添加边框属性后显示效果:

合并单元格(colspan、rowspan)
| 属性 | 名称 | 作用 | 示例 |
|---|---|---|---|
colspan | 跨列合并 | 横向合并 n 列 | <td colspan="2">合并 2 列</td> |
rowspan | 跨行合并 | 纵向合并 n 行 | <td rowspan="3">合并 3 行</td> |
合并规则:
colspan="n":当前单元格向右占用 n 列,被合并的单元格需删除rowspan="n":当前单元格向下占用 n 行,被合并的单元格需删除但是,不能跨表格结构标签合并单元格(thead、tbody、tfoot)。
合并单元格的步骤:明确合并的目标保留最左最上的单元格,添加属性
n(取值是数字,表示需要合并的单元格数量)跨行合并,保留最上单元格,添加属性rowspan跨列合并,保留最左单元格,添加属性colspan删除其他单元格
实践样例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table>
<thead>
<tr>
<th>比赛次数</th>
<th>参赛人员</th>
<th>比赛成绩</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<!-- 合并行 -->
<td rowspan="2">HawkPP</td>
<td>59
2
49
参赛人对自己的评价
HawkPP is a noob at this!!!
样例效果:

八、HTML 表单
表单是什么?
用于收集用户的输入信息
通过标签 <form> 来创建标签
input 标签的各种类型
基本结构: <input type="..." >
根据标签 type 属性值不同,来实现不同的功能,如:文本输入框、密码框、单选按钮、复选框等
按常用顺序排序整理如下:
| 排序 | type 值 | 说明 |
|---|---|---|
| 1 | text | 单行文本输入框 |
| 2 | password | 密码输入框,输入内容显示为圆点或星号 |
| 3 | submit | 提交按钮 |
| 4 | checkbox | 复选框(多选框) |
| 5 | radio | 单选框 |
| 6 | button | 普通按钮 |
| 7 | file | 文件上传控件 |
| 8 | email | 邮箱输入框,提交时自动校验邮箱格式 |
| 9 | number | 数字输入框,可配合 min/max/step 使用 |
| 10 | tel | 电话号码输入框,移动端调出数字键盘 |
| 11 | hidden | 隐藏字段,不显示但会提交数据 |
| 12 | date | 日期选择器 |
| 13 | reset | 重置按钮,清空表单内容 |
| 14 | url | 网址输入框,需包含 http:// 或 https:// |
| 15 | search | 搜索框,带有清除按钮样式 |
| 16 | range | 滑块控件,用于范围选择 |
| 17 | color | 颜色选择器,返回十六进制色值 |
| 18 | image | 图像提交按钮 |
| 19 | time | 时间选择器 |
| 20 | datetime-local | 本地日期时间选择器 |
| 21 | month | 月份选择器 |
| 22 | week | 周选择器 |
单选框、多选框
| 属性名 | 作用 | 单选框(radio)补充说明 | 多选框(checkbox)补充说明 |
|---|---|---|---|
| name | 控件分组名称 | 同组 name 必须相同,实现互斥单选,只能选中一个 | 同组 name 必须相同,代表同一组选项,支持多选 |
| value | 控件提交取值 | 必须设置,同组内 value 不可重复,用于提交实际数据 | 必须设置,同组内 value 不可重复,用于提交实际数据 |
| checked | 默认选中状态 | 同组内最多只能有一个 checked,保证默认单选 | 同组内可以有多个 checked,支持默认多选 |
单选框
结构:<input type="radio">
多选框
结构: <input type="checkbox">
实践样例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form>
<h1>Welcome to HawkPP's Website!!!</h1>
<!-- 单选框 -->
<!-- 按性别分类,即用 name 自定义分组,分为男、女、保密用 value 组内元素有哪些 -->
<input type="radio" name = "gender" value = "male">男
<input type="radio" name = "gender" value="female">女
<!-- checked 设置默认选中 -->
<input type="radio" name = "gender" value="secret" checked>保密
<br>
Please to guess HawkPP's hobby!!!!
编程
跑步
样例效果:

下拉菜单 select
下拉菜单:select 嵌套 option,select 是下拉菜单整体,option 是下拉菜单的每一项 结构如下:
<select>
<option></option>
<option></option>
<option selected> </option>
</select>
name用于后端,表单提交时,后端通过 name 获取选中的值,必须设置才能正确提交数据id用于前端 JS 操作、CSS 样式、label 关联都需要使用 id
实践样例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form>
<ins>Please to guess where HawkPP comes from!!!</ins>
<br>
<select name="county">
<option value="China">China</option>
<option value="USA">USA</option>
<option value="UK">UK</option>
<option value="Extraterrestria">Extraterrestria</option>
</>
样例效果:

文本框和文本域 textarea
文本框:<input type="text">
文本域:多行输入文本的表单控件,<textarea>默认提示文字</textarea>
样例实践:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form>
<h1>Welcome to HawkPP's Website!!!</h1>
<strong>Please to register an account!!</strong>
<br>
<!-- 文本框 -->
id:<input type = "text" name="id"><br>
password:<input type = "password" name="password">
<br>
<u>What do you think of the HawkPP website?</u>
<br>
<!-- 文本域 -->
<>Write your comment!!
样例效果:

label 标签与按钮
label 标签
作用:用于为表单元素定义标注(标签),关联表单控键
写法:
- 包裹法(隐式关联):
<label> <input></label>把表单控件放在<label>标签里面,点击文字就能聚焦到输入框 - for 属性法(显式关联):
<input> <label for="XX"> </label>用 for 属性指向控件的 id,标签和控件可以分开写。
样例实践:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form>
<!-- 隐式 -->
<label><input type="checkbox">我已阅读并同意《用户协议》 </label>
<br>
<!-- 显式 -->
<input type = "checkbox">
<label for="safe">我已阅读并同意《用户协议》</label>
<br>
</form>
</body>
</html>
样例效果:

通过实操发现有 label 和无 label 的区别如下: 使用
label标签增大点击范围的表单控件,如文本框,点击文字可以直接调整选择与否,其他的表单控件如密码框、上传文件、单选框、多选框、下拉菜单、文本域这些也有类似的效果
按钮
结构:<button>按钮</button>
| type 值 | 作用 | 使用场景 |
|---|---|---|
submit | 默认值,点击后提交表单 | 表单提交按钮 |
reset | 重置表单内所有输入框为初始值 | 清空表单 |
button | 普通按钮,无默认行为 | 配合 JavaScript 执行自定义操作 |
样例实践:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form>
<h1>Welcome to HawkPP's Website!!!</h1>
<strong>Please to register an account!!</strong>
<br>
<!-- 文本框 -->
id:<input type = "text" name="id"><br>
password:<input type = "password" name="password">
<br>
<button type="submit">提交</button>
<button =>重置
样例效果:

综合 HTML 实践
题目描述
结合上述这篇博客内容,从零开发一个纯 HTML 个人博客网站。 要求不使用 CSS、不使用 JS,只通过 HTML 标签完成结构、内容、布局与交互。
任务要求
- 构建标准规范的 HTML5 页面骨架,包含完整头部配置与页面结构。
- 使用文本排版标签搭建博客标题、段落、分割线与文本格式,让文章内容清晰易读。
- 插入个人头像或博客配图,正确使用相对/绝对路径与图片属性。
- 实现超链接跳转,可以包括外部链接、文章链接、页面内导航链接。
- 使用三类列表展示博客分类、文章目录、个人信息介绍。
- 完成一个留言表单,包含输入框、单选、多选、下拉菜单、文本域、按钮等完整功能。
- 使用语义化标签区分页面区域,代码规范、注释清晰、结构合理。
- 页面底部使用页脚区域展示版权信息。
代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HawkPP's website</title>
</head>
<body>
<!-- ==================== 页面容器开始 ==================== -->
<!-- 最外层容器,宽度 1500px,作为整个页面的父容器 -->
<div>
<!-- ==================== 头部区域开始 ==================== -->
<!-- 页面头部,浅天蓝色背景 -->
<div>
<!-- 博客主标题,水平居中,移除默认下边距 -->
<h1> HawkPP's first blog website</h1>
</div>
<!-- ==================== 头部区域结束 ==================== -->
<!-- ==================== 菜单区域开始 ==================== -->
<!-- 左侧导航菜单,金黄色背景,宽度 200px,高度 1150px,向左浮动 -->
<div>
<!-- 菜单标题:加粗显示 -->
<strong>目录</strong><br>
<!-- 锚点链接:点击跳转到博主简介区域 -->
<a =>HawkPP 的简介
HTML 入门
HTML 进阶
CSS 入门
CSS 进阶
HawkPP 的简介
个人简介:Hi, I'm HawkPP, a CS student.I'm still learning the basics of C/C++ and Python, and I'm slowly getting into data structures and algorithms.I enjoy building small projects like simple games and personal websites, though I know I have a lot to improve.Thanks for stopping by my blog—I'm here to share my learning journey and grow together with others!
HTML 基础
HTML 进阶
CSS 基础
CSS 进阶
留言板
你的名字:
你的邮箱:
留言内容:
评价: 中评
好评
好好评
留言类型选择:
QQ
email
WeChat
提交留言
重置留言
版权归HawkPP所有
显示效果:



