【Web——HTML 初阶】网页设计标题

♥HTML(HyperText Markup Language,超文本标记语言)是构建网页和Web应用的基础语言之一。它不是一种编程语言,而是一种标记语言,用于描述网页的结构和内容。HTML使用标签(tags)来标记不同类型的元素,如标题、段落、链接、图像等,并通过这些标签来控制网页的显示方式。

目录

标题标签

标头标签

段落标签

换行标签

文本格式化标签

加粗标签

斜体标签

下划线标签

删除线标签




标题标签

标头标签

标题分为h1-h6 六级标题 h1是最大的 h6是最小的

h1和h2之间的间距最大 h6和h5之间的间距最小

⭐标题的基本格式

<h1>标题名称</h1>

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vscode第一个网页文件</title>
</head>
<body>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
</body>
</html>

我们来看一下运行效果

一级标题是字号最大的同样也是最重要的,逐渐递减至六级标题


段落标签

段落和段落之间有一定的空间用来区分不同的段落

⭐段落标签:

<p>段落标签内容</p>

注意❗❗

空格的使用

段落的分段

通过段落标签我们不难发现,在我们使用的过程中会存在内容很难通过空格来把控两个文字之间的距离,文字表述有些抽象,我们来通过实际例子来说明。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vscode第一个网页文件</title>
</head>
<body>
<p> 你好!                      程序员</p>
</body>
</html>

在代码中我们将内容“ 你好!                      程序员”你好!程序员中敲制了多个空格,但是显示出来的内容和代码之间相差很多

这里就向我们说明在HTML中,计算机不能识别多空格


同样的我们来观察:

 

 在代码视窗中,我们对两段文字进行了看似换行的处理,但实际输出时,却没有实现所想要得到的内容,在操作中我们因将各个段落的内容分开,放在不同的段落标签之间<p> </p>

不同的段落之间通过<p></p>实现了明显的分行操作


换行标签

通过上一个板块的段落标签我们知道了,空格再多难以被识别。换行标签主要用于在文本中插入换行符,从而改变文本的布局。



文本格式化标签

对文字进行的处理,文字格式化标签用于改变文本的显示方式,文字的外观、样式和布局。使用简单的标记来控制文本的字体、大小、颜色、加粗、斜体、下划线等属性。

加粗标签

⭐加粗标签:

<p>这是一个<b>加粗</b>的文本。</p>

斜体标签

⭐斜体标签:

<p>这是一个<i>斜体</i>的文本。</p>

下划线标签

⭐下划线标签:

<p>这是一个<span style="text-decoration: underline;">下划线</span>的文本。</p>

删除线标签

⭐删除线标签:

<p>这是一段文本,下面的单词<del>删除</del>这个单词被删除了。</p>



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

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

相关文章

Jetpack-Room

Room是Android Jetpack中的一个组件&#xff0c;它提供了一个抽象层&#xff0c;帮助开发者在本地数据库&#xff08;如SQLite&#xff09;上进行持久化数据存储。Room通过简化数据库操作&#xff0c;使得数据管理变得更加容易和高效。 Room重要的概念 实体&#xff08;Entit…

[实时计算flink]CREATE DATABASE AS(CDAS)语句

CDAS支持整库级别的表结构和数据的实时同步&#xff0c;还支持表结构变更的同步。本文为您介绍CREATE DATABASE AS&#xff08;CDAS&#xff09;的使用方法&#xff0c;并提供了多种使用场景下的示例。 背景信息 CDAS是CTAS语法的一个语法糖&#xff0c;用于实现整库同步、多…

CesiumLab介绍

软考鸭小程序 学软考,来软考鸭! 提供软考免费软考讲解视频、题库、软考试题、软考模考、软考查分、软考咨询等服务 CesiumLab是一个围绕Cesium平台设计的完整易用的数据预处理工具集&#xff0c;它旨在最大化提升三维数据可视化效率。本文将详细介绍CesiumLab的安装、主要功能…

【stm32】DMA的介绍与使用

DMA的介绍与使用 1、DMA简介2、存储器映像3、DMA框图4、DMA基本结构5、DMA请求6、数据宽度与对齐7、数据转运DMA&#xff08;存储器到存储器的数据转运&#xff09;程序编写&#xff1a; 8、ADC连续扫描模式DMA循环转运DMA配置&#xff1a;程序编写&#xff1a; 1、DMA简介 DM…

C++笔记之类三种的继承方式

C++笔记之类三种的继承方式 code review! 文章目录 C++笔记之类三种的继承方式1.《C++ Primer Plus》(第6版)中文版Page 5502.C++类继承方式与能否隐式向上转换的关系1.《C++ Primer Plus》(第6版)中文版Page 550 除基类私有成员变量外(基类公有成员变量和保护成员变量):…

Element-ui官方示例(Popover 弹出框)

Element-ui官方示例&#xff08;Popover 弹出框&#xff09;&#xff0c;好用的弹出框。 使用 vue-cli3 我们为新版的 vue-cli 准备了相应的​Element 插件​&#xff0c;你可以用它们快速地搭建一个基于 Element 的项目。 使用 Starter Kit 我们提供了通用的项目模版&#…

gitLab配置ssh

1打开git命令行&#xff0c;创建秘钥 ssh-keygen -t rsa -b 4096 -C "用户名xxx.com" 2执行下面的命令查看公钥 cat ~/.ssh/id_rsa.pub 3#复制公钥到gitlab网址上ssh页面添加ssh的key&#xff08;公钥&#xff09; 4本地的git命令行中添加账户邮箱 git config -…

