认识Web和Web标准

简介: 《前端基础》

Web、网页、浏览器

Web

Web(World Wide Web)即全球广域网,也称为万维网。

我们常说的Web端就是网页端。

网页

网页是构成网站的基本元素。网页主要由文字、图像和超链接等元素构成。当然,除了这些元素,网页中还可以包含音频、视频以及Flash等。

我们在浏览器上输入网址后,打开的任何一个页面,都是属于网页。

浏览器

浏览器是网页运行的平台,常见的浏览器有谷歌(Chrome)、Safari、火狐(Firefox)、IE、Edge、Opera等。

关于浏览器的详细介绍,可以看下一篇文章:《浏览器的介绍》。

Web标准

W3C组织

W3C:World Wide Web Consortium,万维网联盟组织,用来制定web标准的机构(组织)。

W3C 万维网联盟是国际最著名的标准化组织。1994年成立后,至今已发布近百项相关万维网的标准,对万维网发展做出了杰出的贡献。

W3C 组织就类似于现实世界中的联合国。

为什么要遵循WEB标准呢?因为很多浏览器的浏览器内核不同,导致页面解析出来的效果可能会有差异,给开发者增加无谓的工作量。因此需要指定统一的标准。

Web 标准

Web标准:制作网页要遵循的规范。

Web标准不是某一个标准,而是由W3C组织和其他标准化组织制定的一系列标准的集合。

1、Web标准包括三个方面:

  • 结构标准(HTML):用于对网页元素进行整理和分类。
  • 表现标准(CSS):用于设置网页元素的版式、颜色、大小等外观样式。
  • 行为标准(JS):用于定义网页的交互和行为。

根据上面的Web标准,可以将 Web前端分为三层,如下。

2、Web前端分三层:

  • HTML(HyperText Markup Language):超文本标记语言。从语义的角度描述页面的结构。相当于人的身体组织结构。
  • CSS(Cascading Style Sheets):层叠样式表。从审美的角度美化页面的样式。相当于人的衣服和打扮。
  • JS:JavaScript。从交互的角度描述页面的行为。相当于人的动作,让人有生命力。

3、打个比方:(拿黄渤举例)

HTML 相当于人的身体组织结构:

CSS 相当于人的衣服和打扮:

JS 相当于人的行为:

相关文章
|
Rust 前端开发 JavaScript
Web 标准与前端开发 | 青训营笔记
Web 标准与前端开发 | 青训营笔记
101 0
Web 标准与前端开发 | 青训营笔记
|
前端开发 JavaScript
web浏览器常用内核和web标准
web浏览器常用内核和web标准
100 0
web浏览器常用内核和web标准
|
Web App开发 前端开发 JavaScript
Node.js Web 框架再进化 - 面向前端与未来标准
Web 开发一直是 Node.js 的主流方向,无论新人必学的 Express / Koa,或者是社区流行的企业级框架 Egg / Nest,各类 Web 框架层出不穷。本次分享来自阿里巴巴前端技术专家刘子健(繁易)在第十六届D2前端技术论坛的分享,为大家带来 Node.js Web 框架的发展历程,分析各类框架的适用场景及利弊,并基于阿里的 Node.js 框架 Midway,为大家介绍在过去这两年,我们对下一代 Node.js Web 框架的思考、设计、实践,包含如何面向前端做一款前端“爱用”的 Node.js 框架,如何面向未来标准甚至参与标准来设计 Node.js Web 框架两部分。
343 1
Node.js Web 框架再进化 - 面向前端与未来标准
html+css实战4-初识:web标准
html+css实战4-初识:web标准
94 0
html+css实战4-初识:web标准
|
SQL 安全 大数据
【基础理论-WEB测试】面试官让你介绍下web测试,标准的高大上回答如下:
【基础理论-WEB测试】面试官让你介绍下web测试,标准的高大上回答如下:
|
前端开发 JavaScript 小程序
聊聊各端手势体系以及对 Web 标准手势的思考
聊聊各端手势体系以及对 Web 标准手势的思考
24454 2
聊聊各端手势体系以及对 Web 标准手势的思考
|
XML JavaScript 前端开发
web标准 | 学习笔记
快速学习web标准
136 0
web标准 | 学习笔记
|
Web App开发 前端开发 JavaScript
【青训营】- Web标准与前端开发
【青训营】- Web标准与前端开发
183 0
【青训营】- Web标准与前端开发
|
前端开发 JavaScript 小程序
聊聊各端手势体系以及对 Web 标准手势的思考
目前在 Web 标准中,手势能力是属于缺失的一块能力,更多的开发者通过 hammer.js 来获得一个通过 JavaScript 模拟出来的手势事件来开发一个手势强交互的应用,或者是直接基于更底层的 Touch event来做进一步的封装。
聊聊各端手势体系以及对 Web 标准手势的思考
|
Dart 前端开发 JavaScript
"零"学习成本:使用 Web 标准开发动态化 Flutter 应用
Kraken 是由淘系技术部前端架构团队开发的一个基于 Flutter 的动态化框架,本文将带大家了解和认识 Kraken,分享 Kraken 的一些设计思想以及 Flutter 和 Web 技术对接的实践。
1980 0
"零"学习成本:使用 Web 标准开发动态化 Flutter 应用