首先先给大家介绍一下 Dreamweaver CC 2018 中的字体来源。大部分情况下，如果你没有导入过什么素材文件，或者其他类型自定义的文件，那么你设计制作的网页的字体都是浏览器能够解析的默认字体。那么如何引入我们自定义的字体呢？Dreamweaver CC 2018 提供了一个叫 Adobe Edge Web Fonts 的插件，但我们今天这一节的主角并不是 Adobe Edge Web Fonts 。而是如何在网页中引入自定义的字体。关于 Adobe Edge Web Fonts 这种字体应用方式，下一个小节我们会给大家讲解。首先和大家普及一个概念。我们 Dreamweaver CC 2018 有一个自己的字体库，或者叫本地字体库列表。那么这个列表在哪里看呢？答案是：在选中相关 HTML 元素后的属性面板里与字体有关的属性设置里看。这里的属性设置就是指的 Font 相关的那部分属性。其次，在 Dreamweaver CC 2018 中，无论是在线从 web 上获取字体库，比如 Adobe Edge Web Fonts ，还是我们今天要说的本地字体文件。我们都要从一个叫字体管理的功能入口进入。下面就请跟随老师的图文讲解来完成操作。第一步：我们点击菜单栏中的工具，在弹出的下拉菜单中可以看到我们之前说的字体管理。如下图：第二步：在弹出的字体管理界面中，我们选择上方第二个选项，本地 web 字体，然后我们在第三个选择方式下，点击浏览，选择我们本地的字体。第三个选项叫本地 TTF 字体，这个是什么东西呢？这个是一个 windows 可以识别的字体文件格式。比如我们这里有一个名字为 mooc 演示字体.TFF 的文件，如下面的图片所示，这个本地字体文件在电脑桌面上的显示图标就有一个 A 的字母标识，来标识这是一个可以被 windows 系统所识别的字体文件。第三步：我们按照第二步中描述的操作，点击浏览，选择桌面上的 mooc 演示字体 .TTF 文件，然后按照下面图片中红色箭头的顺序，从上到下依次把红框框起来的按钮逐个点击，最后点击完成，这样就可以把我们本地的一个字体文件添加到 Dreamweaver CC 2018 的当前的字体管理列表里啦。那么接下来就是如何使用这个新字体的问题了。下面请看第四步。第四步：我们按照第三步中的操作已经导入了本地字体。然后我们要新建一个空白页面，在这里我们暂时不演示新建页面的过程。新建一个空白 HTML 页面之后就是在页面中插入一个元素，什么都可以，只要是包含或者带有文字的元素就可以。这里我们插入一个段落标签，如下面的图片所示，我们插入了一个新的段落标签。给它的 ID 取名为 mooc_testfor_font ，然后我们设置好相关选择器后，在弹出的属性面板中，可以看到字体相关的 font-family 属性。点击后面的 default ，修改默认值，就可以看到弹出的列表中就有我们刚刚设置的 mooc 演示字体。这个时候只要选择这个字体点击确定就好了。这样就完成了我们的设置，其实设置过程中的关键按键下面的图片都已经给大家用红框框起来了。方便大家在课下的时候能够按照图片的指引进行练习。想必有同学好奇，更换完字体后，段落标签中默认文字的字体变成什么样了，如下图所示，这是我随意选择了一个字体后，相关段落标签字体的的变化。同学们可能不知道，对于有些相对外来的字体，在一段文字上应用之后，英文的效果要比中文要大。也更容易看出区别。

默认的透视图按钮只显示图标，如果想显示透视图名称，我们可以在打开的透视图按钮上点击鼠标右键，选择 Show Text 来显示透视图名称，如下图所示：接着，透视图按钮图标旁边会出现该透视图名称，如下图所示：

我们每个 tab 项需要设置两个图标，一个是未选中时显示的图标路径 iconPath，一个是选中时显示的图标路径 selectedIconPath。这些图标我们一般需要自己去下载，在这里给大家推荐一个免费的矢量图标平台，这里面素材挺全的，基本可以满足我们的开发需求。Iconfont 平台网址：https://www.iconfont.cn这个网址建议收藏一下，不仅仅是 tab 图标，我们日常项目开发需要用到的图标，在这个平台上面基本都可以找到。将图标下载下来之后，我们将图标放到项目根目录下面的 static 文件夹下面，然后就可以在 pages.json配置文件中引用了，引用的时候 static 前面不要加 /，不然图片显示不出来。正确引用方式："iconPath": “static/images/binggan.png"错误引用方式："iconPath”: “/static/images/binggan.png”Tips：tab 页面展示过一次以后就会保存在内存中，再次切换 tab 时，只会触发页面的 onShow 函数，不会再触发 onLoad 函数，这个开发的时候需要注意。

