超文本标记语言(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)之文字编辑的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/384825

相关文章

Java实现Excel与HTML互转

《Java实现Excel与HTML互转》Excel是一种电子表格格式,而HTM则是一种用于创建网页的标记语言,虽然两者在用途上存在差异,但有时我们需要将数据从一种格式转换为另一种格式,下面我们就来看看... Excel是一种电子表格格式,广泛用于数据处理和分析,而HTM则是一种用于创建网页的标记语言。虽然两

使用SQL语言查询多个Excel表格的操作方法

《使用SQL语言查询多个Excel表格的操作方法》本文介绍了如何使用SQL语言查询多个Excel表格,通过将所有Excel表格放入一个.xlsx文件中,并使用pandas和pandasql库进行读取和... 目录如何用SQL语言查询多个Excel表格如何使用sql查询excel内容1. 简介2. 实现思路3

Go语言实现将中文转化为拼音功能

《Go语言实现将中文转化为拼音功能》这篇文章主要为大家详细介绍了Go语言中如何实现将中文转化为拼音功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 有这么一个需求:新用户入职 创建一系列账号比较麻烦,打算通过接口传入姓名进行初始化。想把姓名转化成拼音。因为有些账号即需要中文也需要英

Go语言使用Buffer实现高性能处理字节和字符

《Go语言使用Buffer实现高性能处理字节和字符》在Go中,bytes.Buffer是一个非常高效的类型,用于处理字节数据的读写操作,本文将详细介绍一下如何使用Buffer实现高性能处理字节和... 目录1. bytes.Buffer 的基本用法1.1. 创建和初始化 Buffer1.2. 使用 Writ

深入理解C语言的void*

《深入理解C语言的void*》本文主要介绍了C语言的void*,包括它的任意性、编译器对void*的类型检查以及需要显式类型转换的规则,具有一定的参考价值,感兴趣的可以了解一下... 目录一、void* 的类型任意性二、编译器对 void* 的类型检查三、需要显式类型转换占用的字节四、总结一、void* 的

vue解决子组件样式覆盖问题scoped deep

《vue解决子组件样式覆盖问题scopeddeep》文章主要介绍了在Vue项目中处理全局样式和局部样式的方法,包括使用scoped属性和深度选择器(/deep/)来覆盖子组件的样式,作者建议所有组件... 目录前言scoped分析deep分析使用总结所有组件必须加scoped父组件覆盖子组件使用deep前言

VUE动态绑定class类的三种常用方式及适用场景详解

《VUE动态绑定class类的三种常用方式及适用场景详解》文章介绍了在实际开发中动态绑定class的三种常见情况及其解决方案,包括根据不同的返回值渲染不同的class样式、给模块添加基础样式以及根据设... 目录前言1.动态选择class样式(对象添加:情景一)2.动态添加一个class样式(字符串添加:情

React实现原生APP切换效果

《React实现原生APP切换效果》最近需要使用Hybrid的方式开发一个APP,交互和原生APP相似并且需要IM通信,本文给大家介绍了使用React实现原生APP切换效果,文中通过代码示例讲解的非常... 目录背景需求概览技术栈实现步骤根据 react-router-dom 文档配置好路由添加过渡动画使用

C语言线程池的常见实现方式详解

《C语言线程池的常见实现方式详解》本文介绍了如何使用C语言实现一个基本的线程池,线程池的实现包括工作线程、任务队列、任务调度、线程池的初始化、任务添加、销毁等步骤,感兴趣的朋友跟随小编一起看看吧... 目录1. 线程池的基本结构2. 线程池的实现步骤3. 线程池的核心数据结构4. 线程池的详细实现4.1 初

使用Vue.js报错:ReferenceError: “Vue is not defined“ 的原因与解决方案

《使用Vue.js报错:ReferenceError:“Vueisnotdefined“的原因与解决方案》在前端开发中,ReferenceError:Vueisnotdefined是一个常见... 目录一、错误描述二、错误成因分析三、解决方案1. 检查 vue.js 的引入方式2. 验证 npm 安装3.