本篇紧张针对初学者的一篇教程，如果你非常熟习html，可以忽略本篇文章。
目录标题笔墨笔墨格式标签段落标签其它标签标题笔墨在网上浏览时常常看到一些标题笔墨，用来对应章节划分，它们以固定的字号显示，统共有6种级别的标题，从 h1 至 h6 依次减小，如下图：
html 代码：
<!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 属性，分别有三个属性：
left —— 左对齐center —— 居中对齐right —— 右对齐如下图：
html代码：
<!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 inext 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 列表