字体的设置也是位于首选项中的 Appearance 外观选项中，点击 Appearance 外观选项，在展开的选项中选择 Colors and Fonts，右边就会出现一个 Eclipse 中所有类别的字体设置，如下图所示：修改字体的方法是先选择要修改的类别，通常我们会选择 Basic 下的 Text Font 来修改我们平时编辑时字体的大小，选择 Text Font 后，我们选择 Edit，接着在弹出的字体属性框中，我们修改 Size 为18，如下图所示：接着直接关闭该字体属性窗口，我们可以通过下方的预览（Preview），看看是否符合我们的要求，如下图所示：预览后没问题，点击 Apply 就完成对字体的修改了。

超级文本标记语言是标准通用标记语言下的一个应用，也是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）。浏览器按顺序阅读网页文件，然后根据标记符解释和显示其标记的内容，对书写出错的标记将不指出其错误，且不停止其解释执行过程，编制者只能通过显示效果来分析出错原因和出错部位。提示：但需要注意的是，对于不同的浏览器，对同一标记符可能会有不完全相同的解释，因而可能会有不同的显示效果。HTML 现在最新标准为第五代标准，又简称为 HTML5 。HTML 在 Web 迅猛发展的过程中起着重要作用，有着重要的地位。但随着网络应用的深入，特别是电子商务的应用，HTML 过于简单的缺陷很快凸现出来。HTML 不允许应用程序开发者为具体的应用环境定义自定义的标记。HTML 只能用于信息显示。 HTML 可以设置文本和图片显示方式，但没有语义结构，即 HTML 显示数据是按照布局而非语义的。随着网络应用的发展，各行业对信息有着不同的需求，这些不同类型的信息未必都是以网页的形式显示出来。例如，当通过搜索引擎进行数据搜索时，按照语义而非按照布局来显示数据会具有更多的优点。

2.1.1 修改局部字体在 Markdown 文件中，建议使用 <font> 标签的 face 属性修改文字字体。实例 1：#### 使用 `<font>` 标签的修改字体这里是默认字体<font face="HEI">这里是黑体</font><font face="KAI">这里是楷体</font><font face="GB18030 Bitmap">这里是扩展字体</font><style>p {font-size: 2rem;}</style>其渲染结果如下：2.1.2 常用字体字体在不同环境中支持程度不同，表现结果可能也不同。在设计上，尽量选择较为通用的字体。以下是一些 Web 常用中文字体：字体中文名称字体写法黑体<font face='SimHei'>宋体<font face='SimSun'>新宋体<font face='NSimSun'>仿宋<font face='FangSong'>楷体<font face='KaiTi'>仿宋_GB2312<font face='FangSong_GB2312'>楷体_GB2312<font face='KaiTi_GB2312'>微软雅黑<font face='Microsoft YaHei'>

自打我们开始学习网页设计，我们可以发现，我们大多数设置字体的方式是通过网页的现有的 font 标签的属性来设置。可能有的同学就会有疑问了，这些从一开始就可以轻松设置的字体来自于哪里？在遵循 W3C 规范的标签使用过程中，字体的解析都是由浏览器参与完成的。你可以理解为浏览器这个独特的系统提前预设或者内置。那么，既然是预设内置，就必然面临被人们看腻，千篇一律，可组合性太低等缺点。那么如果作为一个个人网页设计者，如何才能从浏览器预设内置的字体中跳出来，追求自己想要的字体，比如 Android 手机，或者 iPhone 手机中的各式各样的字体？首先是能不能的问题，在这里老师可以明确告诉大家，能！然后是如何去使用这些外来的字体呢？我们一般分成两种使用方式。第一种：在早期的一段时间内，有些网页设计者采用的就是这种方式，也就是用部分文字图片替代部分文字，以追求独立于浏览器内置预设字体之外字体的效果。这里说的部分文字图片是什么意思呢？就是图像工作者，先用制图软件制作出一些不同样式字体的文字，然后把它们作为类似活字印刷术的字块做成字库，这样就可以在用到哪个字的时候，就用我们制作好的这个字的图片去替换，从最终的显示效果和结果上看根本没有任何区别。第二种：第二种就是加载一些第三方的字体文件库，比如早期常见的有 Goole 公司提供的 Goole Web Fonts。到后来，有我们今天要说的 Adobe Edge Web Fonts，作为网页设计者和网页用户，这二者并不能看出太大的区别。而且我们今天讲到的 Adobe Edge Web Fonts 加载字体速度很快，使用起来十分流畅。加上它与 Adobe Creative 的深度融合，如果你是一个 Dreaweaver CC 的使用者，那么 Adobe Edge Web Fonts 绝对是你更换网页字体的不二选择！

