HTML元素显示模式与分类详解-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_54417407/article/details/127022588

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

</head>

<body>

    <!-- 语义化： 见名知义 -->

    <!-- 块标签：独占一行，能够设置宽高，默认情况下铺满父元素 -->

    <p>段落标签</p>

    <h1>标题标签</h1>

    <h6>标题标签</h6>

    <div>盒子容器标签</div>

    <!-- ul 无序列表标签  ul和li成对出现

    type 属性   属性值  disc  实心小圆点（默认）

                       circle  空心小圆点

                       square  实心小方块

    -->

    <ul type="aquare">

        <li>1</li>

        <li>2</li>

        <li>3</li>

    </ul>

    <!--

        有序列表 ol和li

        type 属性值     1,A,a,I(罗马数字),i(罗马数字)

     -->

    <ol type="I">

        <li></li>

        <li></li>

        <li></li>

    </ol>




    <!-- 行内标签：不独占一行，不能设置宽高 -->

    <span>短文本标签</span>

    <a href="">超链接标签</a>

    <b>加粗</b>

    <strong>加粗（语气更强烈些）</strong>

    <i>倾斜标签</i>

    <em>倾斜（语气更强烈些）</em>

    <ins>下划线标签（语气更强烈些）</ins>

    <u>下划线标签</u>

    <s>删除线标签</s>

    <del>删除线标签</del>

    <sup>上标</sup>

    <sub>下标</sub>



    <br>

    <!-- 行内块标签：不独占一行，可以设置宽高 -->

    <img src="" alt="">

    <input type="text" placeholder="输入框">

    <button>按钮标签</button>



    <!-- 块：都能设置宽高 -->

    <!-- 行：都不独占一行 -->

</body>

</html>

1.什么是元素的显示模式
就是元素（标签）以什么方式进行显示，比如div自己独占一行，比如span可以组合多个在一行显示
作用：网页的标签比较多，在不同的地方会用到不同的标签，了解他们的特点，可以更好的布局页面
HTML元素一部分为块级元素和行内元素两种类型

1.常见的块级元素：p div h1-h6 ul li ol main等等
块级元素：
比较霸道，自己独占一行
宽高/外边距/内边距都可以控制
宽高默认是容器（父级标签）的100%
是一个容器盒子，里面放块级元素或内联元素（行内元素）
注意点：文字类的元素类不能个使用块级元素 p h1-h6等都是文字类的块级元素类，里面不能放其他的块级元素

2.常见的行内元素：span a del em（字体倾斜） i ins（字体底部带有下划线） u b strong等等
行内元素：
相邻行内元素在一行上，一行可以显示多个
宽高直接设置无效
宽度默认是她本身内容的宽度
行内元素只能容忍文本或其他行内元素

行内元素和行内块元素之间有间隙

3.行内块元素 button
在行内元素中有几个特殊的标签--img input td它们属于同时具有块级元素和行内元素的特点
行内块元素的特点：
和相邻的行内元素（行内块）在一行上，一行可以显示多个（行内元素的特点）
宽度默认是他本身内容的宽度（行内元素的特点）
宽高/内外边距离都可控制（块级元素）

元素模式的转换：
转换为块级元素：display-block 比如a
转换为行内元素：display-inline 比如div
转换为行内块元素：display:inline-block 比如span