本系列可作为前端学习系列的笔记,代码的运行环境是在HBuilder中,小编会将代码复制下来,大家复制下来就可以练习了,方便大家学习。小编作为新晋码农一枚,会定期整理一些写的比较好的代码,作为自己的学习笔记,会试着做一下批注和补充,如转载或者参考他人文献会标明出处,非商用,如有侵权会删改!欢迎大家斧正和讨论!
系列文章目录
HTML-1.1 文本字体样式-字体设置、分割线、段落标签、段内回车以及特殊符号
HTML-2.1 文本字体样式之加粗、斜体、回车、下划线、上标标签、下标标签以及字号变小和变大
目录
一、简单分析
1、外部链接
<h1>1.外部链接</h1>
<a href="http://www.baidu.com">百度</a>
<a href="http://www.baidu.com" target="_blank " title="我是用来提示的">
<img src="../img/百度.png" width="100px"></a><br>
<a href="http://www.sohu.com" >搜狐</a>
<a href="http://www.sohu.com" >
<img src="../img/搜狐.png" width="40px"></a><br>
注:图片自己找,然后存到指定位置
我这里是存在了上一层的同级img文件夹下
代码运行
2、内部链接
<h1>2.内部链接</h1>
<a href="1-1.html">文本</a>
<a href="../个人主题网站/index.html">返回首页</a>
代码运行
3、书签链接
<!-- 3.书签链接 a name 先起名字后叫他 a href="#name" -->
<h1>3.书签链接</h1>
<h2>庆余年</h2>
<a name="up"></a>
<h3>目录</h3>
<!-- <a href="#1"><a>点击跳转到相应位置 -->
<!-- <a name="up"></a>点击跳转到此 -->
<a href="#1">第一章</a>
<a href="#2">第二章</a>
<a href="#3">第三章</a>
<a name="1"></a>
<h3>第一章</h3>
<p>从前有个小男孩,他穿越了<br><br></p>
<a href="#up">返回顶部</a>
<aname="2"></a>
<h3>第二章</h3>
<p>小男孩来京城了<br><br></p>
<a href="#up">返回顶部</a>
<a name="3"></a>
<h3>第三章</h3>
<p>小男孩遇见鸡腿姑娘<br><br></p>
<a href="#up">返回顶部</a>
代码运行
二、第二部分
第二部分正文
HTML代码块如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>超链接-外部链接,内部链接,书签链接</title>
</head>
<body>
<!-- 1.外部链接 a 属性href name target titlie -->
<h1>1.外部链接</h1>
<a href="http://www.baidu.com">百度</a>
<a href="http://www.baidu.com" target="_blank " title="我是用来提示的">
<img src="../img/百度.png" width="100px"></a><br>
<a href="http://www.sohu.com" >搜狐</a>
<a href="http://www.sohu.com" >
<img src="../img/搜狐.png" width="40px"></a><br>
<!-- 2.内部链接,连接本网站的其他页面 -->
<h1>2.内部链接</h1>
<a href="1-1.html">文本</a>
<a href="../个人主题网站/index.html">返回首页</a>
<!-- 3.书签链接 a name 先起名字后叫他 a href="#name" -->
<h1>3.书签链接</h1>
<h2>庆余年</h2>
<a name="up"></a>
<h3>目录</h3>
<!-- <a href="#1"><a>点击跳转到相应位置 -->
<!-- <a name="up"></a>点击跳转到此 -->
<a href="#1">第一章</a>
<a href="#2">第二章</a>
<a href="#3">第三章</a>
<a name="1"></a>
<h3>第一章</h3>
<p>从前有个小男孩,他穿越了<br><br></p>
<a href="#up">返回顶部</a>
<aname="2"></a>
<h3>第二章</h3>
<p>小男孩来京城了<br><br></p>
<a href="#up">返回顶部</a>
<a name="3"></a>
<h3>第三章</h3>
<p>小男孩遇见鸡腿姑娘<br><br></p>
<a href="#up">返回顶部</a>
</body>
</html>
代码运行
总结
以上就是今天要讲的内容,本文简单记录了超链接-外部链接,内部链接,书签链接,仅作为一份简单的笔记使用,大家根据注释理解