寒假学习HTML记录4
记录内容:相对路径,超链接标签,锚点链接,特殊字符
相对路径
以引用文件所在的位置为参考基础,而建立出的目录路径。
以图片为例 相对于HTML文件
同一级路径<img src="img.jpg"/>
下一级路径<img src="文件夹/img.jpg"/>
上一级路径<img src="../img.jpg"/>
绝对路径:是指目录下的绝对位置,直接到达目标位置,通常是从盼复开始的路径。
例:
<body>
<img src="C:\文件夹1\文件夹2\img.jpg">
/*本地图片地址*/
<img src="https://img-home.csdnimg.cn/images/20201124032511.png">
/*网络图片地址*/
</body>
注:
相对路径:/
绝对路径:\
超链接标签⭐
- 语法格式
文本图象
<a hrdf="跳转目标" traget="目标窗口的弹出方式">文本图象</a>
单词anchor【锚】
href:用于指定连接目标的url地址(必须属性)当为标签应用href属性时,它就具有了超链接的功能。
target:用于指定连接页面的打开方式,其中_self为默认值,_bland为在新窗口中打开方式。
<body>
<h4>外部链接</h4>
<a href="http://www.qq.com" target="_blank">腾讯网</a>
/*target打开窗口的方式默认的是_self为当前窗口打开页面,_blank是新窗口打开页面*/
</body>
外部链接
腾讯网/*target打开窗口的方式默认的是_self为当前窗口打开页面,_blank是新窗口打开页面*/
<body>
<h6>内部链接</h6>
<a href="同级文件.html" target="_blank">链接</a>
<h6>空链接</h6>
<a href="#">空链接</a>
<h6>下载链接:地址链接的是wenjian。exe或者。zip等压缩包形式</h6>
<a href="同级文件.zip">下载文件</a>
<h6>网页元素的链接</h6>
<a href="https://www.baidu.com/"><img src="https://i-blog.csdnimg.cn/blog_migrate/ffd0b02b62b8799a69d21fd99d5735ab.png" height="100" ></a>
</body>
运行结果:
内部链接
链接空链接
空链接下载链接:地址链接的是wenjian。exe或者。zip等压缩包形式
下载文件网页元素的链接
![](https://i-blog.csdnimg.cn/blog_migrate/ffd0b02b62b8799a69d21fd99d5735ab.png)
注:
空链接:如果当时没有确定链接目标时,便可以使用。
下载链接:如果href里面的地址是一个文件或者压缩包,会西在这个文件。
网页元素链接:在网页中的各种网页元素,如文本,图象,表格,音频,视频等,都可以添加超链接。
锚点链接
当我们点击链接,可以快速定位到页面中的位置
<body>
<h6 id="maodian2"><a href="#maodian1">点这里开始反复横跳</a></h6>
<br/>1
/*......*/
<h6 id="maodian1"><a href="#maodian2">点这里开始反复横跳</a></h6>
</body>
点这里开始反复横跳
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
点这里开始反复横跳
特殊字符
空格 |   | |
< | 小于号 | < |
> | 大于号 | > |
& | 和号 | & |
¥ | 人民币 | ¥ |
© | 版权 | © |
® | 注册商标 | ® |
° | 摄氏度 | ° |
± | 正负号 | ± |
× | 乘号 | × |
÷ | 除号 | ÷ |
² | 平方2(上标²) | ² |