自学html,part3

已于 2022-02-06 12:05:08 修改
阅读量136 收藏 1
点赞数 1
文章标签： html
于 2021-08-03 18:02:57 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Titijiang233/article/details/118879032
版权

目录

1.引用文件夹​

2.目录文件夹 和 根目录

3.相对路径

<1>同一级路径

 <2>下一级路径

 <3>上一级路径

4.相对路径

5.超链接

下载链接

网页元素都可以加超链接：图片，文字，音频，视频

6.锚点标签

1.引用文件夹

点击选择文件夹

2.目录文件夹 和 根目录

新建一个文件夹，这就是目录文件夹

根目录


3.相对路径

<1>同一级路径

和html文件处于同一个文件夹，可以直接引用

 <2>下一级路径

 

 

 <3>上一级路径

 

4.相对路径

在目录下的绝对位置，直接到达目标位置，通常是从盘符开始的位置

有两种，一种是本人电脑上的位置，例如

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <img src="C:\Users\Titijiang233\Desktop\123\kiki.png" alt="">
</body>
</html>

 另一种是完整的网络地址，例如：“http://photonj.photo.store.qq.com/psc?/V502Ifpo279EnG1V9eVQ30s0ED2TffsX/ruAMsa53pVQWN7FLK88i5gsZbn3hfkOfTIidFaOy6T8RpKerX*Y9kfU2cBa3rSwpPJ8vgBoj*9SLLTUkGqXUEFPWw3mupmFEjICzK5m8YYI!/mnull&bo=rQKtAq0CrQIBCS4!&rf=photolist&t=5”

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <img src="C:\Users\Titijiang233\Desktop\123\kiki.png" alt="">
    <img src="http://photonj.photo.store.qq.com/psc?/V502Ifpo279EnG1V9eVQ30s0ED2TffsX/ruAMsa53pVQWN7FLK88i5gsZbn3hfkOfTIidFaOy6T8RpKerX*Y9kfU2cBa3rSwpPJ8vgBoj*9SLLTUkGqXUEFPWw3mupmFEjICzK5m8YYI!/mnull&bo=rQKtAq0CrQIBCS4!&rf=photolist&t=5" alt="">
</body>
</html>

5.超链接

外部链接

在当前窗口打开链接

_self

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h4>1.外部链接</h4>
    <a href="http://www.qq.com" target="_self">腾讯</a>
</body>
</html>

在新窗口打开链接

__blank

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>超链接标签</title>
</head>
<body>
    <h4>1.外部链接</h4>
    <a href="http://www.qq.com" target="__blank">腾讯</a>
</body>
</html>

内部链接

所在代码页面同一级路径新建一个文件，写另一个html文件，引用链接=新文件名

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>超链接标签</title>
</head>
<body>
    <h4>1.外部链接</h4>
    <a href="http://www.qq.com" target="__blank">腾讯</a>
    <h4>2.内部链接</h4>
    <a href="titijiang233.html" target="__blank">蹄蹄酱233</a>
</body>
</html>

 空链接

#

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>超链接标签</title>
</head>
<body>
    <h4>1.外部链接</h4>
    <a href="http://www.qq.com" target="__blank">腾讯</a>
    <h4>2.内部链接</h4>
    <a href="titijiang233.html" target="__blank">蹄蹄酱233</a>
    <h4>3.空链接：#</h4>
    <a href="#">空链接</a>
</body>
</html>

下载链接

href里的链接是 文件 .exe 或者 .zip等压缩包

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>超链接标签</title>
</head>
<body>
    <h4>1.外部链接</h4>
    <a href="http://www.qq.com" target="__blank">腾讯</a>
    <h4>2.内部链接</h4>
    <a href="titijiang233.html" target="__blank">蹄蹄酱233</a>
    <h4>3.空链接：#</h4>
    <a href="#">空链接</a>
    <h4>4.下载链接：href里的链接是 文件 .exe 或者 .zip等压缩包</h4>
    <a href="../okok.7z">下载链接</a>
