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

发布时间:2024年01月05日
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>

文章来源:https://blog.csdn.net/2301_76534754/article/details/135367792
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。