0
点赞
收藏
分享

微信扫一扫

【转行测试开发-HTML】(十)注释、独立编写页面和完成老师的题目

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

【转行测试开发-HTML】(十)注释、独立编写页面和完成老师的题目_锚点

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

【转行测试开发-HTML】(十)注释、独立编写页面和完成老师的题目_h5_02

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

<!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】(十)注释、独立编写页面和完成老师的题目_锚点_03

顶部id可以定义为:

【转行测试开发-HTML】(十)注释、独立编写页面和完成老师的题目_测试‘_04

这样,就可以跳转了


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

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

4.你懂个p

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

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


最后,我们说下特殊字符

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

【转行测试开发-HTML】(十)注释、独立编写页面和完成老师的题目_测试‘_05

看下效果

【转行测试开发-HTML】(十)注释、独立编写页面和完成老师的题目_h5_06

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

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>20210822_十</title>

</head>

<body>

我们        是        好人

</body>

</html>

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

使用 &nbsp;可以达到这个效果

【转行测试开发-HTML】(十)注释、独立编写页面和完成老师的题目_html_07

来看下代码:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>20210822_十</title>

</head>

<body>

我们&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;是&nbsp;&nbsp;&nbsp;&nbsp;好人

</body>

</html>

还有哪些特殊符号呢?

< &lt; > &gt;

看下效果:

【转行测试开发-HTML】(十)注释、独立编写页面和完成老师的题目_测试开发_08

看下代码:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>20210822_十</title>

</head>

<body>

我们&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;是&nbsp;&nbsp;&nbsp;&nbsp;好人

<p>这是一个 &lt;段落&gt; </p>

</body>

</html>


好的,今天先到这里吧

举报

相关推荐

html5 编写测试页面

0 条评论