網頁結構簡介

時間 2019-12-07

標籤網頁結構簡介欄目 HTML 简体版

原文原文鏈接

有人說「互聯網中有50%以上的流量是爬蟲」，第一次聽這句話也許你會以爲這個說法實在太誇張了，怎麼可能爬蟲比用戶還多呢？畢竟會爬蟲的相對與不會爬蟲的簡直少之又少。css

可是不少爬蟲工程師或者反爬蟲工程師講了實話：50%？你在逗我？就這麼少的量？而後他舉出例子：html

某個公司的某個頁面的某個接口，每分鐘訪問量是1.2萬左右，這裏面有都少正經常使用戶呢？50%？60%？正確答案是：500個如下，那咱們來算算爬蟲佔比：（12000-500）/12000=95.8%前端

沒錯95.8%，這是一位反爬蟲工程師給出的爬蟲佔比！！！那這麼多的爬蟲它們在互聯網上作什麼呢？答案固然是：孜孜不倦的爬取爬取網頁信息。今天咱們就來說講組成互聯網的重要部分之一：HTML網頁。node

1、起源與發展

前面咱們介紹HTTP的時候，給你們講過是萬維網的發明者，互聯網之父計算機科學家蒂姆·伯納斯·李，在他最初的構想組成中就有：提出使用HTML超文本標記語言(Hypertext Markup Language)做爲建立網頁的標準。你們千萬記住HTML並非一種編程語言，而是一種標記語言 (markup language)，由W3C（萬維網聯盟）制定標準，而後由個大瀏覽器廠商本身去實現支持！jquery

下面咱們來看看HTML標準的發展歷史：程序員

2、組成部分

咱們常說的網頁就是HTML頁面，而構成HTML頁面的東西有不少，如：html標籤、數據、css樣式、js等，那咱們就主要講講如下這幾個組成部分。web

1.HTML標籤

HTML標籤是構成HTML頁面的主要組成部分，咱們來看一個HTML實際例子：面試

<!--註冊頁-->
<html>
	<!--網頁頭-->
	<head>
		<meta charset="utf-8" />
		<title>註冊頁</title>
	</head>
	<!--網頁體-->
	<body>
		<!--表單標籤-->
		<form action="/register" method="post">
			<div>用戶名：<input type="text" name="username"/></div>
			<div>性&nbsp;&nbsp;&nbsp;別：
				<input name="sex" type="radio" checked="checked"/>男
				<input name="sex" type="radio" />女
			</div>
			<div>密&nbsp;&nbsp;&nbsp;碼：<input type="text" name="password"/></div>
			<br/>
			<input type="submit" value="註冊" style="width:150px;" />
		</form>
	</body>
</html>

上面是一個很是簡陋的用戶註冊頁面（用於教學），用戶能夠輸入用戶名性別和密碼而後點註冊就提交到服務器，下面咱們來稍微講解如下這個頁面。ajax

html標籤對限定了文檔的開始點和結束點，全部的元素和標籤都應該放在他們之間。
head標籤對表示網頁頭部信息，其中包含了網頁標題、網頁編碼、網站ico、網站引入的一些靜態資源（css、js）以及網站關鍵字SEO相關信息等。
body標籤對表示網頁體，幾乎全部的網頁內容都在這裏展示。
form標籤對表示建立表單，表單用於向服務器傳輸數據，可以包含 input 元素，好比文本字段、複選框、單選框、提交按鈕等等。
div標籤對是目前網頁中比較流行的標籤，在七八年年流行使用table來構思一個網頁，把一個網頁想象成多少行多少列，這種構思靈活性和維護性極差，而且Table標籤構思的網頁對google爬蟲和百度等這種搜索引擎收錄性不好，遇到多層表格嵌套時，會跳過嵌套的內容或直接放棄整個頁面。因此目前前端流行使用div+css來構思網頁，這樣的優勢是代碼精簡、有很好的靈活性和可維護性。
input標籤用於蒐集用戶信息，它能夠根據不一樣的 type 屬性值，輸入字段擁有不少種形式。輸入字段能夠是文本字段、複選框、掩碼後的文本控件、單選按鈕、按鈕等等。

其餘的HTML標籤豬哥就很少講，但願你們本身去網上學習。數據庫

在有些初級web工程師面試中，面試過程當中可能會讓你手寫一個用戶註冊功能，這裏豬哥給你們講講大概的流程：

用戶點擊註冊鏈接（通常是get請求/register），而後服務器響應此請求返回一個註冊頁面
用戶輸入用戶名密碼、圖形驗證碼等信息，提交註冊信息（通常是post請求/register）
服務端收到信息後對信息作校驗（通常是先後端雙校驗），而後存入數據庫，返回註冊成功提示

2.數據