与其他图表组件类似，饼图也支持通过 label 属性设定标签效果。首先看看 label.position 属性，用于设定标签位置，饼图的 label.position 支持如下值：inside/inner: 标签显示在饼图扇区内部outside: 标签显示在饼图扇区外部，通过视觉引导线连接扇区center: 标签显示在饼图的圆心点各位置显示效果如下：在 label.position 基础上，我们来看看标签在不同位置上的优化。

要查看译文在应用布局中的显示效果，可以在 Design Editor 中切换默认版和翻译版文本，如下所示：在左侧的 Project > Android 面板中，依次选择 ModuleName > res > layout。双击 activity_main.xml 以将其打开进行修改。点击左下角的 Design 标签页以显示 Design Editor。在 Design Editor 中，选择 Language 下拉列表。选择要以何种语言查看应用。

Font 字体中常用属性，见下表。属性描述 name 字体名称 bold 字体是否 jiacheight 字号 colour_index 字体颜色对应代码中访问，如下所示：titlestyle = xlwt.XFStyle() # 初始化样式titlefont = xlwt.Font()titlefont.name = "宋体"titlefont.bold = True # 加粗titlefont.height = 11*20 # 字号titlefont.colour_index = 0x08 # 字体颜色titlestyle.font = titlefont使用时，首先通过 xlwt.Font 进行初始化，完成字体配置后，将对象赋值给 XFStyle。Tips：上述代码中颜色代码不是 RGB 的六位颜色代码，而是 xlwt 内部的一套代码。具体可以参考 xlwt.Styles 中 _colour_map_text 的数据。xlwt.Styles 中 _colour_map_text 的数据如下：aqua 0x31 black 0x08 blue 0x0Cblue_gray 0x36 bright_green 0x0B brown 0x3Ccoral 0x1D cyan_ega 0x0F dark_blue 0x12dark_blue_ega 0x12 dark_green 0x3A dark_green_ega 0x11dark_purple 0x1C dark_red 0x10 dark_red_ega 0x10dark_teal 0x38 dark_yellow 0x13 gold 0x33gray_ega 0x17 gray25 0x16 gray40 0x37gray50 0x17 gray80 0x3F green 0x11ice_blue 0x1F indigo 0x3E ivory 0x1Alavender 0x2E light_blue 0x30 light_green 0x2Alight_orange 0x34 light_turquoise 0x29 light_yellow 0x2Blime 0x32 magenta_ega 0x0E ocean_blue 0x1Eolive_ega 0x13 olive_green 0x3B orange 0x35pale_blue 0x2C periwinkle 0x18 pink 0x0Eplum 0x3D purple_ega 0x14 red 0x0Arose 0x2D sea_green 0x39 silver_ega 0x16sky_blue 0x28 tan 0x2F teal 0x15teal_ega 0x15 turquoise 0x0F violet 0x14white 0x09 yellow 0x0D

字体文件的引用路径推荐使用以 ~@ 开头的绝对路径。如果字体文件小于 40kb，uni-app 会自动将其转化为 base64 格式，如果字体文件大于等于 40kb， 需要自己转换为 base64 格式，否则将不会生效。<style> /* 引入字体文件 */ .font { font-family: test-icon; src: url('~@/static/iconfont.ttf'); }</style>需要注意以下几点：@开头的绝对路径以及相对路径会经过 base64 转换规则校验；不支持引用本地图片的平台，小于 40kb，一定会转换为 base64 格式；h5 平台，图片文件小于 4kb 会转 base64，超出 4kb 时不转；图片文件在其余平台不会转 base64。（2）相对路径实例：background-image: url(../../static/logo.png);

