HTML5是一種用于創建Web內容的標準語言,它提供了更多的語義化元素和API,使得Web應用程序更加可訪問、易維護和易于開發,下面是一些HTML5網頁設計作品代碼的例子:
<!DOCTYPE html> <html> <head> <title>Hello World</title> <meta charset="UTF-8"> </head> <body> <h1>Hello World!</h1> <p>This is my first HTML5 web page.</p> <nav> <ul> <li><a href="#about">About</a></li> <li><a href="#services">Services</a></li> <li><a href="#contact">Contact</a></li> </ul> </nav> <section id="about"> <h2>About</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla pulvinar elit ac orci cursus, sed porttitor ante dictum. Nunc lacus est, eleifend vitae sapien id, fermentum congue leo.</p> </section> <section id="services"> <h2>Services</h2> <ul> <li>Web Design</li> <li>Web Development</li> <li>SEO</li> </ul> </section> <section id="contact"> <h2>Contact</h2> <form> <label for="name">Name:</label> <input type="text" id="name"> <label for="email">Email:</label> <input type="email" id="email"> <label for="message">Message:</label> <textarea id="message"></textarea> <button type="submit">Send</button> </form> </section> </body> </html>
上述代碼展示了一個基本的HTML5網頁設計,其中包括了文本、鏈接、導航、段落、標頭、表單等元素,并使用了新的語義化標簽(如<nav>、<section>等)來幫助解釋文檔內容。
HTML5的另一個重要特性是能夠支持各種媒體類型(包括音頻、視頻、圖像等),下面是一個包含音頻和視頻的HTML5代碼:
<!DOCTYPE html> <html> <head> <title>Media Example</title> <meta charset="UTF-8"> </head> <body> <h1>Media Example</h1> <audio src="song.mp3" controls> <p>Your browser does not support the audio tag.</p> </audio> <video src="movie.mp4" controls> <p>Your browser does not support the video tag.</p> </video> </body> </html>
這段代碼包含了兩個<audio>和<video>元素,分別用于嵌入音頻和視頻文件,并使用了兩個屬性:src用于指定媒體文件的路徑,而controls用于在瀏覽器中顯示控件(比如播放、暫停、音量等)。此外,也增加了備用內容(如<p>標簽)來在不支持該標簽的瀏覽器中顯示一些提示信息。