HTML5簡(jiǎn)單教學(xué)第一章（第三節(jié))

家好，我是新媒之聲廣告工作室的大白，今天給大家?guī)淼氖荋TML5簡(jiǎn)單教學(xué)第一章（第三節(jié)）。

今天給大家?guī)淼臇|西比較少；

標(biāo)簽分類:

1.塊標(biāo)簽

#獨(dú)占一行，自動(dòng)換行

2.行標(biāo)簽

#自己有多寬占多寬

HTML <p> 標(biāo)簽

<p> 標(biāo)簽表示文本的段落，段落通常在可視媒體中表示為文本塊，是塊級(jí)元素。

<p> 標(biāo)簽定義段落。

<p> 元素會(huì)自動(dòng)在其前后創(chuàng)建一些空白。瀏覽器會(huì)自動(dòng)添加這些空間，您也可以在樣式表中規(guī)定。

注意：<p> 標(biāo)簽與 <br> 標(biāo)簽都有換行的意思，不同的是 <p> 標(biāo)簽是大換行（分段），<br> 標(biāo)簽是小換行。

在HTML 4.01 與 HTML5中的差異

HTML 4.01中標(biāo)簽的 align 屬性已經(jīng)廢棄，HTML5不支持該屬性。

HTML <h1> - <h6> 標(biāo)簽

<h1> - <h6> 標(biāo)簽用來定義 HTML 標(biāo)題，表示了 HTML 網(wǎng)頁中六個(gè)級(jí)別的標(biāo)題。您可以通過下面的這個(gè)實(shí)例來看看每個(gè)級(jí)別的標(biāo)題有什么區(qū)別：

標(biāo)簽定義及使用說明

<h1> - <h6> 標(biāo)簽被用來定義 HTML 標(biāo)題。

<h1> 定義重要等級(jí)最高的標(biāo)題。<h6> 定義重要等級(jí)最低的標(biāo)題。

HTML 4.01 與 HTML5之間的差異

在 HTML 4.01 中，<h1> - <h6> 的 "align" 屬性已被廢棄。在 HTML 5 中，<h1> - <h6> 元素的 "align" 屬性不被支持。請(qǐng)使用 CSS 來排列元素。

HTML <i> 標(biāo)簽

<i> 標(biāo)簽中的文本顯示為斜體，代表一定范圍的文本具有特別的語義。

標(biāo)簽定義及使用說明

<i> 定義與文本中其余部分不同的部分，并把這部分文本呈現(xiàn)為斜體文本。

<i> 標(biāo)簽被用來表示科技術(shù)語、其他語種的成語俗語、想法、宇宙飛船的名字等等。

在沒有其他適當(dāng)語義的元素可以使用時(shí)，請(qǐng)使用 <i> 元素。其他語義的元素如下：

<em> （被強(qiáng)調(diào)的文本）
<strong> （重要的文本）
<mark> （被標(biāo)記的/高亮顯示的文本）
<cite> （作品的標(biāo)題）
<dfn> （一個(gè)定義項(xiàng)目）

提示：<i> 標(biāo)簽一定要和結(jié)束標(biāo)簽 </i> 一起使用。

HTML 4.01 與 HTML5之間的差異

在 HTML 4.01 中，<i> 標(biāo)簽呈現(xiàn)斜體的文本。然而，在 HTML5 中沒有必要這么做，可以使用樣式表來格式化 <i> 元素中的文本。

HTML <u> 標(biāo)簽

<u> 標(biāo)簽可以用來對(duì)標(biāo)簽內(nèi)的文本實(shí)現(xiàn)下劃線樣式

標(biāo)簽定義及使用說明

<u> 標(biāo)簽定義與常規(guī)文本風(fēng)格不同的文本，像拼寫錯(cuò)誤的單詞或者漢語中的專有名詞。

提示和注釋

提示：請(qǐng)盡量避免使用 <u> 為文本加下劃線，用戶會(huì)把它混淆為一個(gè)超鏈接。

注釋：HTML5 規(guī)范建議開發(fā)者盡量使用其他元素替代 <u> 元素。

HTML 4.01 與 HTML5之間的差異

在 HTML 中，<u>元素已廢棄（<u> 元素被用來定義下劃線）。

