了解网页结构

时间：2023-09-29 09:42:01 | 来源：网站运营

时间：2023-09-29 09:42:01 来源：网站运营

了解网页结构：写在前面:

推荐用谷歌浏览器,并且学会使用各种插件,用来工作效率比较高.

要学会翻墙,因为中文的世界太小了,墙外有很多好东西.

推荐教程:小甲鱼《python入门》里面爬虫部分前2集,讲解比较通俗易懂.

要增强信息搜集能力,搜索可以解决80%~90%的问题,学会独立思考

---

目录:一 网页结构知识

1 网页组成元素

（1）导航栏

（2）栏目

（3）正文内容

2 网页结构类型




二 什么是HTML?




三 了解CSS和JS

---

一 网页结构知识

网页组成元素

从页面结构的角度上看，网页主要由导航栏、栏目、及正文内容这三大要素组成。网页结构的创建、网页内容布局的规划实际也是围绕这三大组成要素展开的。

（1）导航栏

导航栏是构成网页的重要元素之一，是网站频道入口的集合区域，相当于网站的菜单。

（2）栏目

栏目是指网页中存放相同性质内容的区域。在对页面内容进行布局时，把性质相同的内容安排在网页的相同区域，可以帮助用户快速获取所需信息，对网站内容起到非常好的导航作用。

（3）正文内容

正文内容是指页面中的主体内容。例如一个文章类页面，正文内容就是文章本身；而对于展示产品的网站，正文内容就是产品信息

网页结构类型

创建网页结构实际就是对导航栏、栏目、及正文内容这三大页面基本组成元素进行组织布局。根据页面内容侧重点的不同，我们可以把网页分为导航型、内容型及导航内容结合型三种。 [1]

网页栏目结构一般来说，一个企业网站的一级栏目不应超过8个，而栏目层次以三层以内比较合适。网站栏目设置是一个网站结构的基础，也是网站导航系统的基础，应做到设置合理、层次分明。对网站栏目结构的研究室网络营销导向网站建设的基础。

还有网页的布局，传统的基于HTML的网站设计中，网页结构定位通常有表格定位和框架结构，现在主流是采用表格定位；基于XHTML语言的网站设计中，典型的定位方式采用层。

网页的信息排放一般要注意：重要信息放在首页显著位置；企业网站页面内容不宜太繁杂，与网络营销无关的信息尽量不要放置在主要页面；在页面左上角放置企业LOGO,这是网络品牌展示的一种表现方式；为每个网页预留一定的广告位置；在网站首页等主要页面预留一个合作伙伴链接区，这是开展网站合作的基本需要；公司介绍、联系信息、网站地图等网站公共菜单一般放置在网页最下方；站内检索、会员注册/登陆等服务放置在右侧或中上方显眼位置。

---

二 什么是HTML?




#“HTML是用来做网页的”这句话是不太正确的,“HTML是用于描述超文本的，网页是一个超文本资源节点”。

HTML和网页本无联系。




从前有个少年,总沉溺于关雎之事,渴望与女神一直建立联系

首先要建立向女神寝室的信息通信

为了简化你对复杂的Internet的理解，我们暂时把复杂的Internet抽象成：你向女生宿舍发送信号。

为了能够在断网后继续联络女神，你买来了电池和开关，然后拉了普通电线连到女神的寝室。

你的女神把小灯泡接在了电线的另一端。

那么，你只需要开闭开关，就可以控制女神屋里的灯泡了。

发送信号

关闭着小灯泡1秒钟，代表发送一个0。

打开了小灯泡1秒钟，代表发送一个1。

此时你可以向女神发送任意二进制内容了。

发送文本

你只希望发送一个“Good Night”。

所以你必须想办法对“Good Night”进行编码。

'G','o','o','d'的ASCII编码是：071，111，111，100

把ASCII编码转换成二进制就是： 0100 0001 0110 1111 0110 1111 0110 0100

使用发送二进制信号的方法发过去，你的女神需要自己解码来阅读出“Good”。

