HTML是用于構(gòu)建網(wǎng)頁的核心語言,隨著HTML版本的不斷更新,標(biāo)簽和屬性也隨之發(fā)生了變化。HTML5是當(dāng)前最新的HTML版本,相較于HTML4有很多新的特性和語法。
HTML4: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> HTML5: <!DOCTYPE html>
HTML5中的DOCTYPE聲明更加簡潔,不需要指定DTD。這也是最基本的HTML4轉(zhuǎn)HTML5代碼。除此之外,HTML5還有許多新的語法和標(biāo)簽,如header、footer、nav、article等。
HTML4: <div id="header"> <h1>網(wǎng)站標(biāo)題</h1> </div> HTML5: <header> <h1>網(wǎng)站標(biāo)題</h1> </header>
HTML5中的header標(biāo)簽用于定義一個(gè)網(wǎng)頁或文檔的頭部,整個(gè)文檔可以包括多個(gè)header標(biāo)簽。同樣的,HTML5中的footer、nav、article等標(biāo)簽也有各自的用途。
HTML4: <img src="logo.png" alt="網(wǎng)站Logo"> HTML5: <picture> <!-- 首先指定默認(rèn)圖像 --> <source srcset="logo.webp" type="image/webp"> <source srcset="logo.jpg" type="image/jpeg"> <source srcset="logo.png" type="image/png"> <!-- 如果以上資源都加載失敗,則顯示備用圖像 --> <img src="logo.png" alt="網(wǎng)站Logo"> </picture>
HTML5中的picture標(biāo)簽用于提供多種格式和大小的圖片,使網(wǎng)站能夠更好地適應(yīng)不同的設(shè)備和網(wǎng)絡(luò)條件。在picture標(biāo)簽中,可以通過source標(biāo)簽指定多個(gè)圖片資源,并在最后添加一個(gè)img標(biāo)簽作為備用圖像。
以上是HTML4轉(zhuǎn)HTML5代碼的一些示例,隨著HTML5標(biāo)準(zhǔn)的普及,越來越多的網(wǎng)站都在逐步升級到HTML5。