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>
