Web从入门到放弃-web的基本介绍(一)

一、网页介绍

1.1. 起源

刚开始的互联网是主要是显示文本文档，所以初期为了规范显示，有了HTML，使用标签规范，规定<h><h2>标题,<p>段落等标签。

1.2. 发展

随着互联网发展，原本的HTML越来越无法满足日益增长的需求，页面显示上出现了图片，视频等丰富的多媒体，有了<img>等，页面显示多样化的需求导致了css样式出现，后面又有了交互逻辑需求出现了js。最终发展到现在的H5(08年推出，14年定稿)。

1.3 .现在

当前的web页面基本都是由HTML(H5)+CSS(CSS3)+JS组成。

1.4.从web网页项目到用户

当编写好web页面之后，部署到服务器上，对外发布，用户即可通过网址，在浏览器的请求该web页面(实际上是请求访问该服务器的网页文件)。
浏览器从请求中通过网络获取web内容(html文件)，然后解析内容，渲染成页面，供给用户查看。因为解析及渲染由浏览器控制，所以在不同浏览器可能出现兼容性问题，但是只要遵循规范(由所有浏览器及W3C组织共同敲定)基本不会有问题，部分不明确的会在不同浏览器有不同的表现，或支持或不支持等。

1.5网页的形成

网站是指在因特网上根据一定的规则，使用 HTML 等制作的用于展示特定内容相关的网页集合。
网页是网站中的一“页”，通常是 HTML 格式的文件，它要通过浏览器来阅读。
网页的组成,网页是构成网站的基本元素，它通常由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页，常见以 .htm 或 .html 后缀结尾的文件，因此将其俗称为 HTML 文件。

二、网页地址

2.1 .域名由来

虽然访问网页最终是访问服务器ip，例如：10.172.xx.xx，但是ip不易于记忆，所以有了域名www.baidu.com等。

2.2 .DNS

DNS全称，Domain Name System，域名系统，是互联网的一项服务。它作为将域名和IP地址相互映射的一个分布式数据库，能够使人更方便地访问互联网。

2.3 .域名划分

www.xxx.com中，最右边.com为一级域名，倒数第二个为二级域名，之后的都统称为子域名。

2.4 .域名提供商

全世界域名的最高管理机构，是一个叫做 ICANN （Internet Corporation for Assigned Names and Numbers）的组织。
ICANN 负责管理全世界域名系统的运作。它的一项主要工作，就是规定顶级域名（top level domain，简写为 TLD）。
TLD有分成两类。一类是一般性顶级域名（gTLD），比如.com、.net、.edu、.org、.xxx等等，共有700多个。
另一类是国别顶级域名（ccTLD），代表不同的国家和地区，比如.cn（中国）、.io（英属印度洋领地）、.cc（科科斯群岛）、.tv（图瓦卢）等，共有300多个
ICANN 自己不会去管理这些顶级域名，因为太多了，目前有1000+。他们政策是，每个顶级域名都找一个托管商，该域名的所有事项都由托管商负责。ICANN 只与托管商联系，这样管理起来就容易多了。举例来说，.cn域名的托管商就是中国互联网络信息中心（CNNIC），它决定了.cn域名的各种政策。
Verisign托管了.com、.net 、.name、.gov这四个一般性顶级域名，以及.cc和.tv这两个国别顶级域名。另外，.edu和.jobs的后台管理工作，也外包给了它。

2.5 .域名注册

虽然.com是由Verisign托管，但是一般注册都会使用其他零售商提供的注册服务。如果一个.com或.net域名售价10美元，ICANN 和 Verisign 合计拿走8.03美元。
注册成功之后，可以在域名管理页面，编辑DNS记录，添加子域名，并绑定对应服务器IP。

2.6 .访问网址过程

