百度360必应搜狗淘宝本站头条
HTML APICSS 语法HTML 游戏HTML5 支持CSS 谷歌字体
当前位置：网站首页 > 技术文章 > 正文

前端入门——html 文字格式、标题与段落

myzbx 2024-12-01 18:28 21 浏览

前言

在制作网页时，文字是最基本的元素之一。让阅读者更容易阅读，短时间里获得更多信息，是网页创作者的目标。本篇将介绍各种文字格式标签的使用方法。

本篇主要针对初学者的一篇教程，如果你非常熟悉html，可以忽略本篇文章。

目录

  1. 标题文字
  2. 文字格式标签
  3. 段落标签
  4. 其它标签

标题文字

在网上浏览时经常看到一些标题文字，用来对应章节划分，它们以固定的字号显示，总共有6种级别的标题，从 h1 至 h6 依次减小，如下图：

html 代码：

Bash
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>标题</title>
</head>
<body>
<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<h3>这是标题 3</h3>
<h4>这是标题 4</h4>
<h5>这是标题 5</h5>
<h6>这是标题 6</h6>
</body>
</html>

标题对齐方式可以使用 align 属性，分别有三个属性：

  1. left —— 左对齐
  2. center —— 居中对齐
  3. right —— 右对齐

如下图：


html代码：

Bash
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>标题</title>
</head>
<body>
<h1>这是标题 1</h1>
<h2 align="left">这是标题 2</h2>
<h3 align="center">这是标题 3</h3>
<h4 align="right">这是标题 4</h4>
<h5>这是标题 5</h5>
<h6>这是标题 6</h6>
</body>
</html>

文字格式标签

除了标题，网页中普通文字也是不可缺少的，而各种文字效果可以使网页更加漂亮。

只需在<body>和</body>之间输入文字，就会直接在页面中显示，如何设置这些文字的格式，这里使用<font>标签，下面将逐一介绍各种文字格式用法。

一、设置字体、字号、颜色 —— <font> 标签

<font> 标签在HTML 4 中用于指定字体、字体大小和文本颜色，但在HTML5 中不支持。

  • face 属性：字体类型
  • size 属性： 字体字号大小
  • color 属性：字体颜色

html代码：

<html>
<body>
<div><font face="宋体">字体</font></div>
<div><font size="5">5号字体</font></div>
<div><font color="red">颜色</font></div>
<div><font size="5" face="arial" color="blue">一起使用</font></div>
</body>
</html>

在html5中不建议使用，请用 css 样式代替。

二、粗体、斜体、下划线、删除线—— strong、em、u、del

效果如下：

html代码：

<!DOCTYPE html>
<html>
<body>
<p>这是普通文本 - <strong>这是粗体文本</strong>。</p>
<p>这是普通文本 - <em>这是斜体</em>。</p>
<p>这是普通文本 - <u>这是下划线</u>。</p>
<p>这是普通文本 - <del>这是下划线</del>。</p>
</body>
</html>

注：html 5 和 html 4 相关标签存在巨大差异，比如 strong 和 b 、del 和 s、em 和 i 等效果相同，在html5 中不支持，b、s、i 标签，已不建议使用，关于各种差异，可自己了解下就可以了。

3、上标和下标 —— sup、sub

效果如下：


html代码：

<html>
<body>
<p>
普通文本 <sup>上标</sup>
</p>
<p>
普通文本 <sub>下标</sub>
</p>
<p>
数学公式 X<sup>3</sup> + 5X<sup>2</sup> - 5 = 0
</p>
<p>
数学公式 X<sub>1</sub> - 2X<sub>1</sub> = 0
</p>
</body>
</html>

4、空格——


一般在网页中输入文字时，在段落中明明增加了空格，却在页面中看不到，这是因为在html中，浏览器本身会将2个句子之间的所有半角空白仅当做一个空白来看待。所以在这里使用空格符代替，每个空格符代表一个半角空格，多个空格可以使用多次。

html代码：

效果：

5、其它特殊字符

除了空格字符，在网页中还有一些特殊字符也需要使用代码来代替，一般情况下，特殊字符由前缀 “&” 开始、字符名和后缀 “;” 组成，和空格符类似。如下表

段落

在网页中要把文字有条理地显示，需要使用到段落标签，下面介绍一些与段落相关的标签。

  • 段落标签——p