网页的世界中，总少不了形形色色的图片。甚至大部分你看起来不像是的图片的东西，比如有特效，有动画的“好似”视频的网页元素，其实都用了某种格式的图片。而在现代网页中一种非常常见的网页图片元素就是鼠标经过图像，可能从代码角度并没有这个专有名词，而在 Dreamweaver CC 2018 中就是有这么一种设置，可以轻松的帮助我们设置鼠标经过图像。那么这个到底是一个什么样的图像效果呢？简单来说，就是在一张原有的网页中的图片的基础上，当鼠标移动到这张原有的图片的时候，原有的图片的位置就显示第二个图片了。而当鼠标一旦离开第二个图片，又会显示原有的第一张的图片，这种看似动态的效果，其实在网页中非常常见，Dreamweaver CC 2018 的操作原理是为我们封装，打包了一个 function 函数。没错，就是使用了 Javascript 。而我们在使用和设置这个功能的时候，全然不用估计自己写不写的出来 Javascript 函数，在这个擦作里，我们大家不会写 Javascript 函数都完全没有关系，所以大家不要对这一节的学习有任何的心理负担，老师不会提，也更不会讲解 Javascript 函数的相关知识。我们今天就单单谈这个功能在 Dreamweaver CC 2018 中的实现。这就是我们今天这一节要着重给大家讲解的东西。第一步：先打开桌面上的 Dreamweaver CC 2018 。对，没错，双击 DW！！！第二步：老生常谈的话题，新建一个空白的 HTML 文档。第三步：这一步就是我们最关键的一步，也是大家要重点记忆和跟着操作的一步。首先我们点击菜单栏中的插入，在插入菜单弹出的下拉菜单栏中，选择 HTML 。从下面的图片中可以看到，选择 HTML 中，弹出的下一级菜单列表中有一个设置鼠标经过图像选项！！！ 这里就是我们要点击的，发现这个选项之后，单击它。第四步：点开鼠标经过图像后的弹出界面如下图所示，我们发现在这个设置界面中，有一个原始图像选项，有一个鼠标经过图像选项。分别为这两个图片选择本地的两张不同的图片后，就可以完成我们鼠标经过图像的设置了。具体是什么效果呢？请看下面你的动态图片。怎么样？这种特效是不是在网页中似曾相识？也许你在较大体积的图片中不常见，但是比如一些小的按钮，鼠标一划过，就由方的变成圆的，或由三角的变成圆形。这种小地方特别容易使用到我们今天讲的鼠标经过图像的控制。

代码，文档不能正常展示。

实例 4：使用 style 样式修改全局字体和字号。#### 使用 `style` 修改字体字号# WORD中常用的一号宋体标题## WORD中常用的二号宋体标题### WORD中常用的三号宋体标题Word 中常用的四号正文楷体<style>h1 { font: 26pt song !important; }h2 { font: 22pt song !important; }h3 { font: 16pt song !important; }p { font: 14pt kai !important; }</style>其渲染结果如下：

柱状图同样支持极坐标系，不过程度并不如折线图。在极坐标系中，通常使用二维数组 (r, ∠a) 表示坐标点，其中 r 表示坐标点离远点的距离；∠a 表示坐标点的角度。但这种二维数组形态在柱状图下并不能生效，例如：1357示例效果：示例图中所有 bar 混杂在一起，无法传达出数据的含义。这是因为柱状图是一种二维图形，而极坐标点的表达式无法表达平面信息，所以上例这种 angleAxis、radiusAxis 均为数值型的柱状图在 ECharts 中是没有意义的。不过，只要选定任意轴为类目轴，就可以使用极坐标勾画柱状图，例如：1358示例效果：极坐标下的柱状图同样支持堆叠效果，比如：1359示例效果：

视图中有两个菜单，第一个菜单可以通过我们鼠标右键点击视图选项卡，此时出现的菜单用于关闭视图，如下图所示：第二个菜单被称为视图下拉菜单，通过点击视图中的竖着的三个点那个按钮来打开，如下图所示：视图下拉菜单通常包含适用于整个视图内容的操作，每个视图的下拉菜单都不相同，但是常用的操作就是选择如何显示视图的内容，或者对视图的内容显示进行排序。这些内容到了我们具体项目操作章节再做介绍。

