HTML基础(20200610)

时间:2020-06-10
本文章向大家介绍HTML基础(20200610),主要包括HTML基础(20200610)使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

HTML基础

01 搞懂HTML是什么

​ 超文本标记语言

什么是标记

<a>aa</a>

02 Sublime Text 的安装和使用

03 HTML的常用标签介绍和文档结构

h1~h6 		标题(1级~6级)
p 			段落标签
strong/em  	加粗、加斜体
hr/br   	分割线/换行
ul/ol/dl	列表/有序列表/无序类别
li			列表
div/span	容器/ 用来组合文档中的行内元素
table		表格 
				tr 表行
				th 表头、td表体,表数据
a			超链接
img			图片
form		用于为用户输入创建HTML表单
input		输入
textarea	文本区域,多行输入
select		下拉单选/下拉复选

4学习H{1~6}系列标题,为你的网页添加标题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题标签</title>
</head>
<body>
	<h1>MJJ</h1>
		MJJ老师非常帅
	<h2>MJJ</h2>
	<h3>333</h3>

</body>
</html>

05学习p标签,为你的文章添加段落

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题标签</title>
</head>
<body>
	
	<h2>女人越这样和男人说话,他就越喜欢你
	</h2

	<h4>01</h4>

	<p>大多数走不到最后的情侣或者夫妻,都有个通病“不懂得好好说话,”简单来说就是一段感情想要长久的维持下去,那么就一定需要沟通和交流,而这里的沟通和交流指的是有效沟通和交流,能够为你们增进感情的交流,而不是消磨感情的无效沟通。
	</p>
	

	<p>特别是当你们长期生活在一个屋檐下的时候,如果因为你们不懂得好好说话,那么势必会直接影响到你们之间的关系,千万不要小瞧语言的魅力和说话的力量,在前面就有分享一个爱开玩笑,没有好好说话的情侣导致即将步入婚姻的情侣而分道扬镳。</p>



	<h4>02</h4>	

</body>
</html>

06 学习strong和em加入强调语气

strong 加粗

em 斜体

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题标签</title>
</head>
<body>
	
	<h2>女人越这样和男人说话,他就越<em>喜欢你</em>
	</h2

	<h4>01</h4>

	<p>大多数走不到最后的情侣或者夫妻,都有个通病“不懂得好好说话,”简单来说就是一段感情想要长久的维持下去,那么就一定需要沟通和交流,而这里的沟通和交流指的是有效沟通和交流,能够为你们增进感情的交流,而不是消磨感情的无效沟通。
	</p>
	

	<p>特别是当你们长期生活在一个屋檐下的时候,<strong>如果因为你们不懂得好好说话,那么势必会直接影响到你们之间的关系,</strong>>
	千万不要小瞧语言的魅力和说话的力量,在前面就有分享一个爱开玩笑,没有好好说话的情侣导致即将<em>步入婚姻</em>的情侣而分道扬镳。</p>



	<h4>02</h4>	

	<strong>02</strong>

	02 

</body>
</html>

07 学习br标签,为你的内容添加换行

​ br 单闭合标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>body标签中的常用标签</title>
</head>
<body>
	<h2>《暮江吟》</h2>
	一道残阳铺水中,<br>
	半江瑟瑟半江红。<br>
	可怜九月初三夜,<br>
	露似真珠月似弓。<br>
</body>
</html>

08 HTML的特殊符号

https://tool.chinaz.com/tools/htmlchar.aspx

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>body标签中的常用标签</title>
</head>
<body>
	<h2>《&nbsp;&nbsp;暮江吟》</h2>
	一道残阳铺水中,<br>
	半江瑟瑟半江红。<br>
	可怜九月初三夜,<br>
	露似真珠月似弓。<br>

	© CopyRight 2002-2020,
	&copy;
	&clubs;7  梅花<br>
	&hearts;8 黑桃
</body>
</html>

09 学习hr标签,为段落之间添加分割线

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
	<p>火车飞驰过暗夜里的村庄,月光,总是太容易让思念寂寞,太容易让人觉得孤独。</p>
	<hr>
	<p>每一枚被风吹起的蒲公英,都载满了一双眼睛的深情告别与一个目光的依依不舍。</p>
	<hr>
	<p>那天,我拿着行李,带上一个背影的祝福与惆怅,挥手告别了这片土地。我不知道,我何时会回来。</p>

</body>
</html>

