HTML5--语法

雨点打透心脏的1/2处 2021-09-30 00:32 431阅读 0赞

一、标记方法

1、内容类型（ContentType）还是.text/html

2、声明：<!DOCTYPE html SYSTEM “about:legacy-compat”>

3、字符编码：<meta charset="UTF-8"  >

二、语法三要点：

1、可以省略标签的元素：

（1）不允许写技术标记的元素，即只能写成<元素/>形式：area、base、br、col、command、embed、hr、img、input、keygen、link、meta、param、source、track、wbr。

（2）可以省略结束标签的元素：li、dt、dd、p、rt、rp、optgroup、option、colgroup、thead、tbody、tfoot、tr、td、th。

（3）可以省略整个标签的元素：html、head、body、colgroup、tbody。

2、允许省略boolean值的属性

<table style="width:571px;"> 
 <tbody> 
  <tr> 
   <td><strong>html5属性</strong></td> 
   <td style="text-align:center;"><strong>语法描述</strong></td> 
  </tr> 
  <tr> 
   <td>checked&nbsp; &nbsp;</td> 
   <td>&nbsp;checked="checked"&nbsp; &nbsp; &nbsp; &nbsp; checked=""&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;checked</td> 
  </tr> 
  <tr> 
   <td>readonly</td> 
   <td>&nbsp;readonly="readonly"&nbsp; &nbsp; &nbsp; &nbsp;readonly=""&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;readonly</td> 
  </tr> 
  <tr> 
   <td>disabled&nbsp;&nbsp;</td> 
   <td>&nbsp;disabled="disabled"&nbsp; &nbsp; &nbsp; &nbsp; disabled=""&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;disabled</td> 
  </tr> 
  <tr> 
   <td>selected&nbsp;&nbsp;</td> 
   <td>&nbsp;&nbsp;selected="selected"&nbsp; &nbsp; &nbsp; &nbsp; selected=""&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; selected</td> 
  </tr> 
  <tr> 
   <td>defer&nbsp;</td> 
   <td>&nbsp;defer="defer"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;defer=""&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;defer</td> 
  </tr> 
  <tr> 
   <td>ismap&nbsp; &nbsp;&nbsp;</td> 
   <td>&nbsp;ismap="ismap"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ismap=""&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;ismap</td> 
  </tr> 
  <tr> 
   <td>nohref&nbsp;&nbsp;</td> 
   <td>nohref="nohref"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;nohref=""&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; nohref</td> 
  </tr> 
  <tr> 
   <td>noshade&nbsp;</td> 
   <td>noshade="noshade"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;noshade=""&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;noshade</td> 
  </tr> 
  <tr> 
   <td>nowrap</td> 
   <td>&nbsp;nowrap="nowrap"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;nowrap=""&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;nowrap</td> 
  </tr> 
  <tr> 
   <td>multiple</td> 
   <td>multiple="multiple"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;multiple=""&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; multiple</td> 
  </tr> 
  <tr> 
   <td>noresize</td> 
   <td>&nbsp;noresize="noresize"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;noresize=""&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; noresize</td> 
  </tr> 
 </tbody> 
</table>

举例说明：

如果省略了属性本身，则表达为false；若省略的是属性值，则表达为true。

以下属性值全为true：

3、省略属性的引用符

可以用双引号或者单引号引用属性的值，只要属性值中不包括空格、<、>、'、"、‘、=等字符，都可以省略引用符。

举例说明：

三、新增元素

1、结构元素

<section></section>定义文档或应用程序中的一个区段，如章节、页眉、页脚或文档的其他部分

一个section元素通常由内容和标题组成。

当一个容器要被直接定义样式或通过脚本定义行为时，推荐用div，不是section。

<article></article>表示文档中独立的一块内容，如博客、教程、故事、视频及脚本。

一个article元素通常有它自己的标题header，有时还有自己的脚注。

article元素可以嵌套使用。

article元素也可以用来表示插件，作用是使插件看起来像内嵌在页面中。如下所示：

