用HTML寫出綻放的煙花

下是一個使用HTML和CSS實現綻放的煙花的示例代碼：

```html

<!DOCTYPE html>

<html>

<head>

<title>綻放的煙花</title>

<style>

.firework {

position: relative;

width: 100px;

height: 100px;

background-color: #ff0000;

border-radius: 50%;

animation: explode 1s ease-in-out infinite;

}

@keyframes explode {

0% {

transform: scale(1);

opacity: 1;

}

50% {

transform: scale(1.5);

opacity: 0.5;

}

100% {

transform: scale(1);

opacity: 1;

}

</style>

</head>

<body>

</body>

</html>

```

這段代碼創建了一個`div`元素，并將其樣式設置為一個圓形的紅色煙花。使用CSS的動畫效果，通過`@keyframes`定義了一個名為`explode`的動畫，使煙花在1秒鐘內以縮放的方式產生綻放效果。動畫會無限循環播放，直到頁面關閉。

你可以將上述代碼保存為一個HTML文件，并在瀏覽器中打開，就能看到綻放的煙花效果了。希望你喜歡！

端訓練營：1v1私教，終身輔導計劃，幫你拿到滿意的 offer。 已幫助數百位同學拿到了中大廠 offer。歡迎來撩~~~~~~~~

Hello，大家好，我是 Sunday。

說起 HTML 很多同學都會認為，這不就是小菜一碟嗎？這玩意有啥難度？你也太瞧不起我了吧！

不過看似越簡單的東西，我們越會忽略，同時它們還可以提供出令人驚艷的效果！

01：使用 Popover 屬性構建可訪問的原生彈出框元素

過去，我們經常使用本機瀏覽器窗口作為彈出框元素來顯示頂層內容（例如：常見的 dialog）。

可是這些默認的彈窗并不友好。所以后來，我們使用外部庫（Element、AntD 等）構建了頁面內的、經過CSS樣式化的彈出框，以好看的UI方式方式顯示此類內容。

不過現在，你可以使用純HTML創建彈出框，而無需編寫任何JavaScript代碼。現代Web標準通過Popover API提供了內置的彈出框支持。

看下面的源代碼：

<style>
  div[popover]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
  }
  
  div[popover] {
    padding: 12px;
    border: none;
  }
</style>

<div id="pop" popover>
  我是彈出的內容
</div>

<button popovertarget="pop">展示 popover</button>

上述HTML使用了 popover 屬性來實現一個簡單的彈出框元素。

它使用 popovertarget 屬性來在不使用JavaScript的情況下顯示彈出框元素。此外，我們使用了 ::backdrop 偽元素來樣式化彈出框的背景：

你可以使用 @starting-style 為原生彈出框添加動畫，正如 MDN 文檔（https://developer.mozilla.org/en-US/docs/Web/CSS/@starting-style）中所解釋的那樣。

02：在對話框和頁面中使用 autofocus 屬性

HTML標準提供了 autofocus 屬性，用于在頁面加載和對話框/彈出框顯示狀態下自動聚焦表單元素。

看下面的示例模態框，它在第一個輸入已經預填充的情況下自動將焦點設置到第二個文本輸入框上：

<dialog id="dlg">
  <form method="dialog">
    <input type="text" placeholder="Firstname" value="張" />
    <div style="height: 8px"></div>
    <input type="text" placeholder="Lastname" autofocus />
    <div style="height: 8px"></div>
    <button>保存</button>
  </form>
</dialog>
<button onclick="document.getElementById('dlg').showModal()" autofocus>點我</button>

上面的HTML在兩個地方使用了 autofocus 屬性：

在顯示模態框的按鈕元素中，在頁面加載事件后聚焦它。
在第二個文本輸入框中，自動將焦點設置到它，因為第一個文本輸入框已經預填充。

此外，我們還使用了 method="dialog" 屬性來設置關閉對話框而無需使用JavaScript代碼。

03：使用 pattern 屬性在文本輸入框中進行原生驗證

表單校驗是日常開發的常見需求。不過當我們脫離了 Element、AntD 這些組件庫之后，你還知道如何實現表單校驗嗎？

其實對于 HTML的 input 元素來說，它是有 pattern 屬性的

假設我們需要驗證一個產品標識符，它包含兩個英文字母和六個數字，用連字符連接，即 GR-100200。

以下HTML片段實現了上述要求的驗證功能的文本輸入框：

<form>
  <label for="productID"> ID:</label>
  <input type="text" id="productID" name="productID" pattern="[A-Za-z]{2}-\d{6}" title="Please enter a valid product identifier (e.g., GR-100200)" required>
  <button type="submit">Submit</button>
</form>

