Six Revisions 访谈：大学里的 Web 标准（下）

comsharp comsharp 博客等级 墨衍会员 · AI 创作全网分发 墨衍智能分发 本文由作者通过墨衍一键同步至各平台 1分发平台 2.2k累计阅读 2.3k平均单平台 已同步平台 优快云 微信公众号 微博 知乎 掘金 百家号 博客园 抖音 小红书 你的文章也可以这样分发 墨衍会员 ¥399起/年，写一次发全网 我也要 码龄20年
关注
翻译 最新推荐文章于 2026-11-13 18:37:41 发布 2.2k 阅读 AI 写同款· GEO 优化 ›
从零实现MACD算法：EMA原理、Python代码与双底识别实战 MACD是股票技术分析中使用最广的动量指标之一，但其算法细节常被行情软件封装成黑盒。理解MACD，核心是理解指数移动平均（EMA）的递推逻辑：快线EMA12与慢线EMA26之差构成DIF，再对DIF做EMA9平滑得到DEA，红绿柱则是DIF与DEA差值的两倍。EMA相比简单均线更侧重近期价格，因此能更快捕捉趋势拐点，这也是MACD在趋势行情中更有效的数学根源。用Python手写MACD算法，既能消除对指标黑盒的焦虑，也能灵活应对复权、停牌、初值设置等工程细节。将算法延伸至形态识别，可以量化MACD双底和底背 阅读详情

Christopher Murphy 和 Nicklas Persson 是 Web 设计师与数字艺术家，他们还在 Ulster 大学教设计。最近，他们合写了一本书，HTML and CSS Web Standards Solutions: A Web Standardistas’ Approach，他们在大学中积极推广 Web 标准，被称为 Web 标准人，著名的 Web 开发设计网站 Six Revisions 对他们做了访谈。这是第二部分，参阅第一部分。

Web Standardistas on Web Standards in Education leading image.

 

[Chris Wallace]: 随着 CSS3, HTML 5 浮出水面，对于这些尚未在主流浏览器完全采用的技术，你是如何传授这些概念的？

[Christopher Murphy / Nicklas Persson]: 能边学边教很让人振奋，我们不断学习新的知识，我们也鼓励学生这样做。我们有责任教育学生自给自足，让他们掌握毕业后持续学习的技能。

值得强调的是，我们主要向学生传授基本原理，而不是具体的某个软件或框架，我们将 Web 标准方式当作设计方法论，或者一个最基本的基础。

[Chris Wallace]: 主流的浏览器频繁升级，甚至一些新的浏览器，象 Google Chrome 也是这样，教授 Web 标准不象教 1+1=2 那样明确，你如何让你的学生应对最新的浏览器，以及新浏览器版本中可能出现的 BUG?

[Christopher Murphy / Nicklas Persson]: 虽然是教师，但我们自己也是设计师，也要为客户工作，或在各地展示作品。我们认为，教育者应该将理论与现实案例结合，我们经常将自己的作品结合到教学中。

为了让学生赶得上瞬息万变的现实，我们使用了日本的一种即时（Just In Time）教学方法，我们几乎每周都要重写教案，长期坚持这样，虽然理论和基础不会变，但我们会修改其中的细节来反映现实的趋势。

虽然这要求我们每年都更新教案，但对这样一个在不断发展的课题，没有别的办法。

[Chris Wallace]: 你对自己的工作肯定充满热情？是什么让你成为一个作者，教师以及Web标准的倡导者？

我们都在经验中学到不少东西，并乐意坚持下去，我们也犯了不少错误，也在事业上遇到过挫折，但我们都希望将这些东西传授给学生。

我们采用了一种非常开放的方式同学生分享我们的工作，我们对 Web 标准充满热情，并喜欢和那些同样热情的学生一起工作，很多天才曾来到过我们身边，我们乐于将这些东西传授给他们。

我们的学生非常忠诚，我们和学生建立了稳固的校友关系，在他们毕业后长期保持联系。我们正慢慢建立起一个一 Belfast 为核心的 Web 设计社区，我们很高兴推动了这一切。

