前端學習（七）：網頁分析

時間 2020-08-10

標籤前端學習網頁分析欄目 HTML 简体版

原文原文鏈接

<center><h3>進擊のpython</h3></center> *****html

前端學習——網頁分析

學完了html的相關簡單的，入門級別的標籤以後，接下來咱們就針對比較主流的網頁前端

進行一下網頁的結構分析，也就是分析一下它的骨架python

小米商城

結構劃分

那這麼長的網頁咱們應該從頭分析app

綠色部分：這個是上部分的導航欄，能夠稱爲副的導航欄佈局

當咱們把鼠標放在上面的時候，就變成了一個小手圖標，說明文字使用a標籤寫的學習

紅色部分：這個是真的導航欄，通常認爲有logo的那一行，是導航欄網站

當咱們把鼠標放在上面的時候，就變成了一個小手圖標，說明文字使用a標籤寫的spa

藍色部分：實際上是到頁面的最低端，大約在這個位置，這一部分的都是網頁的內容部分3d

粉色部分：這部分就是網頁的信息，包括舉報電話等等code

因此也就能夠看出來，一個網頁大概分爲：導航欄，網頁主體，網頁信息這三部分，就像頭身腳同樣！

京東和淘寶的網站劃分結構本身去練習好吧

整站分析

他來了！他來了！他帶着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的時候，這些問題迎刃而解！

看，前端就是這麼簡單！

本身試試來一下京東和淘寶啊！