访问网址实际上是从域名到服务器IP的一个过程，中间DNS起到关键作用。
访问网址会先从本地DNS缓存或者host获取对应的服务器ip直接访问，没有则从网络提供商如电信获取，如果网络提供商本地有这个域名DNS缓存则直接返回，没有则从顶级域名托管服务器去获取，顶级域名托管服务器中管理了所有的二级域名及其服务器IP映射关系。

三、网站分类

3.1.产品展示型

相当于企业官网，这类网站主要是以产品展示为主，主要栏目是首页、产品介绍、资讯中心、关于我们等，方便潜在客户随时看企业基本信息，网站风格简单、朴实，没有多么华丽的外观，就是一个展示企业产品业务的简单网站。

3.2.营销型网站

以营销为目的，功能会更丰富，在基础功能上会添加在线购买、在线客服等功能，方便客户直接咨询问题，可以像一个真实的业务员一样随时随地的解答客户疑虑，提高客户体验感和品转化率，这也许多企业首选的建站类型。

3.3.电商型网站

常见的电子商务模式有B2B、B2C、C2C等几种，C2C主要是以淘宝、京东为代表，而阿里巴巴、慧聪等大型门户则是B2B代表的代表，当当、亚马逊等知名电商企业则是B2C的代表。适合于网上商城购物，用高级程序语言编写，这类网站开发难度较高，不少企业都不敢轻易尝试。

3.4.综合门户网站

针对某个行业，为业内人士提供行业信息服务，体现本行业特色。网站主要展示行业的动态信息、产品知识、厂家信息、市场行情和展会展览等信息。如58同城、网易、搜狐等行业门户网站。

3.5.微网站

简单来说就是企业官网的微信版。

四、WEB（World Wide Web）

即全球广域网，也称为万维网，它是一种基于超文本和HTTP的、全球性的、动态交互的、跨平台的分布式图形信息系统。
WEB就是全球互联网系统的统称，再简单点讲，WEB就是互联网。

五、Web前端是什么？

Web前端即给用户展示的网页页面，也就是网站的前台部分，这里面可能包含了设计、特效、用户交互等。
Web前端开发就是创建Web页面，或者APP等前端界面呈现给用户的过程，通过HTML、CSS及JavaScript等衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互。

5.1.web三剑客：HTML+CSS+JavaScript

5.1.1.HTML

HTML称为超文本标记语言，是一种标识性的语言，制作网页永远离不开HTML。
HTML5是Web中核心语言HTML的规范。因此，无论是PC端还是APP端的应用，前端样式都离不开HTML5。

5.1.2.CSS

CSS就是层叠样式表，它主要是对HTML标记的内容进行更加丰富的装饰，并将网页表现样式与网页结构分离的一种样式设计语言。
CSS可以控制HTML页面中的文本内容、图片外形以及版面布局等外观的显示样式。是一种用来表现HTML或XML等文件样式的计算机语言。
通俗点讲，CSS就是给网页“化妆”的一种技术。

5.1.3.JavaScript

是一种属于网络的脚本语言，已经被广泛用于Web应用开发，常用来为网页添加各式各样的动态功能，为用户提供更流畅美观的浏览效果。
它是一种具有函数优先的轻量级，解释型或即时编译型的高级编程语言。是一种基于原型、函数先行的语言，同时是一门多范式的语言，它支持面向对象编程，命令式编程，以及函数式编程。
JavaScript的作用主要用来向HTML页面添加交互行为，可以这么理解，如果没有JavaScript技术的支持，那么网页会变成一种“只能看不能用”的观赏性页面。

六、静态网站VS动态网站

6.1.静态网站特点

静态网站是最初的建站方式，浏览者所看到的每个页面是建站者上传到服务器上的一个 html （ htm ）文件，这种网站每增加、删除、修改一个页面，都必须重新对服务器的文件进行一次下载上传。网页内容一经发布到网站服务器上，无论是否有用户访问，每个静态网页的内容都是保存在网站服务器上的，也就是说，静态网页是实实在在保存在服务器上的文件，每个网页都是一个独立的文件；
静态网页的内容相对稳定，因此容易被搜索引擎检索；
静态网页没有数据库的支持，在网站制作和维护方面工作量较大，因此当网站信息量很大时完全依靠静态网页制作方式比较困难；
静态网页的交互性较差，在功能方面有较大的限制。

