从零开始，学习web前端之HTML基础

短命女 2022-06-13 05:15 319阅读 0赞

原作者：http://blog.csdn.net/yuzhiqiang\_1993/article/details/58589394  
[我在大学的专业是计算机网络技术，大学期间有这样一门课是“网页设计与制作”，当时对这门课挺感兴趣，就学习了下。通过简单的html、css和js能展现出自己想要的东西，感觉挺有意思的。   
虽然阴差阳错之下成为了一名Android开发工程师，但是前端方面的知识也一直在关注，空余时间也学习的一些东西，试着做了一些简单的东西，我的个人网站：http://yuzhiqiang.name/或http://yzq.name/.   
但是平时学习的话都是这个学学，那个看看，没有一个系统的学习，总感觉知识点掌握的不是太牢靠。正好这段时间项目刚做完，决定系统的学习一下前端方面的知识，以备不时之需。   
这个博客的话就当是学习的时候做个笔记，同时也希望能够给想学习前端的同学做一个参考。][html_css_js_ _Android_http_yuzhiqiang.name_http_yzq.name_._ _]

--------------------

[什么是前端   
前端对于网站来说，通常是指，网站的前台部分包括网站的表现层和结构层。因此前端技术一般分为前端设计和前端开发，前端设计一般可以理解为网站的视觉设计，前端开发则是网站的前台代码实现，包括基本的HTML和CSS以及JavaScript/ajax，现在最新的高级版本HTML5、CSS3，以及SVG等。   
前端设计也就是UI或美工他们的工作，他们负责设计出好看的效果图。   
前端开发的工作就是将美工或UI提供的效果图通过HTML+CSS+JS技术来生成网页][html_css_js_ _Android_http_yuzhiqiang.name_http_yzq.name_._ _]

[认识网页   
1） 网页是由文字、图片、音频、视频、超链接等组成的。   
2）w3c组织制定了web的标准   
html：结构标准 （网页的整体架构）   
css：表现标准 （网页的美化）   
js：行为标准 （网页的交互）][html_css_js_ _Android_http_yuzhiqiang.name_http_yzq.name_._ _]

[浏览器   
我们通常是通过浏览器去浏览网页，有时候会发现用不同的浏览器或者不同的模式（极速模式/兼容模式）访问同一个网页显示的效果不同，这是因为浏览器内核（渲染引擎）有差异。渲染引擎也是引起兼容性问题的根本原因。   
目前市面上的浏览器内核主要有四种][html_css_js_ _Android_http_yuzhiqiang.name_http_yzq.name_._ _]

[1、Trident内核代表：Internet Explore   
2、Gecko内核代表：Mozilla、Firefox   
3、WebKit内核代表：Safari、Chrome   
4、Presto内核代表：Opera][html_css_js_ _Android_http_yuzhiqiang.name_http_yzq.name_._ _]

[HTML   
hyper text markup language：超文本标记语言][html_css_js_ _Android_http_yuzhiqiang.name_http_yzq.name_._ _]

[Html的结构标准：][html_css_js_ _Android_http_yuzhiqiang.name_http_yzq.name_._ _]

<!DOCTYPE html> 声明文档类型 <html> 根标签 <head> 头部标签 <meta charset="utf-8" /> 编码方式：通用字符集 <title></title> 标题 </head> <body> 主体标签 </body> </html> 
     
      
       1
       2
       3
       4
       5
       6
       7
       8
       9
       10
       11
      
     
      
       1
       2
       3
       4
       5
       6
       7
       8
       9
       10
       11

[Html标签分类   
1)单标签: `<! Doctype html> <br/> <hr/>`   
2)双标签 : `<html></html> <head></head> <title></title>`][html_css_js_ _Android_http_yuzhiqiang.name_http_yzq.name_._ _]

[Html标签关系分类   
包含（嵌套关系） `<head><title></title></head>` 父子   
并列关系 `<head></head><body></body>` 兄弟姐妹][html_css_js_ _Android_http_yuzhiqiang.name_http_yzq.name_._ _]

