TML是超文本標(biāo)記語(yǔ)言。

web標(biāo)準(zhǔn)是由W3C和其它標(biāo)準(zhǔn)化組織制成集合。

web標(biāo)準(zhǔn)的構(gòu)成

結(jié)構(gòu)（對(duì)網(wǎng)頁(yè)元素進(jìn)行整理和分類-HTML）

表現(xiàn)（設(shè)置網(wǎng)頁(yè)元素的版式，顏色，大小等外觀樣式-CSS）

行為（模型的定義及交互的表現(xiàn)-JS）

HTML常用標(biāo)簽

加粗:<strong>和<b>

傾斜：<em>和<i>

刪除線：<del>和<s>

下劃線：<ins>和<u>

<div>分割分區(qū)<span>跨度跨距

圖片標(biāo)簽<img/>

屬性: src圖片路徑

alt替換文本，圖片無(wú)法正常顯示

title提示文本，鼠標(biāo)放到圖像顯示

width寬度，height高度（只需要修改其中一個(gè)）

border邊框（無(wú)需單位直接寫數(shù)值）

注意：

①圖像標(biāo)簽可以擁有多個(gè)屬性，必須寫在標(biāo)簽名后面

②屬性之前不分先后順序，標(biāo)簽名與屬性，屬性與屬性之間需要空格分開

③屬性采取鍵值對(duì)的格式

相對(duì)路徑：以引用文件所在位置為參考基礎(chǔ)

（同一級(jí)路徑，下一級(jí)路徑/，上一級(jí)路徑../）

絕對(duì)路徑：從盤符開始的路徑（\）

常用屬性

img ——vspace垂直邊距 ，hspace水平邊距 align對(duì)齊

details,summary，鼠標(biāo)點(diǎn)擊時(shí)顯示或隱藏

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

cite 用于引用標(biāo)記，斜體顯示

draggable true選中后可以拖動(dòng)操作

font定義 font-style font-weight font-size/line-height font-family 順序不能改變

word-wrap break-word長(zhǎng)單詞或url地址自動(dòng)換行

letter-spacing字間距

word-spacing單詞間距

line-height行間距

text-decorantion文本裝飾unline下劃線，overline上劃線，line-through刪除線

text-indent 2em 首行縮進(jìn)兩個(gè)字符

white-space空白符處理 pre

box-sizing:content-box當(dāng)widthh和height的時(shí)候不包括margin和panding

更換圖層位置，z軸偏移z-index:-10

align-items:center居中對(duì)齊

align-self:center

超鏈接標(biāo)簽<a>

href鏈接目標(biāo)地址

target鏈接頁(yè)面打開的方式（_self當(dāng)前窗口打開,_blank新窗口中打開方式）

外部鏈接，內(nèi)部鏈接，空鏈接，下載鏈接，網(wǎng)頁(yè)元素鏈接，錨點(diǎn)鏈接（快速定位到頁(yè)面的某個(gè)位置- 添加id屬性）

去除超鏈接樣式:text-decoration:none

特殊字符

空格符 &nbsp;

小于號(hào)&lt; 大于號(hào)&gt;

表格標(biāo)簽

align對(duì)齊方式

bolder表格邊框

cellpadding單元格與內(nèi)容之間空白

cellspacing單元格與單元格之前空白

合并單元格：rowspan colspan

列表標(biāo)簽

無(wú)序列表：ul li

有序列表：ol li

自定義列表：dl dt dd

表單標(biāo)簽

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

<form>

——action（指定接受并處理表單數(shù)據(jù)的服務(wù)器程序的url地址）

——method（get/post設(shè)置表單數(shù)據(jù)的提交方式）

——name（指定表單名稱）

<input>輸入元素

type屬性：button（點(diǎn)擊按鈕）checkbox（復(fù)選框）file（輸入字段和“瀏覽”按鈕）hidden（隱藏輸入字段）image（圖片形式提交按鈕）password（密碼字段）radio（單選按鈕）reset（重置按鈕）sumbit（提交按鈕）text（單行輸入字段，默認(rèn)20個(gè)字符）

name屬性：（相同的名字——單選框和復(fù)選框）區(qū)別不同表單元素

value屬性：定義input元素值

checked屬性：頁(yè)面首次加載是否選中

maxlength屬性：輸入字段的最大值

<lable>標(biāo)簽

