HTML5響應式網頁是一種新型的網頁設計方式,可以自適應屏幕大小,使用戶在不同設備上都可以得到更好的瀏覽體驗。下面是一段典型的HTML5響應式網頁代碼:
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>My Responsive Website</title><link rel="stylesheet" href="styles.css"></head><body><header><h1>My Responsive Website</h1></header><nav><ul><li><a href="#">Home</a></li><li><a href="#">About</a></li><li><a href="#">Services</a></li><li><a href="#">Contact</a></li></ul></nav><main><p>Welcome to my website!</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p></main><footer><p>© 2021 My Responsive Website</p></footer></body></html>上面的代碼使用了HTML5的一些新特性,如`<nav>`、`<header>`、`<main>`和`<footer>`標簽,用來定義頁面的導航、頭部、主要內容和底部。同時也使用了`<meta>`標簽來定義頁面的編碼方式和視口大小,并使用外部的CSS樣式表`styles.css`來控制頁面的布局和樣式。 在移動設備上瀏覽這個網頁時,頁面會根據設備的屏幕大小來自動調整布局和字體大小,使得頁面在各種設備上都具有良好的閱讀和瀏覽體驗。這種響應式設計方式是現代網頁設計中不可或缺的一部分,能夠提高用戶的滿意度和使用體驗。