【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;  这样的控制。

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

算法刷题笔记 滑动窗口(C++实现,非常详细)

文章目录 题目描述基本思路实现代码 题目描述 给定一个大小为n ≤ 10^6的数组。有一个大小为k的滑动窗口&#xff0c;它从数组的最左边移动到最右边。你只能在窗口中看到k个数字。每次滑动窗口向右移动一个位置。以下是一个例子&#xff1a; 该数组为 [1 3 -1 -3 5 3 6 7]&…

用HttpURLConnection复现http响应码405

目录 使用GET方法&#xff0c;访问GET接口&#xff0c;服务端返回405使用GET方法&#xff0c;访问POST接口&#xff0c;服务端返回405使用POST方法&#xff0c;访问GET接口&#xff0c;服务端返回405 使用GET方法&#xff0c;访问GET接口&#xff0c;服务端返回405 发生场景&a…

Linux shell编程学习笔记63:free命令 获取内存使用信息

0 前言 在系统安全检查中&#xff0c;内存使用情况也是一块可以关注的内容。Linux提供了多个获取内存信息的命令很多。今天我们先研究free命令。 1 free命令的功能、用法和选项说明 1.1 free命令的功能 free 命令可以显示系统内存的使用情况&#xff0c;包括物理内存、交换…

Java多语言跨境电商外贸商城源码 tiktok商城系统源码 跨境电商源码

Java多语言跨境电商外贸商城源码 tiktok商城系统源码 跨境电商源码 技术栈 PC端使用&#xff1a;vueelementui 用户端使用&#xff1a;uniapp 管理端使用&#xff1a;vueelementui 后台服务使用&#xff1a;springbootmybatisplusmysql 功能描述&#xff1a; 对接PayPal…

vue3+electron项目搭建,遇到的坑

我主要是写后端,所以对前端的vue啊vue-cli只是知其然,不知其所以然 这样也导致了我在开发前端时候遇到了很多的坑 第一个坑, vue2升级vue3始终升级不成功 第二个坑, vue add electron-builder一直卡进度,进度条走完就是不出提示succes 第一个坑的解决办法: 按照网上说的升级v…

Ubuntu 20.04下多版本CUDA的安装与切换 超详细教程

目录 前言一、安装 CUDA1.找到所需版本对应命令2.下载 .run 文件3.安装 CUDA4.配置环境变量4.1 写入环境变量4.2 软连接 5.验证安装 二、安装 cudnn1.下载 cudnn2.解压文件3.替换文件4.验证安装 三、切换 CUDA 版本1.切换版本2.检查版本 前言 当我们复现代码时&#xff0c;总会…

深入分析SSL/TLS服务器的证书(C/C++代码实现)

SSL&#xff08;Secure Sockets Layer&#xff09;和TLS&#xff08;Transport Layer Security&#xff09;是网络安全领域的重要协议&#xff0c;它们在保护网络通信中发挥着至关重要的作用。这些协议通过加密和身份验证机制&#xff0c;确保数据在传输过程中的机密性和完整性…

初见:AntDB智能运维“三剑客“之ACC

前情回顾 在前两个章节中&#xff0c;我们介绍了 AntDB 智能运维"三剑客"的 ADC 和 MTK。 初见&#xff1a;AntDB智能运维"三剑客"之ADC 初见&#xff1a;AntDB智能运维"三剑客"之MTK 本文将继续介绍 AntDB 数据库智能运维平台 ACC。 AntDB 介绍…

minist数据集分类模型的训练

minist数据集训练 训练方法&#xff1a;利用pytorch来实现minist数据集的分类模型训练 训练模型如下图所示 模型代码&#xff1a; import torch from torch import nn from torch.nn import Flattenclass Net(nn.Module):def __init__(self):super().__init__()self.module …

ChatGPT对话:Scratch编程中一个单词,如balloon,每个字母行为一致,如何优化编程

【编者按】balloon 7个字母具有相同的行为&#xff0c;根据ChatGPT提供的方法&#xff0c;优化了代码&#xff0c;方便代码维护与复用。初学者可以使用7个字母精灵&#xff0c;复制代码到不同精灵&#xff0c;也能完成这个功能&#xff0c;但不是优化方法&#xff0c;也没有提高…

