欧美成人精品手机在线观看_69视频国产_动漫精品第一页_日韩中文字幕网 - 日本欧美一区二区

LOGO OA教程 ERP教程 模切知識(shí)交流 PMS教程 CRM教程 開(kāi)發(fā)文檔 其他文檔  
 
網(wǎng)站管理員

您必須了解的 21 個(gè) HTML 技巧
admin
2024年5月22日 16:54 本文熱度 919

在這篇文章中，我們將分享 21 個(gè)帶有代碼片段的 HTML 技巧，可以提高您的編碼技能。

現(xiàn)在，讓我們直接開(kāi)始吧。

01、創(chuàng)建聯(lián)系鏈接

使用 HTML 創(chuàng)建可點(diǎn)擊的電子郵件、電話和短信鏈接：

<!-- Email link --><a href="mailto:name@example.com"> Send Email </a>
<!-- Phone call link --><a href="tel:+1234567890"> Call Us </a>
<!-- SMS link --><a href="sms:+1234567890"> Send SMS </a>

02、創(chuàng)建可折疊內(nèi)容

當(dāng)您想要在網(wǎng)頁(yè)上包含可折疊內(nèi)容時(shí)，可以使用 <details> 和 <summary> 標(biāo)記。

<details> 標(biāo)簽創(chuàng)建隱藏內(nèi)容的容器，而 <summary> 標(biāo)簽提供可單擊的標(biāo)簽來(lái)切換該內(nèi)容的可見(jiàn)性。

<details>  <summary>Click to expand</summary>  <p>This content can be expanded or collapsed.</p></details>

03、利用語(yǔ)義元素

為您的網(wǎng)站選擇語(yǔ)義元素而不是非語(yǔ)義元素。它們使您的代碼變得有意義，并改善結(jié)構(gòu)、可訪問(wèn)性和 SEO。

上圖，左邊為非語(yǔ)義結(jié)構(gòu)，右邊為語(yǔ)義元素結(jié)構(gòu)

04、對(duì)表單元素進(jìn)行分組

使用 <fieldset> 標(biāo)記對(duì)表單中的相關(guān)元素進(jìn)行分組，并使用 <legend> 標(biāo)記和 <fieldset> 來(lái)定義 <fieldset> 標(biāo)記的標(biāo)題。

這對(duì)于創(chuàng)建更高效、更易于訪問(wèn)的表單非常有用。

<form>   <fieldset>      <legend>Personal details</legend>      <label for="firstname">First name:</label>      <input type="text" id="firstname" name="firstname" />      <label for="email">Email:</label>      <input type="email" id="email" name="email" />      <label for="contact">Contact:</label>      <input type="text" id="contact" name="contact" />      <input type="button" value="Submit" />   </fieldset></form>

05、增強(qiáng)下拉菜單

您可以使用 <optgroup> 標(biāo)簽對(duì) <select> HTML 標(biāo)簽中的相關(guān)選項(xiàng)進(jìn)行分組。

當(dāng)您使用大型下拉菜單或長(zhǎng)選項(xiàng)列表時(shí)可以使用此功能。

<select>   <optgroup label="Fruits">      <option>Apple</option>      <option>Banana</option>      <option>Mango</option>   </optgroup>   <optgroup label="Vegetables">      <option>Tomato</option>      <option>Broccoli</option>      <option>Carrot</option>   </optgroup></select>

06、改進(jìn)視頻演示

poster屬性可以與 <video> 元素一起使用來(lái)顯示圖像，直到用戶播放視頻。

<video controls poster="image.png" width="500">  <source src="video.mp4" type="video/mp4 /></video>

07、支持多項(xiàng)選擇

您可以將 multiple 屬性與 <input> 和 <select> 元素一起使用，以允許用戶一次選擇/輸入多個(gè)值。

<input type="file" multiple /><select multiple>    <option value="java">Java</option>    <option value="javascript">JavaScript</option>    <option value="typescript">TypeScript</option>    <option value="rust">Rust</option></select>

08、將文本顯示為下標(biāo)和上標(biāo)

<sub> 和 <sup> 元素可用于分別將文本顯示為下標(biāo)和上標(biāo)。

09、創(chuàng)建下載鏈接

您可以使用帶有 <a> 元素的 download 屬性來(lái)指定當(dāng)用戶單擊鏈接時(shí)，應(yīng)下載而不是導(dǎo)航到鏈接的資源。

<a href="document.pdf" download="document.pdf"> Download PDF </a>

10、定義相對(duì)鏈接的基本 URL

您可以使用 <base> 標(biāo)簽來(lái)定義網(wǎng)頁(yè)中所有相對(duì) URL 的基本 URL。

當(dāng)您想要為網(wǎng)頁(yè)上的所有相對(duì) URL 創(chuàng)建共享起點(diǎn)時(shí)，這會(huì)很方便，從而更輕松地導(dǎo)航和加載資源。

