進擊のpython
前端學習——網頁分析
學完了html的相關簡單的，入門級別的標簽之后，接下來我們就針對比較主流的網頁
進行一下網頁的結構分析，也就是分析一下它的骨架
小米商城
結構划分
那這么長的網頁我們應該從頭分析
綠色部分：這個是上部分的導航欄，可以稱為副的導航欄
當我們把鼠標放在上面的時候，就變成了一個小手圖標，說明文字使用a標簽寫的
紅色部分：這個是真的導航欄，一般認為有logo的那一行，是導航欄
當我們把鼠標放在上面的時候，就變成了一個小手圖標，說明文字使用a標簽寫的
藍色部分：其實是到頁面的最低端，大約在這個位置，這一部分的都是網頁的內容部分
粉色部分：這部分就是網頁的信息，包括舉報電話等等
所以也就可以看出來，一個網頁大概分為：導航欄，網頁主體，網頁信息這三部分，就像頭身腳一樣！
京東和淘寶的網站划分結構自己去練習好吧
整站分析
他來了！他來了！他帶着div走來了！還記得div是干什么的吧，是不是對網頁進行划分的啊
那我們現在拿出這部分仔細研究：
可以看出來分出了粉色和黃色兩大部分，在黃色部分又分出了綠色和紅色部分
left 12個鏈接 a
right 1個鏈接 a
right 1個鏈接 a
接着分析：
可見這里分了三個部分：
lift logo
圖片鏈接 a+img
mid 9個鏈接 a
right 搜索
from表單
input
大概就是這樣的吧
那這個跟div有什么關系呢？？？看好啊！接下來是偽代碼時間！
<body>
副導航
left 12個鏈接 a
right 1個鏈接 a
right 3個鏈接 a
主導航
lift logo
圖片鏈接 a+img
mid 9個鏈接 a
right 搜索
from表單
input
網頁主體
網頁尾部
</body>
<body>
<div>
<!--副導航-->
left 12個鏈接 a
right 1個鏈接 a
right 3個鏈接 a
</div>
<div>
<!--主導航-->
lift logo
圖片鏈接 a+img
mid 9個鏈接 a
right 搜索
from表單
input
</div>
<div><!--網頁主體--></div>
<div><!--網頁尾部--></div>
</body>
<body>
<div>
<!--副導航-->
<div>
<!--left 12個鏈接 a-->
</div>
<div>
<!--right 1個鏈接 a-->
</div>
<div>
<!--right 3個鏈接 a-->
</div>
</div>
<div>
<!--主導航-->
<div>
<!--lift logo-->
<!--圖片鏈接 a+img-->
</div>
<div>
<!--mid 9個鏈接 a-->
</div>
<div>
<!--right 搜索-->
<!--from表單-->
<!--input-->
</div>
</div>
<div><!--網頁主體--></div>
<div><!--網頁尾部--></div>
</body>
能跟上？？？那繼續！
<body>
<div>
<!--副導航-->
<div>
<!--left 12個鏈接 a-->
<a href=""></a><a href=""></a><a href=""></a><a href=""></a><a href=""></a><a href=""></a><a
href=""></a><a href=""></a><a href=""></a><a href=""></a><a href=""></a><a href=""></a>
</div>
<div>
<!--right 1個鏈接 a-->
<a href=""></a>
</div>
<div>
<!--right 3個鏈接 a-->
<a href=""></a>
<a href=""></a>
<a href=""></a>
</div>
</div>
<div>
<!--主導航-->
<div>
<!--lift logo-->
<img src="" alt="">
<!--圖片鏈接 a+img-->
<a href=""></a>
</div>
<div>
<!--mid 9個鏈接 a-->
<a href=""></a><a href=""></a><a href=""></a><a href=""></a><a href=""></a><a href=""></a><a
href=""></a><a href=""></a><a href=""></a>
</div>
<div>
<!--right 搜索-->
<!--from表單-->
<!--input-->
<form action="">
<input type="text">
<input type="submit">
</form>
</div>
</div>
<div><!--網頁主體--></div>
<div><!--網頁尾部--></div>
</body>
最后我們加點細節：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>body標簽的使用</title>
</head>
<body>
<div>
<!--副導航-->
<div>
<!--left 12個鏈接 a-->
<a href="">小米商城</a>
<a href="">MIUI</a>
<a href="">IoT</a>
<a href="">雲服務</a>
<a href="">金融</a>
<a href="">有品</a>
<a href="">小愛開放平台</a>
<a href="">企業團購</a>
<a href="">資質證照</a>
<a href="">協議規則</a>
<a href="">下載app</a>
<a href="">Select Location</a>
</div>
<div>
<!--right 3個鏈接 a-->
<a href="">登錄</a>
<a href="">注冊</a>
<a href="">消息通知</a>
</div>
<div>
<!--right 1個鏈接 a-->
<a href="">購物車</a>
</div>
</div>
<div>
<!--主導航-->
<div>
<!--lift logo-->
<!--圖片鏈接 a+img-->
<a href=""><img src="#" alt=""></a>
</div>
<div>
<!--mid 9個鏈接 a-->
<a href="">小米手機</a>
<a href="">Redmi 紅米</a>
<a href="">電視</a>
<a href="">筆記本</a>
<a href="">家電</a>
<a href="">路由器</a>
<a href="">智能硬件</a>
<a href="">服務</a>
<a href="">社區</a>
</div>
<div>
<!--right 搜索-->
<!--from表單-->
<!--input-->
<form action="">
<input type="text" placeholder="Redmi Note 8 pro 小米9">
<input type="submit" value="#">
</form>
</div>
</div>
<div><!--網頁主體--></div>
<div><!--網頁尾部--></div>
</body>
</html>
有的同學可能要說，這排版不對啊，不在一行啊~
這不好看啊！這圖片啥的背景顏色呢？
放心，到學習位置布局和CSS的時候，這些問題迎刃而解！
看，前端就是這么簡單！
自己試試來一下京東和淘寶啊！