HTML- 设置文本

最新推荐文章于 2023-02-16 16:12:28 发布

娃娃救葫芦爷

最新推荐文章于 2023-02-16 16:12:28 发布

阅读量818

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML基础

本文链接：https://blog.youkuaiyun.com/cc098818/article/details/99301502

HTML基础专栏收录该内容

7 篇文章

订阅专栏

本文介绍了HTML中如何设置文本，包括基本结构、文本排版、文字列表的创建（无序列表ul和有序列表ol）以及HTML标记和属性的使用。通过属性如align、bgcolor控制内容对齐和背景颜色，font标签来设定文字大小和颜色，同时展示了特殊文字符号的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、HTML基本结构

<html> 标记放在 HTML 文件的开头，是一个形式上的标记；
<body> 标记称为主体标记，网页所要显示的内容都放在这个标记内，它是 HTML 文件的重要所在；
<head> 标记称为头标记，起的作用是放置关于此 HTML 文件的信息，如提供索引、定义 CSS 样式等；
<title> 标记称为标题标记，起的作用是设定网页标题；

2、文本排版

（1） 段落标签<p>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>段落标签</title>
</head>
<body>
<p>Java[1]是由Sun Microsystems公司于 1995年5月推出的Java面向对象程序设计语言（以下简称Java语言）和Java平台的总称。由James Gosling和同事们共同研发，并在1995年正式推出。用Java实现的HotJava浏览器（支持Java applet）显示了Java的魅力：跨平台、动态的Web 、Internet计算。从此，Java被广泛接受并推动了Web的迅速发展，常用的浏览器均支持Javaapplet。另一方面，Java技术也不断更新。(2010 年Oracle公司收购了SUN)</p>

<p>Java是一种可以撰写跨平台应用软件的面向对象的程序设计语言，是由Sun Microsystems公司于1995年5月推出的Java程序设计语言和Java平 台（即JavaSE, JavaEE, JavaME）的总称。Java 技术具有卓越的通用性、高效性、平台移植性和安全性，广泛应用于个人PC、数据中心、游 戏控制台、科学超级计算机、移动电话和互联网，同时拥有全球最大的开发者专业社群。在全球云计算和移动互联网的产业环境下，Java更具 备了显著优势和广阔前景。</p>
</body>
</html>

运行结果：
在这里插入图片描述

（2）换行标签<br>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>换行标签</title>
</head>
<body>
《锄禾》<br/>
春种一粒粟,秋收万颗子。<br/>
四海无闲田,农夫犹饿死。<br/>
锄禾日当午,汗滴禾下土。 <br/>
谁知盘中餐,粒粒皆辛苦。<br/>
</body>
</html>

运行结果：
在这里插入图片描述

（3） 标题标签<h1>~<h6>


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>标题标签</title>
</head>
<body>
<h1>《锄禾》</h1>
<h2>《锄禾》</h2>
<h3>《锄禾》</h3>
<h4>《锄禾》</h4>
<h5>《锄禾》</h5>
<h6>《锄禾》</h6>
《锄禾》<br/>
春种一粒粟,秋收万颗子。<br/>
四海无闲田,农夫犹饿死。<br/>
锄禾日当午,汗滴禾下土。 <br/>
谁知盘中餐,粒粒皆辛苦。<br/>
</body>
</html>

运行结果：
在这里插入图片描述

（4）文字居中标签<center>


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文字居中标签</title>
</head>
<body>
<center>
<h1>《锄禾》</h1>
<h2>《锄禾》</h2>
<h3>《锄禾》</h3>
<h4>《锄禾》</h4>
<h5>《锄禾》</h5>
<h6>《锄禾》</h6>
《锄禾》<br/>
春种一粒粟,秋收万颗子。<br/>
四海无闲田,农夫犹饿死。<br/>
锄禾日当午,汗滴禾下土。 <br/>
谁知盘中餐,粒粒皆辛苦。<br/>
</center>
</body>
</html>

运行结果：
在这里插入图片描述

