網(wǎng)頁(yè)結(jié)構(gòu)類型（附HTML網(wǎng)頁(yè)結(jié)構(gòu)詳解和分析）
時(shí)間：2023-09-01 01:24:02 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)
時(shí)間：2023-09-01 01:24:02 來(lái)源：網(wǎng)站運(yùn)營(yíng)
網(wǎng)頁(yè)結(jié)構(gòu)類型（附HTML網(wǎng)頁(yè)結(jié)構(gòu)詳解和分析）：
7.1 網(wǎng)頁(yè)結(jié)構(gòu)
網(wǎng)頁(yè)結(jié)構(gòu) ，即網(wǎng)頁(yè)內(nèi)容的布局。創(chuàng)建網(wǎng)頁(yè)結(jié)構(gòu)，實(shí)際上就是對(duì)網(wǎng)頁(yè)內(nèi)容的布局進(jìn)行規(guī)劃。網(wǎng)頁(yè)結(jié)構(gòu)的創(chuàng)建是頁(yè)面優(yōu)化的重要環(huán)節(jié)之一，會(huì)直接影響頁(yè)面的用戶體驗(yàn)及相關(guān)性。而且，還在一定程度上影響網(wǎng)站的整體結(jié)構(gòu)及頁(yè)面被收錄的數(shù)量（請(qǐng)查看第 8 章）。
了解網(wǎng)頁(yè)結(jié)構(gòu)，通常從認(rèn)識(shí)網(wǎng)頁(yè)的組成元素開(kāi)始。
有人說(shuō)“互聯(lián)網(wǎng)中有50%以上的流量是爬蟲(chóng)”，第一次聽(tīng)這句話也許你會(huì)覺(jué)得這個(gè)說(shuō)法實(shí)在太夸張了，怎么可能爬蟲(chóng)比用戶還多呢？畢竟會(huì)爬蟲(chóng)的相對(duì)與不會(huì)爬蟲(chóng)的簡(jiǎn)直少之又少。
但是很多爬蟲(chóng)工程師或者反爬蟲(chóng)工程師講了實(shí)話：50%？你在逗我？就這么少的量？然后他舉出例子：
某個(gè)公司的某個(gè)頁(yè)面的某個(gè)接口，每分鐘訪問(wèn)量是1.2萬(wàn)左右，這里面有都少正常用戶呢？50%？60%？正確答案是：500個(gè)以下，那我們來(lái)算算爬蟲(chóng)占比：（12000-500）/12000=95.8%
沒(méi)錯(cuò)95.8%，這是一位反爬蟲(chóng)工程師給出的爬蟲(chóng)占比?。。∧沁@么多的爬蟲(chóng)它們?cè)诨ヂ?lián)網(wǎng)上做什么呢？答案當(dāng)然是：孜孜不倦的爬取爬取網(wǎng)頁(yè)信息。今天我們就來(lái)講講組成互聯(lián)網(wǎng)的重要部分之一：HTML網(wǎng)頁(yè)。
一、起源與發(fā)展
前面我們介紹HTTP的時(shí)候，給大家講過(guò)是萬(wàn)維網(wǎng)的發(fā)明者，互聯(lián)網(wǎng)之父計(jì)算機(jī)科學(xué)家蒂姆·伯納斯·李，在他最初的構(gòu)想組成中就有：提出使用HTML超文本標(biāo)記語(yǔ)言(Hypertext Markup Language)作為創(chuàng)建網(wǎng)頁(yè)的標(biāo)準(zhǔn)。
大家千萬(wàn)記住HTML并不是一種編程語(yǔ)言，而是一種標(biāo)記語(yǔ)言 (markup language)，由W3C（萬(wàn)維網(wǎng)聯(lián)盟）制定標(biāo)準(zhǔn)，然后由個(gè)大瀏覽器廠商自己去實(shí)現(xiàn)支持！
下面我們來(lái)看看HTML標(biāo)準(zhǔn)的發(fā)展歷史：
二、組成部分
我們常說(shuō)的網(wǎng)頁(yè)就是HTML頁(yè)面，而構(gòu)成HTML頁(yè)面的東西有很多，如：html標(biāo)簽、數(shù)據(jù)、css樣式、js等，那我們就簡(jiǎn)單的講講以下這幾個(gè)組成部分。
1.HTML標(biāo)簽
HTML標(biāo)簽是構(gòu)成HTML頁(yè)面的主要組成部分，我們來(lái)看一個(gè)HTML實(shí)際例子：
<!--注冊(cè)頁(yè)--><html> <!--網(wǎng)頁(yè)頭--> <head> <meta charset="utf-8" /> <title>注冊(cè)頁(yè)</title> </head> <!--網(wǎng)頁(yè)體--> <body> <!--表單標(biāo)簽--> <form action="/register" method="post"> <div>用戶名：<input type="text" name="username"/></div> <div>性 別：<input name="sex" type="radio" checked="checked"/>男 <input name="sex" type="radio" />女 </div> <div>密 碼：<input type="text" name="password"/></div> <br/> <input type="submit" value="注冊(cè)" style="width:150px;" /> </form> </body></html>
上面是一個(gè)非常簡(jiǎn)陋的用戶注冊(cè)頁(yè)面（用于教學(xué)），用戶可以輸入用戶名性別和密碼然后點(diǎn)注冊(cè)就提交到服務(wù)器，下面我們來(lái)稍微講解以下這個(gè)頁(yè)面。
- html標(biāo)簽對(duì)限定了文檔的開(kāi)始點(diǎn)和結(jié)束點(diǎn)，所有的元素和標(biāo)簽都應(yīng)該放在他們之間。
- head標(biāo)簽對(duì)表示網(wǎng)頁(yè)頭部信息，其中包含了網(wǎng)頁(yè)標(biāo)題、網(wǎng)頁(yè)編碼、網(wǎng)站ico、網(wǎng)站引入的一些靜態(tài)資源（css、js）以及網(wǎng)站關(guān)鍵字SEO相關(guān)信息等。
- body標(biāo)簽對(duì)表示網(wǎng)頁(yè)體，幾乎所有的網(wǎng)頁(yè)內(nèi)容都在這里展現(xiàn)。
- form標(biāo)簽對(duì)表示創(chuàng)建表單，表單用于向服務(wù)器傳輸數(shù)據(jù)，能夠包含 input 元素，比如文本字段、復(fù)選框、單選框、提交按鈕等等。
- div標(biāo)簽對(duì)是目前網(wǎng)頁(yè)中比較流行的標(biāo)簽，在七八年年流行使用table來(lái)構(gòu)思一個(gè)網(wǎng)頁(yè)，把一個(gè)網(wǎng)頁(yè)想象成多少行多少列，這種構(gòu)思靈活性和維護(hù)性極差，并且Table標(biāo)簽構(gòu)思的網(wǎng)頁(yè)對(duì)google爬蟲(chóng)和百度等這種搜索引擎收錄性很差，遇到多層表格嵌套時(shí)，會(huì)跳過(guò)嵌套的內(nèi)容或直接放棄整個(gè)頁(yè)面。
所以目前前端流行使用div+css來(lái)構(gòu)思網(wǎng)頁(yè)，這樣的優(yōu)點(diǎn)是代碼精簡(jiǎn)、有很好的靈活性和可維護(hù)性。 - input標(biāo)簽用于搜集用戶信息，它可以根據(jù)不同的 type 屬性值，輸入字段擁有很多種形式。
輸入字段可以是文本字段、復(fù)選框、掩碼后的文本控件、單選按鈕、按鈕等等。
其他的HTML標(biāo)簽豬哥就不多講，希望大家自己去網(wǎng)上學(xué)習(xí)。
在有些初級(jí)web工程師面試中，面試過(guò)程中可能會(huì)讓你手寫(xiě)一個(gè)用戶注冊(cè)功能，這里豬哥給大家講講大概的流程：
- 用戶點(diǎn)擊注冊(cè)連接（一般是get請(qǐng)求/register），然后服務(wù)器響應(yīng)此請(qǐng)求返回一個(gè)注冊(cè)頁(yè)面
- 用戶輸入用戶名密碼、圖形驗(yàn)證碼等信息，提交注冊(cè)信息（一般是post請(qǐng)求/register）
- 服務(wù)端收到信息后對(duì)信息做校驗(yàn)（一般是前后端雙校驗(yàn)），然后存入數(shù)據(jù)庫(kù)，返回注冊(cè)成功提示
2.數(shù)據(jù)
互聯(lián)網(wǎng)主要起到了信息交流的作用，而網(wǎng)頁(yè)作為主要的信息交換載體，標(biāo)簽的主要作用就是包裹數(shù)據(jù)，讓數(shù)據(jù)能夠以人類可視的方式展現(xiàn)。
尤其是一些新聞網(wǎng)站，他們主要以展示新聞信息為主，我們以頭條網(wǎng)頁(yè)來(lái)講講：
在紅色框中圈出來(lái)的這些新聞，他們是把數(shù)據(jù)包裹在html標(biāo)簽中，然后以列表的形式展示給用戶，接著我們來(lái)看看網(wǎng)頁(yè)代碼：
我們可以看到新聞標(biāo)題被a標(biāo)簽包圍，還有一些如縮略圖、評(píng)論數(shù)、時(shí)間等信息構(gòu)成了一條新聞簡(jiǎn)述，然后多個(gè)新聞（il標(biāo)簽）構(gòu)成了一個(gè)列表（ul）。
那服務(wù)器是如何將數(shù)據(jù)與封裝到頁(yè)面中去的呢？
- 前后端未分離：
前后端沒(méi)有分離的公司，一般是先由前端工程師寫(xiě)好頁(yè)面（數(shù)據(jù)寫(xiě)死），然后由后端程序員合頁(yè)面（就是將寫(xiě)死的數(shù)據(jù)去掉，然后加上數(shù)據(jù)字段）。 - 前后端分離：
前后端沒(méi)分離最大的問(wèn)題就是同一個(gè)頁(yè)面可能前后端開(kāi)發(fā)同學(xué)都會(huì)去修改，修改的人少還行，但是如果開(kāi)發(fā)人員一多，大家改來(lái)改去全亂了，而且發(fā)布也會(huì)有一定的限制，所以目前流行前后端分離，后端同學(xué)只需要提供數(shù)據(jù)，前端同學(xué)搭一個(gè)nodejs后臺(tái)自己渲染頁(yè)面。
拿上面我們的簡(jiǎn)陋的注冊(cè)頁(yè)面來(lái)講講前后端未分離時(shí)具體返回頁(yè)面步驟，假設(shè)我們用戶注冊(cè)成功然后登錄，登錄成功我們直接跳轉(zhuǎn)用戶主頁(yè)展示用戶名和性別，頁(yè)面如上圖，步驟如下：
- 用戶登錄成功，在數(shù)據(jù)庫(kù)中讀取用戶信息。
- 讀取到用戶數(shù)據(jù)后進(jìn)行頁(yè)面渲染
- 返回渲染后的頁(yè)面給瀏覽器
3.CSS樣式
html標(biāo)簽+數(shù)據(jù)構(gòu)成了整個(gè)網(wǎng)頁(yè)的骨架，但是只有數(shù)據(jù)和html標(biāo)簽的網(wǎng)頁(yè)是奇丑無(wú)比的層疊樣式表(英文全稱：Cascading Style Sheets 簡(jiǎn)稱CSS)是一種用來(lái)表現(xiàn)HTML等文件樣式的計(jì)算機(jī)語(yǔ)言。css可以定義html現(xiàn)實(shí)的樣式，可以實(shí)現(xiàn)很多不同的效果、排版等等，html中所有的元素幾乎都需要css來(lái)管理樣式，而且現(xiàn)在越來(lái)越流行div+css搭配控制頁(yè)面排版和樣式，css主要通過(guò)三大選擇器來(lái)修飾html標(biāo)簽。
沒(méi)有css的頁(yè)面將會(huì)是雜亂無(wú)章或缺少美感的頁(yè)面，我們以上面簡(jiǎn)單的用戶主頁(yè)為例子演示如何使用css以及css的功能。效果：
代碼：
css：
4.js
css使頁(yè)面有了很好看的樣式，但是卻沒(méi)有很好的交互性，何為交互性？就是用戶在使用產(chǎn)品時(shí)的瀏覽、點(diǎn)擊、切換使之方便、快捷、平滑都很合理，很友好。
而js（JavaScript）則是增加網(wǎng)頁(yè)的動(dòng)態(tài)功能，它定義了網(wǎng)頁(yè)的行為，提高用戶體驗(yàn)。比如js可以監(jiān)控到用戶的點(diǎn)擊，滑動(dòng)等動(dòng)作，然后根據(jù)用戶的這些動(dòng)作來(lái)做一些操作。
我們還是以上面簡(jiǎn)單的用戶主頁(yè)為例子，用js（或jquery）來(lái)實(shí)現(xiàn)用戶修改用戶名或者性別信息。代碼：
效果：
一個(gè)大概的修改用戶信息流程：
- 點(diǎn)擊修改后通過(guò)js現(xiàn)實(shí)出輸入框
- 在用戶輸入的時(shí)候用js監(jiān)聽(tīng)輸入框內(nèi)容，及時(shí)提醒用戶新的用戶名是否可用
- 再用戶點(diǎn)擊提交后，用ajax提交，并且做防止重復(fù)提交的操作
- 服務(wù)端反饋后用js做提示即可
上面只是給大家做了一個(gè)非常簡(jiǎn)單的js效果，給零基礎(chǔ)的朋友演示js是什么，有什么功能，但是js的功能遠(yuǎn)不止這些，現(xiàn)在的js已經(jīng)在前端、后端以及app中占據(jù)著重要的地位，當(dāng)然還有使用在反爬蟲(chóng)的js混淆。
關(guān)鍵詞：結(jié)構(gòu),分析,類型
在線咨詢