HTML | 技术维基

如何使用 JavaScript 來禁用按鈕

了解如何使用 JavaScript 以程式化的方式禁用或啟用按鈕 HTML 的按鈕元素是少數具有獨立狀態的元素之一。與幾乎所有的表單控件一起使用。其中一個常見需求是使用 JavaScript 以程式化的方式禁用或啟用按鈕。例如，您希望僅在文字輸入元素填寫時才啟用按鈕。或者當特定的複選框被點擊時，例如那些用於表示“已閱讀條款和條件”的複選框，而實際上沒有人會閱讀。以下是具體操作步驟：首先，使用document.querySelector() 或 document.getElementById() 選取元素: const button = document.querySelector('button') 如果您有多個按鈕，您可能需要使用document.querySelectorAll() 並循環遍歷結果。無論如何，一旦您有元素引用，您可以將其 disabled 屬性設置為 true 以禁用按鈕： button.disabled = true 若要重新啟用按鈕，則將其設置為 false 即可： button.disabled = false

如何使用原生 JavaScript 創建 HTML 屬性

如果你需要在 DOM 中使用原生 JavaScript 為 HTML 元素添加屬性，該怎麼辦呢？假設你已經使用 querySelector() 選中了一個元素： const button = document.querySelector('#mybutton') 你可以按照以下步驟為它附加屬性：創建屬性設置屬性的值將屬性附加到元素上例如： const attribute = document.createAttribute('id') attribute.value = `remove-${item.name}` button.setAttributeNode(attribute) 如果該元素尚不存在，則你需要先創建元素，然後創建屬性，再將屬性添加到元素上，最後再將元素添加到 DOM 中： const button = document.createElement('button') const attribute = document.createAttribute('id') attribute.value = `some-value` button.setAttributeNode(attribute) button.textContent = 'Click me' document.querySelector('.container').appendChild(button)

如何使用正確的比例嵌入YouTube視頻

我遇到了這個問題。我想在一個頁面中嵌入YouTube視頻，但由於需要使用iframe，我無法弄清如何正確地設置其高度和寬度，以在流動佈局中正常工作。過了一段時間，我找到了解決方案。使用React和Tailwind的代碼： <iframe className="aspect-video w-full" src={"Youtube嵌入URL"}> </iframe> 不使用React的Tailwind代碼： <iframe class="aspect-video w-full" src="Youtube嵌入URL"> </iframe> 純HTML和CSS： <iframe style="aspect-ratio: 16 / 9; width: 100%" src="YouTube嵌入URL"></iframe> YouTube嵌入URL的格式如下： https://www.youtube.com/embed/VIDEO_ID 因此，如果您有視頻URL，您需要將其更改為相應的格式，例如： videourl.replace('https://www.youtube.com/watch?v=', 'https://www.youtube.com/embed/') 一些舊的教程仍然列出使用絕對/相對方式的技巧，例如： <style> .videocontainer { position:relative; padding-bottom:56.25%; } .videocontainer iframe { width:100%; height:100%; position:absolute; } </style> <div class="videocontainer"> <iframe src="YouTube嵌入URL"></iframe> </div> 我更偏愛更簡單的aspect-ratio屬性。

如何修復 Prettier 在儲存時搞亂你的 HTML

就像其他人一樣，我使用 Prettier 來格式化我的 JS 檔案。但是，我遇到了一些 Prettier 對我的 HTML 進行格式化的問題，就像下面這樣：我找到了解決方法，只需將以下內容添加到您的 settings.json 檔案中，讓 VS Code 使用預設的 HTML 格式化工具，而不是 Prettier： { "[html]": { "editor.defaultFormatter": "vscode.html-language-features" } }

如何只接受圖片類型的 input file 欄位

