html5元素分為哪些類別

發(fā)布時間：2022-04-25 14:09:51 來源：億速云閱讀：313 作者：iii 欄目：web開發(fā)

這篇文章主要講解了“html5元素分為哪些類別”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“html5元素分為哪些類別”吧！

html5元素可以分為兩個類別：1、“塊級元素”；該種元素會獨占一行，總是在新行上開始，元素的寬度、高度以及外邊距和內(nèi)邊距等都可以控制。2、“內(nèi)聯(lián)元素”；該種元素和其他元素會在同一行上顯示，元素的寬度、高度以及外邊距和內(nèi)邊距都不可以改變。

本教程操作環(huán)境：windows7系統(tǒng)、HTML5版、Dell G3電腦。

HTML 標(biāo)簽（元素）可以分為兩個類別，分別是塊級元素和內(nèi)聯(lián)元素（也叫行內(nèi)元素）。

塊級元素

塊級元素最主要的特點是它們自己獨占一行，塊級元素中最具代表性的就是<div>，此外還有<p>、<nav>、<aside>、<header>、<footer>、<section>、<article>、<ul>、<address>、<h2>~<h7>等。

塊級元素一般都具有特定的語義，可以使代碼的可讀性更強。

塊級元素的主要特征如下所示：

不管是否使用換行標(biāo)簽<br>，塊級元素總是在新行上開始；
塊級元素的寬度、高度以及外邊距和內(nèi)邊距等都可以控制；
如果省略塊級元素的寬度，那么它的寬度默認(rèn)為當(dāng)前瀏覽器窗口的寬度；
塊級元素中可以包含其它的內(nèi)聯(lián)元素和塊級元素。

內(nèi)聯(lián)元素

內(nèi)聯(lián)元素也可以稱為行內(nèi)元素，行內(nèi)元素中最常用的是<span>，此外還有<b>、<i>、<u>、<em>、<strong>、<sup>、<sub>、<big>、<small>、<li>、<ins>、<del>、<code>、<cite>、<dfn>、<kbd>和<var>等。

內(nèi)聯(lián)元素往往帶有某種特殊的顯示效果，可以代替部分 CSS 樣式，非常實用，例如：

<b>和<i>標(biāo)簽可以修飾字體；
<sub>和<sup>兩個標(biāo)簽分別用來定義下標(biāo)文本和上標(biāo)文本。

行內(nèi)元素的主要特征如下所示：

行內(nèi)元素和其他元素會在同一行上顯示；
行內(nèi)元素的寬、高以及外邊距和內(nèi)邊距都不可以改變；
行內(nèi)元素的寬度就是其中內(nèi)容的寬度，且不可以改變；
內(nèi)聯(lián)元素中只能容納文本或者其他內(nèi)聯(lián)元素。

對于行內(nèi)元素的使用，需要注意如下幾點：

設(shè)置寬度 width 無效；
設(shè)置高度 height 無效，但可以通過 line-height 來設(shè)置行高；
可以設(shè)置 margin 外邊距，但只對左右外邊距有效，上下無效；
設(shè)置 padding 內(nèi)邊距時，只有左右 padding 有效，上下則無效，需要注意的是元素范圍是增大了，但是對元素周圍的內(nèi)容是沒影響的；
可以通過 display 屬性將元素在行內(nèi)元素和塊級元素之間進行切換。

擴展知識：重點說明兩個標(biāo)簽

<div> 和 <span> 分別是最常用的塊級元素和內(nèi)聯(lián)元素，我們有必要重點說明一下。

1) <div> 標(biāo)簽

<div> 是非常重要的塊級標(biāo)記，在網(wǎng)頁布局（Layout）方面發(fā)揮著重要的作用，使用<div>我們可以定義頁面的各個部分，通過與 CSS 相結(jié)合可以實現(xiàn)各種各樣的效果，下面通過一個示例演示<div>標(biāo)簽的使用。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>&lt;div&gt;標(biāo)簽演示</title>
</head>
<body>
    <div style="padding:0px 20px;border:1px solid #ccc; background-color:#eee;">
        <h5>大前端教程</h5>
        <ul>
            <li><a href="/course/list/11.html" target="_blank">HTML視頻教程</a></li>
            <li><a href="/course/list/12.html" target="_blank">CSS視頻教程</a></li>
            <li><a href="/course/list/17.html" target="_blank">javascript視頻教程</a></li>
            <li><a href="/course/list/18.html" target="_blank">vuejs視頻教程</a></li>
        </ul>
    </div>
</body>
</html>

html5元素分為哪些類別

<div> 標(biāo)簽及其包圍的內(nèi)容可以看做網(wǎng)頁的一個板塊，<div> 標(biāo)簽本身并沒有什么特殊的顯示效果，需要借助 CSS 樣式對外邊距、內(nèi)邊距、背景、邊框等進行設(shè)置，從而達到對板塊布局的目的。

2) <span> 標(biāo)簽

HTML 中的<span>標(biāo)簽是一個內(nèi)聯(lián)元素，可以對 HTML 文檔中的內(nèi)容進行修飾，此標(biāo)簽不會為文檔內(nèi)容提供任何視覺效果，但可以與 CSS 結(jié)合使用來美化網(wǎng)頁。

下面通過一個示例來演示<span>標(biāo)簽的使用：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .car{
            width: 110px;
            height: 35px;
            border: 1px solid black ;
            font-size: 14px;
            line-height: 35px ;
            text-indent: 32px;

            background: url(./img/buy.png) no-repeat 8px 11px;
            background-color:#ffffff;
        }
        span{
            color: blue;
            font-size: 20px;
            font-family: "宋體";
        }
    </style>
</head>
<body>
    <div>我的<span>購</span>物車</div>
</body>
</html>

html5元素分為哪些類別

結(jié)果展示：

html5元素分為哪些類別

<span> 標(biāo)簽本身并沒有什么特殊效果，通常需要借助 CSS 來改變內(nèi)容的樣式，比如字體、顏色、大小、邊框、背景等。

說明：那些不被推薦的 HTML 內(nèi)聯(lián)標(biāo)簽，比如 <font>、<small>、<big> 等，建議使用 <span> + CSS 樣式來代替；但是那么具有明確語義的內(nèi)聯(lián)標(biāo)簽，比如 <strong>、<b>、<code>、<em>、<i>、<s> 等，還是應(yīng)該堅持使用，這些標(biāo)簽比 <span> 更加具有語義，更有助于搜索引擎理解頁面內(nèi)容。

感謝各位的閱讀，以上就是“html5元素分為哪些類別”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對html5元素分為哪些類別這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關(guān)知識點的文章，歡迎關(guān)注！

向AI問一下細(xì)節(jié)

html5元素分為哪些類別

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