• 技术文章 >web前端 >html教程

    html内联元素和块级元素的基本概念及使用示例_HTML/Xhtml_网页制作

    2016-05-16 16:39:11原创1069
    html标签分为两种,内联元素和块级元素,首先我们先了解一下内联元素和块级元素的概念:

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

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

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

    例:
    css文件:

    复制代码
    代码如下:

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

    html文件:

    复制代码
    代码如下:


    div1
    块级元素排斥其他元素与其位于同一行


    div2
    块级元素排斥其他元素与其位于同一行


    显示效果:

    两个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 - 定义变量

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:内联元素 块级元素
    上一篇:html中的div、td 、p 等容器内强制换行和不换行的实现_HTML/Xhtml_网页制作 下一篇:textarea文本域宽度和高度width及height自动适应实现代码_HTML/Xhtml_网页制作
    VIP课程(WEB全栈开发)

    相关文章推荐

    • 【活动】充值PHP中文网VIP即送云服务器• 详解HTML内联标签iframe的使用!• 解析Table标签,不要再把td、th、tr搞混了!• 全方位整理与form表单相关的元素!• 总结HTML中a标签的使用方法及跳转方式• 总结介绍H5新晋级标签(附示例)
    1/1

    PHP中文网