19、Bootstrap 中显示标签的 class？

19、Bootstrap 中显示标签的 class？（必会）

lass="label"

例

规定页面上文本的默认颜色和大小：

<head>

</head>

<body>

<h1>This is a heading</h1>

<p>This is a paragraph.</p>

</body>

浏览器支持

只有 IE 9 和更早版本的 IE 浏览器支持 <basefont> 标签。应该避免使用该标签。

标签定义及使用说明

HTML5 不支持 <basefont> 标签。请用 CSS 代替。

在 HTML 4.01 中，<basefont> 元素已废弃。

<basefont> 标签定义文档中所有文本的默认颜色、大小和字体。

提示和注释

提示：使用 CSS 为文档中的文本规定默认颜色、大小和字体。

HTML 4.01 与 HTML5之间的差异

HTML5 不支持 <basefont> 标签，HTML 4.01 已废弃 <basefont> 标签。

可选的属性

属性	值	描述
color	color	HTML5 不支持。 HTML 4.01 已废弃。规定文档中文本的默认颜色。
face	font_family	HTML5 不支持。 HTML 4.01 已废弃。规定文档中文本的默认字体。
size	number	HTML5 不支持。 HTML 4.01 已废弃。规定文档中文本的默认大小。

标准属性

在 HTML 4.01 中，<basefont> 标签支持如下标准属性：

属性	值	描述
class	classname	规定元素的类名
dir	rtlltr	规定元素中内容的文本方向
id	id	规定元素的唯一 id
lang	language_code	规定元素中内容的语言代码
style	style_definition	规定元素的行内样式
title	text	规定元素的额外信息

如需完整的描述，请访问标准属性。

事件属性

在 HTML 4.01 中，<basefont> 标签不支持任何事件属性。

如需完整的描述，请访问事件属性。

如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039，我们一起飞！

lass和 ID 选择器

我们之前给一个段落中添加斜体的标识的时候我们会在CSS里面这样做，这次我们将学习使用ID选择器来实现这项功能

我们在之前的代码中给标签添加id

 <p id="author">
          <strong>劳拉·琼斯 (Laura Jones)</strong> 于 2027 年 6 月 21
          日星期一发布
        </p>

CSS代码是这样的，相信你能明白这是什么意思，相当于给这个段落起名字一样

#author {
  font-style: italic;
  font-size: 18px;
}

相同的道理，我们给版权信息也用这种方法去写；如下所示：

    <footer><p id="copyright">版权所有 ? 2027 sbz</p></footer>

类选择器

除了id选择器，还有类选择器。那么这两个选择器有什么区别呢？id选择器不允许id名字有相同的，而类选择器可以多种元素使用同一个这样的选择器。
举个例子，我们现在将下方的几个作者添加同样的类选择器

        <li>
          <img
            src="img/related-1.jpg"
            alt="related-1"
            width="75px"
            height="75px"
          /><a href="#">如何去学习网页开发</a>
          <p class="related-author">作者：乔纳斯·施梅德特曼</p>
        </li>
        <li>
          <img
            src="img/related-2.jpg"
            alt="related-2"
            width="75px"
            height="75px"
          />
          <a href="#">CSS 的未知力量</a>
          <p class="related-author">作者：吉姆.狄龙</p>
        </li>
        <li>
          <img
            src="img/related-3.jpg"
            alt="related-3"
            width="75px"
            height="75px"
          />
          <a href="#">为什么 JavaScript 很棒</a>
          <p class="related-author">作者：玛蒂尔达</p>
        </li>

在CSS上，我们这样写

.related-author {
  font-size: 18px;
  font-weight: bold;
}

如上图所示，这些无序列表的黑点看上去实在难看，如何将它去除呢？如下

ul {
  list-style: none;
}

但是如果html中有多个无序列表，这个时候我们就需要使用类选择器去做这件事情了

HTML代码如下：

<ul class="related">
        <li>
          <img
            src="img/related-1.jpg"
            alt="related-1"
            width="75px"
            height="75px"
          /><a href="#">如何去学习网页开发</a>
          <p class="related-author">作者：乔纳斯·施梅德特曼</p>
        </li>
        <li>
          <img
            src="img/related-2.jpg"
            alt="related-2"
            width="75px"
            height="75px"
          />
          <a href="#">CSS 的未知力量</a>
          <p class="related-author">作者：吉姆.狄龙</p>
        </li>
        <li>
          <img
            src="img/related-3.jpg"
            alt="related-3"
            width="75px"
            height="75px"
          />
          <a href="#">为什么 JavaScript 很棒</a>
          <p class="related-author">作者：玛蒂尔达</p>
        </li>
      </ul>

CSS代码如下：

.related {
  list-style: none;
}

疑问：为啥上面的不用id选择器，而是用class呢？
因为当我们不止一个元素需要使用CSS样式的时候，我们通常都会选择类选择器

注：在实际的生活中，我们都会使用类选择器，因为在id选择器只能使用一次，如果你后续使用同样的css样式会增加你的代码量，所以即使是一个CSS，也建议使用类选择器，而不是id选择器。

在线咨询

上一篇：网页不能复制的解决方法教程
下一篇：解读国产光刻机困局（五）：中国的EUV光源在哪里（上

您的项目需求

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

整合营销服务商

19、Bootstrap 中显示标签的 class？

lass和 ID 选择器

类选择器

您的项目需求