ondayx / ux

Anything found about UX.

UX

Anything found about UX

In this warehouse it will be collected something useful for UX from the Internet，may be some articles

文章索引

点点滴滴

基础内容

• Markdown语法教程-1-标题语法

SVG

• SVG元素-1-RECT标签
• SVG滤镜初识-1-高斯与动感模糊
• SVG元素概览-index
• SVG样式初探
• SVG形状元素-2-POLYGON标签
• SVG形状元素-3-PATH标签
• SVG元素-2-ANIMATE标签

动画交互

• SVG与动画-1-原理
• CSS与动画-1-闪烁效果
• SVG与动画-2-闪烁效果
• SVG与动画-3-渐变
• SVG与动画-4-fill标签

图表

• UI与图表-1-雷达图
• UI与图表-2-高级图表
• UI与图表-3-构建图表

读后感

• 《数据可视化设计》-1-第一章·认识数据可视化设计
• 《数据可视化设计》-2-第二章·图表设计
• 读后感-以人为本，制度为纲
• 思考-关于认知偏差
• 读后感-沟通
• 《如何做高质量方案汇报》【转载】

To B

• B端图标其一

CSS

• css的EMMET语法之快速生成CSS样式【转载】

ux's Issues

Web端工具如何设计「保存」【转载】

原文来源UI**

简单理解：

前端保存分设置信息、与录入信息，设置信息跟随账户，录入信息确保关键步骤跟随操作保存、操作提示明确

Markdown语法教程-7-图片语法

图片语法

要添加图像，请使用感叹号 (!), 然后在方括号增加替代文本，图片链接放在圆括号里，括号里的链接后可以增加一个可选的图片标题文本。

插入图片Markdown语法代码：![图片alt](图片链接 "图片title")。

对应的HTML代码：<img src="图片链接" alt="图片alt" title="图片title">

案例：

