ID Selectors - 声明式 CSS 选择的

ID Selectors - 声明式 CSS 选择的精髓

CSS 中，ID 选择器（ID selectors）是一种强力的选择器类型，它们允许你根据 HTML 元素的 id 属性来选择元素。该选择器使得找到特定的元素变得非常容易和直观。在这篇文章中，我们将深入探讨 ID selectors 的优势和巧妙使用方法。

优势：

具体性：ID selectors 只选择具有特定 id 值的元素，这可以确保选择元素是尽可能的精确和确定性的。
优先级：ID selectors 具有高的优先级，这意味着它们在 CSS 决定如何处理一组冲突选择器时，会根据具有更专门的匹配来获得较高的优先级。
唯一性：HTML 中的每个 id 必须是唯一的，这使得 ID selectors 很适合应用局部样式，因为每个元素都可以有独特的样式。

巧妙用法：

选择特定元素：ID selectors 可以用于选择特定的 HTML 元素，例如通过为特定行内元素（如链接）添加 id，并使用 ID selectors 来为其应用样式。
与其他选择器结合：ID selectors 可以与其他选择器（如类选择器和属性选择器）和伪类一起使用，以创建更复杂的选择器和样式。
创建可复用的样式：通过为 ID selectors 定义复杂样式，我们可以将它们应用于多个不同的元素，从而实现样式的重复使用和减少冗余代码。

掌握 ID selectors 编写 CSS 时的关键点包括：

确保在你的 HTML 文件中每个 id 是唯一的。这免去了为这些元素编写过多的复杂选择器，并提高了编码效率。
使用 cure CSS 的 collapse 规则。因为 ID selectors 具有较高的优先级，可能会导致冲突，所以使用 collapse 规则可以帮助解决这个问题。
始终尽量在 CSS 中使用 ID selectors。虽然类 selectors 也使得选择定义更加容易，但 ID selectors 提供了更高的精确性和优先级，因此在合适的情况下使用它们是明智的。

现在，使用 ID selectors 时请确保你已经掌握了这些关键点和推荐最佳实践。

让我们开始，让你的 HTML 变得更具特色和动态性！

在开篇

如果您是一名运维开发工程师，未来想要打造B/S架构产品，那么前端必须得攻破，笔者会和你一起坚持，请跟随我的步伐一起出发吧！

本篇带你一起复习巩固HTML常用的元素和HTML属性，记住，所有的HTML文档是由HTML元素定义的，且HTML属性是HTML元素提供的附加信息。

HTML元素有哪些？

HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。

代码如下:

<!DOCTYPE html>
<html>
    <head >
        <title>彩虹运维技术栈社区，公众号ID：TtrOpsStack</title>
        <meta charset="utf-8" />
    </head>
    <body>
        <h1>彩虹运维技术栈社区公众号ID：TtrOpsStack</h1>
        <br>
        <p>我们会持续分享原创技术文章</p>
    </body>
</html>

说明：

如：开始标签是<h1>，中间是内容，结束标签是</h1>，
特别说明：某些HTML元素没有内容 (如 <br> )。这些元素称为空元素。空元素没有结束标记！

效果如下:

嵌套的HTML元素

说明：

大多数 HTML 元素可以嵌套（可以包含其他 HTML 元素）。
HTML 文档由嵌套的 HTML 元素构成。
下面的示例包含四个HTML元素 (<html>, <body>, <h1> , <p>):

小栗子

<!DOCTYPE html>
<html>
    <body>
        <h1>彩虹运维技术栈社区</h1>
        <p>公账号ID：TtrOpsStack</p>
    </body>
</html>

小栗子解析

<html> 元素定义了整个 HTML 文档。
它有一个开始标签 <html> ，以及一个结束标签 </html>。
在 <html> 元素内部还有其他元素： <body>:

代码如下:

<!DOCTYPE html>
<html>
    <head>
        <title>彩虹运维技术栈社区</title>
        <meta charset="UTF-8" />
    </head>
    <body>
        <h1>彩虹运维技术栈社区</h1>
        <p>公账号ID：TtrOpsStack</p>
    </body>
</html>

说明:

<body> 元素定义了 HTML 文档的主体。
它有一个开始标签 <body> ，以及一个结束标签 </body>。
在 <body> 元素内部还有两个其他元素：<h1> 和 
<p>:

代码如下:

<!DOCTYPE html>
<html>
    <head>
        <title>彩虹运维技术栈社区</title>
        <meta charset="UTF-8" />
    </head>
    <body>
        <h1>彩虹运维技术栈社区</h1>
        <p>公账号ID：TtrOpsStack</p>
    </body>