![1648343-20190602225022805-1599626760.png][]

<header></header>有引导和导航的作用。放置页面中一个内容区块或整个页面的标题，也可以包含内容，如搜索表单或logo。

一个页面可以有多个header元素。

在html5中，一个header元素通常包括至少一个heading元素，即h1~h6元素，也可以包括hgroup、table、from、nav元素。

hgroup元素：将标题与子标题分组的元素。

hgroup元素通常将h1~h6元素进行分组；若只有一个主标题，则不需要写hgroup元素。

![1648343-20190602231306134-244071663.png][]

<nav></nav>导航部分，主要放主要的、基本的链接。

一个页面可以有多个nav元素，该元素可以用于以下场合：

传统导航条（将当前页面跳转到网站的其他页面上），侧边栏导航（将当前页面或文章跳转到其他页面或文章中）、页内导航（在本页面的几个组成部分之间跳转）、翻页操作（在多个页面的上下页或博客网站的上下篇文章滚动）。

在html5中不能用menu来代替nav元素，因为menu元素是用在一系列发出命令的菜单上的，是一种交互性的元素，更准确的说是用在web应用程序中的。

<footer></footer>页面的脚注部分，一般包含作者姓名、创作日期、版权信息等。

一个页面可以包含多个footer元素，可以为article和section元素添加footer元素。

<address></address>用于当前article或文档的作者的详细联系方式。

![1648343-20190602233540915-1778811020.png][]                       ![1648343-20190602233600705-120967712.png][]

2、块级元素

<aside></aside>放置位于article元素外的相关内容，可以用于摘录引用或边栏的排版效果，用于广告或导航元素。。

aside元素主要有以下两种用法：

（1）被包含在article元素中作为主要内容的附属信息部分，可以是与当前文章相关的信息等。

（2）在article外使用，作为页面或站点全局的附属信息部分，比如侧边栏。

<figure></figure>一般表示文档主体流内容中的一个独立单元，使用<figcaption>为figure添加标题。     <figure><figcaption>...</figcaption></figure>

<dialog></dialog>定义对话。如：

![1648343-20190531165006922-1066802596.png][]             ![1648343-20190531170217345-800354055.png][]                对话中的每个句子都必须属于<dt> 标签定义的部分。

figure元素：块级图像元素。具有独立性。可以放图片，还可以给audio、video、iframe、embed元素添加说明。

![1648343-20190603193801695-297181294.png][]                                     ![1648343-20190603193825179-2008555547.png][]

figcaption元素：表示figure的标题，一个figure元素内只能放一个该元素。

![1648343-20190603194124952-1558626516.png][]                                   ![1648343-20190603194138328-1644556513.png][]

3、行内元素

<mark></mark>用于在视觉上向用户呈现需要突显的文字，比如搜索关键词。

![1648343-20190604001359115-336575641.png][]                          ![1648343-20190604001412630-491844559.png][]

mark、em、strong的区别：mark的目的是吸引用户的注意力，提供参考。em是作者为突出文章重点使用的。strong是原文作者用来强调一段文字的重要性的，譬如警告信息、错误信息等。

<time></time>表示日期或时间

<meter></meter>表示度量衡，仅用于已知最大值和最小值的度量。必须定义度量的范围，可以在元素文本或max/min属性中定义

<progress></progress>表示一个任务的完成进度

progress有两个属性值：value表示已经完成的工作量；max表示总共的工作量。

![1648343-20190604002629316-1864926729.png][]                            ![1648343-20190604002646171-1285605971.png][]

![1648343-20190605181545109-1705181954.png][]   ![1648343-20190605181659773-332834931.png][] ![1648343-20190605181844239-10862695.png][]

4、多媒体元素         video（视频）                        audio（音频）

5、交互性元素

<details></details> 表示详细信息，提供一个展开/收缩区域。可与summary（提供标题或图例）配合使用。用户单击标题时，会显示details。

（1）没有sunmary情况：                                              （2）有sunmary情况：

