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

news2024/11/26 18:39:46

这一小节,我们说一些比较零散的知识,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.coloradmin.cn/o/1903639.html

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

相关文章

【Unity性能消耗】ScriptableObject复用数据节省内存占用

&#x1f468;‍&#x1f4bb;个人主页&#xff1a;元宇宙-秩沅 &#x1f468;‍&#x1f4bb; hallo 欢迎 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍&#x1f4bb; 本文由 秩沅 原创 &#x1f468;‍&#x1f4bb; 专栏交流&#x1f9e7;&…

【电商系统开发实用接口指南】包含国内国外多电商平台商品数据对接(附文档)

关于电商数据接口 开发电商系统的朋友对于电商平台API肯定不陌生&#xff0c;API接口即应用程序编程接口&#xff0c;电商平台开放部分API接口&#xff0c;供商家和服务商调用&#xff0c;以满足电商业务管理需求。随着电商市场需求的日益增长以及技术手段的不断成熟&#xf…

深度学习与CV入门

文章目录 前言历史 前言 历史 tensorflow可以安装Tensorboard第三方库用于展示效果 TensorFlow工作流程&#xff1a;p6-4:20 使用tf.data加载数据。使用tf.data实例化读取训练数据和测试数据模型的建立与调试:使用动态图模式Eager Execution和著名的神经网络高层API框架Ker…

【Python】已解决:ModuleNotFoundError: No module named ‘nltk’

文章目录 一、分析问题背景二、可能出错的原因三、错误代码示例四、正确代码示例五、注意事项 已解决&#xff1a;ModuleNotFoundError: No module named ‘nltk’ 一、分析问题背景 在使用Python进行自然语言处理或文本分析时&#xff0c;我们经常会用到各种库来辅助我们的工…

旅游计划定制小程序网页模板源码

手机在线旅游定制服务&#xff0c;定制旅游出行app小程序模板。包含&#xff1a;定制介绍、定制表单填写、我的订单等。 旅游计划定制小程序网页模板源码

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 部署…

Visual studio下使用 Wix 打包 C#/WPF 程序的中文安装包

Visual studio下使用 Wix 打包 C#/WPF 程序的中文安装包 1 下载并安装 Wix Toolset1.1 下载WIX Toolset1.2 安装1.3 配置系统环境变量path1.4 找不到 WiX 工具 candle.exe2 安装Visual studio 20202,并安装插件2.1 下载并安装 Visual Studio2.2 步骤二:安装 Wix v3 扩展插件3 …

Docker安装遇到问题:curl: (7) Failed to connect to download.docker.com port 443: 拒绝连接

问题描述 首先&#xff0c;完全按照Docker官方文档进行安装&#xff1a; Install Docker Engine on Ubuntu | Docker Docs 在第1步&#xff1a;Set up Dockers apt repository&#xff0c;执行如下指令&#xff1a; sudo curl -fsSL https://download.docker.com/linux/ubu…

免杀笔记 ---> Session0--DLL注入

刚更新完上一篇&#xff0c;于是我们就马不停蹄的去跟新下一篇&#xff01;&#xff01; Session0注入 &#xff1a;&#xff1a; 各位看官如果觉得还不错的可以给博主点个赞&#x1f495;&#x1f495; 这次&#xff0c;我把这个脚本直接传到Github上了 喜欢的师傅点个Star噢…

android新闻app(二)

新闻详细页&#xff1a; 历史浏览记录SQList&#xff1a; 分类&#xff1a; 历史浏览记录主体UI和详细&#xff1a; 侧边栏&#xff1a; 参考&#xff1a;浩宇开发

QWidget窗口抗锯齿圆角的一个实现方案(支持子控件)2

QWidget窗口抗锯齿圆角的一个实现方案&#xff08;支持子控件&#xff09;2 本方案使用了QGraphicsEffect&#xff0c;由于QGraphicsEffect对一些控件会有渲染问题&#xff0c;比如列表、表格等&#xff0c;所以暂时仅作为研究&#xff0c;优先其他方案 在之前的文章中&#…

