HTML（二）——用html设置文本

最新推荐文章于 2024-06-16 14:23:01 发布
最新推荐文章于 2024-06-16 14:23:01 发布
阅读量5.2k 收藏 64
点赞数 4
分类专栏： ● Web前端基础篇 文章标签： html属性 html标签
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37084904/article/details/88071965
版权

目录

1.HTML文件基本结构； 

2.文本排版：

2.1 段落标签

2.2 换行标签（这个是单标签，只有一个）

2.3分割线标签（这个是单标签，也只有一个）

2.4标题标签

2.5文字居中标签

2.6文字段落缩进标签

3.设置文字列表：

3.1无序列表

3.2有序列表

4.HTML标记与HTML属性

4.1用align属性控制段落的水平位置

4.2用bgcolor属性设置背景颜色

4.3设置文字的特殊样式

4.4设置文字的大小和颜色标签和font标签

5.特殊文字符号

1.HTML文件基本结构； 

<!DOCTYPE html>
<html><!-- 标记放在html文件的开头，是一个形式上的标记 -->
<head><!-- 头标记，起的作用是放置关于此html文件的信息，如提供索引，定义CSS样式等 -->
<meta charset="UTF-8">
<title>HTML标题</title><!-- 标题标记，作用是设置网页标题 -->
</head>
<body><!-- 主题标记，网页所要显示的内容都放在这个标记内，它是html文件的重要所在 -->
我的第一个html网页
</body>
</html>

<html> ：标记放在html文件的开头，是一个形式上的标记 

<head>：头标记，起的作用是放置关于此html文件的信息，如提供索引，定义CSS样式等

<title>： 标题标记，作用是设置网页标题 

<body>：主题标记，网页所要显示的内容都放在这个标记内，它是html文件的重要所在

 

2.文本排版：

2.1 段落标签<p>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>段落标签</title>
</head>
<body>
<p>
Java是一门面向对象编程语言，不仅吸收了C++语言的各种优点，还摒弃了C++里难以理解的多继承、指针等概念，因此Java语言具有功能强大和简单易用两个特征。Java语言作为静态面向对象编程语言的代表，极好地实现了面向对象理论，允许程序员以优雅的思维方式进行复杂的编程 [1]  。
</p>
<p>
Java具有简单性、面向对象、分布式、健壮性、安全性、平台独立与可移植性、多线程、动态性等特点 [2]  。Java可以编写桌面应用程序、Web应用程序、分布式系统和嵌入式系统应用程序等 [3]  。
</p>
</body>
</html>

运行结果：

 

2.2 换行标签<br/>（这个是单标签，只有一个）

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>换行标签</title>
</head>
<body>
望庐山瀑布<br/>
唐代：李白<br/>
日照香炉生紫烟，遥看瀑布挂前川。<br/>
飞流直下三千尺，疑是银河落九天。<br/>
</body>
</html>

 运行结果：

2.3分割线标签<hr>（这个是单标签，也只有一个）

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>换行标签</title>
</head>
<body>
望庐山瀑布<br/>
<hr/>
唐代：李白<br/>
<hr/>
日照香炉生紫烟，遥看瀑布挂前川。<br/>
<hr/>
飞流直下三千尺，疑是银河落九天。<br/>
<hr/>
</body>
</html>

运行结果：

2.4标题标签<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>
</body>
</html>

 运行结果：

2.5文字居中标签<center>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>换行标签</title>
</head>
<body>
<center>
望庐山瀑布<br/>
唐代：李白<br/>
日照香炉生紫烟，遥看瀑布挂前川。<br/>
飞流直下三千尺，疑是银河落九天。<br/>
</center>
</body>
</html>

注：这个cener标签已经不怎么用了，兼容性不好 

运行结果：

2.6文字段落缩进标签<blockquote>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>段落标签</title>
</head>
<body>
<p>
<blockquote>
Java是一门面向对象编程语言，不仅吸收了C++语言的各种优点，还摒弃了C++里难以理解的多继承、指针等概念，因此Java语言具有功能强大和简单易用两个特征。Java语言作为静态面向对象编程语言的代表，极好地实现了面向对象理论，允许程序员以优雅的思维方式进行复杂的编程 [1]  。
</blockquote>
</p>
<p>
Java具有简单性、面向对象、分布式、健壮性、安全性、平台独立与可移植性、多线程、动态性等特点 [2]  。Java可以编写桌面应用程序、Web应用程序、分布式系统和嵌入式系统应用程序等 [3]  。
</p>
</body>
</html>

运行结果：

可以看到前面有缩进（红色方框的地方） 

 

3.设置文字列表：

作用：文字列表的主要作用是有效地编排一些信息资源，使其结构化和条理化，并以列表的样式显示出来；

3.1无序列表<ul></ul>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>段落标签</title>
</head>
<body>
<ul>
	<li>苹果</li>
	<li>梨子</li>
	<li>葡萄</li>
	<li>芒果</li>
</ul>
</body>
</html>

运行结果：

3.2有序列表<ol></ol>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>段落标签</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” ......>

