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

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

时间:2022-11-11 18:02:55浏览次数:80  
标签:段落 转行 下雨 HTML 今天天气 锚点 一段 页面 nbsp

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

【转行测试开发-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】(十)注释、独立编写页面和完成老师的题目_html_03

顶部id可以定义为:

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

这样,就可以跳转了


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

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

4.你懂个p

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

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


最后,我们说下特殊字符

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

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

看下效果

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

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

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>20210822_十</title>

</head>

<body>

我们        是        好人

</body>

</html>

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

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

【转行测试开发-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】(十)注释、独立编写页面和完成老师的题目_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>


好的,今天先到这里吧

标签:段落,转行,下雨,HTML,今天天气,锚点,一段,页面,nbsp
From: https://blog.51cto.com/u_11894/5845233

相关文章

  • java使用freemarker模板插件生成html页面
    1、功能描述:使用java代码,根据指定的ftl模板文件,生成html静态页面文件 freemarker模板是直接可以与SSM这种javaweb项目、或springboot整合的,不做前后分离。跟jsp差不多......
  • 微信小程序 页面跳转
    //关闭当前页面,返回上一页面或多级页面。可通过getCurrentPages()获取当前的页面栈,决定需要返回几层wx.navigateTo({url:'page/home/home?user_id=111'})wx.navi......
  • 实采6位产品经理,他们转行都去了哪里?
    作为互联网最炙手可热的优质岗位,产品经理以其​​“门槛低”、“工资高“​​的就业优势深受职场新人青睐,招聘需求榜常年稳居Top3,随着压力和内卷与日俱增,从业多年的产品经理......
  • 【快应用】监听页面触顶及数据刷新案例
    问题背景:快应用页面滑动时,滑动到页面某个地方时,想回到页面的最顶端去刷新页面数据,我们该如何实现?解决方法:我们可以通过快应用提供的页面方法this.$page.scrollTo去滑动到指......
  • 【快应用】监听页面触顶及数据刷新案例
    问题背景:快应用页面滑动时,滑动到页面某个地方时,想回到页面的最顶端去刷新页面数据,我们该如何实现? 解决方法:我们可以通过快应用提供的页面方法this.$page.scrollTo去滑......
  • 页面加验证码才能访问
    <script>  functionyanzhengmima(){    varfuwuqi_pwd="zixin"//密码    varmima="";//用户输入的密码    if(diyici){   ......
  • HTML5 网页 3D 场景制作之 Three.js 初体验 - 制作 3D 字体
    前言在学习Three.js之前,我们先来了解WebGL,因为WebGL是Three.js的基础和规范.那什么是WebGL呢?WebGL(全写WebGraphicsLibrary)是一种3D绘图协议,这种绘图技术标准允许把Ja......
  • SQLSERVER 使用PIVOT、UNPIVOT实现行转列与列转行!!!
    原文链接:https://www.cnblogs.com/wypd/archive/2022/05/07/16242851.html一、使用PIVOT实现行转列1、首先创建一个学生表CREATETABLE[dbo].[Students](   ......
  • Android实战简易教程-第四十八枪(App引导页面效果实现)
    经常使用APP的童鞋会发现,第一次进入APP会有引导页面,里面可以放一些APP的使用介绍或其他信息等等,下面我们研究一下如何实现这个功能,增加APP的体验。一、自定义控件继承ViewGr......
  • 页面中插入百度地图(利用百度地图API)
    .aspx代码如下:<%@PageLanguage="C#"AutoEventWireup="true"CodeFile="插入地图.aspx.cs"Inherits="插入地图"%><!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Trans......