用于綁定一個(gè)表單元素，當(dāng)點(diǎn)擊<lable>標(biāo)簽內(nèi)的文本時(shí)，瀏覽器會(huì)自動(dòng)將焦點(diǎn)轉(zhuǎn)到或者選擇對(duì)應(yīng)的表單元素上，用來(lái)增加用戶體驗(yàn)。

<lable>標(biāo)簽的for屬性與相關(guān)元素的id屬性相同

<select>下拉列表元素

-<option>

-selected="selected"默認(rèn)選中

<textarea>文本域

-cols rows （每行每列字?jǐn)?shù)）

新媒體托管/設(shè)計(jì)/咨詢服務(wù)：021 37218818

各位文科出身的微信運(yùn)營(yíng)人們，你們好。現(xiàn)在已經(jīng)是 8102 年，微信公眾平臺(tái)的紅利早已遷移到交互式互動(dòng)圖文、小程序、H5 營(yíng)銷等牽涉一定代碼基礎(chǔ)的領(lǐng)域。

文科生可以學(xué)好嗎？無(wú)需懷疑，JZ 的創(chuàng)始人之一計(jì)老師出身于復(fù)旦大學(xué)思想政治教育專業(yè)，所以請(qǐng)你相信——

文科生也可以輕松駕馭微信 H5 排版。

你缺少的僅僅是一個(gè)學(xué)習(xí)路線的指導(dǎo)，和你的一點(diǎn)耐心。接下來(lái)，我們來(lái)了解一下具體的進(jìn)階辦法。

復(fù)習(xí)一下大學(xué)四級(jí)詞匯

所謂交互式圖文排版，本質(zhì)牽涉前端層疊樣式語(yǔ)言。這種語(yǔ)言直白具象，詞匯量不會(huì)超過(guò)大學(xué)四級(jí)考綱。只要你細(xì)心閱讀，就能完全理解這種語(yǔ)法描述的信息。

像讀古文一樣讀 HTML

學(xué)習(xí)古詩(shī)文的時(shí)候，通常會(huì)給文章劃分一些定性的層次。比如哪里起興，哪里借景抒情。HTML 標(biāo)簽的作用就是告訴編輯器：再哪些地方劃分層次，這些層次定性為什么。

假如我們?cè)诘谌骄庉嬈骼镙斎胍恍┪淖郑c(diǎn)擊 HTML 模式，可以看到我們輸入的文字被一個(gè) <p> 和一個(gè) </p> 包裹住了▼

<p>元和<p>就是 HTML 標(biāo)簽。也就是說(shuō)， HTML 標(biāo)簽告訴瀏覽器，「新書《硬核運(yùn)營(yíng)》已開始預(yù)售」這段文字在一個(gè)層次里，這個(gè)層次的名字是 p 。p 是英文 paragraph 的縮寫，這個(gè)層次的性質(zhì)就是一個(gè)段落(paragraph)。

編輯器就是這么傻，如果你不告訴它這是一個(gè)段落它永遠(yuǎn)也不知道這是什么。

HTML 標(biāo)簽有非常多，每個(gè)標(biāo)簽都有不同的含義。對(duì)于理科生來(lái)說(shuō)記住所有的標(biāo)簽簡(jiǎn)直就是災(zāi)難，文科生反而更有優(yōu)勢(shì)。如果你不想記住太多，在工作中 90% 的情況會(huì)用到以下 5 個(gè)：

<p></p>: (paragraph) 定義一個(gè)段落

<section></section>: (section) 定義一個(gè)章節(jié)

<span></span>：(span) 定義一小段文字

<br/>: (break) 定義一次換行

<img/>: (image) 定義一張圖片

注意：某些標(biāo)簽是可以嵌套的，比如你可以在一個(gè)<section>里加好幾個(gè)<p>。至于具體的潛逃規(guī)則，可以閱讀《微信高級(jí)排版——CSS盒模型》。

如果你想學(xué)習(xí)更多 HTML 標(biāo)簽，可以去 w3school 的官方網(wǎng)站查閱（很全），學(xué)習(xí)重點(diǎn)就是記住標(biāo)簽表達(dá)的含義：

中文版網(wǎng)址：w3school.com.cn

英文版網(wǎng)址：w3schools.bootcss.com

像讀詞組一樣讀 CSS

打開一個(gè)可以編輯 HTML 代碼的第三方編輯器（如：i排版/135/新榜編輯器），選擇一個(gè)樣式，選擇 HTML 模式，我們只需要關(guān)注 HTML 標(biāo)簽和<style="...">引號(hào)內(nèi)的內(nèi)容。

