我化身保姆为你提供 html 教学服务(6)

作者简介

作者名:1_bit
简介:CSDN博客专家,2020年博客之星TOP5,蓝桥签约作者。15-16年曾在网上直播,带领一批程序小白走上程序员之路。欢迎各位小白加我咨询我相关信息,迷茫的你会找到答案。

目录

HTML基础之bit哥的反客为主之道(9)—— <big></big> 放大标签 h5不支持、 <center></center> 居中h5不支持、<blockquote></blockquote> 引用标签

赶紧3分钟学完15分钟的内容我要出去玩(8)—— <big></big> 放大标签 h5不支持、 <center></center> 居中h5不支持、<blockquote></blockquote> 引用标签

我使用 html 反向输出自己打自己(7)——<a>超链接、<bdo>覆盖

我化身保姆为你提供 html 教学服务(6)——<b>加粗、<br>换行、<hr>分隔

我开始一直以为网页制作好难(5)——<h1></h1> 标题、<p></p> 段落、

你知道出现“乱码”的原因是什么吗?(4)——编码、<title></title> 网页标题、

一个基础的 HTML 文档有哪些标签?第一节(3)—— <!DOCTYPE html>说明、<head></head> 头部、<body></body> 主体、

使用 Vscode 编写 HTML 文档竟然可以自动写代码(2)—— vscode、快捷方式

保姆级的HTML零基础教程少见吧?这是第一节(1)——介绍、鸡汤

一、上门服务的保姆

哒哒哒…哒哒哒…(敲门声)

👸小媛:bit哥你怎么来了?稀客稀客,真是无事不登三宝殿,说吧你有什么事?

🐶1_bit:没事不能来吗?

👸小媛:怎么每次这句话的回复都是 “没事不能来吗?”

🐶1_bit:这是你问了我之后的自然反应。

👸小媛:emm,所以到底有什么事,竟然不怕我去找你,自己送上门?

🐶1_bit:不开心吗?

👸小媛:真是惊喜。

🐶1_bit:其实,我来是好事。

👸小媛:什么好事?

🐶1_bit:当然是上门服务教你 html 了。

👸小媛:真是好心,真是保姆级服务呀。

🐶1_bit:好了,上一节我们学到了标题标签还有那个段落标签,现在我们开始学新的内容吧。

👸小媛:行,赶紧把。

二、加粗

🐶1_bit:这一节我们先学习一下如何给段落标签里面的内容加粗怎么样?

👸小媛:可以呀,你说了算。

🐶1_bit:首先我们看一下上一节的完整 html 文档。

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSDN 博主 1_bit 的 HTML 知识汇总页面</title>
</head>
<body><h1>这是h1标签显示的示例</h1><h2>这是h2标签显示的示例</h2><h3>这是h3标签显示的示例</h3><h4>这是h4标签显示的示例</h4><h5>这是h5标签显示的示例</h5><h6>这是h6标签显示的示例</h6><h1>p标签内容:</h1><p>这是使用短路 p 标签的示例,每个 p 元素都会重启一行进行显示,并且每一个 p 元素都会间隔较大,相同一个 p 元素内则会间隔较小,你可以理解成这是这个 p 元素段落的特性如此,也可以说是一个标志特性。</p><p>这是第二个 p 标签,你可以看到跟上面的内容之间间隔还是挺大。</p>
</body>
</html>

🐶1_bit:我们现在要学习的就是将以上短路标签中的指定一段话进行自体加粗。

👸小媛:是不是又要学习一个新标签?

🐶1_bit:是的,这次我们要学习一个<b> 标签,示例如下,然后你运行这个界面看看,是否这段内容加粗了呢?

<p>这是使用短路 p 标签的示例,<b>每个 p 元素都会重启一行进行显示,并且每一个 p 元素都会间隔较大</b>,相同一个 p 元素内则会间隔较小,你可以理解成这是这个 p 元素段落的特性如此,也可以说是一个标志特性。</p>

👸小媛:加粗了,真的好简单呀,比那些 C 语言,python 都简单。

三、换行

🐶1_bit:那肯定是的,因为 html 是标签语言,并不能说是编程语言呢。我们继续学习一个换行标签吧。

