小白一枚，初入WEB前端第三天，进行一些记录，可以直接粘贴运行
1.超链接的上下级目录
如何在下级目录的html中访问到上级目录中的某个html
如何在上级目录的html中访问到下级目录的某个html？？
- 下级访问上级
<!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>
<!-- 当我们要跳转到服务器内部时，一般用相对路径
相对路径一般用.或者..开头
./表示当前文件所在的目录，如chaolianjie.html所在的目录就是path
../表示当前文件所在目录的上一级目录，如chaolianjie.html所在的目录的上一级目录就是CODE
-->
<!-- 如果要在path文件夹的chaolianjie.html里访问列表
就要使用../ -->
<!-- 如果什么都不写，默认为./ -->
<a href="列表.html">什么都不写，默认为./列表.html，无法找到</a>
<a href="./列表.html">找不到列表</a>
<a href="../列表.html">找得到列表</a>
</body>
</html>
可以看到，我们要在path中访问CODE里的列表.html文件
- 上级访问下级
<!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>
<!-- 如何在CODE中访问到path里的liebiao.html？ -->
<!-- 在Windows中，下级目录一般这样表示：C:\Users\admin\Desktop\code
因此我们只需要先用./访问到CeShi.html的目录，再根据下层访问即可-->
<a href="./path/liebiao.html">从CODE文件夹中的CeShi.html访问path文件夹中的liebiao.html</a>
</body>
</html>
- 如何多级访问?
<!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>
<!-- ./访问此文件所在文件夹 -->
<!-- ../访问此文件所在文件夹的上一级 -->
<!-- ../../访问此文件夹所在文件夹的上一级的上一级 -->
<!-- 一共三级CODE->path->hah,从hah里的ceshi.html访问path里的liebiao.html-->
<!-- 仅练习../，下面的herf等价于 “../liebiao.html" -->
<a href="../../path/liebiao.html">链接1</a>
<p>
<a href="../liebiao.html">与链接1等价</a>
</body>
</html>
2.超链接的其他属性
target和#
为了实现“回到顶部”和定位去某处的功能，加了些文字
<!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>
<!-- target属性，制定超链接打开的位置
可选值：
_self 在当前页面中打开超链接
_blank 在一个新的界面中打开超链接 -->
<!-- herf为#时为回到顶部 -->
<!-- 我们可以直接将超链接的herf属性设置为#目标元素的id属性值
就可以实现定向跳转 -->
<a href="#bottom">去底部</a>
<p>复哦啊方加我的家覅王府井我我就爱见附件发IEFJO接佛IFJ偶家方法阿达我还AOI加我的家安慰奖灯泡我看到啊我ingoauheaih哈哈佛前护发回复哦啊方加我的家覅王府井我我就爱见附件发IEFJO接佛IFJ偶家方法阿达我还AOI加我的家安慰奖灯泡我看到啊我ingoauheaih哈哈佛前护发回复哦啊方加我的家覅王府井我我就爱见附件发IEFJO接佛IFJ偶家方法阿达我还AOI加我的家安慰奖灯泡我看到啊我ingoauheaih哈哈佛前护发回复哦啊方加我的家覅王府井我我就爱见附件发IEFJO接佛IFJ偶家方法阿达我还AOI加我的家安慰奖灯泡我看到啊我ingoauheaih哈哈佛前护发回复哦啊方加我的家覅王府井我我就爱见附件发IEFJO接佛IFJ偶家方法阿达我还AOI加我的家安慰奖灯泡我看到啊我ingoauheaih哈哈佛前护发回复哦啊方加我的家覅王府井我我就爱见附件发IEFJO接佛IFJ偶家方法阿达我还AOI加我的家安慰奖灯泡我看到啊我ingoauheaih哈哈佛前护发回复哦啊方加我的家覅王府井我我就爱见附件发IEFJO接佛IFJ偶家方法阿达我还AOI加我的家安慰奖灯泡我看到啊我ingoauheaih哈哈佛前护发回复哦啊方加我的家覅王府井我我就爱见附件发IEFJO接佛IFJ偶家方法阿达我还AOI加我的家安慰奖灯泡我看到啊我ingoauheaih哈哈佛前护发回复哦啊方加我的家覅王府井我我就爱见附件发IEFJO接佛IFJ偶家方法阿达我还AOI加我的家安慰奖灯泡我看到啊我ingoauheaih哈哈佛前护发回复哦啊方加我的家覅王府井我我就爱见附件发IEFJO接佛IFJ偶家方法阿达我还AOI加我的家安慰奖灯泡我看到啊我ingoauheaih哈哈佛前护发回复哦啊方加我的家覅王府井我我就爱见附件发IEFJO接佛IFJ偶家方法阿达我还AOI加我的家安慰奖灯泡我看到啊我ingoauheaih哈哈佛前护发回复哦啊方加我的家覅王府井我我就爱见附件发IEFJO接佛IFJ偶家方法阿达我还AOI加我的家安慰奖灯泡我看到啊我ingoauheaih哈哈佛前护发回复哦啊方加我的家覅王府井我我就爱见附件发IEFJO接佛IFJ偶家方法阿达我还AOI加我的家安慰奖灯泡我看到啊我ingoauheaih哈哈佛前护发回复哦啊方加我的家覅王府井我我就爱见附件发IEFJO接佛IFJ偶家方法阿达我还AOI加我的家安慰奖灯泡我看到啊我ingoauheaih哈哈佛前护发回复哦啊方加我的家覅王府井我我就爱见附件发IEFJO接佛IFJ偶家方法阿达我还AOI加我的家安慰奖灯泡我看到啊我ingoauheaih哈哈佛前护发回复哦啊方加我的家覅王府井我我就爱见附件发IEFJO接佛IFJ偶家方法阿达我还AOI加我的家安慰奖灯泡我看到啊我ingoauheaih哈哈佛前护发回复哦啊方加我的家覅王府井我我就爱见附件发IEFJO接佛IFJ偶家方法阿达我还AOI加我的家安慰奖灯泡我看到啊我ingoauheaih哈哈佛前护发回复哦啊方加我的家覅王府井我我就爱见附件发IEFJO接佛IFJ偶家方法阿达我还AOI加我的家安慰奖灯泡我看到啊我ingoauheaih哈哈佛前护发回复哦啊方加我的家覅王府井我我就爱见附件发IEFJO接佛IFJ偶家方法阿达我还AOI加我的家安慰奖灯泡我看到啊我ingoauheaih哈哈佛前护发回复哦啊方加我的家覅王府井我我就爱见附件发IEFJO接佛IFJ偶家方法阿达我还AOI加我的家安慰奖灯泡我看到啊我ingoauheaih哈哈佛前护发回复哦啊方加我的家覅王府井我我就爱见附件发IEFJO接佛IFJ偶家方法阿达我还AOI加我的家安慰奖灯泡我看到啊我ingoauheaih哈哈佛前护发回复哦啊方加我的家覅王府井我我就爱见附件发IEFJO接佛IFJ偶家方法阿达我还AOI加我的家安慰奖灯泡我看到啊我ingoauheaih哈哈佛前护发回复哦啊方加我的家覅王府井我我就爱见附件发IEFJO接佛IFJ偶家方法阿达我还AOI加我的家安慰奖灯泡我看到啊我ingoauheaih哈哈佛前护发回复哦啊方加我的家覅王府井我我就爱见附件发IEFJO接佛IFJ偶家方法阿达我还AOI加我的家安慰奖灯泡我看到啊我ingoauheaih哈哈佛前护发回复哦啊方加我的家覅王府井我我就爱见附件发IEFJO接佛IFJ偶家方法阿达我还AOI加我的家安慰奖灯泡我看到啊我ingoauheaih哈哈佛前护发回复哦啊方加我的家覅王府井我我就爱见附件发IEFJO接佛IFJ偶家方法阿达我还AOI加我的家安慰奖灯泡我看到啊我ingoauheaih哈哈佛前护发回复哦啊方加我的家覅王府井我我就爱见附件发IEFJO接佛IFJ偶家方法阿达我还AOI加我的家安慰奖灯泡我看到啊我ingoauheaih哈哈佛前护发回复哦啊方加我的家覅王府井我我就爱见附件发IEFJO接佛IFJ偶家方法阿达我还AOI加我的家安慰奖灯泡我看到啊我ingoauheaih哈哈佛前护发回复哦啊方加我的家覅王府井我我就爱见附件发IEFJO接佛IFJ偶家方法阿达我还AOI加我的家安慰奖灯泡我看到啊我ingoauheaih哈哈佛前护发回复哦啊方加我的家覅王府井我我就爱见附件发IEFJO接佛IFJ偶家方法阿达我还AOI加我的家安慰奖灯泡我看到啊我ingoauheaih哈哈佛前护发回复哦啊方加我的家覅王府井我我就爱见附件发IEFJO接佛IFJ偶家方法阿达我还AOI加我的家安慰奖灯泡我看到啊我ingoauheaih哈哈佛前护发回复哦啊方加我的家覅王府井我我就爱见附件发IEFJO接佛IFJ偶家方法阿达我还AOI加我的家安慰奖灯泡我看到啊我ingoauheaih哈哈佛前护发回复哦啊方加我的家覅王府井我我就爱见附件发IEFJO接佛IFJ偶家方法阿达我还AOI加我的家安慰奖灯泡我看到啊我ingoauheaih哈哈佛前护发回复哦啊方加我的家覅王府井我我就爱见附件发IEFJO接佛IFJ偶家方法阿达我还AOI加我的家安慰奖灯泡我看到啊我ingoauheaih哈哈佛前护发回复哦啊方加我的家覅王府井我我就爱见附件发IEFJO接佛IFJ偶家方法阿达我还AOI加我的家安慰奖灯泡我看到啊我ingoauheaih哈哈佛前护发回复哦啊方加我的家覅王府井我我就爱见附件发IEFJO接佛IFJ偶家方法阿达我还AOI加我的家安慰奖灯泡我看到啊我ingoauheaih哈哈佛前护发回复哦啊方加我的家覅王府井我我就爱见附件发IEFJO接佛IFJ偶家方法阿达我还AOI加我的家安慰奖灯泡我看到啊我ingoauheaih哈哈佛前护发回复哦啊方加我的家覅王府井我我就爱见附件发IEFJO接佛IFJ偶家方法阿达我还AOI加我的家安慰奖灯泡我看到啊我ingoauheaih哈哈佛前护发回复哦啊方加我的家覅王府井我我就爱见附件发IEFJO接佛IFJ偶家方法阿达我还AOI加我的家安慰奖灯泡我看到啊我ingoauheaih哈哈佛前护发回复哦啊方加我的家覅王府井我我就爱见附件发IEFJO接佛IFJ偶家方法阿达我还AOI加我的家安慰奖灯泡我看到啊我ingoauheaih哈哈佛前护发回复哦啊方加我的家覅王府井我我就爱见附件发IEFJO接佛IFJ偶家方法阿达我还AOI加我的家安慰奖灯泡我看到啊我ingoauheaih哈哈佛前护发回复哦啊方加我的家覅王府井我我就爱见附件发IEFJO接佛IFJ偶家方法阿达我还AOI加我的家安慰奖灯泡我看到啊我ingoauheaih哈哈佛前护发回复哦啊方加我的家覅王府井我我就爱见附件发IEFJO接佛IFJ偶家方法阿达我还AOI加我的家安慰奖灯泡我看到啊我ingoauheaih哈哈佛前护发回复哦啊方加我的家覅王府井我我就爱见附件发IEFJO接佛IFJ偶家方法阿达我还AOI加我的家安慰奖灯泡我看到啊我ingoauheaih哈哈佛前护发回复哦啊方加我的家覅王府井我我就爱见附件发IEFJO接佛IFJ偶家方法阿达我还AOI加我的家安慰奖灯泡我看到啊我ingoauheaih哈哈佛前护发回复哦啊方加我的家覅王府井我我就爱见附件发IEFJO接佛IFJ偶家方法阿达我还AOI加我的家安慰奖灯泡我看到啊我ingoauheaih哈哈佛前护发回复哦啊方加我的家覅王府井我我就爱见附件发IEFJO接佛IFJ偶家方法阿达我还AOI加我的家安慰奖灯泡我看到啊我ingoauheaih哈哈佛前护发回复哦啊方加我的家覅王府井我我就爱见附件发IEFJO接佛IFJ偶家方法阿达我还AOI加我的家安慰奖灯泡我看到啊我ingoauheaih哈哈佛前护发回复哦啊方加我的家覅王府井我我就爱见附件发IEFJO接佛IFJ偶家方法阿达我还AOI加我的家安慰奖灯泡我看到啊我ingoauheaih哈哈佛前护发回复哦啊方加我的家覅王府井我我就爱见附件发IEFJO接佛IFJ偶家方法阿达我还AOI加我的家安慰奖灯泡我看到啊我ingoauheaih哈哈佛前护发回复哦啊方加我的家覅王府井我我就爱见附件发IEFJO接佛IFJ偶家方法阿达我还AOI加我的家安慰奖灯泡我看到啊我ingoauheaih哈哈佛前护发回复哦啊方加我的家覅王府井我我就爱见附件发IEFJO接佛IFJ偶家方法阿达我还AOI加我的家安慰奖灯泡我看到啊我ingoauheaih哈哈佛前护发回复哦啊方加我的家覅王府井我我就爱见附件发IEFJO接佛IFJ偶家方法阿达我还AOI加我的家安慰奖灯泡我看到啊我ingoauheaih哈哈佛前护发回复哦啊方加我的家覅王府井我我就爱见附件发IEFJO接佛IFJ偶家方法阿达我还AOI加我的家安慰奖灯泡我看到啊我ingoauheaih哈哈佛前护发回复哦啊方加我的家覅王府井我我就爱见附件发IEFJO接佛IFJ偶家方法阿达我还AOI加我的家安慰奖灯泡我看到啊我ingoauheaih哈哈佛前护发回复哦啊方加我的家覅王府井我我就爱见附件发IEFJO接佛IFJ偶家方法阿达我还AOI加我的家安慰奖灯泡我看到啊我ingoauheaih哈哈佛前护发回复哦啊方加我的家覅王府井我我就爱见附件发IEFJO接佛IFJ偶家方法阿达我还AOI加我的家安慰奖灯泡我看到啊我ingoauheaih哈哈佛前护发回复哦啊方加我的家覅王府井我我就爱见附件发IEFJO接佛IFJ偶家方法阿达我还AOI加我的家安慰奖灯泡我看到啊我ingoauheaih哈哈佛前护发回复哦啊方加我的家覅王府井我我就爱见附件发IEFJO接佛IFJ偶家方法阿达我还AOI加我的家安慰奖灯泡我看到啊我ingoauheaih哈哈佛前护发回复哦啊方加我的家覅王府井我我就爱见附件发IEFJO接佛IFJ偶家方法阿达我还AOI加我的家安慰奖灯泡我看到啊我ingoauheaih哈哈佛前护发回复哦啊方加我的家覅王府井我我就爱见附件发IEFJO接佛IFJ偶家方法阿达我还AOI加我的家安慰奖灯泡我看到啊我ingoauheaih哈哈佛前护发回复哦啊方加我的家覅王府井我我就爱见附件发IEFJO接佛IFJ偶家方法阿达我还AOI加我的家安慰奖灯泡我看到啊我ingoauheaih哈哈佛前护发回复哦啊方加我的家覅王府井我我就爱见附件发IEFJO接佛IFJ偶家方法阿达我还AOI加我的家安慰奖灯泡我看到啊我ingoauheaih哈哈佛前护发回复哦啊方加我的家覅王府井我我就爱见附件发IEFJO接佛IFJ偶家方法阿达我还AOI加我的家安慰奖灯泡我看到啊我ingoauheaih哈哈佛前护发回复哦啊方加我的家覅王府井我我就爱见附件发IEFJO接佛IFJ偶家方法阿达我还AOI加我的家安慰奖灯泡我看到啊我ingoauheaih哈哈佛前护发回复哦啊方加我的家覅王府井我我就爱见附件发IEFJO接佛IFJ偶家方法阿达我还AOI加我的家安慰奖灯泡我看到啊我ingoauheaih哈哈佛前护发回复哦啊方加我的家覅王府井我我就爱见附件发IEFJO接佛IFJ偶家方法阿达我还AOI加我的家安慰奖灯泡我看到啊我ingoauheaih哈哈佛前护发回复哦啊方加我的家覅王府井我我就爱见附件发IEFJO接佛IFJ偶家方法阿达我还AOI加我的家安慰奖灯泡我看到啊我ingoauheaih哈哈佛前护发回复哦啊方加我的家覅王府井我我就爱见附件发IEFJO接佛IFJ偶家方法阿达我还AOI加我的家安慰奖灯泡我看到啊我ingoauheaih哈哈佛前护发回复哦啊方加我的家覅王府井我我就爱见附件发IEFJO接佛IFJ偶家方法阿达我还AOI加我的家安慰奖灯泡我看到啊我ingoauheaih哈哈佛前护发回复哦啊方加我的家覅王府井我我就爱见附件发IEFJO接佛IFJ偶家方法阿达我还AOI加我的家安慰奖灯泡我看到啊我ingoauheaih哈哈佛前护发回复哦啊方加我的家覅王府井我我就爱见附件发IEFJO接佛IFJ偶家方法阿达我还AOI加我的家安慰奖灯泡我看到啊我ingoauheaih哈哈佛前护发回复哦啊方加我的家覅王府井我我就爱见附件发IEFJO接佛IFJ偶家方法阿达我还AOI加我的家安慰奖灯泡我看到啊我ingoauheaih哈哈佛前护发回复哦啊方加我的家覅王府井我我就爱见附件发IEFJO接佛IFJ偶家方法阿达我还AOI加我的家安慰奖灯泡我看到啊我ingoauheaih哈哈佛前护发回复哦啊方加我的家覅王府井我我就爱见附件发IEFJO接佛IFJ偶家方法阿达我还AOI加我的家安慰奖灯泡我看到啊我ingoauheaih哈哈佛前护发回复哦啊方加我的家覅王府井我我就爱见附件发IEFJO接佛IFJ偶家方法阿达我还AOI加我的家安慰奖灯泡我看到啊我ingoauheaih哈哈佛前护发回复哦啊方加我的家覅王府井我我就爱见附件发IEFJO接佛IFJ偶家方法阿达我还AOI加我的家安慰奖灯泡我看到啊我ingoauheaih哈哈佛前护发回复哦啊方加我的家覅王府井我我就爱见附件发IEFJO接佛IFJ偶家方法阿达我还AOI加我的家安慰奖灯泡我看到啊我ingoauheaih哈哈佛前护发回复哦啊方加我的家覅王府井我我就爱见附件发IEFJO接佛IFJ偶家方法阿达我还AOI加我的家安慰奖灯泡我看到啊我ingoauheaih哈哈佛前护发回复哦啊方加我的家覅王府井我我就爱见附件发IEFJO接佛IFJ偶家方法阿达我还AOI加我的家安慰奖灯泡我看到啊我ingoauheaih哈哈佛前护发回复哦啊方加我的家覅王府井我我就爱见附件发IEFJO接佛IFJ偶家方法阿达我还AOI加我的家安慰奖灯泡我看到啊我ingoauheaih哈哈佛前护发回复哦啊方加我的家覅王府井我我就爱见附件发IEFJO接佛IFJ偶家方法阿达我还AOI加我的家安慰奖灯泡我看到啊我ingoauheaih哈哈佛前护发回复哦啊方加我的家覅王府井我我就爱见附件发IEFJO接佛IFJ偶家方法阿达我还AOI加我的家安慰奖灯泡我看到啊我ingoauheaih哈哈佛前护发回复哦啊方加我的家覅王府井我我就爱见附件发IEFJO接佛IFJ偶家方法阿达我还AOI加我的家安慰奖灯泡我看到啊我ingoauheaih哈哈佛前护发回复哦啊方加我的家覅王府</p>
<!-- herf中填入 # 就是回到顶部 -->
<a id="bottom" href="#">回到顶部</a>
</body>
</html>
空链接
<!-- 在开发中我们可以建立一个空链接--用到javascript -->
<a href="javascript:;">这是一个空链接</a>
2.图片插入
<!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是指定图片的路径（路径规则和超链接一样）
alt图片的描述，在加载不出来的时候显示 但加载不出来有个字有啥用？让你脑补么
其实也有方便搜索引擎搜索的好处，不写就不会被搜索引擎搜索
width 图片的宽度 单位是像素
heigt 图片的高度 宽度和高度只修改一个，则另一个会等比例缩放
注意事项：PC端不建议修改图片大小，移动端常常需要进行修改
图片格式：
jpg(jpeg) 支持颜色丰富，不支持透明不支持动图
一般显示图片
gif 少 ，支持简单透明支持动图
颜色单一的图片、动图
png 丰富，支持复杂透明不支持动图
转为网页而生
webp 丰富，支持复杂透明支持动图，而且还小
完美的格式，但兼容性不好（IE挨打）
Base64 直接放在src中也可以使用 ，网上有图片转Base64 的方法 -->
<img src="./img/zed.jpg" alt="影流之主">
</body>
</html>
3.内联框架
<!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>
<!-- 内联框架用于向当前界面中引入一个其他的界面
src指定引入网页的路径
frmaeborder 指定内联框架的边框
大概知道就行，用得不多,内联框架跟你网页没有关系，搜索引擎不会爬内敛的网页-->
<iframe width="800" height="600" src="https://www.qq.com" frameborder="0" ></iframe>
<h1>hello!</h1>
</body>
</html>
1681
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
