HTML5 案例学习笔记
2024-03-31 07:43:34
目录
1 meta标签
1.1 简介
1.2 属性及取值
1.3 案例
2 常用标签
2.1 标题
2.2 段落
2.3 换行
2.4 水平分隔线
2.5 删除线
2.6 下划线
2.7 加粗
2.8 斜体
2.9 字体
2.10 图片
2.11 超链接
2.12 视频
3 列表
3.1 有序列表
3.1.1 简介
3.1.2 标签
3.1.3 type属性
3.2 无序列表
3.2.1 简介
3.2.2 标签
3.2.3 type属性
3.3 自定义列表
3.3.1 简介
3.3.2 标签
3.4 综合案例：个人介绍
4 内联框架
4.1 iframe简介
4.2 iframe的属性
4.3 iframe的优点
4.4 案例
5 表格
5.1 简介
5.2 标签
5.3 table的属性
5.4 表格的合并
5.5 tr的属性
5.6 案例
5.6.1 水平+垂直表格
5.6.2 还原Excel表格
5.6.3 电商品牌墙
6 表单
6.1 简介
6.2 form的属性
6.2.1 action属性
6.2.2 method属性
6.2.3 name属性
6.2.4 target属性
6.2.5 表单标签公有的属性（html4标准）
6.3 input标签
6.3.1 input公有属性说明（html4标准）
6.3.2 type属性的取值
6.4 下拉列表
6.4.1 简介
6.4.2 select的属性
6.4.3 option的属性
6.5 fieldset与legend标签
6.6 textarea标签
6.6.1 简介
6.6.2 属性
6.7 label标签
6.7.1 简介
6.7.2 属性
6.8 案例
6.8.1 常用表单标签总结
6.8.2 阿里注册页面
1 meta标签
1.1 简介
<meta>标记用来描述一个HTML网页文档的属性，也称为元信息（meta-information），例如作者、日期和时间、网页描述、关键词、页面刷新等。
- name属性用于描述网页，其值最重要的是description、keywords和robots。
- http-equiv属性用于提供HTTP协议的响应头报文，它回应给浏览器一些有用的信息，以帮助正确和精确地显示网页内容。
1.2 属性及取值
1.3 案例
<!doctype html>
<html lang="en"><head><title>中国教育和科研计算机网CERNET</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"><meta name="keywords" content="中国教育网,中国教育,科研发展,教育信息化……" /><meta name="description" content="中国教育网是中国最权威的教育门户网站" /><meta name="copyright" content="www.edu.cn" /><meta name="robots" content="all" /> <!--允许搜索引擎机器人抓取网页所有信息--></head><body><p>这是中国教育和科研计算机网的头部部分标记的应用</p></body>
</html>
2 常用标签
2.1 标题
标签：<h1></h1>（h1-h6）
2.2 段落
标签：<p></p>
2.3 换行
标签：<br/>
2.4 水平分隔线
标签：<hr>
2.5 删除线
标签：<del></del>
2.6 下划线
标签：<u></u>
2.7 加粗
标签：<b></b>
2.8 斜体
标签：<i></i>
2.9 字体
标签：<font></font>
2.10 图片
标签：<img />
属性：
- src：图片所在的绝对路径/相对路径（.同级路径 ..上一级路径）
- align：设置图像的对齐方式
- width
- height
- title： 起到注释的作用，当鼠标放在图片上时，会显示文字
- border：设置图片边框
- alt：设置图片的替换文本，当浏览器无法载入图像时，将显示替换文本
2.11 超链接
标签：<a></a>
target属性值：
- _blank 在新窗口中打开被链接文档。
- _self 默认。在相同的框架中打开被链接文档。
- _parent 在父框架中打开被链接文档。
- _top 在整个窗口中打开被链接文档。
- framename 在指定的框架中打开被链接文档。
2.12 视频
标签：<video></video>
- controls属性: 规定浏览器应该为视频提供播放控件（播放、暂停、定位、音量、全屏切换）
3 列表
3.1 有序列表
3.1.1 简介
有序列表用来表示一组有序的、内容相似的的数据信息，自带顺序编号。
3.1.2 标签
- ol标签：有序列表
- li标签:有序列表项
3.1.3 type属性
规定列表的项目符号的类型。取值范围：A、a、1、i、Ι
3.2 无序列表
3.2.1 简介
无序列表用来表示一组无序的、内容相似的的数据信息，一般导航栏都是用无序列表实现。
3.2.2 标签
- ul标签：无序列表
- li标签：无序列表项
3.2.3 type属性
取值范围： circle(空心圆)、disc(实心圆)、square(正方形)
3.3 自定义列表
3.3.1 简介
自定义列表用来表示一组无序的、内容相似的、具备标题的数据信息。
3.3.2 标签
- dl标签：自定义列表
- dt标签：自定义标题
- dd标签：自定义内容
3.4 综合案例：个人介绍
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>个人介绍</title></head><body><h1>个人介绍</h1><h3>基本信息</h3><font size="3" color="darkblue"><p>姓名 百里乘风</p><p>性别 男</p><p>生日 1999.07.04</p></font><h3>教育背景</h3><img src="./同大.jpg" width="600" height="400" title="大同大学" alt="大同大学"/><p>本科院校 山西大同大学</p><p>专业 计算机科学与技术</p><h3>兴趣爱好</h3><ol type="1"><li>阅读</li><li>写作</li><li>运动</li><li>自媒体</li><li>视频剪辑</li><h3>作品展示：</h3><video src="myVideo.mp4" width="600" height="400" controls="controls"></video></ol><h3>人生梦想</h3><ul type="disc"><li>实现财务自由</li><li>成为一个温润如玉的人</li><li>关注并投身于公益事业</li><li>游遍祖国的大好河山</li></ul></body>
</html>
4 内联框架
4.1 iframe简介
iframe标签用于在当前网页上引入其他网页资源（非同源也可）
4.2 iframe的属性
- align：规定如何根据周围的元素来对齐此框架（取值：Left、Right、Top、Middle、bottom）
- src：规定在iframe中显示的文档的URL
- frameBorder：规定了框架是否有边框（1：有边框 0：无边框）
- scrolling：规定是否在iframe中显示滚动条（yes：有滚动条 no：无滚动条 auto：有需要时显示滚动条）
- width/height：定义iframe的宽度/高度
4.3 iframe的优点
切换子页面时不需要刷新父页面，提高请求速度。
4.4 案例
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>内联框架</title></head><body><iframe src="./resume/resume.html" name="left" align="left" width="700" height="1000" frameborder="1" scrolling="auto" ></iframe><iframe src="./resume/resume.html" name="right" align="right" width="700" height="1000" frameborder="1" scrolling="auto"></iframe></body>
</html>
5 表格
5.1 简介
网页中的表格：以多行、多列来显示信息的方式。在网页中使用如下标签显示（由于表格会生成更多额外代码，因此在管理端页面使用较多）。
5.2 标签
- table：表格标签
- thead：表头单元格，在此列可以定义表头，表头可以限定表体的宽度。
- tbody：表格的主体
- tr：表格中的行
- td：标准单元格
- th：表头中的单元格
5.3 table的属性
- border(边框)：border=“number”
- background(背景)： background =“背景图片”
- bgcolor(背景颜色)：bgcolor = “颜色”
- width、height：width= “” height=“”
- align：表格的位置由<table>元素的align属性决定，可选值包括left、center、right。
- valign：表格内文字的位置是由<td>的align和valign决定的，valign可选值包括top、middle、bottom。
- cellpadding(填充)：设置单元格边框与内容之间的距离
- cellspacing(间距)：设置单元格之间的距离。
5.4 表格的合并
- colspan属性：跨列合并单元格(colspan = “number”)
- rowspan属性：跨行合并单元格(rowspan = “number”)
5.5 tr的属性
- align：设置行内容的水平对齐方式，属性值有left、center、right
- valign：设置行内容的垂直对齐方式，属性值有top、middle、bottom
5.6 案例
5.6.1 水平+垂直表格
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>水平+垂直表格</title></head><body><!-- 水平表头 --><h4 align="center">水平表头</h4><table border="1" cellpadding="5" cellspacing="2" align="center"><tr><th>姓名</th><th>性别</th><th>年龄</th></tr><tr><td>张三</td><td>男</td><td>30</td></tr></table><!-- 垂直表头 --><h4 align="center">垂直表头</h4><table border="1" cellpadding="5" cellspacing="2" align="center"><tr><th>姓名</th><td>张三</td></tr><tr><th>性别</th><td>男</td></tr><tr><th>年龄</th><td>30</td></tr></table></body>
</html>
5.6.2 还原Excel表格
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>表格练习</title><style type="text/css">th,td{height: 0.625rem; width: 3.125rem; text-align: center;}#th_title{height: 2rem;}</style></head><body><table border="1" cellpadding="5" cellspacing="2" align="center" width="760"><tr><th colspan="12" id="th_title">1105班信息表</th></tr><tr><th>学号</th><th>姓名</th><th colspan="2">电话</th><th colspan="8" rowspan="2">座位表</th></tr><tr><td>1</td><td>xx</td><td colspan="2">11111</td></tr><tr><td>2</td><td>xxx</td><td>11</td><td>111</td><td colspan="2">程云博</td><td colspan="2">石锐坚</td><td colspan="2">李宏伟</td><td colspan="2">刘涛</td></tr><tr><td>3</td><td>xxx</td><td colspan="2">11111</td><td>杜少雄</td><td colspan="2">张学伟</td><td>侯宇航</td><td> </td><td>梁朝辉</td><td>纪治鹏</td><td> </td></tr><tr><td>4</td><td>xxx</td><td>11</td><td>11</td><td colspan="2">申高昂</td><td colspan="2">李超军</td><td> </td><td>高源好</td><td> </td><td>宋英姿</td></tr><tr><td>5</td><td>xx</td><td colspan="2">11111</td><td>王嘉敏</td><td>靳宇升</td><td colspan="2">曹腾渊</td><td colspan="2">药宇</td><td colspan="2">杨凯</td></tr></table></body>
</html>
5.6.3 电商品牌墙
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>表格-天猫品牌墙</title></head><body><h3 align="center">天猫品牌墙</h3><table align="center"><tr><td><a href="https://baidu.com"><img src="data:image1/icon1.jpg" width="150"></a></td><td><a href="https://baidu.com"><img src="data:image1/icon2.jpg" width="150"></a></td><td><a href="https://baidu.com"><img src="data:image1/icon3.jpg" width="150"></a></td><td><a href="https://baidu.com"><img src="data:image1/icon4.jpg" width="150"></a></td><td><a href="https://baidu.com"><img src="data:image1/icon5.jpg" width="150"></a></td></tr><tr><td><a href="https://baidu.com"><img src="data:image1/icon6.jpg" width="150"></a></td><td><a href="https://baidu.com"><img src="data:image1/icon7.jpg" width="150"></a></td><td><a href="https://baidu.com"><img src="data:image1/icon8.jpg" width="150"></a></td><td><a href="https://baidu.com"><img src="data:image1/icon9.jpg" width="150"></a></td><td><a href="https://baidu.com"><img src="data:image1/icon10.jpg" width="150"></a></td></tr><tr><td><a href="https://baidu.com"><img src="data:image1/icon11.jpg" width="150"></a></td><td><a href="https://baidu.com"><img src="data:image1/icon12.jpg" width="150"></a></td><td><a href="https://baidu.com"><img src="data:image1/icon13.jpg" width="150"></a></td><td><a href="https://baidu.com"><img src="data:image1/icon14.jpg" width="150"></a></td><td><a href="https://baidu.com"><img src="data:image1/icon15.jpg" width="150"></a></td></tr><tr><td><a href="https://baidu.com"><img src="data:image1/icon16.jpg" width="150"></a></td><td><a href="https://baidu.com"><img src="data:image1/icon17.jpg" width="150"></a></td><td><a href="https://baidu.com"><img src="data:image1/icon18.jpg" width="150"></a></td><td><a href="https://baidu.com"><img src="data:image1/icon19.jpg" width="150"></a></td><td><a href="https://baidu.com"><img src="data:image1/icon10.jpg" width="150"></a></td></tr></table></body>
</html>
6 表单
6.1 简介
表单标签form：浏览器端的输入项容器，提交时会提交form表单内所有用于输入的子标签内容。
表单的作用：在动态网页技术中，主要用于用户与服务器的交互。
6.2 form的属性
6.2.1 action属性
设定处理表单数据提交的服务器url地址。如action=“mailto：liwu001@126.com”
6.2.2 method属性
设定数据传送到服务器的方式，常用的取值有get、post
get请求：声明本次请求的目的是从服务器获取数据。
post请求：声明本次请求的目的是向服务器传送数据。
get与post的区别：
1、目的不同
2、提交方式不同（一个在请求头，一个在请求体）
3、提交数据长度不同
- get：不超过255个字符
- post：默认为不受限制
4、安全性：设置get后，信息显示在浏览器地址栏，安全性低
6.2.3 name属性
规定表单的名称。
6.2.4 target属性
规定在何处打开 action URL。
6.2.5 表单标签公有的属性（html4标准）
- id：表单的唯一性标识
- name：规定表单标签的名称，在提交数据时，以name属性作为检索值。
- disabled：规定禁用当前表单元素。
- readonly：规定表当前表单元素为只读元素。
- value：设定或获取当前表单元素的输入值。
readonly和disabled的区别：
- readonly只针对input(text / password)和textarea有效。
- disabled对于所有的表单元素都有效，包括select, radio, checkbox, button等。
6.3 input标签
6.3.1 input公有属性说明（html4标准）
- name：设定input 元素的名称。
- value：设定 input 元素的值。
- checked：设定此 input 元素首次加载时应当被选中（单选按钮、复选框）
- maxlength：规定输入字段中的字符的最大长度。
- type：设定当前输入标签的类型。
6.3.2 type属性的取值
- text：定义单行的输入字段，用户可在其中输入文本。默认宽度为 20 个字符。
- password：定义密码字段。该字段中的字符被掩码。
- radio：定义单选按钮。
- checkbox：定义复选框。
- file：定义输入字段和 "浏览"按钮，供文件上传。
- button：表单中的普通按钮，按钮内容为文字，点击后没有默认行为。
<input type=“button“ value=“按钮名称” />- image：表单中的普通按钮，显示内容为图片，点击后没有默认行为。
<input type=“image“ value=“按钮名称” src="1.png" />- submit：表单中的提交按钮，点击自动将表单内容提交给服务器，可以使用js阻止提交。
<input type=“submit“ value=“按钮名称” />- reset：重置表单内容，点击后表单内所有输入元素的值将被重置为网页加载前的状态。
<input type=“reset“ value=“重置” />PS：由于input在定义按钮时无法同时显示文字和图片，建议使用button标签定义按钮
<button type=“submit/reset/button”>按钮的文字 <img src = “anniu.png”/>
<button>6.4 下拉列表
6.4.1 简介
下拉列表使用select、option标签共同完成下拉框的显示。
6.4.2 select的属性
- multiple：规定可选择多个选项。
- size：规定可见下拉框选项的数量。
6.4.3 option的属性
- selected：规定下拉列表中被选项目的索引号
6.5 fieldset与legend标签
<fieldset> 标签将表单内容的一部分打包，生成一组相关表单的字段。
当一组表单元素放到 <fieldset> 标签内时，浏览器会以特殊方式来显示它们，它们可能有特殊的边界、3D 效果，或者甚至可创建一个子表单来处理这些元素。
<!DOCTYPE HTML>
<html>
<head><meta charset="UTF-8"><title>鱼C-零基础入门学习Web（Html5+Css3）</title>
</head>
<body><form><fieldset><legend>健康信息</legend>身高：<input type="text" />体重：<input type="text" /></fieldset></form><p>如果表单周围没有边框，请更换浏览器。</p>
</body>
</html>
6.6 textarea标签
6.6.1 简介
textarea是设定多行文本的输入控件（文本域）
6.6.2 属性
- cols：规定文本区内的可见宽度。
- rows：规定文本区内的可见行数。
6.7 label标签
6.7.1 简介
label是input标签的文字描述标签，可以代替输入标签响应用户的操作。
6.7.2 属性
- for：输入标签的id属性值。
<Label for="InputBox">姓名</Label>
<input id="InputBox" type="text"> - accesskey：用户的快捷键值。
<Label for="InputBox" accesskey＝"N">姓 名</Label><input id="InputBox" type="text"> 6.8 案例
6.8.1 常用表单标签总结
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>常用表单标签总结</title></head><body><form><table border="1" width="90%" align="center"><caption><h2 align="center">常用表单标签总结</h2></caption><tr height="40"><th width="10%">文本框：</th><th width="40%"><input type="text" size="35" maxlength="10"></th><th width="10%">密码框：</th><th width="40%"><input type="password" size="35" maxlength="10"></th></tr><tr height="40"><th>单选框：</th><th><input type="radio" name="answer">A <input type="radio" name="answer" checked="checked">B <input type="radio" name="answer">C</th> <th>复选框：</th><th><input type="checkbox" name="hobby" checked="checked">学习 <input type="checkbox" name="hobby" checked="checked">运动 <input type="checkbox" name="hobby">电影 <input type="checkbox" name="hobby">游戏</th></tr><tr height="40"><th>文件浏览框：</th><th><input type="file" size="40"></th><th>下拉列表：</th><th><select style="width:100px;"><option selected="selected">请选择</option><option>清华大学</option><option>北京大学</option><option>复旦大学</option></select></th></tr><tr height="40"><th>颜色拾取器：</th><th><input type="color"><部分浏览器不兼容></th><th>数量选择器：</th><th><input type="number"><部分浏览器不兼容></th></tr><tr height="40"><th>日期选择器：</th><th><input type="date"><部分浏览器不兼容></th><th>时间选择器：</th><th><input type="time"><部分浏览器不兼容></th></tr><tr height="40"><th>月份选择器：</th><th><input type="month"><部分浏览器不兼容></th><th>星期选择器：</th><th><input type="week"><部分浏览器不兼容></th></tr><tr height="40"><th>滑块：</th><th><input type="range" min="0" max="100"><部分浏览器不兼容></th><th>邮箱输入框：</th><th><input type="email"><部分浏览器不兼容></th></tr><tr height="40"><th>普通按钮：</th><th><input type="button" value="按钮"></th><th>图片按钮：</th><th><input type="image" src="data:image1/button_1.jpg" style="width: 100px;height: 40px;"></th></tr><tr height="80"><th>文本域：</th><td colspan="3" align="center"><textarea rows="4" cols="80">随便说点什么……</textarea></td></tr><tr height="40"><td colspan="2" align="center"><input type="submit" value="提交表单按钮"></td><td colspan="2" align="center"><input type="reset" value="重置表单按钮"></td></tr></table></form></body>
</html>
6.8.2 阿里注册页面
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>阿里注册页面</title></head><body><table border="0" align="center" width="960"><tr><td><img src="./images/head.jpg" width="954" height="107"></td></tr><tr><td><form><table width="100%" border="0" cellpadding="4" cellspacing="15"><tr><td align="right" width="200">电子邮箱：</td><td><input name="email" type="email" size="35" maxlength="20"></td></tr><tr><td align="right">会员登录名：</td><td><input name="username" type="text" size="35" maxlength="20"></td></tr><tr><td align="right">密码：</td><td><input name="password" type="password" size="35" maxlength="20"></td></tr><tr><td align="right">再次输入密码：</td><td><input name="password2" type="password" size="35" maxlength="20"></td></tr><tr><td align="right">会员身份：</td><td><input name="usertype" type="radio" value="1" checked="checked"/>买家 <input name="usertype" type="radio" value="2"/>卖家 <input name="usertype" type="radio" value="3"/>两者都是</td></tr><tr><td align="right">验证码：</td><td><input name="code" type="text" size="15" maxlength="4"><img src="./images/verycode.gif" name="code" width="132" height="55" align="absmiddle"/><a href="#">看不清？换一张</a></td></tr><tr><td></td><td><input name="register" type="image" src="./images/btn_reg.gif"></td></tr><tr><td></td><td><textarea name="read" cols="60" rows="5" >欢迎阅读阿里巴巴公司（阿里巴巴）服务条款协议(下称"本协议")，您应当在使用服务之前认真阅读本协议全部内容，且对本协议中加粗字体显示的内容，阿里巴巴督促您应重点阅读。本协议阐述之条款和条件适用于您使用阿里巴巴中文网站（所涉域名为：Alibaba.com.cn、alibaba.cn、1688.com，下同），所提供的在全球企业间(B-TO-B)电子市场(e-market)中进行贸易和交流的各种工具和服务(下称"服务")。</textarea></td></tr></table></form></td></tr><tr><td><img src="./images/foot.jpg" width="954" height="61"></td></tr></table></body>
</html>
HTML5 案例学习笔记相关推荐
- 前端HTML5+CSS3学习笔记
HTML5+CSS3学习笔记 ==CSS第一天== 一.css简介 二.css语法规范 三.css代码风格 四.css选择器的作用 五.css基础选择器 1.标签选择器: 2.类选择器 3.多类名选择 ...
- 千峰HTML5+CSS3学习笔记
千峰HTML5+CSS3学习笔记 文章目录 千峰HTML5+CSS3学习笔记 写在前面 1. 前言 2. HTML 3. CSS 3.1 选择器 3.2 CSS属性 4. 盒子模型 4.1 溢出属性 ...
- ArcGIS案例学习笔记-找出最近距离的垂线
ArcGIS案例学习笔记-找出最近距离的垂线 联系方式:谢老师,135-4855-4328,xiexiaokui@qq.com 目的:对于任意矢量要素类,查找最近距离并做图 数据: 方法: 0. 计算 ...
- ArcGIS案例学习笔记2_2_等高线生成DEM和三维景观动画
ArcGIS案例学习笔记2_2_等高线生成DEM和三维景观动画 计划时间:第二天下午 教程:Pdf/405 数据:ch9/ex3 方法: 1. 创建DEM SA工具箱/插值分析/地形转栅格 2. 生成 ...
- ArcGIS模型构建器案例学习笔记-字段处理模型集
ArcGIS模型构建器案例学习笔记-字段处理模型集 联系方式:谢老师,135-4855-4328,xiexiaokui@qq.com 由四个子模型组成 子模型1:判断字段是否存在 方法:python工 ...
- ArcGIS案例学习笔记2_1
ArcGIS案例学习笔记2_1 联系方式:向日葵,135_4855_4328,xiexiaokui#qq.com 时间:第二天上午 案例1:学校选址 内容:栅格数据分析 教程:pdf page=323 ...
- ArcGIS案例学习笔记4_2_城乡规划容积率计算和建筑景观三维动画
ArcGIS案例学习笔记4_2_城乡规划容积率计算和建筑景观三维动画 概述 计划时间:第4天下午 目的:城市规划容积率计算和建筑三维景观动画 教程: pdf page578 数据:实验数据\Chp13 ...
- Unity MVC 案例学习笔记《二》
MVC 案例学习笔记 注册事件,就是把事件加入到事件字典 发送事件,并携带参数,就是在事件字典中遍历找到具体的 controller 进行处理 using System.Collections; us ...
- HTML5+CSS3学习笔记（第1章）HTML基础
HTML5+CSS3学习笔记(第1章)HTML基础 今天是居家隔离第一天,自学HTML5. 1.1HTML概述 什么是HTML HTML是一种标记语言.(Hyper Text Markup langu ...
最新文章
- 零起点学算法01——第一个程序Hello World！
- Docker不再是唯一的选择
- ITK:将BinaryMorphologicalClosingFilter应用于给定LabelMap的一个LabelObject
- django18：auth模块
- prototype.js1.5平面结果导读图
- 一次Web请求返回406原因与解决方案
- Java社区对Java发布周期声明的反应
- 提升代码格调——JavaScript 数组的 reduce() 方法入门
- 《别输在不会表达上》— 综合素质提升书籍
- 我的编程之路——VB篇
- Chrome浏览器下载zoom录像
- UESTC 1636 梦后楼台高锁，酒醒帘幕低垂 最小生成树Kruskal算法的扩展
- arduino调试的流程图_Arduino 的调试以及相关问题
- 什么是 HTTPS 的证书信任链？自己给自己发行不行？
- 【企业安全实战】开源HIDS OSSEC部署与扩展使用
- 台式电脑win7旗舰版 怎么调节屏幕亮度 显示器太亮了！
- Mybatis源码基础解析
- 世界杯开幕战-德国战车VS哥队
- 营地第一天之今天我是伙委
- xt6使用技巧_凯迪拉克XT6：这几个“驾驶技巧”并不省油