发送富文本

(#富文本就是比穷文本有钱的文本,简单点说就是它相对普通文本可以带有丰富的格式设置，使文本的可读性更强。)




有一天，你希望发送“I miss you”。

为了表达心意，你希望加粗“you”，并使用红色的字体发送“miss”。

而……这一根简陋的电线似乎很难理解“加粗”和“红色”……

不过这难不倒你的。

于是机智你发送了：I <red>miss</red> <b>you</b>

同样机智的女神理解了这件事情。

你发明了一种语言

你很喜欢这种编码格式。

这是一种标记语言，于是你称其为：TGML （To Girl Markup Language 为女孩标记的语言）

平时你使用TGML来和你的女神通信。

TGML可以非常好的解决富文本的传输问题。

表白

终于你决定表白了。

你绘制了很美丽的心形图片，还有两个按钮：接受、拒绝。

两个按钮分别会链接到 "接受.tgml"和"拒绝.tgml"

为了描述图片，你使用了<img src="pic">

为了描述按钮，你使用了<a href="接受.tgml">

(#<img src="路径"> <a href="URL">,image图片 source源文件 abbr. horizontal reference水平参考)


现在你发送给女神的内容，已经不只是带格式的富文本，而是带链接的富文本。

如果把带链接的富文本叫超文本。那么……

于是在这个世界上，拥有了一种能够描述超文本的语言，叫做TGML

超文本

描述超文本的方式有很多，例如：HTML，TGML，还有markdown。

HTML的诞生是为了描述超文本。

超文本的用途也很多，例如：描述一个网页，或者描述一个Word文档。

HTML文件是超文本文件。但是超文本未必是HTML( HTML文件 ⊂ 超文本 )。

Microsoft Word

Microsoft Word是Office的一个组件。它同样代表一个超文本资源。

如果你解压一个docx文件并仔细翻一翻，你能找到你刚才写的作业，是以HTML方式记载着。

当然，描述超文本还有markdown。所以你可以使用一些工具，比如pandoc，把markdown转换成word。

故事的结局

你的女神有一个名字，叫浏览器。

你的名字叫Web服务器。

你们中间的那根线，叫HTTP。

总结

HTML用于描述超文本。描述超文本的语言有很多种。

超文本的用途很多。做网页只是其中一种。

HTML最初设计时确实是为了做网页考虑的。但HTML不是做网页的唯一工具。

探索HTML是如何呈现、渲染还有它强大的功能时，你只是在探索你的浏览器的解码能力而已。







#html一般不是ASCII编码，而是utf-8

#HTTP除了要传输内容，还要传输状态码，头，地址等很多信息。上面的文字只是简化了这个模型。

#<Red>不是合法的html标签

#去菜鸟教程速成HTML:https://www.runoob.com/html/html-tutorial.html./n










或者去慕课网系统学习HTML:https://www.imooc.com/learn/9

---

三 了解CSS和JS




上面讲的HTML(超文本标记语言, 标记标签) 我们可以把它说成是静态代码。

“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。




CSS（层叠样式表）

使用CSS制作网页时，可以有效地对页面的布局、边框、字体、颜色、背景和其它效果实现更加精确的控制。




JavaScript (是世界上最流行的网上最流行的脚本语言)

使用JavaScript代码可以让前台变的有交互(点击事件)




html5可以说还是来布局，然后用CSS样式来规定它的皮肤，然后用JS代码或jQuery代码来完成对它们的控制，以达到对网站前台动画或交互的实现。




区别:

HTML定义了网页的内容

CSS描述了网页的布局

JavaScript网页的行为

比喻式区别:

一个人，他有头，有手，有脚，有身体,规定他怎么说话，怎么走路这些是“html"

给这个人穿上衣服，打扮一下，这是"CSS"

让这个人变得更漂亮一点,扔掉过时的衣服，买一些新化妆品，这是css3

这个人还要为了生活,去工作,上班,这是”JS”