【HTML入门】第三课 - 标题、段落、空格

这一小节,我们说一些比较零散的知识,HTML课程中呢,其实就是一些标签,正是这些标签组成了前端网页的各种元素,所以你也可以叫他们标签元素。

像前两节我们说的,html head body title meta style 。这些都是标签。

1 段落

段落,很好理解,我们从小就看书,内容一段一段的,这些一段一段的内容,我们就可以放到段落标签里,段落标签是 p 。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>我的第一个网页</title>
        <style type="text/css">
            
        </style>
    </head>
    <body>
        <p>
            远看长城,像一条长龙,在崇山峻岭之间蜿蜒盘旋。
            从东头的山海关到西头的嘉峪关,有一万三千多里。
        </p>
        <p>
            从北京出发,不过几十公里就来到长城脚下。这一段
            长城修筑在八达岭上,高大坚固,是用巨大的条石和
            城砖筑成的。城墙顶上铺着方砖,十分平整,像很宽
            的马路,五六匹马可以并行。城墙外沿有两米多高的
            成排的垛子,垛子上有方形的瞭望口和射口,供瞭望
            和射击用。城墙顶上,每隔三百多米就有一座方形的
            城台,是屯兵的堡垒。打仗的时候,城台之间可以
            互相呼应。
        </p>
    </body>
</html>

2 标题

标题(Heading)是通过 <h1> - <h6> 标签进行定义的。

<h1> 定义最大的标题。 <h6> 定义最小的标题。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>我的第一个网页</title>
        <style type="text/css">
            
        </style>
    </head>
    <body>
        <h1>长城 标题h1</h1>
        <h2>长城 标题h2</h2>
        <h3>长城 标题h3</h3>
        <h4>长城 标题h4</h4>
        <h5>长城 标题h5</h5>
        <h6>长城 标题h6</h6>
        <p>
            远看长城,像一条长龙,在崇山峻岭之间蜿蜒盘旋。
            从东头的山海关到西头的嘉峪关,有一万三千多里。
        </p>
    </body>
</html>

可以看出,从h1标签到h6标签,是 从大到小 的标题体现过程。但标题标签不只是可以让文字变的大一些,变得粗壮一些,他更符合搜索引擎对于网页的抓取规范。这个我们后面说,我们现在还只是单纯的学习HTML标签就可以。

3 空格

你是否想过,我们打字的时候,敲一个空格键就可以了,那么网页中呢?我们来试一下。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>我的第一个网页</title>
        <style type="text/css">
            
        </style>
    </head>
    <body>
        <p>
            远看长城,像一条长龙,在崇山峻岭之间蜿蜒盘旋。
            从东头      的山海关到西头的嘉峪关,有一万三千多里。
        </p>
    </body>
</html>

怎么样,你是不是看到了很多空格,我们再刷新一下浏览器,看一下效果:

这几乎就是没有起作用,对吧。那么HTML开发中,该如何开发出空格来呢?看代码:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>我的第一个网页</title>
        <style type="text/css">
            
        </style>
    </head>
    <body>
        <p>
            远看长城,像一条长龙,在崇山峻岭之间蜿蜒盘旋。
            从东头&nbsp;&nbsp;&nbsp;&nbsp;的山海关到西头的嘉峪关,有一万三千多里。
        </p>
    </body>
</html>

看效果:

怎么样,空格是不是挺明显的了,这里就是添加了 &nbsp;  这样的控制。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/780173.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

3.js - 裁剪场景(多个scence)

不给newScence添加background、environment时 给newScence添加background、environment时 源码 // ts-nocheck// 引入three.js import * as THREE from three// 导入轨道控制器 import { OrbitControls } from three/examples/jsm/controls/OrbitControls// 导入lil.gui impor…

阶段三:项目开发---大数据开发运行环境搭建:任务5:安装配置Kafka

任务描述 知识点&#xff1a;安装配置Kafka 重 点&#xff1a; 安装配置Kafka 难 点&#xff1a;无 内 容&#xff1a; Kafka是由Apache软件基金会开发的一个开源流处理平台&#xff0c;由Scala和Java编写。Kafka是一种高吞吐量的分布式发布订阅消息系统&#xff0c;…

前端JS特效第21集:HTML5响应式多种切换效果轮播大图切换js特效代码

HTML5响应式多种切换效果轮播大图切换js特效代码&#xff0c;先来看看效果&#xff1a; 部分核心的代码如下(全部代码在文章末尾)&#xff1a; <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-t…

Redis数据结构解析-RedisObject

文章目录 ☃️概述☃️源码 ☃️概述 RedisObject 是 Redis 中表示数据对象的结构体&#xff0c;它是 Redis 数据库中的基本数据类型的抽象。在 Redis 中&#xff0c;所有的数据都被存储为 RedisObject 类型的对象。 RedisObject 结构体定义如下&#xff08;简化版本&#xf…

VMware虚拟机配置桥接网络

转载&#xff1a;虚拟机桥接网络配置 一、VMware三种网络连接方式 VMware提供了三种网络连接方式&#xff0c;VMnet0, VMnet1, Vmnet8&#xff0c;分别代表桥接&#xff0c;Host-only及NAT模式。在VMware的编辑-虚拟网络编辑器可看到对应三种连接方式的设置&#xff08;如下图…

昇思11天

基于 MindSpore 实现 BERT 对话情绪识别 BERT模型概述 BERT&#xff08;Bidirectional Encoder Representations from Transformers&#xff09;是由Google于2018年开发并发布的一种新型语言模型。BERT在许多自然语言处理&#xff08;NLP&#xff09;任务中发挥着重要作用&am…