在上面的示例中，我們使用 pattern 屬性設置了一個正則表達式，用于驗證產品標識符。此正則表達式要求兩個英文字母（不區分大小寫）后跟一個連字符，然后是六個數字。另外，我們還添加了 title 屬性，以提供關于輸入格式的說明。最后，我們將 required 屬性添加到輸入元素上，以確保用戶輸入有效的產品標識符。

這里，pattern 屬性通過顯示瀏覽器特定的驗證消息來阻止表單提交無效輸入。但是他必須要在點擊了提交按鈕之后才可以進行校驗。

如果我們想要進行實時校驗（根據輸入內容實時校驗）怎么辦呢？

04：使用 :valid 和 :invalid CSS 偽類來實現 pattern 的實時驗證

我們可以使用 :valid 和 :invalid CSS 偽類來實現 pattern 的實時驗證，如下所示的 HTML 代碼片段所示：

<style>
  input[type=text] {
    border: #000 1px solid;
    border-radius: 4px;
    outline: none;
    padding: 6px;
  }

  input[type=text]:invalid {
    border: red 1px solid;

    +span::before {
      content: '?';
      display: inline;
      color: red;
    }
  }

  input[type=text]:valid {
    border: green 1px solid;

    +span::before {
      content: '?';
      display: inline;
      color: green;
    }
  }
</style>

<input type="text" placeholder="i.e., GR-100200" pattern="[A-Z]{2}-[0-9]{6}" required />
<span></span>

上面的HTML片段使用CSS代碼根據驗證狀態設置樣式。無效輸入會將輸入框邊框設置為紅色，并顯示紅色的叉號。與此同時，有效輸入會呈現綠色邊框和綠色的勾號符號：

05：處理移動虛擬鍵盤模式的 inputmode 屬性

手機通過虛擬鍵盤進行輸入，這個鍵盤有幾種模式。

例如，它可能僅顯示數字鍵用于數字輸入元素，對于一般的字符串輸入則顯示完整的鍵盤界面。移動瀏覽器會根據輸入類型自動更改虛擬鍵盤模式，但開發人員也可以使用 input 元素的 inputmode 屬性進行自定義。

<input type="text" pattern="[0-9]{6}" inputmode="numeric" maxlength="6">

在上面的示例中，我們使用了 inputmode 屬性來指定虛擬鍵盤的模式為 numeric，以便在移動設備上只顯示數字鍵盤。同時，我們還使用了 pattern 屬性來限制輸入只能是六位數字。maxlength 屬性限制輸入的最大長度為六位。

06：使用 loading 屬性實現瀏覽器級別的圖片懶加載

圖片懶加載是日常開發中的常見需求。我們在實現懶加載時大多數會使用一些現成的庫或者基于 Intersection Observer API 進行處理

不過很多同學不知道的是：img 標簽的 loading 屬性可以讓你在不編寫JavaScript代碼或使用第三方庫的情況下啟用瀏覽器級別的圖片懶加載。

看下面的源代碼：

<div style="height: 2000px"></div>

<img src="https://gips3.baidu.com/it/u=45328832,131546734&fm=3039&app=3039&f=JPEG?w=1024&h=1024
" loading="lazy" />

以這種方式實現圖片懶加載的功能，當頁面往下滾動的時候，圖片動態加載：

. 對 HTML 語義化的理解

語義化是指根據內容的結構化（內容語義化），選擇合適的標簽（代碼語義化）。通俗來講就是用正確的標簽做正確的事情。

語義化的優點如下：

對機器友好，帶有語義的文字表現力豐富，更適合搜索引擎的爬蟲爬取有效信息，有利于 SEO。除此之外，語義類還支持讀屏軟件，根據文章可以自動生成目錄；

對開發者友好，使用語義類標簽增強了可讀性，結構更加清晰，開發者能清晰地看出網頁的結構，便于團隊的開發與維護。

常見的語義化標簽：

2. DOCTYPE(?檔類型) 的作?

DOCTYPE 是 HTML5 中一種標準通用標記語言的文檔類型聲明，它的目的是告訴瀏覽器（解析器）應該以什么樣（html 或 xhtml）的文檔類行定義來解析文檔，不同的渲染模式會影響瀏覽器對 CSS 代碼甚?JavaScript 腳本的解析。它必須聲明在 HTML?檔的第??。

瀏覽器渲染頁面的兩種模式（可通過 document.compatMode 獲取，比如，語雀官網的文檔類型是 CSS1Compat）：

CSS1Compat：標準模式（Strick mode），默認模式，瀏覽器使用 W3C 的標準解析渲染頁面。在標準模式中，瀏覽器以其支持的最高標準呈現頁面。

BackCompat：怪異模式(混雜模式)(Quick mode)，瀏覽器使用自己的怪異模式解析渲染頁面。在怪異模式中，頁面以一種比較寬松的向后兼容的方式顯示。

