超文本标记语言(html)之文字编辑

2023-11-10 19:40

本文主要是介绍超文本标记语言(html)之文字编辑,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

一、编辑内容

1.添加文字

基本语法

<body>
请在此处添加文字
</body>

语法说明

在网页中添加文字,只要在<body></body>之间,需要插入文字的地方输入文字就可以实现。

2 添加注释<! ---->

在HTML文件中,为了增加代码的可读性,需要对代码添加必要的注释。这些注释语句可方便编写者的检查与维护,同时这些注释信息也不会在网页中被显示。

基本语法

<html>
<head>
<!--请在此处添加注释语句-->
<title>添加语句</title>
</head>
<body>
<!--请在此处添加注释语句-->
</body>
</html>

实例代码:

<html>
<head><!--请在此添加注释语句!--><title>添加注释</title>
</head>
<body><!--请在此添加注释语句!-->清华大学出版社<Br>版权所有,违者必究!
</body>
</html>

3 .添加空格

在HTML文件中,添加空格的方式与其他文档添加空格的方式不同,网页中添加空格是通过代码控制,在Word、记事本、写字板中输入空格可以直接通过键盘空格键输入。

基本语法

<body>
&nbsp;&nbsp;&nbsp;
</body>

语法说明

在HTML文件中,添加空格需要使用代码"&nbsp;"控制,需要多少个空格就需要添加多少个"&nbsp;"。

实例代码:

<html>
<head> 
<title>添加空格</title>
</head>
<body>
&nbsp;&nbsp;&nbsp;&nbsp;财政部有关负责人说,所谓"首购",是指对于国内企业或科研机构生产或开发的,暂不具有市场竞争力,但符合国民经济发展要求、代表先进技术发展方向的首次投向市场的产品,通过政府采购方式由采购人或政府首先采购的行为。
</body>
</html>

4 . 添加删除线

在HTML文件中,给需要添加删除线的文字使用成对的<strike></strike>标记,就可以添加删除线

基本语法

<body>
<strike>请在此输入需要添加删除线的文字</strike>
</body>

语法说明

在成对的<strike></strike>标记之间输入文字,在网页中显示改标记之间的文字就是被添加了删除线后的显示效果

实例代码:

<html>
<head> 
<title>添加删除线</title>
</head>
<body>
给下面文字添加删除线<br>
<strike>添加了删除线的文字</strike>
</body>
</html>

二、文字效果

1.标题文字标签<hn>

<hn>标签一共为6级

基本语法:

<hn align=参数值>标题文字</hn>
align属性值为right,left(默认),center

实例代码:

<html>
<head>
<title>标题文字标签</title>
</head>
<body>
<h1 align="center">Header Level 1</h1>
<h2> Header Level 2</h2>
<h3> Header Level 3</h3>
<h4> Header Level 4</h4>
<h5> Header Level 5</h5>
<h6> Header Level 6</h6>
</body>
</html>

2. 编辑网页文字样式

基本语法

<body>
<font face=" " size=" " color=" "></font>
<body>

语法说明

在HTML文件中,利用成对标记就可以将网页中的文字根据需要,对其进行样式的编辑。

实例代码:

<html>
<head> 
<title>编辑网页文字样式</title>
</head>
<body>没有使用效果后的文字!<br><font face="楷体" size="6" color="#00ffff">&nbsp;&nbsp;&nbsp;使用效果后的文字
</font>
</body>
</html>

3. 设置文字标注标记<ruby>

在HTML文件中,有时需要对某个字、词或者某个段进行说明,可以通过添加文字的标注标记来完成对网页中文字的说明。

基本语法:

<ruby>
被说明的文字
<rt>
文字的标注
</rt>
</ruby>

语法说明:

利用成对的<ruby><rt>标记,可以对网页中的文字进行标注。

实例代码

<html>
<head> 
<title>设置文字标注标记</title>
</head>
<body><ruby>当代最可爱的人<rt>志愿军</rt>
</ruby>
</body>
</html>

三、文字修饰

1.简单修饰文字

基本语法

<body>
普通文字的显示<br>
<b>加粗的文字</b><br>
<i>斜体的文字</i><br>
<u>添加下划线的文字</u><br>
<big>放大</big><br>
<small>缩小</small><br>
</body>

实例代码:

<html>
<head> 
<title>简单修饰文字</title>
</head>
<body>普通文字的显示<br><b>加粗的文字</b><br><i>斜体文字</i><br><u>添加下划线文字</u><br>
</body>
</html>

2. 确定文字上下标

基本语法:

<body>
<sup>上标内容</sup><br>
<sub>下标内容</sub><br>
</body>

语法说明:

在HTML文件中,成对的<sup></sup>标记可以表示上标,利用成对的标记<sub></sub>表示下标。

