版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/JEYMING/article/details/80286215
<!--
格式化文本与段落
--文本格式化、段落格式化、整个页面排版格式化
---文本格式化:字体标记、文字修饰标记
---段落格式化:段落标记、换行标记、水平分割线标记
2018.01.03
-->
<html>
<head>
<meta charset="UTF-8" />
<title>格式化文本与段落</title>
</head>
<body>
<!--
3.1 Web页面初步设计
3.1.1 向Web页面添加文字信息
3.1.2 标题字标记
<h></h> 标记中h是Heading简称;
h后面数字越大字体越小;
align属性是定义标题字的对齐方式,分别是left、center、right、justify;左对齐、居中、右对齐、两端对齐
-->
<h1 align="center">Web前端开发技术</h1>
<h2 align="left">Web前端开发技术</h2>
<h3 align="center">Web前端开发技术</h3>
<h4 align="right">Web前端开发技术</h4>
<h5 align="justify">Web前端开发技术</h5>
<h6 align="center">Web前端开发技术</h6>
<!--
3.1.3 添加空格与特殊符号
显示结果 说明 符号代码
---------------------------------
显示空格
< 小于 <
> 大于 >
& &符号 &
" 双引号 "
© 版权符号 ©
? 注册商标 ®
* 乘号 ×
÷ 除号 ÷
-->
<p> 新浪科技讯 北京时间11月21日凌晨消息,台湾市场研究机构Digitimes Research周二发布报告称,预计2013年全年平板电脑销售量将会到2.1亿台,超过笔记本的年度销售量。</p>
<br />
<hr color="blue">
<p align="center">版权所有©新浪公司</p>
<!--
3.2 格式化文本标记
3.2.1 文本修饰标记
标记 说明
------------------------------------
<b></b> 定义粗体
<i></i> 定义斜体
<u></u> 定义下划线
<del></del> 定义删除线
<sup></sup> 定义上标
<sub></sub> 定义下标
<strong></strong> 定义着重文字(与<b></b>效果相同)
<em></em> 定义加重语气(与<i></i>效果相同)
<small></small> 变小字号
<big></big> 变大字号
3.2.2 计算机输出标记
标签 说明
------------------------------------
<code></code> 定义计算机代码
<kbd></kbd> 定义键盘码
<samp></samp> 定义计算机代码样本
<tt></tt> 定义打字机代码
<var></var> 定义变量
<pre></pre> 定义预格式文本
3.2.3 引用和术语标记
标记 说明
------------------------------------
<addr></addr> 定义缩写
<address></address> 定义地址
<blockquote></blockquote> 定义长的引用
<cite></cite> 定义引用、引证
<q></q> 定义短的引用语言
<dfn></dfn> 定义一个定义项目
3.2.4 字体Font标记
<font></font>
属性 值 说明
-------------------------------------
size +1-+7,1-7,-1--7 文本大小
color 文本颜色
face 文本字体
-->
<hr color="blue">
<h3 align="center">文本修饰标记应用</h3>
<hr size="2" color="red">
<center>
<comment>文本修饰标记应用</comment><br />
<b>我爱北京天安门!</b><br />
<i>北京天安门太阳升</i><br />
<u>啦啦啦啦啦啦啦</u><br />
<del>好好好!</del><br />
X<sup>2</sup>+2X+5=0<br>
X<sub>1</sub>=2<br>
<small>我爱北京天安门!</small><br />
<big>我爱北京天安门!</big><br />
<strong>我爱北京天安门!</strong><br />
<em>我爱北京天安门!</em><br />
</center>
<hr color="red">
<center>
<comment>计算机输出标记应用</comment>
<h5>计算机输出标记应用</h5>
<hr size="2" color="blue" />
<code>Computer code</code><br />
<kbd>Keyboard input</kbd><br />
<tt>Teletype text</tt><br />
<samp>Sample text</samp><br />
<var>Computer variable</var><br />
<p><b>注释:</b>这些标签用于显示计算机/编程代码.</p>
</center>
<hr color="red">
<center>
<comment>引用、术语标记应用</comment>
<h5>引用、术语标记应用</h5>
<hr color="blue" size="2">
这是缩写:The<abbr title="People 's Republic of China"> PRC </abbr>was founded in 1949.
<address>
地址:Witten by <a href="mailto:[email protected]">Donald Duck</a>.<br />
Visit us at:<br>
Example.com<br />
Box 564,Disneyland<br />
USA
</address>
<h4>这里是长的引用请注意,浏览器在blockquote元素前后添加了换行,并增加了外边距。:</h4>
<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>
<cite>引用、引证</cite>
<h4>请注意,浏览器在引用的周围插入了引号</h4>
<p>Here comes a short a short quotation:<q>This is a short quotation</q></p>
<dfn>定义项目</dfn>
</center>
<hr color="red">
<center>
<strong>文本样式为黑体,颜色#000fff,大小-1~-7</strong>
<font face="黑体" size="-1" color="#000fff">1字</font>
<font face="黑体" size="-2" color="#000fff">2字</font>
<font face="黑体" size="-3" color="#000fff">3字</font>
<font face="黑体" size="-4" color="#000fff">4字</font>
<font face="黑体" size="-5" color="#000fff">5字</font>
<font face="黑体" size="-6" color="#000fff">6字</font>
<font face="黑体" size="-7" color="#000fff">7字</font><br />
<strong>文本样式为宋体,颜色#ff0066,大小1~7</strong>
<font face="宋体" size="1" color="#ff0066">1字</font>
<font face="宋体" size="2" color="#ff0066">2字</font>
<font face="宋体" size="3" color="#ff0066">3字</font>
<font face="宋体" size="4" color="#ff0066">4字</font>
<font face="宋体" size="5" color="#ff0066">5字</font>
<font face="宋体" size="6" color="#ff0066">6字</font>
<font face="宋体" size="7" color="#ff0066">7字</font><br />
<strong>文本样式为隶书,颜色#ff0066,大小-1~-7</strong>
<font face="隶书" size="+1" color="#ff0066">1字</font>
<font face="隶书" size="+2" color="#ff0066">2字</font>
<font face="隶书" size="+3" color="#ff0066">3字</font>
<font face="隶书" size="+4" color="#ff0066">4字</font>
<font face="隶书" size="+5" color="#ff0066">5字</font>
<font face="隶书" size="+6" color="#ff0066">6字</font>
<font face="隶书" size="+7" color="#ff0066">7字</font><br />
</center>
</body>
</html>