当前位置 : IT培训网 > Web前端 > Web教程 > 如何学习html文本格式化

如何学习html文本格式化

时间：2016-11-15 17:05:02  来源：web前端培训网  作者：IT培训网  已有：名学员访问该课程
标签(Tag):   如何学习html(2)html文本格式化(1)
Html文本格式化是对文字的修饰，一般情况下一个网页可能有多个文本效果，这个时候就会用到html文本格式化功能，如果你想要制作精美的网页，想要网页排版更加好看，赶紧学习这方面的课程吧！

Html可以定义出很多供格式输出的元素，比如字体加粗、斜体、放大、缩小等等，下面就让我们一起来看看如何使用这些html文本格式化功能吧！

HTML 文本格式化

加粗文本

斜体文本

电脑自动输出

这是 下标 和 上标

源代码：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>IT培训网(itpxw.cn)</title>

</head>

<body>

<b>加粗文本</b><br><br>

<i>斜体文本</i><br><br>

<code>电脑自动输出</code><br><br>

这是 <sub> 下标</sub> 和 <sup> 上标</sup>

</body>

</html>

运行结果：

加粗文本

斜体文本

电脑自动输出

这是 下标 和 上标

HTML 格式化标签

HTML 使用标签<b> 与<i> 对输出的文本进行格式, 如：粗体 or 斜体

这些HTML标签被称为格式化标签（请查看底部完整标签参考手册）。

Remark    通常标签 <strong> 替换加粗标签 <b> 来使用, <em> 替换 <i>标签使用。

然而，这些标签的含义是不同的：

<b> 与<i> 定义粗体或斜体文本。

<strong> 或者 <em>意味着你要呈现的文本是重要的，所以要突出显示。现今所有主要浏览器都能渲染各种效果的字体。不过，未来浏览器可能会支持更好的渲染效果。

 

HTML "计算机输出" 标签

标签

描述

<code>

定义计算机代码

<kbd>

定义键盘码

<samp>

定义计算机代码样本

<var>

定义变量

<pre>

定义预格式文本
 

HTML 文本格式化标签

标签

描述

<b>

定义粗体文本

<em>

定义着重文字

<i>

定义斜体字

<small>

定义小号字

<strong>

定义加重语气

<sub>

定义下标字

<sup>

定义上标字

<ins>

定义插入字

<del>

定义删除字
 

HTML 引文, 引用, 及标签定义

标签

描述

<abbr>

定义缩写

<address>

定义地址

<bdo>

定义文字方向

<blockquote>

定义长的引用

<q>

定义短的引用语

<cite>

定义引用、引证

<dfn>

定义一个定义项目。
在线实例

文本格式化

此例演示如何在一个 HTML 文件中对文本进行格式化

源代码：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>IT培训网(itpxw.cn)</title>

</head>

<body>

<b>这个文本是加粗的</b>

<br />

<strong>这个文本是加粗的</strong>

<br />

<big>这个文本字体放大</big>

<br />

<em>这个文本是斜体的</em>

<br />

<i>这个文本是斜体的</i>

<br />

<small>这个文本是缩小的</small>

<br />

这个文本包含

<sub>下标</sub>

<br />

这个文本包含

<sup>上标</sup>

</body>

</html>

运行结果：

这个文本是加粗的

这个文本是加粗的

这个文本字体放大

这个文本是斜体的

这个文本是斜体的

这个文本是缩小的

这个文本包含 下标

这个文本包含 上标

预格式文本

此例演示如何使用 pre 标签对空行和空格进行控制。

源代码：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>IT培训网(itpxw.cn)</title>

</head>

<body>

<pre>

此例演示如何使用 pre 标签

对空行和    空格

进行控制

</pre>

</body>

</html>

运行结果：

此例演示如何使用 pre 标签

对空行和    空格

进行控制

"计算机输出"标签

此例演示不同的"计算机输出"标签的显示效果。

源代码：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>IT培训网(itpxw.cn)</title>

</head>

<body>

<code>计算机输出</code>

<br />

<kbd>键盘输入</kbd>

<br />

<tt>打字机文本</tt>

<br />

<samp>计算机代码样本</samp>

<br />

<var>计算机变量</var>

<br />

<p>

<b>注释：</b>这些标签常用于显示计算机/编程代码。

</p>

</body>

</html>

运行结果：

计算机输出

键盘输入

打字机文本

计算机代码样本

计算机变量

注释：这些标签常用于显示计算机/编程代码。

地址

此例演示如何在 HTML 文件中写地址。

