什么是W3C标准?

W3C 是什么组织,它如何运作,网络是如何被标准化的?

W3C(万维网联盟)是制定Web技术国际标准的组织

W3C的工作是负责统一Web相关的各项标准(对 web 进行标准化),W3C 创建并维护 WWW 标准,其标准涵盖HTML、CSS、JS、XML、DOM、Web性能等。

W3C 标准的制定过程 工作草案(Working Draft):初步的技术提案。

候选推荐标准(Candidate Recommendation):经过测试和反馈后的稳定版本。

提案推荐标准(Proposed Recommendation):提交给 W3C 会员进行最终审查。

正式推荐标准(W3C Recommendation):正式发布的标准。 原文链接:https://blog.csdn.net/superherooooss/article/details/145674254

官网学习:w3school 在线教程

主要的W3C标准:

HTML 定义了网页的内容CSS 描述了网页的布局JavaScript 控制了网页的行为XML用于存储和传输结构化数据DOM提供对 HTML 和 XML 文档的编程接口

1.HTML(超文本标记语言)

HTML 文档包含了HTML 标签及文本内容HTML 使用标记标签来描述网页HTML 标签是由尖括号包围的关键词,通常是成对出现的,比如

完整HTML页面:

HTML 属性

HTML 元素可以设置属性属性可以在元素中添加附加信息属性一般描述于开始标签

示例: (id是属性)

2.CSS(层叠样式表)

样式定义如何显示 HTML 元素

插入样式表的方法有三种:(优先级低到高)

外部样式表(External style sheet)

每个页面使用 标签链接到样式表。 标签在(文档的)头部:

内部样式表(Internal style sheet)

使用

内联样式(Inline style)

在相关的标签内使用样式(style)属性,Style 属性可以包含任何 CSS 属性:

这是一个段落。

3.JavaScript(脚本语言)

JavaScript 是互联网上最流行的脚本语言,这门语言可用于 HTML 和 web,更可广泛用于服务器等设备。

作用:直接写入 HTML 输出流

对事件的反应

改变 HTML 内容

改变 HTML 图像

改变 HTML 样式

验证输入

Javascript 脚本代码可被放置在 HTML 页面的 或 部分中,HTML 中的 Javascript 脚本代码必须位于 标签之间。

示例:

4.XML(可扩展标记语言)

XML 被设计用来传输和存储数据,不用于表现和展示数据,HTML 则用来表现数据

XML 定义结构、存储信息、传送信息。

XML 不会做任何事情。XML 被设计用来结构化、存储以及传输信息

XML 和 HTML 为不同的目的而设计:

XML 被设计用来传输和存储数据,其焦点是数据的内容。HTML 被设计用来显示数据,其焦点是数据的外观。

HTML 旨在显示信息,而 XML 旨在传输信息。

XML用途:把数据从 HTML 分离、简化数据共享、简化数据传输、简化平台变更、使您的数据更有用、用于创建新的互联网语言。

5.DOM(文档对象模型)

W3C 文档对象模型 (DOM) 是一个与平台和语言无关的接口,允许程序和脚本动态访问和更新文档的内容、结构和样式。

当网页被加载时,浏览器会创建页面的文档对象模型(DOM),文档对象代表您的网页,每一个网页都有只属于自己的URL地址。(URL: 协议://域名/路径?查询参数#片段标识符)

W3C DOM 标准被分为 3 个不同的部分:

Core DOM - 所有文档类型的标准模型XML DOM - XML 文档的标准模型HTML DOM - HTML 文档的标准模型

HTML DOM 是 HTML 的标准对象模型和编程接口

HTML DOM 是关于如何获取、更改、添加或删除 HTML 元素的标准。

HTML DOM 定义了访问和操作 HTML 文档的标准方法。它将 HTML 文档呈现为树结构。

例子:

document.getElementById(id)通过元素 id 来查找元素document.getElementsByTagName(name)通过标签名来查找元素document.getElementsByClassName(name)通过类名来查找元素

document.createElement(element)创建 HTML 元素document.removeChild(element)删除 HTML 元素document.appendChild(element)添加 HTML 元素document.replaceChild(element)替换 HTML 元素document.write(text)写入 HTML 输出流

6.ES6( ECMAScript 6.0)

环境搭建

在 Node.js 环境中运行 ES6

$ node > let sitename="runoob" undefined > console.log(sitename) runoob undefined >

使用下面的命令,可以查看 Node 已经实现的 ES6 特性。

node --v8-options | grep harmony

webpack静态模块打包器 (module bundler)

其包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle。

webpack 主要有四个核心概念:

入口 (entry)输出 (output)loader插件 (plugins)

7.Vue(构建用户界面的渐进式框架)

Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

构建Vue命令行:

$ cnpm install --global vue-cli # 全局安装 vue-cli

$ vue init webpack my-project # 创建一个基于 webpack 模板的新项目,选择配置

$ cd my-project

$ cnpm install

$ cnpm run dev

$ npm run build #Vue项目打包,会在 Vue 项目下生成一个 dist 目录

Vue项目的目录结构:

当我们从浏览器输入一个url的时候,浏览器会将我们输入的url发送到服务器上,再从服务器返回html+css+js(js代码由浏览器执行)。然后我们的客户端(浏览器)再通过Ajax请求(API),服务器接收请求返回数据,浏览器接收到数据后再进行动态渲染,局部刷新页面。 原文链接:https://blog.csdn.net/weixin_48681975/article/details/112492169

8.React( 构建用户界面的JavaScript 库)

React 是一个用于构建用户界面的 JAVASCRIPT 库, 主要用于构建 UI。

创建项目命令行:

$ cnpm install -g create-react-app //构建React开发环境

$ create-react-app my-app

$ cd my-app/

$ npm start

引入外部脚本:

这三行代码分别引入了 React、ReactDOM 和 Babel Standalone 库。

React 用于构建用户界面。ReactDOM 用于在浏览器中渲染 React 组件。Babel Standalone 用于在浏览器中即时编译 JSX 语法。

React项目的目录结构:

my-app/

├── node_modules/ # 项目依赖库

├── public/ # 存放静态文件

│ ├── index.html # 应用的 HTML 模板文件

│ ├── favicon.ico # 浏览器图标

├── src/ # 存放源代码

│ ├── App.css # 样式文件

│ ├── App.js # 主要的 React 组件

│ ├── index.css # 全局样式

│ ├── index.js # React 入口文件

├── package.json # 配置信息和依赖列表

└── .gitignore # Git 忽略文件

src/index.js 负责将根组件(通常是 App)渲染到 index.html 中的 div#root 中。

React 项目的运行流程

启动开发服务器

运行 npm start 或 yarn start,启动开发服务器。

打开浏览器访问 http://localhost:3000,查看应用。

构建生产环境代码

运行 npm run build 或 yarn build,生成优化后的生产环境代码。

运行测试

运行 npm test 或 yarn test,执行项目的测试用例。

以上是我对W3C标准的大致了解,其余还需分别学习和掌握每个模块。