</body>
</html>

网页元素都可以加超链接：图片，文字，音频，视频

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>超链接标签</title>
</head>
<body>
    <h4>1.外部链接</h4>
    <a href="http://www.qq.com" target="__blank">腾讯</a>
    <h4>2.内部链接</h4>
    <a href="titijiang233.html" target="__blank">蹄蹄酱233</a>
    <h4>3.空链接：#</h4>
    <a href="#">空链接</a>
    <h4>4.下载链接：href里的链接是 文件 .exe 或者 .zip等压缩包</h4>
    <a href="../okok.7z">下载链接</a>
    <h4>5.网页元素都可以加超链接：图片，文字，音频，视频</h4>
    <a href="https://www.baidu.com"><img src="../okok.png" alt="蹄蹄酱233"></a>
</body>
</html>

6.锚点标签

被加链接的文字，href里面加#，如 <a href="#experience">人物经历</a>

找到目标位置标签，如 <h4 id="experience">人物经历</h4>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    熊浩 （复旦大学副教授、《我是演说家》冠军）<br>
    1 <a href="#experience">人物经历</a> <br>
    2 社会工作<br>
    3 主要作品<br>
    4 出版图书<br>
    5 <a href="#program">参加节目</a> <br>
   <h4 id="experience">人物经历</h4> 
熊浩博士主要研究方向为非诉讼纠纷解决（谈判、调解与仲裁）及其培训，法律经验研究与法学交叉学科研究。 [1] <br>
熊浩博士于华东政法大学、墨尔本大学和香港大学，分别获得法学学士、硕士及博士学位。<br>
2011-2012年度获得美国国务院颁发的富布莱特奖学金，并作为富布莱特学者在哈佛大学法学院从事学习与研究工作。 [1] <br>
2016年上海市浦江人才。 [5] <br>
<h4>社会工作</h4>
武汉大学法学院“调解与多元化纠纷解决培训与研讨班”共同项目发起人、培训师 [1] <br>
凤凰卫视“寰宇大战略”战略观察员 [1] <br>
实验辩论发起人（中华青年精英基金会重点资助项目） [1] <br>
《我是演说家》第三季、四季冠军 [2] <br>
第五、七季奇葩说辩手 [4] <br>
得到App《跟熊浩学沟通·30讲》主理人 [3] <br>
<h4>主要作品</h4>
《熊浩的冲突解决课》 [6] <br>
《高情商谈判》 [7] <br>
<h4>出版图书</h4>
熊浩的冲突解决课<br>
作者名称 熊浩<br>
<h4 id="program">参加节目</h4>
2020年1月17日，参加《非正式会谈》第六季首期节目，任代班秘书长 [8] <br>
2020年12月15日，《奇葩说》第七季公布了选手阵容，熊浩入选阵容。 [9] <br>
</body>
</html>

 返回顶部

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h4 id="back">熊浩 （复旦大学副教授、《我是演说家》冠军）</h4><br>
    1 <a href="#experience">人物经历</a><br>
    2 社会工作<br>
    3 主要作品<br>
    4 出版图书<br>
    5 <a href="#program">参加节目</a><br>
   <h4 id="experience">人物经历</h4> <br>
