|
除了干货，其它什么也没有
|
|
职场
|
数据
|
新媒体
|
设计
|
极客
|
新媒体托管/设计/咨询服务：021 37218818
各位文科出身的微信运营人们，你们好。现在已经是 8102 年，微信公众平台的红利早已迁移到交互式互动图文、小程序、H5 营销等牵涉一定代码基础的领域。
文科生可以学好吗？无需怀疑，JZ 的创始人之一计老师出身于
复旦大学思想政治教育专业
，所以请你相信——
文科生也可以轻松驾驭微信 H5 排版。
文科生也可以轻松驾驭微信 H5 排版。
文科生也可以轻松驾驭微信 H5 排版。
你缺少的仅仅是一个
学习路线
的指导，和你的一点
耐心
。接下来，我们来了解一下具体的进阶办法。
所谓交互式图文排版，本质牵涉前端层叠样式语言。这种语言直白具象，词汇量不会超过大学四级考纲。只要你细心阅读，就能完全理解这种语法描述的信息。
学习古诗文的时候，通常会给文章划分一些定性的层次。比如哪里起兴，哪里借景抒情。HTML 标签的作用就是告诉编辑器：再哪些地方划分层次，这些层次定性为什么。
假如我们在第三方编辑器里输入一些文字，点击 HTML 模式，可以看到我们输入的文字被一个
和一个
包裹住了
▼
元
和
就是 HTML 标签。也就是说， HTML 标签告诉浏览器，
「新书《硬核运营》已开始预售」这段文字在一个层次里，这个层次的名
字是 p 。p 是英文 paragraph 的缩写，这个层次的性质就是一个段落(paragraph)。
编辑器就是这么傻，如果你不告诉它这是一个段落它永远也不知道这是什么。
HTML 标签有非常多，每个标签都有不同的含义。对于理科生来说记住所有的标签简直就是灾难，文科生反而更有优势。
如果你不想记住太多，在工作中 90% 的情况会用到以下 5 个：
: (paragraph) 定义一个段落
: (section) 定义一个章节
：(span) 定义一小段文字
: (break) 定义一次换行
![]()
: (image) 定义一张图片
注意：某些标签是可以嵌套的，比如你可以在一个
里加好几个
。至于具体的潜逃规则，可以阅读《
微信高级排版——CSS盒模型
》。
如果你想学习更多 HTML 标签，可以去 w3school 的官方网站查阅（很全），学习重点就是记住标签表达的含义：
中文版网址：w3school.com.cn
英文版网址：w3schools.bootcss.com
打开一个可以编辑 HTML 代码的第三方编辑器（如：i排版/135/新榜编辑器），选择一个样式，选择 HTML 模式，我们只需要关注 HTML 标签和
引号内的内容。
这是我截取的部分代码，试着读一读
内的内容，你会发现它比四级英语词组还要简单明了，比如 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 代码
▼
学习优秀账号的优雅代码书写格式，同时研究这些账号的视觉设计，培养良好的排版审美，研究高阶玩法。