![1648343-20190531172604513-1872636449.png][]                                                                   ![1648343-20190531172948074-852353353.png][]

结果：                                                                                           结果：

![1648343-20190531172628259-1308328514.png][] ![1648343-20190531172639736-1578029819.png][]                                             ![1648343-20190531173219402-1364845120.png][]       ![1648343-20190531173249980-2003889412.png][]

该元素并没有严格地限制于纯文本标记，它可以是一个登录表单、一段说明性的视频、以图形为源数据的一个表格，或者提供给使用辅助性技术的用户的一个表格式的结构说明。

details元素可以可选择地接受open属性，来确保页面载入的时候该元素是可以打开的。

<datagrid></datagrid>表示可选数据的列表，通常用于显示树列表

<menu></menu>表示菜单列表，通常用于列出表单控件

![1648343-20190531215657642-1369653103.png][]                                         ![1648343-20190531215637293-74371199.png][]

command元素：表示命令按钮，如单选按钮，复选框或按钮

![1648343-20190531214910151-543597069.png][]                       ![1648343-20190531214837323-36229797.png][]

fieldset元素：将表单内的相关元素分组。

![1648343-20190603143729685-389345757.png][]                                  ![1648343-20190603143751810-227983008.png][]

![1648343-20190603150932902-2058614041.png][]                          ![1648343-20190603150950138-1665447182.png][]

output元素： 显示一些计算的结果或脚本等其他结果。必须从属于表单。

![1648343-20190603163220776-494926920.png][]                                                  ![1648343-20190603163244778-1602935533.png][]

![1648343-20190603162226353-480209077.png][]                  ![1648343-20190603162246827-9874605.png][]

6、新增的input元素类型

email类型：用于包含e-mail地址的输入域

![1648343-20190603011825839-1491325452.png][]

email类型的文本框具有multiple属性，表示允许输入多个email地址，且用逗号隔开。

url类型：用于包含url地址的输入域

number类型：用于包含数值的输入域

![1648343-20190603102828845-1877461888.png][]                       ![1648343-20190603103020986-967341825.png][]

range类型：用于包含一定范围内数字值的输入域

具有max和min属性，默认最小为0，最大为100。在Opera浏览器中，以滑动条方式进行值的指定；在Opera10中是输入文本的方式。

![1648343-20190603104114606-2027998322.png][]      ![1648343-20190603104130003-1506102388.png][]

date pickers：数据检出器

search类型：用于搜索域，如站点搜索或google搜索。默认是圆角矩形文本框，firefox显示的依然是常规矩形。

![1648343-20190603151648917-1836223834.png][]                       ![1648343-20190603151707855-89873783.png][]

tel类型：用于input元素中输入电话号码，没有特殊校验规则，在实际开发中可以通过pattern属性指定输入电话格式进行验证。

![1648343-20190603160009588-2041728018.png][]                                               ![1648343-20190603155950747-1267523399.png][]

color类型：提供颜色选择器，默认为黑色。

![1648343-20190603155758118-383194107.png][]                               ![1648343-20190603155845928-109710775.png][]

日期和时间的输入类型：

date-----------日、月、年    该类型的input元素以日历的形式方便用户输入

![1648343-20190603094732765-363135168.png][]

![1648343-20190603094800258-986503309.png][]

month---------------月

![1648343-20190603101530347-993048433.png][]

week类型的input元素用来输入周号的文本框。

![1648343-20190603102400207-1294151101.png][]

time--------------时间（小时和分钟）

![1648343-20190603095107278-1120089213.png][]                              ![1648343-20190603095146370-1801709815.png][]

datetime------------日、月、年（UTC时间）    用来输入UTC日期和时间的文本框，且提交时对输入内容有效性检查。

time元素的机器可读部分是在datetime属性中的，格式有以下类型：

<time datetime="2011-10-12T20:00">晚上8点</time>   日期与时间用T文字分开

<time datetime="2011-10-12T20:00Z">晚上8点</time>     Z表示给机器编码时使用UTC标准时间

