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. 凭借着这份Spring面试题,我拿到了阿里,字节跳动美团的offer!

      一般问题 1.1. 不同版本的 Spring Framework 有哪些主要功能?   1.2. 什么是 Spring Framework? Spring 是一个开源应用框架,旨在降低应用程序开发 ...

  2. 移动端调试Web页面

    移动端调试Web页面 虽然可以在PC下,通过开发者工具,模拟移动端,但是这样只能模拟页面样式,对于代码的执行情况是无法模拟的,所以在此结合实际调试经验,针对安卓与IOS设备,进行总结. IOS 安卓 ...

  3. 安装swoole扩展

    wget https://github.com/swoole/swoole-src/archive/v1.9.3-stable.tar.gz tar -zxvf v1.9.3-stable.tar.g ...

  4. iOS UITextFeild获取高亮部分的长度

    获取原因: 中英文混输时,会遇到长度统计不准的问题. 获取方法: NSString *toBeString = textField.text; NSString *lang = [[UITextInp ...

  5. CentOS7.X 下安装MySQL8.0(附文件)

    这是64位的安装包.如果需要32位的可以去官网下载哦.步骤一样 1 获取安装资源包 mysql-8.0.18-1.el7.x86_64.rpm-bundle.tar 链接: https://pan.b ...

  6. 【鸿蒙开发板试用报告】用OLED板实现FlappyBird小游戏(中)

    小伙伴们久等了,在上一篇<[开发板试用报告]用OLED板实现FlappyBird小游戏(上)>中,我们本着拿来主义的原则,成功的让小鸟在OLED屏幕上自由飞翔起来,下面我们将加入按钮交互功 ...

  7. C# Winform TCP发消息

    服务端: 代码: using System; using System.Collections.Generic; using System.IO; using System.Net; using Sy ...

  8. Android自带图标库

    Java Usage example: myMenuItem.setIcon(android.R.drawable.ic_menu_save); Resource Usage example: and ...

  9. 20191209_Centos7.2使用yum安装mysql

    1. 下载mysql的rpm包 [root@izwz91qnvovd6suufon1ccz ~]# wget http://dev.mysql.com/get/mysql57-community-re ...

  10. Apache Flink 如何正确处理实时计算场景中的乱序数据

    一.流式计算的未来 在谷歌发表了 GFS.BigTable.Google MapReduce 三篇论文后,大数据技术真正有了第一次飞跃,Hadoop 生态系统逐渐发展起来. Hadoop 在处理大批量 ...