第4章 文字布局
4.1换行控制
<p>也可以单独使用，语法代码如下：
文字一<p>文字二
其中，意思是文字一后面有一对<p></p>,简写<p>
实例：
<html>
<head>
<title><p>的用法</title>
</head>
<p>也可以单独使用，语法代码如下：
文字一<p>文字二
其中，意思是文字一后面有一对<p></p>,简写<p>
实例：
<html>
<head>
<title><p>的用法</title>
</head>
<body>
<!--下面表示文本中加入标记<p>-->
文字一<p>文字二
</body>
</html>
与<br>强制换行比较，<p>使文本到此处中断本行，再起新的段落，效果如上
<br>实例：
<html>
<head>
<title><br>的用法</title>
</head>
<!--下面表示文本中加入标记<p>-->
文字一<p>文字二
</body>
</html>
与<br>强制换行比较，<p>使文本到此处中断本行，再起新的段落，效果如上
<br>实例：
<html>
<head>
<title><br>的用法</title>
</head>
<body>
<!--下面表示文本中加入标记<br>-->
文字一
<br>
<br>
<br>
文字二
</body>
</html>
4.1.2不换行探制
不换行控制的语法：
<nobr></nobr>
只要在标记里面的，不管有多长，都在一行里，在状态栏上会出现左右移动的框，说
明在<nobr></nobr>标记里显示超过了正常宽度。
<html>
<head>
<title>不换行用法</title>
</head>
<!--下面表示文本中加入标记<br>-->
文字一
<br>
<br>
<br>
文字二
</body>
</html>
4.1.2不换行探制
不换行控制的语法：
<nobr></nobr>
只要在标记里面的，不管有多长，都在一行里，在状态栏上会出现左右移动的框，说
明在<nobr></nobr>标记里显示超过了正常宽度。
<html>
<head>
<title>不换行用法</title>
</head>
<body>
<!--下面表示不换行符-->
<nobr>
<!--下面一行表示文本被包围在不换行标记中-->
HTML+CSS完成自学手册HTML+CSS完成自学手册
HTML+CSS完成自学手册HTML+CSS完成自学手册
HTML+CSS完成自学手册HTML+CSS完成自学手册
HTML+CSS完成自学手册HTML+CSS完成自学手册
HTML+CSS完成自学手册HTML+CSS完成自学手册
HTML+CSS完成自学手册HTML+CSS完成自学手册
HTML+CSS完成自学手册HTML+CSS完成自学手册
</nobr>
</body>
</html>
<!--下面表示不换行符-->
<nobr>
<!--下面一行表示文本被包围在不换行标记中-->
HTML+CSS完成自学手册HTML+CSS完成自学手册
HTML+CSS完成自学手册HTML+CSS完成自学手册
HTML+CSS完成自学手册HTML+CSS完成自学手册
HTML+CSS完成自学手册HTML+CSS完成自学手册
HTML+CSS完成自学手册HTML+CSS完成自学手册
HTML+CSS完成自学手册HTML+CSS完成自学手册
HTML+CSS完成自学手册HTML+CSS完成自学手册
</nobr>
</body>
</html>
4.2文字对齐
<p>标记，<table>标记都会用到，对齐的语法如下：
align="#"
其中，#代码表示方位，可选择的有：left向左、right向右、center居中。
实例：
<html>
<head>
<title>文字对齐</title>
</head>
<head>
<title>文字对齐</title>
</head>
<body>
<!--下面一行表示文本被包围在不换行标记中-->
<p align="right">
HTML+CSS完成自学手册HTML+CSS完成自学手册
</p>
<p align="left">
HTML+CSS完成自学手册HTML+CSS完成自学手册
</p>
<p align="center">
HTML+CSS完成自学手册HTML+CSS完成自学手册
</p>
<p align="justify">
HTML+CSS完成自学手册HTML+CSS完成自学手册
</p>
</body>
</html>
<!--下面一行表示文本被包围在不换行标记中-->
<p align="right">
HTML+CSS完成自学手册HTML+CSS完成自学手册
</p>
<p align="left">
HTML+CSS完成自学手册HTML+CSS完成自学手册
</p>
<p align="center">
HTML+CSS完成自学手册HTML+CSS完成自学手册
</p>
<p align="justify">
HTML+CSS完成自学手册HTML+CSS完成自学手册
</p>
</body>
</html>
4.3段落设置
<html>
<head>
<title>文字对齐</title>
</head>
<head>
<title>文字对齐</title>
</head>
<body>
<!--下面一行表示文本被包围在不换行标记中-->
<p align="right">
<font color="red">
段落一：HTML+CSS完成自学手册
</font>
</p>
<p align="left">
<b>
HTML+CSS完成自学手册
</b>
</p>
<p align="center">
<s>
HTML+CSS完成自学手册
</s>
</p>
<p align="justify">
<h1>
HTML+CSS完成自学手册
</h1>
</p>
</body>
</html>
<!--下面一行表示文本被包围在不换行标记中-->
<p align="right">
<font color="red">
段落一：HTML+CSS完成自学手册
</font>
</p>
<p align="left">
<b>
HTML+CSS完成自学手册
</b>
</p>
<p align="center">
<s>
HTML+CSS完成自学手册
</s>
</p>
<p align="justify">
<h1>
HTML+CSS完成自学手册
</h1>
</p>
</body>
</html>
4.4列表
列表分为：有序列表和无序列表
4.4.1无序列表
无序列表的语法分两部分：
<!--下面一行无序列表-->
<ul>
<li>表项一</li>
<li>表项二</li>
<li>表项二</li>
</ul>
其，<ul>决定次序，<li>只是里面的表项
无序列表的语法分两部分：
<!--下面一行无序列表-->
<ul>
<li>表项一</li>
<li>表项二</li>
<li>表项二</li>
</ul>
其，<ul>决定次序，<li>只是里面的表项
实例：
<html>
<head>
<title>无序列表</title>
</head>
<html>
<head>
<title>无序列表</title>
</head>
<body>
<!--下面表示无序列表-->
<ul>
<!--下面表示无序列表项-->
<li>HTML+CSS完成自学手册</li>
<li>HTML+CSS完成自学手册</li>
<li>HTML+CSS完成自学手册</li>
<li>HTML+CSS完成自学手册</li>
<li>HTML+CSS完成自学手册</li>
</ul>
</body>
</html>
<!--下面表示无序列表-->
<ul>
<!--下面表示无序列表项-->
<li>HTML+CSS完成自学手册</li>
<li>HTML+CSS完成自学手册</li>
<li>HTML+CSS完成自学手册</li>
<li>HTML+CSS完成自学手册</li>
<li>HTML+CSS完成自学手册</li>
</ul>
</body>
</html>
4.4.2有序列表
语法代码如下：
<ol>
<li>表项一</li>
<li>表项二</li>
<li>表项三</li>
<li>表项四</li>
</ol>
实例：
<html>
<head>
<title>有序列表</title>
</head>
语法代码如下：
<ol>
<li>表项一</li>
<li>表项二</li>
<li>表项三</li>
<li>表项四</li>
</ol>
实例：
<html>
<head>
<title>有序列表</title>
</head>
<body>
<!--下面表示有序列表-->
<ol>
<!--下面表示有序列表项-->
<li>HTML+CSS完成自学手册</li>
<li>HTML+CSS完成自学手册</li>
<li>HTML+CSS完成自学手册</li>
<li>HTML+CSS完成自学手册</li>
<li>HTML+CSS完成自学手册</li>
</ol>
</body>
</html>
<!--下面表示有序列表-->
<ol>
<!--下面表示有序列表项-->
<li>HTML+CSS完成自学手册</li>
<li>HTML+CSS完成自学手册</li>
<li>HTML+CSS完成自学手册</li>
<li>HTML+CSS完成自学手册</li>
<li>HTML+CSS完成自学手册</li>
</ol>
</body>
</html>
4.5其它方式修饰文本
4.5.1欲格式化文本
欲格式化文本在网面中输出的是在化码中的样式，因为代码没有
欲格式化文本的话，是会去掉里面的空格
其语法如下：
<!--下面一行表示欲格式化标记对-->
<pre>
文字
</pre>
实例：
<html>
<head>
<title>欲格式化文本</title>
</head>
4.5.1欲格式化文本
欲格式化文本在网面中输出的是在化码中的样式，因为代码没有
欲格式化文本的话，是会去掉里面的空格
其语法如下：
<!--下面一行表示欲格式化标记对-->
<pre>
文字
</pre>
实例：
<html>
<head>
<title>欲格式化文本</title>
</head>
<body>
<!--下面表示欲格式化文本-->
<pre>
HTML+CSS完成自学手册 HTML+CSS完成自学手册 HTML+CSS完成自学手册
HTML+CSS完成自学手册 HTML+CSS完成自学手册 HTML+CSS完成自学手册
</pre>
</body>
</html>
<!--下面表示欲格式化文本-->
<pre>
HTML+CSS完成自学手册 HTML+CSS完成自学手册 HTML+CSS完成自学手册
HTML+CSS完成自学手册 HTML+CSS完成自学手册 HTML+CSS完成自学手册
</pre>
</body>
</html>
另外一个与pre的效果很相似，语法形式也是双标记，
语法代码如下：
<xmp>
文本
</xmp>
区别：xmp与pre的重要区别是前者对HTML代码看作是文本，而后者会解释HTML代码。
<html>
<head>
<title>欲格式化文本</title>
</head>
<body>
<!--下面表示pre与xmp的用法比较-->
<pre>
<ol>
<li>HTML+CSS完成自学手册 HTML+CSS完成自学手册</li>
<br>
<li>HTML+CSS完成自学手册 HTML+CSS完成自学手册</li>
</ol>
</pre>
<xmp>
<ol>
<li>HTML+CSS完成自学手册 HTML+CSS完成自学手册</li>
<br>
<li>HTML+CSS完成自学手册 HTML+CSS完成自学手册</li>
</ol>
</xmp>
</body>
</html>
<!--下面表示pre与xmp的用法比较-->
<pre>
<ol>
<li>HTML+CSS完成自学手册 HTML+CSS完成自学手册</li>
<br>
<li>HTML+CSS完成自学手册 HTML+CSS完成自学手册</li>
</ol>
</pre>
<xmp>
<ol>
<li>HTML+CSS完成自学手册 HTML+CSS完成自学手册</li>
<br>
<li>HTML+CSS完成自学手册 HTML+CSS完成自学手册</li>
</ol>
</xmp>
</body>
</html>
4.5.2计算机输出格式
语法代码：
<!-下面表示计算机输出格式标记对-->
<code>
代码样式小型固定度字体显示的文本
</code>
<kbd>
代码样式固定宽度字体渲染
</kbd>
<tt>
代码样式固定宽度字体渲染文本
</tt>
<var>
代码样式斜体字渲染
</var>