HTML5 中重新定義了 <u> 元素，它定義與常規(guī)文本風(fēng)格不同的文本，像拼寫錯(cuò)誤的單詞或者漢語中的專有名詞。

HTML <font> 標(biāo)簽 - HTML5 不支持

<font> 標(biāo)簽的使用示例如下所示，該標(biāo)簽已經(jīng)過時(shí)，因此我們不建議您使用該標(biāo)簽。

標(biāo)簽定義及使用說明

HTML5 不支持 <font> 標(biāo)簽。請(qǐng)用 CSS 代替。

在 HTML 4.01 中，<font> 元素已廢棄。

<font> 標(biāo)簽規(guī)定文本的字體、字體尺寸、字體顏色。

提示和注釋

提示：請(qǐng)使用 CSS 來定義文本的字體、尺寸、顏色。

HTML 4.01 與 HTML5之間的差異

HTML5 不支持 <font> 標(biāo)簽，HTML 4.01 已廢棄 <center> 標(biāo)簽。

謝謝大家的觀看，如果需要今天課程的源代碼和ppt可以私信給我，我會(huì)免費(fèi)發(fā)給你，最好使能夠關(guān)注小編一下。

家好，很高興又見面了，我是"高級(jí)前端?進(jìn)階?"，由我?guī)е蠹乙黄痍P(guān)注前端前沿、深入前端底層技術(shù)，大家一起進(jìn)步，也歡迎大家關(guān)注、點(diǎn)贊、收藏、轉(zhuǎn)發(fā)，您的支持是我不斷創(chuàng)作的動(dòng)力。

今天給大家?guī)淼闹黝}是HTML5 和word的互相轉(zhuǎn)化，話不多說，直接進(jìn)入正題！

1.HTML轉(zhuǎn)化為Word之 html-docx-js

1.1 什么是 html-docx-js

html-docx-js 是一個(gè)非常小的庫，能夠?qū)?HTML 文檔轉(zhuǎn)換為 Microsoft Word 2007 及更高版本使用的 DOCX 格式。 html-docx-js 設(shè)法使用稱為“altchunks”的功能在瀏覽器中執(zhí)行轉(zhuǎn)換。簡(jiǎn)而言之，它允許以不同的標(biāo)記語言嵌入內(nèi)容。開發(fā)者使用 MHT 文檔將嵌入內(nèi)容發(fā)送到 Word，因?yàn)樗试S處理圖像。 Word 打開此類文件后，會(huì)將外部?jī)?nèi)容轉(zhuǎn)換為 Word Processing ML（這是 DOCX 文件的標(biāo)記語言的調(diào)用方式）并替換引用。

Microsoft Word for Mac 2008 不支持 Altchunk，LibreOffice 和 Google Docs 也不支持 Altchunk。

關(guān)于 html-docx-js 庫有幾點(diǎn)需要說明：

html-docx-js 適用于任何支持 Blob 的現(xiàn)代瀏覽器（無論是本機(jī)還是通過 Blob.js）。它在 Google Chrome 36、Safari 7 和 Internet Explorer 10 上進(jìn)行了測(cè)試，也適用于使用 Buffer 而不是 Blob 的 Node.js（在 v0.10.12 上測(cè)試）。
html-docx-js 僅支持內(nèi)聯(lián)的 base64 圖像（通過 DATA URI 獲取）。但動(dòng)態(tài)轉(zhuǎn)換常規(guī)圖像（來自靜態(tài)文件夾）很容易，開發(fā)者可以自行完成。

目前 Mammoth 在 Github 上通過 MIT 協(xié)議開源，有超過 1k 的 star、0.3k 的 fork、0.7k 的項(xiàng)目依賴量、NPM 周平均下載量 9k，是一個(gè)值得關(guān)注的前端開源項(xiàng)目。

1.2 如何使用 html-docx-js

var converted=htmlDocx.asBlob(content);
saveAs(converted, "test.docx");

asBlob 可以采用其他選項(xiàng)來控制文檔的頁面設(shè)置：

