Scroll progress animations in CSS

2023-12-03note1 分钟读完 (大约150个字)

把 css animation 绑定到 scroll progress timeline

1
2
3

.progress {
  animation-timeline: scroll();
}

scroll() 函数指定滚动容器和轴。默认值为 scroll(nearest block) ，也可以绑定到根容器 scroll(root block)

.progress {
  animation-timeline: scroll(root);
  // 结合关键帧动画
  // 可简写为：animation: scaleProgress auto linear;
  animation-name: scaleProgress;
  animation-duration: auto;
  animation-timing-function: linear;
}

Using HTML landmark roles to improve accessibility
- aria 规定了 8 个标志角色
- banner
- navigation
- search
- main
- region
- complementary
- form
- contentinfo
- 使用 role 属性标记
  - ```
  <div class="banner" role="banner"></div>
```
- 部分 html 元素自带角色标记

常用语义标签快速了解

2019-08-12note6 分钟读完 (大约835个字)

aside - 侧栏

aside 表示跟文章主体不那么相关的部分，它可能包含导航、广告等工具性质的内容。

article - 独立主体

页面中具有明确独立性的部分。

header，如其名，通常出现在前部，表示导航或者介绍性的内容。
footer，通常出现在尾部，包含一些作者信息、相关链接、版权信息等。

section - 语义化 div

section 元素代表文档中的“节”或“段”，“段”可以是指一片文章里按照主题的分段；“节”可以是指一个页面里的分组。section 通常还带标题，虽然 html5 中 section 会自动给标题 h1-h6 降级，但是最好手动给他们降级。

hgroup, h1, h2 - 标题组

hgroup 是标题组，h1 是一级标题，h2 是二级标题，出现有主副标题情况时，用 hgroup 包裹住

<hgroup>
  <h1>主标题</h1>
  <h2>副标题</h2>
</hgroup>

abbr - 缩写

用来包裹缩写的内容。

1	<abbr title="World Wide Web">WWW</abbr>

hr - 转折

样式表现为一根横线，但表示的是故事走向的转变或者话题的转变，如果需要纯视觉效果的横线不应用此标签，而只用 CSS 去实现。

p - 段落

一般用来表示段落，也可以用 class = "note" 的方式表示 HTML 中没有相关语义标签时的替代。

strong, em - 强调

strong 表示包裹的内容很重要， em 表示重音，防止歧义。

blockquote, q, cite - 引用

blockquote 表示段落级引述内容，q 表示行内的引述内容，cite 表示引述的作品名。

time - 时间

1	<time datetime="2019-7-30">30 July 2019</time>

figure, figcaption - 独立插入

figure 表示一段富文本，可以是一个文章插图、一段代码、一个表格，通常搭配 figcaption 来表述这段富文本的描述/标题，当然，一个 figure 下只能有一个 figcaption，也可以没有

dfn - 定义

用来包裹被定义的名词

1	<dfn>苹果</dfn>是一种水果。

nav, ul, ol - 导航，列表

nav 表示网站的导航，但不一定所有的导航都需要用 nav 来实现，建议仅用来实现比较重要的导航，例如网页页脚的链接列表，直接 footer 即可。另外，每个页面可以有多个 nav。ul 表示无序列表， ol 表示有序列表。ul，ol 多数出现正在行文中间，它的上文多数在提示：要列举某些项。不要给所有并列关系，递进关系都加上 ul, ol 标签。

pre, samp, code - 预设置

pre 标签，表示这部分内容是预先排版过的，不需要浏览器进行排版。samp 标签表示一段计算机程序的示例输出。code 标签表示一段代码。

<pre>
	<samp>
GET /home.html HTTP/1.1
Host: www.example.org
	</samp>
</pre>

<pre>
	<code>
		&lt;html&gt;
          &lt;head&gt;
            &lt;title&gt;Example.org – The World Wide Web&lt;/title&gt;
          &lt;/head&gt;
          &lt;body&gt;
            &lt;p&gt;The World Wide Web, abbreviated as WWW and commonly known ...&lt;/p&gt;
          &lt;/body&gt;
        &lt;/html&gt;
	</code>
</pre>

不常用语义标签

不常用语义标签.jpg

快速理解 Web 语义化

2019-08-12note12 分钟读完 (大约1842个字)

参考: winter 的重学前端

语义类标签是什么？

语义是我们说话表达的意思，多数的语义实际上都是由文字来承载的。语义类标签则是纯文字的补充，比如标题、自然段、章节、列表，这些内容都是纯文字无法表达的，我们需要依靠语义标签代为表达。

为什么要用语义?

正确的标签做正确的事情
页面内容结构化
语义类标签增强了可读性，无 CSS 样子时也容易阅读，便于阅读维护和理解，对开发者友好
便于浏览器、搜索引擎解析。利于爬虫标记、利于 SEO
语义类可以支持读屏软件，根据文章可以自动生成目录

什么情况下不需要使用语义？

在产品里，HTML 用于描述软件界面多过富文本时，因为软件界面里的东西，实际上几乎是没有语义的。比如说，我们做了一个购物车功能，购物车这个按钮，我们一定要用Button吗？实际上我觉得没必要，因为这个场景里面，跟表单中的Button，其实已经相差很远了，所以，在任何软件界面的场景中，可以直接使用 div 和 span。

