HTML | 技术维基

什麼是 Doctype

任何 HTML 文件都必須以文件類型聲明（Document Type Declaration），簡稱 Doctype，開頭，該聲明告訴瀏覽器該頁面使用的 HTML 版本。任何 HTML 文件都必須在第一行開始以文件類型聲明（簡稱doctype）開始，該聲明告訴瀏覽器該頁面使用的 HTML 版本。這個文件類型聲明（不區分大小寫）： <!DOCTYPE html> 告訴瀏覽器這是一個 HTML5 文件。瀏覽器渲染模式有了這個聲明，瀏覽器可以以標準模式來呈現文件。如果沒有它，瀏覽器將以怪異模式來呈現頁面。如果你聽過怪異模式，你必須知道瀏覽器引入這種渲染模式是為了使以「舊風格」編寫的頁面與使用的新功能和標準兼容。如果沒有它，隨著瀏覽器和 HTML 的發展，舊的頁面將破壞其外觀，而網絡平台在這方面一直非常保護（這是我認為其成功的一部分）。瀏覽器基本上在未識別頁面為標準模式的情況下默認使用怪異模式。你希望使用標準模式，並且 <!DOCTYPE html> 是實現它的方法。對於 Internet Explorer <= 10 的使用者，還需要額外注意避免怪異模式，方法是在頁面的 <head> 標籤中，在加載任何腳本之前，插入以下內容： <meta http-equiv="X-UA-Compatible" content="IE=Edge"> 舊的 HTML 版本 HTML 有一套奇怪的版本： HTML（1991） HTML 2.0（1995） HTML 3.2（1997） HTML 4.01（1999） XHTML（2000） HTML5（2014） HTML 4.01 Strict 文件的文件類型聲明為： <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> XHTML 類似：...

介紹 Electron

了解 Electron，這是由 GitHub 開發的跨平台框架，用於建立創新且非常受歡迎的跨平台應用程式。 Electron 是一個使用 JS、HTML 和 CSS 來建立跨平台桌面應用程式的免費開源工具，由 GitHub 開發。許多非常受歡迎且成功的應用程式都使用了 Electron，包括 VS Code、Slack、Discord 等等。 Electron 是一個宏大的專案，它革命性地改變了原生桌面應用程式的開發方式，使之成為可能以 JavaScript 為基礎的過程。需要注意的是：在 Electron 出現之前，已經有其他工具可以用 JavaScript 來開發桌面應用程式，但 Electron 讓這種開發方式更加普及。尤其是 Electron 可以用於建立跨平台的桌面應用程式。在此之前，沒有任何工具可以讓你在不同平台上運行相同的應用程式。直到 2014 年，Electron 首次發布。快速了解 Electron 的內部結構 Electron 基本上是將 Chromium 渲染庫和 Node.js 打包在一起（Chromium 是由 Google 開源的專案，用於構建 Chrome 瀏覽器）。你既可以使用由 Chromium 提供的畫布，運行 V8 JavaScript 引擎，也可以使用任何 Node.js 套件並運行自己的 Node.js 代碼。你可以把它想象成桌面版的 Node.js。它本身不提供任何 GUI 元素，而是讓你使用 HTML、CSS 和 JavaScript 來創建使用者界面。 Electron 旨在提供核心功能，同時保持速度快、體積小、精簡。這些核心功能可以滿足所有應用程式的需求。你可以使用 Electron 創建哪些類型的應用程式你可以創建各種不同類型的應用程式，包括：...

使用 CSS 去設計 Vue.js 元件

在本文中，我們將探討多種使用 CSS 去設計 Vue.js 元件的方式。注意: 本教程使用 Vue.js 的單文件元件最簡單的方式是在 Vue.js 元件中使用 style 標籤，就像在 HTML 中一樣： <template> <p style="text-decoration: underline">Hi!</p> </template> <script> export default { data() { return { decoration: 'underline' } } } </script> 這是最靜態的方式。如果你希望 underline 在元件的資料中被定義，你可以這樣做： <template> <p :style="{'text-decoration': decoration}">Hi!</p> </template> <script> export default { data() { return { decoration: 'underline' } } } </script> :style 是 v-bind:style 的縮寫。在本教程中，我將使用這個縮寫。注意到我們必須將 text-decoration 用引號包起來。這是因為其中有連字符，而連字符不是有效的 JavaScript 識別符號。你可以避免使用引號，使用 Vue.js 提供的特殊 camelCase 語法，並將其改寫為 textDecoration：...

使用 Gatsby 加載外部 JS 檔案