<time datetime="2011-10-12T20:00+09:00">美国晚上8点</time>          加上了时差，表示向机器编码另一地区时间；若编码本地时间，则不需要加时差

datetime-local------------日、月、年（本地时间）      用来输入本地日期和时间的文本框，且提交时对输入内容有效性检查。

![1648343-20190603095931946-416418796.png][]

pubdate属性：布尔属性，表明哪个time元素代表了发布日期

如：<time datetime=2011-10-11 pubdate>2011年10月11日</time>

7、新增的属性

与表单相关的属性：

autocomplete：是否保存输入值以备使用。保护敏感用户数据，避免本地浏览器对它们进行不安全的存储。

有三个值："on":显示指定候补输入值的数据列表。使用datalist元素和list属性提供候补输入值的数据列表，自动完成时，将该datalist元素中的数据作为候补输入数据在文本框                             中显示。

"off":不指定。

" ":使用浏览器默认值。

![1648343-20190603002622262-2064511591.png][]                  ![1648343-20190603002712191-169315510.png][]

适用于<form>标签，以及以下类型的<input>标签：text、search、url、telephone、email、password、date pickers、range、color。

autofocus：适用于所有<input>标签的类型，规定在页面加载时，域自动地获得焦点。

![1648343-20190603002951047-1954947941.png][]                           ![1648343-20190603003013064-1670400601.png][]

一个页面只能有一个控件具有该属性。

list属性：该属性的值是datalist元素的id，datalist元素类似于select选择框，但是期望值不在选择列表内时，允许自己输入。

适用于以下类型的<input>标签：text、search、url、telephone、email、date pickers、number、range、color。

![1648343-20190603004032952-818497231.png][]                                                                                                ![1648343-20190603004058117-2110232565.png][]

![1648343-20190603165550490-685127926.png][]                                ![1648343-20190603165643831-1915396801.png][]

form override attributes：表单重写，允许用户重写form元素的某些属性设定，适用于以下类型的<input>标签：submit、image。

formaction-----重写action属性                  formenctype-----重写enctype属性                 formmethod-----重写method属性

formnovalidate-----重写novalidate属性                                                                          formtarget-----重写target属性

height、width属性：  <input type="image" src="images/1.jpg" width="200" height="200"/>

min、max属性：规定输入值的范围。默认的min为0，max为100

![1648343-20190603004852538-207976934.png][]                         ![1648343-20190603004915000-1751827312.png][]

step属性：为输入域规定合法的数字间隔（若step=“3”，则合法数是-3、0、3、6等）

![1648343-20190531230307550-1132426134.png][]    ![1648343-20190531230328424-935513350.png][]  ![1648343-20190531230347464-1525241576.png][] ![1648343-20190531230401839-1936415263.png][]

step属性的值取决于控件的类型，对于range控件，step默认为1。

为配合step属性，html5引用的stepUp和stepDown两个函数，分别根据属性的值来增加或减少控件的值。

multiple属性：规定输入域中可选择多个值，适用于以下类型的<input>类型：email、file

novalidate属性：规定在提交表单时不应该验证form或input域，适用于<form>以及以下类型的input标签：text、search、url、telephone、email、password、date pickers、range、color。

pattern属性：用于验证input域的模式，模式是正则表达式。适用于以下类型的input标签：text、search、url、telephone、email、password。

![1648343-20190601001055095-849413741.png][]                               ![1648343-20190601001242817-351382869.png][]       ![1648343-20190601001311419-334326157.png][]

![1648343-20190603170737094-37737252.png][]                        ![1648343-20190603170810851-1248427774.png][]

placeholder属性：提供一种提示（hint），描述输入域的期待值。适用于以下类型的input标签：text、search、url、telephone、email、password。

![1648343-20190601000222979-1465521396.png][]              ![1648343-20190601000237614-347410151.png][]

required属性：必须填写的项。

![1648343-20190603010552419-1253063614.png][]                             ![1648343-20190603010528887-1657146805.png][]

该属性是最简单的一种表单验证方式。

