HTML全标签分类块级内联内联块

- -注释:
标签分类查询文档,不涉及如何使用
部分标签由于非常不兼容主流浏览器未注明
标签参照W3C
数据采集使用Firefox 74.0(64位)版本

1.块级元素-- block
···特点:
······独占一行;
······不设置宽度时与父容器相同;
······支持所有样式;

具体:
    html
    div
    p
    body
    form
    ul
    li [浏览器里显示为list-item,但从表现看为块级元素]
    dl
    dt
    dd
    hr
    address
    article
    main
    menu
    aside
    section
    blockquote
    nav
    center
    dir
    fieldset
    figcaption
    figure
    h1 - h6
    header
    legend
    ol
    optgroup
    pre

2.行内元素-- inline
··· 特点:
······一行显示;
······不支持width,height,margin,padding(有的部分支持);
······宽度由内容决定;
······若两个标签在编辑器中用换行符换行,则浏览器显示时会在两个标签之间产生间隔;

具体:
    a
    span [margin-left和margin-right会生效]
    img  [支持宽高和内外边距,与内联块元素特性相似]
    abbr 
    area
    audio [加了controls属性后为inline,但特性与内联块相似]
    video [加了controls属性后为inline,但特性与内联块相似]
    b
    i
    iframe
    bdo
    big
    br
    canvas
    cite
    code
    del
    em
    embed
    font
    footer
    ins
    label
    map
    mark
    object
    option
    q
    s
    samp
    small
    strike
    strong
    sub
    sup
    textarea [特性与内联块相似]
    u

3.内联块元素-- inline-block
···特点:
······一行显示;
······支持宽高;

具体:
    input
    button
    select
    progress

4.*表现形式为块级:

    表格内元素:
        table
        thead
        tfoot
        tbody
        caption
        tr
        td
        col
        colgroup
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML元素可以分为内联元素和块级元素。 内联元素(inline)是指不独占一行的元素,它们在同一行内显示,并且只占据自身所包含内容的宽度空间。 常见的内联元素有`<span>、<a>、<strong>、、<img>、<input>`等。<em>内联元素可以添加`width`、`height`、`padding`和`margin`等属性,但是对宽度、高度等属性的设置不会生效。 块级元素(block)是指独占一行的元素,每个块级元素都会自动另起一行,它们会尽可能地占据父元素的整个宽度空间。 常见的块级元素有`<div>、<p>、<h1>~<h6>、<ul>、<li>、<ol>、<table>`等。块级元素可以通过设置`width`、`height`、`padding`和`margin`等属性,来调整它们的宽度和高度以及外观样式。 内联元素和块级元素的主要区别如下: 1. 显示方式:内联元素在同一行内显示,而块级元素会独占一行。 2. 占据空间:内联元素只占据自身所包含内容的宽度空间,而块级元素会尽可能地占据父元素的整个宽度空间。 3. 对宽高属性的设置:内联元素对于`width`、`height`等属性的设置不会生效,而块级元素可以设置这些属性来调整宽度和高度。 4. 是否可以容纳其他元素:内联元素不能直接容纳块级元素,只能容纳其他内联元素或者文本内容,而块级元素可以容纳任何类型的元素。 在实际应用中,正确使用内联元素和块级元素可以更好地控制页面的布局和样式,使页面结构更合理、代码更精简。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值