Jadual Kandungan
等。
大前端教程
Rumah hujung hadapan web html tutorial Apakah klasifikasi elemen html5?

Apakah klasifikasi elemen html5?

Apr 25, 2022 pm 01:51 PM
html5

html5元素可以分为两个类别:1、“块级元素”;该种元素会独占一行,总是在新行上开始,元素的宽度、高度以及外边距和内边距等都可以控制。2、“内联元素”;该种元素和其他元素会在同一行上显示,元素的宽度、高度以及外边距和内边距都不可以改变。

Apakah klasifikasi elemen html5?

本教程操作环境:windows7系统、HTML5版、Dell G3电脑。

HTML 标签(元素)可以分为两个类别,分别是块级元素和内联元素(也叫行内元素)。

块级元素

块级元素最主要的特点是它们自己独占一行,块级元素中最具代表性的就是

,此外还有

块级元素一般都具有特定的语义,可以使代码的可读性更强。

块级元素的主要特征如下所示:

  • 不管是否使用换行标签
    ,块级元素总是在新行上开始;

  • 块级元素的宽度、高度以及外边距和内边距等都可以控制;

  • 如果省略块级元素的宽度,那么它的宽度默认为当前浏览器窗口的宽度;

  • 块级元素中可以包含其它的内联元素和块级元素。

内联元素