在网页中，通过 <p>定义为一个段落。

html代码：

<html>
<body>
<p>这是段落。</p>
<p>这是段落。</p>
<p>这是段落。</p>
<p>段落元素由 p 标签定义。</p> 
</body>
</html>

效果：

  • 换行标签——br

在写文字时，除了自动换行外，换可以使用<br>标签强制文字换行，这个和 p 段落标签不一样。段落标签的换行是隔行的，而br不是，时2行文字更加紧凑。

html代码：

<html>
<body>
<p>
第一个段落<br />换行1<br />换行2<br />换行3<br />最后一行.
</p>
<p>
第二个段落 <br />换行1<br />换行2<br />换行3<br />最后一行.
</p>
</body>
</html>

效果如下：

如果不想文字被浏览器自动换行，可以使用<nobr></nobr>标签处理，如下图：

改行文字不会被自动换行，会看到出现横向滚动条。

  • 保留原始排版方式——pre

在网页制作中，有时需要保留一些特殊的排版效果，这是使用标签控制就会很麻烦，使用<pre>标签就可以保留文本的格式排版效果。如下图：

html代码：

<html>
<body>
<pre>
这是
预格式文本。
它保留了      空格
和换行。
</pre>
<p>pre 标签很适合显示计算机代码：</p>
<pre>
for i = 1 to 10
     print i
next i
</pre>
<p>这是一个ok效果</p>
<pre>
  O O    k  K
 O   O   K K
  O O    K  K
</pre>
</body>
</html>

其它标签

  • 右缩进—— blockquote

使用<blockquote>可以实现文字段落缩进，每使用一次，段落就缩进一次，可以嵌套使用。

实例代码：

<html>
<body>
Here comes a long quotation:
<blockquote>
This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation.
</blockquote>
请注意，浏览器在 blockquote 元素前后添加了换行，并增加了外边距。
</body>
</html>

效果如下：

请注意，浏览器在 blockquote 元素前后添加了换行，并增加了外边距。

  • 水平线——hr

在段落和段落之间加上一行水平线，将段落隔开。如下效果：

html代码：

<html>
<body>
<p>hr 标签定义水平线：</p>
<hr />
<p>这是段落。</p>
<hr />
<p>这是段落。</p>
<hr />
<p>这是段落。</p>
</body>
</html>
  • 文字标注——ruby

在网页中可以通过添加对文字的标注来说明某段文本。

效果如下：

html代码：

<!DOCTYPE HTML>
<html>
<body>
<p>ruby 使用语法：</p>
<ruby>
 被说明的文字 <rt> 标注 </rt>
</ruby>
</body>
</html>
  • 其它标签——var、code、kbd等

<dfn>

定义一个定义项目。

<code>

定义计算机代码文本。

<samp>

定义样本文本。

<kbd>

定义键盘文本。它表示文本是从键盘上键入的。它经常用在与计算机相关的文档或手册中。

<var>

定义变量。您可以将此标签与 <pre> 及 <code> 标签配合使用。

<cite>

定义引用。可使用该标签对参考文献的引用进行定义，比如书籍或杂志的标题。

总结

本篇介绍了大部分常用的文本格式标签，在制作网页时会经常使用到。如何掌握这些标签使用，很简单，可以使用文本编辑器或类似w3cshool 在线可编辑预览的工具，亲手写一写，熟悉每个标签的用处，无需死记硬背，关键在于理解。

最后，感谢您的阅读及关注，祝你学习愉快。

上篇：前端入门——HTML的发展历史

下篇：前端入门——html 列表

相关推荐

如何用Java还原童年回忆?在线教你完成贪吃蛇小游戏

今天我就从零开始来完成这个小游戏，完成的方式也是一步一步的添加功能这样的方式来实现。额，不好意思，放错了，重来第一步完成的功能：写一个界面大家见到的贪吃蛇小游戏，界面肯定是少不了的。因此，第一步就是写...

金士顿Canvas Go!Plus microSD卡评测 4K影像轻松驾驭

【ZOL中关村在线原创评测】如今，视频已经成为社交媒体的主流内容传播形式，全民自媒体时代更是让昔日被视为高端、专业的视频拍摄，走进大众的生活。同时，无人机、运动相机等新世代影像设备也已经支持了4K视频...

国外顶尖教程大师教你设计一个炫酷游戏海报...

