除了干货，其它什么也没有 | ||||
职场 | 数据 | 新媒体 | 设计 | 极客 |
新媒体托管/设计/咨询服务：021 37218818
各位文科出身的微信运营人们，你们好。现在已经是 8102 年，微信公众平台的红利早已迁移到交互式互动图文、小程序、H5 营销等牵涉一定代码基础的领域。
文科生可以学好吗？无需怀疑，JZ 的创始人之一计老师出身于复旦大学思想政治教育专业，所以请你相信——
文科生也可以轻松驾驭微信 H5 排版。
你缺少的仅仅是一个学习路线的指导，和你的一点耐心。接下来，我们来了解一下具体的进阶办法。
复习一下大学四级词汇
所谓交互式图文排版，本质牵涉前端层叠样式语言。这种语言直白具象，词汇量不会超过大学四级考纲。只要你细心阅读，就能完全理解这种语法描述的信息。
像读古文一样读 HTML
学习古诗文的时候，通常会给文章划分一些定性的层次。比如哪里起兴，哪里借景抒情。HTML 标签的作用就是告诉编辑器：再哪些地方划分层次，这些层次定性为什么。
假如我们在第三方编辑器里输入一些文字，点击 HTML 模式，可以看到我们输入的文字被一个 <p> 和一个 </p> 包裹住了▼
<p>元和<p>就是 HTML 标签。也就是说， HTML 标签告诉浏览器，「新书《硬核运营》已开始预售」这段文字在一个层次里，这个层次的名字是 p 。p 是英文 paragraph 的缩写，这个层次的性质就是一个段落(paragraph)。
编辑器就是这么傻，如果你不告诉它这是一个段落它永远也不知道这是什么。
HTML 标签有非常多，每个标签都有不同的含义。对于理科生来说记住所有的标签简直就是灾难，文科生反而更有优势。如果你不想记住太多，在工作中 90% 的情况会用到以下 5 个：
<p></p>: (paragraph) 定义一个段落
<section></section>: (section) 定义一个章节
<span></span>：(span) 定义一小段文字
<br/>: (break) 定义一次换行
<img/>: (image) 定义一张图片
注意：某些标签是可以嵌套的，比如你可以在一个<section>里加好几个<p>。至于具体的潜逃规则，可以阅读《微信高级排版——CSS盒模型》。
如果你想学习更多 HTML 标签，可以去 w3school 的官方网站查阅（很全），学习重点就是记住标签表达的含义：
中文版网址：w3school.com.cn
英文版网址：w3schools.bootcss.com
像读词组一样读 CSS
打开一个可以编辑 HTML 代码的第三方编辑器（如：i排版/135/新榜编辑器），选择一个样式，选择 HTML 模式，我们只需要关注 HTML 标签和<style="...">引号内的内容。
这是我截取的部分代码，试着读一读<style="...">内的内容，你会发现它比四级英语词组还要简单明了，比如 background-color: rgb(0, 0, 0); 设定了当前 HTML 标签内的背景颜色为黑色。
这些所有的词组都是 CSS 属性，每个 CSS 属性之间都要用分号隔开。试着更改冒号后面的数值或内容，看看原来的样式有什么变化，不能理解的不需深究，你依然可以读懂很多 CSS 代码。
恭喜你，迈入了代码排版的大门。
不会的查字典
你肯定仍有一些 CSS 代码不能理解，此时最好的学习方法就是查字典。这里说的字典是刚才提过的 w3school 官方网站。这个网站对 CSS 的描述简洁、正确，而且囊括了几乎所有 CSS 属性。
以中文版为例，可以直接学习 CSS样式部分，建议以文本 -> 字体 -> 背景的顺序学习，其他的部分很少用到可以暂时搁置。学完以上内容你已经是代码排版新手。
之后可以学习 CSS 框（盒）模型和CSS 定位部分。学完这一部分之后，你已经理解了代码排版最核心的内容，在知识结构上和公司里的的前端开发工程师没什么区别，但要成为高手，你还需要不断的练习。
学完一个阶段之后把一些测试代码复制到微信后台，看看哪些能用哪些不能用，做一个表格，可以在工作中少走很多弯路。
模仿第三方样式
选一些简单的第三方样式逐行分析代码，看看他们是如何实现样式的，然后试着把它们默写一遍，一个简单的样式大概可以在 20min 左右学完，之后研究一些复杂样式。
一般经过20个样式模仿练习过后，你已经是代码排版的高手了。在这个阶段，你几乎可以实现任何你想要的样式。如果有遗忘或者学习中的遗漏，别忘了 w3school 这个神奇的 HTML CSS 词典。
研究顶级账号的排版
在 Chrome 浏览器内打开 JZ 的一篇文章，按下 F12 或者右键点击「审查」，就可以查看所有 HTML CSS 代码▼
学习优秀账号的优雅代码书写格式，同时研究这些账号的视觉设计，培养良好的排版审美，研究高阶玩法。
高级进阶
在《》，相信大家已经了解了排版领域当中 SVG 交互代码是目前行业的巅峰。
你可以先从《教程｜高级 SVG 交互式排版入门指南》开始学习，并且一定要对《微信下 SVG AttributeName 白名单》的代码类型进行细致的逐步测试。之后你或许就有空间可以逐步实现这些作品：
读专业图书
我们曾在《自学H5，该看哪些书？》介绍了一部分与代码排版有相关性的图书。当然如果要选择更垂直领域的教学材料，欢迎购买我们最新发布的图书《硬核运营》，它可以完全围绕新媒体排版，帮助一个文科生走向高阶新媒体排版▼
