• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    html内联元素和块级元素的基本概念及使用示例

    html标签分为两种,内联元素和块级元素,首先我们先了解一下内联元素和块级元素的概念:

    块级元素:一般是其它元素的容器,可容纳内联元素和其它块级元素,块级元素排斥其它元素与其位于同一行,可设置宽度(width)高度(height)属性,正常流中的块级元素会垂直摆放。常见块状元素为“div”

    内联元素(行内元素):内联元素只能容纳文本或者其他内联元素,是块级元素的后代,它允许其他内联元素与其位于同一行,不能设置高度(height)和宽度(width)。常见内联元素为“a”。

    根据块级元素的概念我们可以理解为块级元素前后带有换行符,也就相当于元素前后加了一个<br>标签。我们可以把块级元素想象成一个块或一个矩形,所以块级元素能设置高度宽度属性

    例:
    css文件:

    复制代码
    代码如下:

    #div1{
    width:200px;
    height:200px;
    background:#666
    }
    div2{
    width:200px;
    height:200px;
    background:#F00
    }

    html文件:

    复制代码
    代码如下:

    <div id="div1">
    div1
    块级元素排斥其他元素与其位于同一行
    </div>
    <div id="div2">
    div2
    块级元素排斥其他元素与其位于同一行
    </div>

    显示效果:

    两个div元素不位于同一行

    根据内联元素的概念,我们可以理解为内联元素前后没有换行符。我们可以把内联元素想象成一条线,所以它不能设置height属性和width属性。

    块级元素(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 - 定义打字机文本
    var - 定义变量

    上一篇:meta name="" content="的作用详细介绍
    下一篇:iframe去边框、无边框使用大全(实践经验整理)
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

    html内联元素和块级元素的基本概念及使用示例 html,内联,元,素和,块级,