![这是图片](https://markdown.com.cn/assets/img/philly-magic-garden.9c0b4415.jpg "Magic Gardens")

效果：

*图片首次加载可能会比较慢，需要等待一定的时间

链接图片

给图片增加链接，请将图像的Markdown 括在方括号中，然后将链接添加在圆括号中。

案例：

[![沙漠中的岩石图片](https://markdown.com.cn/assets/img/shiprock.c3b9a023.jpg "Shiprock")](https://markdown.com.cn)

效果：

B端图标其一

原文链接

SVG与动画-2-闪烁效果

SVG 实现 Blink 动画

SVG SMIL Animation 同样也能实现对图形的闪烁效果，通过声明 attributeName 为 fill ，指定想要变化的颜色。设定动画时长，就会让 SVG 图形闪烁起来。核心代码：

<polygon fill="#4fd2dd" points="6,66 6,18 12,12 18,12 24,6 27,6 30,9 36,9 39,6 84,6 81,9 75,9 73.2,7 40.8,7 37.8,10.2 24,10.2 12,21 12,24 9,27 9,51 7.8,54 7.8,63">
  <animate
    attributeName="fill"
    values="#4fd2dd;#235fa7;#4fd2dd"
    dur="0.5s"
    begin="0s"
    repeatCount="indefinite"
  />
</polygon>

GSAP 实现闪烁动画

继续沿用上例 SVG 闪烁边框，如何使用 GSAP 让边框闪烁起来呢，例子中的边框有三条 polygon ，我们注意到三条折线是同时进行闪烁动画的，每条折线都有自己的动画设定。所以在 GSAP 中我们不能使用 timeline，动画不是线性的，而是并行的。

我们先给折线定义好 id 属性

<div class="gs-border-blink">
  <svg width="300px" height="300px" class="left-top">
    <polygon id="line1" fill="#4fd2dd" points="6,66 6,18 12,12 18,12 24,6 27,6 30,9 36,9 39,6 84,6 81,9 75,9 73.2,7 40.8,7 37.8,10.2 24,10.2 12,21 12,24 9,27 9,51 7.8,54 7.8,63"> </polygon>
    <polygon id="line2" fill="#235fa7" points="27.599999999999998,4.8 38.4,4.8 35.4,7.8 30.599999999999998,7.8"></polygon>
    <polygon id="line3" fill="#4fd2dd" points="9,54 9,63 7.199999999999999,66 7.199999999999999,75 7.8,78 7.8,110 8.4,110 8.4,66 9.6,66 9.6,54"></polygon>
  </svg>
</div>

// line 1, #4fd2dd -> #235fa7 -> #4fd2dd
gsap
  .to('#line1', {
    fill:'#235fa7',
    repeat: -1,
    yoyo: true,
    duration: 0.25,
    repeatDelay: 0
  })
gsap
  .to('#line1', {
    fill:'#4fd2dd',
    repeat: -1,
    yoyo: true,
    duration: 0.25,
    repeatDelay: 0.25
  });

// line 2, #235fa7 -> #4fd2dd
gsap
  .to('#line2', {
    fill:'#4fd2dd',
    repeat: -1,
    yoyo: true,
    duration: 0.3,
    repeatDelay: 0
  })
  
// line 3, #4fd2dd -> transparent -> #235fa7
gsap
  .to('#line3', {
    fill:'transparent',
    repeat: -1,
    yoyo: true,
    duration: 0.5,
    repeatDelay: 0
  })
gsap
  .to('#line3', {
    fill:'#235fa7',
    repeat: -1,
    yoyo: true,
    duration: 0.5,
    repeatDelay: 0.3
  });

来源：https://segmentfault.com/a/1190000038676261

UI与图表-2-高级图表

一般图表就即只反映纬度、数值两个方面的图表类型，基本都是我们日常生活中经常接触，马上都能看懂的。

但是进阶图表就不是那么简单了，进阶的图表包含除了纬度、数值外的其它类型数据，如分类、地区、日期、性别等不同种类。

比如下面这个散点图，除了身高（纬度）、体重（数值）外，还表现了个体（圆点）、性别（色彩）。在图表本身的解释性元素中，还包含分布区域、最大最小值标识、体重/身高均值。

还有类似桑基图、K 线图、环形布局关系图等类型，它们有各自使用的规范、参数，以及应用的场景。

下面的案例，我们不用将城市纬度作为一个枯燥的字段放进图表中，而是直接使用地图进行呈现，那么不仅理解起来更直观，而且非常方便我们对区域进行分析和对比。

这就是所谓的数据可视化的应用实例，数据可视化并不仅仅是做一些基础的图表，而是根据我们对数据分析的需求，输出合适的可视化图形。

掌握越多图表类型、可视化应用案例，就越有助于我们应对复杂的项目数据展示需求。

文章节选自：https://www.uisdc.com/b-side-design-specification-6

Markdown语法教程-3-引用语法

引用语法

要创建块引用，请在段落前添加一个 > 符号。

案例：

> Dorothy followed her through many of the beautiful rooms in her castle.

效果：

Dorothy followed her through many of the beautiful rooms in her castle.

块引用可以包含多个段落。为段落之间的空白行添加一个 > 符号。

案例：

> Dorothy followed her through many of the beautiful rooms in her castle.
>
> The Witch bade her clean the pots and kettles and sweep the floor and keep the fire fed with wood.

效果：

Dorothy followed her through many of the beautiful rooms in her castle.

The Witch bade her clean the pots and kettles and sweep the floor and keep the fire fed with wood.

块引用也可以嵌套，在要嵌套的段落前添加一个 >> 符号。

案例：

> Dorothy followed her through many of the beautiful rooms in her castle.
>
>> The Witch bade her clean the pots and kettles and sweep the floor and keep the fire fed with wood.

效果：

Dorothy followed her through many of the beautiful rooms in her castle.

The Witch bade her clean the pots and kettles and sweep the floor and keep the fire fed with wood.

块引用可以包含其他 Markdown 格式的元素。但并非所有元素都可以使用，你需要进行实验以查看哪些元素有效。

案例：

> #### The quarterly results look great!
>
> - Revenue was off the chart.
> - Profits were higher than ever.
>
> *Everything* is going according to **plan**.

效果：

The quarterly results look great!

• Revenue was off the chart.
• Profits were higher than ever.

Everything is going according to plan.

SVG形状元素-2-POLYGON标签

polygon标签

根据polygon的定义来说，一般大于三边的封闭多边形（哪怕是边与边相互交叉）都可以用这个标签标示：
<polygon id="polygon" stroke="#979797" fill="#D8D8D8" points="-2.84217094e-14 0 -2.84217094e-14 180 180 0"></polygon>
以上案例中是sketch软件中一个非常独特的现象，出现-2.84217094e-14的直接原因推测应该是没有进行手动输入参数而是使用了自动吸附的功能，解读坐标的话应该是“0 0 0 180 180 0”，既第一个点的坐标是0 0原点，另外两个点分别为0 180和180 0，所围成的图形是直角边为180长度的直角等腰三角形。
在sketch中生成polygon标签的方式是通过钢笔工具勾直线围合的多边形。

SVG样式初探

除了默认常见的内联样式外，SVG中还有多种方式添加样式。

SVG图形的一个最常见用例是图标系统，其中最常用的SVG sprite技术就是使用SVG 元素在文档中任意位置“实例化”图标。

使用元素实例化图标或任何其它的SVG元素或图像，给元素添加样式时经常会碰到一些问题。这篇文章的目的是尽可能给你介绍一些方法来解决：使用引入的内容添加样式受限的问题。

但是在开始之前，我们先快速浏览一下SVG的主要结构和分组元素，然后慢慢进入use的世界中，以及shadow DOM，然后重回CSS的怀抱。我们会逐步讲解为什么给内容添加样式会比较麻烦，以及有什么好的解决方案。

SVG结构化、分组，以及在SVG中引用（重用）元素速览
SVG中有四个主要的元素用于在文档中定义、结构化和引用SVG代码。这些元素使得重用SVG元素变得容易，同时保持代码的简洁性和可读性。因为SVG的特性，这些元素和图形编辑器中的某些命令具有相同的功能。

这四个用于SVG分组和引用的主要元素是：, , 和 。

元素（“group”的简写），用于给逻辑上相联系的图形元素分组。从图形编辑器的角度，如Adobe Illustrator，元素提供了类似于分组对象的功能。你也可以把它想象成图形编辑器中图层的概念，因为一层也是一组元素。

当你想要应用某个样式，并希望这个样式能被组中的所有元素继承，分组元素非常好用，特别是当你想要给某组元素应用动画，同时还需要保持它们彼此的空间关系的时候。

元素用来定义你之后要重用的元素。当你想要创建某一类在文档中要多次使用的“模板”时，使用定义元素。在元件中定义的元素不会在画布中渲染出来，除非你在文档的某个位置调用了它们。

可以用于定义很多东西，但是最主要的使用情景之一是定义类似渐变的图案，例如，使用这些渐变作为其它SVG元素的描边填充。它可以用来定义你想要在画布上渲染的任何元素。

元素结合了和元素的优点，将定义模板的元素组合在一起，以便之后在文档中的其他位置引用。和不同，通常不用于定义图案，但是经常用于定义例如图标这样的标志，在整个文档中都可以被引用。

元素相比其它两个元素有一个非常重要的优点：它接受一个viewBox属性，可以让它在任何视窗中自适应大小缩放渲染。

元素用于引用文档中其它位置定义的元素。你可以重用已有的元素，类似于图形编辑器中的复制粘贴功能。它可以重用单个元素，也可以重用一组用、或定义的元素。

要使用一个元素，你需要通过一个标识对该元素进行引用——一个ID，即use中的xlink:href属性，以及用来给该元素定位的x和y属性。你可以给use元素应用样式，这些样式也会级联应用到use元素的内容中去。

的内容是什么呢？它被克隆到哪里了？CSS级联如何处理这些内容？

在我们回答这些问题之前，因为我们目前只讲了SVG结构化和分组元素，这里还有几篇值得我们继续深入学习的文章，关于viewBox属性和的使用：

Structuring, Grouping, and Referencing in SVG — The , , and Elements
理解SVG坐标系和变换：视窗,viewBox和preserveAspectRatio
SVG 及shadow DOM
当你使用引用元素时，代码如下：

渲染在屏幕上的东西是内容定义在内的图标，但是这不是真正渲染出的内容，而是的内容，也就是内容的一个副本或者克隆。

但是元素只是一个元素，它是自闭合的。在use标签的开闭区间内没有任何内容，所以的内容是克隆到哪里了呢？

答案是：Shadow DOM。（不知道为什么，shadow DOM总是让我想起蝙蝠侠(:зゝ∠)。）

什么是shadow DOM？

shadow DOM和常规的DOM很类似，不同之处在于shadow DOM不是主文档子树的一员，shadow DOM中的结点属于文档片段，基本上等同于另一棵结点树，不能像普通结点那样添加脚本和样式。这给了作者们一种方法来封装和包裹样式及脚本，当创建模块化组件时。如果你使用过HTML5的video元素，或range input类型，也很好奇video控件或者范围输入组件是从哪里来的，那么你就已经接触过shadow DOM了。

在SVG元素中，引用元素的内容被复制到一个文档片段中保存，这个文档片段是由保留着。在这里就是一个shadow Host。

所以，的内容（克隆或复制那个它引用的元素的）都表示在一个shadow文档片段中。

也就是说，它们就在那里，但是并不可见。就像普通的DOM内容一样，但是并不是在“高等级”的DOM中，并不能在主文档中被CSS选择器和JavaScript选中，它们被复制到由保留的文档片段中。

现在，如果你是一个设计师，你可能会想：“ok，我了解了这东西了，但是有什么方法可以检查子文档，来看看它的真正的内容呢？”答案是：有的！你可以使用Chrome的开发者工具预览shadow DOM的内容。（现在还无法在Firefox中查看shadow DOM的内容。）但是为了完成这个，你需要先在“General”面板中勾选shadow DOM检查的选项。也就是：打开 Chrome 的开发者工具，点击右上角的“Settings”按钮勾选“Show user agent shadow DOM”。

在开发者工具中勾选了shadow DOM检查这一项之后，你可以在Elements面板中看到克隆的元素，和普通的DOM元素一样。下面的图片展示了元素引用元素的内容的示例。注意到有一个“#shadow-root”，而且当点开此片段的内容时——会发现它就是内容的副本。

shadow DOM

检查一下这些代码，你可以看到shadow DOM和普通的DOM非常相似，除了在主文档中用CSS和JavaScript处理时有不同的特性之外。它们之间还存在其它差异，但是这一节不可能完全在讲shadow DOM，因为这真的是一个很大的概念，所以如果你想要阅读和了解更多关于它的内容的话，我推荐下面这几篇文章：

Intro to Shadow DOM
What the Heck is Shadow DOM?
Shadow DOM 101
Introduction to Shadow DOM (Video)
图灵社区的同学翻译的shadow DOM系列文章。

对我来说，考虑如何限制和shadow DOM的交互时，我把它当成普通DOM一样，除了在用CSS（和JavaScript）添加样式时需要不同地处理。但是对于SVG开发者来说就是一个问题：shadow DOM中的内容如何存在，当需要给内容应用样式或者改变样式的时候，因为我们希望可以为它们添加样式。使用的目的是为了可以创建某个元素的多个不同的“副本”，很多情境下，我们想要的是可以给差异化地给不同的副本添加样式。例如，考虑一个有两种样式的logo（反转颜色的主题）或多种颜色的icon，每一个都有自己的主题。这时，我们自然而然就会想到使用CSS来完成。

也就是说，我们前面提到的shadow DOM的内容在CSS看来不能像普通DOM一样添加样式。所以，我们要怎么给它的内容添加样式呢？我们不能像这样指向的路径级联：

use path#line {
stroke: #009966;
}
因为我们不能使用普通的CSS选择器来获取shadow DOM。

有一组特殊的选择器可以让我们打破普通DOM的界限，给它里面的结点应用样式，但是这些选择器并没有很好的浏览器支持，而且相比CSS中提供的一长串用来选中普通DOM元素的选择器，它们是受限的。

此外，我们希望有一个更简单的方式来给SVG的内容添加样式，而不需要去接触shadow DOM的具体内容——只使用简单的CSS和SVG。

为了实现以及获得更多一点控制，给的内容添加样式，我们需要从不同的角度思考，借用CSS级联和继承的优势。

级联样式
因为SVG元素可以使用CSS通过三种不同的方法之一进行添加样式：外部的CSS样式（在外部的CSS文件中），内部样式块（<style>元素包裹），以及内联样式（在元素的style属性中）。重点在于这些级联管理是如何将样式应用到元素之上的。

除了CSS属性，SVG元素还可以使用描述属性添加样式。描述属性是在元素上设置CSS属性的简写方式。可以认为它们是特殊的样式属性。它们的目的就是给样式级联做贡献，但是可能正走在一个我们不太期望的方向上。

在下面的代码片段中，简单地展示了一个粉色的带黄色描边的圆。stroke，stroke-width和fill都是描述属性。

在SVG中，所有CSS属性的子集可以通过SVG属性设置，反之亦然。这意味着，不是所有的CSS属性都可以被指定给SVG元素作为描述属性，也不是所有SVG支持的描述属性都可以在CSS中指定，虽然有很多都可以。

SVG规范列出了可以设置为CSS属性的SVG属性。其中一些属性可以和CSS共享（也就是已经可以作为CSS属性），如opacity和transform，有一些还不行，如fill、stroke和stroke-width。

在SVG 2中，这个列表将包括x、y、width、height、cx、cy，以及一些其它的描述属性，目前还不能在SVG 1.1中通过CSS来设置的。新的属性列表可以在SVG 2规范中找到。

如果你和我一样，那么你一定会期待描述属性可以有相比其它样式声明更高的特殊性。我的意思是，毕竟，外部的样式可以被内部的样式块覆盖，内部的样式块又可以被style属性设置的内联样式覆盖。那么这看起来是不是越“内层”的样式，优先级就越高。所以如果一个属性有了自己的特性，它是不是就更强大，因此它也就可以覆盖所有其它的样式声明。尽管这对我来说是非常棒的，但是它真正的工作原理却不是这样的。

事实上，描述属性算是比较低层级的“作者样式层叠表”，可以被其它所有的样式定义覆盖：外部的样式表，内部的样式块以及内联样式。描述属性唯一超过的就是继承样式。就是说，描述属性只可以覆盖文档中的继承样式，但是会被其它所有的样式声明覆盖(:зゝ∠)。

好滴~既然我们现在弄清楚了，我们回到元素以及它的内容上吧。

我们现在知道我们不同使用CSS选择器给中的元素设置样式。

我们知道，正如元素，你应用给的样式将会被它所有的后代内容继承（也就是shadow DOM中的内容）。

所以第一个改变内元素的fill颜色的尝试就是给元素本身应用此填充颜色，并让其继承和级联。

但是，这带来了两个问题：

该填充颜色将被的所有后代内容继承，甚至包括那些你并不想给它们应用样式的内容（如果你的中还没有任何元素，那么这就不成问题。）
如果是通过图形编辑器导出，或者是从其它设计师手中拿到的SVG，简单来说，就是你不能接触到SVG源码，那么你可能就没办法给SVG元素应用描述属性了（除非你明确指出你不希望在输出SVG的时候发生这个事情，但这是另一个话题了），这些属性的值将覆盖你给应用的所有样式。现在，我假设如果你给指定了样式，而且希望这些样式可以被它的后代继承，那么描述属性可能会给你带来不便。
即使你可以获取SVG的代码，你也可以摆脱描述属性，我强烈建议不要这样做，因为：

删除那些用于设置某些属性的特性(:зゝ∠)，将会导致这些属性被重置为初始的浏览器默认值——也就是，一般情况下，所有都是黑色填充和描边（比如我们现在讨论的是颜色）。
通过重置所有值，你可以强迫自己去给所有属性集指定样式，所以除非你想这么做，否则你不要想摆脱这些描述属性了。
描述属性设计的初衷是作为一项降级机制，用于当你的外部样式因为某些原因不能应用的时候。如果CSS因为某些东西给搞砸而不能加载的时候，你的图标至少可以有些默认的相对漂亮的样式可以降级。这点我强烈建议保留它们。
好了，现在我们有这些属性了，但是我们还想针对不同的实例应用不同的样式，比如说，不同的图标。

需要做的就是确保我们强制描述属性继承了设置于之上的样式，或者找到一个方法来让它们覆盖这些值。为了做到这一点，我们需要利用CSS的优势。

我们从最简单的实例开始，然后慢慢进入到更复杂的情景。

CSS描述属性值的介绍
描述属性可以被其它任何的样式声明覆盖。我们可以利用这个优势，用一个外部的样式声明，强制描述属性覆盖从use继承的值。

通过使用CSSinherit关键字，这会变得非常简单。看看下面的例子，我们绘制了一个冰淇淋的图标，只用一条路径完成，而且可以根据不同的情况改变填充颜色。这个图标是Erin Agnoli在Noun项目中创建的。

这个冰淇淋图标的内容（也就是path）是定义在一个元素中的，也就是说它们不会直接在SVG画布中渲染。

然后，我们使用渲染出多个图标实例。

我们在CSS中设置图标的宽度和高度。我使用了viewBox一样的尺寸，但它们也不是一定要相同的。但是，为了避免SVG内多余的空白太多，保持它们的宽高比。

.icon {
width: 100px;
height: 125px;
}
使用上面的代码，你可以得到下面的结果：

注意我给SVG添加了一个黑色的边框，这样大家才可以看到每个图的边界，我们定义的第一个SVG图标的内容并没有渲染。这里可以提出一点：你在symbol中定义的SVG文档也会在页面中渲染出来，即使它没有包括渲染图形。为了避免这一点，确保你在第一个SVG中设置了display: none。如果你没有隐藏包含图标定义的SVG，即使你没有明确设置任何尺寸，它也会被渲染出来——浏览器默认尺寸是300x150px，这是在CSS中没有替代元素时的默认尺寸，所以你会在页面上得到一块白色的区域，尽管你并不想要这块东西。

现在让我们试试改变每个图标实例的填充颜色：

use.ic-1 {
fill: skyblue;
}
use.ic-2 {
fill: #FDC646;
}
即使这样写了，图标的填充颜色还是不会有任何改变，因为继承的颜色值被path元素的fill="#000"覆盖了。为了阻止这个东西，我们强制让path继承颜色值：

svg path {
fill: inherit;
}
瞧！我们给元素设置的颜色现在可以逐个应用于path了。查看下面的demo，可以照自己喜欢的去改变颜色值，创建更多实例：

现在这种技术已经非常好用，当你想要强制的内容继承你设置的样式时。但是在大多数情况下，这可能不是你想要的。还有很多其它添加样式的场景，所以我们接下来会介绍一些其它的方法。

使用CSS的all属性给的内容添加样式
前段时间我使用一个引用自use的图标，我想让它里面的其中一个元素可以继承所有我给设置的样式，像fill、stroke、stroke-width、opacity甚至transform。基本上，我希望可以控制所有这些CSS属性，同时保留标签中的描述属性作为降级。

如果你发现你也处在这样一个场景中，你可能会发现这用CSS做起来非常耗时间：

path#myPath {
fill: inherit;
stroke: inherit;
stroke-width: inherit;
transform: inherit;
/* ... */
}
看看上面的代码片段，你可以看到都是同一个模式，我们应该可以把所有这些属性结合起来，放到一个属性中，并把所有这些属性的值设置为inherit。

幸运的是，这就是CSS的all属性发光发热的时候了。我之前写过关于使用all属性来给SVG的内容添加样式的参考条目，但是因为我们现在的上下文环境，我们需要再看看。

使用all属性，我们可以这样写：

path#myPath {
all: inherit;
}
这在所有支持all属性的浏览器中都工作得非常好（详细信息请查看属性参考条目），然而还有几个重点要记住：这条声明会真正地给元素的所有属性都设置从父元素继承值，包括那些你可能不想要的属性。所以除非你想要在CSS中给元素的所有属性都设置样式，否则你就不要使用它——这是一种极端的措施，当你想要暴露你的元素，然后在CSS中对它的样式属性进行完全的控制的时候才使用，这种情况比较少见。如果你使用这条声明，不在CSS中指定所有属性的值，它们就会直接往上然后级联，知道它们找到可以继承的值，大多数情况下就是浏览器的默认样式，从默认用户代理样式表加载而来。