10 学习ul标签为你的网页添加新闻列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
	<!--unorderde list无序列表-->
	<h2>热门要闻</h2>
	<ul>
		<li>一起感悟"蓝色信念"  抗击新冠疫情中国答卷</li>
		<li>初心印记② 三个“微镜头”蕴含的使命担当</li>
		<li>塞中情谊坚不可摧  美国抗议种族歧视  艰苦卓绝历程</li>
		<li>"白色正义"成美国毒疮  西方领导人何以"欲言又止"</li>
		<li>韩媒:驻韩美军在韩国设立四所生化武器实验室</li>
	</ul>

	

</body>
</html>

11 学习ol为网页添加热门点击排行榜(有序列表)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
	<!--unorderde list无序列表-->
	<h2>web前端课程排行榜</h2>
	<ol>
		<li>yue框架学习</li>
		<li>JavaScript</li>
		<li>React全家桶</li>
	</ol>
	

</body>
</html>

12 学习dl为你的网页添加无序列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
	<!--definition list 定义列表-->
	<dl>
		<dt>帮助中心</dt>
		<!--定义描述 dd definition description-->
		<dd>账号管理</dd>
		<dd>购物指南</dd>
		<dd>订单操作</dd>
		
	</dl>
</body>
</html>

13 table标签的介绍和使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>制作表格</title>
</head>
<body>
	<table>
		<tr></tr>
			<th>产品名称</th>
			<th>品牌</th>
			<th>数量</th>
			<th>入库时间</th>
		<tr></tr>
			<td>电视机</td>
			<td>海尔</td>
			<td>200</td>
			<td>2018-09</td>
		<tr></tr>
			<td>电冰箱</td>
			<td>海尔</td>
			<td>230</td>
			<td>2019-09</td>
		<tr></tr>
			<td>电脑</td>
			<td>苹果</td>
			<td>223</td>
			<td>2019-09</td>

	</table>

</body>
</html>

14 简单的css样式为表格添加边框

<table border="1" cellspacing="0">
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>制作表格</title>
</head>
<body>
	<table border="1" cellspacing="0">
		<tr></tr>
			<th>产品名称</th>
			<th>品牌</th>
			<th>数量</th>
			<th>入库时间</th>
		<tr></tr>
			<td>电视机</td>
			<td>海尔</td>
			<td>200</td>
			<td>2018-09</td>
		<tr></tr>
			<td>电冰箱</td>
			<td>海尔</td>
			<td>230</td>
			<td>2019-09</td>
		<tr></tr>
			<td>电脑</td>
			<td>苹果</td>
			<td>223</td>
			<td>2019-09</td>
	</table>


</body>
</html>

15 学习caption为表格添加标题

​ 商品清单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>制作表格</title>
</head>
<body>
	<table border="1" cellspacing="0">
		<caption>商品清单</caption>
		<tr></tr>
			<th>产品名称</th>
			<th>品牌</th>
			<th>数量</th>
			<th>入库时间</th>
		<tr></tr>
			<td>电视机</td>
			<td>海尔</td>
			<td>200</td>
			<td>2018-09</td>
		<tr></tr>
			<td>电冰箱</td>
			<td>海尔</td>
			<td>230</td>
			<td>2019-09</td>
		<tr></tr>
			<td>电脑</td>
			<td>苹果</td>
			<td>223</td>
			<td>2019-09</td>
	</table>


</body>
</html>

16 表格的横向和纵向合并使用

<!--横向合并,合并列数-->
		<th colspan="2">数量和入库时间</th>
<!-- 纵向合并,合并的是列 ,数字和实际数字有点不一致,-->
		<td rowspan="3">海尔</td>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>制作表格</title>
</head>
<body>
	<table border="1" cellspacing="0">
		<caption>商品清单</caption>
		<tr></tr>
			<th>产品名称</th>
			<th>品牌</th>
			<!--横向合并,合并列数-->
			<th colspan="2">数量和入库时间</th>
		<tr></tr>
			<td>电脑</td>
			<td>苹果</td>>
 			<td>223</td>
			<td>2019-09</td>
		<tr></tr>
			<td>电视机</td>
			<!-- 纵向合并,合并的是列 ,数字和实际数字有点不一致,-->
			<td rowspan="3">海尔</td>
			<td>200</td>
			<td>2018-09</td>
		<tr></tr>
			<td>电冰箱</td>
 			<td>230</td>
			<td>2019-09</td>
	
	</table>


</body>
</html>

17 学习a标签为你的网页添加超链接

