上一节我们学会了锚点定位,从上到下的会用了,那么从底部往上会用了吗?比如底部有一个返回顶部的按钮,要求点击后回到页面的顶部。我们写代码来尝试下。先看看效果:

html常见面试题及答案(转行测试开发-HTML)(1)

点击红框里的段落四,返回到页面顶部。

html常见面试题及答案(转行测试开发-HTML)(2)

成功了,我们来看看代码是怎么写的吧

<!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>

其中,底部标签段落定义为:

html常见面试题及答案(转行测试开发-HTML)(3)

顶部id可以定义为:

html常见面试题及答案(转行测试开发-HTML)(4)

这样,就可以跳转了

接着,我们说下注释标签: 需要写一些便于阅读和理解的文档说明,但是又不需要显示在前端页面中。这种情况就需要使用注释标签了

样式为: <!-- 注释文字-->

4.你懂个p

<!--已经到底了-->

这时候双击html文件,注释不展示在前端。使用 ctrl / 就可以添加注释了

最后,我们说下特殊字符

在HTML中我们怎么输入空格呢?直接点击键盘上的空格,其实是不行的。

html常见面试题及答案(转行测试开发-HTML)(5)

看下效果

html常见面试题及答案(转行测试开发-HTML)(6)

只展示了一个空格,多个的没有展示

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>20210822_十</title>

</head>

<body>

我们 是 好人

</body>

</html>

如果想要展示多个空格,我们应该怎么处理呢?

使用  ;可以达到这个效果

html常见面试题及答案(转行测试开发-HTML)(7)

来看下代码:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>20210822_十</title>

</head>

<body>

我们 是 好人

</body>

</html>

还有哪些特殊符号呢?

< < > >

看下效果:

html常见面试题及答案(转行测试开发-HTML)(8)

看下代码:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>20210822_十</title>

</head>

<body>

我们 是 好人

<p>这是一个 <段落> </p>

</body>

</html>

好的,今天先到这里吧

,