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 選擇器

類選擇器

您的項目需求