img 标签为单标签，所以没有尾标签。而 img 标签有一个 必填的属性： src 属性，代表图片的路径。图片的路径可以为图片的相对路径，绝对路径和网络路径。这里我们以网络路径示范：<img src="https://www.imooc.com/static/img/index/logo-recommended.png" alt="慕课网logo">会呈现以下效果：img 标签还有一个属性为 alt 属性，alt 属性表示错误提示，如果图片的路径既 src 属性的地址出错时，会显示 alt 属性的内容，我们把上面例子稍微修改一下，把路径写错，既：<img src="https://www.imooc.com/static/img/index/logo-recommended123.png" alt="慕课网logo">则会在页面上呈现以下效果：如果图片路径出错，那么就不会显示对应的图片，而会显示一个图片加载失败的样式。这时候我们编写的 ALT 属性里面的内容也会呈现在页面上，就表示我们当前这张加载失败的图片的错误提示。注意：alt 属性的内容只会在图片加载失败时显示，既图片路径出错时，如果图片加载成功，则 alt 属性的内容会自动隐藏。 alt 属性起到一个提示作用，如果我们在编写代码时，不小心把图片路径写错，则会提示我们该张图片为哪一张，具体内容是什么。而 alt 属性还有一个重要的作用就是网站的 SEO 作用 （搜索引擎爬取网页的内容），假设由于下列原因用户无法查看图像，alt 属性可以为图像提供替代的信息：网速太慢；src 属性中的错误；浏览器禁用图像；用户使用的是屏幕阅读器。其重要性主要有： 网页内容相关性是关键词优化的前提，搜索引擎认为，网页上的图片应该与网页主题相关。反过来讲，当搜索引擎要判断网页的关键词时，图片的 alt - 代替属性是一个可信任的参考点。所以， 别忘了在图片的 alt - 代替属性。img 标签还可以设置 width 和 height 属性来改变图片的宽高，例如：<img src="https://www.imooc.com/static/img/index/logo-recommended.png" alt="慕课网logo" width="100" height="100">则会呈现以下效果：图片的宽高为 100 * 100。Tips：IMG 标签的 width 和 height 属性的值为数字，一般情况下为正整数。

表格中有两种类型的单元格，一种是上边介绍的表头单元格 th，一种是内容单元格 td。和 th 不同的是 td 的内容默认显示正常字体，使用左对齐方式。td 支持的属性基本上和 th 一致。td 必须包含在 tr 标签中才能生效。