6.2.动态网站特点

交互性：网页会根据用户的要求和选择而动态地改变和响应，浏览器作为客户端，成为一个动态交流的桥梁，动态网页的交互性也是今后 Web 发展的潮流。
自动更新：即无须手动更新 HTML 文档，便会自动生成新页面，可以大大节省工作量。
因时因人而变：即当不同时间、不同用户访问同一网址时会出现不同页面。
动态网站在页面里嵌套了程序，这种网站对一些框架相同，更新较快的信息页面进行内容与形式的分离，将信息内容以记录的形式存入了网站的数据库中，以便于网站各处的调用。这样，我们看到的一个页面，可能在服务器上不一一对应某个 html 的文件了，网页框架里套了很多数据库里的记录中的内容。此外动态网页是与静态网页相对应的，也就是说，网页 URL 的后缀不是 .htm 、 .html 、 .shtml 、 .xml 等静态网页的常见形式，而是以 .asp 、 .jsp 、 .php 、 .perl 、 .cgi 等形式为后缀。这里说的动态网页，与网页上的各种动画、滚动字幕等视觉上的 “ 动态效果 ” 没有直接关系，动态网页也可以是纯文字内容的，也可以是包含各种动画的内容，这些只是网页具体内容的表现形式，无论网页是否具有动态效果，采用动态网站技术生成的网页都称为动态网页

6.3.动态网页的一般特点简要归纳

动态网页以数据库技术为基础，可以大大降低网站维护的工作量 ;
采用动态网页技术的网站可以实现更多的功能，如用户注册、用户登录、在线调查、用户管理、订单管理等等 ;
动态网页实际上并不是独立存在于服务器上的网页文件，只有当用户请求时服务器才返回一个完整的网页 ;
动态网页中的 “?” 对搜索引擎检索存在一定的问题，搜索引擎一般不可能从一个网站的数据库中访问全部网页，或者出于技术方面的考虑，搜索蜘蛛不去抓取网址中 “?” 后面的内容，因此采用动态网页的网站在进行搜索引擎推广时需要做一定的技术处理才能适应搜索引擎的要求。

6.4.网站选择

对于一个业务稳定，页面变化频率不大的公司来说，静态网站是一个很好的选择。因为不用开发后台程序，报价会便宜很多。
对于一个公司规模比较大的公司来说，可能经常会有动态信息要发布给浏览者，可以考虑用动态网站的后台来管理网站信息。

七、web前端5款常用的开发工具

7.1.Notepad++

Notepad++这个软件就不多说了，记事本的增强版，主要应用在Windows平台下，大部分人都应该使用过，非常轻巧灵活，运行速度快，支持多窗口切换，可编辑语言也非常多，自动补全、语法提示和检查等功能都不错，对于前端开发入门来说，可以作为一个不错的选择：

7.2.VS Code

VS Code这个搞Web前端开发的人大部分都应该使用过，微软开发的一个轻量级代码编辑器，开源、免费、跨平台，插件扩展丰富，生态环境良好，支持常见的语法提示、智能补全、代码高亮、Git等功能，运行速度快，占用内存少，开发效率高，在前端网页开发中，经常会使用到这个软件，非常灵活方便：

7.3.Sublime Text

Sublime Text这也是一个非常不错的代码编辑器，原则是不免费的，但有对应注册码，所以对使用影响不大，基本功能和VS Code差不多，语法提示、自动补全、插件扩展等功能都不错，界面简洁、轻便灵活，运行速度也非常快，唯一不足就是配置上不是很方便，而且也存在一定版本兼容问题，但对于前端网页开发来说，也是一个不错的选择：

7.4.HBuilder