👸小媛:为什么要学,不就是每一行会自动换行吗?

🐶1_bit:万一你在某些地方需要一定换行呢?

👸小媛:明白了,赶快教我吧。

🐶1_bit:继续用上面示例的段落举例,我们使用的换行标签是 <br> ,这个标签没有结束标签,单独一个标签,看下面示例。

<p>这是使用短路 p 标签的示例,每个 p 元素都会重启一行进行显示,(这里后面使用换行标签)<br>并且每一个 p 元素都会间隔较大,相同一个 p 元素内则会间隔较小,你可以理解成这是这个 p 元素段落的特性如此,也可以说是一个标志特性。</p>

👸小媛:完成了,确实换行了。


🐶1_bit:我们再学一个水平线标签吧,这个标签可以在当前一行直接显示一个水平线,可以作为分隔哟。我们看看我们改动了的 html 文档内容。

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSDN 博主 1_bit 的 HTML 知识汇总页面</title>
</head>
<body><h1>这是h1标签显示的示例</h1><h2>这是h2标签显示的示例</h2><h3>这是h3标签显示的示例</h3><h4>这是h4标签显示的示例</h4><h5>这是h5标签显示的示例</h5><h6>这是h6标签显示的示例</h6><h1>p段落标签内容:</h1><p>这是使用短路 p 标签的示例,每个 p 元素都会重启一行进行显示,并且每一个 p 元素都会间隔较大,相同一个 p 元素内则会间隔较小,你可以理解成这是这个 p 元素段落的特性如此,也可以说是一个标志特性。</p><p>这是第二个 p 标签,你可以看到跟上面的内容之间间隔还是挺大。</p><h1>b加粗标签内容:</h1><p>这是使用短路 p 标签的示例,<b>每个 p 元素都会重启一行进行显示,并且每一个 p 元素都会间隔较大</b>,相同一个 p 元素内则会间隔较小,你可以理解成这是这个 p 元素段落的特性如此,也可以说是一个标志特性。</p><h1>br换行标签内容:</h1><p>这是使用短路 p 标签的示例,每个 p 元素都会重启一行进行显示,(这里后面使用换行标签)<br>并且每一个 p 元素都会间隔较大,相同一个 p 元素内则会间隔较小,你可以理解成这是这个 p 元素段落的特性如此,也可以说是一个标志特性。</p>
</body>
</html>

四、分隔

🐶1_bit:这样显示没有分隔很难看。


🐶1_bit:我们直接在每一个内容结束后加一个 <hr> 标签。

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSDN 博主 1_bit 的 HTML 知识汇总页面</title>
</head>
<body><h1>这是h1标签显示的示例</h1><h2>这是h2标签显示的示例</h2><h3>这是h3标签显示的示例</h3><h4>这是h4标签显示的示例</h4><h5>这是h5标签显示的示例</h5><h6>这是h6标签显示的示例</h6><hr><h1>p段落标签内容:</h1><p>这是使用短路 p 标签的示例,每个 p 元素都会重启一行进行显示,并且每一个 p 元素都会间隔较大,相同一个 p 元素内则会间隔较小,你可以理解成这是这个 p 元素段落的特性如此,也可以说是一个标志特性。</p><p>这是第二个 p 标签,你可以看到跟上面的内容之间间隔还是挺大。</p><hr><h1>b加粗标签内容:</h1><p>这是使用短路 p 标签的示例,<b>每个 p 元素都会重启一行进行显示,并且每一个 p 元素都会间隔较大</b>,相同一个 p 元素内则会间隔较小,你可以理解成这是这个 p 元素段落的特性如此,也可以说是一个标志特性。</p><hr><h1>br换行标签内容:</h1><p>这是使用短路 p 标签的示例,每个 p 元素都会重启一行进行显示,(这里后面使用换行标签)<br>并且每一个 p 元素都会间隔较大,相同一个 p 元素内则会间隔较小,你可以理解成这是这个 p 元素段落的特性如此,也可以说是一个标志特性。</p><hr></body>
</html>

👸小媛:我看到结果了,确实清晰多了。


