当前位置：网站首页 > 资讯百科 > SEO优化 > 正文

网页结构类型（附HTML网页结构详解和分析）

小武-网站专员 2022-05-24 23:24:20 320

7.1 网页结构

网页结构，即网页内容的布局。创建网页结构，实际上就是对网页内容的布局进行规划。网页结构的创建是页面优化的重要环节之一，会直接影响页面的用户体验及相关性。而且，还在一定程度上影响网站的整体结构及页面被收录的数量（请查看第 8 章）。

了解网页结构，通常从认识网页的组成元素开始。

有人说“互联网中有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><metacharset="utf-8"/><title>注册页</title></head><!--网页体--><body><!--表单标签--><formaction="/register"method="post"><div>用户名：<inputtype="text"name="username"/></div><div>性&nbsp;&nbsp;&nbsp;别：<inputname="sex"type="radio"checked="checked"/>男 <inputname="sex"type="radio"/>女 </div><div>密&nbsp;&nbsp;&nbsp;码：<inputtype="text"name="password"/></div><br/><inputtype="submit"value="注册"style="width:150px;"/></form></body></html>

网页结构类型（附HTML网页结构详解和分析）

上面是一个非常简陋的用户注册页面（用于教学），用户可以输入用户名性别和密码然后点注册就提交到服务器，下面我们来稍微讲解以下这个页面。

html标签对限定了文档的开始点和结束点，所有的元素和标签都应该放在他们之间。
head标签对表示网页头部信息，其中包含了网页标题、网页编码、网站ico、网站引入的一些静态资源（css、js）以及网站关键字SEO相关信息等。
body标签对表示网页体，几乎所有的网页内容都在这里展现。
form标签对表示创建表单，表单用于向服务器传输数据，能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。
div标签对是目前网页中比较流行的标签，在七八年年流行使用table来构思一个网页，把一个网页想象成多少行多少列，这种构思灵活性和维护性极差，并且Table标签构思的网页对google爬虫和百度等这种搜索引擎收录性很差，遇到多层表格嵌套时，会跳过嵌套的内容或直接放弃整个页面。

所以目前前端流行使用div+css来构思网页，这样的优点是代码精简、有很好的灵活性和可维护性。
input标签用于搜集用户信息，它可以根据不同的 type 属性值，输入字段拥有很多种形式。

输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。