HTML5 Day2-块元素和行内块元素

2301_76534754

已于 2024-01-03 18:35:50 修改

阅读量717

点赞数 22

文章标签： html5 前端 html

于 2024-01-03 17:00:08 首次发布

本文链接：https://blog.csdn.net/2301_76534754/article/details/135367792

版权

本文详细解释了HTML中超链接的各种用法，包括href属性的使用、内部和外部链接、target属性对新窗口或当前页面的控制，以及块元素、行内元素和行内块元素的区别。还介绍了布局标签、内嵌框架（iframe）、音频和视频标签的基本概念和用法。

摘要由CSDN通过智能技术生成

2.1 超链接a

href 是指链接跳转的地址，可以跳内部文件、外部链接

<body>
    <!-- 1 -->
    <!-- 跳转到内部文件 -->
    <a href="07-相对路径.html">跳转到内部文件</a>
    <!-- 跳转到外部网站：网址必须写全 -->
    <a href="https://www.baidu.com">跳转百度</a>
</body>

<body>
    <!-- 2.跳转 -->
    <a href="07-相对路径.html" target="_blank">跳转到内部文件</a>
    <!-- target属性可以设置链接跳转, _self默认值：在当前页面打开；_blank在新窗口打开，新窗口不能回退到上一个页面 -->
</body>

<body>
    <!-- 3.下载 -->
    <a href="../../WebAPIs/html/005-事件解绑.html" download>下载</a>

    <!-- 4.锚点跳转 href值必须和id值一致-->
    <a href="#bottom">跳转到底部</a>
    <!-- 空链接：  #和javascript:;   禁止跳转刷新页面 -->
    <a href="#">不跳转</a>
    <a href="javascript:;">不跳转</a>
    <div>
        我是div盒子中的内容，用于观察跳转到底部的标签效果，此处添加大量文字跳转效果才明显
        <hr>
        <h2 id="bottom">底部</h2>
    </div>
</body>

图片格式大多数用 jpg格式和png格式

2.2 块元素（block element）

特点：独占一行，无论内容有多少，都会独占一行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 块元素：独占一行，无论内容有多少，都会独占一行 -->
    <h1>标题一</h1>
    <p>段落</p>
    <div>我是盒子</div>
    <ul>
        <li>我是li</li>
        <li>我是li</li>
    </ul>
</body>
</html>

2.3 行内元素(inline element)

特点：紧挨着排列，不能设置宽高，宽高有内容撑开

用法：用来包裹文字，不能放块元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 行内元素:紧挨着排列，不能设置宽高，宽高有内容撑开 -->
    <a href="">我是链接</a>
    <a href="">我是链接2</a>
    <span>我是span</span>
</body>
</html>

2.4 行内块元素

特点：行内块元素之间可以在一行展示，可以设置宽高

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 行内块：行内块元素之间可以在一行展示 -->
    <img src="images/cat.gif" alt="" width="100px">
    111
    <img src="./boy.webp" alt="">
    222
</body>
</html>

注意：

一般情况下，会在块元素中放行内元素，而不会在行内元素中放块元素
块元素中基本什么都能放
p元素中不能放任何块元素特殊的存在

2.5 布局标签（结构化标签）

<body>
    <header>头部区域</header>
    <main>
        主体
        <nav>导航栏</nav>
        <aside>侧边栏</aside>
    </main>
    <footer>底部</footer>
</body>

2.6 内嵌框架 iframe(了解)

2.7 音频标签（了解）

src是引入外部音频的路径，audio标签之间放音频加载失败后的文字内容

// <audio src="" controls> </audio>

2.8 视频标签

controls->显示视频播放按钮

// <video src="" controls> </video>

2301_76534754

关注

22
点赞
踩
9

收藏

觉得还不错? 一键收藏
1
评论
HTML5 Day2-块元素和行内块元素

块元素、行内元素、语义化标签
复制链接

扫一扫