🐶1_bit:好的,再见,保姆服务完毕。

👸小媛:emmm,再见。

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

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

相关文章

那一年,我考入了西北师范大学GIS专业,然而我很迷茫,GISer的职业规划到底是怎样的?

那一年&#xff0c;我考入了西北师范大学&#xff0c;录取专业为地理信息系统&#xff0c;也就是常说的GIS&#xff0c;本科毕业后又考取了GIS专业的研究生&#xff0c;顺利毕业&#xff0c;进入了高校从事GIS教育工作。作为一个GISer&#xff0c;我相信有很多人跟我一样很迷茫…

Android之如何分析手机系统相册图片和视频删除后保存的位置

1 需求 需要获取各种型号手机系统相册图片和视频删除后保存的位置 2 分析 1)我们可以通过在sdcard目录下进行相关查找文件夹关键字,对 "cycle"或者"trash"或者*galle*进行忽略大小写模糊查询都有文件夹 find . -iname *cycle* find . -iname *trash*…

WPF 实现水珠效果按钮组

本文经原作者授权以原创方式二次分享&#xff0c;欢迎转载、分享。原文作者&#xff1a;普通的地球人原文地址&#xff1a;https://www.cnblogs.com/tsliwei/p/8041928.html相关知识这部分基本就是废话,网上都能找到,我只不过是整理了以下.建议先不看,用到的时候可以回来看看贝…

组策略管理——软件限制策略(4)

编写软件限制规则 在前面几篇文章中讲了软件限制规则的基本概念&#xff0c;现在就来学习如何编写自定义软件限制策略。 编写规则应遵循的原则 首先&#xff0c;需要大家注意的是&#xff0c;软件限制策略应本着方便、安全、实用的原则来编写。限制规则灵活方便&#xff0c;自定…

我使用 html 反向输出自己打自己(7)

作者简介 作者名&#xff1a;1_bit 简介&#xff1a;CSDN博客专家&#xff0c;2020年博客之星TOP5&#xff0c;蓝桥签约作者。15-16年曾在网上直播&#xff0c;带领一批程序小白走上程序员之路。欢迎各位小白加我咨询我相关信息&#xff0c;迷茫的你会找到答案。 目录 HTML基…

Castle.DynamicProxy拦截器

在asp.net mvc或asp.net miniapi中&#xff0c;有过滤器&#xff0c;可以在请求前或后增加一层&#xff0c;达到验证&#xff0c;过滤等作用&#xff0c;如果在Service的方法前后加一层呢&#xff1f;这里介绍一下Castle.DynamicProxy的用法。首先引入Castle.Core实现代码相对轻…

Android选项切换条SHSegmentControl

&#xfeff;&#xfeff;Android选项切换条SHSegmentControl SHSegmentControl是github上一个开源的选项切换条&#xff0c;其样式如图所示&#xff1a; SHSegmentControl在github上的项目主页地址&#xff1a;https://github.com/7heaven/SHSegmentControl SHSegmentControl…

从零开始编写自己的C#框架(14)——T4模板在逻辑层中的应用(三)

原本关于T4模板原想分5个章节详细解说的&#xff0c;不过因为最近比较忙&#xff0c;也不想将整个系列时间拉得太长&#xff0c;所以就将它们整合在一块了&#xff0c;可能会有很多细节没有讲到&#xff0c;希望大家自己对着代码与模板去研究。 本章代码量会比较大&#xff0c;…

赶紧3分钟学完15分钟的内容我要出去玩(8)

作者简介 作者名&#xff1a;1_bit 简介&#xff1a;CSDN博客专家&#xff0c;2020年博客之星TOP5&#xff0c;蓝桥签约作者。15-16年曾在网上直播&#xff0c;带领一批程序小白走上程序员之路。欢迎各位小白加我咨询我相关信息&#xff0c;迷茫的你会找到答案。 目录 HTML基…

Hello Playwright:(5)查找元素

操作浏览器归根到底就是和页面进行交互&#xff0c;那么必不可少的操作就是查找页面上的元素。因此我们需要熟练掌握Locator 定位器。在上一节我们讲过&#xff0c;可以使用Page.Locator(selector, options)方法创建定位器&#xff0c;而如何定位到元素则取决于selector 选择器…