百度一下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>超链接</title>
</head>
<body>
	<a href="https://www.baidu.com" title="点击一下,了解更多">百度一下</a>
	
</body>
</html>

18 在新的浏览器窗口打开新的链接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>超链接</title>
</head>
<body>
	<a href="https://www.baidu.com" title="点击一下,了解更多" target="_self">百度一下</a>

	<a href="https://www.baidu.com" title="点击一下,了解更多" target="_blank">百度一下</a>
	<!-- target 默认值_self;当值为_blank时,打开新的空白页面 -->
	
</body>
</html>

19 标签在当前网页上进行跳转

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>超链接</title>
</head>
<body>
	<p id='top'></p>
	<a href="https://www.baidu.com" title="点击一下,了解更多" target="_blank">百度一下</a>
	<!-- target 默认值_self;当值为_blank时,打开新的空白页面 -->
	<p>小圆圈</p>
	<p>小圆圈</p>
	<p>小圆圈</p>
	<p>小圆圈</p>
	<p>小圆圈</p>
	<p>小圆圈</p>
	<p>小圆圈</p>
	<p>小圆圈</p>
	<p>小圆圈</p>
	<p>小圆圈</p>
	<p>小圆圈</p>
	<p>小圆圈</p>

	<p>小圆圈</p>

	<p>小圆圈</p>

	<p>小圆圈</p>

	<p>小圆圈</p>

	<p>小圆圈</p>

	<p>小圆圈</p>

	<p>小圆圈</p>
	<p>小圆圈</p>

	<p>小圆圈</p>

	<p>小圆圈</p>

	<p>小圆圈</p>

	<p>小圆圈</p>

	<p>小圆圈</p>

	<p>小圆圈</p>

	<p>小圆圈</p>

	<p>小圆圈</p>
	<p>小圆圈</p>

	<p>小圆圈</p>

	<p>小圆圈</p>

	<p>小圆圈</p>

	<p>小圆圈</p>

	<p>小圆圈</p>
	<a href="#top">回到顶部</a>

</body>
</html>

20 发送邮件

​ mailto

联系我们

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
	<a href="mailto:cf2928@163.com">联系我们</a>
</body>
</html>

21 img标签为你的网页添加绚丽的图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>img标签</title>
</head>
<body>
	<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/118523c32ca7651471276352d8170105.jpg?thumb=1&w=1533&h=575&f=webp&q=90">
	<img src="E:\Chrome_download\woman-695448_960_720.jpg">

</body>
</html>

22 img标签src属性的路径问题

​ 相对路径

​ image/1.png

​ ../ 上级目录

​ ... / 上上级目录

23 img标签的属性讲解

src 图片地址

width 图片宽度,height 图片高度,两者写一个即可等比例缩放

alt 图片加载失败时,提示语

title 悬浮鼠标至图片上时显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>img标签</title>
</head>
<body>
	<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/118523c32ca7651471276352d8170105.jpg?thumb=1&w=1533&h=575&f=webp&q=90" width="200">
	
	<img src="E:\Chrome_download\woman-695448_960_720.jpg" width="200" height="200" alt="一个耿直的微笑,图片加载失败,我就出来了" title="愁啥呢,悬浮显示">
	<!-- 如果为保证图像不失真,宽、高设置任意一个,即可 等比缩放-->

</body>
</html>

24 表单控件input的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>form标签</title>
</head>
<body>
	<form>
		<input type="text" name="">
		<input type="password" name="">
		<!-- tpye默认值为text -->
	</form>

</body>
</html>

25 将网页的数据提交到服务器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>form标签</title>
</head>
<body>
	<form action="http://www.baidu.com" method="post">
		<!-- action 提交服务器 method提交方式-->
		<input type="text" value="" name="" placeholder='请输入用户名'>
		<!-- value 默认值 -->
		<input type="password" name="" placeholder="请输入密码">
		<!-- tpye默认text值 -->
		<input type="submit" value="登陆" name="">
		<!-- submit 提交 value值修改提交按钮名称-->
	</form>

</body>
</html>

26 单选框实现性别选择

通过p标签,改变结构