（5）文字段落缩进标签<blockquote>


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>段落标签</title>
</head>
<body>
<p><blockquote>Java[1]是由Sun Microsystems公司于 1995年5月推出的Java面向对象程序设计语言（以下简称Java语言）和Java平台的总称。由James Gosling和同事们共同研发，并在1995年正式推出。用Java实现的HotJava浏览器（支持Java applet）显示了Java的魅力：跨平台、动态的Web 、Internet计算。从此，Java被广泛接受并推动了Web的迅速发展，常用的浏览器均支持Javaapplet。另一方面，Java技术也不断更新。(2010 年Oracle公司收购了SUN)</blockquote></p>

<p>Java是一种可以撰写跨平台应用软件的面向对象的程序设计语言，是由Sun Microsystems公司于1995年5月推出的Java程序设计语言和Java平 台（即JavaSE, JavaEE, JavaME）的总称。Java 技术具有卓越的通用性、高效性、平台移植性和安全性，广泛应用于个人PC、数据中心、游 戏控制台、科学超级计算机、移动电话和互联网，同时拥有全球最大的开发者专业社群。在全球云计算和移动互联网的产业环境下，Java更具 备了显著优势和广阔前景。</p>
</body>
</html>

运行结果：
在这里插入图片描述
3、设置文字列表
文字列表的主要作用是有序地编排一些信息资源，使其结构化和条理化，并以列表的样式显示出来；
（1）无序列表 ul


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>无序列表ul</title>
</head>
<body>
无序列表
<ul>
	<li>第一项</li>
	<li>第二项</li>
	<li>第三项</li>
	<li>第四项</li>
</ul>
</body>
</html>

运行结果：
在这里插入图片描述
（2）有序列表 ol


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>有序列表ol</title>
</head>
<body>
有序列表
<ol>
	<li>第一项</li>
	<li>第二项</li>
	<li>第三项</li>
	<li>第四项</li>
</ol>
</body>
</html>

运行结果：
在这里插入图片描述
4、HTML 标记与 HTML 属性
在大多数 HTML 标记中都可以对属性控制，属性的作用是帮助 HTML 标记进一步控制 HTML 文件的内容，比如内容的对齐方式（如本例），文字的大小、字体、颜色，网页的背景样式，图片的插入，等等。其基本语法为：<标记名称属性名 1=“属性值 1” 属性名 2=“属性值 2” …>
（1）用 align 属性控制段落的水平位置


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>align属性</title>
</head>
<body>
<p align="center">
《锄禾》<br/>
春种一粒粟,秋收万颗子。<br/>
四海无闲田,农夫犹饿死。<br/>
锄禾日当午,汗滴禾下土。 <br/>
谁知盘中餐,粒粒皆辛苦。<br/>
</p>
</body>
</html>

运行结果
在这里插入图片描述
（2）用 bgcolor 属性设置背景颜色
可直接颜色表示如 red blue ；也可利用 R/G/B 表示 16 进制 #FFFF00 ；


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>align属性</title>
</head>
<body bgcolor="#ABFF23">
<p align="center">
《锄禾》<br/>
春种一粒粟,秋收万颗子。<br/>
四海无闲田,农夫犹饿死。<br/>
锄禾日当午,汗滴禾下土。 <br/>
谁知盘中餐,粒粒皆辛苦。<br/>
</p>
</body>
</html>

运行结果：
在这里插入图片描述
（3）设置文字的特殊样式


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>设置文字的特殊样式</title>
</head>
<body>
默认文字样式<br/>
<b>文字以粗体方式显示</b><br/>
<i>文字以斜体方式显示</i><br/>
<u>文字以加下划线方式显示</u><br/>
<s>文字以加下删除方式显示</s><br/>
<big>文字以放大方式显示</big><br/>
<small>文字以缩小方式显示</small><br/>
<strong>文字以加强强调方式显示</strong><br/>
<em>文字以强调方式显示</em><br/>
<address>caofeng2012@126.com</address><br/>
<code>abc</code><br/>
</body>
</html>

运行结果：
在这里插入图片描述
（4）设置文字的大小和颜色 font 标签


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Font标签</title>
</head>
<body>
Font标签<br/>
<font color="red" size="10" face="宋体">Font标签</font>
</body>
</html>

运行结果：
在这里插入图片描述
（5）特殊文字符号


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>特殊文字符号</title>
</head>
<body>
&lt;br/&gt;<br/>
版权所有 &copy;www.java1234.com<br/>
2<sup>3</sup> <br/>
3<sub>2</sub>
</body>
</html>

运行结果：
在这里插入图片描述