HBuilder这是国产的一个免费Web前端开发软件，界面干净、柔绿护眼、轻巧灵活，运行速度快，语法提示、文字处理功能强大，优先支持Markdown功能，除此之外，还自带有云端打包功能，可以将前端开发的网页打包为手机APP，使用起来非常方便：

7.5.WebStorm

WebStorm这是前端开发中一个比较专业的软件，相比较其他软件来说，体积比较大，功能也更复杂，常见的代码高亮、智能补全、Git等功能，这个软件都能很好的支持，除此之外，还支持代码调试、重构等功能，在项目管理、团队协作开发中经常会用到，因此，是一个非常不错的前端软件：

八、web运行工具---浏览器

浏览器最核心的部分是渲染引擎(Rendering Engine),我们一般习惯称之为"浏览器内核",其负责解析网页语法(如HTML、JavaScript)并渲染、展示网页。
浏览器内核（Rendering Engine），是指浏览器最核心的部分，负责对网页语法的解释（如标准通用标记语言下的一个应用HTML、JavaScript）并渲染（显示）网页。
所以，通常所谓的浏览器内核也就是浏览器所采用的渲染引擎，渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。不同的浏览器内核对网页编写语法的解释也有不同，因此同一网页在不同的内核的浏览器里的渲染（显示）效果也可能不同，这也是网页编写者需要在不同内核的浏览器中测试网页显示效果的原因。

浏览器内核主要包括以下三个技术分支：排版渲染引擎、 JavaScript引擎，以及其他。

Trident
说起Trident，大部分人都会觉得比较陌生，但提起IE浏览器基本上是家喻户晓。由于该内核被包含在全世界最高的使用率的操作系统中，即为Windows操作系统，所以我们又经常把它称之为IE内核。采用用Trident内核的浏览器有：IE、傲游、世界之窗浏览器、Avant、腾讯TT、Sleipnir、GOSURF、GreenBrowser和KKman等

Gecko
Gecko（Firefox内核）：Netscape6开始采用的内核，后来的Mozilla FireFox（火狐浏览器）也采用了该内核，Gecko的特点是代码完全公开，因此，其可开发程度很高，全世界的程序员都可以为其编写代码，增加功能。因为这是个开源内核，因此受到许多人的青睐，Gecko内核的浏览器也很多，这也是Gecko内核虽然年轻但市场占有率能够迅速提高的重要原因。

Presto
Presto（Opera前内核）（已废弃）： Opera12.17及更早版本曾经采用的内核，现已停止开发并废弃，该内核在2003年的Opera7中首次被使用，该款引擎的特点就是渲染速度的优化达到了极致，然而代价是牺牲了网页的兼容性。Opera现已改用Google Chrome的Blink内核。

Webkit
Webkit（Safari内核，Chrome内核原型，开源）:它是苹果公司自己的内核，也是苹果的Safari浏览器使用的内核。 Webkit引擎包含WebCore排版引擎及JavaScriptCore解析引擎，均是从KDE的KHTML及KJS引擎衍生而来，它们都是自由软件，在GPL条约下授权，同时支持BSD系统的开发。所以Webkit也是自由软件，同时开放源代码。在安全方面不受IE、Firefox的制约，所以Safari浏览器在国内还是很安全的。

Blink
Blink是一个由Google和Opera Software开发的浏览器排版引擎，Google计划将这个渲染引擎作为Chromium计划的一部分，并且在2013年4月的时候公布了这一消息。这一渲染引擎是开源引擎WebKit中WebCore组件的一个分支，并且在Chrome（28及往后版本）、Opera（15及往后版本）和Yandex浏览器中使用。

浏览器是网页显示、运行的平台。常用的浏览器有 IE、火狐（Firefox）、谷歌（Chrome）、Safari和Opera等。平时称为五大浏览器。
查看浏览器市场份额：http://tongji.baidu.com/data/browser

浏览器内核渲染引擎

浏览器不同，它们显示页面或者排版就有些许差异