這是我截取的部分代碼，試著讀一讀<style="...">內(nèi)的內(nèi)容，你會(huì)發(fā)現(xiàn)它比四級(jí)英語(yǔ)詞組還要簡(jiǎn)單明了，比如 background-color: rgb(0, 0, 0); 設(shè)定了當(dāng)前 HTML 標(biāo)簽內(nèi)的背景顏色為黑色。

這些所有的詞組都是 CSS 屬性，每個(gè) CSS 屬性之間都要用分號(hào)隔開。試著更改冒號(hào)后面的數(shù)值或內(nèi)容，看看原來(lái)的樣式有什么變化，不能理解的不需深究，你依然可以讀懂很多 CSS 代碼。

恭喜你，邁入了代碼排版的大門。

不會(huì)的查字典

你肯定仍有一些 CSS 代碼不能理解，此時(shí)最好的學(xué)習(xí)方法就是查字典。這里說(shuō)的字典是剛才提過(guò)的 w3school 官方網(wǎng)站。這個(gè)網(wǎng)站對(duì) CSS 的描述簡(jiǎn)潔、正確，而且囊括了幾乎所有 CSS 屬性。

以中文版為例，可以直接學(xué)習(xí) CSS樣式部分，建議以文本 -> 字體 -> 背景的順序?qū)W習(xí)，其他的部分很少用到可以暫時(shí)擱置。學(xué)完以上內(nèi)容你已經(jīng)是代碼排版新手。

之后可以學(xué)習(xí) CSS 框（盒）模型和CSS 定位部分。學(xué)完這一部分之后，你已經(jīng)理解了代碼排版最核心的內(nèi)容，在知識(shí)結(jié)構(gòu)上和公司里的的前端開發(fā)工程師沒什么區(qū)別，但要成為高手，你還需要不斷的練習(xí)。

學(xué)完一個(gè)階段之后把一些測(cè)試代碼復(fù)制到微信后臺(tái)，看看哪些能用哪些不能用，做一個(gè)表格，可以在工作中少走很多彎路。

模仿第三方樣式

選一些簡(jiǎn)單的第三方樣式逐行分析代碼，看看他們是如何實(shí)現(xiàn)樣式的，然后試著把它們默寫一遍，一個(gè)簡(jiǎn)單的樣式大概可以在 20min 左右學(xué)完，之后研究一些復(fù)雜樣式。

一般經(jīng)過(guò)20個(gè)樣式模仿練習(xí)過(guò)后，你已經(jīng)是代碼排版的高手了。在這個(gè)階段，你幾乎可以實(shí)現(xiàn)任何你想要的樣式。如果有遺忘或者學(xué)習(xí)中的遺漏，別忘了 w3school 這個(gè)神奇的 HTML+CSS 詞典。

研究頂級(jí)賬號(hào)的排版

在 Chrome 瀏覽器內(nèi)打開 JZ 的一篇文章，按下 F12 或者右鍵點(diǎn)擊「審查」，就可以查看所有 HTML CSS 代碼▼

學(xué)習(xí)優(yōu)秀賬號(hào)的優(yōu)雅代碼書寫格式，同時(shí)研究這些賬號(hào)的視覺設(shè)計(jì)，培養(yǎng)良好的排版審美，研究高階玩法。

高級(jí)進(jìn)階

在《》，相信大家已經(jīng)了解了排版領(lǐng)域當(dāng)中 SVG 交互代碼是目前行業(yè)的巔峰。

你可以先從《教程｜高級(jí) SVG 交互式排版入門指南》開始學(xué)習(xí)，并且一定要對(duì)《微信下 SVG AttributeName 白名單》的代碼類型進(jìn)行細(xì)致的逐步測(cè)試。之后你或許就有空間可以逐步實(shí)現(xiàn)這些作品：

讀專業(yè)圖書

我們?cè)凇蹲詫W(xué)H5，該看哪些書？》介紹了一部分與代碼排版有相關(guān)性的圖書。當(dāng)然如果要選擇更垂直領(lǐng)域的教學(xué)材料，歡迎購(gòu)買我們最新發(fā)布的圖書《硬核運(yùn)營(yíng)》，它可以完全圍繞新媒體排版，幫助一個(gè)文科生走向高階新媒體排版▼