orientation：橫向或縱向（默認(rèn)）
margins：邊距大小圖
top：數(shù)字（默認(rèn)：1440，即 2.54 厘米）
right：數(shù)字（默認(rèn)：1440）
bottom：數(shù)字（默認(rèn)：1440）
left：數(shù)字（默認(rèn)：1440）
header：數(shù)字（默認(rèn)值：720）
footer：數(shù)字（默認(rèn)值：720）
gutter：數(shù)字（默認(rèn)值：0）

比如下面的例子：

var converted=htmlDocx.asBlob(content, {
  orientation: "landscape",
  margins: { top: 720 },
});
saveAs(converted, "test.docx");

需要注意的是，開發(fā)者需要傳遞完整、有效的 HTML（包括 DOCTYPE、html 和 body 標(biāo)簽）。這可能不太方便，但可以讓開發(fā)者在樣式標(biāo)簽中包含 CSS 規(guī)則。

html-docx-js 作為獨(dú)立”Browserify 模塊（UMD）分發(fā)。開發(fā)者可以將其作為 html-docx 要求。如果沒有可用的模塊加載器，它將把自己注冊(cè)在 window.htmlDocx。

2.mammoth.js

2.1 什么是 mammoth.js

Mammoth.js 旨在轉(zhuǎn)換 .docx 文檔，例如：由 Microsoft Word、Google Docs 和 LibreOffice 創(chuàng)建的文檔，并將其轉(zhuǎn)換為 HTML。 Mammoth 的目標(biāo)是通過使用文檔中的語義信息并忽略其他細(xì)節(jié)來生成簡(jiǎn)單且干凈的 HTML。例如，Mammoth 將任何具有標(biāo)題 1 樣式的段落轉(zhuǎn)換為 h1 元素，而不是嘗試精確復(fù)制標(biāo)題的樣式（字體、文本大小、顏色等）。

.docx 使用的結(jié)構(gòu)與 HTML 的結(jié)構(gòu)之間存在很大的不匹配，這意味著對(duì)于更復(fù)雜的文檔來說，轉(zhuǎn)換不太可能完美。如果開發(fā)者僅使用樣式來對(duì)文檔進(jìn)行語義標(biāo)記，那么 Mammoth 效果最佳。

Mammoth.js 目前支持以下功能：

標(biāo)題、列表、評(píng)論
從自己的 docx 樣式到 HTML 的可定制映射。例如，可以通過提供適當(dāng)?shù)臉邮接成鋵?warningHeading 轉(zhuǎn)換為 h1.warning。
Tables：當(dāng)前忽略表格本身的格式（例如：邊框），但文本的格式與文檔其余部分的格式相同。
腳注和尾注、圖片、粗體、斜體、下劃線、刪除線、上標(biāo)和下標(biāo)、鏈接、Line、Line breaks
文本框：文本框的內(nèi)容被視為出現(xiàn)在包含文本框的段落之后的單獨(dú)段落。

Mammoth 在眾多平臺(tái)可用，比如：Python、WordPress、Java/JVM、.NET 等等。目前 Mammoth 在 Github 上通過 BSD-2-Clause 開源，有超過 4.1k 的 star、0.5k 的 fork、4.4k 的項(xiàng)目依賴量、NPM 周平均下載量 76k，是一個(gè)值得關(guān)注的前端優(yōu)質(zhì)開源項(xiàng)目。

2.2 使用 mammoth.js

以文檔轉(zhuǎn)換為例。

Mammoth 允許在轉(zhuǎn)換文檔之前對(duì)其進(jìn)行處理。例如，假設(shè)該文檔尚未進(jìn)行語義標(biāo)記，但開發(fā)者知道任何居中對(duì)齊的段落都應(yīng)該是標(biāo)題，則可以使用 transformDocument 參數(shù)來適當(dāng)?shù)匦薷奈臋n：

function transformElement(element) {
  if (element.children) {
    var children=_.map(element.children, transformElement);
    element={ ...element, children: children };
  }
  if (element.type==="paragraph") {
    element=transformParagraph(element);
  }

  return element;
}
function transformParagraph(element) {
  if (element.alignment==="center" && !element.styleId) {
    return { ...element, styleId: "Heading2" };
  } else {
    return element;
  }
}
var options={
  transformDocument: transformElement,
};