[Chris Wallace]: 你们所受的影响有哪些？

[Christopher Murphy / Nicklas Persson]:

影响我们的人: Jeffrey Zeldmann, Dan Cederholm, Mark Boulton and John Gruber。

影响我们的资源: A List Apart, Design Observer, CSS Zen Garden and 37 Signals.

其它: You Look Nice Today, TED, The Wire and Lost.

作为教师，我们还受到学生作品的启发，和这些天才的学生在一起很受感染。

[Chris Wallace]: 在结束采访之前，我不能不问一下你们写的书，HTML and CSS Web Standards Solutions: A Web Standardistas’ Approach，你们是如何写成这本书的？读者可以从中学到什么？

[Christopher Murphy / Nicklas Persson]:

我们的方法就是熬夜，偶尔用寿司和啤酒犒劳一下自己，然后就是那些漫长的周末时间。我们可以向学生们推荐的书有很多，如 Dan Cederholm 的 inspiring Web Standards Solutions; Paul Haine 的 meticulous HTML Mastery; 以及 Andy Budd 的 indispensable CSS Mastery。这些书都很精彩，然而，它们都没有从完整的角度，讲述一套稳固的 Web 标准教程，也就是一种具备良好结构的，基于 XHTML 和 CSS 的 Web 标准教程。

读者从这本书可以学到一种严谨的手写 XHML + CSS 网页的方法。

Learn how to build hand-crafted web pages using structured XHTML and CSS.

虽然这本书刚刚发行，我们收到的反馈却是一致叫好。我们对这本书的辅助网站 Web Standardistas 所受到的反响也感到高兴。这个网站每天都推出 Web 设计有关的话题，每月还会发表一些期刊文章，目前已经拥有稳固的访问群，我们期待着继续以此为基础推动别的 Web 标准项目。

延伸阅读

本文国际来源：http://sixrevisions.com/interviews/web-standardistas-on-web-standards-in-education/
中文翻译来源：COMSHARP CMS 官方网站

标签
#web #standards #浏览器 #css #html
#工作
CSS 弹性盒布局：flex-wrap 换行与多行交叉轴对齐 默认情况下，弹性容器（flex container）会把所有子项（flex item）挤在一行里，哪怕空间不够也只会压缩子项，而不会换行。浏览器会依次把子项放进当前行，当剩余空间不足以容纳下一个子项的基础尺寸时，就开启新的一行。一旦允许换行，容器里就会出现多条「弹性行（flex line）」，此时交叉轴对齐的行为也会从「单行对齐」变成「多行对齐」，是默认值：当子项没有设置固定高度时，行会被拉伸，子项随之变高，看起来像是「撑满了容器」。上面这段代码中，每个子项固定 200px 宽，容器宽度决定每行能放几个。 阅读详情

相关推荐

Cesium实战：如何在前端直接渲染TIFF影像（附完整代码与避坑指南）

本文详细介绍了如何在前端利用Cesium直接加载和渲染TIFF影像的完整技术方案。针对TIFF格式的地理影像数据，文章提供了从文件解析、坐标转换到像素处理与Cesium集成的全流程代码实现，并分享了性能优化与常见问题的避坑指南，帮助开发者高效实现三维地理可视化。

weixin_29290947的博客 316

MACD指标深度拆解：算法原理、Python手写实现与实战应用指南

技术分析中，MACD是最常用的动量指标之一，它通过指数移动平均线之间的差值，衡量价格背后的趋势动能。理解EMA的加权逻辑、DIF与DEA的交互关系以及柱状图的含义，是掌握金叉死叉、顶底背离等经典信号的前提。在实际工程中，使用Python从零实现MACD计算时，初始值处理和参数对齐至关重要，稍有不慎就会导致回测与实盘结果不一致。同时，多周期共振、双底识别等进阶用法，需建立在严谨的代码逻辑之上，并避开未来函数与信号重绘陷阱。本文将围绕MACD的计算原理、Python源码实现、以及震荡市过滤、多指标配合等实战要点