[head标签   
在网页中我们一般是在head标签中去设置网页的属性][html_css_js_ _Android_http_yuzhiqiang.name_http_yzq.name_._ _]

<head> <meta charset="UTF-8"> <link rel="shortcut icon" href="img/logo.ico"/> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="description" content="个人简介"> <meta name="keywords" content="喻志强，个人网站，个人简介，喻志强的个人网站，喻志强的个人简介"/> <title>个人简介</title> <link rel="stylesheet" href="css/base.css"/> <script type="text/javascript" src="js/center.js"></script> </head>
     
      
       1
       2
       3
       4
       5
       6
       7
       8
       9
       10
       11
      
     
      
       1
       2
       3
       4
       5
       6
       7
       8
       9
       10
       11

[告诉浏览器以最新版本的ie内核去渲染页面或者使用Google Chrome Frame(谷歌内嵌浏览器框架GCF)去渲染页面][html_css_js_ _Android_http_yuzhiqiang.name_http_yzq.name_._ _]

[网页关键字，有利于seo的收录][html_css_js_ _Android_http_yuzhiqiang.name_http_yzq.name_._ _]

[网页的描述][html_css_js_ _Android_http_yuzhiqiang.name_http_yzq.name_._ _]

[网页重定向 2秒后跳转到百度首页][html_css_js_ _Android_http_yuzhiqiang.name_http_yzq.name_._ _]

[默认设置超链接打开新的窗口][html_css_js_ _Android_http_yuzhiqiang.name_http_yzq.name_._ _]

<base target="_blank" />
     
      
       1
      
     
      
       1

[网页的logo ![这里写图片描述][SouthEast] 在线制作][html_css_js_ _Android_http_yuzhiqiang.name_http_yzq.name_._ _]

[链接外部样式表][html_css_js_ _Android_http_yuzhiqiang.name_http_yzq.name_._ _]

[链接外部js脚本][html_css_js_ _Android_http_yuzhiqiang.name_http_yzq.name_._ _]

[常用标签][html_css_js_ _Android_http_yuzhiqiang.name_http_yzq.name_._ _]

<br/> 换行标签 <hr/> 水平线 
     
      
       1
       2
       3
      
     
      
       1
       2
       3

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> 第一行<br/> 第二行 <hr /> </body> </html> 
     
      
       1
       2
       3
       4
       5
       6
       7
       8
       9
       10
       11
       12
       13
      
     
      
       1
       2
       3
       4
       5
       6
       7
       8
       9
       10
       11
       12
       13

[![换行和水平线][SouthEast 1]][html_css_js_ _Android_http_yuzhiqiang.name_http_yzq.name_._ _]

[文本标签][html_css_js_ _Android_http_yuzhiqiang.name_http_yzq.name_._ _]

<p></P> 文本段落标签 <font>文本标签</font> <strong>加粗</strong> <b>加粗</b> <em>倾斜</em> <i>倾斜</i> <del>删除线</del> <s>删除线</s> <ins>下划线</ins> <u>下划线</u>
     
      
       1
       2
       3
       4
       5
       6
       7
       8
       9
       10
      
     
      
       1
       2
       3
       4
       5
       6
       7
       8
       9
       10

[![这里写图片描述][SouthEast 2]][html_css_js_ _Android_http_yuzhiqiang.name_http_yzq.name_._ _]

[图片标签][html_css_js_ _Android_http_yuzhiqiang.name_http_yzq.name_._ _]

<img src="img/34.jpg" alt="小狗" title="两只小狗" width="300px" />
     
      
       1
      
     
      
       1

[Src： 图片的来源 必写属性   
Alt ： 替换文本 图片不显示的时候显示的文字   
Title：提示文本 鼠标放到图片上显示的文字   
Width ： 图片宽度   
Height ： 图片高度   
图片没有定义宽高的时候，图片按照百分之百比例显示，如果只更改图片的宽度或者高度，图片等比例缩放。][html_css_js_ _Android_http_yuzhiqiang.name_http_yzq.name_._ _]

