美文网首页
HTML的块级元素和内联元素

HTML的块级元素和内联元素

作者: huyi0616 | 来源:发表于2016-12-12 22:18 被阅读47次

一、任何不是块级元素的可见元素都是内联元素##

块元素(block element)

* address - 地址
  * blockquote - 块引用
  * center - 举中对齐块
  * dir - 目录列表
  * div - 常用块级容易,也是css layout的主要标签
  * dl - 定义列表
  * fieldset - form控制组
  * form - 交互表单
  * h1 - 大标题
  * h2 - 副标题
  * h3 - 3级标题
  * h4 - 4级标题
  * h5 - 5级标题
  * h6 - 6级标题
  * hr - 水平分隔线
  * isindex - input prompt
  * menu - 菜单列表
  * noframes - frames可选内容,(对于不支持frame的浏览器显示此区块内容
  * noscript - 可选脚本内容(对于不支持script的浏览器显示此内容)
  * ol - 排序表单
  * p - 段落
  * pre - 格式化文本
  * table - 表格
  * ul - 非排序列表

内联元素(inline element)

* a - 锚点
  * abbr - 缩写
  * acronym - 首字
  * b - 粗体(不推荐)
  * bdo - bidi override
  * big - 大字体
  * br - 换行
  * cite - 引用
  * code - 计算机代码(在引用源码的时候需要)
  * dfn - 定义字段
  * em - 强调
  * font - 字体设定(不推荐)
  * i - 斜体
  * img - 图片
  * input - 输入框
  * kbd - 定义键盘文本
  * label - 表格标签
  * q - 短引用
  * s - 中划线(不推荐)
  * samp - 定义范例计算机代码
  * select - 项目选择
  * small - 小字体文本
  * span - 常用内联容器,定义文本内区块
  * strike - 中划线
  * strong - 粗体强调
  * sub - 下标
  * sup - 上标
  * textarea - 多行文本输入框
  * tt - 电传文本
  * u - 下划线
  * var - 定义变量

二、嵌套规则

  1. 块级元素可以包含内联元素或某些块级元素,但内联元素不能包含块级元素,它只能包含其它内联元素。
  2. 块级元素不能放在p里面
  3. 有几个特殊的块级元素只能包含内联元素,不能包含块级元素。如h1,h2,h3,h4,h5,h6,p,dt
  4. li内可以包含div
  5. 块级元素与块级元素并列、内联元素与内联元素并列。

div 能不能嵌套在p里面##

不能,如果嵌套会导致html语义失败,看下面的例子

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>:target pseudoclass example</title>
    <style>

        p em:last-of-type {
            color: #4cae4c;
        }
    </style>

</head>
<body>
<p>
    <em>I'm not lime :(</em>
    <span><em>I am  lime1!</em><em>I am  lime2!</em></span>
    <span><em>I am lime!</em></span>
    <strong>I'm not lime :(</strong>
    <em>I'm lime :D</em>
    <span><em>I am also lime!</em> <strike> I'm not lime </strike></span>
    <strong>I'm also not lime :(</strong>
<div><em>I am div lime1!</em></div>
</p>
</body>
</html>
正常显示的效果

可以看到,对于p元素下的所有em元素对于css中设定的伪类规则都生效了(所有em对于父类是最后一个em的,字体颜色为#4cae4c),但是当我们在代码中嵌套了一个div后的效果,我们可以看下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>:target pseudoclass example</title>
    <style>

        p em:last-of-type {
            color: #4cae4c;
        }
    </style>

</head>
<body>
<p>
    <em>I'm not lime :(</em>
    <span><em>I am  lime1!</em><em>I am  lime2!</em></span>
    <span><em>I am lime!</em></span>
    <strong>I'm not lime :(</strong>
    <div><em>This is a div em</em></div>
    <em>I'm lime :D</em>
    <span><em>I am also lime!</em> <strike> I'm not lime </strike></span>
    <strong>I'm also not lime :(</strong>
<div><em>I am div lime1!</em></div>
</p>
</body>
</html>
嵌套div后的效果

很遗憾,在div后所有的伪类css效果都失效了。。。

引用:

  1. CSS块级元素和行内元素
  2. 从块级元素和内联元素浅谈标签的嵌套规则

相关文章

  • CSS布局(inline和block)

    CSS内联元素和块级元素, 内联块级元素 HTML语言标签元素被分为三种类型: 内联元素(行内元素), 块级元素,...

  • HTML总结

    块级元素和内联元素 在HTML中有两种你需要知道的重要元素类别,块级元素和内联元素。 块级元素在页面中以块的形式展...

  • HTML学习笔记

    块级元素和内联元素 在HTML中有两种你需要知道的重要元素类别,块级元素和内联元素。 块级元素在页面中以块的形式展...

  • HTML常用标签介绍

    html中标签有很多,主要分为三组,分别是块级元素、内联元素、内联块级元素。 块级元素 常见的块级元素有 ~ 、 ...

  • html中内联元素和块级元素的区别

    1.下表列出了内联元素和块级元素的主要区别 html中内联元素和块级元素的区别块级元素 行内元素独占一行,默...

  • 03|流,元素与基本尺寸

    01|块级元素 在HTML中标签众多,但是通常分为两类:"块级元素" 和 "内联元素" 01|块级元素 块级元素中...

  • css 元素分类

    块级元素 内联元素(行内) 内联块级元素 块级元素 等display:block inline 内联原素 内联块级元素

  • <div> 和 <span>

    HTML 块元素 大多数 HTML 元素被定义为块级元素或内联元素。 编者注:“块级元素”译为 block lev...

  • 什么是块级元素和内联元素?

    1.下表列出了内联元素和块级元素的主要区别 html中内联元素和块级元素的区别 元素特点 2.按字母顺序排列块级元...

  • HTML中的块级元素与内联元素——零基础自学网页制作

    块级元素与内联元素的概念与区别 在HTML中,大多数元素都被定义为块级元素或内联元素。 块级元素通常会独立成行,而...

网友评论

      本文标题:HTML的块级元素和内联元素

      本文链接:https://www.haomeiwen.com/subject/uokvmttx.html