实例代码:

<html>
<head>
<title>确定文字上下标</title>
</head>
<body>解下面方程:<br>x<sup>2</sup>-3x+2=0<br>解:x<sub>1</sub>=1; x<sub>2</sub>=2<br>
</body>
</html>

3.设置地址文字

在网页中添加地址文字,是为了更方便地突出显示联系方式,将联系人的地址信息突出显示。

基本语法:

<body>
<address>请在此添加地址信息</address>
</body>

语法说明:

在HTML文件中,利用成对<address></address>标记就可以将网页需要显示的地址文件突出显示。

实例代码:

<html>
<head> 
<title>设置地址文字</title>
</head>
<body>书中有不恰当的地方,请您及时与我们联系:<br><address>清华大学出版社</address><br><address>E-mail:market@1.com.cn</address><br>
</body>
</html>

这篇关于超文本标记语言(html)之文字编辑的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!


原文地址:https://blog.csdn.net/yysyyssmdsmd/article/details/129355689
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.chinasem.cn/article/384825

相关文章

前端下载文件时如何后端返回的文件流一些常见方法

《前端下载文件时如何后端返回的文件流一些常见方法》:本文主要介绍前端下载文件时如何后端返回的文件流一些常见方法,包括使用Blob和URL.createObjectURL创建下载链接,以及处理带有C... 目录1. 使用 Blob 和 URL.createObjectURL 创建下载链接例子:使用 Blob

Vuex Actions多参数传递的解决方案

《VuexActions多参数传递的解决方案》在Vuex中,actions的设计默认只支持单个参数传递,这有时会限制我们的使用场景,下面我将详细介绍几种处理多参数传递的解决方案,从基础到高级,... 目录一、对象封装法(推荐)二、参数解构法三、柯里化函数法四、Payload 工厂函数五、TypeScript

Go 语言中的select语句详解及工作原理

《Go语言中的select语句详解及工作原理》在Go语言中,select语句是用于处理多个通道(channel)操作的一种控制结构,它类似于switch语句,本文给大家介绍Go语言中的select语... 目录Go 语言中的 select 是做什么的基本功能语法工作原理示例示例 1:监听多个通道示例 2:带

C语言函数递归实际应用举例详解

《C语言函数递归实际应用举例详解》程序调用自身的编程技巧称为递归,递归做为一种算法在程序设计语言中广泛应用,:本文主要介绍C语言函数递归实际应用举例的相关资料,文中通过代码介绍的非常详细,需要的朋... 目录前言一、递归的概念与思想二、递归的限制条件 三、递归的实际应用举例(一)求 n 的阶乘(二)顺序打印

Vue3使用router,params传参为空问题

《Vue3使用router,params传参为空问题》:本文主要介绍Vue3使用router,params传参为空问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐... 目录vue3使用China编程router,params传参为空1.使用query方式传参2.使用 Histo

CSS Padding 和 Margin 区别全解析

《CSSPadding和Margin区别全解析》CSS中的padding和margin是两个非常基础且重要的属性,它们用于控制元素周围的空白区域,本文将详细介绍padding和... 目录css Padding 和 Margin 全解析1. Padding: 内边距2. Margin: 外边距3. Padd

CSS will-change 属性示例详解

《CSSwill-change属性示例详解》will-change是一个CSS属性,用于告诉浏览器某个元素在未来可能会发生哪些变化,本文给大家介绍CSSwill-change属性详解,感... will-change 是一个 css 属性,用于告诉浏览器某个元素在未来可能会发生哪些变化。这可以帮助浏览器优化

CSS去除a标签的下划线的几种方法

《CSS去除a标签的下划线的几种方法》本文给大家分享在CSS中,去除a标签(超链接)的下划线的几种方法,本文给大家介绍的非常详细,感兴趣的朋友一起看看吧... 在 css 中,去除a标签(超链接)的下划线主要有以下几种方法:使用text-decoration属性通用选择器设置:使用a标签选择器,将tex

前端高级CSS用法示例详解

《前端高级CSS用法示例详解》在前端开发中,CSS(层叠样式表)不仅是用来控制网页的外观和布局,更是实现复杂交互和动态效果的关键技术之一,随着前端技术的不断发展,CSS的用法也日益丰富和高级,本文将深... 前端高级css用法在前端开发中,CSS(层叠样式表)不仅是用来控制网页的外观和布局,更是实现复杂交

Python将博客内容html导出为Markdown格式

《Python将博客内容html导出为Markdown格式》Python将博客内容html导出为Markdown格式,通过博客url地址抓取文章,分析并提取出文章标题和内容,将内容构建成html,再转... 目录一、为什么要搞?二、准备如何搞?三、说搞咱就搞!抓取文章提取内容构建html转存markdown