3. script 標簽中 defer 和 async 的區別

如果沒有 defer 或 async 屬性，瀏覽器會立即加載并執行相應的腳本。它不會等待后續加載的文檔元素，讀取到就會開始加載和執行，這樣就阻塞了后續文檔的加載。

下圖可以直觀地看出三者之間的區別:

其中藍色代表 js 腳本網絡加載時間，紅色代表 js 腳本執行時間，綠色代表 html 解析。

defer 和 async 屬性都是去異步加載外部的 JS 腳本文件，它們都不會阻塞頁面的解析，其區別如下：

執行順序：多個帶 async 屬性的標簽，不能保證加載的順序；多個帶 defer 屬性的標簽，按照加載順序執行；

腳本是否并行執行：async 屬性，表示后續文檔的加載和執行與 js 腳本的加載和執行是并行進行的，即異步執行；defer 屬性，加載后續文檔的過程和 js 腳本的加載(此時僅加載不執行)是并行進行的(異步)，js 腳本需要等到文檔所有元素解析完成之后才執行，DOMContentLoaded 事件觸發執行之前。

4. 行內元素有哪些？塊級元素有哪些？空(void)元素有那些？

行內元素有：a b span img input select strong；

塊級元素有：div ul ol li dl dt dd h1 h2 h3 h4 h5 h6 p；

空元素，即沒有內容的 HTML 元素。空元素是在開始標簽中關閉的，也就是空元素沒有閉合標簽：

常見的有：<br>、<hr>、<img>、<input>、<link>、<meta>；

鮮見的有：<area>、<base>、<col>、<colgroup>、<command>、<embed>、<keygen>、<param>、<source>、<track>、<wbr>。

5. 瀏覽器是如何對 HTML5 的離線儲存資源進行管理和加載？

在線的情況下，瀏覽器發現 html 頭部有 manifest 屬性，它會請求 manifest 文件，如果是第一次訪問頁面，那么瀏覽器就會根據 manifest 文件的內容下載相應的資源并且進行離線存儲。如果已經訪問過頁面并且資源已經進行離線存儲了，那么瀏覽器就會使用離線的資源加載頁面，然后瀏覽器會對比新的 manifest 文件與舊的 manifest 文件，如果文件沒有發生改變，就不做任何操作，如果文件改變了，就會重新下載文件中的資源并進行離線存儲。

離線的情況下，瀏覽器會直接使用離線存儲的資源。

6. Canvas 和 SVG 的區別

（1）SVG：

SVG 可縮放矢量圖形（Scalable Vector Graphics）是基于可擴展標記語言 XML 描述的 2D 圖形的語言，SVG 基于 XML 就意味著 SVG DOM 中的每個元素都是可用的，可以為某個元素附加 Javascript 事件處理器。在 SVG 中，每個被繪制的圖形均被視為對象。如果 SVG 對象的屬性發生變化，那么瀏覽器能夠自動重現圖形。

其特點如下：

不依賴分辨率

支持事件處理器

最適合帶有大型渲染區域的應用程序（比如谷歌地圖）

復雜度高會減慢渲染速度（任何過度使用 DOM 的應用都不快）不適合游戲應用

（2）Canvas：

Canvas 是畫布，通過 Javascript 來繪制 2D 圖形，是逐像素進行渲染的。其位置發生改變，就會重新進行繪制。

其特點如下：

依賴分辨率

不支持事件處理器

弱的文本渲染能力

能夠以 .png 或 .jpg 格式保存結果圖像

最適合圖像密集型的游戲，其中的許多對象會被頻繁重繪

注：矢量圖，也稱為面向對象的圖像或繪圖圖像，在數學上定義為一系列由線連接的點。矢量文件中的圖形元素稱為對象。每個對象都是

一個自成一體的實體，它具有顏色、形狀、輪廓、大小和屏幕位置等屬性。

7. 說一下 HTML5 drag API

dragstart：事件主體是被拖放元素，在開始拖放被拖放元素時觸發。

darg：事件主體是被拖放元素，在正在拖放被拖放元素時觸發。dragenter：事件主體是目標元素，在被拖放元素進入某元素時觸發。dragover：事件主體是目標元素，在被拖放在某元素內移動時觸發。dragleave：事件主體是目標元素，在被拖放元素移出目標元素是觸發。

drop：事件主體是目標元素，在目標元素完全接受被拖放元素時觸發。

dragend：事件主體是被拖放元素，在整個拖放操作結束時觸發。

在線咨詢

上一篇：HTML5：開啟現代網頁設計的新篇章
下一篇：Web 性能優化：使用 CSS font-display 控制字體加載和替換

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商