&

在 CSS 中，& 符号本身并没有特定的含义，它不是 CSS 语法的一部分。但在一些 CSS 预处理器中，如 Sass 和 Less，& 符号被用来引用父选择器，这是一个非常有用的功能，可以让你在嵌套规则内部创建更具体的选择器。

例如，在 Sass 或 Less 中，你可以使用 & 来构建伪类或伪元素的选择器，或者在响应类或状态变化时改变样式：

scssCopy Code
// Sass 示例
.parent {
  color: black;

  &:hover {
    color: red;
  }

  &.active {
    color: green;
  }
}

编译后的 CSS 将会是：

cssCopy Code
.parent {
  color: black;
}
.parent:hover {
  color: red;
}
.parent.active {
  color: green;
}

在这个例子中，& 代表了 .parent 这个父选择器，&:hover 和 &.active 分别表示 .parent:hover 和 .parent.active。

如果你在标准的 CSS 文件中看到了 & 符号，那么它可能是一个错误，或者是 CSS 文件被预期为与某个预处理器一起使用，但是没有正确地进行预处理。标准的 CSS 不支持 & 符号作为父选择器的引用，这是 CSS 预处理器提供的一个扩展功能。

outline

CSS 的 outline 属性是用来设置元素轮廓的一个简写属性，它可以指定轮廓的颜色、样式和宽度。轮廓是绘制在元素边框（border）的外侧，可以用来为焦点元素（如表单输入字段）提供视觉反馈，但不会影响元素的位置或大小，因为轮廓不占据空间。

outline 属性通常包括以下三个部分：

outline-width: 设置轮廓的宽度，可以是像 2px 这样的具体数值，也可以使用关键词，如 thin、medium 和 thick。
outline-style: 设置轮廓的样式，比如 dotted（点状）、dashed（虚线）、solid（实线）等。
outline-color: 设置轮廓的颜色，可以使用颜色名、十六进制颜色码或者 rgb()、rgba()、hsl()、hsla() 等颜色函数。

这些属性也可以单独设置，分别为 outline-width、outline-style 和 outline-color。

例如，以下 CSS 规则会给元素设置一个2像素宽的实线蓝色轮廓：

cssCopy Code
element {
  outline: 2px solid blue;
}

如果你只想设置轮廓的某个特定属性，也可以分别写：

cssCopy Code
element {
  outline-width: 2px;
  outline-style: solid;
  outline-color: blue;
}

轮廓通常用于可聚焦元素，以帮助用户识别当前键盘焦点所在的位置。默认情况下，浏览器会在用户通过键盘导航到可聚焦元素时显示一个轮廓。然而，有时开发者会通过设置 outline: none; 或 outline: 0; 来移除这个默认轮廓，尤其是出于美学考虑。但从可访问性的角度来看，这并不是一个好做法，因为它会使那些依赖键盘导航的用户难以识别当前焦点的位置。如果你需要移除默认轮廓，应该提供一个明显的焦点指示替代方案。

SEO

SEO，即搜索引擎优化（Search Engine Optimization），是指通过优化网站结构和内容等方式，提高网站在搜索引擎中的自然排名，吸引更多的访问者。对于HTML页面来说，SEO主要是通过合理使用HTML标签和遵循一些最佳实践来实现的。

以下是一些HTML中常见的SEO策略：

标题标签 (<title>)：每个HTML页面都应该有一个清晰、描述性的标题。标题标签是搜索引擎确定页面主题的重要因素，它会出现在搜索结果中，因此应该包含关键词，同时对用户有吸引力。
元描述标签 (<meta name="description" content="...">)：虽然元描述标签不直接影响排名，但它会出现在搜索结果的页面描述中，可以吸引用户点击。描述应该简洁、相关，并包含关键词。
头部标签 (<h1>, <h2>, <h3> 等)：使用这些标签来组织内容，确保每个页面有一个 <h1> 标签，它通常表示页面最重要的标题。这些标签有助于搜索引擎理解页面结构和内容的重点。
alt 属性：图片不被搜索引擎直接理解，但通过图片的 alt 属性可以提供描述性文本，有助于搜索引擎理解图片内容，并在图像搜索结果中获得排名。
URL 结构：URL 应该简洁、有意义，并包含关键词。使用连字符（-）而不是下划线（_）来分隔单词。
链接和锚文本：内部链接有助于搜索引擎了解网站结构，同时外部链接到相关且权威的网站也可以提高网站的信誉度。锚文本应该描述性强，并包含关键词。
网站导航和结构：网站应该有清晰的导航和逻辑的结构，以便用户和搜索引擎都能轻松地找到内容。
移动友好性：随着移动设备的普及，确保网站对移动用户友好也非常重要。这包括响应式设计、加载速度和触控优化。
加载速度：页面加载速度是搜索引擎排名的因素之一。优化图片大小、最小化CSS和JavaScript文件、使用缓存等技术可以提高加载速度。
结构化数据：使用Schema.org等结构化数据标记可以帮助搜索引擎更好地理解页面内容，并可能增加页面在搜索结果中的显眼度，如富片段（Rich Snippets）。
robots.txt 和 sitemap.xml：这些文件帮助搜索引擎更好地爬行和索引网站。robots.txt 文件告诉搜索引擎哪些页面不应该被爬行，sitemap.xml 提供了网站所有页面的列表和结构。

