<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>
图片标签
</title>
</head>
<body>
<!--
行内块元素，可以设置宽高，又能同行显示
图片标签 img 单标签
src="图片地址"
title="鼠标指向这个元素的时候，显示的标题内容"
alt="图片加载失败的时候显示内容，成功就不会显示，起到提示作用"
-->
<!-- 网络地址 -->
<img src="https://img1.baidu.com/it/u=3412053504,698784004&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500">
<!-- 相对论路径
./ ==》当前目录(可以省略)
../ ==》上级目录，如果是上上级 ../../
-->
<img src="./image/001.webp">
<img src="image/002.webp" alt="图片加载失败" style="width:300px; height: 300px;">
<!-- 图片本身带有比例，同时设置图片的宽和高会改变比例导致图片被拉伸。若要既不改变图片形状，又要设置宽和高，因此只设置宽度或高度 ，浏览器会自动设置另一边 -->
<img src="003.webp">
<img src="../004.webp">
<!-- 绝对路径: 带着盘符的路径
不建议使用绝对路径：绝对路径是在你的本地电脑的某个盘中，后期打包项目的时候（根目录下所有文件),压缩放在远程服务器中；远程服务器中（远程电脑），把本地图片放在某个盘中，会导致找不到图片。
项目里所用到的图片都要放在根目录里面，最好进行分类，专门放在一个image里面
-->
<img title="你好石雕" src="C:/Users/huangjv/Desktop/2304/01-HTML/image/001.webp">
<br>
<br>
<br>
<br>
<br>
<br> <br>
<br>
<br> <br>
<br>
<br> <br>
<br>
<br> <br>
<br>
<br> <br>
<br>
<br>
<h2 id="h2">我是h2锚点</h2>
<br>
<br>
<br> <br>
<br>
<br> <br>
<br>
<br> <br>
<br>
<br> <br>
<br>
<br> <br>
<h6 id="或">我是h6锚点</h6>
<br>
<br> <br>
<br>
<br> <br>
<br>
<br> <br>
<br>
<br> <br>
<br>
<br>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>超链接标签</title>
<base href="" target="_blank">
</head>
<body>
<!-- a标签是一个行内元素：同行显示，不可以设置宽高
块级元素：可以设置宽高，独立成行
行内块：可以设置宽高，又能同行显示
a标签，双标签，行内元素
blank:跳转方式
1. _self 从当前窗口打开（默认）
2. _blank 从新窗口打开
让全局的a标签从新页面打开，在head标签里面使用<base href="" target="_blank">
href="要跳转的地址"
title="显示标题内容" ==》所有的标签都可以加title标题提示
-->
<a href="http://www.4399.com" style="background: red;">4399小游戏</a>
<a href="http://www.baidu.com" title="百度吧" target="_self">百度一下</a>
<a href="05_图片标签.html">跳转图签标签页面</a>
<a href="#aaa">跳转p标签位置</a>
<!-- 对于网络地址必须要携带http://或者https:// -->
<a href="05_图片标签.html#h2">跳转图片标签h2锚点</a>
<p></p>
<a href="05_图片标签.html#或">跳转图片标签h6锚点</a>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br><br>
<br>
<br>
<br><br>
<br>
<br>
<br>
<br>
<br>
<br><br>
<br>
<br>
<br><br>
<br>
<br>
<br>
<br><br>
<br><br>
<br>
<br>
<br><br>
<br>
<br>
<br>
<br><br>
<br><br>
<br>
<br>
<br><br>
<br>
<br>
<br>
<br><br>
<br><br>
<br>
<br>
<br><br>
<br>
<br>
<br>
<br>
<br>
<br>
<p id="aaa" > p标签位置 </p>
<br>
<br>
<br>
<br>
<br><br>
<br>
<br>
<br><br>
<br>
<br>
<br>
<br><br>
<br><br>
<br>
<br>
<br><br>
<br>
<br>
<br>
<br><br>
<br><br>
<br>
<br>
<br><br>
<br>
<br>
<br>
<br><br>
<br><br>
<br>
<br>
<br><br>
<br>
<br>
<br>
<br><br>
<br><br>
<br>
<br>
<br><br>
<br>
<br>
<br>
<br>
<!-- 跳转到顶部，若href为空，点击时会有闪动现象，用户体验差-->
<a href="#" target="_self" >点我回到页面顶部</a>
<a href="" target="_self" >点我回到顶部闪动</a>
<!-- 不跳转 -->
<a href="javascript:;">不跳转1</a>
<a href="javascript:void(0);">不跳转2</a>
<a href="javascript:">不跳转3</a>
</body>
</html>
1575
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