FairJob:促进在线广告系统公平性研究

在人工智能&#xff08;AI&#xff09;与人类动态的交汇处&#xff0c;既存在机遇也存在挑战&#xff0c;特别是在人工智能领域。尽管取得了进步&#xff0c;但根植于历史不平等中的持续偏见仍然渗透在我们的数据驱动系统中&#xff0c;这些偏见不仅延续了不公平现象&#xff0…

Centos新手问题——yum无法下载软件

起因&#xff1a;最近在学习centos7&#xff0c;在VM上成功安装后&#xff0c;用Secure进行远程登陆。然后准备下载一个C编译器&#xff0c;看网络上的教程&#xff0c;都是用yum来下载&#xff0c;于是我也输入了命令&#xff1a; yum -y install gcc* 本以为会自动下载&…

docker部署redis/mongodb/

一、redis 创建/root/redis/conf/redis.conf 全部执行命令如下 docker run -it -d --name redis -p 6379:6379 --net mynet --ip 172.18.0.9 -m 400m -v /root/redis/conf:/usr/local/etc/redis -e TXAsia/Shangehai redis redis-server /usr/local/etc/redis/redis.conf 部署…

C#——密封类详情

密封类 密封类是密封方法的扩展&#xff0c;用于确保某个类不会被继承。在C#中&#xff0c;你可以使用sealed关键字来声明一个密封类。 public sealed class SealedClass {// 类成员定义 } 如果使用密封类继承的话&#xff0c;程序会报错&#xff01;&#xff01;&#xff0…

01:spring

文章目录 一&#xff1a;常见面试题1&#xff1a;什么是Spring框架&#xff1f;1.1&#xff1a;spring官网中文1.2&#xff1a;spring官网英文 2&#xff1a;谈谈自己对于Spring IOC和AOP的理解2.1&#xff1a;IOCSpring Bean 的生命周期主要包括以下步骤&#xff1a; 2.2&…

解决微信读书和Apple Books导入epub电子书不显示图片的问题

title: 解决微信读书和Apple Books导入epub电子书不显示图片的问题 tags: 个人成长 categories:杂谈 最近找到一本很喜欢的书的电子版的epub版&#xff0c;发现无论是导入微信读书&#xff0c;还是Apple家的Books, 都无法正常显示图片。 于是我用calibre打开epub电子书&#x…

安卓虚拟位置修改

随着安卓系统的不断更新&#xff0c;确保软件和应用与最新系统版本的兼容性变得日益重要。本文档旨在指导用户如何在安卓14/15系统上使用特定的功能。 2. 系统兼容性更新 2.1 支持安卓14/15&#xff1a;更新了对安卓14/15版本的支持&#xff0c;确保了软件的兼容性。 2.2 路…

linux中可执行文件为什么不能拷贝覆盖

对于一个普通的文件&#xff0c;假如有两个文件&#xff0c;分别是file和file1&#xff0c;我们使用 cp file1 file的方式使用file1的内容来覆盖file的内容&#xff0c;这样是可以的。 但是对于可执行文件来说&#xff0c;当这个文件在执行的时候&#xff0c;是不能通过cp的方…

将 KNX 接入 Home Assistant 之四 功能测试

一&#xff1a;测试标准的KNX网关功能 测试软件识别是否正常 可以看到再ETS6和ETS5上都能正常识别 测试数据收发 可以正常发送数据 测试配置设备参数&#xff08;下载配置&#xff09; 可以看出&#xff0c;在ETS5上是可以正常下载参数的 但是 ETS6下载是失败的&#xff…

Pandas 学习笔记(四)--CSV文件

CSV文件 CSV&#xff08;Comma-Separated Values&#xff0c;逗号分隔值&#xff0c;有时也称为字符分隔值&#xff0c;因为分隔字符也可以不是逗号&#xff09;&#xff0c;其文件以纯文本形式存储表格数据&#xff08;数字和文本&#xff09;。 读取与写入 读取csv文件 i…