TransformDocument 的返回值在 HTML 生成期間使用。同時(shí)，上面的代碼可以使用 mammoth.transforms.paragraph 函數(shù)進(jìn)行優(yōu)化，比如：

function transformParagraph(element) {
  if (element.alignment==="center" && !element.styleId) {
    return { ...element, styleId: "Heading2" };
  } else {
    return element;
  }
}
var options={
  transformDocument: mammoth.transforms.paragraph(transformParagraph),
};

或者，如果開發(fā)者希望已明確設(shè)置為使用等寬字體來表示代碼的段落：

const monospaceFonts=["consolas", "courier", "courier new"];

function transformParagraph(paragraph) {
  var runs=mammoth.transforms.getDescendantsOfType(paragraph, "run");
  var isMatch=runs.length > 0 &&
    runs.every(function (run) {
      return run.font && monospaceFonts.indexOf(run.font.toLowerCase()) !==-1;
    });
  if (isMatch) {
    return {
      ...paragraph,
      styleId: "code",
      styleName: "Code",
    };
  } else {
    return paragraph;
  }
}
var options={
  transformDocument: mammoth.transforms.paragraph(transformParagraph),
  styleMap: ["p[style-name='Code']=> pre:separator('\n')"],
};

關(guān)于 Mammoth 庫的更多用法，更多 API 示例可以參考文末資料，本文不再過多展開。

3.本文總結(jié)

本文主要和大家介紹 HTML5 和word互轉(zhuǎn)的兩個(gè)開源庫，分別為：html-docx-js、mammoth.js。相信通過本文的閱讀，大家對(duì) html-docx-js、mammoth.js 會(huì)有一個(gè)初步的了解。

因?yàn)槠邢蓿P(guān)于 html-docx-js、mammoth.js 的更多用法和特性文章并沒有過多展開，如果有興趣，可以在我的主頁繼續(xù)閱讀，同時(shí)文末的參考資料提供了大量?jī)?yōu)秀文檔以供學(xué)習(xí)。最后，歡迎大家點(diǎn)贊、評(píng)論、轉(zhuǎn)發(fā)、收藏，您的支持是我不斷創(chuàng)作的動(dòng)力。

參考資料

https://github.com/evidenceprime/html-docx-js

https://github.com/mwilliamson/mammoth.js

https://www.npmjs.com/package/html-docx-js

https://www.npmjs.com/package/mammoth

https://www.tutorialswebsite.com/export-html-to-word-document-with-javascript/

https://www.vecteezy.com/vector-art/136754-free-vector-documents

例

一段帶有已刪除部分和新插入部分的文本：

<p>My favorite color is <del>blue</del> <ins>red</ins>!</p>

瀏覽器支持

所有主流瀏覽器都支持 <del> 標(biāo)簽。

標(biāo)簽定義及使用說明

<del> 標(biāo)簽定義文檔中已刪除的文本。

提示和注釋

提示：您也可以看看 <ins> 標(biāo)簽如何標(biāo)記先插入的文本。

提示：<del> 和 <ins> 一起使用，描述文檔中的更新和修正。瀏覽器通常會(huì)在已刪除文本上添加一條刪除線，在新插入文本下添加一條下劃線。

HTML 4.01 與 HTML5之間的差異

無。

屬性

屬性	值	描述
cite	URL	規(guī)定一個(gè)解釋了文本被刪除的原因的文檔的 URL。
datetime	YYYY-MM-DDThh:mm:ssTZD	規(guī)定文本被刪除的日期和時(shí)間。

全局屬性

<del> 標(biāo)簽支持 HTML 的全局屬性。

事件屬性

<del> 標(biāo)簽支持 HTML 的事件屬性。

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！

在線咨詢

上一篇：2022年長(zhǎng)江南京航道局事業(yè)編制人員招聘公告
下一篇：78官測(cè)：萬代 SHF 銀河奧特曼

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商

HTML5簡(jiǎn)單教學(xué)第一章（第三節(jié))

1.HTML轉(zhuǎn)化為Word之 html-docx-js

1.1 什么是 html-docx-js

1.2 如何使用 html-docx-js

2.mammoth.js

2.1 什么是 mammoth.js

2.2 使用 mammoth.js

3.本文總結(jié)

參考資料

您的項(xiàng)目需求