</html>

说明：

<h1> 元素定义标题。
它有一个开始标签 <h1> ，以及一个结束标签 </h1>:

代码如下:

<!doctype html>
<html>
    <head>
        <title>TtrOpsStack</title>
        <meta charset="UTF-8" />
    </head>
    <body>
        <h1>彩虹运维技术栈社区</h1>
    </body>
</html>

说明：

<p> 元素定义段落。
它有一个开始标签 <p> ，以及一个结束标签 </p>:

代码如下：

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta charset="UTF-8"/>
    </head>
    <body>
        <p>公账号ID：TtrOpsStack</p>
    </body>
</html>

HTML空元素

说明：

没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。
<br> 就是没有关闭标签的空元素:

代码如下：

<!DOCTYPE html>
<html>
    <head >
        <title>彩虹运维技术栈社区，公众号ID：TtrOpsStack</title>
        <meta charset="utf-8" />
    </head>
    <body>
        <p>这是 <br> 彩虹运维技术栈社区。<br> 公众号ID：TtrOpsStack</p>
    </body>
</html>

HTML属性

什么是HTML属性？

HTML元素可以设置属性
属性可以在元素中添加附加信息
属性一般描述于开始标签
属性总是以名称/值对的形式出现，比如：name="value"

href属性

说明：

<a> 标签用于定义HTML 链接。 链接的地址在 href 属性中指定：

代码如下:

<!DOCTYPE html>
<html>
    <head>
        <title>彩虹运维技术栈社区-TtrOpsStack</title>
        <meta charset="UTF-8" />
    </head>
    <body>
        <a href="https://mp.weixin.qq.com/s/Zjdes2iHZ4rdpQayoWPVWQ">重磅！DIY的Prometheus主备方案，全网唯一。生产未上，测试先行。</a>
    </body>
</html>

src属性

说明：

<img> 标签用于在HTML页面中嵌入图像。 src 属性指定要显示的图像的路径：

代码如下：

<!DOCTYPE html>
<html>
    <head>
        <title>微信公众号ID:TtrOpsStack(彩虹运维技术栈社区)</title>
        <meta charset="UTF-8" />
    </head>
    <body>
        <h1>TtrOpsStack的Logo</h1>
        <img src="img/logo-wechat-id.jpg">
    </body>
</html>

有两种方法可以在src属性中指定URL：

绝对URL：链接到另一个网站上的一个图像。

注意: 外部图像可能受版权保护。如果你没有得到使用它的许可，你可能违反了版权法。此外，您无法控制外部图像；它可能会突然被删除或更改。

相对URL：链接到网站中托管的图像。在这里，URL不包括域名。如果URL开头没有斜杠，它将相对于当前页面。比如: src="logo-wechat-id.jpg". 如果URL以斜杠开头，它将是相对于当前域名的。 Example: src="/images/logo-wechat-id.jpg".

注意: 使用相对URL几乎总是最好的。如果您更改域，它们将不会中断。

width和height属性

说明：

<img> 标签还应包含 width 和 
height 属性，该属性指定图像的宽度和高度（以像素为单位）：

代码如下:

<!DOCTYPE html>
<html>
    <head>
        <title>微信公众号ID:TtrOpsStack(彩虹运维技术栈社区)</title>
        <meta charset="UTF-8" />
    </head>
    <body>
        <h1>TtrOpsStack的Logo</h1>
        <img src="img/logo-wechat-id.jpg" width="200" height="200">
    </body>
</html>

效果如下:

alt属性

说明：

如果由于某种原因无法显示图像，则<img> 标签的 alt 属性指定图像的备用文本。 这可能是由于连接速度慢，或者src属性中的错误，或者如果用户浏览器异常。

代码如下：

<!DOCTYPE html>
<html>
    <head>
        <title>微信公众号ID:TtrOpsStack(彩虹运维技术栈社区)</title>
        <meta charset="UTF-8" />
    </head>
    <body>
        <h1>TtrOpsStack的Logo</h1>
        <img src="imga/logo-wechat-id.jpg" width="200" height="200" alt="图片缺失">
    </body>
</html>

效果如下：

style属性

说明

style 属性用于设置样式，如颜色、字体、大小等。

代码如下:

<!DOCTYPE html>
<html>
    <head>
        <title>微信公众号ID:TtrOpsStack(彩虹运维技术栈社区)</title>
        <meta charset="UTF-8" />
    </head>
    <body>
        <p style="color:red;">微信公众号ID:TtrOpsStack(彩虹运维技术栈社区)</p>
    </body>
