这是我参与「第五届青训营 」笔记创作活动的第1天。

虽然之前已经在MDN上学过了HTML与CSS基础相关的知识，在这次的视频课仍收获颇丰。这次就特别写一下那些之前没有注意到的东西吧。

HTML

语义化HTML标签

语义化优势¹：

1. 更便于开发——便于和你一起的开发人员理解你写的这团东西到底是什么意思
2. 更适配移动端——更易于响应式开发（避免div嵌套？
3. 更利于机器识别网页——无论是页面阅读器还是搜索引擎SEO.

常见的一些语义化元素：

• article
• aside
• details
• figcaption: 照片字幕——照片的简短说明
• figure
• footer
• nav
• section

CSS

字体

字体的样式可通过多种方式控制²。

• font-family可以提供一个字体栈保证了网页上字体的可用性。
• font-style可用于打开和关闭文本斜体。
• font-weight可用于设置文字的粗细大小。
• font-decoration可以设置字体的文本装饰如下划线等。

通用字体

sans-serif其实是一类通用字体家族而非某一种字体，为字体样式提供了一个fallback方案。

才知道代码编辑器中的字体原来是等宽字体，相比其他字体拥有较高的统一性和一致性，便于对齐且行为简单明确。

定位

• static
• absolute
• relative
• sticky
• fixed

面试题的css定位解法

有A、B两个div。要求初始状态两者都显示，当鼠标移动至B上后，A不显示。

除了采用JS控制元素的透明度外，还可以搭配:hover伪类与position通过B覆盖在A上从而实现功能。

总结

CSS的功能实在是太多太杂难以记忆，同一种功能可以有N种实现方法，多向python学学啊喂！ChatGPT快来教我写样式吧🥰

Footnotes

1. HTML: 为无障碍提供一个良好的基础 ↩

2. 基本文本和样式 ↩