将裸睡的猪设为星标第一时间阅读精品
有人说“互联网中有50%以上的流量是爬虫”，第一次听这句话也许你会觉得这个说法实在太夸张了，怎么可能爬虫比用户还多呢？毕竟会爬虫的相对与不会爬虫的简直少之又少。
但是很多爬虫工程师或者反爬虫工程师讲了实话：50%？你在逗我？就这么少的量？然后他举出例子：
某个公司的某个页面的某个接口，每分钟访问量是1.2万左右，这里面有都少正常用户呢？50%？60%？正确答案是：500个以下，那我们来算算爬虫占比：（12000-500）/12000=95.8%
没错95.8%，这是一位反爬虫工程师给出的爬虫占比！！！
那这么多的爬虫它们在互联网上做什么呢？答案当然是：孜孜不倦的爬取爬取网页信息。今天我们就来讲讲组成互联网的重要部分之一：HTML网页。
一、起源与发展
前面我们介绍HTTP的时候，给大家讲过是万维网的发明者，互联网之父计算机科学家蒂姆·伯纳斯·李，在他最初的构想组成中就有：提出使用HTML超文本标记语言(Hypertext Markup Language)作为创建网页的标准。
大家千万记住HTML并不是一种编程语言，而是一种标记语言 (markup language)，由W3C（万维网联盟）制定标准，然后由个大浏览器厂商自己去实现支持！
下面我们来看看HTML标准的发展历史：
二、组成部分
我们常说的网页就是HTML页面，而构成HTML页面的东西有很多，如：html标签、数据、css样式、js等，那我们就简单的讲讲以下这几个组成部分。
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>性 别：<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>上面是一个非常简陋的用户注册页面（用于教学），用户可以输入用户名性别和密码然后点注册就提交到服务器，下面我们来稍微讲解以下这个页面。
其他的HTML标签猪哥就不多讲，希望大家自己去网上学习。
在有些初级web工程师面试中，面试过程中可能会让你手写一个用户注册功能，这里猪哥给大家讲讲大概的流程：
用户点击注册连接（一般是get请求/register），然后服务器响应此请求返回一个注册页面
用户输入用户名密码、图形验证码等信息，提交注册信息（一般是post请求/register）
服务端收到信息后对信息做校验（一般是前后端双校验），然后存入数据库，返回注册成功提示
2.数据
互联网主要起到了信息交流的作用，而网页作为主要的信息交换载体如何修改网页上的内容，标签的主要作用就是包裹数据，让数据能够以人类可视的方式展现。
尤其是一些新闻网站，他们主要以展示新闻信息为主，我们以头条网页来讲讲：
在红色框中圈出来的这些新闻，他们是把数据包裹在html标签中，然后以列表的形式展示给用户，接着我们来看看网页代码：
我们可以看到新闻标题被a标签包围，还有一些如缩略图、评论数、时间等信息构成了一条新闻简述，然后多个新闻（il标签）构成了一个列表（ul）。
那服务器是如何将数据与封装到页面中去的呢？
拿上面我们的简陋的注册页面来讲讲前后端未分离时具体返回页面步骤，假设我们用户注册成功然后登录，登录成功我们直接跳转用户主页展示用户名和性别，页面如上图，步骤如下：
用户登录成功，在数据库中读取用户信息。
读取到用户数据后进行页面渲染
返回渲染后的页面给浏览器
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提交，并且做防止重复提交的操作
版权声明
本文仅代表作者观点。
本文系作者授权发表，未经许可，不得转载。
发表评论