在現代 JavaScript 網頁開發工作流中，通常會使用 npm 套件來安裝 JavaScript。然而，有時我們需要包含一個外部的 JavaScript 檔案，而現代的工具可能會讓這件事變得有些困難。特別是在我的網站中需要包含來自 Wistia 的視頻時，經過快速查看後，一切看起來比我想像的要複雜得多。Wistia 給了我這個 HTML 片段來嵌入視頻： <script src="https://fast.wistia.com/embed/medias/VIDEOURL.jsonp" async></script><script src="https://fast.wistia.com/assets/external/E-v1.js" async></script><div class="wistia\_responsive\_padding" style="padding:56.25% 0 0 0;position:relative;"><div class="wistia\_responsive\_wrapper" style="height:100%;left:0;position:absolute;top:0;width:100%;"><div class="wistia\_embed wistia\_async\_VIDEOURL seo=false videoFoam=true" style="height:100%;position:relative;width:100%"><div class="wistia\_swatch" style="height:100%;left:0;opacity:0;overflow:hidden;position:absolute;top:0;transition:opacity 200ms;width:100%;"><img src="https://fast.wistia.com/embed/medias/VIDEOURL/swatch" style="filter:blur(5px);height:100%;object-fit:contain;width:100%;" alt="" aria-hidden="true" onload="this.parentNode.style.opacity=1;" /></div></div></div></div> 在一個「正常」的 HTML 網站中，比如我通常使用 Hugo 構建的網站，這是非常簡單的。我只需要將這段程式碼添加到我的頁面中即可。但是在一個 Gatsby 頁面中，這是一個 React 組件，該怎麼做呢？我查看了一些插件，但沒有一個真正符合我的需求。解決方案可能有些「hacky」，但效果非常好，而且我仍然覺得對發生的事情有掌控權。我將 HTML 片段轉換成了 JSX，並正確地轉換了所有的 HTML 屬性：class -> className，aria-hidden -> ariaHidden，以及樣式 - 可以使用像 htmltojsx 這樣的工具來快速轉換。然後，我將這段程式碼添加到 gatsby-browser.js 檔案中，在頁面加載時加入我需要的腳本： const addScript = url => { const script = document....

使用CSS對HTML表格進行樣式設定

這是一份有關如何使用CSS處理表格的簡要指南。在過去，我們通常過度使用表格來創建華麗的頁面佈局，因為它們是唯一的選擇之一。如今，隨著Grid和Flexbox的出現，我們可以讓表格回到它原本的作用：樣式設定。讓我們從HTML開始。這是一個基本的表格： <table> <thead> <tr> <th scope="col">姓名</th> <th scope="col">年齡</th> </tr> </thead> <tbody> <tr> <th scope="row">Flavio</th> <td>36</td> </tr> <tr> <th scope="row">Roger</th> <td>7</td> </tr> </tbody> </table> 默認情況下，這個表格看起來並不太吸引人。瀏覽器只提供了一些標準的樣式：當然，我們可以使用CSS來調整表格的所有元素。讓我們從邊框開始。一個漂亮的邊框可以讓表格大有不同。我們可以對table元素以及th和td等內部元素應用邊框樣式： table, th, td { border: 1px solid #333; } 如果加上一些外邊距，我們會得到一個漂亮的效果：表格中常見的一個特點是可以為一行添加顏色，並為另一行添加不同的顏色。這可以使用nth-child(odd)或nth-child(even)選擇器實現： tbody tr:nth-child(odd) { background-color: #af47ff; } 這將給我們帶來以下效果：如果在表格元素中添加border-collapse: collapse;，則所有邊框將合併為一個：

使用Node.js服務一個HTML頁面

了解如何使用Node.js無依賴項目來服務一個 index.html HTML 頁面。我有一個需求，需要從Node.js服務器中提供一個HTML頁面，以下是實現這一需求的最簡代碼： const http = require('http') const fs = require('fs') const server = http.createServer((req, res) => { res.writeHead(200, { 'content-type': 'text/html' }) fs.createReadStream('index.html').pipe(res) }) server.listen(process.env.PORT || 3000) 不需要任何依賴項。將此代碼添加到一個 app.js 文件中，然後創建一個 index.html 頁面，運行 node app.js 命令。請注意，上述代碼不支持提供靜態資源，它僅僅提供 index.html 頁面的服務。

在 HTML 中保留空格和換行

在一個專案中，我使用 <textarea> 欄位在表單中獲取工作的描述，然後將其存儲在數據庫中。現在，這個描述並沒有被解釋為 HTML，當我將它添加到頁面中時，瀏覽器並沒有尊重空格和換行。我希望獲得這樣的顯示效果：但我得到了這樣的顯示效果：解決方法是添加以下 CSS 屬性： white-space: pre-wrap; 在 Tailwind 中，對應的類名為 whitespace-pre-wrap。

在 Hugo 中嵌入 HTML 到 Markdown

在最長的一段時間後，我從 Blackfriday 切換到默認的 Hugo Markdown 渲染器 Goldmark。我延遲了這個切換的時間，但在版本 0.100 中，他們移除了被棄用的舊版 Markdown 渲染器。不幸的是，這意味著我在 Markdown 中嵌入的所有 HTML 都停止運作。我通過在我的 config.yaml 文件中啟用這個選項來解決這個問題： markup: goldmark: renderer: unsafe: true 或者，在 config.toml 文件中： [markup.goldmark.renderer] unsafe = true

如何使水平线不可见

我想在我的 HTML 页面上的兄弟元素之间创建一个分隔。我有一个想法，可以将它们包装在section标签或div中，并在该元素的顶部和底部应用外边距。另一种方法是不改变整体的 HTML 结构，而是使用一个标签作为分隔线。所以我使用了一个 hr 标签，它在语义上表示段落级别标签之间的主题性断裂。我使用以下样式来使它不可见，但仍然占用空间： hr { margin-top: 100px; border: none; }

如何使用 insertAdjacentHTML

insertAdjacentHTML 是一個非常酷的 DOM 方法，我們可以在任何 DOM 元素上調用它來向頁面添加新的內容。這是一種很好且靈活的插入新內容的方式。該方法在一個元素上被調用，並接受兩個參數：位置和包含 HTML 的字符串。以下是一個示例： const item = `<div> test </div> ` document.querySelector('#container').insertAdjacentHTML('afterend', item) 請注意這裡的 afterend 字符串。它表示我們要將 HTML 添加到容器中的位置。我們有四個可能的位置： beforebegin：在元素之前 afterbegin：在元素的第一個子元素之前 beforeend：在元素的最後一個子元素之後 afterend：在元素之後以下是我們如何向列表添加新項目的示例： document.querySelector('ul').insertAdjacentHTML('beforeend', '<li>item</li>')