今天的教程很实用，我想对于做网页设计的童鞋肯定非常想学会用Photoshop的合成技巧来制作高端的游戏网站我们将用很多素材和照片来合成一个场景和一些页头和导航的制作。过程需要很长时间，素材也很多，我自...

Excel 制作贪吃蛇游戏，让你轻松摸鱼!

步骤1：准备工作表1.创建游戏区域：o在单元格区域（如B2:AK30）设置一个矩形区域，调整行高和列宽为正方形（如行高20像素，列宽3字符）。o设置背景色为深色（如黑色），作为游戏画布。2.初...

成长的画布，绘满童趣色彩

在万家丽热闹的脉动中，特步童装是一方柔软的画布，等待孩子们用欢笑与奔跑泼洒斑斓色彩。这里没有生硬的商业气息，每一件衣物都像会呼吸的精灵，悄悄诉说着关于童年的奇妙物语。漫步其中，仿佛踏入一座流动的童话森...

【教育高质量发展】施甸县示范小学:地面为画布 游戏“绘”出精彩童年

近日，施甸县示范小学积极践行“健康第一”教育理念，在寒假前夕，学校美术组教师联合部分师生完成了校园地面游戏彩绘工作。教师们以地面为画布，绘制跳格子、转盘、迷宫等游戏图案，为下学期师生15分钟课间做好了...

《国王的画布》Steam试玩发布 手绘风地图制作工具

HannesBreuer工作室制作并发行，一款手绘风地图制作工具游戏《国王的画布》Steam试玩发布，本作暂不支持中文。《国王的画布》游戏中玩家可以自定义交互式路径生成随机元素，易于调整改动。无需...

怪物收集RPG冒险游戏《妖之乡》7月16日正式发售

今日（6月18日），怪物收集RPG冒险游戏《妖之乡》更新发售日消息，该作将于7月16日发售，游戏试玩Demo现已正式上线，感兴趣的玩家可以进入商店页面。游戏介绍：《妖之乡》是一款东方奇幻的怪物收集R...

208元起，育碧第一人称动作冒险游戏《阿凡达:潘多拉边境》发售

IT之家6月18日消息，育碧旗下第一人称动作冒险游戏《阿凡达：潘多拉边境（Avatar：FrontiersofPandora）》已于今天登陆Steam平台（点此访问），目前本作正在平台...

甜蜜下潜藏的疯狂?和病娇美少女《米塔》在一起的冒险解谜游戏今日发售

由Aihasto开发制作，IndieArk发行的冒险解谜游戏《米塔》在今日上架Steam平台进行发售。售价人民币52元，首发-10%的折扣持续14天，折扣后仅需46.8元。该作同步支持日语和俄语配音...

十大必玩的合作单机游戏排行

合作模式一直是单机游戏中的重要元素，玩家可以和朋友一起组队、配合，共同完成游戏任务。在众多的合作单机游戏中，哪些才是最值得一试的呢？本文将为大家介绍十大必玩的合作单机游戏排行。这些游戏不仅拥有精彩刺激...

原版20周年献礼:《战争机器:重装上阵》游戏8月26日发行

IT之家5月6日消息，微软官方XboxWire博客昨日（5月5日）发布博文，官宣《战争机器：重装上阵》（GearsofWar:Reloaded）游戏，将于2025年8...

十款免费的战斗单机游戏推荐之网络版

这篇文章主要介绍了十款免费的战斗单机游戏，并对它们进行了排行。这些游戏涵盖了不同类型和风格，包括角色扮演、射击、策略等。每款游戏都有详细的介绍和评价，读者可以根据自己的喜好选择适合自己的游戏。对于喜欢...

十大必玩的合作单机游戏:打造完美团队

合作模式一直是单机游戏中的重要元素，玩家可以通过合作来共同完成游戏任务，增加游戏的趣味性和挑战性。在本文中，我们将为您介绍十大必玩的合作单机游戏。这些游戏不仅拥有精彩刺激的剧情和画面，还提供了多种合作...

十款好玩的战斗单机游戏:哪个更好玩

战斗单机游戏一直是玩家们的最爱，而好玩的战斗单机游戏更是备受期待。在众多的战斗单机游戏中，哪些更好玩呢？本文将为您介绍十款备受好评的战斗单机游戏，并进行详细比较分析。无论您是喜欢动作还是策略，都能在这...

一周热门
最近发表
标签列表