教學 · DOCX → HTML
Word 變成 HTML 時留下了什麼
「保留格式」有兩個意思,你指的是哪個,決定了你會不會滿意這個結果。
結構 —— 標題、清單、表格、強調 —— 會留下。外觀 —— 字型、顏色、邊界、分頁 —— 不會,而這是刻意的選擇,不是缺了個功能。
結構留得住,外觀留不住
一份 .docx 對每個段落存了兩樣互不相干的東西:它是什麼,和它長什麼樣。「標題 2」是它是什麼。16 點 Calibri 加粗、段後 6 點是它長什麼樣。
轉換器讀前一樣,扔掉後一樣。標題 2 變成 <h2> —— 不是一個帶字級的 <p>。放到你的網站上,它就套上你自己的標題樣式,這幾乎肯定是你要的。
另一條路是 Word 自己的「另存為網頁」:幾千行 mso- 樣式,把那一頁原樣複刻出來,事後既改不動也換不了樣式。
標題要套樣式,不是只加粗
這是轉之前唯一值得在 Word 裡做的事,也是輸出好和輸出乾癟的分界。
只是看起來像標題的文字 —— 大一號、加粗、手動調的字級 —— 存的是普通段落。它會轉成 <p>,因為它真的就是段落。字級裡沒有意圖可以還原。
- 01在 Word 裡把游標放到一個標題上,看樣式庫。如果顯示「本文」,問題就在這兒。
- 02改成套標題 1、2 或 3。它的樣子會變;不喜歡就去改那個標題樣式本身。
- 03清單同理:用清單按鈕,別自己敲「1.」再打個定位字元。手敲的編號轉出來是字面文字,不是 <ol>。
- 04轉完在輸出裡找 <h2> 和 <ul>。如果看到的是一片 <p>,那說明這份文件從來就沒有結構。
能轉過來的
標題層級按 Word 的樣式轉成 <h1> 到 <h6>。粗體、斜體、刪除線轉成 <strong>、<em>、<s>。上標下標。連結,Google 和 Office 的追蹤參數會被摘掉。
清單轉成真的 <ul> 和 <ol>,最多嵌五層。表格轉成 <table>,合併儲存格也算:橫向合併出來是 colspan,縱向是 rowspan。
「引文」樣式的段落轉成 blockquote。樣式是程式碼或預先格式化的段落轉成 <pre><code>。圖表標題轉成 <p class="caption">。
被扔掉的,和為什麼
字型、字級、顏色、醒目提示、對齊、縮排、行距、分頁符號、頁首頁尾、邊界。這些全是屬於一張紙的呈現,而 HTML 不是一張紙。
有兩樣扔掉的值得單獨說,因為容易被忽略。帶底線的文字會失去底線 —— 網路上的底線意思是連結,所以 Word 的底線寧可什麼都不對映,也不對映成一個誤導人的東西。還有空的佔位段落會消失,因為那是版面,不是內容。
追蹤修訂和註解會扔掉:你拿到的是定稿文字,不是編輯歷程。文字方塊、SmartArt、圖表留不下來 —— 只有裡面的文字留得下,如果有的話。
圖片:三種選擇
舊的 .doc 檔案是例外:不管選哪種,圖片都沒辦法從那個格式裡取出來。其餘的 —— 文字、標題、表格、粗體 —— 都能轉過來。
- 01內嵌成 base64,得到一個自帶一切的 .html 檔案,可以直接寄出去或雙擊打開。體積比原來的圖大三分之一左右。
- 02單獨存檔,得到一個 zip:HTML 加一個 images/ 資料夾,每個 <img> 已經指向對的路徑。要發到真的網站上就用這個。
- 03丟掉圖片,<img> 標籤還在但 src 是空的,所以你會看到一排圖片破損的佔位框。要麼刪掉它們,要麼用上面兩種。
先設好標題樣式,再轉。檔案在你的瀏覽器裡讀,從不上傳,所以你可以拿機密的東西試。
DOCX → HTML