SQL面试题-留存率计算

表定义&#xff1a; create table if not exists liuliang_detail (user_id string comment ,record_time string comment yyyymmdd hh:mi:ss ) comment 流量明细表 ; 方法一&#xff1a; 计算的是整段时间范围内&#xff0c;每一天为基准的所有的留存1、2、7天的用户数。 …

Java 基础知识之 switch 语句和 yield 关键字

传统 switch 语句 传统的 switch 语句我们已经写了一万遍了&#xff0c;以下是一个典型的 switch 语句&#xff1a; int dayOfWeek 3; switch (dayOfWeek) {case 1:System.out.println("星期一");break;case 2:System.out.println("星期二");break;case…

【雷丰阳-谷粒商城 】【分布式高级篇-微服务架构篇】【17】认证服务01—短信/邮件/异常/MD5

持续学习&持续更新中… 守破离 【雷丰阳-谷粒商城 】【分布式高级篇-微服务架构篇】【17】认证服务01 环境搭建验证码倒计时短信服务邮件服务验证码短信形式&#xff1a;邮件形式&#xff1a; 异常机制MD5参考 环境搭建 C:\Windows\System32\drivers\etc\hosts 192.168.…

昇思25天学习打卡营第09天 | 保存与加载

昇思25天学习打卡营第09天 | 保存与加载 在训练网络模型的过程中&#xff0c;通常希望保存中间状态和最后的结果&#xff0c;用于后续的模型微调、推理和部署。 文章目录 昇思25天学习打卡营第09天 | 保存与加载定义网络保存模型加载模型保存MindIR加载MindIR总结打卡 定义网…

RUST 编程语言 绘制随机颜色图片 画圆形 画矩形 画直线

什么是Rust Rust是一种系统编程语言&#xff0c;旨在提供高性能和安全性。它是由Mozilla和其开发社区创建的开源语言&#xff0c;设计目标是在C的应用场景中提供一种现代、可靠和高效的选择。Rust的目标是成为一种通用编程语言&#xff0c;能够处理各种计算任务&#xff0c;包…

#数据结构 顺序表

线性表 顺序表 每种结构都有它存在意义 线性表的顺序存储实现指的是用一组连续的存储单元存储线性表的数据元素。 概念 顺序表是用一段物理地址连续的存储单元依次存储数据元素的线性表&#xff0c;一般情况下采用数组存储。在数组上完成数据的增查改删。 逻辑结构&#…

数值分析笔记(五)线性方程组解法

三角分解法 A的杜利特分解公式如下&#xff1a; u 1 j a 1 j ( j 1 , 2 , ⋯ , n ) , l i 1 a i 1 / u 11 ( i 2 , 3 , ⋯ , n ) , u k j a k j − ∑ m 1 k − 1 l b m u m j ⇒ a k j ( j k , k 1 , ⋯ , n ) , l i k ( a i k − ∑ m 1 k − 1 l i n u m k ) /…

阶段三:项目开发---搭建项目前后端系统基础架构:QA:可能遇到的问题及解决方案

任务实现 常见问题1&#xff1a;文件监视程序的系统限制。 1、错误提示&#xff1a;如果在Vue项目中&#xff0c;使用【 npm run serve】运行kongguan_web项目时报以下错误&#xff1a; 2、产生原因&#xff1a;文件监视程序的系统产生了限制&#xff0c;达到了默认的上限&am…

数据结构1:C++实现变长数组

数组作为线性表的一种&#xff0c;具有内存连续这一特点&#xff0c;可以通过下标访问元素&#xff0c;并且下标访问的时间复杂的是O(1)&#xff0c;在数组的末尾插入和删除元素的时间复杂度同样是O(1)&#xff0c;我们使用C实现一个简单的边长数组。 数据结构定义 class Arr…