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