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 标签是由尖括号包围的关键词，通常是成对出现的，比如 <b> 和 </b>
完整HTML页面：
HTML 属性
- HTML 元素可以设置属性
- 属性可以在元素中添加附加信息
- 属性一般描述于开始标签
示例： （id是属性）
<div id="header">This is the header</div>2.CSS（层叠样式表）
样式定义如何显示 HTML 元素
插入样式表的方法有三种:（优先级低到高）
- 外部样式表(External style sheet)
每个页面使用 <link> 标签链接到样式表。 <link> 标签在（文档的）头部：
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>- 内部样式表(Internal style sheet)
使用 <style> 标签在文档头部定义内部样式表：
<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>- 内联样式(Inline style)
在相关的标签内使用样式（style）属性，Style 属性可以包含任何 CSS 属性：
<p style="color:sienna;margin-left:20px">这是一个段落。</p>3.JavaScript（脚本语言）
JavaScript 是互联网上最流行的脚本语言，这门语言可用于 HTML 和 web，更可广泛用于服务器等设备。
作用：直接写入 HTML 输出流
对事件的反应
改变 HTML 内容
改变 HTML 图像
改变 HTML 样式
验证输入
Javascript 脚本代码可被放置在 HTML 页面的 <body> 或<head> 部分中，HTML 中的 Javascript 脚本代码必须位于 <script> 与 </script> 标签之间。
示例：
<head>
<script>
function myFunction() {
document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数";
}
</script>
</head>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
引入外部脚本：
<script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/react/18.2.0/umd/react.production.min.js" ></script> <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/react-dom/18.2.0/umd/react-dom.production.min.js"></script> <script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/babel-standalone/6.26.0/babel.min.js" ></script>这三行代码分别引入了 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标准的大致了解，其余还需分别学习和掌握每个模块。
扫一扫
427
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