radio 单选框
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>form标签</title>
</head>
<body>
	<form action="http://www.baidu.com" method="post">
		<!-- action 提交服务器 method提交方式-->
		
		<p>
			<input type="text" value="" name="" placeholder='请输入用户名'>
		<!-- value 默认值 -->
		</p>

		<p>
		<input type="password" name="" placeholder="请输入密码">	
				<!-- tpye默认text值 -->
		</p>
		<p>
			男:<input type="radio" name="sex" checked="checked">
			女:<input type="radio" name="sex">
			<!-- radio 单选框 两个选项用一个name值,实现互斥  checked 默认选择-->
		</p>

		<p>
		<input type="submit" value="登陆" name="">
		<!-- submit 提交 value值修改提交按钮名称-->
		</p>
		
	</form>

</body>
</html>

27 复选框购买你想要的课程

checkbox 复选框
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>form标签</title>
</head>
<body>
	<form action="http://www.baidu.com" method="post">
		<!-- action 提交服务器 method提交方式-->
		
		<p>
			<input type="text" value="" name="" placeholder='请输入用户名'>
		<!-- value 默认值 -->
		</p>

		<p>
		<input type="password" name="" placeholder="请输入密码">	
				<!-- tpye默认text值 -->
		</p>
		<p>
			男:<input type="radio" name="sex" checked="checked">
			女:<input type="radio" name="sex">
			<!-- radio 单选框 两个选项用一个name值,实现互斥  checked 默认选择-->
		</p>
		<h4>购买的课程</h4>
		<p>
			web前端:<input type="checkbox" name="" checked="
			checked">
			python开发:<input type="checkbox" name="">
			java编程:<input type="checkbox" name="">
		</p>


		<p>
		<input type="submit" value="登陆" name="">
		<!-- submit 提交 value值修改提交按钮名称-->
		</p>
		
	</form>

</body>
</html>

28 下拉列表实现单选

select 下拉单选
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>form标签</title>
</head>
<body>
	<form action="http://www.baidu.com" method="post">
		<!-- action 提交服务器 method提交方式-->
		
		<p>
			<input type="text" value="" name="" placeholder='请输入用户名'>
		<!-- value 默认值 -->
		</p>

		<p>
		<input type="password" name="" placeholder="请输入密码">	
				<!-- tpye默认text值 -->
		</p>
		<p>
			男:<input type="radio" name="sex" checked="checked">
			女:<input type="radio" name="sex">
			<!-- radio 单选框 两个选项用一个name值,实现互斥  checked 默认选择-->
		</p>
		<h4>购买的课程</h4>
		<p>
			web前端:<input type="checkbox" name="" checked="
			checked">
			python开发:<input type="checkbox" name="">
			java编程:<input type="checkbox" name="">
		</p>

		<p>
			<select name="class">
				<option value="a">HTML</option>
				<option value="b">CSS</option>
				<option selected="selected">JavaScript</option>
				<!-- 默认选中 -->
				<option>Vue</option>
			</select>
		</p>

		<p>
		<input type="submit" value="登陆" name="">
		<!-- submit 提交 value值修改提交按钮名称-->
		</p>
		
	</form>

</body>
</html>

29 下拉列表实现多选

		<select multiple="multiple" name="class">
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>form标签</title>
</head>
<body>
	<form action="http://www.baidu.com" method="post">
		<!-- action 提交服务器 method提交方式-->
		
		<p>
			<input type="text" value="" name="" placeholder='请输入用户名'>
		<!-- value 默认值 -->
		</p>

		<p>
		<input type="password" name="" placeholder="请输入密码">	
				<!-- tpye默认text值 -->
		</p>
		<p>
			男:<input type="radio" name="sex" checked="checked">
			女:<input type="radio" name="sex">
			<!-- radio 单选框 两个选项用一个name值,实现互斥  checked 默认选择-->
		</p>
		<h4>购买的课程</h4>
		<p>
			web前端:<input type="checkbox" name="" checked="
			checked">
			python开发:<input type="checkbox" name="">
			java编程:<input type="checkbox" name="">
		</p>

		<h3>下拉框单选</h3>
		<p>
			<select name="class">
				<option value="a">HTML</option>
				<option value="b">CSS</option>
				<option selected="selected">JavaScript</option>
				<!-- 默认选中 -->
				<option>Vue</option>
			</select>
		</p>


		<h3>下拉框多选</h3>
		<p>
			<select multiple="multiple" name="class">
				<option value="a">HTML</option>
				<option value="b">CSS</option>
				<option selected="selected">JavaScript</option>
				<!-- 默认选中 -->
				<option>Vue</option>
			</select>
		</p>

		<p>
		<input type="submit" value="登陆" name="">
		<!-- submit 提交 value值修改提交按钮名称-->
		</p>
		
	</form>

</body>
</html>

30 让你的文本输入框支持多行输入