</html>

元素中的内容字体就会变成红色

lang属性

说明：

在<html>标记中包含lang属性，以声明网页的语言。这是为了帮助搜索引擎和浏览器。
以下示例指定国家代码为中文：

代码如下：

<!DOCTYPE html>
<html lang="zh">
    <head>
        <title>微信公众号ID:TtrOpsStack(彩虹运维技术栈社区)</title>
        <meta charset="UTF-8" />
    </head>
    <body>
        <p style="color:red;">微信公众号ID:TtrOpsStack(彩虹运维技术栈社区)</p>
    </body>
</html>

上述代码，关键的地方是：

<html lang="zh">

进一步剖析：

国家代码也可以添加到lang 属性中。前两个字符定义HTML页面的语言，后两个字符定义国家。
以下示例指定中文为语言，国家为中国：

代码如下:

<!DOCTYPE html>
<html lang="zh-Hans-CN">
    <head>
        <title>微信公众号ID:TtrOpsStack(彩虹运维技术栈社区)</title>
        <meta charset="UTF-8" />
    </head>
    <body>
        <p style="color:red;">微信公众号ID:TtrOpsStack(彩虹运维技术栈社区)</p>
    </body>
</html>

zh-Hans-CN是最新版本标准，其实也还是可以暂时继续使用：zh-CN的写法。

title属性

说明：

title 属性 定义有关元素的一些额外信息。
当您将鼠标移到元素上时，title属性的值将显示提示：

代码如下：

<!DOCTYPE html>
<html lang="zh-Hans-CN">
    <head>
        <title>微信公众号ID:TtrOpsStack(彩虹运维技术栈社区)</title>
        <meta charset="UTF-8" />
    </head>
    <body>
        <p title="公众号ID：TtrOpsStack">彩虹运维技术栈社区</p>
    </body>
</html>

效果如下：

写在最后

HTML标签对大小写不敏感，例如：

HTML 标签不区分大小写: <P> 等同 <p>。
万维网联盟（W3C）在 HTML 4 中推荐使用小写，而在未来 (X)HTML 版本中强制使用小写。

HTML元素语法总结

HTML 元素以开始标签起始
HTML 元素以结束标签终止
元素的内容是开始标签与结束标签之间的内容
某些 HTML 元素具有空内容（empty content）
空元素在开始标签中进行关闭（以开始标签的结束而结束）
大多数 HTML 元素可拥有属性

属性和属性值对大小写不敏。 title 等同 TITLE，但是建议始终使用小写属性，不过,W3C建议在HTML中使用小写属性，对于更严格的文档类型（如XHTML）要求使用小写属性。
属性值应该始终被包括在引号内。双引号是最常用的，不过使用单引号也没有问题。但是，W3C建议在HTML中使用单引号，并对XHTML要求更严格的文档类型中使用单引号。在某些个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号

本篇转载于：https://mp.weixin.qq.com/s/ESQkGSwOkRsTyBo0uPWEgQ

性为 HTML 元素提供附加信息。

HTML 属性

HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。

属性总是以名称/值对的形式出现，比如：name="value"。

属性总是在 HTML 元素的开始标签中规定。

属性实例

HTML 链接由 <a> 标签定义。链接的地址在 href 属性中指定：

<a href="http://www.baidu.com">This is a link</a>

属性例子 1

<h1> 定义标题的开始。

<h1 align="center"> 拥有关于对齐方式的附加信息。

属性例子 2

<body> 定义 HTML 文档的主体。

<body bgcolor="yellow"> 拥有关于背景颜色的附加信息。

属性例子 3:

<table> 定义 HTML 表格。

<table border="1"> 拥有关于表格边框的附加信息。

HTML 提示：使用小写属性

属性和属性值对大小写不敏感。

不过，万维网联盟在其 HTML 4 推荐标准中推荐小写的属性/属性值。

而新版本的 (X)HTML 要求使用小写属性。

始终为属性值加引号

属性值应该始终被包括在引号内。双引号是最常用的，不过使用单引号也没有问题。

在某些个别的情况下，比如属性值本身就含有双引号，那么必须使用单引号，例如：

name='Bill "HelloWorld" Gates'

下面列出了适用于大多数 HTML 元素的属性：

属性值描述

class classname 规定元素的类名（classname）

id id 规定元素的唯一 id

style style_definition 规定元素的行内样式（inline style）

title text 规定元素的额外信息（可在工具提示中显示）

在线咨询

上一篇：「笑容征集令」获奖结果公布 - 被镜头定格的笑容与美
下一篇：认识 HTML5

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商