在表單中添加一個文件欄位時，您可能希望將選擇器限制為圖片類型。當然，您可以添加一個服務器端的過濾器，但同樣，在客戶端添加一個過濾器對於用戶體驗來說是很好的，不會浪費時間和資源將文件發送給您並得到錯誤回覆。您可以通過使用 accept 屬性並指定您接受的文件的 MIME 類型來實現這一點。 image/* 可以匹配所有的圖片。 <input type="file" name="myImage" accept="image/*" /> 如果您只想允許某些特定的文件類型，請列出它們。 <input type="file" name="myImage" accept="image/x-png,image/gif,image/jpeg" /> 您可以在這裡檢查該屬性的瀏覽器支持情況：https://caniuse.com/#feat=input-file-accept

如何在 Svelte 模板中添加註釋

如何避免 Svelte 將模板的部分內容渲染到客戶端 HTML 註釋非常適合在頁面中隱藏元素。在 HTML 中，您可以這樣添加註釋：  您也可以在區塊中使用註釋，以隱藏多行 HTML 代碼：  請注意，這仍然可以在頁面源代碼中看到。瀏覽器只是將其隱藏起來，但可以隨時查看該註釋。您可以在 Svelte 模板中使用相同的註釋。但是在 Svelte 中，您不會將被註釋的部分發送到瀏覽器。該部分被完全刪除，只保留在源文件中，對頁面生成的 HTML 不可見。這在我看來是一個好事情。

如何在暗模式下更改HTML圖片URL

使用CSS很容易根據系統是否處於暗模式來進行更改，只需使用prefers-color-scheme媒體特性。如果您想了解更多關於暗模式的資訊，請查看我在暗模式的博客文章。今天我遇到了一個問題 - 如何更改HTML中定義的圖片，而不是CSS規則？事實證明，有一種純HTML的方法可以做到這一點，而不需要任何CSS或JavaScript。我們可以使用picture標籤來包裝img標籤： <picture> <source srcset="dark.png" media="(prefers-color-scheme: dark)"> <img src="light.png"> </picture> 如果支援且啟用了暗模式，則將使用dark.png圖片作為img標籤的源。這個標籤的支援非常好，不支援此標籤或不支援暗模式的舊瀏覽器將回退顯示light.png圖片。值得注意的是，在任何情況下，瀏覽器不會下載兩張圖片：如果是暗模式，就只會下載dark.png圖片；如果是亮模式，則只會下載light.png圖片，因此不會浪費帶寬。

如何從 Netlify 函數返回 HTML

不使用 return { statusCode: 200, body: '測試', } 而是使用 return { statusCode: 200, headers: { 'Content-type': 'text/html; charset=UTF-8', }, body: '<body style="background-color: black;"><h2 style="color: white; padding-top:200px; text-align: center; font-family: system-ui">測試</h2></body>', }

強制下載HTML中的連結

最近我發現可以在a標籤中加入download屬性： <a href="file.pdf" download>pdf</a> 這樣瀏覽器就會強制下載連結，即使該檔案可以在瀏覽器中打開（例如PDF檔）。這個方法只適用於同源的連結。

文本的HTML標籤

發現您可以在網頁上使用的各種HTML標籤來顯示文本 p 標籤此標籤定義了一個文本段落。 <p>一些文本</p> 這是一個塊元素。在其中，我們可以添加任何內聯元素，例如 span 或 a。我們不能添加塊元素。我們不能將 p 元素嵌套到另一個其中。默認情況下，瀏覽器會對段落進行上下邊距設置。在Chrome中為 16px，但實際值可能各瀏覽器不同。這使得兩個連續的段落之間產生間距，模擬我們印刷文本中的“段落”。 span 標籤這是內聯標籤，可用於在段落中創建一個可通過CSS選取的部分： <p>文本的一部分 <span>這裡還有一部分</span></p> br 標籤此標籤表示換行。它是內聯元素，不需要關閉標籤。我們使用它在 p 標籤中換行，而不創建新的段落。與創建新段落相比，它不會添加額外的間距。 <p>一些文本<br>換行</p> 標題標籤 HTML提供了6個標題標籤。從最重要到最不重要，我們有 h1，h2，h3，h4，h5，h6。通常，一個頁面只會有一個 h1 元素作為頁面標題。然後，根據頁面內容，可能會有一個或多個 h2 元素。標題，特別是標題的組織，對於SEO也很重要，搜索引擎以各種方式使用它們。瀏覽器默認情況下會呈現較大的 h1 標籤，並根據 h 數字的增加使元素的大小變小：所有標題都是塊元素。它們不能包含其他元素，只能包含文本。 strong 標籤此標籤用於將其中的文本標記為粗體。這是非常重要的，它不是視覺提示，而是語義提示。根據使用的媒介不同，它的解釋也會有所不同。瀏覽器默認情況下將此標籤中的文本設置為粗體。 em 標籤此標籤用於將其中的文本標記為強調。與 strong 一樣，它不是視覺提示，而是語義提示。瀏覽器默認情况下將此標籤中的文本設置為斜體。引用 blockquote HTML標籤可用於在文本中插入引用。瀏覽器默認情況下將 blockquote 元素應用了一個邊距。Chrome應用了左右邊距為40px，上下邊距為10px。 q HTML標籤用於內嵌引用。水平線雖然不是基於文本，但 hr 標籤經常在頁面內部使用。它表示水平分隔線並在頁面中添加一條水平線。有助於區分頁面中的各個部分。代碼塊 code 標籤對於顯示代碼特別有用，因為瀏覽器給它一個等寬字體。...