猿笔记

HTML 标签之 <style>

概述

HTML 的 <style> 元素包含文档的样式信息或者文档的部分内容。默认情况下，该标签的样式信息通常是 CSS 的格式。

名称来源

Style，样式。

最佳实践

如果 type 属性未指定，则默认为 text/css。因此该属性可省略。

相关小抄

主流 CSS 框架和组件库的响应式设计断点规格
主流 CSS 框架和组件库（Bootstrap、ElementUI、ElementPlus、Ant Design、Tailwind CSS 等）都提供了响应式设计规范，基于屏幕宽度划分不同的的断点规格。 | 断点规格 | [Bootstrap v5](https://getbootstrap.com/docs/5.3/layout/breakpoints/) | [ElementPlus](htt
CSS transform 实现镜像翻转图片
有时，我们拿到的图片素材与我们期望的方向刚好相反，或者我们想用同一张图片素材实现正反两个方向的效果。这时就需要用到 CSS 翻转图片的技巧（把 `👉` 显示为 `👈`）。 > 注意，是把图片进行镜像翻转，而不是让图片围绕中心点旋转。 > 其实这个技巧不仅只对图片有用，对其他元素也同样有效。代码片断方案一 /* 水平镜像翻转 */ .flip-horizontally { transfo
超长文本用省略号截断（多行）
当容器的最大高度有限制时，如果其内部文本超长溢出，用省略号把文本超出指定行数之后的部分截断是个常见需求。本文讨论多行文本超长截断的场景。代码片段 .container { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; // 行数 } > `-web
超长文本用省略号截断（单行）
当文本超长溢出容器宽度时，用省略号把文本截断是个常见需求。本文仅讨论单行文本超长截断的场景。代码片段 .container { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
Clearfix 清除浮动（闭合浮动）
当一个容器的所有子元素都具备浮动属性时，容器的高度并不会被撑开，这往往是不符合预期的。此时需要一种称作 “clearfix” 的方法来实现 “闭合浮动” 的效果。有人把这个场景笼统地称为 “清除浮动”，但实际上还是 “闭合浮动” 的说法更准确一些。代码片段类： .clearfix::after { content: ''; display: table; clear:
Flexbox 实现水平垂直双向居中
.container { display: flex; justify-content: center; align-items: center; } 限制条件无限制条件。即： * 容器无需定宽定高。 * 子元素无需定宽定高。坑 * 当容器指定 `display: flex;` 之后，如果它的子元素不止一个，则这些子元素会尽可能水平排列，这可能与预期不符。
HTML DTD（DOCTYPE 定义）
DTD，文档类型定义，有时也称作文档类型声明。在 HTML 文档中，DTD 声明是必要的。在 HTML 文档的最顶部放置一个正确的 DTD，可以让浏览器以符合规范的 “标准模式” 来渲染页面。名称来源 Document Type Definition，DTD，文档类型定义。最佳实践 * 总是使用 HTML5 的 DTD： <!DOCTYPE html> 它不仅更简短，而且具有更好的向前兼
HTML 标签之 <address>
**HTML `<address>` 元素** 表示其内部的 HTML 提供了某个人、某些人或某个组织（等等）的联系信息。名称来源 Address，地址，联系方式。最佳实践 * 由 `<address>` 元素中任何形式的内容所提供的联系信息适用于上下文的背景信息，可以是必要的任何一种联系方式，比如真实地址、URL、电子邮箱、电话号码、社交媒体账号、地理坐标等等。此元素应该包含联系信息对应的
HTML 标签之 <footer>
**HTML `<footer>` 元素**表示最近一个 “章节性” 祖先元素或整个页面的页脚。一个页脚通常包含该章节作者、版权信息或者与文档相关的链接等信息。名称来源 Footer，页脚。最佳实践 * `<footer>` 元素内的作者信息应包含在 `<address>` 元素中。
HTML 标签之 <header>
**HTML `<header>` 元素**用于展示介绍性内容，通常包含一组介绍性的或是辅助导航的实用元素。它可能包含一些标题元素，但也可能包含其他元素，比如 Logo、搜索框、作者名称，等等。名称来源 Header，页头。最佳实践 * 我们经常会看到 `<header>` 包含标题元素（`<h1>` 至 `<h6>` 元素），但这不是必需的。`<header>` 也可以用来包裹一个章节的目录

概述

名称来源

最佳实践

主流 CSS 框架和组件库的响应式设计断点规格

CSS transform 实现镜像翻转图片

超长文本用省略号截断（多行）

超长文本用省略号截断（单行）

Clearfix 清除浮动（闭合浮动）

Flexbox 实现水平垂直双向居中

HTML DTD（DOCTYPE 定义）

HTML 标签之 <address>

HTML 标签之 <footer>

HTML 标签之 <header>