上一节我们学会了锚点定位,从上到下的会用了,那么从底部往上会用了吗?比如底部有一个返回顶部的按钮,要求点击后回到页面的顶部。我们写代码来尝试下。先看看效果:
点击红框里的段落四,返回到页面顶部。
成功了,我们来看看代码是怎么写的吧
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>20210822_九</title>
</head>
<body>
<h1 id="top">标题一</h1>
<h2>标题二</h2><br>
<a href = "#life">标题三(有锚点)</a><br>
<h4>标题四</h4>
<p>段落一</p>
1.今天天气特别好<br>
1.今天天气特别好<br>
1.今天天气特别好<br>
1.今天天气特别好<br>
1.今天天气特别好<br>
1.今天天气特别好<br>
1.今天天气特别好<br>
1.今天天气特别好<br>
1.今天天气特别好<br>
<p>段落二</p>
2.今天下雨了<br>
2.今天下雨了<br>
2.今天下雨了<br>
2.今天下雨了<br>
2.今天下雨了<br>
2.今天下雨了<br>
2.今天下雨了<br>
2.今天下雨了<br>
2.今天下雨了<br>
2.今天下雨了<br>
<h5>锚点要跳转到的标签</h5>
<p>段落三</p>
3.生活有点甜,锚点会来这一段,相信我<br>
3.生活有点甜,锚点会来这一段,相信我<br>
3.生活有点甜,锚点会来这一段,相信我<br>
3.生活有点甜,锚点会来这一段,相信我<br>
3.生活有点甜,锚点会来这一段,相信我<br>
3.生活有点甜,锚点会来这一段,相信我<br>
3.生活有点甜,锚点会来这一段,相信我<br>
3.生活有点甜,锚点会来这一段,相信我<br>
3.生活有点甜,锚点会来这一段,相信我<br>
<p id="life"><a href="#top">段落四</a></p>
4.你懂个p
</body>
</html>
其中,底部标签段落定义为:
顶部id可以定义为:
这样,就可以跳转了
接着,我们说下注释标签: 需要写一些便于阅读和理解的文档说明,但是又不需要显示在前端页面中。这种情况就需要使用注释标签了
样式为: <!-- 注释文字-->
4.你懂个p
<!--已经到底了-->
这时候双击html文件,注释不展示在前端。使用 ctrl / 就可以添加注释了
最后,我们说下特殊字符
在HTML中我们怎么输入空格呢?直接点击键盘上的空格,其实是不行的。
看下效果
只展示了一个空格,多个的没有展示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>20210822_十</title>
</head>
<body>
我们 是 好人
</body>
</html>
如果想要展示多个空格,我们应该怎么处理呢?
使用  ;可以达到这个效果
来看下代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>20210822_十</title>
</head>
<body>
我们 是 好人
</body>
</html>
还有哪些特殊符号呢?
< < > >
看下效果:
看下代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>20210822_十</title>
</head>
<body>
我们 是 好人
<p>这是一个 <段落> </p>
</body>
</html>
好的,今天先到这里吧
,