[![这里写图片描述][SouthEast 3]][html_css_js_ _Android_http_yuzhiqiang.name_http_yzq.name_._ _]

[超链接][html_css_js_ _Android_http_yuzhiqiang.name_http_yzq.name_._ _]

<a href="https://www.baidu.com/" target="_blank" title="百度官网">百度</a>
     
      
       1
      
     
      
       1

[href ： 去往的路径（跳转的页面） 必写属性   
title ： 提示文本 鼠标放到链接上显示的文字   
target=”\_self” ： 默认值 在自身页面打开（关闭自身页面，打开链接页面）   
target=”\_blank”： 打开新页面 （自身页面不关闭，打开一个新的链接页面）][html_css_js_ _Android_http_yuzhiqiang.name_http_yzq.name_._ _]

[锚链接][html_css_js_ _Android_http_yuzhiqiang.name_http_yzq.name_._ _]

[1.先定义一个锚点][html_css_js_ _Android_http_yuzhiqiang.name_http_yzq.name_._ _]

<div id="top">顶部</div>
     
      
       1
      
     
      
       1

[2.超链接到锚点][html_css_js_ _Android_http_yuzhiqiang.name_http_yzq.name_._ _]

<a href="#top">回到顶部</a>
     
      
       1
      
     
      
       1

[特殊字符   
![这里写图片描述][SouthEast 4]][html_css_js_ _Android_http_yuzhiqiang.name_http_yzq.name_._ _]

[列表   
1）无序列表][html_css_js_ _Android_http_yuzhiqiang.name_http_yzq.name_._ _]

<ul type="square"> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> </ul>
     
      
       1
       2
       3
       4
       5
       6
       7
       8
      
     
      
       1
       2
       3
       4
       5
       6
       7
       8

[![这里写图片描述][SouthEast 5]][html_css_js_ _Android_http_yuzhiqiang.name_http_yzq.name_._ _]

[type=”square” 小方块   
Type=”disc” 实心小圆圈   
Type=”circle” 空心小圆圈][html_css_js_ _Android_http_yuzhiqiang.name_http_yzq.name_._ _]

[2）有序列表][html_css_js_ _Android_http_yuzhiqiang.name_http_yzq.name_._ _]

<ol type="1" start="2"> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> </ol> 
     
      
       1
       2
       3
       4
       5
       6
       7
       8
       9
      
     
      
       1
       2
       3
       4
       5
       6
       7
       8
       9

[![这里写图片描述][SouthEast 6]][html_css_js_ _Android_http_yuzhiqiang.name_http_yzq.name_._ _]

[type=”1,a,A,i,I” type的值可以为1,a,A,i,I   
start=”3” 决定了开始的位置。][html_css_js_ _Android_http_yuzhiqiang.name_http_yzq.name_._ _]

[3）自定义列表][html_css_js_ _Android_http_yuzhiqiang.name_http_yzq.name_._ _]

<dl> <dt>标题</dt> <dd>内容</dd> <dd>内容</dd> <dd>内容</dd> </dl>
     
      
       1
       2
       3
       4
       5
       6
       7
      
     
      
       1
       2
       3
       4
       5
       6
       7

[![这里写图片描述][SouthEast 7]][html_css_js_ _Android_http_yuzhiqiang.name_http_yzq.name_._ _]

[滚动   
![这里写图片描述][SouthEast 8]][html_css_js_ _Android_http_yuzhiqiang.name_http_yzq.name_._ _]

[表格   
表格一般用于展示数据，推荐使用标准的表格结构，有利于seo][html_css_js_ _Android_http_yuzhiqiang.name_http_yzq.name_._ _]

<table border="1px" width="500" height="300" cellpadding="0" cellspacing="0" > <caption>表头</caption> <thead> <tr> <td colspan="4">标题</td> </tr> </thead> <tbody> <tr> <td>1</td> <td>2</td> <td>3</td> <th>4</th> </tr> </tbody> </table> 
     
      
       1
       2
       3
       4
       5
       6
       7
       8
       9
       10
       11
       12
       13
       14
       15
       16
       17
       18
       19
      
     
      
       1
       2
       3
       4
       5
       6
       7
       8
       9
       10
       11
       12
       13
       14
       15
       16
       17
       18
       19