内联元素也可以称为行内元素,行内元素中最常用的是,此外还有

  • 、<cite>、<dfn>、<kbd>和<var>等。</var></kbd></dfn></cite>
  • 内联元素往往带有某种特殊的显示效果,可以代替部分 CSS 样式,非常实用,例如:

    • 标签可以修饰字体;

    • 两个标签分别用来定义下标文本和上标文本。

    行内元素的主要特征如下所示:

    • 行内元素和其他元素会在同一行上显示;

    • 行内元素的宽、高以及外边距和内边距都不可以改变;

    • 行内元素的宽度就是其中内容的宽度,且不可以改变;

    • 内联元素中只能容纳文本或者其他内联元素。

    对于行内元素的使用,需要注意如下几点:

    • 设置宽度 width 无效;

    • 设置高度 height 无效,但可以通过 line-height 来设置行高;

    • 可以设置 margin 外边距,但只对左右外边距有效,上下无效;

    • 设置 padding 内边距时,只有左右 padding 有效,上下则无效,需要注意的是元素范围是增大了,但是对元素周围的内容是没影响的;

    • 可以通过 display 属性将元素在行内元素和块级元素之间进行切换。

    扩展知识:重点说明两个标签

    分别是最常用的块级元素和内联元素,我们有必要重点说明一下。

    1)

    标签

    是非常重要的块级标记,在网页布局(Layout)方面发挥着重要的作用,使用
    我们可以定义页面的各个部分,通过与 CSS 相结合可以实现各种各样的效果,下面通过一个示例演示
    标签的使用。
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title><div>标签演示</title>
    </head>
    <body>
        <div style="padding:0px 20px;border:1px solid #ccc; background-color:#eee;">
            <h4 id="大前端教程">大前端教程</h4>
            <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>
    Salin selepas log masuk

    Apakah klasifikasi elemen html5?

    标签及其包围的内容可以看做网页的一个板块,
    标签本身并没有什么特殊的显示效果,需要借助 CSS 样式对外边距、内边距、背景、边框等进行设置,从而达到对板块布局的目的。

    2) 标签

    HTML 中的标签是一个内联元素,可以对 HTML 文档中的内容进行修饰,此标签不会为文档内容提供任何视觉效果,但可以与 CSS 结合使用来美化网页。

    下面通过一个示例来演示标签的使用:

    <!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>
    Salin selepas log masuk

    Apakah klasifikasi elemen html5?

    Apakah klasifikasi elemen html5?

    结果展示:

    Apakah klasifikasi elemen html5?

    标签本身并没有什么特殊效果,通常需要借助 CSS 来改变内容的样式,比如字体、颜色、大小、边框、背景等。

    说明:那些不被推荐的 HTML 内联标签,比如 等,建议使用 + CSS 样式来代替;但是那么具有明确语义的内联标签,比如 、<em>、<i>、<s> 等,还是应该坚持使用,这些标签比 <span> 更加具有语义,更有助于搜索引擎理解页面内容。</span></s></i></em>

    【相关推荐:html视频教程web前端

    Atas ialah kandungan terperinci Apakah klasifikasi elemen html5?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

    Kenyataan Laman Web ini
    Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

    Alat AI Hot

    Undresser.AI Undress

    Undresser.AI Undress

    Apl berkuasa AI untuk mencipta foto bogel yang realistik

    AI Clothes Remover

    AI Clothes Remover

    Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

    Undress AI Tool

    Undress AI Tool

    Gambar buka pakaian secara percuma

    Clothoff.io

    Clothoff.io

    Penyingkiran pakaian AI

    AI Hentai Generator

    AI Hentai Generator

    Menjana ai hentai secara percuma.

    Artikel Panas

    R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
    1 bulan yang lalu By 尊渡假赌尊渡假赌尊渡假赌
    R.E.P.O. Tetapan grafik terbaik
    1 bulan yang lalu By 尊渡假赌尊渡假赌尊渡假赌
    R.E.P.O. Cara Memperbaiki Audio Jika anda tidak dapat mendengar sesiapa
    1 bulan yang lalu By 尊渡假赌尊渡假赌尊渡假赌
    R.E.P.O. Arahan sembang dan cara menggunakannya
    1 bulan yang lalu By 尊渡假赌尊渡假赌尊渡假赌

    Alat panas

    Notepad++7.3.1

    Notepad++7.3.1

    Editor kod yang mudah digunakan dan percuma

    SublimeText3 versi Cina

    SublimeText3 versi Cina

    Versi Cina, sangat mudah digunakan

    Hantar Studio 13.0.1

    Hantar Studio 13.0.1

    Persekitaran pembangunan bersepadu PHP yang berkuasa

    Dreamweaver CS6

    Dreamweaver CS6

    Alat pembangunan web visual

    SublimeText3 versi Mac

    SublimeText3 versi Mac

    Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

    Sempadan Jadual dalam HTML Sempadan Jadual dalam HTML Sep 04, 2024 pm 04:49 PM

    Panduan untuk Sempadan Jadual dalam HTML. Di sini kita membincangkan pelbagai cara untuk menentukan sempadan jadual dengan contoh Sempadan Jadual dalam HTML.

    HTML jidar-kiri HTML jidar-kiri Sep 04, 2024 pm 04:48 PM

    Panduan untuk HTML margin-kiri. Di sini kita membincangkan gambaran keseluruhan ringkas tentang HTML margin-left dan Contoh-contohnya bersama-sama dengan Pelaksanaan Kodnya.

    Jadual Bersarang dalam HTML Jadual Bersarang dalam HTML Sep 04, 2024 pm 04:49 PM

    Ini ialah panduan untuk Nested Table dalam HTML. Di sini kita membincangkan cara membuat jadual dalam jadual bersama-sama dengan contoh masing-masing.

    Susun Atur Jadual HTML Susun Atur Jadual HTML Sep 04, 2024 pm 04:54 PM

    Panduan untuk Susun Atur Jadual HTML. Di sini kita membincangkan Nilai Susun Atur Jadual HTML bersama-sama dengan contoh dan output n perincian.

    Pemegang Tempat Input HTML Pemegang Tempat Input HTML Sep 04, 2024 pm 04:54 PM

    Panduan untuk Pemegang Tempat Input HTML. Di sini kita membincangkan Contoh Pemegang Tempat Input HTML bersama-sama dengan kod dan output.

    Senarai Tertib HTML Senarai Tertib HTML Sep 04, 2024 pm 04:43 PM

    Panduan kepada Senarai Tertib HTML. Di sini kami juga membincangkan pengenalan senarai dan jenis Tertib HTML bersama-sama dengan contoh mereka masing-masing

    Memindahkan Teks dalam HTML Memindahkan Teks dalam HTML Sep 04, 2024 pm 04:45 PM

    Panduan untuk Memindahkan Teks dalam HTML. Di sini kita membincangkan pengenalan, cara teg marquee berfungsi dengan sintaks dan contoh untuk dilaksanakan.

    Butang onclick HTML Butang onclick HTML Sep 04, 2024 pm 04:49 PM

    Panduan untuk Butang onclick HTML. Di sini kita membincangkan pengenalan, kerja, contoh dan onclick Event masing-masing dalam pelbagai acara.

    See all articles