实体的设计，主要从两个方面进行入手考虑，第一： 通讯协议的规则，分别是协议标识符、业务指令、数据长度、数据四个部分；第二： 不同业务对应不同的字段属性。具体如下图所示：基础实体主要定义 tag 字段，标识协议的标识符，code () 抽象方法，主要表示的是业务指令，不同的业务对应不同的指令。@Datapublic abstract class BaseBean implements Serializable { private Integer tag=1;//固定值，标识的是一个协议类型，不同协议对应不同的值 public abstract Byte code();//业务指令抽象方法}登录请求实体@Datapublic class LoginReqBean extends BaseBean implements Serializable { private Integer userid;//用户ID private String username;//用户名称 public Byte code() { return 1;//业务指令 }}登录响应实体@Datapublic class LoginResBean extends BaseBean implements Serializable { private Integer status;//响应状态，0登录成功，1登录失败 private String msg;//响应信息 private Integer userid;//用户ID public Byte code() { return 2;//业务指令 }}消息发送实体public class MsgReqBean extends BaseBean implements Serializable { private Integer fromuserid;//发送人ID private Integer touserid;//接受人ID private String msg;//发送消息 public Byte code() { return 3;//业务指令 }}消息响应响应public class MsgResBean extends BaseBean implements Serializable { private Integer status;//响应状态，0发送成功，1发送失败 private String msg;//响应信息 public Byte code() { return 4;//业务指令 }}消息接受实体public class MsgRecBean extends BaseBean implements Serializable { private Integer fromuserid;//发送人ID private String msg;//消息 public Byte code() { return 5;//业务指令 }}

默认情况下，Android Studio 会在 Android 视图中显示你的项目文件。此视图并不能反映磁盘上的实际文件层次结构，而是按模块和文件类型进行整理，以简化项目的关键源文件之间的导航方式，并隐藏某些不常用的文件或目录。与磁盘上的结构相比，一些结构变化包括以下方面：在顶级 Gradle Script 组中显示相应项目的所有与编译相关的配置文件；在模块级组中显示每个模块的所有清单文件（当你针对不同的产品类型和编译类型使用不同的清单文件时）；在一个组（而非在每个资源限定符的单独文件夹）中显示所有备用资源文件。例如，你的启动器图标的所有密度版本都可以并排显示。在 Android 视图下的项目结构如下：manifests：包含 AndroidManifest.xml 文件；java：包含 Java 源代码文件（以软件包名称分隔各文件，包括 JUnit 测试代码）；res：包含所有非代码资源（例如 XML 布局、界面字符串和位图图像），这些资源划分到相应的子目录中。

上例的图例数据由 series 数组自动推断，应用中也可选择通过 data 属性显式提供图例数据。data 数组接受两种类型的数值：字符串，用于指定图例项的名称，图例组件会根据对应的序列图形确定图例项的颜色；对象，属性如：{ // 名称 name: '系列1', // 图例项的图形 icon: 'circle', // 设置文本样式属性 textStyle: { color: 'red' }}示例：1329示例效果：提示：使用 legend.data 项时，务必注意几个要点：提供 legend.data 后会关闭字段推断功能，如果某个序列的名称在 data 中没有出现，图例上自然也不会出现该项；series名称必须能对应上 legend.data 项，否则也不会渲染该项；对于 legend.data 存在，但 series中不存在的项，也不会渲染。legend.data 还支持传入对象，对象形式能够制定图例项的名称、标记、文本样式。内置的标记支持有 ‘circle’, ‘rect’, ‘roundRect’, ‘triangle’, ‘diamond’, ‘pin’, ‘arrow’, ‘none’ 项，详情请参考 legend.data.icon 一节。示例：1330示例效果：

换行是初学者很容易遇到的问题。不同于分段换行，不分段换行不是用 <p> 标签描述段落，而是用 <br> 标签折断文字。如果要让文字另起一行而不分段，需在行尾增加两个空格。实例 3：将上例中的 “第一段第一句” 和 “第一段第二句” 之间增加换行。### 这是标题这是第一段正文文字的第一句。 这是第一段正文文字的第二句。这是第一段正文文字的第三句。这是第二段正文文字的第一句。这是第二段正文文字的第二句。渲染效果如下：注意：此处截图为 Typora 实时渲染效果，可以看出不分段换行处有一个下箭头提示此处有换行。在 Typora 中实现此效果需要在源代码模式下编辑（「显示」->「源代码模式」）。

与其他语言一样，Shell 也有字符串的输出及格式化字符的需求，在本章节我们着重讲解 Shell 中的 echo 与 printf 命令，灵活运用这两个命令，基本上就能满足我们在 Shell 编写中的大多数显示输出及格式化字符串的需求。

要将应用布局与参考图像（如界面模型）进行比较，我们可以在布局检查器中加载位图图像叠加层。要加载叠加层，请点击布局检查器顶部的 Load Overlay 图标。叠加层将会缩放以适合布局。要调整叠加层的透明度，请使用 Alpha 滑块。要移除叠加层，请点击 Clear Overlay 图标。未叠加参考图时显示如下图：叠加参考图后显示如下图：把参考设计图叠加上后查看，发现 SWITCH TO USING MEDIASESSION 按钮的坐标与设计参考图不符。

<body> <div class='header'> <i class="fa fa-calendar-plus-o"></i> 待做清单 {% if hasLogin %} <span class='login'> <i class="fa fa-sign-out"></i> <a href='/users/logout'>退出</a> </span> {% else %} <span class='login'> <i class="fa fa-sign-in"></i> <a href='/users/login'>登录</a> <i class="fa fa-user-plus"></i> <a href='/users/register'>注册</a> </span> {% endif %} </div>如果用户没有登录，网站首页的显示 “登录/注册” 按钮；如果用户已经登录，网站首页的显示 “退出” 按钮。在第 5 行，变量 hasLogin 标记用户是否登录，根据 hasLogin 是否为真显示不同的界面。

2.2.1 默认的节点几何图形节点是流程图中的核心元素，其要素包括形状和内容。在 Mermaid 语法中，不加任何修饰的文字内容会被渲染成几何图形节点。实例 3：默认的几何图形。​```mermaidgraph LR 几何图形中的文本内容​```其渲染结果如下：2.2.2 分离节点的 ID 与内容在相对复杂的场景中，同一图形可能被多次引用，如果图形中的文本较长，或者文本内容不足以体现图形的唯一性，可将图形节点的 ID 与其文本内容分开定义，以使结构更加清晰。实例 4：将节点的 ID 和显示文本区分开。​```mermaidgraph LR 一号节点[在此输入希望在一号节点上显示的文字内容]​```其渲染结果如下：2.2.3 节点的形状形状可用于区分节点的不同属性，有利于丰富流程图的信息量，同时保持其简洁性。在 Mermaid 中可以使用一些基本符号定义节点的形状，例如：圆角形、跑道形、气缸形、非对称形状、菱形、六角形、平行四边形、梯形。实例 5：圆角形节点的语法。​```mermaidgraph TD 节点ID(节点显示文本)​```圆形节点的语法。​```mermaidgraph TD 节点ID((节点显示文本))​```非对称形节点的语法。​```mermaidgraph TD 节点ID>节点显示文本]​```菱形节点的语法。```mermaidgraph TD 节点ID{节点显示文本}```六角形节点的语法。​```mermaidgraph TD 节点ID{{节点显示文本}}​```平行四边形节点的语法。​```mermaidgraph TD 右倾平行四边形[/平行四边形--右倾/] 左倾平行四边形[\平行四边形--左倾\]​```梯形节点的语法。​```mermaidgraph TD 梯形[/梯形--正向\] 反向梯形[\梯形--反向/]​```

在幻灯片中添加图表，对应代码中访问，如下所示：...省略部分代码#写入图表#创建一张新的幻灯片slide1=prs.slides.add_slide(prs.slide_layouts[0])#定义图表数据chart_data=CategoryChartData()chart_data.categories=['一月份','二月份','三月份']#X轴chart_data.add_series('Y2020',(300,400,500))chart_data.add_series('Y2019',(400,500,900))#插入图表到幻灯片chart=slide1.shapes.add_chart(XL_CHART_TYPE.LINE,Inches(2),Inches(2),Inches(6),Inches(4),chart_data).chart#是否显示标题chart.has_title=True#设置标题chart.chart_title.text_frame.text='第一季度销售额' #标题#是否显示图例chart.has_legend=True#设置图例位置chart.legend.position=XL_LEGEND_POSITION.RIGHT#步骤三：保存PPT文件prs.save('test.pptx')代码解释：首先使用 add_slide() 方法创建一张新的幻灯片，通过 add_chart() 方法插入图表，第一个参数为图标类型，这里 LINE 为折线图，参数依次为 left，top，width，height，图表所需数据。has_title 为是否显示标题，has_legend 是否显示图例。执行完成后，test.pptx 演示文稿如下图所示。

a 标签为双标签，需要有首尾标签。a 标签的 href 属性为必填属性，表示该 a 标签点击过后跳转网页的地址。例如：<a href="https://www.imooc.com/">去往慕课网</a>在网页中会呈现以下效果：注意:a 标签的 href 属性必须添加网络协议，如：HTTP 或者 HTTPS 协议，一般为 HTTPS 协议，不能单纯的编写网址；a 标签有很多默认样式，默认字体为蓝色，文本有下划线，点击过后，字体变为偏紫色；a 标签默认在本页面跳转，既不会新开一个网页跳转；a 标签的 href 属性如果为错误的网络地址，则页面会跳转，但不会显示网页的内容。a 标签还有一个属性为 target，表示跳转的网页为在当前页面跳转，还是新开一个页面跳转。默认值为 _self,表示为在当前页面跳转，如果将 a 标签的 target 属性设置为 _blank，则表示新开一个网页跳转，代码如下：<a href="https://www.imooc.com/" target="_blank">去往慕课网</a>a 标签的 target 属性为可选属性。

如果我们想要创建自己的布局变体，请执行以下操作：打开原始布局文件，点击窗口右上角的 Design 图标；点击工具栏中的 Orientation for Preview 图标；在下拉列表中，选择 Create Other…；在显示的对话框中，定义变体的资源限定符。 从 Available qualifiers 列表中选择限定符，然后点击 Add 按钮。 根据需要重复此步骤以添加其他限定符；添加完所有限定符后，点击 OK。

Call Chart 标签页会以图形来呈现方法跟踪数据或函数跟踪数据，其中调用的时间段和时间在横轴上表示，而其被调用方则在纵轴上显示。对系统 API 的调用显示为橙色，对应用自有方法的调用显示为绿色，对第三方 API（包括 Java 语言 API）的调用显示为蓝色。上图显示了一个调用图表示例，说明了给定方法或函数的 Self 时间、Children 时间和 Total 时间的概念。