互聯網主要起到了信息交流的做用，而網頁做爲主要的信息交換載體，標籤的主要做用就是包裹數據，讓數據可以以人類可視的方式展示。

尤爲是一些新聞網站，他們主要以展現新聞信息爲主，咱們以頭條網頁來說講：在紅色框中圈出來的這些新聞，他們是把數據包裹在html標籤中，而後以列表的形式展現給用戶，接着咱們來看看網頁代碼：咱們能夠看到新聞標題被a標籤包圍，還有一些如縮略圖、評論數、時間等信息構成了一條新聞簡述，而後多個新聞（li標籤）構成了一個列表（ul）。

那服務器是如何將數據與封裝到頁面中去的呢？

先後端未分離：先後端沒有分離的公司，通常是先由前端工程師寫好頁面（數據寫死），而後由後端程序員合頁面（就是將寫死的數據去掉，而後加上數據字段）。
先後端分離：先後端沒分離最大的問題就是同一個頁面可能先後端開發同窗都會去修改，修改的人少還行，可是若是開發人員一多，你們改來改去全亂了，並且發佈也會有必定的限制，因此目前流行先後端分離，後端同窗只須要提供數據，前端同窗搭一個nodejs後臺本身渲染頁面。

拿上面咱們的簡陋的註冊頁面來說講先後端未分離時具體返回頁面步驟，假設咱們用戶註冊成功而後登陸，登陸成功咱們直接跳轉用戶主頁展現用戶名和性別，頁面如上圖，步驟以下：

用戶登陸成功，在數據庫中讀取用戶信息。
讀取到用戶數據後進行頁面渲染
返回渲染後的頁面給瀏覽器

3.CSS樣式

html標籤+數據構成了整個網頁的骨架，可是隻有數據和html標籤的網頁是奇醜無比的層疊樣式表(英文全稱：Cascading Style Sheets 簡稱CSS)是一種用來表現HTML等文件樣式的計算機語言。css能夠定義html現實的樣式，能夠實現不少不一樣的效果、排版等等，html中全部的元素幾乎都須要css來管理樣式，並且如今愈來愈流行div+css搭配控制頁面排版和樣式，css主要經過三大選擇器來修飾html標籤。

沒有css的頁面將會是雜亂無章或缺乏美感的頁面，咱們以上面簡單的用戶主頁爲例子演示如何使用css以及css的功能。效果：代碼： css：

4.js

css使頁面有了很好看的樣式，可是卻沒有很好的交互性，何爲交互性？就是用戶在使用產品時的瀏覽、點擊、切換使之方便、快捷、平滑都很合理，很友好。

而js（JavaScript）則是增長網頁的動態功能，它定義了網頁的行爲，提升用戶體驗。好比js能夠監控到用戶的點擊，滑動等動做，而後根據用戶的這些動做來作一些操做。

咱們仍是以上面簡單的用戶主頁爲例子，用js（或jquery）來實現用戶修改用戶名或者性別信息。代碼：效果：一個大概的修改用戶信息流程：

點擊修改後經過js現實出輸入框
在用戶輸入的時候用js監聽輸入框內容，及時提醒用戶新的用戶名是否可用
再用戶點擊提交後，用ajax提交，而且作防止重複提交的操做
服務端反饋後用js作提示便可

上面只是給你們作了一個很是簡單的js效果，給零基礎的朋友演示js是什麼，有什麼功能，可是js的功能遠不止這些，如今的js已經在前端、後端以及app中佔據着重要的地位，固然還有使用在反爬蟲的js混淆。

3、總結

因爲篇幅緣由，豬哥這裏只給你們演示一些很是基礎很是簡單的功能，若是想學習網頁的製做同窗們能夠本身去網上學習，這裏推薦一個學習網站：菜鳥教程，但願你們都學習一些前端知識，由於爬蟲的第一步就是分析網頁，而後再根據網頁數據是內嵌在html標籤中，仍是js動態加載，或者網站使用加密或混淆的反扒技術。當遇到反扒高手時，咱們就須要去仔仔細細的分析js，這也被稱爲解毒的過程（反扒工程師在代碼裏投毒）。因此爬蟲與反扒的鬥爭可謂其樂無窮！

1. 網頁結構簡介
2. 網頁簡介
3. HTML網頁簡介
4. 網頁結構的簡介和Xpath語法的入門教程
5. openni2結構簡介
6. Tomcat結構簡介
7. MVC結構簡介
8. 經典網絡結構簡介
9. IPhoneX網頁佈局簡介
10. HTML網頁結構-靜態網頁
更多相關文章...
• Rust 結構體 - RUST 教程
• XML 樹結構 - XML 教程
• Github 簡明教程
• Java Agent入門實戰（一）-Instrumentation介紹與使用

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。