Angular基础保姆级教程 - 1

Angular 基础总结&#xff08;完结版&#xff09; 1. 概述 Angular 是一个使用 HTML、CSS、TypeScript 构建客户端应用的框架&#xff0c;用来构建单页应用程序。 Angular 是一个重量级的框架&#xff0c;内部集成了大量开箱即用的功能模块。 Angular 为大型应用开发而设计…

Hadoop3:NameNode和DataNode多目录配置(扩充磁盘的技术支持)

一、NameNode多目录 1、说明 NameNode多目录&#xff0c;需要在刚搭建Hadoop集群的时候&#xff0c;就配置好 因为&#xff0c;配置这个&#xff0c;需要格式化NameNode 所以&#xff0c;如果一开始没配置NameNode多目录&#xff0c;后面&#xff0c;就不要配置了。 2、配置…

移动校园(3):处理全校课程数据excel文档,实现空闲教室查询与课程表查询

首先打开教学平台 然后导出为excel文档 import mathimport pandas as pd import pymssql serverName 127.0.0.1 userName sa passWord 123456 databaseuniSchool conn pymssql.connect(serverserverName,useruserName,passwordpassWord,databasedatabase) cursor conn.cur…

阶段三:项目开发---大数据开发运行环境搭建:任务6:安装配置HBase

任务描述 知识点&#xff1a;安装配置HBase 重 点&#xff1a; 安装配置HBase 难 点&#xff1a;无 内 容&#xff1a; 本阶段任务是安装配置HBase&#xff0c;实时飞行数据是保存在HBase中的&#xff0c;因为HBase具有高效的读写能力&#xff0c;在当前项目中我们是…

hive表小练习

-- 将对应的命令写在每个步骤中 -- 1.在hive中创建数据库school create database if not exists school; -- 2.在数据库school中创建如下的表 每张表的列分隔符都是, 存储格式是textfile 创建表名为student_info, 字段为stu_id 类型为string,注释为学生id 字段为stu_name 类…

Python酷库之旅-第三方库Pandas(008)

目录 一、用法精讲 16、pandas.DataFrame.to_json函数 16-1、语法 16-2、参数 16-3、功能 16-4、返回值 16-5、说明 16-6、用法 16-6-1、数据准备 16-6-2、代码示例 16-6-3、结果输出 17、pandas.read_html函数 17-1、语法 17-2、参数 17-3、功能 17-4、返回值…

element-ui输入框如何实现回显的多选样式?

废话不多说直接上效果&#x1f9d0; 效果图 <template><div><el-form:model"params"ref"queryForm"size"small":inline"true"label-width"68px"><el-form-item label"标签" prop"tag&q…

SSM高校教师教学质量评估系统-计算机毕业设计源码03344

摘要 在高等教育中&#xff0c;教学质量是培养优秀人才的关键。为了提高教学质量&#xff0c;高校需要建立一套科学、有效的教师教学质量评估系统。本研究采用 SSM技术框架&#xff0c;旨在开发一款高校教师教学质量评估系统。 SSM框架作为一种成熟的Java开发框架&#xff0c;具…

软件测试《用例篇》

测试用例 测试用例的概念 测试用例是被测试人员向被测试系统发起的一组集合&#xff0c;包括测试环境&#xff0c;操作步骤&#xff0c;预期结果&#xff0c;测试数据等 使用测试用例的好处 使用测试用例进行测试的好处主要有&#xff1a;提高测试效率&#xff0c;降低测试的重…

NextJs - SSR渲染解决antd首屏加载CSS样式的闪烁问题

NextJs - SSR渲染解决antd首屏加载CSS样式的闪烁问题 闪烁现状解决方案 闪烁现状 我们写一个非常简单的页面&#xff1a; import { Button } from antdexport default async function Page() {return <><Button typeprimary>AAA</Button></> }NextJs…

[答疑]EA中SysML块定义图的引用关联怎样在references分栏中出现

DDD领域驱动设计批评文集 做强化自测题获得“软件方法建模师”称号 《软件方法》各章合集 例如&#xff0c;用EA在BDD&#xff08;块定义图&#xff09;上画了一个关联&#xff1a; 此时&#xff0c;“手机”和“SIM卡”中都没有出现references栏。 右击“手机”&#xff0c…

Pytorch 实践手写数字识别深度学习网络 LeNet-5

Pytorch 实践手写数字识别深度学习网络 LeNet-5 文章目录 Pytorch 实践手写数字识别深度学习网络 LeNet-5认识 LeNet-5认识数据集处理数据集下载数据集读取数据定义Dataset的继承类把数据进行载入载入dataloader 编写网络编写训练与测试代码实践结果展示完整代码 训练手写体识别…

#数据结构 笔记一

数据结构是计算机存储、组织数据的方式。 数据结构是指相互之间存在一种或多种特定关系的数据元素的集合。数据结构是带有结构特性的数据元素的集合&#xff0c;它研究的是数据的逻辑结构和物理结构以及它们之间的相互关系&#xff0c;并对这种结构定义相适应的运算&#xff0…

微软正在放弃React

最近&#xff0c;微软Edge团队撰写了一篇文章&#xff0c;介绍了微软团队如何努力提升Edge浏览器的性能。但在文中&#xff0c;微软对React提出了批评&#xff0c;并宣布他们将不再在Edge浏览器的开发中使用React。 我将详细解析他们的整篇文章内容&#xff0c;探讨这一决定对…