引言
Google Material Design 3 (M3) 是 Google 最新的设计系统，它提供了一套全面的指南和组件，帮助开发者构建美观、现代且用户友好的应用程序。M3 在 Material Design 2 的基础上进行了诸多改进，引入了动态配色、更灵活的布局和全新的组件。
本文将详细介绍 Google Material Design 3 中常用标签的使用方法，并深入探讨其相关的 CSS 标准，包括圆角、阴影、边距等，帮助开发者更好地理解和应用 M3 设计规范。
对话框 (Dialog)
对话框是 M3 中常用的组件之一，用于向用户显示重要信息或请求用户进行决策。在 Material Web 中，对话框通常使用 <md-dialog> 标签表示。
CSS 标准
圆角 (Border-radius)
根据 Material Web 的实现，对话框容器的圆角使用了系统形状 token corner-extra-large 的值。
CSS 属性: border-radius
值: 28px
示例:
123md-dialog { border- ...
CSS_Basic
[语法结构]
[style基本结构]
1234选择器 { 属性:值; 属性:值}
[选择器]
12元素 选择器 (HTML元素作为选择器)语法: HTML元素 {}
12id 选择器 (只能在唯一的HTML元素中使用):语法: #选择器名称 {}
12class 选择器 (可在多元素中使用):语法: .选择器名称 {}
12全局 选择器 (针对所有应用页面的HTML元素)语法: * {}
[装载CSS]
12外部 装载语法: <link rel="stylesheet" herf="CSS文件路径">
123456内部 装载语法: <head> <style> CSS 内容 </style> </head>
1234行内 装载语法: <HTML元素 style="" ...
WEB
未读 HTML 常用Tag
[文档结构标签]
11. <html>: 定义HTML文档的根元素
详细内容
12. <!Doctype html>: 声明文档类型为HTML5
13. <head>: 用于包含文档元信息
详细内容
14. <title>: 定义浏览器标题栏内容
详细内容
15. <body>: 用于包含文档可见内容
详细内容
[文本内容标签]
11. <h1>~<h6>: 标题(1~6级)
详细内容
12. <p>: 段落
详细内容
13. <span>: 行内容器(无语义)
详细内容
14. <div>: 块级容器(无语意)
详细内容
15. <br>: 换行
详细内容
16. <hr>: 水平分割线
详细内容
[文本格式标签]
11. <strong>/<b>: 文本加粗
strong详见
b详见
12. <em>/<i>: 斜体文本
em详见
i详见
13. <u> ...
JS 基础
函数
结构: function 函数名(传递参数) {函数内部语句}
1234function name() { 语句1; 语句2;}
变量常量
结构: var\let\const 变量名;
123var name;let age;const height = 165; #必须初始化
文件对象模型DOM
1HTML文件都可以用一个节点树以层级的方式表示
PLC—ST语言基础
语言标准 IEC 61131
IEC 61131-1: 通用信息
IEC 61131-2: 装置要求与测试
IEC 61131-3: 编程语言
IEC 61131-4: 用户导则
IEC 61131-5: 通信服务规范
IEC 61131-6: 功能安全
IEC 61131-7: 模糊控制编程软件工具实施
IEC 61131-8: IEC 61131-3 语言的应用和现实导则
IEC 61131-9: 小型传感器和执行器的单点数字通信接口技术
IEC 61131-10: 可编程逻辑控制器开放XML交换格式
变量
变量命名规则
以字母/下划线开头，以字母/数字结尾
不区分字母大小写
不存在两个/两个以上连续下划线
不含空格
不使用ST语言关键字
一般不超过32字符
尽量不使用与物理地址相似的变量名
变量属性
|PLC常见属性|
变量属性
属性说明
变量属性
属性说明
VAR
局部变量
VAR_OUT
输出变量
VAR_GLOBAL
全局变量
VAR_IN
输入变量
VAR_RETAIN
保持型变量
VAR_TEMP
临时变量
...
Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub.
Quick Start
Create a new post
1$ hexo new "My New Post"
More info: Writing
Run server
1$ hexo server
More info: Server
Generate static files
1$ hexo generate
More info: Generating
Deploy to remote sites
1$ hexo deploy
More info: Deployment
npm 使用指南
npm (Node Package Manager) 是 Node.js 的默认包管理器，也是世界上最大的软件注册表。开发者使用 npm 来发现、共享和使用代码包。本指南将全面介绍 npm 的常用功能和命令。
1. npm 是什么？
包管理器: npm 帮助开发者管理项目所依赖的外部代码库（称为“包”或“模块”）。
命令行工具: npm 提供了一个命令行客户端，用于与 npm 注册表交互，执行安装、更新、发布等操作。
在线注册表: npm 维护着一个庞大的公共代码库（npm registry），开发者可以在这里查找和下载包，也可以将自己的包发布上去供他人使用。
2. 安装 Node.js 和 npm
npm 通常随 Node.js 一起安装。你可以从 Node.js 官方网站 下载并安装适合你操作系统的 Node.js 版本。安装完成后，可以在终端或命令提示符中运行以下命令来验证 Node.js 和 npm 是否安装成功：
12node -vnpm -v
3. package.json 文件
package.json 文件是每个 Node.js 项目的核心 ...
Markdown 基本语法
[标题]
1234#一级标题##二级标题###三级标题......最多六级
[引用]
1>"引用内容"
[有序列表]
1231. 内容2. 内容3. 内容
[无序列表]
12345- 内容- 内容- 内容* 内容* 内容
[任务列表]
1234- [x] 内容 ("x"标记已完成项目)- [ ] 内容- [ ] 内容- [ ] 内容
[代码块]
12345-------------------------------------------```cprintf("这是一段代码");
123456### [数学公式]```markdown$$"公式内容"$$
[表格]
123|姓名|年龄|成绩| (表头)|:---|---:|:---:| (对齐方式)|张三|18|122|
[脚注]
123文本内容[^脚注标号] [^脚注标号]:脚注内容
[横线插入]
1---[输出一条横线]
[超链接]
12[描述文本](链接 "标题" ...