适用于以下类型的input标签：text、search、url、telephone、email、password、date pickers、number、checkbox、radio、file。

与链接相关的属性：

media属性：为a与area元素增加了media属性，该属性规定目标URL是为什么类型的媒介/设备进行优化的。只能在href属性存在时使用。

hreflang、rel属性：为area元素增加了hreflang、rel属性，以保持与a、link元素的一致。

sizes属性：为link元素增加了新属性sizes。该属性可以与icon元素结合使用，以指定关联图标（icon元素）的大小。

target属性：为base元素增加了target属性，主要目的是保持与a元素的一致性，同时target元素由于在web应用程序中，尤其是在与iframe结合使用时，是非常有用的。

其他新增属性：

reversed属性：为ol元素增加reversed属性，它指定列表倒序显示。

![1648343-20190601010749199-1375275047.png][]         ![1648343-20190601010816705-1899142879.png][]

charset属性：为meta元素增加charset属性。

type、label属性：为menu元素增加的属性。label属性为菜单定义了一个可见的标注，type属性让菜单可以以上下文菜单、工具条或列表菜单三种形式出现。

scoped属性：为style元素添加的属性，用来规定样式的作用范围，为script元素增加async属性，它定义脚本是否异步执行。

manifest属性：为html元素增加的属性，开发离线web应用程序时与API结合使用，定义一个URL，在这个URL上描述文档的缓存信息。为iframe元素增加sandbox、seamless、srcdoc三个属性，用来提高页面安全性，防止不信任的web页面执行某些操作。

全局属性：任何元素都适用的属性

contentEditable属性：允许用户编辑元素中的内容（该元素必须是可以获得鼠标焦点，且单击后向用户提供一个插入符号），它的值为布尔类型。

![1648343-20190602172910920-1191561377.png][]                   ![1648343-20190602172925080-1315007233.png][]                           ![1648343-20190602173050507-2014758601.png][]

οndblclick="contentEditable=true" ：表示双击后才可以编辑。

此外，该属性有个隐藏的inherir（继承）状态，若父元素可编辑，则子元素也是可编辑的。

iscontentEditable属性：为true是可编辑，为false是不可编辑。

designMode属性：指定整个页面是否可以编辑，只能在js脚本里被编辑修改，该属性有两个值：off和on。       <body οndblclick="document.designMode='on';">

脚本指定该属性的方法：document.designMode="on"。

大部分浏览器支持designMode属性，而IE8不支持，但是IE9允许。

hidden属性：布尔值。不可见状态是true，可见状态是false。  hidden="true"相当于css中的display:non。

![1648343-20190602210125026-1279505118.png][]

![1648343-20190602210221205-860905901.png][]            ![1648343-20190602210311387-1895232676.png][]

spellcheck属性：布尔型，告诉浏览器检查元素的拼写和语法。可以不写该属性，但是一旦书写，必须有值。支持该属性的浏览器有Chrome、Opera和Safari，IE与Firefox暂未支持。若是元素的readOnly属性或disabled属性设为true，则不执行拼写检查。

tabindex属性：用户使用键盘导航一个页面时，控制页面上的元素获得焦点的顺序。

tabindex有三个值：0 ，-1， 以及X（X里32767是界点，稍后说明）

在IE中，tabindex范围在1到32767之间（包括32767）；在FF、 Chrome无限制，不过一旦超出32768，顺序跟tabindex=0时一样。这个估计跟各个浏览器对int型的解析有关

原本在Html中，只有链接a和表单元素可以被键盘访问（即使是a也必须加上href属性才可以)，但是aria允许tabindex指定给任何html元素。

当tabindex=0时，该元素可以用tab键获取焦点，且访问的顺序是按照元素在文档中的顺序来focus，即使采用了浮动改变了页面中显示的顺序，依然是按照html文档中的顺序来定位。

当tabindex=-1时，该元素用tab键获取不到焦点，但是可以通过js获取，这样就便于我们通过js设置上下左右键的响应事件来focus，在widget内部可以用到。