RxSwift 之官方文档

RxSwift 官方文档结构 Introduction:SubjectsTransforming ObservablesFiltering ObservablesCombining ObservablesError Handing OperatorsObservable Utility OperatorsConditional and Boolean OperatorsMathematical and Aggregate OperatorsConnectable Observable Opera…

2019年甘肃省普通高等学校高职(专科)升本科考试招生工作实施办法

2019年甘肃省普通高等学校高职&#xff08;专科&#xff09;升本科考试招生工作实施办法 2019年甘肃省普通高等学校高职&#xff08;专科&#xff09;升本科考试招生工作实施办法 根据教育部有关规定及要求&#xff0c;结合我省实际&#xff0c;为确保普通高等学校高职&#x…

HTML基础之bit哥的反客为主之道(9)

作者简介 作者名&#xff1a;1_bit 简介&#xff1a;CSDN博客专家&#xff0c;2020年博客之星TOP5&#xff0c;蓝桥签约作者。15-16年曾在网上直播&#xff0c;带领一批程序小白走上程序员之路。欢迎各位小白加我咨询我相关信息&#xff0c;迷茫的你会找到答案。 目录 HTML基…

Atom编辑Markdown文件保存后行尾的空格自动消失的问题解决

Markdown文件的行尾增加两个空格表示一行结束需要换行。 但保存文件后&#xff0c;行尾的空格自动消失&#xff0c;导致不换行。 解决方法&#xff1a; 1、【Edit】->【Preferences】->【Packages】->【whitespace】->【Settings】->【Keep Markdown Line Brea…

将Abp移植进.NET MAUI项目

前言写在.NET MAUI官宣正式发布之际&#xff0c;热烈庆祝MAUI正式发布&#xff01;去年12月份做了MAUI混合开发框架的调研&#xff0c;想起来文章里给自己挖了个坑&#xff0c;要教大家如何把Abp移植进Maui项目。熟悉Abp的同学都知道&#xff0c;Abp 是一套强大的应用程序设计时…

采用ArcGIS 10.6制作漂亮的点阵世界地图,完美!!!

如下图所示,怎样制作完美漂亮的点阵世界地图呢?今天我就教大家吧! 其实,制作过程相当简单,主要的思路是通过世界地图范围去创建渔网(标注点),再选择范围内的标注点,符号化即可,怎么样,很简单吧,下面我们一步一步来实现吧。 1. 加载世界地图 打开ArcGIS软件,加载软…

懒办法1篇文10分钟快速入门MySQL增删查改

作者简介 作者名&#xff1a;1_bit 简介&#xff1a;CSDN博客专家&#xff0c;2020年博客之星TOP5&#xff0c;InfoQ签约作者&#xff0c;蓝桥签约作者。15-16年曾在网上直播&#xff0c;带领一批程序小白走上程序员之路。欢迎各位小白加我咨询我相关信息&#xff0c;迷茫的你…

大话领域驱动设计——领域层

概述在DDD中&#xff0c;业务逻辑主要分布在领域层和应用层两层&#xff0c;他们包含不同的业务逻辑。这一篇&#xff0c;我们先对领域层做详细的讲解分析。领域层实现了领域或系统的&#xff0c;与用户界面上的用户交互&#xff08;用例&#xff09;无关的核心业务逻辑。总览领…

【北斗】北斗卫星导航系统(BDS)介绍

一、概述 北斗卫星导航系统(以下简称北斗系统)是中国着眼于国家安全和经济社会发展需要,自主建设运行的全球卫星导航系统,是为全球用户提供全天候、全天时、高精度的定位、导航和授时服务的国家重要时空基础设施。 北斗系统提供服务以来,已在交通运输、农林渔业、水文监…

正则验证金额大于等于0,并且只到小数点后2位

2019独角兽企业重金招聘Python工程师标准>>> ^(([0-9]|([1-9][0-9]{0,9}))((\.[0-9]{1,2})?))$ 转载于:https://my.oschina.net/u/934148/blog/528688