淘寶付款頁面采用了HTML5語言編寫,具有更好的兼容性、更豐富的功能和更高效的性能。下面是淘寶付款頁面的HTML5代碼示例:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>淘寶付款頁面</title> <link rel="stylesheet" href="style.css"> <script src="script.js"></script> </head> <body> <header> <h1>淘寶付款頁面</h1> <nav> <a href="#">首頁</a> <a href="#">購物車</a> </nav> </header> <main> <div class="order-summary"> <h2>訂單信息</h2> <ul> <li>商品名稱:iPhone 12 Pro 256GB 碳晶鉆黑色 x1</li> <li>商品價(jià)格:¥ 9,599.00</li> </ul> </div> <form action="/pay" method="post"> <fieldset> <legend>填寫收貨信息</legend> <label>收貨人姓名:<input type="text" name="name"></label> <label>聯(lián)系電話:<input type="tel" name="tel"></label> <label>收貨地址:<input type="text" name="address"></label> </fieldset> <fieldset> <legend>選擇支付方式</legend> <label><input type="radio" name="payway" value="alipay">支付寶支付</label> <label><input type="radio" name="payway" value="wxpay">微信支付</label> </fieldset> <button type="submit">確認(rèn)支付</button> </form> </main> <footer> <p>版權(quán)所有 ? 2021 淘寶</p> </footer> </body> </html>以上代碼分為頭部、主體和底部三個(gè)部分。頭部包括網(wǎng)站標(biāo)題、頁面樣式和腳本文件;主體包括訂單信息和收貨支付表單;底部包括版權(quán)信息。 在收貨支付表單中,使用了HTML5新增的`input`類型屬性,如`type="tel"`用于輸入電話號(hào)碼,`type="radio"`用于選擇支付方式。此外,使用了`fieldset`標(biāo)簽來分組表單元素,使表單更加清晰易懂。 總的來說,HTML5的優(yōu)越性能讓淘寶付款頁面更加完善,使得用戶可以更快捷地進(jìn)行購物,提高了購物體驗(yàn)。