今天我們一起來探究一下百度頁面的HTML與CSS代碼吧！
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>百度一下，你就知道</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="wrapper"> <div class="logo"> <img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png"> </div> <div class="search-box"> <form action="https://www.baidu.com/s" method="get"> <input type="text" name="wd" id="search-input"> <button type="submit" id="search-btn">百度一下</button> </form> <div class="search-buttons"> <a href="#" class="search-btn">新聞</a> <a href="#" class="search-btn">圖片</a> <a href="#" class="search-btn">視頻</a> </div> </div> </div> <script src="script.js"></script> </body> </html>
首先我們看到在頭部使用了meta標簽指定了UTF-8字符集，這保證了頁面可以正確解析各種字符。同時也在頭部使用了link標簽引入了樣式表style.css。
在body標簽中，我們可以看到頁面主要使用了一個包裹器wrapper（即class屬性為wrapper的div元素）。在wrapper中又分別包括了logo與search-box兩個div元素用于分別展示百度logo及搜索框等內容。
在搜索框中，我們看到使用了form元素及input元素用于構造表單，并為其指定了action屬性及method屬性。這表示表單將以GET方式提交到地址為https://www.baidu.com/s的頁面上。
最后，我們看到該頁面引入了script.js文件，用于存放JavaScript腳本。這些腳本將實現諸如頁面交互等功能。