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>