Windows7 X64 成功安装 .NET Framework 4.8 的两种方法

Windows7 X64 成功安装 .NET Framework 4.8 的两种方法 windows7系统SP1安装完成后&#xff0c;在安装某软件时&#xff0c;提示需要先安装4.6以上的版本net-framework包&#xff0c;正好电脑里有个net-framework4.8软件包&#xff0c;于是打算用上&#xff0c;可是在安装时&a…

JDK17下,使用SHA1算法报Certificates do not conform to algorithm constraints错误

JDK17从17.0.5开始&#xff0c;默认不再允许使用SHA1算法&#xff0c;如果引用的jar包或代码里使用了SHA1算法&#xff0c;会报以下错误。 Caused by: javax.net.ssl.SSLHandshakeException: Certificates do not conform to algorithm constraintsat java.base/sun.security.…

JS开发es8266板子,搞着玩-MAX7219模块 远程显示led字符串

JS开发es8266板子&#xff0c;搞着玩-MAX7219模块 板子为 esp8266 这里接了两个8x8 Led.Matrix espjs https://www.espruino.com/ 我是看了,这个文章 发现js可以开发esp板子的就尝试了下远程点灯&#xff0c;挺有意思就买了很多模块慢慢尝试 代码 这里我把wifi模块又包了一…

AI 视频工具合集

&#x1f423;个人主页 可惜已不在 &#x1f424;这篇在这个专栏AI_可惜已不在的博客-CSDN博客 &#x1f425;有用的话就留下一个三连吧&#x1f63c; 目录 前言: 正文: ​ 前言: AI 视频&#xff0c;科技与艺术的精彩融合。它借助先进的人工智能技术&#xff0c;为影像创…

力扣刷题-算法基础

hello各位小伙伴们,为了进行算法的学习,小编特意新开一个专题来讲解一些算法题 1.移除元素. - 力扣(LeetCode) 本题大概意思是给定一个数组和一个数val删除与val相同的元素,不要改变剩余元素的顺序,最后返回剩余元素的个数。 我们在这里使用双指针,这里的双指针并不是…

【OSCP Proving Grounds 靶场系列】Slort

作者&#xff1a;Eason_LYC 悲观者预言失败&#xff0c;十言九中。 乐观者创造奇迹&#xff0c;一次即可。 一个人的价值&#xff0c;在于他所拥有的。可以不学无术&#xff0c;但不能一无所有&#xff01; 技术领域&#xff1a;WEB安全、网络攻防 关注WEB安全、网络攻防。我的…

【IPv6】IPv6 NAT66介绍

参考链接 IPv6-to-IPv6 Network Address Translation (NAT66) (ietf.org)https://datatracker.ietf.org/doc/id/draft-mrw-nat66-00.html IPv6 NAT66 NAT66&#xff0c;全称为Network Address Translation for IPv6 to IPv6&#xff0c;是一种用于IPv6网络的地址转换技术。在…

STM32-----I2C

1.基本原理&#xff1a; 上图是I2C的总线图和通讯协议图&#xff08;就是I2C是怎么实现设备之间读写数据的&#xff09; 下面主要介绍通讯协议的每一步&#xff1a; 1.发出开始信号: 一开始都为高电平为空闲状态。当SCL为高电平时&#xff0c;主机将SDA拉低即为发出开始信号&…

讲一讲Redis五大数据类型的底层实现

讲一讲Redis五大数据类型的底层实现 Redis五大数据类型的底层实现 Redis的五大数据类型分别是字符串&#xff08;String&#xff09;、列表&#xff08;List&#xff09;、哈希&#xff08;Hash&#xff09;、集合&#xff08;Set&#xff09;和有序集合&#xff08;Zset&…

中药药材推荐系统

毕业设计还在发愁选题&#xff1f;又想实用又怕复杂&#xff1f;那这篇介绍你一定感兴趣&#xff01; 今天为大家推荐一个基于Django框架开发的中药药材推荐系统&#xff0c;简洁易用&#xff0c;功能丰富&#xff0c;非常适合毕业设计。无论你是技术经验丰富的开发人员&#…

Jmeter监控服务器性能

目录 ServerAgent 安装 打开Jmeter ServerAgent 在Jmeter上监控服务器的性能比如CPU&#xff0c;内存等我们需要用到ServerAgent&#xff0c;这里可以下载我分享 ServerAgent-2.2.3.zip 链接: https://pan.baidu.com/s/1oZKsJGnrZx3iyt15DP1IYA?pwdedhs 提取码: edhs 安装…

【4.8】图搜索算法-BFS解单词接龙

一、题目 给 定 两 个 单 词 &#xff08; beginWord 和 endWord &#xff09; 和 一 个 字 典 &#xff0c; 找 到 从 beginWord 到 endWord 的最短转换序列的长度。转换需遵循如下规则&#xff1a; 1. 每次转换只能改变一个字母。 2. 转换过程中的中间单词必须是字…

JavaScript 网页设计案例:使用 Canvas 实现趣味打气球小游戏

JavaScript 网页设计案例&#xff1a;使用 Canvas 实现趣味打气球小游戏 在网页设计中&#xff0c;交互性和趣味性是吸引用户的重要因素。借助 JavaScript 和 HTML5 的 canvas 元素&#xff0c;我们可以轻松实现各种动画效果&#xff0c;今天将带你打造一个有趣的 打气球小游戏…