当tabindex>=1时，该元素可以用tab键获取焦点，而且优先级大于tabindex=0；不过在tabindex>=1时，数字越小，越先定位到。

转载于:https://www.cnblogs.com/heisetianshi/p/10888540.html

[1648343-20190602225022805-1599626760.png]: /images/20210725/ed6885bf23ab4a7380ce672639e76699.png
[1648343-20190602231306134-244071663.png]: /images/20210725/c244b40ec82743ae9e4853767321ac55.png
[1648343-20190602233540915-1778811020.png]: https://img2018.cnblogs.com/blog/1648343/201906/1648343-20190602233540915-1778811020.png
[1648343-20190602233600705-120967712.png]: /images/20210725/80fc7afa690947d0a56a875e97f8b3fc.png
[1648343-20190531165006922-1066802596.png]: https://img2018.cnblogs.com/blog/1648343/201905/1648343-20190531165006922-1066802596.png
[1648343-20190531170217345-800354055.png]: /images/20210725/19c0a4be9cef4c2ba28ff0a4b55ac475.png
[1648343-20190603193801695-297181294.png]: https://img2018.cnblogs.com/blog/1648343/201906/1648343-20190603193801695-297181294.png
[1648343-20190603193825179-2008555547.png]: /images/20210725/d5ab07bc61df4b10b7387393922a69cb.png
[1648343-20190603194124952-1558626516.png]: https://img2018.cnblogs.com/blog/1648343/201906/1648343-20190603194124952-1558626516.png
[1648343-20190603194138328-1644556513.png]: /images/20210725/f775b2c7a409404eae3f5ee2447115dc.png
[1648343-20190604001359115-336575641.png]: https://img2018.cnblogs.com/blog/1648343/201906/1648343-20190604001359115-336575641.png
[1648343-20190604001412630-491844559.png]: /images/20210725/47c79643d03043f9883715ea9dfb6f83.png
[1648343-20190604002629316-1864926729.png]: https://img2018.cnblogs.com/blog/1648343/201906/1648343-20190604002629316-1864926729.png
[1648343-20190604002646171-1285605971.png]: /images/20210725/4737366e80dc4fa9a64b2d99ca16fab8.png
[1648343-20190605181545109-1705181954.png]: https://img2018.cnblogs.com/blog/1648343/201906/1648343-20190605181545109-1705181954.png
[1648343-20190605181659773-332834931.png]: https://img2018.cnblogs.com/blog/1648343/201906/1648343-20190605181659773-332834931.png
[1648343-20190605181844239-10862695.png]: /images/20210725/f830408f490d43aa9fb21327ca68689a.png
[1648343-20190531172604513-1872636449.png]: https://img2018.cnblogs.com/blog/1648343/201905/1648343-20190531172604513-1872636449.png
[1648343-20190531172948074-852353353.png]: /images/20210725/ae073aebc190473bb636592b6f54c649.png
[1648343-20190531172628259-1308328514.png]: https://img2018.cnblogs.com/blog/1648343/201905/1648343-20190531172628259-1308328514.png
[1648343-20190531172639736-1578029819.png]: https://img2018.cnblogs.com/blog/1648343/201905/1648343-20190531172639736-1578029819.png
[1648343-20190531173219402-1364845120.png]: https://img2018.cnblogs.com/blog/1648343/201905/1648343-20190531173219402-1364845120.png
[1648343-20190531173249980-2003889412.png]: /images/20210725/794fa3f90258428c8bd3cef2e927a9a8.png
[1648343-20190531215657642-1369653103.png]: https://img2018.cnblogs.com/blog/1648343/201905/1648343-20190531215657642-1369653103.png
[1648343-20190531215637293-74371199.png]: /images/20210725/50401db4c8e74b53924cdfa2efe41689.png
[1648343-20190531214910151-543597069.png]: https://img2018.cnblogs.com/blog/1648343/201905/1648343-20190531214910151-543597069.png
[1648343-20190531214837323-36229797.png]: /images/20210725/7dca69bda74f479c820b1878fe9a3aa1.png
[1648343-20190603143729685-389345757.png]: https://img2018.cnblogs.com/blog/1648343/201906/1648343-20190603143729685-389345757.png
[1648343-20190603143751810-227983008.png]: /images/20210725/41a97b72dacd487c96aafa83617dd815.png
[1648343-20190603150932902-2058614041.png]: https://img2018.cnblogs.com/blog/1648343/201906/1648343-20190603150932902-2058614041.png
[1648343-20190603150950138-1665447182.png]: /images/20210725/ac53492548924257b81a6e5f3a4c7f0b.png
[1648343-20190603163220776-494926920.png]: https://img2018.cnblogs.com/blog/1648343/201906/1648343-20190603163220776-494926920.png
[1648343-20190603163244778-1602935533.png]: /images/20210725/0310d81f07cd4c24ae5ed036671dd4c9.png
[1648343-20190603162226353-480209077.png]: https://img2018.cnblogs.com/blog/1648343/201906/1648343-20190603162226353-480209077.png
[1648343-20190603162246827-9874605.png]: /images/20210725/9ce8f59a6d1443f5b6b3223deddce51d.png
[1648343-20190603011825839-1491325452.png]: /images/20210725/1b86bd130ea44c839402948c07f3b162.png
[1648343-20190603102828845-1877461888.png]: https://img2018.cnblogs.com/blog/1648343/201906/1648343-20190603102828845-1877461888.png
[1648343-20190603103020986-967341825.png]: /images/20210725/7d43ae144c864bc2bcb75e5f3b0228e5.png
[1648343-20190603104114606-2027998322.png]: https://img2018.cnblogs.com/blog/1648343/201906/1648343-20190603104114606-2027998322.png
[1648343-20190603104130003-1506102388.png]: /images/20210725/5e9c325e4499497881bcda0b2a123636.png
[1648343-20190603151648917-1836223834.png]: https://img2018.cnblogs.com/blog/1648343/201906/1648343-20190603151648917-1836223834.png
[1648343-20190603151707855-89873783.png]: /images/20210725/75d2580605024159819c1f6957e71441.png
[1648343-20190603160009588-2041728018.png]: https://img2018.cnblogs.com/blog/1648343/201906/1648343-20190603160009588-2041728018.png
[1648343-20190603155950747-1267523399.png]: /images/20210725/6bd55b6253474aed9c80f069d903fdde.png
[1648343-20190603155758118-383194107.png]: https://img2018.cnblogs.com/blog/1648343/201906/1648343-20190603155758118-383194107.png
[1648343-20190603155845928-109710775.png]: /images/20210725/2987513edbd54c08a4d79d4a816a12d4.png
[1648343-20190603094732765-363135168.png]: /images/20210725/ee26525fea6d475589ee9ec0f09a1b33.png
[1648343-20190603094800258-986503309.png]: /images/20210725/8561c0ded5ce4852859dd567f1b82ec4.png
[1648343-20190603101530347-993048433.png]: /images/20210725/63fad5bc9ea74f7195740ae30af6edb6.png
[1648343-20190603102400207-1294151101.png]: /images/20210725/78638373d2df4a6f897fce1349feefb0.png
[1648343-20190603095107278-1120089213.png]: https://img2018.cnblogs.com/blog/1648343/201906/1648343-20190603095107278-1120089213.png
[1648343-20190603095146370-1801709815.png]: /images/20210725/03bf28dbd1f8431da79c67213cee64d2.png
[1648343-20190603095931946-416418796.png]: /images/20210725/4e0e812110a340febac82cd61da4e859.png
[1648343-20190603002622262-2064511591.png]: https://img2018.cnblogs.com/blog/1648343/201906/1648343-20190603002622262-2064511591.png
[1648343-20190603002712191-169315510.png]: /images/20210725/21359cc3247a49cf89929c18ccb05f10.png
[1648343-20190603002951047-1954947941.png]: https://img2018.cnblogs.com/blog/1648343/201906/1648343-20190603002951047-1954947941.png
[1648343-20190603003013064-1670400601.png]: /images/20210725/c4dc411000bb4f689d18e065f85e8ce5.png
[1648343-20190603004032952-818497231.png]: https://img2018.cnblogs.com/blog/1648343/201906/1648343-20190603004032952-818497231.png
[1648343-20190603004058117-2110232565.png]: /images/20210725/0c22c5c238694039b5d25183eae3390d.png
[1648343-20190603165550490-685127926.png]: https://img2018.cnblogs.com/blog/1648343/201906/1648343-20190603165550490-685127926.png
[1648343-20190603165643831-1915396801.png]: /images/20210725/ad69b9050687439093dc3f964b6d95b5.png
[1648343-20190603004852538-207976934.png]: https://img2018.cnblogs.com/blog/1648343/201906/1648343-20190603004852538-207976934.png
[1648343-20190603004915000-1751827312.png]: /images/20210725/8f35de317c8340a99b446c8ab975cf1d.png
[1648343-20190531230307550-1132426134.png]: https://img2018.cnblogs.com/blog/1648343/201905/1648343-20190531230307550-1132426134.png
[1648343-20190531230328424-935513350.png]: https://img2018.cnblogs.com/blog/1648343/201905/1648343-20190531230328424-935513350.png
[1648343-20190531230347464-1525241576.png]: https://img2018.cnblogs.com/blog/1648343/201905/1648343-20190531230347464-1525241576.png
[1648343-20190531230401839-1936415263.png]: /images/20210725/42f0f4b6a4d0434d8498bf3abc576648.png
[1648343-20190601001055095-849413741.png]: https://img2018.cnblogs.com/blog/1648343/201906/1648343-20190601001055095-849413741.png
[1648343-20190601001242817-351382869.png]: https://img2018.cnblogs.com/blog/1648343/201906/1648343-20190601001242817-351382869.png
[1648343-20190601001311419-334326157.png]: /images/20210725/93ad319778cc4775ac87a8847abcc53a.png
[1648343-20190603170737094-37737252.png]: https://img2018.cnblogs.com/blog/1648343/201906/1648343-20190603170737094-37737252.png
[1648343-20190603170810851-1248427774.png]: /images/20210725/657b17efd1794dc09ea7a0329062e2c3.png
[1648343-20190601000222979-1465521396.png]: https://img2018.cnblogs.com/blog/1648343/201906/1648343-20190601000222979-1465521396.png
[1648343-20190601000237614-347410151.png]: /images/20210725/e7cd7c797cd2452bb23bc4ef6b812e44.png
[1648343-20190603010552419-1253063614.png]: https://img2018.cnblogs.com/blog/1648343/201906/1648343-20190603010552419-1253063614.png
[1648343-20190603010528887-1657146805.png]: /images/20210725/694dc166aa444e29953254affdbeb34d.png
[1648343-20190601010749199-1375275047.png]: https://img2018.cnblogs.com/blog/1648343/201906/1648343-20190601010749199-1375275047.png
[1648343-20190601010816705-1899142879.png]: /images/20210725/92e2411127e34dd3ab475c39af017256.png
[1648343-20190602172910920-1191561377.png]: https://img2018.cnblogs.com/blog/1648343/201906/1648343-20190602172910920-1191561377.png
[1648343-20190602172925080-1315007233.png]: https://img2018.cnblogs.com/blog/1648343/201906/1648343-20190602172925080-1315007233.png
[1648343-20190602173050507-2014758601.png]: /images/20210725/bf4d22b60acb4480a3533f2e7e737d8e.png
[1648343-20190602210125026-1279505118.png]: /images/20210725/f783f39b2f4147e0902815ac87a56cec.png
[1648343-20190602210221205-860905901.png]: https://img2018.cnblogs.com/blog/1648343/201906/1648343-20190602210221205-860905901.png
[1648343-20190602210311387-1895232676.png]: /images/20210725/15122346f3e3484298536e48a740268d.png