注意这只会影响到那些可以在CSS中设置的属性，不包括那些SVG独有的属性。所以如果一个属性可以作为CSS属性设置，它就会被设置为inherit，否则就不会。

能够强制描述属性去从继承样式是强大的，但是如果你的图标是由多个元素组成的呢，你肯定不想要让所有的这些元素都从use继承同一个fill颜色吧？那如果你想要给不同的use级联应用多个填充颜色怎么办呢？给use设置一个样式已经不足够了，我们需要一些其它的东西来帮助我们从正确的元素级联正确的颜色。

使用CSS的currentColor变量来给内容添加样式
使用CSS的currentColor变量，并结合上面的技术，我们可以给一个元素指定两种不同的颜色，而不仅是一种。Fabrice Weinberg在他的CodePen blog写了一些关于这种技术的文章。

有关于currentColor更多信息，可以参阅早前的一篇译文《使用CSS的currentColor变量扩展颜色级联》。

这种技术的内幕其实是在上同时使用fill和color属性，然后利用currentColor的变量特性，让这些颜色级联到的内容上。我们先看一个代码实例，看看这是怎么搞的先。

假设我们要给这个小小的Codrops的logo添加两种颜色的样式——一个用于前面的水滴，一个用于后面的——logo的每一个实例都是采用两种颜色。

currentColor

首先，我们从上面的代码截图开始：用symbol包裹我们的图标定义，然后使用三个创建三个logo实例。

如果我们想要给元素的每个实例设置fill颜色，该颜色将会两条路径都继承，最后它们就会有相同的颜色——这不是我们想要的。

所以我们不仅要指定fill颜色，还要让它按照默认方法级联，然后使用currentColor变量来确保icon前面的小水滴获取和背景不同的颜色值：该值通过color属性指定。

首先，我们需要在我们想要应用该颜色值的地方插入currentColor；进入定义图标内容的标签，在中。代码如下：

下一步我们需要从另一个水滴中删除fill描述属性，并让它从use继承fill颜色，而不是使用inherit技术。

如果我们要使用inherit关键字来强制描述属性从use继承值，两条路径都会继承相同的值，这样currentColor就不会再产生任何效果。所以，在这种技术中，我们需要删除我们想要在CSS中设置的属性，只保留那个我们想要使用currentColor设置的值。

现在，在上使用fill和color属性，给水滴添加样式：

.codrops-1 {
fill: #4BC0A5;
color: #A4DFD1;
}
.codrops-2 {
fill: #0099CC;
color: #7FCBE5;
}
.codrops-3 {
fill: #5F5EC0;
color: #AEAFDD;
}
每个元素有自己的fill和color值。对单个水滴来说，fill颜色级联并被没有fill属性的第一条路径（后面的水滴）继承，color属性的值被作为第二条路径（前面的水滴）的fill属性的值。

所以当前颜色值被引用到元素里边，使用currentColor。漂亮整洁，对吗？

这是上面代码的demo：

这种双色变量技术对于简单的双色标志非常好用。在Fabrice的文章中，他创建了三个不同的sass logo，通过改变文本的颜色和背景颜色。

currentColor关键字目前只在CSS变量中支持。但是，如果我们有更多的变量，是不是就可以分配和释放更多的值到内容中呢？对的！Amelia Bellamy-Royds在CodePen blog的文章中介绍了这个概念，大概一年多之前。我们来看看它是如何工作的。

将来：使用CSS自定义属性给内容添加样式，即CSS变量
使用CSS自定义属性（即CSS变量），你可以给的内容添加样式，而不需要强制浏览器覆盖任何描述属性的值。

如MDN中定义的，CSS变量可以是作者、或用户，定义的，web页面中包含整个文档中指定的值的实体。它们被设置了使用自定义属性，并通过一个指定的功能符号var()访问。和CSS预处理器（如sass）的变量非常相似，但是更灵活，可以做预处理器变量不能做的事情。（CSS变量很快将被添加到Codrops CSS参考条目中，敬请期待。）

变量，即CSS变量或预处理器变量，都可以有很多使用示例，但是主题（颜色）是最常见的用例之一。在这一节中我们将讲解在给SVG添加样式时如何使用它。

我们先从一张symbol中定义并通过use实例化的图像开始，并且只为这张图像应用这种技术；只要你想，这个示例中给内容应用样式的概念，也可以被应用到很多元素中。

现在，假设我们有如下这个可爱时髦的机器人插画，Freepik设计~

机器人插画

机器人的代码包括了这些组成颜色。

   <!-- rest of the shapes -->
</symbol>

现在，我们不打算使用CSS变量作为每条路径的fill属性的值；我们将使用CSSfill属性作为其填充颜色值，并保留原位置的fill属性。这个属性将作为降级使用，在不支持CSS变量的浏览器中，这样这个图像在那些不支持变量的浏览器中，仍然能保留初始样式。

添加了变量之后，上面的代码变成如下：

    <!-- rest of the shapes -->
</symbol>

因为内联style标签会覆盖描述属性，支持CSS变量的浏览器会使用这些变量作为图形的填充颜色。不支持CSS变量的浏览器将使用fill属性值。

下一步，我们需要在CSS中定义变量的值。首先，插画需要使用use实例化：

然后，变量将会定义在use上，这样它们会被级联到内容上。你给变量选的颜色将会构成你的插画内容的颜色主题。所以，对于上面的机器人，构成图形有三种主要的颜色，我把它们命名为primary、secondary和tertiary。

#robot-1 {
--primary-color: #0099CC;
--secondary-color: #FFDF34;
--tertiary-color: #333;
}
有这些变量，你仍然可以使用fill和color属性，但是你可能不需要或者根本不想要。所以，有了以上通过变量定义的颜色，我们的机器人如下：

机器人插画

你可以根据自己需要创建很多图像的副本，每个都定义一组不同的颜色，然后使用不同的颜色主题。当你想要给同一个logo根据上下文，以不同的方式为其添加样式时，或者任何其它相似的用例。

现在，我们提到那些不支持CSS变量的浏览器会降级到描述属性的初始样式，而不支持变量的浏览器将会使用fill属性来覆盖属性。ok！但如果浏览器不支持CSS变量，而且作者还没有为它们提供指定的变量值，或者他们提供的值是无效的，会发生什么呢？

对于我们这里的时髦可爱的机器人，我们定义了三个变量，只有图像中的一小部分元素没有获取任何变量，因为它们使用默认的颜色，任何颜色的主题都是非常漂亮的。所以，如果你在支持CSS变量的浏览器（目前只有Firefox）中展示上面的代码，然后从CSS中删除变量声明，你将会得到：

机器人插画

如果如果没有设置变量值或者变量值无效，浏览器会使用默认颜色，通常是黑色的填充和描边。

避免的方法是为浏览器支持提供另一种降级颜色。事实上，CSS变量的语法就可以做到这一点：在var()函数内部不要只提供变量值一条声明，你可以用逗号分隔提供两条声明：变量名和一个降级颜色值——在这里就是指我们在描述属性中使用的值。

所以，回到上面的机器人代码，如下：

     <!-- rest of the shapes -->
</symbol>

就是它了。对任何无法加载或没有定义值的变量，浏览器将会降级使用标签中定义的初始颜色。非常棒！

使用这种技术，你现在可以在页面上任何你想要的地方，使用引用机器人。在CSS中为每一个新实例定义一组变量值，这样每个实例都会有一组不同的颜色主题。

你可以看看上面的demo，创建很多机器人副本，然后指定不同的变量值，只要确保你使用的是Firefox浏览器，因为在写这篇文章的当前（2015.7.16）只有它支持CSS变量：

如果你是在Firefox中查看demo，你会看到我们用CSS变量定义的蓝色+黄色版本的机器人。记得在Chrome中查看其降级机制（绿色版本），然后在Firefox中尝试删除变量声明，看看降级如何。

著作权归作者所有。
商业转载请联系作者获得授权,非商业转载请注明出处。
原文: https://www.w3cplus.com/svg/styling-svg-use-content-css.html © w3cplus.com

读后感-沟通

原文链接：《脱不花：职场沟通，最大的禁忌是什么》

导读：写在前面

1. 有社会结构的生物群落就存在沟通
2. 人类是目前地球上智能水平最高、群落结构最复杂的生物，沟通的意义也尤为重要
3. 基于人类心理的复杂度和人性，沟通的问题是人类在各个组织层面上面对的一大重要问题

结论

结构

特别标注

结语

Markdown语法教程-1-标题语法

标题语法