熊浩博士主要研究方向为非诉讼纠纷解决（谈判、调解与仲裁）及其培训，法律经验研究与法学交叉学科研究。 [1] <br>
熊浩博士于华东政法大学、墨尔本大学和香港大学，分别获得法学学士、硕士及博士学位。<br>
2011-2012年度获得美国国务院颁发的富布莱特奖学金，并作为富布莱特学者在哈佛大学法学院从事学习与研究工作。 [1] <br>
2016年上海市浦江人才。 [5] <br>
<h4>社会工作</h4>
武汉大学法学院“调解与多元化纠纷解决培训与研讨班”共同项目发起人、培训师 [1] <br>
凤凰卫视“寰宇大战略”战略观察员 [1] <br>
实验辩论发起人（中华青年精英基金会重点资助项目） [1] <br>
《我是演说家》第三季、四季冠军 [2] <br>
第五、七季奇葩说辩手 [4] <br>
得到App《跟熊浩学沟通·30讲》主理人 [3] <br>
<h4>主要作品</h4>
《熊浩的冲突解决课》 [6] <br>
《高情商谈判》 [7] <br>
<h4>出版图书</h4>
熊浩的冲突解决课<br>
作者名称 熊浩<br>
<h4 id="program">参加节目</h4>
2020年1月17日，参加《非正式会谈》第六季首期节目，任代班秘书长 [8] <br>
2020年12月15日，《奇葩说》第七季公布了选手阵容，熊浩入选阵容。 [9] <br>
<a href="#back">返回顶部</a><br>
</body>
</html>