4.1用align属性控制段落的水平位置

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>段落居中</title>
</head>
<body>
<p align="center">
望庐山瀑布<br/>
唐代：李白<br/>
日照香炉生紫烟，遥看瀑布挂前川。<br/>
飞流直下三千尺，疑是银河落九天。<br/>
</p>
</body>
</html>

其中的align有四个属性值，分别是justify，left（左）,center（中）,right（右）；

运行结果：

4.2用bgcolor属性设置背景颜色

注：1.直接用颜色表示：如 red、blue；2.利用R/G/B表示，十六进制，如#AABB00；

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>段落居中</title>
</head>
<body bgcolor="#AABB00">
<p align="center">
望庐山瀑布<br/>
唐代：李白<br/>
日照香炉生紫烟，遥看瀑布挂前川。<br/>
飞流直下三千尺，疑是银河落九天。<br/>
</p>
</body>
</html>

这时的bgcolor是写在<body>里面的！我们可以写个英文字母b，然后用"Alt+/"进行提示；

运行结果：

4.3设置文字的特殊样式

 标记显示效果
<b></b>文字以粗体方式显示
<i></i>文字以斜体方式显示
<u></u>文字以加下划线方式显示
<s></s>文字以加下划线删除方式显示
<big></big>文字以放大方式显示
<small></small>文字以缩小方式显示
<strong></strong>文字以加强强调方式显示
<em></em>文字以强调方式显示
<address></address>用来显示电子邮件地址或网址
<code></code>用来说明代码与指令
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>段落居中</title>
</head>
<body>
<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>484753039@qq.com</address><br/>
<code>用来说明代码与指令</code><br/>
</body>
</html>

 运行结果:

4.4设置文字的大小和颜色标签和font标签

font标签的属性

属性设置值说明
size

相对值(size=+2)

绝对值(size=2)

设置文字的大小，默认值为size=3
color

颜色名称(color="red")

R/G/B格式(color="#FFCC00")

设置文字的颜色
face系统内置字形设置文字的字体，如宋体
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>段落居中</title>
</head>
<body>
望庐山瀑布<br/>
唐代：李白<br/>
日照香炉生紫烟，遥看瀑布挂前川。<br/>
飞流直下三千尺，疑是银河落九天。<br/>
<font size=10 color=red face="楷体">
望庐山瀑布<br/>
唐代：李白<br/>
日照香炉生紫烟，遥看瀑布挂前川。<br/>
飞流直下三千尺，疑是银河落九天。<br/>
</font>
</body>
</html>

运行结果： 

5.特殊文字符号

特殊符号HTML表示法
©（一般指版权的时候用到）&copy;
<&lt;
>&gt;
"&quot;
&&amp;
空格&nbsp;
上标<sup></sup>
下标<sub></sub>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>段落居中</title>
</head>
<body bgcolor="#FF5555">
&lt;br&gt;<!-- 在浏览器中打印出<br>这个符号 --><br>
版权所有&copy;www...com<!-- 在浏览器中打印出©这个符号 --><br>
在浏览器&nbsp;&nbsp;&nbsp;&nbsp;中打印出4个空格<!-- 在浏览器中打印出4个空格 --><br>
SO<sub>4</sub><sup>2-</sup><!-- 在浏览器中打印出硫酸根离子的符号 --><br>
打出&amp;这个符号<!-- 在浏览器中打出&这个符号 --><br>
</body>
</html>

运行结果：

 

 