[![这里写图片描述][SouthEast 9]][html_css_js_ _Android_http_yuzhiqiang.name_http_yzq.name_._ _]

[属性：   
Border=”1” 边框   
Width=”500” 宽度   
Height=”300” 高   
cellspacing=”2” 单元格与单元格的距离   
cellpadding=”2” 内容距边框的距离   
align=”left | right | center”   
如果直接给表格用align=”center” 表格居中   
如果给tr或者td使用 ，tr或者td内容居中。   
bgcolor=”red” 背景颜色。   
表头 `<caption></caption>`   
colspan=”2” 合并同一行上的单元格   
rowspan=”2” 合并同一列上的单元格   
`<th></th>`用法和td一样，标题的文字自动加粗水平居中对齐   
垂直对齐方式：`Valign=”top | middle | bottom”`   
表格边框颜色：`bordercolor="red"`][html_css_js_ _Android_http_yuzhiqiang.name_http_yzq.name_._ _]

[表单   
表单一般是由提示信息和表单控件组成的，用于收集信息。平时网页上的登录，注册就是表单。   
表单域][html_css_js_ _Android_http_yuzhiqiang.name_http_yzq.name_._ _]

<form action='http://www.123.com/postValue' method="post"></form>
     
      
       1
      
     
      
       1

[属性：action:处理信息   
Method=”get | post”   
Get通过地址栏提供（传输）信息，安全性差。   
Post安全性高。][html_css_js_ _Android_http_yuzhiqiang.name_http_yzq.name_._ _]

[文本输入框][html_css_js_ _Android_http_yuzhiqiang.name_http_yzq.name_._ _]

<input type="text" name="userName" />
     
      
       1
      
     
      
       1

[maxlength=”6” 限制输入字符长度   
readonly=”readonly” 将输入框设置为只读状态（不能编辑）   
disabled=”disabled” 输入框未激活状态   
name=”username” 输入框的名称   
value=”大前端” 默认值][html_css_js_ _Android_http_yuzhiqiang.name_http_yzq.name_._ _]

[密码输入框][html_css_js_ _Android_http_yuzhiqiang.name_http_yzq.name_._ _]

<input type="password" name="pwd" />
     
      
       1
      
     
      
       1

[文本输入框的属性和密码输入框属性通用][html_css_js_ _Android_http_yuzhiqiang.name_http_yzq.name_._ _]

[单选框][html_css_js_ _Android_http_yuzhiqiang.name_http_yzq.name_._ _]

<input type="radio" name="gender" value="男" checked="checked"/>男<br /> <input type="radio" name="gender" value="女" />女<br />
     
      
       1
       2
      
     
      
       1
       2

[只有将name的值设置相同的时候，才能实现单选效果。   
checked=”checked” 设置默认选择项。][html_css_js_ _Android_http_yuzhiqiang.name_http_yzq.name_._ _]

[复选框][html_css_js_ _Android_http_yuzhiqiang.name_http_yzq.name_._ _]

<input type="checkbox" name="sing" />唱歌 <input type="checkbox" name="eat" />吃饭 <input type="checkbox" name="game" />玩游戏
     
      
       1
       2
       3
      
     
      
       1
       2
       3

[checked=”checked” 设置默认选中项][html_css_js_ _Android_http_yuzhiqiang.name_http_yzq.name_._ _]

[下拉列表][html_css_js_ _Android_http_yuzhiqiang.name_http_yzq.name_._ _]

<select name="city"> <optgroup label="河南省"> <option>郑州市</option> <option>洛阳市</option> <option>信阳市</option> <option>南阳市</option> </optgroup> </select>
     
      
       1
       2
       3
       4
       5
       6
       7
       8
      
     
      
       1
       2
       3
       4
       5
       6
       7
       8

[multiple=”multiple” 将下拉列表设置为多选项   
selected=”selected” 设置默认选中项目   
`<optgroup></optgroup>` 对下拉列表进行分组。   
label=”” 分组名称。][html_css_js_ _Android_http_yuzhiqiang.name_http_yzq.name_._ _]

