HTML标签详解之格式标签

本次的HTML教程是学习HTML格式标签，其中包括段落、区块和列表的HTML标签。

1、段落标签：<p>，用来定义文章中的段落，HTML会自动为段落前后添加一个额外空行，做为段落间距。

折叠 XML/HTMLCode 复制内容到剪贴板

1. <p>关于我们</p>  
2. <p>乐学PHP学院(www.17joys.com)是国内专业的PHP培训机构</p>  

 

2、换行标签：<br>，当你打算结束一行，又不想开始一个新的段落时，<br>换行标签就派上用场了，无论你把它放在任何地方，<br>都会产生一个强制的换行。

折叠 XML/HTMLCode 复制内容到剪贴板

1. <p>乐学PHP学院<br />天津最好的PHP培训学校</p>  

 

注：<br>标签是空白标签，由于关闭标签没有任何意义，因此它没有类似 </br>的终止标签。

那是<br>还是<br/>，由于 <br>没有结束标签，它也就违反了未来的 HTML 的规则之一，即所有的元素都必须关闭。把这个标签写为 <br/> 是经得起未来考验的做法，XHTML 和 XML 都接受在打开的标签内部来关闭标签的做法。

3、预格式化标签：<pre>，可以定义预格式化的文本，被包围在pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。

折叠 XML/HTMLCode 复制内容到剪贴板

1. <pre>  
2. if($type > 1){  
3.   echo "<h1>乐学PHP管理员</h1>";  
4. }else{   
5.   echo "<h2>乐学PHP学员</h2>";  
6. }   
7. </pre>  

 

注：

<pre> 标签的一个常见应用就是用来表示计算机的源代码。

4、分组标签：<fieldset>，标签将包含的内容打包，生成一组相关的字段，可以结合<legend>标签使用。

折叠 XML/HTMLCode 复制内容到剪贴板

1. <form>  
2.   <fieldset>  
3.     <legend>基本信息</legend>  
4.     姓名: <input type="text" />  
5.     年龄: <input type="text" />  
6.   </fieldset>  
7. </form>  
8.   
9. <form>  
10.   <fieldset>  
11.     <legend>登录框</legend>  
12.     <blockquote>  
13.     用户名: <input type="text" />  
14.     密  码: <input type="password" />  
15.     <input type="submit" value="登录" />  
16.     </blockquote>  
17.   </fieldset>  
18. </form>  

 

注：当一组元素放到 <fieldset>标签内时，浏览器会以特殊方式来显示它们，它们可能有特殊的边界、3D 效果，或者甚至可创建一个子表单来处理这些元素。

5、分区标签：<div>，可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。

折叠 XML/HTMLCode 复制内容到剪贴板

1. <div style="color:#00FF00">  
2.   <h3>乐学PHP学院</h3>  
3.   <p>天津最好的PHP培训学校</p>  
4. </div>  

 

注：<div>是一个块级元素。这意味着它的内容自动地开始一个新行。实际上，换行是<div> 固有的唯一格式表现。可以通过<div> 的 class 或 id 应用额外的样式。

6、组合行内标签：<span>，用来组合文档中的行内元素。

折叠 XML/HTMLCode 复制内容到剪贴板

1. <p><span>乐学PHP学院</span>是天津最好的PHP学校</p>  
2.   
3. <p><span style="color:#FF0000;">乐学PHP学院</span>是天津最好的PHP学校</p>  

 

注：<span>没有固定的格式表现。当对它应用样式时，它才会产生视觉上的变化。

7、列表标签：<dl>标签定义了定义列表，结合<dt><dd>标签使用

折叠 XML/HTMLCode 复制内容到剪贴板

1. <dl>  
2.    <dt>HTML</dt>  
3.    <dd>HTML是超文本标记语言</dd>  
4.    <dt>CSS</dt>  
5.    <dd>CSS是层叠样式表</dd>  
6. </dl>  

 

8、无序列表：<ul>标签定义无序列表，结合<li>标签使用

折叠 XML/HTMLCode 复制内容到剪贴板

1. <ul>  
2.   <li>HTML</li>  
3.   <li>CSS</li>  
4.   <li>JavaScript</li>  
5. </ul>  

 

9、有序列表：<ol>标签定义有序列表，结合<li>标签使用

折叠 XML/HTMLCode 复制内容到剪贴板

1. <ol>  
2.   <li>HTML</li>  
3.   <li>CSS</li>  
4.   <li>JavaScript</li>  
5. </ol>