Type defines type. 在英文中，单词 Type 包含两个含义，文字和类型。这从某个角度说明了字体对于品牌的意义。一种字体能影响甚至决定人们对于这个品牌风格的认知。随着产品使用场景的不断拓宽，一个品牌的呈现已经不再局限于一个 LOGO 那么简单。
品牌可以通过 LOGO、品牌色、IP 形象、字体等多种方式与受众构建联系。根据权威机构 Salesforce 今年 4 月的调查，75% 的消费者期望在与品牌互动时获得一种持续性的、连贯的体验。
纵观京东现在的品牌光谱，可以发现，之前我们在字体方面的确是处于缺位的状态。而字体作为一个分布广泛的媒介，必将成为连通全部潜在品牌触点的重要工具。
因此，京东朗正体的推出，将会与我们现有的资源一起，全面提升京东的品牌体验的连贯性，并有利于构建新的品牌生态。
京东朗正体其实脱胎于京东内部设计团队所称的「京东字体」。与很多品牌（IBM、奥美）相似，我们的品牌字体也是从我们的 LOGO 文字中延伸而来。
一开始，我们也是边学边做，通过已有的一些基础字体设计知识，从 LOGO 里寥寥无几的笔画中总结了一些笔画规律，比如横细、竖粗、点平、锐折等，然后将其应用到各个部门提过来的做字需求中。另外有时候也需要对其他部门提交的文字 LOGO 进行审核。
△ 这个神秘组织就是我本人
但是渐渐的，我们开始感到力不从心。一方面是随着京东业务不断扩充，希望设计京东字体作为 LOGO 的需求越来越多。使用京东字体作为标志，具有强品牌背书的优点，而且相比专门设计一个图形 LOGO 乃至一套 VI 体系，使用京东字体更加节省时间，具备更高的推广效益。但仅靠一个设计师来对接整个集团众多部门的做字需求，还是有点不堪重负。
△ 源源不断的做字需求
另一方面是我们意识到，我们根据 LOGO 字体制定的造字规则，其实非常模糊且局限，这也是我们缺乏字库设计的经验造成的。而这样的漏洞使得我们在实际的应用中遇到了问题。比如一开始我们简单地将撇的收笔都规定为纵切，但是在某些字中，使用横切收笔，视觉上却显得更为舒适。
后来我们在与专业的字体设计师沟通后了解到，这其实是因为在汉字中，单是一个撇笔就分为左上撇，斜撇，弯撇，直撇这么多种类型，而简单地将一个规则应用到所有的撇笔中，会造成某些字结构上的失衡。
就在京东字体的造字工程陷入困局时，市场部刚好找到我们，提出了与专业字库公司合作定制京东品牌字体的计划，从而推进品牌升级。我们与市场部一拍即合，确定了与方正的合作。于是，整个字库的创作主力转到了方正身上，而我们主要承担掌舵的角色，整个字库的制作也开始向专业化、规模化、系统化发展，生产速度更是呈现出爆炸性增长。
首先，我们与方正的老师确定了字体整体的基调，希望仍然保持简洁、直接、力量的感觉。对已有材料进行分析后，方正团队重新调整了字体的笔画、字面、重心和结构等方面，特别是对笔画粗细比例和规则进行了规范化。
可以看到，新版字体的纵横笔画比例从 20:11 缩小到 3:2 后，字面布白变得更均匀，辨识度也显著提高。
同时，方正团队对笔画规则的重新分类，也解决了我们之前碰到的难题。例如规定：点、撇、捺及镜像点撇的收笔采用横切，较为扁平的撇捺和镜像撇捺的收笔则采用纵切。
明确规则后，方正团队先小规模试点，做了 130 个字，这些字涵盖了京东常用字以及中文里的主要偏旁部首和部分独特字形。同时，方正也邀请我们为这些字提供意见。
由此，我们开始了字体找茬大赛。我们把这些字放大，打印后贴在墙上细细端详。近看，远看，坐着看，站着看，跪着看，走着看，调动起我们体内最原始的设计直觉，试图找出这些字里不自然的地方，然后贴上便利贴标记。后来我们甚至走火入魔，看字不是字。
△ 看字看到失智的同事
这次的项目合作，方正团队派出了两位重量级的设计专家，方正字库的设计总监仇寅老师与设计副总监汪文老师。（如此深厚沉淀的字体设计资历让我们忍不住就直呼老师）
一开始，我们还担心在项目过程中会比较被动，无法很好地参与到字型设计的讨论中。毕竟相比之下，我们简直是字体小白，缺乏系统的字体设计知识与建设大型字库的经验。但在合作的过程中，我们慢慢能体会到，从某个角度来说设计还是相通的。
在一期和二期字样中，我们都根据「设计直觉」，对一些基本结构提了调整意见，甚至直接上手做了修改的尝试，因为感觉这样讨论起来也比较直观。这也的确得到了方正老师们的认可与呼应，其中还包括一些比较重要的偏旁部首。
比如竖心旁、火字旁的两点，老师们一开始都做得特别纤细。这可能是因为点笔在初始的调性设定上，就被规定从起笔到收笔都不能有弧度。老师们或许是出于字面留白的考虑做小了。但我们认为从总体来看，还是显得过于「可爱」了点，于是将它们适当加粗，并向中心靠拢。老师也采纳了我们的意见，终稿效果呈现上双方都比较满意。
确认核心字样后，方正开始进一步快速地扩充字库。整个字库制作的时间虽然只有短短的 3 个月，但还是进行得比较流畅和有序的。
而这当中，还有一个无法忽略的角色，那就是市场部。市场部作为整个集团的品牌资源中继站，长期负责承接各个部门的设计需求，对字体在业务前线的实际应用效果有很强的发言权。于是，方正和市场部，自然落在了跷跷板的两边，而我们站在中间，既要信任双方，又要平衡好双方的意见，推进字库快速而高质量地产出。
这次制作间隙，刚好碰上了新板块业务——「京东健康」的品牌发布，因此方正团队需要临时先制作这几个字的标准字。在康字上，我们费了不少的功夫。
市场部认为方正给到的「康」字设计，有种不稳固的感觉。这可能是康字右下角的捺笔过高过短造成的。这可以理解，因为涉及到京东健康的业务范围和希望传达的品牌调性，业务方自然希望在字体标志上体现出稳定、安全的感觉。
但业务方提过来的建议，从设计上看还有欠缺，与其他字体也不成体系。因此我们在此基础上为方正老师提供了一些修改方向的建议，也就是让折捺更贴近地面，左边的两点也相应做出调整适应。
方正侧根据我们的意见，又做了进一步的创新修改。我们以设计角度和业务需求结合的角度进行挑选，认为将右边的点和捺打散，捺笔能获得更大的舒展空间，整个字符也「站得更稳」，选定了方案C。这个小插曲也就顺利解决了。
品牌定制字体，从名字上可以看出，似乎具有天然的专属性，它只属于其服务的品牌。但正如蒙纳在 2020 字体设计趋势报告所说，品牌的字体策略不应该是固定的、死板的，它更像是一个可扩展、可变化的工具，帮助我们实时重塑品牌。这意味着京东朗正体在未来仍将持续进化，更加开放。它不只是属于京东的字体，它还是我们所有人的字体，它试图满足设计师、合作商家、消费者等多方的需求。
京东朗正体目前仅有一个字重，比较粗，主要适用在大型标题或标志中，还不能满足目前众多文字内容样式的需要。后续我们将会制作更多字重，丰富京东朗正体的字体家族。我们也不排除京东朗正体会覆盖更多语言的计划。毕竟京东作为一个全球化的品牌，在各个国家的露出将会越来越多，使用字体在不同语境中保持品牌连贯性也一样至关重要。
除此之外，可变式字体(Variable Font) 可能是我们更长远的一个发展方向。可变式字体的特点在于其无限性，只需下载一套支持这种技术的字体，就可以直接调整字的各种外形参数，包括字重、字宽、衬线、斜度等。这既能减轻字体设计师的工作，也能为使用字体的设计师提供更多可能性。同时，这也有助于消除字体在各种电子终端演绎的屏障，释放更多品牌活力。目前我们正在与技术平台的小伙伴沟通这一计划的实现进程。
在使用范围上，京东朗正体已经开放授权给所有合作的商家和机构。我们也希望借助品牌字体增强与合作方的联系，让这个品牌符号为合作伙伴提供更多展示的空间，进一步拓展品牌生态的广度。
品牌战略公司 Lippincott 的负责人提到：「在这个新的时代，字体比任何时候，都更需要也更可能统一人们关于品牌的体验，并在各个渠道和载体上都实现无缝连接。」
这一次，我们做京东的品牌字体，当然不是为了「赶潮流」。它立足于现实环境的需要。京东，根源上看是一个提供零售基础设施服务的平台。这个服务，既是硬件上的，比如储存和传送包裹，也是软件上的，处理和分发信息。 而文字，作为信息的重要载体之一，是我们这一次尝试为京东创造设计价值而抓住的发力点和机会点。
和京东朗正体一起成长的历程，包含了我们在系统化字库设计中的懵懂探索，与跨界设计师合作的思想碰撞，乃至对京东品牌字体未来发展的想象，辛酸和快乐等比混合。
让我们期待京东朗正体的表现。
另外一款品牌字体「腾讯字体」也值
除了专业和工作，你思考过别的问题吗？最近反思了这十个问题，分享出来与各位酷友共勉。
年关将至，越是这个时候行业的波动也比较大，设计师萌生跳槽想法、被离职风险、薪资拖欠带来焦虑情绪、常年加班的职业病等等。也许我们在耗费心力提升专业能力的同时，是否应该思考点别的问题。
最近进行了一些反思，除了专业以外我还有哪些需要坚守的习惯和培养的目标。整理出最近思考的十个问题，希望与大家一起共勉。
无论是职场新人还是行业老司机，我们不怕专业能力不足，就怕浑噩度日，漫无目标。看到过很多工作多年的设计师迷茫，缺少新人的工作激情，却又不知道自己应该如何前进一步。
小时候老师总会问我们梦想是什么，却很少有人实现，现在如果问我梦想的话，我一般会说自己的短期目标是什么。你可以定一个大的目标，但是一定要拆分为短期可落地执行的目标，阶段性的验收才能做出灵活的调整。
如果是专业层面可以梳理当前行业需要的技能树，然后对自己的能力进行梳理，看看不足的是哪些，以此制定短期目标一个一个进行攻破。目标不一定与专业有关，也可以是生活中的兴趣，比如学会游泳、看十本书、完成一次自驾游、让自己瘦十斤、年底有钱回家~O(∩_∩)O~一切都可以成为自己的短期目标。短期目标是为了丰富自己的时间管理，也能充分的利用好阶段性的时间去完成，不断增进自信和维持这份驱动力。
如果你能控制好自己的时间，就是一个优秀的设计师，时间规划主要的难度不是制定，而是坚持，很多人都半途而废。我从实习开始工作以来为了更好的掌控自己的时间，喜欢以日记的形式记录当日完成的工作和接下来需要准备去执行的事项。完成之后以勾选的方式划掉，如果发现接下来没有任务进来，会制定一些日常提升的计划。
业余的碎片化时间根据出现的场景做规划，刚工作的时候上下班地铁时间需要 2 小时左右，通常就会安排进行阅读，不仅可以消磨时间也增加了自己的阅读量。如果加入一些日常练习主要的不是一天要做多少，而是能否长期坚持，通常是一天完成两个界面就睡觉，不多做也不少做，随着练习的坚持后面完成的时间就会越来越快。通过一些设计平台以打卡的形式发布作品，目的就是为了有一个可以记录自己成果展示的场景，调动起氛围。
也可以给自己的时间规划设定提醒，以免忘记这个时间段应该做什么，规划不能过于密集，休息是为了放松自己，如果被规划压得喘不过气，会把一个好的东西变得排斥。所以，留足一些休息的时间追剧、刷抖音、锻炼身体、逛逛商场散散步等等，劳逸结合才能持之以恒。
其实专业能力不足并不可怕，只要你想学都可以弥补不足，难的是缺少自我驱动力。三分热度你都能有，持之以恒却没多少人可以做到了。要时刻反思自己坚持了曾经的那份初心了吗？
如果自己自控意识薄弱，要刻意而为之，强迫自己按照定好的轨迹运行。可以制定阶段性的小目标和规划，这样战线不会拉得很长，有助于刻意坚持。可以给自己设定一些奖励，完成目标大吃一顿、看一场电影、去一个地方旅游、买一件规划好的商品等。如果没有完成就要强迫自己完成才能获得设定好的奖励，现在不对自己狠一点，未来职场就会对你狠一点，进而抛弃你。
如何提高自我驱动力：
思考一下除了专业和工作以外，你有兴趣爱好吗？如果你犹豫停顿了，希望你可以培养一个兴趣爱好，丰富自己的精神追求。当然，这个爱好需要是阳光积极的，别把陋习当成爱好。
除了设计以外，我从小喜欢画国画，虽然没有走这个方向去发展，我把它作为兴趣爱好来看待，丰富自己的业余生活。作为设计师兴趣爱好不一定是与设计沾边的，我以前有个同事她是 UI 设计师，业余时间却是某游戏栏目的专栏博主，也有专门写旅行日记的，研究美食的等等。
培养兴趣爱好可以让你在工作之余放松心情，释放压力，没有束缚才能释放自己压抑的情绪，也能更好的调整好心态。
有哪些适合设计师的兴趣爱好？
年轻的自己从来不担心这个问题，只有当发现自己身体透支过度的时候才会有所意识。作为设计师来说加班似乎已经家常便饭，不过如果加班透支了自己的身体也要进行反思了，毕竟健康是属于自己的。
虽然没办法立马做到早睡早起，但是可以逐步把休息时间和起床时间提前，早点起来锻炼一下身体、看半小时书也不错。好的身体才能实现更多价值，我最近都在尽量控制晚上十一点前睡觉，逐渐调整出更好的作息时间和习惯。
把青春和时间奉献给了工作，别把健康也搭进去了，如果公司不注重员工的健康而一味的压榨，不值得你为之拼命。
青春我们都曾有过，也都会失去，如果你正直青春期间，如何看待自己当前的经历和奋斗的动力比较关键。
刚毕业的时候用一部分青春换取了职场经验和专业进阶，后来选择创业也是希望把青春留给自己，为自己而奋斗。每个人都有自己的选择，只希望你今日的努力能够对得起未来的自己。
责任感是我们每个人都需要具备的，上学期间我们习惯了在爸妈的庇护下成长，从我们步入职场的时刻，我们就要学会独立生活。虽然你可能过着月光族的生活，一人吃饱全家不饿，也不一定尽到了自己的责任，但是总有从某一刻开始你会意识到自己的责任。
当我们在追求自己的未来的时候，也要回头思考自己的责任，从肩负起一个小的责任开始。可以是对家人的关心与照顾，如果当你成家之后应该会感触更深。今日对未来的反思与规划是为了使自己变得更优秀，将来有能力守护家人，实现自己的价值，肩负起自己的责任。
作为设计师我们是商业环节中的一环，随着感官体验的升级，设计的质量越发显得重要。在工作中我们需要成为一个有态度的设计师，主导自己的设计使其发挥更大的价值。个人态度分为性格层面和习惯层面的态度，下面分别梳理一下。
从性格层面体现自己的态度：在对接需求的时候，我们不能是一只温顺的小羔羊，被人牵着走并任人宰割。要有自己的态度，敢于为自己的设计发声，有自己坚守的原则，通过案例和经验进行引导需求方的选择。坚持不一定可以改变别人的选择，但是我们做到了专业设计师的态度。
从习惯层面体现自己的态度：设计能力都是可以学习培养的，养成良好的习惯至关重要，对细节的态度、设计质量的态度、提案演示的态度、沟通对接的态度等等。养成一个好的设计习惯，就算生活中也应如此，态度可以决定你能把一件事做到何种深度，希望我们都可以成为一个有态度的设计师。
优秀的设计师总能善于总结，总结可以对自己的知识体系进行梳理和检索，查漏补缺。总结个人分为两个方向，一是对自己的经验进行总结梳理，把经验形成可传递的方法论；二是对优秀的案例和资源进行梳理总结，把他人的优秀方法论转化为自己可吸收的轨迹。
有句话叫为了写作而看书，通过输出倒逼输入，主动吸收的通常转化和记忆都更强。除了专业相关的总结以外，我们也可以是一些读书笔记、日常感悟等，锻炼自己写作的能力和养成习惯。以前我们一个学员有记录生活感悟和写读书笔记的习惯，一年能坚持输出十万多字的随记，这个习惯值得学习。坚持几年后可以看出她在各方面的理解能力都非常好，也善于将自己的经验进行总结，带来的结果自然是得到了很多机会去更好的发挥自己的价值。
写作与你的专业能力不一定强关联，不要以经验不足而自我放弃，这只是一个习惯的培养。只有去尝试了才知道那里不足，如何去优化，下次应该如何写才能更合理。希望从今天以后，你可以坚持写作总结的习惯。
一切的自信和态度都是建立在自我专业的基础上，特别是设计师，如果自身不够专业如何说服别人。要时刻质问自己是否依然保持专业性，低姿态面对学习，时刻评估和提升自己。
不同阶段关注的焦点不同，刚开始我们可能在意技能操作层面，执行能力为第一保障。随着工作经验的积累，我们的关注面更综合，有时候也会感觉学得越多发现自己越是什么都不会。如果在职场中一直都没有新的知识和认知丰富自己，会逐渐变得被动，很难突破自己的瓶颈期。要保持学习的动力和日常输出的自我驱动力，不要温水煮青蛙，把自己陷入被动的状态。
所以，时刻问问自己，我是否够专业。
反思自己是为了让自己时刻保持清醒，作为设计师我们需要有态度、要自信、够专业；除了专业层面我们还需要反思更多问题，有自己的短期目标、能管理好时间、培养更多兴趣爱好等等。不断丰富自己的生活状态，可以带给自己更多乐趣，把有限的时间过得更合理。
希望本文可以抛砖引玉，大家都可以反思自己面临的问题，提升自己的综合素质和能力。
文章来源：优设
本文的英文原标题是「10 Rules of Dashboard Design」，其中 Dashboard 如果翻译成仪表盘的话，总觉得不大容易理解，所以我在这里把它翻译为数据可视化。数据展示方面的设计，相信大家会经常用到，这篇文章有很多简单直接，立马就能用上的干货，一起来学习吧！
数据可视化的目的是以一种用户更容易理解的形式呈现复杂信息。
一个优秀的数据可视化界面包含以下几个关键要素：
数据可视化界面设计最重要的步骤是需要了解目标用户是谁，能为他们提供什么价值。了解目标受众的知识背景和理解水平能帮助你做出对他们有价值的设计。
在了解目标用户时，有必要了解受众感兴趣的数据类型。
「专注于用户的需求，更容易产生他们喜欢使用的结果。」
目标用户级别可能会在一级和另一级之间变化，这是一个挑战性的点。与其他任何设计项目一样，可以细分受众并将信息相应地分为基本内容和高级内容。
在界面中表示一组信息有多种方法，选择正确的数据指标是设计数据可视化的另一个关键元素。这也与目标用户的偏好有关，即他们希望看到什么样的信息。
「根据需要设计数据可视化界面，为不同的业务使用不同类型的展示方式。」
下面是为目标用户设计数据可视化界面时需要考虑的一些重要规则。
一个常见的错误就是设计师没有对信息区分层级，所有的内容看起来都一样重要。
可以尝试使用组件的大小和位置来区分数据的层次结构。
2. 简单易懂
数据可视化的真正目的是用一种更方便理解，更简单的形式来传达复杂信息。
3. 一致性
使用一致性布局设计的数据可视化界面看起来更好。
4. 临近原则
在界面中把相近的信息放在一起可以帮助用户快速理解。
想更深入了解接近原则，看这篇：
5. 对齐
可视化组件元素需要在视觉上对齐，并保持视觉平衡。
6. 留白
留白是为了让界面有呼吸感，它使得用户在使用你的界面时能够有喘息的空间。
△ 留白太少简直就是在鼓励你的用户尽快离开
7. 颜色
使用有效的配色方案来吸引用户的注意力，帮助他们轻松地浏览信息。
△ 避免使用低对比度和低效的渐变
8. 字体
标准字体是可视化界面中的最佳字体，除非有特别的理由，一般不要用其他字体。
△ 不要使用影响可读性的字体
9. 数字排版
显示精度超过要求的数字使它们难以阅读和理解。
10. 标签
使用能够快速有效地向用户传达所需信息的标签。
△ 避免旋转标签
数据可视化旨在节省时间和精力，将复杂和抽象的数据以更简单的形式表示，目的是以用户能够理解的方式将关键信息传达给他们，确保自己理解用户所需，并给他们需要的信息。
文章来源：优设
一、HTML简介
HTML 俗称网页，就是我们打开浏览器访问任何一个网站所看到的都是由 HTML 页面提供的（或者与 HTML 技术相关的内容提供）。
HTML 全称为 HyperText Markup Language，被译为超文本标记语言。所谓的超文本就是不仅只有文本内容，包括链接、音频和视频、图像等内容。所谓标记语言，简单来说就是元素。也就是说，HTML 提供一系列的元素来构成一个页面中最基础的内容。
HTML 是一种描述 Web 文档结构和语义的语言，它由元素组成，每个元素可以有一些属性或文本。
当你保存 HTML 文件时，既可以使用 .htm 也可以使用 .html 文件后缀。
编写HTML代码的工具：
记事本
sublime text
hbuilder
webstorm
vscode
pycharm – python代码 也可以写html代码
二、第一张网页
一个页面有且只有一个根标签是html， 元素一般包含 和 两个元素，也就是 HTML 的头部和主体内容。
<html>
<head>
<title>网页的标题</title>
</head>
<body>
<!-- 这是一个文本框 -->
<input type="text"></input>
</body>
</html>
1
2
3
4
5
6
7
8
9
HTML标签：由尖括号包围：
成对出现： <p></p> ,即开标签和闭标签.
属性： 定义在开标签中，如input标签中的type属性
简写： 开闭标签之间的内容是标签体，如果标签体为空，则可以简写：
注释： 是注释标签
HTML文档在浏览器中被解释运行,展示的不是源码而是渲染之后的效果
三、HTML头部
< head > 元素包含了当前 HTML 页面的所有头部元素，在 < head > 元素内必须定义 < title > 元素，还可以定义 < script >、< link > 等元素。
这些 HTML 的头部元素定义了当前页面的标题、编码、使用的脚本或样式等信息。
1、title元素
< title >元素定义了当前HTML页面的标题
<title>百度一下，你就知道</title>
1
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AGycI1jQ-1578023422160)(HTML.assets/1530668619163.png)]
2、meta元素
元素提供了 HTML 页面的元数据（Metadata），元数据是存储数据的信息。
通常用于设置页面的编码、描述、关键词、作者等信息。
元素不会显示在页面中，但会被浏览器解析。
2.1 定义网页内容的编码格式
<meta charset="utf-8">
1
2.2 定义HTML页面关键字，用于搜索引擎
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
1
2.3 定义HTML页面描述
<meta name="description" content="百知教育IT培训,java培训,PHP培训,UI培训,H5培训,linux培训,大数据培训,Python人工智能,IT行业培训领跑者,高薪就业 ">
1
2.4 定义HTML页面作者
<meta name="author" content="百知教育">
1
四、HTML主体
1、body元素
标签定义文档的主体。 元素包含文档的所有内容（比如文本、超链接、图像、表格和列表等等）。body元素中包含的内容（子标签）是用户可以看到的。
一个 HTML 文件只能存在一个 标签。
2、HTML元素基本构成
2.1 元素类型
HTML 是标记语言，所谓标记就是指页面中的元素（元素也可以叫做标签）。一个完整的 HTML 页面都是由众多不同的元素组成的。
闭合元素：必须包含开始元素和结束元素，如果没有结束元素会产生意料之外的错误。
<title>百知教育Python人工智能培训</title>
<p>这是一个段落标签</p> <!--该标签的作用是表示一个段落，会有换行-->
1
2
空元素：也可以叫做单元素，只需要开始元素，而不需要结束元素。
<meta name="description" content="渥瑞达Web前端培训">
<br/> <!-- 换行 -- >
1
2
3
2.2 HTML属性
属性是设置在HTML元素中的，用于为元素添加附加信息。属性一般都是定义在开始元素中，并且是以“名称/值”对出现
<input type="text" /> <!-- 这是一个文本框 -->
<input type="button" value="点我" /> <!-- 这是一个按钮 -->
1
2
3
五、HTML文本
1、标题元素
HTML 提供了 6 个标题元素，由大到小依次为 <h1> 到 <h6>
<h1>这是一级标题</h1>
<h2>这是二级标题</h2>
<h3>这是三级标题</h3>
<h4>这是四级标题</h4>
<h5>这是五级标题</h5>
<h6>这是六级标题</h6>
1
2
3
4
5
6
7
8
9
10
11
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Gpmb9nTx-1578023422163)(HTML.assets/1530670234313.png)]
2、段落
元素定义段落
: 浏览器会自动地在段落的前后添加空行 ```html
这是一个段落.
1
这是另一个段落.
注意： 在html中手动换行无效<br />
<br />
3、换行<br />
元素定义的段落内容是不会自动换行的，如果换行需要使用 br 元素<br />
<br />
<body><br />
<span style="white-space:pre;"> </span>生活赋予我们一种巨大的和无限高贵的礼品，这就是青春：充满着力量，充满着期待志愿，充满着求知和斗争的志向，充满着希望信心和青春。<br />
<span style="white-space:pre;"> </span><br><br />
人所缺乏的不是才干而是志向，不是成功的能力而是勤劳的意志。<br />
</body><br />
1<br />
2<br />
3<br />
4<br />
5<br />
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LbaNYf1L-1578023422165)(HTML.assets/1530670731312.png)]<br />
<br />
4、水平线<br />
在浏览器中显示一条水平线（分隔线）效果。<br />
属性：size=“10” color=“red” width=“100px 或者 50%” align=“left/right/center”<br />
<br />
10像素高 颜色 宽度 对齐方式<br />
<br />
<body><br />
<span style="white-space:pre;"> </span>生活赋予我们一种巨大的和无限高贵的礼品，这就是青春：充满着力量，充满着期待志愿，充满着求知和斗争的志向，充满着希望信心和青春。<br />
<span style="white-space:pre;"> </span><br><br />
<span style="white-space:pre;"> </span><hr size="1" width="100%" color="red"/><br />
<span style="white-space:pre;"> </span>人所缺乏的不是才干而是志向，不是成功的能力而是勤劳的意志。<br />
</body><br />
1<br />
2<br />
3<br />
4<br />
5<br />
6<br />
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nK6UOf0r-1578023422166)(HTML.assets/1530671029915.png)]<br />
<br />
5、文本修饰<br />
5.1 粗体字<br />
这是一段正常未加粗的文本内容.<br />
<br><br />
<b>这是一段加粗之后的文本内容.</b><br />
<br><br />
<strong>粗体--着重强调</strong><br />
1<br />
2<br />
3<br />
4<br />
5<br />
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Va3GdgFK-1578023422168)(HTML.assets/1530672074778.png)]<br />
<br />
5.2 斜体字<br />
<i>这是一段斜体的文本内容.</i><br />
1<br />
5.3 下划线<br />
<body><br />
<span style="white-space:pre;"> </span>证明人：<u>百知教育</u><br />
</body><br />
1<br />
2<br />
3<br />
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aJY0EaxC-1578023422169)(HTML.assets/1530671768110.png)]<br />
<br />
5.4 删除线<br />
<body><br />
<span style="white-space:pre;"> </span><del>这是一段要被删除的文字</del><br />
</body><br />
1<br />
2<br />
3<br />
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-X4f2bCuN-1578023422172)(HTML.assets/1530671905293.png)]<br />
<br />
5.5 下标文字<br />
<body><br />
<span style="white-space:pre;"> </span>H<sub>2</sub>O<br />
</body><br />
1<br />
2<br />
3<br />
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-E8DEONkQ-1578023422179)(HTML.assets/1530672009385.png)]<br />
<br />
5.6 上标文字<br />
32 = 9<br />
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NTEZhEkv-1578023422180)(HTML.assets/1530672138124.png)]<br />
<br />
5.7 小号字<br />
正常文字<br />
<small>小号文字</small><br />
1<br />
2<br />
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6KckvEOc-1578023422182)(HTML.assets/1530672191397.png)]<br />
<br />
5.8 大号字<br />
<body><br />
<span style="white-space:pre;"> </span><small>小号文字</small><br />
<span style="white-space:pre;"> </span>正常文字<br />
<span style="white-space:pre;"> </span><big>大号文字</big><br />
</body><br />
1<br />
2<br />
3<br />
4<br />
5<br />
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gCJaBbhq-1578023422184)(HTML.assets/1530672254286.png)]<br />
<br />
六、图像与链接<br />
1、图像元素<br />
元素引入外部图像， 元素是空元素。<br />
<br />
1.1 src属性<br />
<span style="white-space:pre;"> </span>src 属性（必需），表示引入图像的 URL 地址。<br />
<br />
<img src="images/img.png"><br />
1<br />
图像可以是本地地址，也可以是网络地址。<br />
<br />
<img src="https://himg.bdimg.com/sys/portrait/item/c8764d725f6c6963656e6365g872fc876872f.jpg"><br />
1<br />
1.2 图像大小<br />
width 和 height 属性用于设置图像显示的宽度和高度。<br />
<br />
<img src="img.png" width="350" height="233" /><br />
1<br />
1.3 图像定位(了解)<br />
align 属性用于设置图像显示的位置。<br />
<br />
left：水平方向居左。<br />
right：水平方向居右。<br />
top：垂直方向居上。<br />
bottom：垂直方向居下。<br />
middle：居中。<br />
<img src="img.png" width="350" height="233" align="right" /><br />
1<br />
1.4 alt属性<br />
<img src="abcdef.png" alt="无法加载图片"/><br />
1<br />
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-evR6GiGo-1578023422185)(HTML.assets/1530673186561.png)]<br />
<br />
2、超链接<br />
2.1 用法<br />
href 属性（必需），表示指定跳转的 URL 地址<br />
<br />
<a href="http://www.baizhiedu.com">百知教育</a><br />
1<br />
2.2 打开方式： target 属性<br />
元素的 target 属性用于设置链接的打开方式。<br />
<br />
_blank：在新窗口打开链接。<br />
_self：在当前窗口打开链接。<br />
<a href="http://www.baizhiedu.com" target="_blank">百知教育</a><br />
1<br />
2.3 锚点<br />
<body><br />
<span style="white-space:pre;"> </span><a name="postion"></a> <!-- 定义锚点 --><br />
<span style="white-space:pre;"> </span><!-- 页面其它内容<br />
<span style="white-space:pre;"> </span>...<br />
<span style="white-space:pre;"> </span>...<br />
<span style="white-space:pre;"> </span>...<br />
<span style="white-space:pre;"> </span> --><br />
<span style="white-space:pre;"> </span><a href="#postion">定位到postion的位置</a> <!-- 链接到锚点 --><br />
</body><br />
1<br />
2<br />
3<br />
4<br />
5<br />
6<br />
7<br />
8<br />
9<br />
2.4 回到顶部的空链接<br />
<body><br />
<span style="white-space:pre;"> </span><!-- 页面其它内容<br />
<span style="white-space:pre;"> </span>...<br />
<span style="white-space:pre;"> </span>...<br />
<span style="white-space:pre;"> </span>...<br />
<span style="white-space:pre;"> </span> --><br />
<span style="white-space:pre;"> </span><a href="#">回到顶部</a> <!-- 回到顶部 --><br />
</body><br />
1<br />
2<br />
3<br />
4<br />
5<br />
6<br />
7<br />
8<br />
七、列表<br />
1、无序列表<br />
1.1 定义无序列表<br />
元素定义无序列表，用于列出页面上没有特定次序的条目。<br />
<ul><span style="white-space:pre;"> </span><br />
<span style="white-space:pre;"> </span><li>北京市</li><span style="white-space:pre;"> </span><br />
<span style="white-space:pre;"> </span><li>上海市</li><span style="white-space:pre;"> </span><br />
<span style="white-space:pre;"> </span><li>重庆市</li><br />
</ul><br />
1<br />
2<br />
3<br />
4<br />
5<br />
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8MFYHQJB-1578023422187)(HTML.assets/1530684550787.png)]<br />
<br />
1.2 type属性<br />
定义列表的项目符号的类型<br />
<br />
disc：实心圆，默认值。<br />
circle：空心圆。<br />
square：实心矩形。<br />
<ul type="circle"><span style="white-space:pre;"> </span><br />
<span style="white-space:pre;"> </span><li>北京市</li><span style="white-space:pre;"> </span><br />
<span style="white-space:pre;"> </span><li>上海市</li><span style="white-space:pre;"> </span><br />
<span style="white-space:pre;"> </span><li>重庆市</li><br />
</ul><br />
1<br />
2<br />
3<br />
4<br />
5<br />
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gCwhGGdG-1578023422188)(HTML+CSS_pic/1530684771419.png)]<br />
<br />
2、有序列表<br />
2.1 定义有序列表<br />
<ol><span style="white-space:pre;"> </span><br />
<span style="white-space:pre;"> </span><li>北京市</li><span style="white-space:pre;"> </span><br />
<span style="white-space:pre;"> </span><li>上海市</li><span style="white-space:pre;"> </span><br />
<span style="white-space:pre;"> </span><li>重庆市</li><br />
</ol><br />
1<br />
2<br />
3<br />
4<br />
5<br />
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ofA5U8WE-1578023422190)(HTML.assets/1530684878880.png)]<br />
<br />
2.2 type属性<br />
1：数字值，默认值。<br />
a 或 A：小写或大写字母。<br />
i 或 I：小写或大写罗马数字。<br />
<ol type="a"><span style="white-space:pre;"> </span><br />
<span style="white-space:pre;"> </span><li>北京市</li><span style="white-space:pre;"> </span><br />
<span style="white-space:pre;"> </span><li>上海市</li><span style="white-space:pre;"> </span><br />
<span style="white-space:pre;"> </span><li>重庆市</li><br />
</ol><br />
1<br />
2<br />
3<br />
4<br />
5<br />
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3l1LPm9P-1578023422191)(HTML.assets/1530685009075.png)]<br />
<br />
3、自定义列表<br />
<dl><br />
<dt>北京</dt><br />
<dd>海淀</dd><br />
<dd>昌平</dd><br />
<dd>朝阳</dd><br />
<dt>广东</dt><br />
<dd>广州</dd><br />
<dd>深圳</dd><br />
<dd>东莞</dd><br />
</dl><br />
1<br />
2<br />
3<br />
4<br />
5<br />
6<br />
7<br />
8<br />
9<br />
10<br />
八、表格<br />
1、表格使用<br />
表格由 < table > 标签来定义。每个表格均有若干行（由 标签定义），每行被分割为若干单元格（由 标签定义）。<br />
<br />
<table><br />
<span style="white-space:pre;"> </span><tr><br />
<span style="white-space:pre;"> </span><td>第1行，第1列</td><br />
<span style="white-space:pre;"> </span><td>第1行，第2列</td><br />
<span style="white-space:pre;"> </span></tr><br />
<span style="white-space:pre;"> </span><tr><br />
<span style="white-space:pre;"> </span><td>第2行，第1列</td><br />
<span style="white-space:pre;"> </span><td>第2行，第2列</td><br />
<span style="white-space:pre;"> </span></tr><br />
</table><br />
1<br />
2<br />
3<br />
4<br />
5<br />
6<br />
7<br />
8<br />
9<br />
10<br />
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JL9Sjv2t-1578023422196)(HTML.assets/1530685462072.png)]<br />
<br />
2、表格属性<br />
属性名称<span style="white-space:pre;"> </span>描述<br />
width 和 height<span style="white-space:pre;"> </span>设置表格的宽度和高度<br />
align<span style="white-space:pre;"> </span>设置表格的对齐方式<br />
border<span style="white-space:pre;"> </span>设置表格的边框宽度<br />
bgcolor<span style="white-space:pre;"> </span>设置表格的背景颜色<br />
cellpadding<span style="white-space:pre;"> </span>设置内边距（单元格边框与内容之间的距离）<br />
cellspacing<span style="white-space:pre;"> </span>设置外边距（单元格之间的距离）<br />
bordercolor<span style="white-space:pre;"> </span>边框颜色<br />
<table border="1" cellspacing="0" bgcolor="gray" bordercolor="red" width="300px" height="100px" align="left"><br />
<span style="white-space:pre;"> </span><tr><br />
<span style="white-space:pre;"> </span><td>第1行，第1列</td><br />
<span style="white-space:pre;"> </span><td>第1行，第2列</td><br />
<span style="white-space:pre;"> </span></tr><br />
<span style="white-space:pre;"> </span><tr><br />
<span style="white-space:pre;"> </span><td>第2行，第1列</td><br />
<span style="white-space:pre;"> </span><td>第2行，第2列</td><br />
<span style="white-space:pre;"> </span></tr><br />
</table><br />
1<br />
2<br />
3<br />
4<br />
5<br />
6<br />
7<br />
8<br />
9<br />
10<br />
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3bucqAYt-1578023422198)(HTML.assets/1530685943196.png)]<br />
<br />
3、tr元素<br />
属性名称<span style="white-space:pre;"> </span>值<span style="white-space:pre;"> </span>描述<br />
align<span style="white-space:pre;"> </span>right、left、center<span style="white-space:pre;"> </span>左右对齐方式<br />
valign<span style="white-space:pre;"> </span>top 、middle 、bottom<span style="white-space:pre;"> </span>垂直对齐方式<br />
bgcolor<span style="white-space:pre;"> </span>rgb(xxx,xxx,xxx)、colorName<span style="white-space:pre;"> </span>背景颜色<br />
<table border="1" cellspacing="0" width="500px" height="100px"><br />
<span style="white-space:pre;"> </span><tr align="center"><br />
<span style="white-space:pre;"> </span><td>第1行，第1列</td><br />
<span style="white-space:pre;"> </span><td>第1行，第2列</td><br />
<span style="white-space:pre;"> </span></tr><br />
<span style="white-space:pre;"> </span><tr align="right" valign="top" bgcolor="blue"><br />
<span style="white-space:pre;"> </span><td>第2行，第1列</td><br />
<span style="white-space:pre;"> </span><td>第2行，第2列</td><br />
<span style="white-space:pre;"> </span></tr><br />
</table><br />
1<br />
2<br />
3<br />
4<br />
5<br />
6<br />
7<br />
8<br />
9<br />
10<br />
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-737Gkc1r-1578023422199)(HTML.assets/1530695272576.png)]<br />
<br />
4、td元素<br />
元素是定义表格的数据单元格。<br />
属性名称<span style="white-space:pre;"> </span>值<span style="white-space:pre;"> </span>描述<br />
align<span style="white-space:pre;"> </span>right、center、left<span style="white-space:pre;"> </span>设置水平对齐方式<br />
valign<span style="white-space:pre;"> </span>top、middle、bottom<span style="white-space:pre;"> </span>设置垂直对齐方式<br />
width和height<span style="white-space:pre;"> </span>pixels 、%<span style="white-space:pre;"> </span>设置单元格的宽和高<br />
colspan和rowspan<span style="white-space:pre;"> </span>number<span style="white-space:pre;"> </span>设置单元格的跨列和跨行数量<br />
bgcolor<span style="white-space:pre;"> </span>rbg()、colorName<span style="white-space:pre;"> </span>单元格背景色<br />
<table border="1" cellspacing="0" width="500px" height="100px"><br />
<span style="white-space:pre;"> </span><tr><br />
<span style="white-space:pre;"> </span><td align="center">第1行，第1列</td><br />
<span style="white-space:pre;"> </span><td valign="top">第1行，第2列</td><br />
<span style="white-space:pre;"> </span></tr><br />
<span style="white-space:pre;"> </span><tr><br />
<span style="white-space:pre;"> </span><td width="300px">第2行，第1列</td><br />
<span style="white-space:pre;"> </span><td bgcolor='red'>第2行，第2列</td><br />
<span style="white-space:pre;"> </span></tr><br />
</table><br />
1<br />
2<br />
3<br />
4<br />
5<br />
6<br />
7<br />
8<br />
9<br />
10<br />
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IcLpE6Ii-1578023422201)(HTML.assets/1530697152946.png)]<br />
<br />
合并行和列<br />
<br />
<table border="1" cellspacing="0" width="500px" height="200px"><br />
<span style="white-space:pre;"> </span><tr><br />
<span style="white-space:pre;"> </span><td>第1行，第1列</td><br />
<span style="white-space:pre;"> </span><td>第1行，第2列</td><br />
<span style="white-space:pre;"> </span></tr><br />
<span style="white-space:pre;"> </span><tr><br />
<span style="white-space:pre;"> </span><td colspan="2">第2行，第1列</td><span style="white-space:pre;"> </span> <br />
<span style="white-space:pre;"> </span></tr><br />
<span style="white-space:pre;"> </span><tr><br />
<span style="white-space:pre;"> </span><td>第3行，第1列</td><br />
<span style="white-space:pre;"> </span><td rowspan="2">第3行，第2列</td><br />
<span style="white-space:pre;"> </span></tr><br />
<span style="white-space:pre;"> </span><tr><br />
<span style="white-space:pre;"> </span><td>第4行，第1列</td><br />
<span style="white-space:pre;"> </span></tr><br />
</table><br />
1<br />
2<br />
3<br />
4<br />
5<br />
6<br />
7<br />
8<br />
9<br />
10<br />
11<br />
12<br />
13<br />
14<br />
15<br />
16<br />
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-z6ythYQ4-1578023422203)(HTML.assets/1530697074613.png)]<br />
<br />
5、表格标题caption<br />
元素用于定义表格的标题，必须紧随 元素之后，且只能对每个表格定义一个标题。<br />
<table border="1" cellspacing="0" width="500px" height="100px"><br />
<span style="white-space:pre;"> </span><caption>表格标题</caption><br />
<span style="white-space:pre;"> </span><tr><br />
<span style="white-space:pre;"> </span><td>第1行，第1列</td><br />
<span style="white-space:pre;"> </span><td>第1行，第2列</td><br />
<span style="white-space:pre;"> </span></tr><br />
<span style="white-space:pre;"> </span><tr><br />
<span style="white-space:pre;"> </span><td>第2行，第1列</td><br />
<span style="white-space:pre;"> </span><td>第2行，第2列</td><br />
<span style="white-space:pre;"> </span></tr><br />
</table><br />
1<br />
2<br />
3<br />
4<br />
5<br />
6<br />
7<br />
8<br />
9<br />
10<br />
11<br />
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-V3X7gcxe-1578023422204)(HTML.assets/1530697414224.png)]<br />
<br />
6、表头thead、tbody表主体、tfoot表脚注<br />
标签定义表格的表头。<br />
<table border="1" cellspacing="0" width="500px" height="100px"><br />
<span style="white-space:pre;"> </span><caption>信息</caption><br />
<span style="white-space:pre;"> </span><thead><br />
<span style="white-space:pre;"> </span><tr><br />
<span style="white-space:pre;"> </span><th>姓名</th> <!-- 定义表头单元格 会加粗显示 --> <br />
<span style="white-space:pre;"> </span><th>性别</th><br />
<span style="white-space:pre;"> </span></tr><br />
<span style="white-space:pre;"> </span></thead><br />
<span style="white-space:pre;"> </span><tr><br />
<span style="white-space:pre;"> </span><td>Tom</td><br />
<span style="white-space:pre;"> </span><td>boy</td><br />
<span style="white-space:pre;"> </span></tr><br />
<span style="white-space:pre;"> </span><tr><br />
<span style="white-space:pre;"> </span><td>Linda</td><br />
<span style="white-space:pre;"> </span><td>girl</td><br />
<span style="white-space:pre;"> </span></tr><br />
</table><br />
1<br />
2<br />
3<br />
4<br />
5<br />
6<br />
7<br />
8<br />
9<br />
10<br />
11<br />
12<br />
13<br />
14<br />
15<br />
16<br />
17<br />
tfoot 元素应该与 thead 和 tbody 元素结合起来使用。 （比较少用）<br />
<br />
九、表单<br />
1、form 元素<br />
表单用标签描述，表单内部可以有多个子标签，用来完成用户信息的收集，并发送请求给服务器。<br />
<br />
属性：action=“xxx” method=“get/post”<br />
<br />
请求地址 请求方式<br />
<br />
http://www.baidu.com?uname=abc&passwd=123<br />
<form action="http://www.baidu.com" method="get"><br />
<span style="white-space:pre;"> </span>username:<input type="text" name="uname" id="uname115"/><br/> # abc<br />
<span style="white-space:pre;"> </span>password:<input type="text" name="passwd" id="pwd115"/><br/> # 123<br />
<span style="white-space:pre;"> </span><input type="submit" value="提交" id="sub115"/><br />
</form><br />
1<br />
2<br />
3<br />
4<br />
5<br />
6<br />
2、表单元素<br />
元素有很多不同类型，根据不同的 type 属性来决定。<br />
<br />
用户名：<input type="text" name="txt" /> <!-- text表示文本框--><br />
1<br />
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nLWfznhF-1578023422206)(HTML.assets/1530757524606.png)]<br />
<br />
type属性：<br />
类型名称<span style="white-space:pre;"> </span>描述<br />
text<span style="white-space:pre;"> </span>文本输入框<br />
password<span style="white-space:pre;"> </span>密码框<br />
radio<span style="white-space:pre;"> </span>单选按钮<br />
checkbox<span style="white-space:pre;"> </span>复选框<br />
button<span style="white-space:pre;"> </span>按钮<br />
submit<span style="white-space:pre;"> </span>提交按钮<br />
reset<span style="white-space:pre;"> </span>重置按钮<br />
file<span style="white-space:pre;"> </span>文件域<br />
name属性 ：标签的普通的属性，相当于别名，是每个输入控件的重要属性==请求参数名。<br />
<br />
id属性 ： 标签的唯一标识名，不能重复。<br />
<br />
value属性 ：标签的普通属性，是中药属性==请求参数值。<br />
<br />
2.1 文本框<br />
用户名：<input type="text" name="txt" /> <!-- text表示文本框--><br />
1<br />
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-H6IYvY3p-1578023422207)(HTML.assets/1530758139189.png)]<br />
<br />
用户名：<input type="text" name="pwd" value="Mr_lee" maxlength="10" readonly="readonly" /><br />
1<br />
2.2 密码框<br />
密码：<input type="password" name="pwd" value="123456" /><br />
1<br />
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7Nk9Lys0-1578023422208)(HTML.assets/1530758213655.png)]<br />
<br />
2.3 单选按钮<br />
<!-- name：值必须一样，value：表示提交表单时的值 checked:默认选中--><br />
<input type="radio" name="sex" value="1">男 <br />
<input type="radio" name="sex" value="0" checked="checked">女<br />
1<br />
2<br />
3<br />
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XP3i844U-1578023422210)(HTML.assets/1530758647865.png)]<br />
<br />
2.4 复选框<br />
<input type="checkbox" name="course" value="Mysql">Mysql<br />
<input type="checkbox" name="course" value="HTML">HTML<br />
<input type="checkbox" name="course" value="Linux">Linux<br />
<input type="checkbox" name="course" value="Django">Django<br />
1<br />
2<br />
3<br />
4<br />
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-r5mPRrZ3-1578023422211)(HTML.assets/1530758924865.png)]<br />
<br />
2.5 按钮<br />
<input type="button" name="btn" value="点我"><br />
1<br />
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ozchiqAW-1578023422214)(HTML.assets/1530759170832.png)]<br />
<br />
2.6 提交按钮<br />
<input type="submit" name="sub_btn" value="提交"><br />
1<br />
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kIOKVxLo-1578023422215)(HTML.assets/1530759206331.png)]<br />
<br />
2.7 重置按钮<br />
<input type="reset" name="set_btn" value="重置"><br />
1<br />
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cG06duKx-1578023422217)(HTML.assets/1530759252821.png)]<br />
<br />
2.8 文件域<br />
<br />
<input type="file"><br />
1<br />
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mHkQp3fZ-1578023422219)(HTML.assets/1530759404657.png)]<br />
<br />
2.9 文本域<br />
<textarea name="txtInfo" rows="4" cols="20">aa</textarea><br />
1<br />
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-406qSTUX-1578023422221)(HTML.assets/1530759866508.png)]<br />
<br />
3、下拉选框<br />
选择课程：<br />
<select name="course"><br />
<span style="white-space:pre;"> </span><option value="1">Java</option><br />
<span style="white-space:pre;"> </span><option value="2" selected="selected">C++</option><br />
<span style="white-space:pre;"> </span><option value="3">PHP</option><br />
</select><br />
1<br />
2<br />
3<br />
4<br />
5<br />
6<br />
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-b9rrRffX-1578023422222)(HTML.assets/1530759604602.png)]<br />
<br />
4、表单综合实例<br />
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9sgjtXvT-1578023422223)(HTML.assets/1530759682014.png)]<br />
<br />
十、特殊符号<br />
显示结果<span style="white-space:pre;"> </span>描述<span style="white-space:pre;"> </span>实体名称<br />
空格<span style="white-space:pre;"> </span> <br />
<<span style="white-space:pre;"> </span>小于号<span style="white-space:pre;"> </span><<br />
><span style="white-space:pre;"> </span>大于号<span style="white-space:pre;"> </span>><br />
©<span style="white-space:pre;"> </span>版权（copyright）<span style="white-space:pre;"> </span>©<br />
®<span style="white-space:pre;"> </span>注册商标<span style="white-space:pre;"> </span>®<br />
™<span style="white-space:pre;"> </span>商标<span style="white-space:pre;"> </span>™<br />
ile"><br />
<br />
<br />
[外链图片转存中...(img-mHkQp3fZ-1578023422219)]<br />
<br />
##### 2.9 文本域<br />
<br />
```html<br />
<textarea name="txtInfo" rows="4" cols="20">aa</textarea><br />
1<br />
2<br />
3<br />
4<br />
5<br />
6<br />
7<br />
[外链图片转存中…(img-406qSTUX-1578023422221)]<br />
<br />
3、下拉选框<br />
选择课程：<br />
<select name="course"><br />
<span style="white-space:pre;"> </span><option value="1">Java</option><br />
<span style="white-space:pre;"> </span><option value="2" selected="selected">C++</option><br />
<span style="white-space:pre;"> </span><option value="3">PHP</option><br />
</select><br />
1<br />
2<br />
3<br />
4<br />
5<br />
6<br />
[外链图片转存中…(img-b9rrRffX-1578023422222)]<br />
<br />
4、表单综合实例<br />
[外链图片转存中…(img-9sgjtXvT-1578023422223)]<br />
<br />
十、特殊符号<br />
显示结果<span style="white-space:pre;"> </span>描述<span style="white-space:pre;"> </span>实体名称<br />
空格<span style="white-space:pre;"> </span> <br />
<<span style="white-space:pre;"> </span>小于号<span style="white-space:pre;"> </span><<br />
><span style="white-space:pre;"> </span>大于号<span style="white-space:pre;"> </span>><br />
©<span style="white-space:pre;"> </span>版权（copyright）<span style="white-space:pre;"> </span>©<br />
®<span style="white-space:pre;"> </span>注册商标<span style="white-space:pre;"> </span>®<br />
™<span style="white-space:pre;"> </span>商标<span style="white-space:pre;"> </span>™<br />
<br />
<br />方法一：使用 localStorage 存储数据
window.localStorage.setItem(key，value)
方法二：使用 vuex-persistedstate插件
vuex 存在一个痛点，就是刷新以后vuex里面存储的state就会被浏览器释放掉（state都是存储在内存中的）。
办法：
通过vuex-persistedstate插件，实现将数据存储到本地。
1.实现
import createPersistedState from 'vuex-persistedstate'
export default new Vuex.Store({
state:{},
getters:{},
actions:{},
mutations:{},
modules:{},
plugins: [createPersistedState()] //加上这个就可以了 //里面设置需要缓存的内容
})
API： https://www.npmjs.com/package/vuex-persistedstate
方法三： 使用vue-cookie插件
cookie 可以设置过期时间
import Vue from 'vue';首先编写一个简单的容器：
<style>
width: 600px;
height: 100vh;
overflow-y: auto;
}
width: 100%;
}
width: 50%;
float: left;
margin: 20px 0;
list-style: none;
}
width: 200px;
height: 200px;
overflow: hidden;
margin: 0 auto;
border: 1px solid #999999;
}
width: 100%;
display: block;
position: relative;
top: 50%;
transform: translateY(-50%);
}
</style>
<div id="content">
<ul>
</ul>
</div>
然后，编写js代码：
let imageArr = [{
img_url: "http://www.lexilisi.com/Uploadpth/c45cc952-dcb7-493c-a171-357d1b820b37.png",
}, {
img_url: "http://xiaobanyou.com/static/images/xby_user_3.jpg",
}, {
img_url: "http://xiaobanyou.com/static/images/xby_user_4.jpg",
}, {
img_url: "http://xiaobanyou.com/static/images/xby_user_5.jpg",
}, {
img_url: "http://xiaobanyou.com/static/images/xby_user_6.jpg",
}, {
img_url: "http://xiaobanyou.com/static/images/xby_user_799.jpg",
}];
const lazyLoad = (src) => {
//加载loading动画
let _image = new Image();
_image.src = './loading.gif';
//加载需要展示的图片
let image = new Image();
image.src = src;
//加载成功，将loading图片路径改成对应的真实路径
image.onload = _ => image.src = .currentTarget.src;
//加载失败，将loading图片路径改成默认图片路径
image.onerror = _ => _image.src = './error.png';
return _image;
}
let _content = document.getElementById('content');
let _ul = _content.getElementsByTagName('ul');
imageArr.forEach(value => {
let _li = document.createElement('li');
let _p = document.createElement('p');
let _image = lazyLoad(value.img_url);
_p.appendChild(_image);
_li.appendChild(_p);
_ul[0].appendChild(_li);
})
展示效果如图：
每个图片都是异步加载，加载完成后：
一. 通过router-link进行跳转
<router-link
:to="{
path: 'yourPath',
params: {
name: 'name',
dataObj: data
},
query: {
name: 'name',
dataObj: data
}
}">
</router-link>
二. 通过编程导航 $router进行路由跳转
1.路径后拼接参数
通过路径后直接拼接来传递参数
getDescribe(id) {
// 直接调用$router.push 实现携带参数的跳转
this.$router.push({
path: /describe/${id},
})
对应路由配置
注意:此方法需要修改对应路由配置,需要在path中添加/:id来对应 $router.push 中path携带的参数。
{
path: '/describe/:id',
name: 'Describe',
component: Describe
}
获取传递的参数值
this.$route.params.id
本文整理了人工智能行业中设计师需要理解的一些名词和内容。
一方面供自己学习思考，另一方面也希望能帮助到准备投入到人工智能行业的设计师。之前听有的朋友讲到，觉得自己没有计算机背景，有点害怕进入到这样一个领域来。
没有计算机背景没有关系，只要对这个行业充满好奇，一个个的问题解决掉，在你眼前的迷雾都会散去的。
先简单举几个人工智能在生活中有在应用的例子：
像现在有的超市寄存物件，开箱时采用的人脸识别；像家里购置的智能音响，时不时还能跟它聊上几句；像接听到的银行电话（是的，对方可能是机器人噢）；像在淘宝上咨询的客服小蜜；像你手机里的虚拟助手….等等这些都是人工智能在生活中的应用。
人工智能在设计领域的应用也相当广泛，具体可以看这篇文章：
这几个例子是在生活中比较普遍能接触到的，实际人工智能应用的领域还在不断的扩大，我们甚至都无法想象到，未来的生活会是怎样的状态和场景。
在这家公司之前，我做过语音交互类的产品交互设计。当时在定义人与设备进行语音交互时，会是怎样的一个交互场景。从说唤醒词到发出指令，从收到反馈到继续对话。唤醒后等待的时间、结束的规则等等这些。
而现在，我大部分时间是在设计工具，如何让使用者能快速的创建出一个智能机器人。如何让机器人的创建者方便快捷的添加机器人的相关数据和创建出对话场景。
所以在进行这些工具的设计之前，有些名词概念，会需要设计师来了解一下，能让我们更好的理解人工智能的一些原理以及能够让设计师具象化到实际的设计中，甚至能基于此技术/原理来进行相关的创新或研究。
整理内容如下：（内容基于工作及自身理解，如有概念理解错误，欢迎指正）
下面尝试用较易理解方式来解释这些名词：
与机器人进行对话，首先就需要让机器人懂我们说的话，这其中，就需要来关注到自然语言处理，通过自然语言处理技术，能够实现我们与机器之间「无障碍」对话。
我把这三者关系画了张图示，我是以这样的方式理解的
从图中可进一步看出，NLU 和 NLG 是 NLP 的子集，而 NLP 是人与机器沟通中很重要的存在。
涉及到语音就会经常听到 ASR 和 TTS
语音识别（ASR）：将语音内容转为文字
如微信里面，当别人发的语音信息不方便外放收听时，可以转为文字查看
语音合成（TTS）：将文字内容转为语音
如现在很多的阅读软件，支持播放，有的就是利用 TTS，直接将文本内容转为语音播放出来。
我试着将上面提到的 NLP 和 ASR、TTS 组合起来，关系可以如下图所示
当我们说一句话的时候，机器知道我们表达的是什么吗？
意图（Intent）:一个人希望达到的目的，或者解释为想要做什么，他的动机是什么。
如：
槽位（Slot）：可以理解为系统要向用户收集的关键信息。
如：
「买张明天从上海到北京的机票」
上面这句话中，获取到意图（买机票）；提取关键信息 时间（明天）、地点（出发地：上海；到达地：北京）
这些关键的信息就是槽位，当系统获知到这些信息后，就能去执行下一步动作。
还可以这样理解，当我们去银行营业厅办理卡的时候，会填写一张表，表每个要填写的选项，就是一个个的槽位。槽位就是为你服务的人员要从你那收集的关键信息。
实体（Entity）：用户在语句中提到的具体信息
实体这词放在生活中，我们很容易理解，就是实实在在的物体，像桌子、电脑、熊猫等等这些都是实体。
但是在人机对话中，机器理解人的语句内容，会识别出语句中的实体信息（如：地点、人名、歌曲名等），然后进行标记。
那槽位和实体是不是讲的是一回事？只是不同的说法？
我之前有一度陷入这样的困惑中，但其实这两者还是有所区别的。比如，一个实体是数字，但是在语句中，数字将代表不同的含义。
如：
人：有没有10元的鲜花？ 机器人：玫瑰花10元一支 。
这句话中，实体number「10」，但这个 10 在句子中表达的是价格，所以收集到的槽位信息是价格：「10元」
这样说可能还是不太能理解，那我们可以先了解下，在一句表达中，需要进行槽位信息收集，但机器如何知道「买张明天从上海到北京的机票」中，「上海」是城市，并且「上海」是出发地呢？
「上海」这个词会被建立在一个城市实体词库中，这是「上海」能被识别到是「城市」的原因。
其次，通过将解析槽位加入语料中，加以训练让机器学习相关表述结构，来获知该句式中，收集到的第一个城市是出发地，于是把第一个城市填到对应的槽位中。
使用什么工具来让机器知道，这个信息是要提取的信息？
解析器（Parser）：抽取/解析用户语句中的关键信息
上一个讲到实体，这里讲到的解析器则是这么个工具，用来抽取这些信息。比如会有些通用的解析器如时间解析器、城市解析器、歌手解析器等等。
解析器的类型也比较多，如通用解析器、词典解析器、正则解析器、组合解析器等等，这里就不再扩展开讲具体解析器，实在过于复杂了。
命名实体识别（NER）：用来识别具有特定意义的实体。主要会包括像机构、地名、组织等。
是不是发现，解析器和 NER 在做差不多的事情？我是这样理解的，解析器的话是一个更大的存在，其中包括了 NER。解析器下会有不同类型和不同功能的工具来实现关键信息的识别/抽取。
在我们与机器人对话时，一般会涉及到四个不同类型的对话，开放域的聊天、任务驱动的对话、问答（FAQ）和推荐。
上面是在有次分享中提到的，这四个不同类型的对话，在机器人平台中，会需要借助不同的功能模块来实现。
任务对话（Task Dialogue ）：有上下文联系，就像我们要去订票、订餐之类的一段任务型的对话。
我们公司产品中，任务引擎模块就是做这个任务对话的创建，比如，要订机票的场景。用户在这个订机票的场景中，会涉及到的对话内容、流程的设计。
知识图谱（Knowledge Graph）：这个可以理解为可视化关联信息。
比如：查询一个明星的身高、年龄，他的学校、他的女友，他的相关作品，这些基于这个人而构建的信息库，都可以通过知识图谱在做整理。并且在构建时能够做到可视化的了解。
要让机器人知道，它脑子里有货了！
训练（Train）：这个概念可以这样理解，比如你创建了个机器人，但是它什么都还不懂，于是你塞了堆知识给他，这时，它就需要自己训练学习了。训练好了，就能回答你塞的那堆知识里的问题了。
讲到这就忍不住想用这个学习的例子，来简单讲下一般机器人的创建流程。像我们在学校，会经历上课学习新知识-复习温习-考试-整理错题集，以此循环进行。
这个创建机器人的流程也是一样通过知识的导入/创建-训练-测试-优化-上线-优化，以此循环，不断强化机器人，让它越来越智能。
其他：
数据标注：将对话日志中的有价值数据做标注（标记/匹配/关联之类）。
因为人的表达万千，多种表达方式都代表的同一个意思。有时用户说了句话，是语料库中并不包含，于是机器人可能就答非所问了。
Ai 训练师们就可以将这些数据信息标注到对应的问题中去，这样当用户再用同样方式表述时，机器人就能如预期回答了。
讲到标注想到之前在朋友圈很火的你画我猜，谷歌推出的这个小游戏席卷朋友圈。他们用了个如此聪明的做法，其实我们参与其中的做法就是在做数据标注，而且还是主动提供数据的那种。
这也反映了，数据对于机器人的重要性，通过不断的进行数据维护和补充数据，机器人就会越来越理解人，表达也会越来越智能。就跟我们学习一样，不断学习才能够理解其他的含义，甚至当认知能力提升了，看待问题的角度才能不一样。
文章来源：优设
我们在做设计的时候总是会听到，要注意「节奏感」。关于节奏感这个词，大多数人似懂非懂，可能明白它是什么意思，但是在设计中都应该注意哪些节奏感，却还没有一个比较清晰的思路。我们都知道音乐是有不同种类的，有古典音乐，有摇滚音乐等，它们之间的不同，很多时候是节奏给我们带来的感受不同。在设计上也是一样的，掌握节奏感就能控制画面的变化和气质的传达。
先理解什么是节奏感。
我们常说的生活节奏，可以理解为，假如你在规定时间里，你只需要上班和回家两点一线的生活。
但是当你有了孩子还要去幼儿园接送，晚上还要去健身等，这样就是生活节奏加快了。
我们常听到的节奏感其实是来源于音乐的。
不同节奏感的音乐会给人不同的感受，就像音乐1这种，会给你一种平静舒缓的感觉。音乐2这种就会有种比较喧闹、比较活泼的感觉。
说到设计的中的节奏感，从绘画里也可以看出，这是吴冠中的绘画作品，看似很简单的画面，但是这种水流的蜿蜒的感觉让这个画面变得灵动起来。
去掉这些流动的线之后，整个画面就变得很平静了。失去了那种蜿蜒流潺的感觉。
在我们很多图像网站里都用了这种瀑布流的方式，不仅是为了方便不同尺寸的图片的载入，在很多时候这种方式，相对于平铺的图片放置会更让人舒服而不枯燥。
在平面设计里，我们在学习平面构成的时候节奏与韵律是常常放在一起说的。
我们可以看海报去理解，第一张海报那几条鱼摆放的位置是没什么规律的，但是它却能形成节奏感。那么在第二张海报，我们能清晰地感受到它的节奏与韵律的变化。所以节奏是有规律或者无规律的变化的，韵律是有规律的变化的。
包括去百度百科查找相关信息也是表达类似这样的意思。
一个版面里的节奏影响是多方向面的，有文字编排、色彩搭配、图像处理等。
今天我们要讲的是文字编排里的节奏感。在文字编排上我们为什么要掌握节奏感呢?
我们在看一些纯文字的书籍的时候，很容易犯困。
这就是因为书籍的文字编排几乎没有节奏感，所以相对来说是枯燥的。
有一些不同的书籍设计或者杂志会在里面加入图片、对文字与版式进行处理，使它们变得有变化性，就会调节这种节奏感。让画面阅读不再枯燥。当然了，画面左边是因为大量的信息的传达不适合做过多的变化，否则阅读过程会有阻碍。这也是根据不同种类的信息从而把握不同节奏感的结果。
所以在这个画面里标题是节奏感比较强的，在保证阅读性的同时也做到了装饰性。那么由于下方信息量比较多，这些文字又需要被快速传达，所以这些文字的编排就会趋向于阅读性。
掌握文字编排的节奏感对画面传达的气质的影响是非常大的。就像这两张海报，它们的背景图片气质是很像的，都是天空的大留白，但是，完全不同的文字编排，就让第一张海报表现出活泼可爱的感觉，第二张海报表现出平静安静的感觉。
我们可以理解为，随着几乎没有节奏感到节奏感比较弱再到节奏感强，它的画面是可以呈现出由静止到舒缓再到动感的。
在文字编排中有非常多的对比，是一个非常大的系统，今天我们主要去梳理一下文字编排时的一些影响因素，以及在文字编排上一些需要注意的细节。（我们今天会讲这些影响我们文字编排的节奏感，字体种类、大小、长短、位置、疏密、颜色、组合形状和方向。）
文字种类就是我们对文字的类别进行分类，在字体种类里一般分成了衬线体与非衬线体，但是在中文里，我觉得主要由这五大类组成，分别是黑体，宋体，楷体，圆体与书法体。
包括字体家族里的不同字重。
不仅是这样，对于同一个字体我们还分常规体、窄体、扁体。
一段文字只选择上面的所说的变化就已经可以有很多种了。我拿了一段数学公式装❌。这里我们算出有 105 种。所以文字编排时稍微不注意就会有太多的变化性。
更何况我们经常在版面里加入其他国家语言的文字，这些都会影响文字的节奏感。
所以我们要学会控制这种节奏感，一般来说我们日常比较常用的就是黑体配无衬线体，宋体配衬线体。并且在字重上我们都要注意协调。尽量使它们看一起是一样的粗细度。
不同的字体搭配起来是有一定难度的。这种节奏感就好像不同风格的音乐的结合，它们之间的衔接与融合会比单纯的某一种风格的音乐制作起来更难。
这种不同类型的文字的搭配，对于排版和运用的能力有一定要求，运用不好就会传达不了画面的气质与信息。在电商里的反例是比较多的。在我看到的这张图里，它同时用了无衬线体与衬线体的结合，画面没有清晰呈现出准确的气质。大家可能会说它是简约高贵风，但是这是一个大范围，在简约高贵里有现代的高贵，有复古的高贵，还有一些与众不同的高贵等。
我们尝试把左边的衬线体换成无衬线看看。是不是有种现代都市的气质？
如果都统一成衬线的话，是不是一种精致的时尚感就出来了呢。统一这种文字的种类能更加精准地传达画面的气质。
刚刚我们也说到字体的混搭会产生混乱和怪异感，要慎用，但是如果我们的画画就需要这种感觉呢，当然就可以用这种特性来故意营造一种怪异感，当画面的字体种类越多的时候，所营造出来的节奏感会更强烈。
我们看这个画面也是这样的，周围的很多图形和各种各种样的字体类型让这个画面变得搞怪活泼。
就算去掉了周围的图形，文字这传达出来的搞怪感觉也依然存在。
接下来我们用这个文案来做一个案例演示下，由于平时很多都是用同一种类型字体搭配，那么这一次就挑战一下，我就打算做一稿用不同类型字体的版面。看看会有什么样的效果。
首先我在版面中划分版块，填上相应的文字，在这里可以看到，我同时用了衬线与无衬线的字体，还用了具有手写性质的字体。不仅如此， 所有的文字我都用了窄体而不是常见的常规体来增强这种怪异的节奏感。
最后加上一些图形处理一下负空间，这个案例就完成了。
为了减少影响，我把图片遮住单看文字组，我把这些字体都变成黑体了，对比可以发现，还是原来的文字组更有搞怪奇异的节奏感。右边这个因为板式与图形的完整性使得它看起来并没有很大的问题，但是它的确是缺少了像左边这种古典与现代结合的节奏感。
文字的大小节奏可能会有人理解为这样，但是我们一般不会这么做。
我们更多地是用在标题与内文的对比。
节奏变化比较大的文字组会给人一种冲击力，让人无法忽视标题的存在，就好像我在大声告诉你一句话的感觉，会比较强硬与喧闹。
节奏比较平缓的文字组表现出一种精致、安静的感觉。
我们把它们放到画面里看下，这个标题与内文的对比很大，并且在这个版面中占据一定的大小，这种时候有没有觉得这个画面呈现出一种，好像在播放新闻的感觉，好像在说这个小岛有什么重大新闻一样。
但是当标题变小时，整个画面呈现出比较平缓的节奏感，很符合画面传达出来的安静舒缓的感觉。
这种方式很多作品都有，这种标题和内文的对比，或者说是文字在版面的占比比较大时，就可以体现出这种很强烈的节奏，让人很难忽视这些文字内容。同时画面也更容易传达出一种力量感。
往往想要营造这种安静感的时候，比较注重画面整体的感觉，就不需要太多的文字变化，甚至为了区别文字层级而需要有的文字大小，也尽量地在减少对比。
我们都知道音频都是这种长短不一的声波图，因为这种长短不一的变化感受会给人带来节奏感。
所以也有以这种形式来编排文字，表现节奏感的系列广告作品。
它比较经常出现在居中对齐的文字组上。
但是我们要注意的是，你会发现很少情况在两个极端之间直接过度，比如说一长一短。
在没有文字大小的对比情况下，如果文字的长短对比太小，我们先不说节奏感，我们可能会有种疑问，它到底是想两端对齐还是居中对齐的呢？所以这种两端模棱两可的情况最好避免。不能模棱两可，对比太大又会不够美观，所以我们去创造节奏感的时候要注意这些问题。
毕竟它不是让人阅读时间很长的文字，所以我们就需要调节这种节奏让它看起来美观而且不枯燥。
这是我随便在购物网站截图的，你会发现它们的文字编排都很注意我刚刚说的短长短的节奏感。
我找了两张都是黑色背景并且配图比例也差不多的海报作对比说明这个问题。
因为图像的干扰我就同时去掉了图片，还有也把右边红色的字变成了白色，它们之间的对比变得清晰了，左边的文字规划在版面中显得更有活力，右边版面的文字集中在一块，就像我们前面提到的小说书籍内页一样。这样的文字编排在阅读上会比左边的缺少节奏感。但是我在这里要说的一点是，左边海报本身的图像没有右边的有冲击力与活力，所以我们如果要真正做对比的话。
用左边的图像放置在两个不同的版面来作对比，这样大家应该能感觉到差别。左边的版面虽然没有表现特别强的节奏感觉，但是至少版面不是特别压抑的。至于右边的我们会觉得很沉静，配合这种黑色的背景比左边更压抑。这就是文字编排在版面的影响。
不仅是文字组之间，标题的有意放置不同的位置就可以营造这种节奏感，是因为它依然可以使得我们的阅读视线发生变化。
比较随意编排的文字组也会比，比较拘谨正式的文字组看起来更有节奏、更活泼。
接下来我们用案例来演示。
首先选择纤细的宋体会比较符合这个画面的气质，很多人可能把文字组放在画面四个角就算大功告成了，但是这个画面既没有一个亮点吸引我们，而且画面里的元素都非常得散，没有体现出一点活泼的味道。
这个时候我们可以效仿刚刚我们看到的标题的做法，拉开距离，调整位置让它有上下浮动的节奏感，包括文字上我都做了一些切割移动让它们活泼，再加上线条让它们更有联系感。这个画面就会比刚刚活泼多了。
案例完成。
左边紧凑的文字字距会呈现出一种张力，一种急促的节奏，营造一种紧张感。右边宽松的字距画面会更缓和，不同的字距在版面中有宽松对比，也营造出了一种节奏对比。不会感到枯燥。
很多人可能没太去注意这些文字编排的小细节，这两版里哪一个更符合平缓的节奏感呢？答案是下面这个。第一张这样做也没错的，但是我们想让文字也能相应地呈现出一种透气感的话，第二张的会更加符合。
颜色的问题大家应该了解了很多了，这里就简单提一下，就像我们在营造一种氛围的时候选择的气球颜色都是非常重要的，我们选择饱和度比较高，颜色种类比较多的气球的时候，是想营造一种热闹活泼的感觉的。但是如果想营造一种浪漫安静的氛围时就用了很多白色或者淡色调的颜色。
就像这个 banner 一样，中间不同颜色的文字为这个画面增加了很强的节奏感。变得很活泼。
很多时候我们不需要太强的节奏感，所以我们经常给文字做一点的颜色变化，来让画面更鲜活。就像这个 banner，如果它没有了左边那个粉色的颜色的跳跃。
这个画面就会变得很沉静。
如果，画面文字的粉色变多，它的节奏感又会变得更强。
不仅是因为这个颜色本身的跳跃性比较高，而且也是因为颜色的不停切换导致这种节奏感的增强。所以不同颜色的占比也是需要考虑的。在这里主要是因为模特身上没有玫红色，所以左边不适合用过多的玫红色，用全黑都会显得很沉闷，所以这里选择用一次玫红色让这个画面鲜活。
我们在这些变化的图形中替换两个不同形状的图形，我们可以感觉到替换后的图形里的变化会更多，呈现出来的活泼性更强了。当画面中的不同形状更多，就会趋向于一种混乱。
用不同的图形在版面里，有区分不同信息的作用，但是这种方式也是增加版面节奏感的一种方式。在很多促销的传单会经常看到。
这个画面没有人物图片，仅仅是通过文字的编排就能传达出这种热闹的节奏感。
除了颜色本身的热闹性，其中比较大的影响因素。就是文字在各种不同形状里的编排，让这个画面呈现出热闹的氛围。
随着方向变化越来越多，画面会趋向于更有动感的的节奏。但是节奏感觉也是有度的，一旦变化性很多，那么这个版面就会显得杂乱。我们也可以简单理解为乱的元素的占比决定着你画面呈现出来的节奏感的强烈。
像第一张海报一样，这种有点古老的作品我们一般会认为是比较正式和比较严肃的，但是这些方向不一的文字编排，向我们说明了这不是一个严肃的展览，而是具有活泼的属性，从而吸引不同的观看群体。包括右边这个海报的文字编排都让这个画面的节奏感变得更强了，与人物夸张的肢体语言也相呼应。
倾斜的文字编排在电商里是出现得比较多的，微微倾斜文字就可以强调这种活泼的节奏感。
我们来看一个比较明显的例子，画面只有一个黄色的色块和文字编排以及一个不规则的图形，但是这个画面呈现出来的感觉却很活泼。
其实去掉这图形，也并没有影响原有的气质，是因为文字的编排的方向性的对比让它的节奏感增强了。
那么说到这里其实今天的内容也就结束了，这次的案例就给大家演示下怎么用这些知识去做一张海报。
首先我们要分析这个画面，图片本身是比较具有节奏感的，因为不是我们平常看的袜子的视角，而且人物有一种运动过程的动势。
这个负空间非常不规则，如果文字在这个画面负空间上直接加字的话，可能就会显得比较乱，但是我们又要做出迎合这个图片的节奏但是不乱的画面，应该怎么做呢？
首先不采取直接在图上加字的方式，把图片缩小，再添加一个深色的底色，这样这张图片和这个画面里就是一个整体了。
由于我们要压住图片的节奏感，不让它太乱，所以我在周围的空间编排文字是呈现一个既有文字层级关系，但是整体是呈现矩形的文字组。现在这个画面看起来的确不会乱，但是文字还是少了和图片活泼气质契合的节奏感。
分析一下这个画面，是宇宙系列的感觉，所以我就加入了环形的文字，然后再加一点与图片呼应的颜色。这个画面就会比之前更和谐。在做的过程通过减少变化与增加变化让画面逐渐接近自己的预期。
总结一下今天我们讲的，我们今天讲的是文字编排中的节奏感，在一开始，我分别给大家讲了从生活节奏、音乐节奏、再到设计的节奏去理解什么是节奏感，然后我还讲了关于文字节奏感对于画面的重要性，无论是对信息的传达还是对气质的表现，它的影响是非常大的。最主要的部分，我讲了影响文字编排的节奏都有哪些因素，比如文字类型、大小、方向、长短、文字组合形态等。把握自己要传达的节奏，才能正确传达信息。大家也可以用这种方式去看作品，分析它的节奏感是通过什么方式形成的。久而久之，对节奏感的掌握就会更加熟练与精准。
文章来源：优设
卡片式设计对于我们来说并不陌生，从设计类网站上或市场上的一些 APP 中也会看到很多的卡片式设计的案例，卡片式设计也是 UI 设计中最常用的方式之一。
最近在新项目的设计中也尝试使用了卡片式设计，结合实际项目中的一些思考进行总结并归纳出一些卡片式设计的小知识点。同时希望通过本次的总结进行知识沉淀，以及跟大家一起探讨下卡片式设计。
在现实生活中的卡片式设计可以说是无处不在，例如身份证、交通卡、银行卡、名片、便利贴、扑克牌、游戏卡……诸如此类的生活常见品都是以卡片的方式存在，其共同点都使用一个容器承载着内容，并且具有「便携性、信息简洁和相对独立性」。
在项目设计之初我分析了一些使用卡片设计的 App，并且从中整理总结了几个较为常见的卡片式设计的使用场景。
1. Feed流
卡片式的 feed 流设计是一种非常常见的设计，早在前几年 Facebook、Google+ 等产品就使用了这一方式，Feed 流作为一种长内容的媒介，用户需要长时间的滑动看内容并筛选有效信息，卡片式设计很好的解决了内容与内容的区块分隔，让用户在长屏幕滑动中依旧可以很好的明确识别每一块的内容。
实际案例-淘宝微淘
2. 瀑布流设计
瀑布流的出现让单屏区域内显示更多的内容，而内容较多的情况下，使用卡片式设计可以较好的对内容进行了区域划分，让上下左右的内容从整体中具有相对独立性。
实际案例-Pinterest
3. 左右滑动组合型内容
卡片式设计具有较强的层次感，相比于平铺更能呈现内容可滑动的感受，并且块状化的设计让内容具有较高的区域分割感。
实际案例-QQ音乐
4. Tips提醒
作为非界面固定内容，卡片式设计可以让 tips 提醒设计变得更自由，在符合用户体验的基础上，它可以出现在任何我们想要它出现的位置。
实际案例-淘票票会员提醒
5. 结合手势的单块可互动内容
若页面中有且只有一个主内容，并且需要用户进行快速筛选时，可考虑这种结合卡片式设计与手势设计的方式。大大增强了用户对于设计的体验感知和丰富视觉表现。
实际案例-探探首页
6. 卡券类设计
卡券类的设计实际上是一种物化映射的过程，我们在现实中看到的卡券造型，结合卡片式的拟物化设计，让用户在屏幕上可以更直观的感知，提升了设计的代入感。
实际案例-京东领券中心
7. 集合型功能入口
集合型功能入口往往会有多个入口，使用卡片式设计让入口形成一个区域整体，可以做到既统一又相对独立。
实际案例-淘宝微淘关注账号
8. 个人主页顶部内容卡片
个人主页的设计往往会在氛围上营造沉浸感，卡片式的设计可以把关键信息进行概括收归，让原本单个的内容形成一个整体。
实际案例-美团外卖会员
基础的卡片设计规则，相信大家在一些系统级别的设计指导规范中也或多或少都能了解到，不同平台的规范差异其实不会有太多本质性的区别，更多的是处理技巧或方式的差异，而每个设计师对其理解的角度也会具有一些差异化，这里分享下我对于卡片式设计的一些基础想法。
同样的卡片设计，不同的人做出来的感受可能会有所差别，而表达卡片质感的主要关键点在于：卡片形体、投影深度、卡片颜色对比，我们需要了解这些基础知识点之后，再结合实际的 APP 风格进行设计。
卡片形体
就像图标的图形设计一样，不一样的形体也能表达出不一样的气质，因此在设计的时候我们需要依据整体的风格进行表达。异形卡片的设计，可以让原有方方正正的卡片表达出差异化，从造型上打破一些传统的处理方式，再结合一些 IP 人物元素可以更加直观的表达出具体的内容氛围。
投影深度
投影的视觉效果，会直接影响整体卡片的质感，太深太大的投影会显得整体卡片过于厚重，太浅太小的投影则显得过度生硬，因此合理的数值比例可以让卡片看起来自然有质感。在项目中我常用的一组数值规律是 1:2 或 1:3，例如 Y 轴偏移 10px，模糊度则设定为 20 或 30px，这样成比例的数值出来的效果会较为自然，如下图：
卡片颜色对比
卡片与背景的颜色对比会影响这卡片的整体质感，在设计时我们需要把握好卡片与底色的对比，不同的明暗对比出来的质感也会有差异。这里有两点建议：
在使用卡片式设计时，经常会纠结边距的设定，宽边还是窄边？多少像素更为合适？我经常会带着这种疑问去设计。
基于内容的简单规则
卡片式设计作为设计的表现形式，最终是为了承载内容，因此边距的宽窄也需要依赖于实际内容的判断。结合我在项目中的尝试分享以下几点：
多窄少宽
卡片内容较多是使用窄边距，让卡片具有足够的空间来展现内容，内容较少则可以考虑采用宽边距来打造整体的视觉空间感，如下图 app store 和淘宝的设计对比。当然这只是一个建议，实际还得具体问题具体分析。
再如一些瀑布流、宫格、横滑模块较多的 APP 设计亦是如此，在内容较多的情况下会把边距压缩到最小的合理间距。
内外成比例
以最外边为基础值往里设计，间距以固定比例进行缩减，虽然没有删格来得规范，但也可以让设计变得有迹可循。
基于删格
删格系统解决了一些基础的板式问题，有助于提升设计的规范性，让设计更加有迹可循。在设定卡片式的边距时可以适当应用删格系统，让边距与内容形成固定的关系，这样可以帮助整体的卡片设计更加具有细节和规则。
标题的设定主要考虑以下几点：1.是在卡片内还是卡片外；2.标题的字号设定多少更合适；3.标题是否加粗？
卡片内或外的对比
在项目设计中让我较为纠结的是：标题应该在卡片内还是卡片外？通过了一些案例的尝试之后，我总结了一个规则（需要依据内容的形态而进行设计）：当卡片内容是独立的模块或模块中只有一个大标题时可设定在卡片内；当卡片内容是以组合呈现或者具有延续性内容时设定在卡片外，形成最外层的主标题。
标题的字号设定
标题主要作用为 2 点：1.简短说明每个模块的内容；2.让用户在长页面浏览中起到引导、定位的作用。
通过一些尝试发现：1.当内容较少时，并不需要太大的字号即可起到标题的作用；2.当内容较多时，较小的标题字号则容易被沉入内容中，让用户在浏览的过程中难以发现，而导致信息获取缺失；3.建议标题与正文字号大小差异在 6-10px，这样可以更好的拉开差异，让标题更具有标题感。
字体是否加粗
常规思维下我们都会对标题进行加粗，我在实际中的经验得到的总结是：需要看手机系统或不同厂商的机型。我在项目之初都对标题进行了加粗，但后续在跟进还原时看到的效果并不理想，特别是 Android 的机型上，因为我们使用的是系统默认字体，android 系统很多字体并未对系统进行优化，而是使用微软雅黑，微软雅黑在android 系统上再加粗，就会显得整个系统的外轮廓特别粗糙，最后我们依据不同的机型进行了差异化的选择。
圆角的设定实际上没有太多的原则问题，只要符合整体的风格调性即可。当然不同的圆角也能表达出不同的质感，大圆角表达柔和、小圆角表达硬朗。
圆角的规则设定
以卡片的圆角作为基础的参考值往内推算整体的圆角使用规范，卡片与卡内的元素形成合理的比例规则，而非随意根据「经验」进行设定。
圆角大小差异对比
大小的差异化呈现出不同的视觉感受和风格差异，我们在设计时更多需要考虑我们设计的产品风格或气质是适合大圆角还是小圆角，而非依据一些设计网站上的流行趋势。因此基于不同的风格或者实际内容场景下进行设定才更为合理。
卡片式设计相比拉通式设计更需要考虑设计中的透气感。在常规情况下，对内容边距及四周边距进行调整，让内容之间具有较好的空间呼吸感，从而让设计得到留白的效果。如下图对比案例，在基础删格不变的情况下，每个间距都在原有基础上扩大了12px（接近 1.33 倍），从而让内容具有较为舒适的宽度进行阅读
选择某一种设计方式的重点在于我们了解这种方式的优点，并且可以把这些优点融合到我们的设计当中。在项目设计中，我总结了几点卡片式设计的优点。
1. 优化模块化，提升内容区域感
模块化的设计也是我们日常中会应用到的方法，结合卡片式的设计可以让模块化的规则变得更加简单，增加了模块之间的可复用性和延展性。而当内容较多的情况下，使用卡片式设计可以有效直接的形成区域分隔，从视觉感知上就对内容进行了分隔，提升用户获取信息的效率。
2. 提升内容独立性
在组合型的内容设计上，使用卡片式设计可以让每个小块内容呈现相对独立的展现特性，结合模块化的设计，可以在一大片关联的内容中，做到既统一又相对独立。
3. 增强视觉空间感
卡片式的设计可以提升整体设计层次感，通过投影、前后颜色的设定，让内容与背景之间产生视觉空间感。
4. 增强视觉表现力
在设计中我们可以对卡片进行异形设计，用来达到我们想要的风格表现。当然在一个页面内尽量不要太多，尽量使用页面中的首个卡片进行差异化处理，让整体表现出一点不同即可。
5. 增强可点性
卡片式设计产生的空间感，让每个模块更加突出，相比扁平式的处理方式，卡片式从视觉感官上会较为突出，从感官上更具可点击感知。
任何一种设计方式都会有其利弊，最终选择某一种其实不过就是当下最适合而已，而在尝试中我也总结了几点卡片式设计存在的一些缺点，当然只是个人的思考而已。
1. 横向空间利用率降低
卡片式设计的存在左右边距，因此在有限的屏宽内内容横向区域相比于拉通式设计有所减少，在内容较多的情况下可以适当调小卡片左右边距。
2. 避免过多的层级
从整体来说，卡片式的设计本身就是增加了基础背景的层级表现，其视觉层级相比拉通式更为丰富，因此不建议在卡片上再二次叠加块状式设计，避免造成层级复杂。在项目中也会遇到内容层级需要多层级的表现，从中总结了2种方式：
3. 不适合长文或内容多的表达
若在设计上使用了卡片式的设计风格，但在一些长文表现的界面建议去除卡片。长文章的页面更强调阅读的沉浸感，用户需要更多的专注于文字，这时候无边的体验更适合。
4. 把握好界面的分区，避免过于拥挤的排版
卡片设计具有独特的视觉空间感，但卡片与卡片之间也会有分隔，因此在设计时更应该对内容进行归纳，避免产生过多的小块卡片而导致排版过于拥挤、凌乱或者内容不够宽度展现。
无论是卡片式或者拉通平铺的方式，其最终的目的都是为了服务于内容，我们在做设计的过程中只是选择适合于呈现我们内容的一种方式。根据具体的内容情况给出合理/合适的设计判断才是我们需要不断提升的关键点，切莫流于形式而忽略了内容设计本身的重要性。
文章来源：优设
蓝蓝设计的小编 http://www.lanlanwork.com