[多行文本域][html_css_js_ _Android_http_yuzhiqiang.name_http_yzq.name_._ _]

<textarea name="introduce" cols="20" rows="5"> </textarea>
     
      
       1
       2
      
     
      
       1
       2

[cols 控制输入字符的长度。   
rows 控制输入的行数][html_css_js_ _Android_http_yuzhiqiang.name_http_yzq.name_._ _]

[文件上传][html_css_js_ _Android_http_yuzhiqiang.name_http_yzq.name_._ _]

<input type="file" multiple="multiple" accept="application/msword" />
     
      
       1
      
     
      
       1

[multiple=”multiple” 多选   
accept=”application/msword” 选择的文件格式][html_css_js_ _Android_http_yuzhiqiang.name_http_yzq.name_._ _]

[提交按钮][html_css_js_ _Android_http_yuzhiqiang.name_http_yzq.name_._ _]

<input type="submit" value="注册" />
     
      
       1
      
     
      
       1

[具有提交功能][html_css_js_ _Android_http_yuzhiqiang.name_http_yzq.name_._ _]

[普通按钮][html_css_js_ _Android_http_yuzhiqiang.name_http_yzq.name_._ _]

<input type="button" value="按钮" />
     
      
       1
      
     
      
       1

[普通按钮，一般配合js使用][html_css_js_ _Android_http_yuzhiqiang.name_http_yzq.name_._ _]

[图片按钮][html_css_js_ _Android_http_yuzhiqiang.name_http_yzq.name_._ _]

<input type="image" src="img/34.jpg" width="100" />
     
      
       1
      
     
      
       1

[重置按钮][html_css_js_ _Android_http_yuzhiqiang.name_http_yzq.name_._ _]

<input type="reset" value="重置" />
     
      
       1
      
     
      
       1

[将信息重置到默认状态][html_css_js_ _Android_http_yuzhiqiang.name_http_yzq.name_._ _]

[表单分组][html_css_js_ _Android_http_yuzhiqiang.name_http_yzq.name_._ _]

<form> <fieldset> <legend>注册</legend> </fieldset> </form>
     
      
       1
       2
       3
       4
       5
      
     
      
       1
       2
       3
       4
       5

[`<fieldset></fieldset>` 对表单信息分组   
`<legend></legend>` 表单信息分组名称][html_css_js_ _Android_http_yuzhiqiang.name_http_yzq.name_._ _]

<input type="url" /> 网址输入框 <input type="date" /> 日期控件 <input type="time" /> 时间控件 <input type="email" /> 邮件输入框 <input type="number" step="2" /> 数字，step：步长 <input type="range" /> 滑块控件 还有很多其他的控件
     
      
       1
       2
       3
       4
       5
       6
       7
      
     
      
       1
       2
       3
       4
       5
       6
       7

[例如：][html_css_js_ _Android_http_yuzhiqiang.name_http_yzq.name_._ _]

<form action="register.jsp" method="get"> <fieldset> <legend>注册</legend> 用户名:<input type="text" name="userName" value="yzq" /><br /> 密码：<input type="password" name="pwd" /><br /> <input type="checkbox" name="sing" />唱歌 <input type="checkbox" name="eat" />吃饭 <input type="checkbox" name="game" />玩游戏<br /> <input type="radio" name="gender" value="男" checked="checked"/>男<br /> <input type="radio" name="gender" value="女" />女<br /> <select name="city" multiple="multiple"> <option>北京市</option> <optgroup label="河南省"> <option>郑州市</option> <option>洛阳市</option> <option>信阳市</option> <option>南阳市</option> </optgroup> </select> <br /> <textarea name="introduce" cols="20" rows="5"> </textarea><br /> <input type="file" multiple="multiple" accept="application/msword" /> <input type="submit" value="注册" /> <input type="button" value="按钮" /> <input type="image" src="img/34.jpg" width="100" /> <input type="reset" value="重置" /> <input type="url" /> <input type="date" /> <input type="time" /> <input type="email" /> <input type="number" step="2" /> <input type="range" /> </fieldset> </form>
     
      
       1
       2
       3
       4
       5
       6
       7
       8
       9
       10
       11
       12
       13
       14
       15
       16
       17
       18
       19
       20
       21
       22
       23
       24
       25
       26
       27
       28
       29
       30
       31
       32
       33
       34
       35
       36
       37
       38
       39
       40
       41
      
     
      
       1
       2
       3
       4
       5
       6
       7
       8
       9
       10
       11
       12
       13
       14
       15
       16
       17
       18
       19
       20
       21
       22
       23
       24
       25
       26
       27
       28
       29
       30
       31
       32
       33
       34
       35
       36
       37
       38
       39
       40
       41