要创建标题，请在单词或短语前面添加井号 (#) 。# 的数量代表了标题的级别。例如，添加三个 # 表示创建一个三级标题 (<h3>) (例如：### My Header)。

*记得要在符号与正文间加空格

可选语法

还可以在文本下方添加任意数量的 == 号来标识一级标题，或者 -- 号来标识二级标题。

SVG与动画-1-原理

可以通过animateMotion的方法实现。

<svg viewBox="0 0 120 120" fill="#3d1" version="1.1"
  xmlns="http://www.w3.org/2000/svg">
  <path id="motionPath" d="M 40 30 Q 10,9 20,100 L 100 80 L60 40" stroke="red" stroke-dasharray="4 4" fill="none" stroke-width="1"></path>
  <circle id="circle" cx="0" cy="0" r="2" />
  <animateMotion
         id="circle"
         xmlns:xlink="http://www.w3.org/1999/xlink"
         xlink:href="#circle"
         dur="10s"
         begin="0s"
         fill="freeze"
         repeatCount="1"> 
       <mpath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#motionPath" />  
   </animateMotion>
</svg>

————————————————
版权声明：本文为CSDN博主「页神建辑-思而后学」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_41993525/article/details/112797279

css的EMMET语法之快速生成CSS样式【转载】

文章出处:51CTO

Markdown语法教程-6-链接语法

链接语法

链接文本放在中括号内，链接地址放在后面的括号中，链接title可选。

超链接Markdown语法代码：[超链接显示名](超链接地址 "超链接title")

对应的HTML代码：<a href="超链接地址" title="超链接title">超链接显示名</a>

案例：

这是一个链接 [Markdown语法](https://markdown.com.cn)。

效果：

这是一个链接 Markdown语法。

给链接增加 Title

链接title是当鼠标悬停在链接上时会出现的文字，这个title是可选的，它放在圆括号中链接地址后面，跟链接地址之间以空格分隔。

案例：

这是一个链接 [Markdown语法](https://markdown.com.cn "最好的markdown教程")。

效果：

这是一个链接 Markdown语法。
*没有效果？

网址和Email地址

使用尖括号可以很方便地把URL或者email地址变成可点击的链接。

案例：

<https://markdown.com.cn>
<[email protected]>

效果：

https://markdown.com.cn
[email protected]

带格式化的链接

强调 链接, 在链接语法前后增加星号。 要将链接表示为代码，请在方括号中添加反引号。

案例：

I love supporting the **[EFF](https://eff.org)**.
This is the *[Markdown Guide](https://www.markdownguide.org)*.
See the section on [code](#code).

效果：

I love supporting the EFF.
This is the Markdown Guide.
See the section on code.

引用类型链接

引用样式链接是一种特殊的链接，它使URL在Markdown中更易于显示和阅读。参考样式链接分为两部分：与文本保持内联的部分以及存储在文件中其他位置的部分，以使文本易于阅读。

链接的第一部分格式

引用类型的链接的第一部分使用两组括号进行格式设置。第一组方括号包围应显示为链接的文本。第二组括号显示了一个标签，该标签用于指向您存储在文档其他位置的链接。

尽管不是必需的，可以在第一组和第二组括号之间包含一个空格。第二组括号中的标签不区分大小写，可以包含字母，数字，空格或标点符号。

以下示例格式对于链接的第一部分效果相同：

[hobbit-hole][1]
[hobbit-hole] [1]

链接的第二部分格式

引用类型链接的第二部分使用以下属性设置格式：

放在括号中的标签，其后紧跟一个冒号和至少一个空格（例如[label]:）。
链接的URL，可以选择将其括在尖括号中。
链接的可选标题，可以将其括在双引号，单引号或括号中。
以下示例格式对于链接的第二部分效果相同：

[1]: https://en.wikipedia.org/wiki/Hobbit#Lifestyle
[1]: https://en.wikipedia.org/wiki/Hobbit#Lifestyle "Hobbit lifestyles"
[1]: https://en.wikipedia.org/wiki/Hobbit#Lifestyle 'Hobbit lifestyles'
[1]: https://en.wikipedia.org/wiki/Hobbit#Lifestyle (Hobbit lifestyles)
[1]: <https://en.wikipedia.org/wiki/Hobbit#Lifestyle> "Hobbit lifestyles"
[1]: <https://en.wikipedia.org/wiki/Hobbit#Lifestyle> 'Hobbit lifestyles'
[1]: <https://en.wikipedia.org/wiki/Hobbit#Lifestyle> (Hobbit lifestyles)

可以将链接的第二部分放在Markdown文档中的任何位置。有些人将它们放在出现的段落之后，有些人则将它们放在文档的末尾（例如尾注或脚注）。

链接最佳实践

不同的 Markdown 应用程序处理URL中间的空格方式不一样。为了兼容性，请尽量使用%20代替空格。

建议：[link](https://www.example.com/my%20great%20page)
不建议：[link](https://www.example.com/my great page)

CSS与动画-1-闪烁效果

<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<style>
  .point {
    width: 50px;
    height: 50px;
    background-color: #2ea598;
    position: relative;
    border-radius: 50%;
  }
 
  /* 设置动画前颜色 */
  .point-flicker:after {
    background-color: #2ea598;
  }
 
  /* 设置动画后颜色 */
  .point-flicker:before {
    background-color: rgba(0, 168, 253, 0.2);
  }
 
  /* 设置动画 */
  .point-flicker:before,
  .point-flicker:after {
    content: '';
    width: 80px;
    height: 80px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -40px;
    margin-top: -40px;
    border-radius: 50%;
    /* CSS3 animation 属性 网址 */
    /* https://www.w3school.com.cn/cssref/pr_animation.asp */
    animation: warn 1.5s ease-out 0s infinite;
  }
 
  /* @keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。 */
  @keyframes warn {
    0% {
      transform: scale(0.5);
      opacity: 1;
    }
 
    30% {
      opacity: 1;
    }
 
    100% {
      transform: scale(1.4);
      opacity: 0;
    }
  }
</style>
 
<body>
  <div class="point point-flicker">
 
  </div>
</body>
<script>
 
 
</script>
 
</html>

————————————————
版权声明：本文为CSDN博主「人间草木96」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_43258252/article/details/102958790

SVG Element Reference

What's the SVG？

SVG is short for Scalable Vector Graphics,It's an XML-based markup language,often used to describe two-dimensional vector graphics.
When I knew SVG first,I did not have a deep understanding of what it is and what it can do, but the realization is that I hope to be able to review this markup language that is equivalent to HTML in terms of standard protocols.

And I found a great website about introducing SVG related knowledge, I plan to try to deepen my understanding of SVG step by step according to the content introduced above.
You can visit it directly: https://developer.mozilla.org/en-US/docs/Web/SVG

Part I SVG Element Reference

<foreignObject>

UI与图表-1-雷达图

写在前面
相对于传统的柱、饼、折三类最初最常见常用的类型，雷达图在数据分析和可视化里应用相对较少。不过，雷达图独有的特点使得再具体的应用中体现出独特的效果。

定义

根据维基百科，雷达图是一种以二维图表的形式显示多元数据的图形方法，该二维图表包含从同一点开始的轴上表示的三个或更多定量变量。轴的相对位置和角度通常不提供信息，但是可以使用各种试探法（例如将数据绘制为最大总面积的算法）将变量分类到揭示不同相关性，权衡和多种因素的相对位置。
可以说从定义中看出雷达图在展示、对比多维数据上具有特殊优势

制作

一般来说，常见雷达图大多是5、6边居多，其中以六边形最为常见，就我个人经验而谈，我还没有见过5边形一下和10边形以上的。

效果

参考资料

https://www.uisdc.com/b-side-design-specification-8
https://en.wikipedia.org/wiki/Radar_chart

《如何做高质量方案汇报》【转载】

如何做高质量方案汇报

#【原文标题为《技术人如何做高质量方案汇报》，原文来源:51CTO】

汇报不是目的，是沟通手段。用正确的方法组织汇报，沟通更顺畅，事半功倍。一切的美好，都是精心准备的结果。

技术人员做汇报，经常会出现“讲粗讲细领导都听不懂”、“讲多了时间不够，讲少了没有突出重点”的情况。
那么，如何做一场高质量的高层方案汇报呢？

2022年9月3日，在51CTO主办的​[​WOT全球技术创新技术大会​](http://wot.51cto.com/)​上，
原阿里云**区咨询总经理、《精益数据方法论-数据驱动的数字化转型》作者、
精益数据方法论创始人史凯带来了主题演讲《技术人如何做高质量方案汇报》，
从技术人的视角，将二十年的汇报经验梳理了“53444模型”，帮助技术人员突破“不会做汇报”的难题。

现将演讲内容整理如下，希望对诸君有所启发。

高质量方案汇报的5大要素

1. 目标明确​

最关键的是“目标明确”，出发之前一定要知道你去哪里，一定要方向正确。我见过很多汇报，有的汇报讲完以后，听汇报的人都不知道这个汇报的人想要干什么。听你表达了一下自己的情绪，秀了一下你自己的能力，但是你到底需要听汇报的人干什么，这是最重要的。我们组织汇报的时候，要站在对方的角度去思考。你希望这个汇报得到什么？听汇报的人希望从这个汇报里得到什么？所以，目标要明确。

但如何能够做到目标明确，并且达成这个目标呢？我把高质量汇报总结成4个词：内容清晰、逻辑顺畅、呈现易懂、问答准确。

2. 内容清晰​

内容的质量要高，不能攒了一堆PPT，也没有讲清楚到底要讲什么内容。

3. 逻辑顺畅​

什么是逻辑？逻辑是解决问题的过程，是思考问题的方法。很多时候一个汇报逻辑不顺，跳来跳去。

4. 呈现易懂​

让听汇报的人一看材料、一听你讲，他就知道你要表达的是什么，很清晰，他不用去思考。

5. 问答准确​

一般做汇报，大家不仅要准备汇报的过程，你去讲，你还要准备一下我讲完这些内容它有什么问题没有，它如果有问题，我如何去回答。

这是高质量汇报的五大要素，大家可以按照这个框架去思考和准备，回顾你的汇报。

领导（特指高层领导）听汇报的逻辑：

在向高层领导做汇报的时候，他关注的是他有没有听懂你在讲什么。
他有时候会有一些担忧，会不会你是通过这个汇报，引导他去做一些事情，他会有一种防范的心态。所以有一种逻辑，高层的时间比较短，不会特别关注细节，更关注的是逻辑，上下是不是金字塔结构，是不是一步步推理出来的，如果逻辑是正确的，他就认为结果是正确的。
呈现清晰，观点明确，你一定要让他快速地找到你想让他看到的地方。
如果你还能做到这个汇报里边有几句话、几个观点、有一些你想表达的底层的逻辑或者是你的技术的一些先进性，让他能够认可的话，你这个汇报就是加分项。

高质量方案汇报的3大阶段

我们如何准备汇报材料呢？可以分为三个阶段：汇报前、汇报中、汇报后。

汇报前​

做好准备、对齐目标、准备材料。

汇报中​

专业呈现，灵活应变，同时汇报的过程中可能领导会提问题。

汇报后​

快速地把汇报形成的结论和动作形成纪要，然后快速跟进。

汇报前4大检查要点

关于汇报前的检查，大家可以检查这四个关键的要点。

● 对齐目标。你一定要清楚地知道这场汇报的目标是什么，一定不是说就想在领导面前露个脸，很多时候如果你不准备好，你的露脸可能减分了。一定要想清楚你要什么，而且要站在对方的角度思考他要什么，把这两个目标对齐。如果你发现你要的东西，他可能通过这次汇报他给不了你，你就要想想是不是要进行这次汇报。

● 准备内容。一定要围绕目标去准备你的材料，去准备你的Q&A。

● 勘察现场。如果是非常正式的场合汇报，面对很多人，你可能要看一下现场，比如现场是培训式的汇报还是圆桌式的汇报，你是坐着讲还是站着讲。

● 问答预案。准备一下他可能问的问题和你的回答。

对齐目标

以终为始，一定要思考清楚你想要表达什么，达成什么目的。比如，有的是晋升汇报，可能你要思考的是你的过去和现在的晋升之间还有哪些差距，领导对你的期望是什么，你是不是满足了，包括你的晋升优点，要对齐目标去准备你的材料，这是最重要的。同时，要思考一下在这个汇报过程中你需要领导或者说需要被汇报的对象做什么。

一般来讲我们会这么操作执行，在开头的时候就开宗明义讲清楚我这个汇报是干什么。我是一个过程型的汇报，让领导知道一下我的进展，让他提提意见？还是希望他最后拍板，把这个预算给我，把headcount（成员总数）增加，把我的项目批了？不同的目的，这个材料组织内容的轻重都是不一样的。在结尾的时候，建议大家用一个表格或者是其它的形式，把需要跟进的内容清晰地列出来。听汇报的人在听完以后，他就知道需要做什么，包括你需要做的事情给他看，让他清楚地知道，并提提意见。这种方式可以把目标很明确地对齐。

准备内容

不同的汇报材料可能内容的组织方式、逻辑关系都不太一样，我这里不深入业务的内容去分析，我讲一些通用的技巧。

金字塔结构

一张蓝图画到底，一个目录全贯通，汇报的时候一定要有一条主线，最怕的就是没有目录或者目录不是很清晰，领导开始还知道你要讲什么，等陷入到细节之后他已经完全不知道你在讲什么，他甚至要翻回去看才知道原来你讲的是这一页，所以主目录非常重要。一定不要让听汇报的人去猜、去找、去翻、去问。最好的汇报是听汇报的人不用去问你现在讲的是什么内容的问题，他能基于你的问题去深入地思考。

呈现方式是，比如我们做架构汇报，我们把一个大的架构图摆在这里，放在最前面，讲到哪个模块的时候，我把这个架构图做成一个小地图一样，把小地图放在旁边，把讲的地方highline（高亮）出来，这样领导就清楚了，这是一个很实用的技巧。

一个目录全贯通。我经常给大型企业做数字化转型的目录（PPT），就很清楚。业务方说要做转型，第一个问题是为什么要转型。第二个问题，转什么。第三个问题，怎么转，什么行动？用这样一个目录把整个材料全部贯穿起来，这样就非常清楚。听汇报的人也听得非常清楚，就完全沉浸在你讲的内容里，不会lost（迷失），不会说你在讲什么，你讲的东西现在到哪里了，一旦他陷入这种状态，你的汇报大概率是失败了。

重点突出

先讲结论，再讲过程。我早期做技术的时候有一个不好的现象，这也是技术人员在早期很多的特性。我特别喜欢去讲过程，代码是怎么写的，架构是怎么设计的，为什么这个地方要用一个抽象类，体现我们在工作过程中的一些特别难忘的事情。但是这些点不一定是听汇报的人关心的，他关心的是结论。

观点醒目。如果是PPT的汇报，你有讲解，解释性的文字越少越好，否则可能听汇报的人就看字去了，就不听你讲了，除非你认为你那些字就能够完全把你想讲的内容完全表达出来。

重点突出。突出重点的方式有很多种，布局、文字颜色、字体粗细等。总的来讲，一个总的原则：你写完PPT、写完材料，你自己看一遍，是不是每一页你第一眼看上去你最想表达的内容就是你最醒目能看到的。如果做到了这一点，就是重点突出。如果你的内容特别多，看半天都找不到自己重点想表达的内容，听众和被汇报对象也是一样的。而且很多时候我们自己的逻辑自己是清楚的，但是对方不一定。所以，一定要通过呈现的方式去把这个重点突出出来。

简洁易懂

很多时候我发现大量做汇报材料的一个通病，恨不得把更多的信息、更多的文字呈现在材料里面。这个很正常，就像我现在写本书，我写完了大概40万字，编辑让我去删，真舍不得删。我觉得每句话、每个字都是有价值的，就像写PPT也是一样，你会觉得这一块我想表达这个内容，那一块我想表达那个内容，都是有价值的。但是站在对方的角度，如果他不理解你的专业或者是他对你做的事情没有那么详细了解，他实际上这么短的时间想看到的就是最关键的东西。所以，少即是多，简单呈现。

我发现在很多技术型汇报里，跟领导汇报的时候“大数据平台”、“数据平台”等名词，这些是我们很多自己做技术的人认为很清晰的名词，但是可能差一个字、少一个字，我们认为没问题，但是对方听不懂。所以，文字一定要统一，每一个词从头到尾中间不要变，你只要变了，他可能就听不懂，可能认为就是两件事。

举个例子，我们每个人都认为我们所了解的内容和信息，可能全世界都会懂，但实际上完全不是这样。
我原来做规划的时候，看到有的小朋友们写的PPT内容，“演进线路”和“演进路线”、“数据中台”和“数据平台”、
“混合云”和“云平台”、“行业对标”和“对标分析”。在专业领域内，我们一看就知道这是同一个事，而且我们都不会关注这些细节。
这很正常，因为我们理解它的内容，理解它的内涵，能快速抓到这个点。这就是为什么我们会看到中文的表达，
你哪怕把那个顺序翻过来好像都能读懂，这是因为我们是**人。但你让一个老外看，完全不知道什么意思。
所以，有的时候我们在跟高层汇报或者是不懂你现在做的工作细节的人汇报工作的时候，就要把他当作“小学生”，
要有同理心，不要让他去找，也不要让他去猜，只有这样他才能真正理解你想表达的内容，
只有这样他才能把他的时间和精力、注意力放到你想跟他去沟通的事情上，
否则他有很大一部分的时间都是在思考你这个词是什么意思，这两个是不是不一样，这种现象是非常突出的。
所以，一定要贯穿一致。

四大反面典型：

1. 领导不知道你在讲什么​

2. 逻辑不延续​

我们在组织一个汇报的时候，故事线的梳理agenda也好，table content也好，目录也好，是最重要的。故事线梳理清楚，听的人就会很舒服，最怕跳来跳去，讲到中间的时候，你自己觉得这里有个东西很重要，你把它加进来重点讲，对方不知道你加进来的这个内容跟你的目标之间的关系。所以，这是逻辑不延续。

3. 没有重点，听众迷失

有的时候我们会发现在一个材料里放了很多蓝图，放了很多技术关键点，最后你又没有一个总结，领导记录哪个才是最重要的呢？所以，这是重点不突出。

4. 不知道要干什么

听完了以后不知道你要干嘛。你是希望我给你审批你想要的项目，还是想听完这个汇报以后拍拍你的肩膀说“小伙子，你很棒”。所以，这是目标不明确。

以上是四大反面典型，我们可以参考一些小的技巧，在组织材料、写材料和去汇报的过程中，可以注意的一些小事项。`

1. 统一的话术和名词​

2. 通俗易懂的名词：​你要站在对方的角度，用他能听懂的通俗易懂的词去表达。

3. 用领导讲话的原话：​你在跟高层领导做汇报的时候，要引用你们公司或者是领导，或者是大家都明白的原话或者是术语，这就减少了让他去理解和教育的成本。

4. 用大家都懂的比喻：​如果要用一些比喻的话，一定要用一些通俗的比喻，不要举一些别人听不懂的，显得你很高深的比喻，这样可能你讲完比喻，你要花5分钟去解释你讲的是什么意思。因为我们不是在讲脱口秀，我们是在做汇报，做汇报是有业务目标的，是要达成目的的。

问答预案

汇报的过程中，我们会面临提问。在准备提问的时候，我们要把三个关键要素提前想清楚。第一，在场听汇报的人有哪些，谁会提问。第二，他可能会问什么问题，肯定要站在他的角度去思考，他的岗位职责、他跟你汇报的这件事情的关系。第三，他如果问了这几个问题，我应该怎么回答？这个非常重要。

当我们把材料准备好了，问题也准备了。如果这个问题很重要，我们也去看了现场的布置。看现场布置有的时候我们会觉得不重要，但是由于我做的汇报和参与的汇报非常多，给大家举一个小例子。

有一次我们给一个大型的国央企董事会做项目汇报，本来计划是在一个大礼堂汇报，下面全是专业用户，领导坐上面，PPT在前面。由于他们内部不知道什么原因的变化，把这个汇报的场所换成了一个非常长的大圆桌、中间有花盆的办公室。幸好我们前一天去踩点，发现一个什么问题？大堂汇报，所有的人的方向都是在一个方向，把PPT往那儿一摆大家都能看清楚。但如果是一个大圆桌，领导们又坐一圈，两边都有人，你的PPT屏幕一个是不够的，别人看不清楚。因此，临时赶紧做了调整。所以，重点的汇报，现场的勘察非常重要。

做完汇报前的4大检查点以后，我们就可以进入到汇报中阶段了。汇报中，大家可能觉得比较简单，就是去介绍，的确也是这样。所有的汇报中，最重要的是紧张、活泼，或者叫专业，并且又不是那么拘谨。

汇报中4大注意事项

1. 声音洪亮。有气场，吐字清晰，面向客户。
2. 注意节奏。最怕像念作文一样很平地把文字念出来。
3. 观察互动。你要注意看关键的stakeholder（干系人）有没有在睡觉，有没有在干别的事，你要用你的行动，用你的语气，用你的停顿去吸引他的注意力。
4. 灵活机动。因为在汇报的过程中可能会发生很多意外的情况，也有可能会中途有领导说你讲得挺好，我问个细节问题。5.

汇报后4大跟进动作

汇报完以后，建议大家要做四大跟进的动作。汇报本身只是一个沟通，不是目的，哪怕你在会上得到了结论，依然需要在会后去跟进，去把它落实下来。所以，汇报以后我们要有跟进四大动作。这四大动作的根本目的就是形成闭环，把这个事情圆满完成。

1. 会议纪要
   如果你汇报的对象是客户，或者是你业务部门的领导，最好你自己或者你的团队要有一个小会议纪要。有的时候汇报会由企业的秘书记录，但坦率来讲他可能听不懂，他记的东西跟你想表达的东西可能不一样，他所理解的领导想做的事和你最后理解的可能不是一回事。所以，你一定要看一下这个会议纪要，一定要确保这个会议纪要是你所理解的正确的纪要和行动，非常重要。

2. 行动计划
   在会议纪要里，把行动计划列出来，而且建议大家会后把那些对你的工作、对这件事情非常重要的stakeholder（干系人）的action（行动），要向他确认，这个非常重要，否则这个很有可能会有一种情况是会开了却没有达到你预期的效果，最后行动没落实下去。汇报完了之后，需要将决议、计划变成行动。你所认为的行动没有落实下去，别人就会产生误解。

3. 问题澄清
   经常在会上，领导会说这个问题会后我们跟进一下，或者说这个问题还不是很清楚，一定要第一时间把这个问题做澄清。汇报的结果和内容，对于领导和其它部门来讲，可能讲完了就忘了。所以，你要作为最紧张的人要去跟进这些问题的落地。

4. 持续更新
   以这次汇报为一个起点，持续地更新你的计划和进展，这样你的工作才能持续地朝你所希望的方向去推进。

SVG与动画-4-fill标签

说明：
fill属性根据它的使用环境，拥有两个意义。
默认地，当动画元素结束时，目标元素的外观属性不再应用该效果。在动画元素结束后，要还保持这个动画的的值，就需要用到fill属性。
对于形状元素和文本，fill属性是外观属性，用来定义给定图形元素内部的颜色。哪一块算是“内部”取决于形状本身以及fill-rule 属性的值。作为一个外观属性，它可以直接用作CSS样式表内部的属性。
值：
remove（默认值）
在动画的激活持续时间结束后，动画效果会移除（不再应用）。在动画的激活结束后，动画不再对目标元素有影响（除非动画重新开始）。
freeze
在动画激活持续时间结束后，文档持续时间的剩余时间里（或者直到动画重新开始）动画效果会“冻结”着。

TIPS
在实际测试中发现，remove的最终效果是让所属的元素回归到初始位置（所谓的cx、cy点），freeze是停止在元素运动周期最终的位置上。

参考来源：
https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/fill

code-1-Web Components

是什么

历史

优势

缺点

资料查阅

知乎

阮一峰

博客园

维基百科

MDN

WEBCOMPONENTS.ORG

Vue

读后感-以人为本，制度为纲

原文链接

人是根本，但是只有人也是不行的，对于文章要辩证的看，对于华为描述的我就不认同，若大的企业，没有完善的制度，就硬说信任，隔着过家家呢，作者你自己信你说的话吗？尤其是邮件和纪要，都没有，沟通协作如何完成，这不成了一锅粥了吗？

关于谷歌，除了创新驱动，愿景也是很重要的，毕竟是一个可以跟政府和军方说“No”的企业。

同样的方法论，对于个人和组织都有借鉴的意义，就看你是如何去做的。

SVG与动画-3-渐变

代码如下：

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
   	    width="299px" height="289px" viewBox="0 0 299 289" enable-background="new 0 0 299 289" xml:space="preserve">
   	      <path fill="url(#skyGradient)" d="M293.468,275.282c0,1.617-1.311,2.928-2.928,2.928H8.46c-1.617,0-2.928-1.311-2.928-2.928V13.718
   	      c0-1.617,1.311-2.928,2.928-2.928h282.08c1.617,0,2.928,1.311,2.928,2.928V275.282z"/>
   	      <g>
   	        
   	      </g>

   	      <defs>
   	        <linearGradient id="skyGradient" x2="100%" y2="100%">
   	          <stop offset="0%" stop-color="lightblue" stop-opacity="1">
   	            <animate attributeName="stop-color" values="#37DC76;#DC3737;#37DC76" dur="4s" repeatCount="indefinite" />
   	          </stop>
   	          <stop offset="100%" stop-color="lightblue" stop-opacity="1">
   	            <animate attributeName="stop-color" values="#8EE8AE;#E88E8E;#8EE8AE" dur="4s" repeatCount="indefinite" />
   	            <animate attributeName="offset" values=".15;.50;.15" dur="4s" repeatCount="indefinite" />    
   	          </stop>
   	        </linearGradient>
   	      </defs>
   	    </svg>

说明：
使用RGBA会有更细腻的表现效果
相关参考：
https://www.cnblogs.com/cmt/p/14580194.html?from=https%3A%2F%2Fwww.cnblogs.com%2Fzhonghuali%2Fp%2F11302085.html&blogId=459327&postId=11302085
https://zhuanlan.zhihu.com/p/69553595
https://blog.csdn.net/qq_39985511/article/details/82251521
https://blog.csdn.net/tuoxinquyu/article/details/50461441

《数据可视化设计》-2-第二章·图表设计

图形分类

随时间变化的图形

1. 折线图📈
2. 柱状图📊
3. 堆积柱状图
4. 面积图
5. 蜡烛图
6. 瀑布图

类别比较的图形

1. 柱状图
2. 分组柱状图
3. 气泡图
4. 平行坐标图
5. 多条折线图
6. 子弹图

排名图形

1. 有序条形图
2. 有序柱状图
3. 平行坐标图

占比图形

1. 饼图
2. 环形图
3. 堆积面积图
4. 矩形树图
5. 旭日图

占比图形

1. 散点图
2. 气泡图
3. 柱状+折线图
4. 热力图

分布图形

1. 直方图
2. 箱型图
3. 小提琴图

关系图形

1. 桑基图
2. 和弦图
3. 韦恩图

Markdown语法教程-5-分割语法

分隔线语法

要创建分隔线，请在单独一行上使用三个或多个星号 (***)、破折号 (---) 或下划线 (___) ，并且不能包含其他内容。

SVG形状元素-3-PATH标签

path标签

这个标签中的图形集合要比polygon更大，它所包含的图形可以不是封闭图形：
曲线段<path d="M109.323886,266.443736 C134.94671,256.907464 160.569533,252.139329 186.192357,252.139329 C211.81518,252.139329 237.438003,256.907464 263.060827,266.443736" id="曲线" stroke="#979797"></path>
包含曲线的封闭图形 <path d="M0.5,0.5 L0.5,108.639468 C54.6467904,126.637903 90.6926712,126.600222 108.646447,108.646447 C126.600222,90.6926712 126.637903,54.6467904 108.639461,0.500000042 L0.5,0.5 Z" id="自定义" stroke="#979797" fill="#D8D8D8"></path>
多边形 <path d="M1472.2389,402.5 L1427.5,439.498985 L1427.5,495.850367 L1526.48648,539.5 L1678.5,539.5 L1678.5,402.5 L1472.2389,402.5 Z" id="矩形剪角" stroke="#979797" fill="#D8D8D8"></path>
矩形端点平移的平行四边形 <path d="M263.327823,352.5 L203.762606,489.5 L454.672177,489.5 L514.237394,352.5 L263.327823,352.5 Z" id="四边形" stroke="#979797" fill="#D8D8D8"></path>
多边形 <path d="M1036.5,569.559032 L982.007387,596.808998 L982.007387,651.191002 L1036.5,678.440968 L1090.99261,651.191002 L1090.99261,596.808998 L1036.5,569.559032 Z" id="多边形" stroke="#979797" fill="#D8D8D8"></path>
其中的属性也自然更多：
M = moveto
L = lineto
H = horizontal lineto
V = vertical lineto
C = curveto
S = smooth curveto
Q = quadratic Belzier curve
T = smooth quadratic Belzier curveto
A = elliptical Arc
Z = closepath
同时以上所有命令均允许小写字母。大写表示绝对定位，小写表示相对定位。

SVG滤镜初识-1-高斯与动感模糊

SVG中支持的滤镜有很多，目前先拿sketch中自带的四种滤镜做演示。
要注意的是必须在 <defs>标签中定义 SVG 滤镜
<filter>标签用来定义 SVG 滤镜。<filter>标签使用必需的 id 属性来定义向图形应用哪个滤镜。
<filter>标签必须嵌套在 <defs>标签内。<defs>标签是 definitions 的缩写，它允许对诸如滤镜等特殊元素进行定义。

完整的SVG文件内容如下：

<?xml version="1.0" encoding="UTF-8"?>
<svg width="661px" height="604px" viewBox="0 0 661 604" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 59.1 (86144) - https://sketch.com -->
    <title>滤镜</title>
    <desc>Created with Sketch.</desc>
    <defs><!-- 定义部分 -->
        <linearGradient x1="94.8753463%" y1="0%" x2="5.12465374%" y2="100%" id="linearGradient-1"><!-- 这部分是公共背景的渐变设置 -->
            <stop stop-color="#32C5FF" offset="0%"></stop>
            <stop stop-color="#B620E0" offset="51.2583893%"></stop>
            <stop stop-color="#F7B500" offset="100%"></stop>
        </linearGradient>
        <filter x="-12.6%" y="-14.6%" width="125.1%" height="129.3%" filterUnits="objectBoundingBox" id="filter-2"><!-- 这部分为高斯模糊 -->
            <feGaussianBlur stdDeviation="10" in="SourceGraphic"></feGaussianBlur>
        </filter>
        <filter x="-12.6%" y="-14.6%" width="125.1%" height="129.3%" filterUnits="objectBoundingBox" id="filter-3"><!-- 这部分为动感模糊 -->
            <feGaussianBlur stdDeviation="10 0" in="SourceGraphic"></feGaussianBlur>
        </filter>
    </defs>
    <g id="r" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <rect id="矩形" fill="url(#linearGradient-1)" x="102" y="71" width="450" height="475"></rect>
        <rect id="高斯模糊" stroke="#979797" fill-opacity="0.7" fill="#D8D8D8" filter="url(#filter-2)" x="27.5" y="25.5" width="238" height="204"></rect>
        <rect id="缩放模糊" stroke="#979797" fill-opacity="0.7" fill="#D8D8D8" x="27.5" y="376.5" width="238" height="204"></rect>
        <rect id="动感模糊" stroke="#979797" fill-opacity="0.3" fill="#D8D8D8" filter="url(#filter-3)" x="394.5" y="25.5" width="238" height="204"></rect>
        <rect id="背景模糊" stroke="#979797" fill-opacity="0.3" fill="#D8D8D8" x="394.5" y="376.5" width="238" height="204"></rect>
    </g>
</svg>

需要注意的是，sketch中的缩放模糊和背景模糊目前实测是无法被SVG直接解析的，也就是说，以上从sketch直接导出的代码也是无法显示缩放和背景模糊的效果。

SVG元素-2-ANIMATE标签

定义：
动画元素放在形状元素的内部，用来定义一个元素的某个属性如何踩着时点改变。在指定持续时间里，属性从开始值变成结束值。

相关属性：
attributeName
attributeType
from
to
dur
repeatCount

解读：
attributeName：解释移动的是父级元素的具体属性名
attributeType：解释移动的元素的所属类型（CSS、XML）
from：解释移动的元素的起始位置
to：解释移动的元素的结束位置
dur：解释移动的元素的持续时间
repeatCount：解释移动的元素的持续的次数（No.、indefinite）

参考：
https://developer.mozilla.org/zh-CN/docs/Web/SVG/Element/animate

UI与图表-3-构建图表

图表的优势

综上所述我们可以发现，从通常意义上来说，图表优于表格，表格优于结构化文本，结构化文本优于普通段落。那我们来看看图表有哪些优势。

1.针对性

一图一类型是图表的特点，例如柱状图是用来比较同一指标下不同对象情况的图表；饼图是展现部分与部分之间，及部分与整体之间占比的情况。我们在使用图表时，需要先对数据进行判断，再选择合适的图表进行展现。

2. 直观性

图表与文字相比，在数据的表现上非常直观。不仅可以让用户一目了然地看到数据，还能让用户将数据进行对比，从而发现问题，定位原因，解决问题。

3. 混合与拓展性

根据数据的属性，图表是可以进行混搭与拓展使用的。混搭是指图表和图表可以拼搭使用，例如折线图与柱状图经常合体使用。拓展性是指根据基础图表可以拓展出一系列个性化图标。例如堆叠柱状图是由基础柱状图衍生出来的。

开源图表库

目前开源的图标库以下几种：

1. AntV G2

访问链接

在 AntV 的官网上，是这么描述 G2 的：“一套面向常规统计图表，以数据驱动的高交互可视化图形语法，具有高度的易用性和扩展性。使用 G2，你可以无需关注图表各种繁琐的实现细节，一条语句即可使用 Canvas 或 SVG 构建出各种各样的可交互的统计图表。”

2. ECharts

访问链接

百度百科：“ECharts 是一款基于 JavaScript 的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。ECharts 最初由百度团队开源，并于 2018 年初捐赠给 Apache 基金会，成为 ASF 孵化级项目。”

3. High Charts

访问链接

百度百科：“Highcharts 是一个用纯 JavaScript 编写的一个图表库，能够很简单便捷的在 web 网站或是 web 应用程序添加有交互性的图表，并且免费提供给个人学习、个人网站和非商业用途使用。HighCharts 支持的图表类型有曲线图、区域图、柱状图、饼状图、散状点图和综合图表。”

4. Chart.js

访问链接

Chart.js 是一个面向设计人员和开发人员的简单而灵活的 JavaScript 图表。

5. Chartist.js

访问链接

Chartist.js 是一个面向设计人员和开发人员的简单的响应式图表，是前端图表生成器。

目前来说 B 端产品使用最广泛的图标库是 AntV G2 和 ECharts。

15 个图表小细节

在大致了解了图表以后，笔者总结了基于自身经验、团队经验与行业经验的图表小技巧。希望这些小技巧能润物细无声地影响我们的设计者，从而为 B 端提升一点小体验。

1. 折线图 2px

通常在 B 端中，我们用到线，以 1px 居多。但在折线图中，我们经过反复推敲，发现 2px 线优于 1px 线。首先，2px 线条显得有力而清晰；其次，在线条多的时候，便于分辨。

2. 柱状图间距

柱状图中柱子与柱子之间的间距与柱子的宽度一致就好，且最左边和最右边柱子距离两边的间距为柱子的一半。如下图所示，若柱子的宽度为 X，则柱子与柱子间的间距为 X，两边柱子距离各自向外间距为 X/2。

3. 刻度值

图表上的刻度值递增数值根据实际情况需要做适当约束，如最大数值为 150，就不适合刻度值上线标记为 1000。其次，若业务数据一直处于动态变化中，则图表 Y 轴可以设置成动态。

4. 饼图文字显示

在饼图分类较少时候，可以将文字写在饼图上，但当分类较多时候，文字适合写在饼图外。

5. 饼图块排列

饼图块排列也是个值得考究的事情，通常来说，饼图块呈顺时针方向旋转，且以 12 点钟方向为起点，块面从大到小布局，若有“其他”模块，则放置在最后。

6. 标签位置

通常标签都会放在图表的上方区域，但这并不是一成不变的规则，例如当折线图线较多的时候，可以考虑将标签直接跟在折线的尾部。同时可以做一些交互效果，鼠标点击标签可以让线弱化或者显示。

7. 图表色彩

图表在配色上要使用区分度大的颜色，不要为了好看而使用相邻的色彩，这会导致图表的可读性大大降低。如有条件，建议在色彩上考虑无障碍视觉。

8. 同类色使用

属于同一色相，不同明度和饱和度的颜色，也是有使用空间的，通常表示同一对象的梯度变化。

9. 显示重点

当图表上数据及其多，且产品团队压根没打算将数据量减少时，我们可以考虑展示重点数据（系统默认展示推荐重点，用户可以自己选择他所需的重点），弱化其他数据。

10. 标题的妙用

标题不仅仅是用来呈现普通描述的，在特殊场景下，标题描述可以稍微进行变化，从而达到直观表述图表核心含义的目标。

11. 时间周期太长

某些业务的数据统计需要跨很长的时间周期，这时，图表无法满足如此长周期的时间展示需求，我们不要慌，可以通过以下几种方式去解决。

1）添加缩略滑块

给图表添加缩略滑块，可以通过拖拽滑块了查看某段时间范围的数据。滑块拉拽的越大，可以看到的时间范围越大，但注意，会有极限值。

2）添加滑动滑块

给图表添加滑动滑块，可以通过滑动一个固定大小的滑块，查看某短时间范围的数据。它与缩略滑块的区别在于，滑动滑块每次看到的时间段是一致的。

3）区块放大镜

如果图表的呈现就是希望时间周期显示完整，那么当时间周期较长的时候，颗粒度可以展示的稍微粗一些，不用太细，例如无需 2 月 1 日、2 月 2 日、2 月 3 日、2 月 4 日、…连续展示，只要2月1日、3月1日、4月1日、5月1日、…间隔展示即可。在交互上，鼠标移入图表区不断进行某时间周期数据框选（即放大），就可以让框选区数据不断清晰。日K线常用此类方法去做。

12. 时间轴显示

当时间轴日期跨越在当年时，无需每个时间点都带上年份；而当跨年时，可以带上年份，这样可以保证时间轴显示更简单，不拥挤。

13. 等宽字体

若图表中会采用表格去协助查看某类数据的明细，联动展示，那么表格中的字体建议使用等宽字体，等宽字体方便用户用视觉来比较大小。

14. 数据归类

指标大盘上放置着各类型图表数据，建议设计者们对数据的进行归类整理，属于一类的数据临近展示，方便用户连续性查看相关数据。

15. 静态与动态图表

图表分为静态和动态图表，当业务呈现较为简单时，使用静态图表就好。而当业务复杂，一张图表难以表达细节时，就要考虑动态图表去呈现了，“鼠标交互，数据扩展和下钻”是动态图表的特征。

文章来源

SVG元素-1-RECT标签

rect标签

一般来说rect是通过建立常规矩形的时候生成的，例如从sketch中建立矩形后导出的的：
<rect id="矩形" stroke="#979797" fill="#D8D8D8" x="766.5" y="434.5" width="251" height="137"></rect>
其中id作为元素标识（但是没有唯一性），stroke表示线条边框的色彩值，fill表示矩形本身的填充色值，X、Y表示左上角顶点在画布中的位置，W、H分别表示矩形的宽度与长度。
tips：在sketch中如果画板勾选背景色（同时包含于导出项）的话，也会生成与当前画布同尺寸的rect元素：
<rect fill="#9C5B5B" x="0" y="0" width="1920" height="1080"></rect>

《数据可视化设计》-1-第一章·认识数据可视化设计

1.1 价值

引子

从伦敦地铁图说起

可视化的意义

1. 可视化的实质：洞察用户真正需求
2. 可视化的理念：删繁就简，突出重点
3. 可视化的工具：抽象化

1.2 魅力

图表化设计

1.3 场景

应用领域

1. 平面
2. 中后台
3. 大屏

1.4 设计

技能树

1. 产品能力
   1.1 挖掘需求
   1.2 理解需求
   1.3 需求评审
2. 交互能力
   2.1 体验设计
   2.2 用户研究
   2.3 交互方法论
3. 设计能力
   3.1 图形设计
   3.2 UI设计
   3.3 动效设计
   3.4 3D设计
4. 数据能力
   4.1 理解数据
   4.2 分析数据
   4.3 选用图表
5. 沟通能力
   5.1 提案能力
   5.2 对接开发

四要素

1. 数据感
2. 科技感
3. 动效能力
4. 3D能力

Markdown语法教程-9-内嵌 HTML 标签

对于 Markdown 涵盖范围之外的标签，都可以直接在文件里面用 HTML 本身。如需使用 HTML，不需要额外标注这是 HTML 或是 Markdown，只需 HTML 标签添加到 Markdown 文本中即可。

行级內联标签

HTML 的行级內联标签如 <span>、<cite>、<del> 不受限制，可以在 Markdown 的段落、列表或是标题里任意使用。依照个人习惯，甚至可以不用 Markdown 格式，而采用 HTML 标签来格式化。例如：如果比较喜欢 HTML 的<a>或 <img> 标签，可以直接使用这些标签，而不用 Markdown 提供的链接或是图片语法。当你需要更改元素的属性时（例如为文本指定颜色或更改图像的宽度），使用 HTML 标签更方便些。

HTML 行级內联标签和区块标签不同，在內联标签的范围内， Markdown 的语法是可以解析的。

This **word** is bold. This <em>word</em> is italic.

渲染效果如下:

This word is bold. This word is italic.

区块标签

区块元素──比如 <div>、<table>、<pre>、<p> 等标签，必须在前后加上空行，以便于内容区分。而且这些元素的开始与结尾标签，不可以用 tab 或是空白来缩进。Markdown 会自动识别这区块元素，避免在区块标签前后加上没有必要的

标签。

例如，在 Markdown 文件里加上一段 HTML 表格：

This is a regular paragraph.

<table>
    <tr>
        <td>Foo</td>
    </tr>
</table>

This is another regular paragraph.

请注意，Markdown 语法在 HTML 区块标签中将不会被进行处理。例如，你无法在 HTML 区块内使用 Markdown 形式的*强调*。

HTML 用法最佳实践

出于安全原因，并非所有 Markdown 应用程序都支持在 Markdown 文档中添加 HTML。如有疑问，请查看相应 Markdown 应用程序的手册。某些应用程序只支持 HTML 标签的子集。

对于 HTML 的块级元素 <div>、<table>、<pre> 和 <p>，请在其前后使用空行（blank lines）与其它内容进行分隔。尽量不要使用制表符（tabs）或空格（spaces）对 HTML 标签做缩进，否则将影响格式。

在 HTML 块级标签内不能使用 Markdown 语法。例如 <p>italic and **bold**</p> 将不起作用。

Markdown语法教程-10-其他语法

markdown基本语法中还有段落、换行、列表、分割语法，相对简单一并列举：

段落

要创建段落，请使用空白行将一行或多行文本进行分隔。

不要用空格（spaces）或制表符（ tabs）缩进段落。

换行

在一行的末尾添加两个或多个空格，然后按回车键,即可创建一个换行(<br>)。

几乎每个 Markdown 应用程序都支持两个或多个空格进行换行，称为 结尾空格（trailing whitespace) 的方式，但这是有争议的，因为很难在编辑器中直接看到空格，并且很多人在每个句子后面都会有意或无意地添加两个空格。由于这个原因，你可能要使用除结尾空格以外的其它方式来换行。幸运的是，几乎每个 Markdown 应用程序都支持另一种换行方式：HTML 的 <br> 标签。

为了兼容性，请在行尾添加“结尾空格”或 HTML 的 <br> 标签来实现换行。

还有两种其他方式我并不推荐使用。CommonMark 和其它几种轻量级标记语言支持在行尾添加反斜杠 (\) 的方式实现换行，但是并非所有 Markdown 应用程序都支持此种方式，因此从兼容性的角度来看，不推荐使用。并且至少有两种轻量级标记语言支持无须在行尾添加任何内容，只须键入回车键（return）即可实现换行。

列表

1. 有序列表

要创建有序列表，请在每个列表项前添加数字并紧跟一个英文句点。数字不必按数学顺序排列，但是列表应当以数字 1 起始。

2. 无序列表

要创建无序列表，请在每个列表项前面添加破折号 (-)、星号 (*) 或加号 (+) 。缩进一个或多个列表项可创建嵌套列表。

3. 在列表中嵌套其他元素

要在保留列表连续性的同时在列表中添加另一种元素，请将该元素缩进四个空格或一个制表符，如下例所示：

段落

*   This is the first list item.
*   Here's the second list item.

    I need to add another paragraph below the second list item.

*   And here's the third list item.

渲染效果如下：

• This is the first list item.

• Here's the second list item.

  I need to add another paragraph below the second list item.

• And here's the third list item.

引用块

*   This is the first list item.
*   Here's the second list item.

    > A blockquote would look great below the second list item.

*   And here's the third list item.

渲染效果如下：

• This is the first list item.

• Here's the second list item.

  A blockquote would look great below the second list item.

• And here's the third list item.

代码块

代码块通常采用四个空格或一个制表符缩进。当它们被放在列表中时，请将它们缩进八个空格或两个制表符。

1.  Open the file.
2.  Find the following code block on line 21:

        <html>
          <head>
            <title>Test</title>
          </head>

3.  Update the title to match the name of your website.

渲染效果如下：

1. Open the file.

2. Find the following code block on line 21:

   <html>
     <head>
       <title>Test</title>
     </head>
   

3. Update the title to match the name of your website.

图片

1.  Open the file containing the Linux mascot.
2.  Marvel at its beauty.

    ![Tux, the Linux mascot](/assets/images/tux.png)

3.  Close the file.

渲染效果如下：

1. Open the file containing the Linux mascot.

2. Marvel at its beauty.

   

3. Close the file.

列表

You can nest an unordered list in an ordered list, or vice versa.

1. First item
2. Second item
3. Third item
    - Indented item
    - Indented item
4. Fourth item

渲染效果如下：

1. First item
2. Second item
3. Third item
   • Indented item
   • Indented item
4. Fourth item

分割

要创建分隔线，请在单独一行上使用三个或多个星号 (***)、破折号 (---) 或下划线 (___) ，并且不能包含其他内容。

***

---

_________________

以上三个分隔线的渲染效果看起来都一样：

---

为了兼容性，请在分隔线的前后均添加空白行。

Markdown语法教程-2-强调语法

强调语法

强调语法就是将文本加粗标示，要加粗文本，请在单词或短语的前后各添加两个星号（asterisks）或下划线（underscores）。如需加粗一个单词或短语的中间部分用以表示强调的话，请在要加粗部分的两侧各添加两个星号（asterisks）。

来源：Markdown 语法教程

*来源中第一部分案例少了星号

SVG元素概览-index

元素	描述
a	定义超链接
altGlyph	允许对象性文字进行控制，来呈现特殊的字符数据（例如，音乐符号或亚洲的文字）
altGlyphDef	定义一系列象性符号的替换（例如，音乐符号或者亚洲文字）
altGlyphItem	定义一系列候选的象性符号的替换
animate	随时间动态改变属性
animateColor	规定随时间进行的颜色转换
animateMotion	使元素沿着动作路径移动
animateTransform	对元素进行动态的属性转换
circle	定义圆
clipPath
color-profile	规定颜色配置描述
cursor	定义独立于平台的光标
definition-src	定义单独的字体定义源
defs	被引用元素的容器
desc	对 SVG 中的元素的纯文本描述 - 并不作为图形的一部分来显示。用户代理会将其显示为工具提示。
ellipse	定义椭圆
feBlend	SVG 滤镜。使用不同的混合模式把两个对象合成在一起。
feColorMatrix	SVG 滤镜。应用matrix转换。
feComponentTransfer	SVG 滤镜。执行数据的 component-wise 重映射。
feComposite	SVG 滤镜。
feConvolveMatrix	SVG 滤镜。
feDiffuseLighting	SVG 滤镜。
feDisplacementMap	SVG 滤镜。
feDistantLight	SVG 滤镜。 Defines a light source
feFlood	SVG 滤镜。
feFuncA	SVG 滤镜。feComponentTransfer 的子元素。
feFuncB	SVG 滤镜。feComponentTransfer 的子元素。
feFuncG	SVG 滤镜。feComponentTransfer 的子元素。
feFuncR	SVG 滤镜。feComponentTransfer 的子元素。
feGaussianBlur	SVG 滤镜。对图像执行高斯模糊。
feImage	SVG 滤镜。
feMerge	SVG 滤镜。创建累积而上的图像。
feMergeNode	SVG 滤镜。feMerge的子元素。
feMorphology	SVG 滤镜。 对源图形执行"fattening" 或者 "thinning"。
feOffset	SVG 滤镜。相对与图形的当前位置来移动图像。
fePointLight	SVG 滤镜。
feSpecularLighting	SVG 滤镜。
feSpotLight	SVG 滤镜。
feTile	SVG 滤镜。
feTurbulence	SVG 滤镜。
filter	滤镜效果的容器。
font	定义字体。
font-face	描述某字体的特点。
font-face-format
font-face-name
font-face-src
font-face-uri
foreignObject
g	用于把相关元素进行组合的容器元素。
glyph	为给定的象形符号定义图形。
glyphRef	定义要使用的可能的象形符号。
hkern
image
line	定义线条。
linearGradient	定义线性渐变。
marker
mask
metadata	规定元数据。
missing-glyph
mpath
path	定义路径。
pattern
polygon	定义由一系列连接的直线组成的封闭形状。
polyline	定义一系列连接的直线。
radialGradient	定义放射形的渐变。
rect	定义矩形。
script	脚本容器。（例如ECMAScript）
set	为指定持续时间的属性设置值
stop
style	可使样式表直接嵌入SVG内容内部。
svg	定义SVG文档片断。
switch
symbol
text
textPath
title	对 SVG 中的元素的纯文本描述 - 并不作为图形的一部分来显示。用户代理会将其显示为工具提示。
tref
tspan
use
view
vkern

来源：3Wschool

思考-关于认知偏差

引子

什么是认知偏差

从实质上看，获取信息过程中因各种原因导致你理解的内容与信息发送者意图的不一致，就是认知偏差，包括不限于作用于误解、曲解、主客观偏见、臆想等方面。

认知偏差的种类

扩展阅读 一篇文章理解所有认知偏差

在我看来文中总结的还可以继续提炼，我看到的是两大类：信息有歧义；信息接收不完整（个人认为包括了：信息过载、大脑没记住、大脑不认真或没有及时反映（说白了就是走神了））

如何纠正

恕我直言这个比较难，除了病理性质的需要临床治疗以外，在生活与工作中，我们要消除由认知偏差导致的潜在问题，可以从以上两大类型出发

1. 消除歧义

在我的理解中，歧义除了从字面上定义不清外，还包括对信息背景、事物看法与思考逻辑的差别，例如有的地方竖起大拇指是表示赞扬，有的地方却相反是具有挑衅意味的手势；有的地方点头表示肯定，摇头表示否定，有的地方是相反的。这些涉及到文化、历史、传统等深层次的因素都是可能引发歧义的地方，无论是个人国际交友还是企业跨国商业都是需要注意避免出现类似的问题。

所以说在使用中性描述以外，我们还需要对双方或多方的身份背景进行考察，同时在沟通与信息传达过程中及时反馈，来确保沟通者在相互之间没有引起对信息事物的歧义。

2. 信息传达的完整度

要想保证信息在传达过程中不会出现遗漏，可以通过会议纪要、备忘录等形式将沟通重点与过程记录下来用于复盘、对照、留档，同时对于视频通讯也可以通过录播的方式记录来方便日后参照。

延伸阅读1

延伸阅读2

Markdown语法教程-4-代码语法

代码语法

要将单词或短语表示为代码，请将其包裹在反引号 (`) 中。

转义反引号

如果你要表示为代码的单词或短语中包含一个或多个反引号，则可以通过将单词或短语包裹在双反引号(``)中。

代码块

要创建代码块，请将代码块的每一行缩进至少四个空格或一个制表符。

围栏代码块

Markdown基本语法允许您通过将行缩进四个空格或一个制表符来创建代码块。如果发现不方便，请尝试使用受保护的代码块。根据Markdown处理器或编辑器的不同，您将在代码块之前和之后的行上使用三个反引号(```）或三个波浪号（~~~）。

语法高亮

许多Markdown处理器都支持受围栏代码块的语法突出显示。使用此功能，您可以为编写代码的任何语言添加颜色突出显示。要添加语法突出显示，请在受防护的代码块之前的反引号旁边指定一种语言。

来源

Markdown语法教程-8-转义字符语法

转义字符语法

要显示原本用于格式化 Markdown 文档的字符，请在字符前面添加反斜杠字符 (\) 。

案例：

\* Without the backslash, this would be a bullet in an unordered list.

效果：

* Without the backslash, this would be a bullet in an unordered list.

可做转义的字符

以下列出的字符都可以通过使用反斜杠字符从而达到转义目的。

Character	Name
\	backslash
`	backtick (see also escaping backticks in code)
*	asterisk
_	underscore
{ }	curly braces
[ ]	brackets
( )	parentheses
#	pound sign
+	plus sign`
-	minus sign (hyphen)
.	dot
!	exclamation mark
|	pipe (see also escaping pipe in tables)

特殊字符自动转义

在 HTML 文件中，有两个字符需要特殊处理： < 和 & 。 < 符号用于起始标签，& 符号则用于标记 HTML 实体，如果你只是想要使用这些符号，你必须要使用实体的形式，像是 < 和 &。

& 符号其实很容易让写作网页文件的人感到困扰，如果你要打「AT&T」 ，你必须要写成「AT&T」 ，还得转换网址内的 & 符号，如果你要链接到：

http://images.google.com/images?num=30&q=larry+bird

你必须要把网址转成：

http://images.google.com/images?num=30&q=larry+bird

才能放到链接标签的 href 属性里。不用说也知道这很容易忘记，这也可能是 HTML 标准检查所检查到的错误中，数量最多的。

Markdown 允许你直接使用这些符号，它帮你自动转义字符。如果你使用 & 符号的作为 HTML 实体的一部分，那么它不会被转换，而在其它情况下，它则会被转换成 &。所以你如果要在文件中插入一个著作权的符号，你可以这样写：

©

Markdown 将不会对这段文字做修改，但是如果你这样写：

AT&T

Markdown 就会将它转为：

AT&T

类似的状况也会发生在 < 符号上，因为 Markdown 支持 行内 HTML ，如果你使用 < 符号作为 HTML 标签的分隔符，那 Markdown 也不会对它做任何转换，但是如果你是写：

4 < 5

Markdown 将会把它转换为：

4 < 5

需要特别注意的是，在 Markdown 的块级元素和内联元素中， < 和 & 两个符号都会被自动转换成 HTML 实体，这项特性让你可以很容易地用 Markdown 写 HTML。（在 HTML 语法中，你要手动把所有的 < 和 & 都转换为 HTML 实体。）