html知识点：#语义元素；#iframe;#块元素与内联元素display

最新推荐文章于 2025-12-07 10:55:10 发布

原创最新推荐文章于 2025-12-07 10:55:10 发布 · 946 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html

html 专栏收录该内容

4 篇文章

订阅专栏

本文详细介绍了HTML5中的语义化元素及其用途，包括header、nav、section等，并解释了块级与内联元素的区别及如何通过display属性进行转换。

HTML5 语义元素
        header  定义文档或节的页眉
        nav 定义导航链接的容器
        section 定义文档中的节
        article 定义独立的自包含文章
        aside   定义内容之外的内容（比如侧栏）
        footer  定义文档或节的页脚
        details 定义额外的细节
        summary 定义 details 元素的标题

iframe 用于在网页内显示网页。
        <iframe src="URL" frameborder="0"></iframe> 删除边框
    使用 iframe 作为链接的目标
        iframe 可用作链接的目标（target）。
        链接的 target 属性必须引用 iframe 的 name 属性：
        <iframe src="demo_iframe.htm" name="iframe_a"></iframe>
        <p><a href="www.**.com" target="iframe_a">www.**.com</a></p>

HTML 块元素
    块级元素在浏览器显示时，通常会以新行来开始（和结束）。
    例子：<h1>, <p>, <ul>, <table>
    块的特征
        1、默认独占一行
        2、没有宽度时，默认撑满一行
        3、支持所有css命令

HTML 内联元素
    内联元素在显示时通常不会以新行开始。
    例子：<b>, <td>, <a>, <img>
    内嵌(内联、行内)的特征
        1、同排可以继续跟同类的标签
        2、内容撑开宽度
        3、不支持宽高
        4、不支持上下的margin
        5、代码换行被解析

display：inline  显示为内嵌
        使行块->内联
display：block        显示为块
        使内联->块

注： display是将标签转换为页面中显示的类型
    display不会改变标签本质

inline-block的特征
        1、块元素能在一行上显示
        2、内联元素支持宽高
        3、没有宽度时，由内容撑开宽度