遵循 Web 标准除了可以让不同的开发人员写出的页面更标准、更统一外，还有以下优点：

让 Web 的发展前景更广阔。
内容能被更广泛的设备访问。
更容易被搜寻引擎搜索。
降低网站流量费用。
使网站更易于维护。
提高页面浏览速度。 ##web标准的构成：主要包括《结构Structure》、《表现（Presentation）》和《行为（Behavior）》三个方面。

Web 标准提出的最佳体验方案：结构、样式、行为相分离。
简单理解：结构写到 HTML 文件中，表现写到 CSS 文件中，行为写到 JavaScript 文件中

标准	说明
结构	用于对网页元素进行整理和分类，对数据进行展示，分为HTML(4)和HTML5
表现	用于设置网页元素样式，宽高，颜色，大小，位置等网页外观样式，分为CSS(2)和CSS3
行为	是指网页用户的交互及模型定义，事件触发等，主要分为ES5和ES6

陆续更新中，谢谢点赞，谢谢收藏，谢谢关注，谢谢支持，总之就是谢谢啦各位...........

Web从入门到放弃-web的基本介绍(一)相关推荐

web安全入门课程推荐--Web 安全恩仇录：漏洞原理
玄魂玄魂工作室 gitchat上看到的一套入门教程. 课程介绍本课程主要内容为 Web 常见漏洞分析,同时会介绍在各个阶段需要做什么事,该课程利用的攻防平台是 Kali Linux 以及一些 Li ...
Web从入门到放弃-HTML的学习(三)
说明: HTML标记是使用特定字符表示不同功能,对于浏览器来说,浏览器解析的是标记代表的功能,如:p--段落,a--超链接下文及后文中提到的标记.标签.元素.节点都是同一个东西,都指HTML标记一 ...
Web从入门到放弃-CSS的学习(五)
一.CSS的简单介绍(要想知道复杂的,百度一搜一看一了解) HTML本质作用就是把数据呈现到网页上而已(数据展示的一个载体) 当下看到花里胡哨的网页都是在HTML的基础上通过CSS和CSS3实现的 w ...
【2】web安全入门篇-了解web
1.什么是web 百度百科会解是得很清楚,我在这里就不赘述了 https://baike.baidu.com/item/Web/150564 web运行结构 2.一次完整的网页请求图示大致流程为 1 ...
storm从入门到放弃(一)，storm介绍
背景:目前就职于国内最大的IT咨询公司,恰巧又是毕业季,所在部门招了20多个应届毕业生,本人要跟部门新人进行为期一个月的大数据入职培训,特此将整理的文档分享出来. 原文和作者一起讨论:http://w ...
Python Django Web开发入门-刘硕-专题视频课程
Python Django Web开发入门-16018人已学习课程介绍使用强大的Django Web框架轻松高效的开发网站,各类web应用(微信公众平台) 课程收益 Dja ...
Web安全从入门到放弃之皮卡丘靶场精讲视频教程百度云下载链接(20201213整理)
Web安全从入门到放弃之皮卡丘靶场精讲视频教程(20201213整理) 如失效,请联系:hk007.cn 课程内容介绍:含全套视频课程内容及对应皮卡丘靶场源文件百度云盘链接:https://pan. ...
web前端从入门到放弃
一.HTML,CSS系列之导学 (一)拨云见日 HTML,CSS入门切图流程:传统切图,智能切图实战阶段:pc企业站布局,pc游戏站布局 1.什么是HTML.CSS? 做网站(n个网页形成)的编程 ...
web前端入门指南：来看看这位大佬的学习之路吧！
开始他的表演第一章:为什么要学习前端开发?web前端开发是什么? 从事前端开发工作差不多3年了,自己也从一个什么都不懂的小白积累了一定的理论和实践经验.编写<Web前端入门指南>系列文章 ...

Web从入门到放弃-web的基本介绍(一)

Web从入门到放弃-web的基本介绍(一)相关推荐

最新文章

热门文章