以上只是SEO的一部分实践，真正有效的SEO策略需要根据具体情况定制，并且需要定期更新和调整以应对搜索引擎算法的变化。

weui-cells 和weui-cells_form

weui-cells 和 weui-cells_form 是 WeUI 框架中用于构建用户界面的 CSS 类。WeUI 是一个由微信官方设计团队开发的前端框架，旨在帮助开发者创建具有微信原生感觉的移动端网页。

在 WeUI 中，weui-cells 类通常用于构建列表或表单的容器，而 weui-cells_form 类则是一个特定于表单的变种，用于包含和格式化表单元素。

以下是这些类的一般用途：

weui-cells: 这个类用来作为一组表单控件（如输入框、切换开关、选择器等）或者信息展示（如联系人列表、消息列表等）的容器。它负责确保列表中的每个项目（称为 "cell"）都有统一的样式和布局。
weui-cells_form: 当 weui-cells 用于表单时，添加 weui-cells_form 类可以为表单元素提供更适合表单的样式。比如，可能会调整内边距、外边距、字体大小等，以适应表单的上下文。

举个例子，如果你正在创建一个登录表单，可能会使用这些类似下面的 HTML 结构：

htmlCopy Code
<div class="weui-cells weui-cells_form">
    <div class="weui-cell">
        <div class="weui-cell__hd">
            <label for="username" class="weui-label">用户名</label>
        </div>
        <div class="weui-cell__bd">
            <input class="weui-input" type="text" id="username" placeholder="请输入用户名">
        </div>
    </div>
    <div class="weui-cell">
        <div class="weui-cell__hd">
            <label for="password" class="weui-label">密码</label>
        </div>
        <div class="weui-cell__bd">
            <input class="weui-input" type="password" id="password" placeholder="请输入密码">
        </div>
    </div>
</div>

在这个例子中，.weui-cells 作为包含所有表单元素的外层容器，而 .weui-cell 则用于每个独立的表单项。.weui-cell__hd 和 .weui-cell__bd 分别用于布局标签（Label）和表单控件（Input）。

要正确地实现 WeUI 的样式，你需要在你的页面中引入 WeUI 的 CSS 文件。这些类名没有任何意义，除非与 WeUI 的 CSS 样式表一起使用。

deg

在 CSS 中，deg 是度（degree）的缩写，它是一个角度单位，用于定义旋转角度。这个单位通常与 transform 属性中的 rotate() 函数以及其他需要角度值的地方一起使用。

一个完整的圆等于 360 度，所以：

0deg 表示没有旋转。
90deg 表示顺时针旋转四分之一圈。
180deg 表示顺时针旋转半圈。
270deg 或 -90deg 表示顺时针旋转四分之三圈。
360deg 或 0deg 表示顺时针旋转一整圈，实际上回到了起始位置。

在使用 rotate() 函数时，正值表示元素将顺时针旋转，而负值表示元素将逆时针旋转。例如：

cssCopy Code
.element {
  transform: rotate(45deg); /* 元素将顺时针旋转 45 度 */
}

.element {
  transform: rotate(-45deg); /* 元素将逆时针旋转 45 度 */
}

除了 deg，CSS 角度还可以使用其他单位，如弧度（rad）、梯度（grad）和转（turn），其中 1turn 等于 360deg，1rad 约等于 57.2958deg，1grad 等于 0.9deg。

在实际应用中，deg 是最常用的角度单位，因为它直观且易于理解。当涉及到旋转动画或需要指定方向时，你会经常看到 deg 单位的使用。

学会这些冷知识，相信你的页面更加美丽

&

outline

SEO

weui-cells 和weui-cells_form

deg