01-认识Web和Web标准

#Web、网页、浏览器

#Web

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

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

#网页

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

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

#浏览器

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

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

#Web标准

#W3C组织

W3C:万维网联盟组织,用来制定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 相当于人的行为:

html 01-认识Web和Web标准的更多相关文章

  1. 我所理解的RESTful Web API [Web标准篇]

    REST不是一个标准,而是一种软件应用架构风格.基于SOAP的Web服务采用RPC架构,如果说RPC是一种面向操作的架构风格,而REST则是一种面向资源的架构风格.REST是目前业界更为推崇的构建新一 ...

  2. Java Web之JSTL标准标签库总结

    [文档整理系列] Java Web之JSTL标准标签库总结

  3. maven 创建web项目的标准目录结构

      maven 创建web项目的标准目录结构 CreateTime--2018年4月18日21:05:37 Author:Marydon 1.标准目录介绍(开发目录) 2.在eclipse下,目录展示 ...

  4. IT兄弟连 HTML5教程 HTML5的靠山 RFC、WHATWG是什么WEB的新标准

    RFC是什么 RFC文档也称请求注解文档(Requests for Comments,RFC),这是用于发布Internet标准和Internet其他正式出版物的一种网络文件或工作报告,内容和Inte ...

  5. Django框架01 / http协议、web框架本质

    Django框架01 / http协议.web框架本质 目录 Django框架01 / http协议.web框架本质 1.http协议 1.1 http协议简介 1.2 什么是http协议 1.3 H ...

  6. Web 应用 WEB框架 HTTP协议 初识Django

    ----------------------------财富存在于人的思想里,你没找到路,不等于没有路,你想知道将来要得到什么,你必须知道现在应该先做什么和先放弃什么! [web 应用] web应用 ...

  7. 【WEB】web www http html hypermedia hypertext 技术名词的意思

    www WWW是环球信息网的缩写,(亦作"Web"."WWW"."'W3'",英文全称为"World Wide Web" ...

  8. 基于HT for Web的Web SCADA工控移动应用

    在电力.油田燃气.供水管网等工业自动化领域Web SCADA的概念已经提出了多年,早先年的Web SCADA前端技术大部分还是基于Flex.Silverlight甚至Applet这样的重客户端方案,在 ...

  9. JavaWeb-入门第一课-1.静态web动态web 2.web服务器 3.下载和安装Tomcat-web服务器

    文章来源:http://www.cnblogs.com/xdp-gacl/p/3729033.html 1.1.WEB开发的相关知识 WEB,在英语中web即表示网页的意思 静态web资源(如html ...

随机推荐

  1. Running Median POJ - 3784

    本题使用对顶堆做法. 为了动态维护中位数,我们可以建立两个堆 :一个大根对,一个小根堆. 用法:在动态维护的过程中,设当前的长度为length,大根堆存从小到大排名 $1 \thicksim \dfr ...

  2. 【P2634】聪聪可可——点分治

    (题面来自Luogu) 题目描述 聪聪和可可是兄弟俩,他们俩经常为了一些琐事打起来,例如家中只剩下最后一根冰棍而两人都想吃.两个人都想玩儿电脑(可是他们家只有一台电脑)--遇到这种问题,一般情况下石头 ...

  3. 【抓取】6-DOF GraspNet 论文解读

    [抓取]6-DOF GraspNet 论文解读 [注]:本文地址:[抓取]6-DOF GraspNet 论文解读 若转载请于明显处标明出处. 前言 这篇关于生成抓取姿态的论文出自英伟达.我在读完该篇论 ...

  4. 03Python网络编程系列之服务端

    # 这里边是一个定义了服务端的一系列函数,是Python网络编程这本书第七章的第一个例子.# 这是供后边函数进行调用了,然后我们来进行研究网络的单线程编程,多线程编程.异步网络编程等.# 导入网络编程 ...

  5. 12_Sensor简单实例

    列出Android手机所支持的Sensor. package com.example.sensorlist; import java.util.List; import android.app.Act ...

  6. Linu之用户管理【useradd】【userdel】【usermod】【passwd】【权限】

    linux下创建用户 1.用户的创建 • 简介 linux是一个多用户多任务的分时操作系统,每个用户都是在root下的一个子用户,拥有不同的权限.用户登入成功后可进入系统和自己的主目录. •实现账号的 ...

  7. Python MoviePy中文教程导览及可执行音视频剪辑工具下载

    ☞ ░ 前往老猿Python博文目录 ░ <Python音视频剪辑库MoviePy1.0.3中文教程导览及可执行工具下载>是老猿两个关于moviepy的专栏<PyQt+moviepy ...

  8. PyQt(Python+Qt)学习随笔:QTabWidget选项卡部件移除选项卡的removeTab和clear方法

    老猿Python博文目录 专栏:使用PyQt开发图形界面Python应用 老猿Python博客地址 要从一个QTabWidget中去除选项卡,可用使用removeTab和clear方法. 1.移除选项 ...

  9. 第15.24节 PyQt(Python+Qt)入门学习:Model/View架构中QTableView的作用及属性详解

    老猿Python博文目录 专栏:使用PyQt开发图形界面Python应用 老猿Python博客地址 一.概述 在Designer的部件栏Item Views中提供了PyQt和Qt已经实现好的table ...

  10. float和double有什么区别?

    float和double在游戏行业肯定是用的很多的,虽然这是个很基础的问题,但是面试时被问到还是感觉说的不是很好. 所以还是总结一下: float 单精度浮点数在机内占 4 个字节,用 32 位二进制 ...