TML是超文本标记语言。

web标准是由W3C和其它标准化组织制成集合。

web标准的构成

结构（对网页元素进行整理和分类-HTML）

表现（设置网页元素的版式，颜色，大小等外观样式-CSS）

行为（模型的定义及交互的表现-JS）

HTML常用标签

加粗:<strong>和<b>

倾斜：<em>和<i>

删除线：<del>和<s>

下划线：<ins>和<u>

<div>分割分区<span>跨度跨距

图片标签<img/>

属性: src图片路径

alt替换文本，图片无法正常显示

title提示文本，鼠标放到图像显示

width宽度，height高度（只需要修改其中一个）

border边框（无需单位直接写数值）

注意：

①图像标签可以拥有多个属性，必须写在标签名后面

②属性之前不分先后顺序，标签名与属性，属性与属性之间需要空格分开

③属性采取键值对的格式

相对路径：以引用文件所在位置为参考基础

（同一级路径，下一级路径/，上一级路径../）

绝对路径：从盘符开始的路径（\）

常用属性

img ——vspace垂直边距 ，hspace水平边距 align对齐

details,summary，鼠标点击时显示或隐藏

mark 文本中高亮显示，和strong相似

cite 用于引用标记，斜体显示

draggable true选中后可以拖动操作

font定义 font-style font-weight font-size/line-height font-family 顺序不能改变

word-wrap break-word长单词或url地址自动换行

letter-spacing字间距

word-spacing单词间距

line-height行间距

text-decorantion文本装饰unline下划线，overline上划线，line-through删除线

text-indent 2em 首行缩进两个字符

white-space空白符处理 pre

box-sizing:content-box当widthh和height的时候不包括margin和panding

更换图层位置，z轴偏移z-index:-10

align-items:center居中对齐

align-self:center

超链接标签<a>

href链接目标地址

target链接页面打开的方式（_self当前窗口打开,_blank新窗口中打开方式）

外部链接，内部链接，空链接，下载链接，网页元素链接，锚点链接（快速定位到页面的某个位置- 添加id属性）

去除超链接样式:text-decoration:none

特殊字符

空格符 &nbsp;

小于号&lt; 大于号&gt;

表格标签

align对齐方式

bolder表格边框

cellpadding单元格与内容之间空白

cellspacing单元格与单元格之前空白

合并单元格：rowspan colspan

列表标签

无序列表：ul li

有序列表：ol li

自定义列表：dl dt dd

表单标签

完整表单：表单域<form>，表单控件，提示信息

<form>

——action（指定接受并处理表单数据的服务器程序的url地址）

——method（get/post设置表单数据的提交方式）

——name（指定表单名称）

<input>输入元素

type属性：button（点击按钮）checkbox（复选框）file（输入字段和“浏览”按钮）hidden（隐藏输入字段）image（图片形式提交按钮）password（密码字段）radio（单选按钮）reset（重置按钮）sumbit（提交按钮）text（单行输入字段，默认20个字符）

name属性：（相同的名字——单选框和复选框）区别不同表单元素

value属性：定义input元素值

checked属性：页面首次加载是否选中

maxlength属性：输入字段的最大值

<lable>标签

用于绑定一个表单元素，当点击<lable>标签内的文本时，浏览器会自动将焦点转到或者选择对应的表单元素上，用来增加用户体验。

<lable>标签的for属性与相关元素的id属性相同

<select>下拉列表元素

-<option>

-selected="selected"默认选中

<textarea>文本域

-cols rows （每行每列字数）

新媒体托管/设计/咨询服务：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，该看哪些书？》介绍了一部分与代码排版有相关性的图书。当然如果要选择更垂直领域的教学材料，欢迎购买我们最新发布的图书《硬核运营》，它可以完全围绕新媒体排版，帮助一个文科生走向高阶新媒体排版▼