weixin_33491377的博客 305

计算机视觉之ResNet

RestNet是2015年由微软团队提出的，在当时获得分类任务，目标检测，图像分割第一名。该论文的四位作者何恺明、张祥雨、任少卿和孙剑如今在人工智能领域里都是响当当的名字，当时他们都是微软亚研的一员。实验结果显示，残差网络更容易优化，并且加深网络层数有助于提高正确率。在ImageNet上使用152层的残差网络（VGG net的8倍深度，但残差网络复杂度更低）。对这些网络使用集成方法实现了3.75%的错误率。获得了ILSVRC 2015竞赛的第一名。原文链接这是一篇计算机视觉领域的经典论文。

十年以上架构设计经验，专注于软件架构和人工智能领域，对机器视觉、NLP、音视频等领域都有涉猎 2万+

桌面系统监控，NeoHtop 到底能不能打？

凌晨改完代码，机器突然卡得像幻灯片。你打开系统监控想找吃掉 CPU 的那个进程，命令行里满屏绿字、表格挤成一团，找起来费劲。NeoHtop 是一个用 Rust、Tauri 和 Svelte 构建的本地系统监控工具，打开就能看到 CPU、内存、存储、网络等实时面板和一张可排序的进程表。本文给出从 0 到第一次看到效果的最短路径，再和 htop、top 放在一起对比，帮你判断值不值得装。 [![Ne

gitblog_00018的博客 110

【论文阅读|小目标分割算法ASF-YOLO】

论文题目：ASF-YOLO: A novel YOLO model with attentional scale sequence fusion for cell instance segmentation 论文链接： https://arxiv.org/abs/2312.06458 代码链接：https://github.com/mkang315/ASF-YOLO 摘要（Abstract） 作者提出了一种新颖的基于 "You Only Look Once"（YOLO）的注意力尺度序列融合框架（ASF-YO

dally2的博客 8118

STM32异常与中断过程详解

1. 异常与中断概念引入 异常主要是指来自CPU内部的意外事件，比如执行了未定义指令、算术溢出、除零运算等发生在CPU内部的意外事件，这些异常的发生，会引起CPU运行相应的异常处理程序；中断一般来自硬件（如片上外设、外部I/O输入等）发生的事件，当这些硬件产生中断信号时，CPU会暂停当前运行的程序，转而去处理相关硬件的中断服务程序。但无论是异常还是中断，都会引起程序执行偏离正常的流程，转而去执行异常/中断的处理函数。 下面对异常和中断的介绍，如果中断信号的产生原因来自CPU内部，则称之为异常；如果中断信号来

luobeihai的博客 1万+

Six Revisions 访谈：大学里的 Web 标准(上)

Christopher Murphy 和 Nicklas Persson 是 Web 设计师与数字艺术家，他们还在 Ulster 大学教设计。最近，他们合写了一本书，HTML and CSS Web Standards Solutions: A Web Standardistas’ Approach，他们在大学中积极推广 Web 标准，被称为 Web 标准人，著名的 Web 开发设计网站 Six

COMSHARP CMS 专栏 1267

如何修改网页中的文本内容改成自己希望的数值？

本篇文章主要讲解，通过浏览器命令和浏览器自带的F12开发者工具，进行修改网页内容的方法教程 日期：2021年12月5日 作者：任聪聪 一、通过F12开发者工具进行修改 进入方式汇总： 1.右击鼠标，显示菜单找到审查 2.通过快捷键F12进入，笔记本需要先关闭fnlk功能键。 开发者工具介绍 说明： 1.表示选择元素，点击后可以选择文本的元素所在地 2.表示显示方式，手机还是电脑 3.表示div元素，点击后可以展开，对div内的html和文本进行编辑。 双击文本，即可进行修改成自己想要的，但是刷新后.

任聪聪的博客 2万+

Six Revisions 访谈：大学里的 Web 标准

chengzhaolu的专栏 416

AutosarMCAL开发——基于EB CRC驱动

本文为博主个人理解总结记录，如有不正，欢迎指正。

qq_45583706的博客 1392

科技英语/专业英语——改错总结【2】

1.固定句式 make it + adj + 句子 例：These features make the electronic systems difficult to intercept this kind of signal. 正确形式：These features make it  difficult for the electronic systems  to intercept

MISAYAONE的博客 1732

CSS Grid 布局：用 auto-fill 与 auto-fit 实现响应式网格

特性auto-fillauto-fit空轨道保留折叠元素拉伸否是适用场景保持整齐网格元素铺满容器repeat(auto-fill, minmax(最小宽度, 1fr))是响应式网格的万能公式；auto-fill保留空轨道，auto-fit折叠空轨道；最小值优先用固定长度或min()，避免百分比带来的计算问题；配合gap与可以规避绝大多数溢出问题。掌握这一行 CSS，就能替代大量媒体查询，让布局真正「自适应」。

2601_96876853的博客 563

stm32项目实战(1)光敏电阻的介绍和使用

文章目录前言一、光敏电阻介绍二、cubeMX配置三、代码说明总结 前言 本篇文章我们讲带大家了解光敏电阻的使用 一、光敏电阻介绍 下面是4线光敏电阻实物图 产品接线说明： 1、VCC 接电源正极 3.3-5V 2、GND 接电源负极 3、DO TTL 开关信号输出 (配置为输出模式) 4、AO 模拟信号输出（ADC采样通道) 光敏电阻主要用于检测周围的光照强度，光照强度发生变化那么ADC采样的值也会发送变化。 二、cubeMX配置 简单的配置我们就不多说了主要是ADC采样的配置 这里我采用的是ADC1通道

m0_49476241的博客 1万+

css - 元素背景图由 hover 触发，初次加载时闪动的解决办法

【代码】css - 元素背景图由 hover 触发，初次加载时闪动的解决办法。

神膘护体小月半的博客 131

汉书HE8，好用的汇编代码编写工具

汉书HE8，好用的汇编代码编写工具早期编写汇编代码所用功能强大

最新的sdio 4.0 spec 协议标准 带书签 高清完整PDF版

Part-E1-SDIO-Specification-Ver4.00-Final-120220.pdf：最新的sdio 4.0 spec 协议标准 带书签 高清完整PDF版，包括SDIO 接口的外设，SDIO 接口官方协议等。

CSS 网格布局（Grid）入门：从概念到网格轨道

网格轨道由（列轨道）和（行轨道）定义。它们的值是一组轨道尺寸，用空格分隔，每个值对应一条轨道。

2601_96876853的博客 258

efm32 入门.pdf

本PDF共计22页，介绍的是操作驱动API，下载与否自己斟酌。

当工具链成为基础设施：从 Tailwind 并入 Shopify 看 CSS 框架的演进逻辑

Tailwind 并入 Shopify，不只是商业新闻，更是 CSS 框架从“工具”走向“基础设施”的信号📐 文章拆解 utility-first 背后的三大取舍——原子类与语义类、按需生成与预生成、独立发展与平台收编，并用可复现指标教你验证产物体积、变更影响面与构建可重复性。

2601_94912102的博客 296

蓝牙模块HM-10手册

蓝牙模块HM-10手册，该手册对蓝牙模块HM-10进行了详细的介绍和使用方法以及一些AT指令。

CSS 选择器 & 优先级

本文系统讲解CSS选择器语法与权重规则：通配符*、元素/类/ID选择器、属性选择器及其拓展用法；组合选择器包括后代、子代、兄弟关系；伪类（如:hover）与伪元素（如::before）区分使用；重点强调权重优先级：!important > 行内样式 > ID > 类/伪类 > 元素/伪元素 > 通配符，同级以书写顺序为准，继承不可覆盖。提醒避免误区：nth-child按所有子元素计数，非仅同类标签；避免滥用!important；推荐优先使用class而非id写样式。

2603_96589662的博客 120

CSS display 模式转换详解

display属性是 CSS 布局的基石。掌握blockinlineflexgrid等常见取值，并理解它们之间的转换规则，能够帮助我们更灵活地控制页面结构。在实际开发中，建议优先使用flex和grid完成布局，仅在必要时才通过display转换处理细节问题。

2601_96876853的博客 341

CSS 定位布局与 z-index 叠放次序详解

层叠上下文（Stacking Context）是一个独立的「三维空间」，内部元素的z-index只在同一个上下文内比较。子元素的z-index再大，也无法突破父级上下文所处的层级。根元素html；position为且z-index不为auto；或sticky（现代浏览器）；opacity小于 1；transformfilter等不为none；；flex/grid子项且z-index不为auto。position决定元素是否脱离文档流以及定位参照物；z-index。

2601_96876853的博客 439

升级 three 后标签「点击全部失效」——CSS2D 层事件治理全解

three.js 升级至 r147+ 后，CSS2D 标签点击失效源于 OrbitControls 绑定 canvas 导致指针捕获劫持事件。解决方案分两层：第一层，通过 labelRenderer.domElement.style.pointerEvents = 'none' 使层透明，仅交互元素设 pointer-events: auto 并用 stopPropagation 阻止冒泡；第二层，防止窗体误关与重复弹窗，需在容器上阻止冒泡、关闭按钮使用 stopImmediatePropagation

weixin_44242600的博客 349

CSS 定位布局：相对定位与绝对定位详解

父元素 relative + 子元素 absolute」是 CSS 中最常用的定位组合，几乎所有的角标、下拉菜单、tooltip 都基于它实现。它决定了元素在页面中的定位方式，也是实现悬浮按钮、下拉菜单、遮罩层、角标等常见 UI 效果的核心手段。的偏移只是视觉位移，不会改变元素在文档流中的占位，因此不会引起其他元素重排。在视觉上向右移动 30px、向下移动 20px，但它原本占据的空间依然保留，后面的元素不会补上来。再大也无法跳出父元素的层级。，不再占据原来的空间，其他元素会像它不存在一样重新排列。

2601_96876853的博客 272

To-Do List 的「修改」功能与 CSS 定位

买牛奶</td><td index="1">写作业</td><td index="2">跑步

2401_89953644的博客 312

CSS 轮播图：让内容盒子垂直居中的几种做法

做轮播图时，最常见的结构是「外层容器固定高度 + 内层内容盒子（图片、标题、按钮组）」。轮播图内容盒子的垂直居中，本质是「容器有高度 + 子元素有居中规则」。轮播容器用 Flex，内层盒子自动在两个方向居中，代码最少、兼容性最好（现代浏览器全支持）。下面按「从简单到通用」的顺序，给出几种在轮播图中真正好用的垂直居中方案。，水平居中了，但垂直方向总是贴着顶部，或者被拉伸变形。，这是不依赖 Flex/Grid 的经典写法。新项目不建议使用，仅在维护老代码时能看懂即可。是 Flex 两个属性的简写，写法更短。

2601_96876853的博客 399

CSS 弹性盒子布局：display: flex 从入门到实战

2009 年 W3C 提出了 Flexible Box Layout（弹性盒子布局），它用一套「主轴 + 交叉轴」的模型，把「排列、对齐、分配剩余空间」这些高频需求变成了一行 CSS 就能解决的事情。会立刻从「块级纵向排列」变成「横向一行排列」，这就是 Flex 最直观的效果。只改变视觉顺序，不改变 DOM 顺序，注意可访问性与 Tab 键顺序问题。这些方案要么需要清除浮动，要么需要精确计算宽度，垂直居中更是经典难题。所有对齐属性都是围绕这两个轴展开的，记住这一点，后面的属性就不会混淆。

2601_96876853的博客 465
上一篇： 25 个在 Web 中嵌入图表的免费资源
下一篇： IE6 死后即将大快人心的10件事
点赞 0
评论 1
书签 书签 0
comsharp
comsharp
博客等级 码龄20年 1475粉丝 41原创
+ 关注
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值