源代码：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>IT培训网(itpxw.cn)</title>

</head>

<body>

<address>

Written by <a href="mailto:cnitedu@itpxw.cn">Jon Doe</a>.<br>

Visit us at:<br>

Example.com<br>

Box 564, Disneyland<br>

USA

</address>

</body>

</html>

运行结果：

Written by Jon Doe.

Visit us at:

Example.com

Box 564, Disneyland

USA

缩写和首字母缩写

此例演示如何实现缩写或首字母缩写。

源代码：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>IT培训网(itpxw.cn)</title>

</head>

<body>

<abbr title="etcetera">etc.</abbr>

<br />

<acronym title="World Wide Web">WWW</acronym>

<p>在某些浏览器中，当您把鼠标移至缩略词语上时，title 可用于展示表达的完整版本。</p>

<p>仅对于 IE 5 中的 acronym 元素有效。</p>

<p>对于 Netscape 6.2 中的 abbr 和 acronym 元素都有效。</p>

</body>

</html>

运行结果：

etc.

WWW

在某些浏览器中，当您把鼠标移至缩略词语上时，title 可用于展示表达的完整版本。

仅对于 IE 5 中的 acronym 元素有效。

对于 Netscape 6.2 中的 abbr 和 acronym 元素都有效。

文字方向

此例演示如何改变文字的方向。

源代码：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>IT培训网(itpxw.cn)</title>

</head>

<body>

<p>该段落文字从左到右显示。</p> 

<p><bdo dir="rtl">该段落文字从右到左显示。</bdo></p> 

</body>

</html>

运行结果：

该段落文字从左到右显示。

该段落文字从右到左显示。

块引用

此例演示如何实现长短不一的引用语。

源代码：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>IT培训网(itpxw.cn)</title>

</head>

<body>

<p>WWF's goal is to:

<q>Build a future where people live in harmony with nature.</q>

We hope they succeed.</p>

</body>

</html>

运行结果：

WWF's goal is to: Build a future where people live in harmony with nature. We hope they succeed.

删除字效果和插入字效果

此例演示如何标记删除文本和插入文本。

源代码：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>IT培训网(itpxw.cn)</title>

</head>

<body>

<p>My favorite color is <del>blue</del> <ins>red</ins>!</p>

</body>

运行结果：

My favorite color is blue red!

Html文本格式化是对文字的修饰，一般情况下一个网页可能有多个文本效果，这个时候就会用到html文本格式化功能，如果你想要制作精美的网页，想要网页排版更加好看，赶紧学习这方面的课程吧！

顶一下
(0)
0%
踩一下
(1)
100%
------分隔线----------------------------
分享到：QQ空间新浪微博腾讯微博人人网微信
------分隔线----------------------------

大话IT

Web 教程
1、HTML 教程
1.1 HTML 简介
1.2 HTML 编辑器
1.3 HTML 基础
1.4 HTML 元素
1.5 HTML 属性
1.6 HTML 标题
1.7 HTML 段落
1.8 HTML 文本格式化
1.9 HTML 链接
1.10 HTML 头部
1.11 HTML CSS
1.12 HTML 图像
1.13 HTML 表格
1.14 HTML 列表
1.15 HTML 区块
1.16 HTML 布局
1.17 HTML 表单
1.18 HTML 框架
1.19 HTML 颜色
1.20 HTML 颜色名
1.21 HTML 颜色值
1.22 HTML 脚本
1.23 HTML 字符实体
1.24 HTML URL
1.25 HTML 速查列表
1.26 HTML 总结
1.27 HTML 简介
2、HTML5
2.1 HTML5 教程
2.2 HTML5 浏览器支持
2.3 HTML5 新元素
2.4 HTML5 Canvas
2.5 HTML5 内联 SVG
2.6 HTML5 MathML
2.7 HTML5 拖放
2.8 HTML5 地理定位
2.9 HTML5 Video(视频)
2.10 HTML5 Audio(音频)
2.11 HTML5 Input 类型
2.12 HTML5 表单元素
2.13 HTML5 表单属性
2.14 HTML5 语义元素
2.15 HTML5 Web 存储
2.16 HTML5 Web SQL
2.17 HTML5 应用程序缓存
2.18 HTML5 Web Workers
2.19 HTML5 SSE
2.20 HTML5 WebSocket
2.21 HTML5 代码规范
3、HTML 媒体
3.1 HTML 媒体(Media)
3.2 HTML 插件
3.3 HTML 音频(Audio)
3.4 HTML视频（Videos）播放