语义化的三个常见使用场景

自然语言表达能力的补充

作为自然语言和纯文本的补充，用来表达一定的结构或者消除歧义

比如使用 em 标签去消除歧义

我今天吃了一个苹果

我们看看这句话，看上去它很清楚，但是实际上，这句话放到不同上下文中，可能表达完全不同的意思。

1	昨天我吃了一个香蕉。今天我吃了一个苹果。

再比如：

1	昨天我吃了两个苹果。今天我吃了一个苹果。

在读这两段里面的“今天我吃了一个苹果”，发现读音不自觉地发生了变化。

实际上，不仅仅是读音，这里的意思也发生了变化。前一段中，表示我今天吃的是苹果，而不是别的什么东西，后一段中，则表示我今天只吃了一个苹果，没有多吃。

当没有上下文时，如何消除歧义呢？这就要用到我们的em标签了。em 表示重音：

1	今天我吃了一个<em>苹果</em>。今天我吃了<em>一个</em>苹果。

通过em标签，我们可以消除这样的歧义。

一些文章常常会拿em和strong做对比，实际上，我们只要理解了em的真正意思，它和strong可谓天差地别，并没有任何混淆的可能。

文章标题摘要

一篇文档会有一个树形的目录结构，它由各个级别的标题组成。这个树形结构可能不会跟 HTML 元素的嵌套关系一致。

h1-h6 是最基本的标题，它们表示了文章中不同层级的标题。有些时候，我们会有副标题，为了避免副标题产生额外的一个层级，我们使用 hgroup 标签。

我们来看下有/无 hgroup 的对比：

<h1>JavaScript对象</h1>
<h2>我们需要模拟类吗？</h2>
<p>balah balah</p>
......

此段生成以下标题结构：

JavaScript 对象
- 我们需要模拟类吗？
- …

<hgroup>
  <h1>JavaScript对象</h1>
  <h2>我们需要模拟类吗？</h2>
</hgroup>
<p>balah balah</p>
......

这一段生成以下标题结构：

JavaScript 对象——我们需要模拟类吗？
- …

我们通过两个效果的对比就可以知道，在 hgroup 中的 h1-h6 被视为同一标题的不同组成部分。

从 HTML 5 开始，我们有了 section 标签，这个标签可不仅仅是一个“有语义的 div”，它会改变 h1-h6 的语义。section 的嵌套会使得其中的 h1-h6 下降一级，因此，在 HTML5 以后，我们只需要 section 和 h1 就足以形成文档的树形结构：

适合机器阅读的整体结构

随着越来越多的浏览器推出“阅读模式”，以及各种非浏览器终端的出现，语义化的 HTML 适合机器阅读的特性变得越来越重要。

应用了语义化结构的页面，可以明确地提示出页面信息的主次关系，它能让浏览器很好地支持“阅读视图功能”，还可以让搜索引擎的命中率提升，同时，它也对视障用户的读屏软件更友好。

我们正确使用整体结构类的语义标签，可以让页面对机器更友好。比如，这里一个典型的 body 类似这样：

<body>
  <header>
    <nav>...</nav>
  </header>
  <aside>
    <nav>...</nav>
  </aside>
  <article>
    <header>...</header>
    <section>...</section>
    <section>...</section>
    <section>...</section>
    <footer>...</footer>
  </article>
  <article>...</article>
  <article>...</article>
  <footer>
    <address></address>
  </footer>
</body>

在 body 下面，有一个 header，header 里面是一个 nav，跟 header 同级的有一个 aside，aside 里面也有一个 nav。接下来是多个独立的文章，也就是一个一个的 article。每一个 article 里面都有自己的 header、section、footer。section 里面可能还有嵌套，但是我们就不管了，最后是一个 footer，这个 footer 里面可能有 address 这样的内容。

在这个结构里，我们看到了一些新标签，我也来逐个介绍一下。

header，如其名，通常出现在前部，表示导航或者介绍性的内容。
footer，通常出现在尾部，包含一些作者信息、相关链接、版权信息等。

header 和 footer 一般都是放在 article 或者 body 的直接子元素，但是标准中并没有明确规定，footer 也可以和 aside，nav，section 相关联（header 不存在关联问题）。

aside 表示跟文章主体不那么相关的部分，它可能包含导航、广告等工具性质的内容。

aside 很容易被理解为侧边栏，实际上二者是包含关系，侧边栏是 aside，aside 不一定是侧边栏。

aside 和 header 中都可能出现导航（nav 标签），二者的区别是，header 中的导航多数是到文章自己的目录，而 aside 中的导航多数是到关联页面或者是整站地图。

最后 footer 中包含 address，这是个非常容易被误用的标签。address 并非像 date 一样，表示一个给机器阅读的地址，而是表示“文章（作者）的联系方式”，address 明确地只关联到 article 和 body。

总结

本篇中我们介绍了一些基本原则和 HTML 文档的整体结构，从整体上了解了 HTML 语义。
分一些场景来看语义，把它用在合适的场景下，可以获得额外的效果。