程序员的时光
关注
  • 4
    点赞
  • 踩
  • 64
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML- 设置文本
cc098818的博客
08-12 752
1、HTML基本结构 <html> 标记放在 HTML 文件的开头，是一个形式上的标记； <body> 标记称为主体标记，网页所要显示的内容都放在这个标记内，它是 HTML 文件的重要所在； <head> 标记称为头标记，起的作用是放置关于此 HTML 文件的信息，如提供索引、定义 CSS 样式等； <title> 标记称为标题标记，起的作用是设定网...
在html中设置全局字体样式
仙路尽头谁为峰
10-06 1万+
背景 需要对一个没有设置布局样式的html文档中所有文字样式进行修改，作为一个不是很了解前端开发的人来说，自然是想有没有那种比较简单，能在html中加几行代码就把所有段落字体样式进行统一修改的案例，网上搜了一堆教程发现很多都是要新建一个外部css文件引入，感觉太麻烦，一番波折后终于尝试出了比较适用于新手的速成法。 说明 这种方法适用于在不引入外部CSS的情况下，直接在html文档的head节点中为页面中各级节点中包含的文本内容设置字体样式。 html字体样式设置 此处设置了整个html中h1、h2、h3、h
关于HTML中的文字设置
L20220927Y的博客
10-10 1482
html里文字的各种设置说明
html5常用属性
最新发布
2301_78986604的博客
06-16 535
type：输入框类型，可选值：text、password、hidden、checkbox、radio、submit、reset、file、image、button、email、url、date、time、month、week、number、range、color。value属性：当option没有value属性时，往后台传递的是中间的文字，当有value属性时，传递的是value的属性值。a、Strong、em都能表示强调，Strong为粗体，em为斜体，而Strong的强调程度比em高。
【html/css】文本设置大全
云霄IT的博客
02-16 692
css之文本基础设置大全，设置div根据字体数量自动适应调整。
HTML复习之用HTML设置文本
Java学习之乐的博客
05-11 447
今日目录        1、HTML基本结构        2、文本排版        3、设置文字列表        4、HTML标记与HTML属性        5、特殊文字符号一、HTML基本结构        1、&lt;html&gt; 标记放在 HTML 文件的开头，是一个形式上的标记；        2、&lt;body&gt; 标记称为主体标记，网页所要显示的内容都放在这个标记内，...
html 值和文本,设置和获取HTML、文本和值
weixin_30110543的博客
06-16 767
html()此方法类似于JavaScript中的innerHTML属性，可以用来读取或设置某个元素中的HTML内容HTML:this is strongjQuery代码:var _html= $(‘p‘).html();//得到元素的html内容$(‘p‘).html(‘this is span‘);//设置元素的html内容结果：_html内容为this is strongHTML为this i...
初学HTML用法大全指导(一)html对文本的设置
Sweet Baby，甜宝
01-06 1018
研究生最难的数值分析考试终于在昨晚上考完了，今天闲下来有时间聊一聊我们最熟悉的HTML脚本语言。        HTML又称Hyper Text Markup Language即超文本标记语言，它是用来描述网页的一种脚本语言。
TextView Html.fromHtml ScrollView——可追加自动显示最后行
09-06
上述代码展示了如何将富文本内容设置到TextView，并使用ScrollView实现自动滚动到最后一行的功能。 综上所述，通过`Html.fromHtml`与ScrollView的组合，开发者可以轻松地在Android应用中创建一个支持富文本并能...
2html-文本排版控制标记符公开课.pptx
12-14
HTML文本排版控制标记符是一种用于控制网页文本排版的标记符，通过使用这些标记符，可以对网页中的文本进行排版、格式化和样式设置。 一、基本概念 HTML文本排版控制标记符可以分为三大类：文本标记、段落标记和...
狂神说——HTML完整教学通俗易懂
05-20
"狂神说——HTML完整教学通俗易懂"这个教程旨在为初学者提供一个全面且易于理解的HTML学习资源，帮助他们掌握网页设计的基础。 1. HTML基本结构：HTML文档通常由<!DOCTYPE>声明开始，定义了文档类型。接着是<html>...
HTML——3d炫酷旋转特效.rar
02-11
HTML（超文本标记语言）是网页内容的结构标准，它定义了网页的布局和内容。在HTML5中，新增了许多语义化标签，如、等，使网页结构更加清晰，利于搜索引擎优化和无障碍访问。 接着，CSS（层叠样式表）是用于控制网页...
Javaweb前端——HTML常用标签.pdf
04-09
3. 平台无关性：虽然个人计算机大行其道，但使用MAC等其他机器的大有人在，超级文本标记语言可以使用在广泛的平台上，这也是万维网（WWW）盛行的另一个原因。 4. 通用性：另外，HTML是网路的通用语言，一种简单、...
HTML如何在图片上添加内容（如文字，菜单栏，按钮等）
热门推荐
dengdengda的博客
09-26 9万+
HTML如何在图片上添加内容     最近做的一个效果是网页头部有一张大图，菜单栏漂浮在图片之上。我看到网上讲的很简单，大致原理就是图片定为相对定位，文字定为绝对定位即可。不过我实现的并不顺利，花了几个小时才让菜单栏漂浮在图片上。以下是效果图。 首先布好局： 以下是代码：               nav{         width: 100%;
HTML+CSS基础知识点（1）简单的文本实现和插入内容
m0_73490321的博客
12-05 1072
HTML从零开始的知识点
html---2.设置网页文本内容
SLSLSLSLSLSLS的博客
06-03 1182
2.1标题文字 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>标题文字的建立</title> </head> <body> 2.1.1标题文字标记&lth&gt 从h1到h6 <h1>一级标题</h1> <h2>二级标题</h2> <h
在html文件中添加文字
bicart的博客
01-11 1374
使用这些标签，你可以在你的HTML文件中添加和格式化文本内容。你还可以使用其他HTML标签来添加文本，如。标签，具体取决于你想要的标题级别，其中。要在HTML文件中添加文字，你可以使用。标签等，具体取决于你的需求和样式要求。例如，要添加一个段落，你可以使用。要添加一个标题，你可以使用。是最高级别的标题，而。
HTML\CSS-在边框中添加文本
Jackie_Mina
02-07 4068
HTML Fieldset
超文本标记语言（html）之文字编辑
yysyyssmdsmd的博客
03-06 2127
前端基础知识
第2关:html标题与段落 html——文本
09-22
在HTML中，标题和段落常用于对文本进行结构化和组织，以便更好地呈现和理解文本内容。 标题（Heading）用于标记文本内容的层级和重要性。HTML提供了六个级别的标题标签，分别是到。其中，标签代表最高级别的标题，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值