textarea
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>form标签</title>
</head>
<body>
	<form action="http://www.baidu.com" method="post">
		<!-- action 提交服务器 method提交方式-->
		
		<p>
			<input type="text" value="" name="" placeholder='请输入用户名'>
		<!-- value 默认值 -->
		</p>

		<p>
		<input type="password" name="" placeholder="请输入密码">	
				<!-- tpye默认text值 -->
		</p>
		<p>
			男:<input type="radio" name="sex" checked="checked">
			女:<input type="radio" name="sex">
			<!-- radio 单选框 两个选项用一个name值,实现互斥  checked 默认选择-->
		</p>
		<h4>购买的课程</h4>
		<p>
			web前端:<input type="checkbox" name="" checked="
			checked">
			python开发:<input type="checkbox" name="">
			java编程:<input type="checkbox" name="">
		</p>

		<h3>下拉框单选</h3>
		<p>
			<select name="class">
				<option value="a">HTML</option>
				<option value="b">CSS</option>
				<option selected="selected">JavaScript</option>
				<!-- 默认选中 -->
				<option>Vue</option>
			</select>
		</p>


		<h3>下拉框多选</h3>
		<p>
			<select multiple="multiple" name="class">
				<option value="a">HTML</option>
				<option value="b">CSS</option>
				<option selected="selected">JavaScript</option>
				<!-- 默认选中 -->
				<option>Vue</option>
			</select>
		</p>

		<p>
			<input type="submit" value="登陆" name="">
			<!-- submit 提交 value值修改提交按钮名称-->
		</p>
		<p>
			<h3>个人描述</h3>
			<textarea rows="10" cols="40"></textarea>
		</p>
	</form>

</body>
</html>

31 from表单中的按钮和普通按钮

reset from下的重置按钮

button 单纯的按钮

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

	<form action="http://www.baidu.com" method="post">
		<!-- action 提交服务器 method提交方式-->
		
		<p>
			<input type="text" value="" name="" placeholder='请输入用户名'>
		<!-- value 默认值 -->
		</p>

		<p>
		<input type="password" name="" placeholder="请输入密码">	
				<!-- tpye默认text值 -->
		</p>
		<p>
			男:<input type="radio" name="sex" checked="checked">
			女:<input type="radio" name="sex">
			<!-- radio 单选框 两个选项用一个name值,实现互斥  checked 默认选择-->
		</p>
		<h4>购买的课程</h4>
		<p>
			web前端:<input type="checkbox" name="" checked="
			checked">
			python开发:<input type="checkbox" name="">
			java编程:<input type="checkbox" name="">
		</p>

		<h3>下拉框单选</h3>
		<p>
			<select name="class">
				<option value="a">HTML</option>
				<option value="b">CSS</option>
				<option selected="selected">JavaScript</option>
				<!-- 默认选中 -->
				<option>Vue</option>
			</select>
		</p>


		<h3>下拉框多选</h3>
		<p>
			<select multiple="multiple" name="class">
				<option value="a">HTML</option>
				<option value="b">CSS</option>
				<option selected="selected">JavaScript</option>
				<!-- 默认选中 -->
				<option>Vue</option>
			</select>
		</p>


		<p>
			<h3>个人描述</h3>
			<textarea rows="10" cols="40"></textarea>
		</p>


		<p>
			<input type="submit" value="登陆" name="">
			<!-- submit 提交 value值修改提交按钮名称-->
			<input type="reset"  value='重置' name="">
			<!-- reset 重置,恢复初始状态 -->
		</p>

	</form>
	<button>按钮</button>

</body>
</html>

32 lable 标签的使用

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
	<p>
		用户名:<input type="text" name="">
	</p>

	<p>
		密码:<input type="password" name="">
	</p>

	<p>
		<label for="username">用户名</label>
		<input type="text" id="username" name="">
		<!-- label中for属性与input中id属性相关关联 -->
	</p>

	<p>
		<label for="pwd">密码</label>
		<input type="password" id='pwd' name="">
	</p>
	
</body>
</html>

33 div标签的介绍

​ division 区域

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
	<div>mjj</div>
	<!-- division 区域意思,默认无宽无高,一个容器 -->
	<div>
		张三
		<div>zhangxiaosan</div>
	</div>

	<div>李四</div>
</body>
</html>

34 小米官网和京东网站划分结构

35 对小米网站的整体分析

end

原文地址:https://www.cnblogs.com/chenfei2928/p/13083863.html