<head>   <base href="https://shefali.dev" target="_blank" /></head><body>   <a href="/blog">Blogs</a>   <a href="/get-in-touch">Contact</a></body>

11、控制圖像加載

<img> 元素的loading 屬性可用于控制瀏覽器加載圖像的方式。它具有三個(gè)值：“eager”、“l(fā)azy”和“auto”。

<img src="picture.jpg" loading="lazy">

12、管理翻譯功能

您可以使用translate 屬性來(lái)指定元素的內(nèi)容是否應(yīng)由瀏覽器的翻譯功能進(jìn)行翻譯。

<p translate="no">  This text should not be translated.</p>

13、設(shè)置最大輸入長(zhǎng)度

通過(guò)使用 maxlength 屬性，您可以設(shè)置用戶在輸入字段中輸入的最大字符數(shù)。

<input type="text" maxlength="4">

14、設(shè)置最小輸入長(zhǎng)度

通過(guò)使用 minlength 屬性，您可以設(shè)置用戶在輸入字段中輸入的最小字符數(shù)。

<input type="text" minlength="3">

15、啟用內(nèi)容編輯

使用 contenteditable 屬性指定元素的內(nèi)容是否可編輯。

它允許用戶修改元素內(nèi)的內(nèi)容。

<div contenteditable="true">   You can edit this content.</div>

16、控制拼寫檢查

您可以將拼寫檢查屬性與 <input> 元素、內(nèi)容可編輯元素和 <textarea> 元素結(jié)合使用，以啟用或禁用瀏覽器的拼寫檢查。

<input type="text" spellcheck="true"/>

17、確保無(wú)障礙

alt 屬性指定圖像無(wú)法顯示時(shí)的替代文本。

始終包含圖像的描述性 alt 屬性，以提高可訪問(wèn)性和 SEO。

<img src="picture.jpg" alt="Description for the image">

18、定義鏈接的目標(biāo)行為

您可以使用目標(biāo)屬性來(lái)指定單擊鏈接資源時(shí)將顯示的位置。

<!-- Opens in the same frame --><a href="https://shefali.dev" target="_self">Open</a>
<!-- Opens in a new window or tab --><a href="https://shefali.dev" target="_blank">Open</a>
<!-- Opens in the parent frame --><a href="https://shefali.dev" target="_parent">Open</a>
<!-- Opens in the full body of the window --><a href="https://shefali.dev" target="_top">Open</a>
<!-- Opens in the named frame --><a href="https://shefali.dev" target="framename">Open</a>

19、提供附加信息

title 屬性可用于在用戶將鼠標(biāo)懸停在元素上時(shí)提供有關(guān)該元素的附加信息。

<p title="World Health Organization">WHO</p>

20、接受特定文件類型

可以使用accept屬性指定服務(wù)器接受的文件類型（僅適用于文件類型）。 這與 <input> 元素一起使用。

<input type="file" accept="image/png, image/jpeg" />

21、優(yōu)化視頻加載

您可以通過(guò)使用 <video> 元素的 preload 屬性來(lái)加快視頻文件的加載速度，從而實(shí)現(xiàn)更流暢的播放。

<video src="video.mp4" preload="auto">   Your browser does not support the video tag.</video>


該文章在 2024/5/23 15:47:49 編輯過(guò)
關(guān)鍵字查詢
相關(guān)文章
正在查詢...
點(diǎn)晴ERP是一款針對(duì)中小制造業(yè)的專業(yè)生產(chǎn)管理軟件系統(tǒng),系統(tǒng)成熟度和易用性得到了國(guó)內(nèi)大量中小企業(yè)的青睞。
點(diǎn)晴PMS碼頭管理系統(tǒng)主要針對(duì)港口碼頭集裝箱與散貨日常運(yùn)作、調(diào)度、堆場(chǎng)、車隊(duì)、財(cái)務(wù)費(fèi)用、相關(guān)報(bào)表等業(yè)務(wù)管理，結(jié)合碼頭的業(yè)務(wù)特點(diǎn)，圍繞調(diào)度、堆場(chǎng)作業(yè)而開(kāi)發(fā)的。集技術(shù)的先進(jìn)性、管理的有效性于一體，是物流碼頭及其他港口類企業(yè)的高效ERP管理信息系統(tǒng)。
點(diǎn)晴WMS倉(cāng)儲(chǔ)管理系統(tǒng)提供了貨物產(chǎn)品管理,銷售管理,采購(gòu)管理,倉(cāng)儲(chǔ)管理,倉(cāng)庫(kù)管理,保質(zhì)期管理,貨位管理,庫(kù)位管理,生產(chǎn)管理,WMS管理系統(tǒng),標(biāo)簽打印,條形碼,二維碼管理,批號(hào)管理軟件。
點(diǎn)晴免費(fèi)OA是一款軟件和通用服務(wù)都免費(fèi)，不限功能、不限時(shí)間、不限用戶的免費(fèi)OA協(xié)同辦公管理系統(tǒng)。
Copyright 2010-2025 ClickSun All Rights Reserved