Titijiang233
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
自学使用HTML和CSS进行网站发布
01-10
中文名: 每天一小时自学使用HTML和CSS进行网站发布 (第6版，涵盖HTML5) 原名: Sams Teach Yourself Web Publishing with HTML and CSS in One Hour a Day: Includes New HTML5 Coverage, 6th Edition 作者: Laura Le...
javaweb整合开发 完全自学手册 技术文档PartI
02-17
3. **JavaScript**：JavaScript是一种解释型的、轻量级的、基于原型的脚本语言，主要用于网页和网络应用开发。它可以实现客户端的交互性，如表单验证、动态内容加载、AJAX（异步JavaScript和XML）通信等。JavaScript...
自学html,part 5
Titijiang233的博客
08-08 113
目录 表单标签 表单控件 <1>input输入表单元素 <2>select下拉表单元素 <3>textarea文本域元素 表单标签 表单组成：表单域、表单控件（也称为表单元素）、提示信息 <formaction=""></form> 表单控件 <1>input输入表单元素 <inputtype="text"> input是单标签 type属性的属性值及其描述如下: 属...
自学html,part 4
Titijiang233的博客
08-07 361
1.注释标签 注解标签是将代码显示在源代码中，但网页中并不会显示 <!-- 注解语句--> 快捷键：ctrl + / 特殊字符 特殊字符 描述 字符的代码 空格符 < 小于号 < > 大于号 > ...
自学html,part 1
Titijiang233的博客
07-11 62
新建一个txt文件，把后缀改成html 于是就得到一个html文档 所以网页其实就是一个html文档 在把后缀改成html之前，在txt文档里面写入代码，写完以后再把 txt改成html 在visual studio code里面打代码，只需要输入感叹号，然后回车 会自动生成模板 在Document的地方写网页标题 body里面是网页内容 写完以后ctrl + S(保存)，然后单击右键，点Open In Default Browser 于是能看见网页 ...
自学html,part 2
Titijiang233的博客
07-13 70
用的软件是Visual Studio Code 新闻编辑 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-sca
自学CSS，part 1
Titijiang233的博客
08-19 96
1.语法规范 · css通常写在head里的最下面 · 写在style里面 ·样式后面加 ; <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=devic
自学proe和html,教你如何自学成为proe高手
weixin_26781975的博客
06-09 451
1.不要看到别人的回复第一句话就说：给个part吧！你应该想想为什么。当你自己想出来再参考别人的提示，你就知道自己和别人思路的差异。2.初学者请不要看太多太多的书那会误人子弟的，先找本系统的学，很多人用了很久都是只对部分功能熟悉而已，不系统还是不够的。3.看帮助,不要因为很难而自己是初学者所以就不看；帮助永远是最好的参考手册，虽然帮助的文字有时候很难看懂，总觉得不够直观。4.不要被那些花哨的技巧迷...
自学Vue第三part
weixin_43099774的博客
07-20 163
计算属性的 setter 计算属性默认只有 getter ，不过在需要时也可以提供一个 setter ： // ... computed: { fullName: { // getter get: function () { return this.firstName + ' ' + this.lastName ...
自学Vue第一part
weixin_43099774的博客
07-19 193
node -v/node --version均可检测nodeJS是否安装好 $ npm install --global vue-cli 全局安装vue-cli $ vue init webpack my-project 创建一个基于webpack模板的项目 安装依赖 $ cd my-project $ npm install $ npm run dev...
Python 3 自学笔记 2 （part 2：基本数据类型）
Anny_Song的博客
11-27 234
一、数字（Number） 1. 数据类型是不允许改变的,这就意味着如果改变数字数据类型的值，将重新分配内存空间。 2. del函数删除单个、多个对象： 3. 数字类型转换： int(x) 将x转换为一个整数。 float(x) 将x转换到一个浮点数。 complex(x) 将x转换到一个复数，实数部分为 x，虚数部分为 0。 complex(x, y) 将...
The-Modern-[removed]:books:Javascript自学
04-09
现代JavaScript :link: :magnifying_glass_tilted_left: Part01.The_Javascript_language01.简介02.JavaScript_基础知识核心JavaScript01.吊装var，let，const비교
JSP网络开发实例自学手册源代码
09-16
总的来说，"JSP网络开发PART1"这个资源集合是学习JSP开发的宝贵资料，它将带你逐步走进JSP的世界，提升你的Web开发技能，无论你是刚开始接触JSP还是寻求进一步提升，都能从中受益匪浅。通过实际操作这些实例，你将...
HTML实现图片查看与隐藏
你羡慕的生活都是你没熬过的苦。
07-08 446
你好呀，我是小邹。在网页设计中，提供一个直观且用户友好的图片查看功能是提升用户体验的重要一环。本文将详细介绍如何使用HTML、CSS和JavaScript来实现图片的查看与隐藏功能。通过本教程，你将学会如何让页面上的图片在点击时放大显示，以及如何通过再次点击或点击背景来关闭放大的图片。
通过 tomcat 让手机访问到电脑写的 html 网页
最新发布
m0_75138009的博客
07-10 529
通过 tomcat运行的文件，只要处于同一个局域网下，就可以被访问，不过我们需要将防火墙对 8080 这个端口设置允许外部访问，或直接把防火墙先暂时关闭。我们需要在在环境变量中配置 JAVA_HOME 和 CATALINA_HOME 两个变量，分别装入 jdk 和 tomcat 的路径。之前实现的 html 小项目只能在自己的电脑上展示，如果要在其他电脑或者在手机上就看不到网页了。要运行 tomcat ，我们必须要确保我们的环境变量中有 jdk。想要在手机上访问自己写的网页，我们可以借助 tomcat。
HTML最快速最简单
07-08 283
HTML 元素以开始标签起始，HTML 元素以结束标签终止空元素在开始标签中进行关闭（以开始标签的结束而结束）元素的内容是开始标签与结束标签之间的内容。
[Vue3 + TS + Vite] 获取网页选中内容的字符串格式或HTML格式
qq_45831414的博客
07-08 327
【代码】[Vue3 + TS + Vite] 获取网页选中内容的字符串格式或HTML格式。
一文清晰了解HTML——简单实例
weixin_73074505的博客
07-08 251
1.img中src有绝对路径、相对路径及网络路径之分。其中相对路径有../上一目录 ./当前目录 （./可省略） 命令。 【上述为网络路径】 2. img还有width与heigh，单位可为px（像素）一般屏幕分辨率为1024*768；可为百分比，意为占body长或高的百分之多少。
12-3DMine 矿山工程软件自学教程.docx
04-09
"12-3DMine 矿山工程软件自学教程" 3DMine是一款专业用于矿山工程设计和管理的软件，本教程详细介绍了该软件的主要功能和操作步骤，旨在帮助用户快速掌握其使用技巧。以下是教程涵盖的关键知识点： 1. 3DMine软件...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Titijiang233

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值