[![这里写图片描述][SouthEast 10]][html_css_js_ _Android_http_yuzhiqiang.name_http_yzq.name_._ _]

[标签语义化   
好的语义化的网站标准就是去掉样式表文件之后，结构依然很清晰。比如w3cSchool   
标签语义化概念：根据内容的结构化（内容语义化），选择合适的标签（代码语义化）][html_css_js_ _Android_http_yuzhiqiang.name_http_yzq.name_._ _]

[标签语义化意义：   
1:网页结构合理   
2:有利于seo:和搜索引擎建立良好沟通，有了良好的结构和语义你的网页内容自然容易被搜索引擎抓取；   
3:方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）   
4:便于团队开发和维护   
标签语义化注意事项   
1：尽可能少的使用无语义的标签div和span；   
2：在语义不明显时，既可以使用div或者p时，尽量用p, 因为p在默认情况下有上下间距，对兼容特殊终端有利；   
3：不要使用纯样式标签，如：b、font、u等，改用css设置。   
4：需要强调的文本，可以包含在strong或者em标签中strong默认样式是加粗（不要用b），em是斜体（不用i）；][html_css_js_ _Android_http_yuzhiqiang.name_http_yzq.name_._ _]

[如果你觉得本文对你有帮助，麻烦动动手指顶一下，算是对本文的一个认可。也可以关注我web前端的博客专栏，我会不定期的更新，如果文中有什么错误的地方，还望指正，谢谢！][html_css_js_ _Android_http_yuzhiqiang.name_http_yzq.name_._ _]

[html_css_js_ _Android_http_yuzhiqiang.name_http_yzq.name_._ _]: /images/20220613/88a287a7db9841d086d2b07f11c1a524.png
[SouthEast]: https://img-blog.csdn.net/20170301151212986?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveXV6aGlxaWFuZ18xOTkz/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast
[SouthEast 1]: https://img-blog.csdn.net/20170301101714396?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveXV6aGlxaWFuZ18xOTkz/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast
[SouthEast 2]: https://img-blog.csdn.net/20170301105713509?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveXV6aGlxaWFuZ18xOTkz/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast
[SouthEast 3]: https://img-blog.csdn.net/20170301110053244?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveXV6aGlxaWFuZ18xOTkz/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast
[SouthEast 4]: https://img-blog.csdn.net/20170301111440898?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveXV6aGlxaWFuZ18xOTkz/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast
[SouthEast 5]: https://img-blog.csdn.net/20170301111724527?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveXV6aGlxaWFuZ18xOTkz/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast
[SouthEast 6]: https://img-blog.csdn.net/20170301111947595?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveXV6aGlxaWFuZ18xOTkz/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast
[SouthEast 7]: https://img-blog.csdn.net/20170301112257549?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveXV6aGlxaWFuZ18xOTkz/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast
[SouthEast 8]: https://img-blog.csdn.net/20170301112459115?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveXV6aGlxaWFuZ18xOTkz/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast
[SouthEast 9]: https://img-blog.csdn.net/20170301120811441?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveXV6aGlxaWFuZ18xOTkz/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast
[SouthEast 10]: https://img-blog.csdn.net/20170301145547654?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveXV6aGlxaWFuZ18xOTkz/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast