理解HTML + CSS样式选择器与元标记

HTML中的元标记

元标记是HTML文档头部的重要组成部分，它们提供了关于文档的各种元数据信息。元标记主要用于向搜索引擎提供 页面内容的关键信息。以下是几个重要的元标记及其作用：

Meta Keywords（关键字）

< meta name=“keywords” content=“keyword1, keyword2, keyword3”>
元标记中的name属性为keywords，content属性包含一系列逗号分隔的关键字，用于告知搜索引擎此页面的主要主题。

Meta Description（描述）

< meta name=“description” content=“This is a brief description of the page.”>
元标记中的name属性为description，content属性包含一段简短的页面描述，用于在搜索结果中显示。

Meta Robots（机器人）

< meta name=“robots” content=“noindex, nofollow”>
元标记中的name属性为robots，content属性指定了搜索引擎应如何对待页面。noindex表示禁止索引页面，nofollow表示禁止跟踪页面上的链接。

Meta HTTP-Equiv（HTTP等价）

< meta http-equiv=“Cache-Control” content=“no-cache”>
http-equiv属性模拟HTTP响应头，如Cache-Control用于控制缓存策略。

CSS中的样式选择器

类选择器

.class-name {

}
类选择器通过class属性来引用元素，允许我们为多个元素应用相同的样式。

ID选择器

#id-name {

ID选择器通过ID属性来引用元素，每个ID在一个页面中只能出现一次。

标签选择器

element-name {
}
标签选择器直接针对HTML元素名称进行选择。

后代选择器

header header-title {

}
后代选择器通过空格连接两个选择器，选择祖先元素内的所有子孙元素。

伪类选择器

element:state {

}
伪类选择器用于选择处于特定状态的元素，如:hover表示鼠标悬浮时的状态。

属性选择器

element[attribute] {

}
属性选择器根据元素的属性来选择元素，如a[href^=“https”]选择所有以"https"开头的超链接。

选择器组

element1, element2, … {

}
选择器组将多个选择器合并在一起，共同应用相同的样式。

CSS中的精灵技术

精灵技术是一种将多个小图标或图像整合到一个大图像文件中的技术，这样可以减少HTTP请求的数量，从而提高网页的加载速度和性能。

精灵图的工作原理
精灵图的基本思想是将多个小图像整合到一张大的图像文件中，然后通过CSS的background-image background-repeat: no-repeat; background-position属性来显示所需的那部分图像。
假设我们有一张图片，两个小图标

				<ul>
                    <li><a href="#mod1">预定商品</a></li>
                    <li><a href="#mod2">专辑价格</a></li>
                  
                </ul>

 ul li {
            width: 100px;
            text-align: center;
            margin-top: 20px;
            background-image: url(img/buyer/mod_circle.png);
            background-repeat: no-repeat;
            background-position: center 10px;
        }
        //这里是通过鼠标滑动来控制图片的样式的
 ul li:hover {
            background-position: center -90px;
        }      

效果如下：