本次的HTML教程是学习HTML格式标签,其中包括段落、区块和列表的HTML标签。
1、段落标签:<p>,用来定义文章中的段落,HTML会自动为段落前后添加一个额外空行,做为段落间距。
- <p>关于我们</p>
- <p>乐学PHP学院(www.17joys.com)是国内专业的PHP培训机构</p>
2、换行标签:<br>,当你打算结束一行,又不想开始一个新的段落时,<br>换行标签就派上用场了,无论你把它放在任何地方,<br>都会产生一个强制的换行。
- <p>乐学PHP学院<br
/>天津最好的PHP培训学校</p>
注:<br>标签是空白标签,由于关闭标签没有任何意义,因此它没有类似 </br>的终止标签。
那是<br>还是<br/>,由于 <br>没有结束标签,它也就违反了未来的 HTML 的规则之一,即所有的元素都必须关闭。把这个标签写为 <br/> 是经得起未来考验的做法,XHTML 和 XML 都接受在打开的标签内部来关闭标签的做法。
3、预格式化标签:<pre>,可以定义预格式化的文本,被包围在pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。
- <pre>
- if($type
> 1){ -
echo "<h1>乐学PHP管理员</h1>"; - }else{
-
echo "<h2>乐学PHP学员</h2>"; - }
- </pre>
注:
<pre> 标签的一个常见应用就是用来表示计算机的源代码。
4、分组标签:<fieldset>,标签将包含的内容打包,生成一组相关的字段,可以结合<legend>标签使用。
- <form>
-
<fieldset> -
<legend>基本信息</legend> -
姓名: <input type="text" /> -
年龄: <input type="text" /> -
</fieldset> - </form>
-
- <form>
-
<fieldset> -
<legend>登录框</legend> -
<blockquote> -
用户名: <input type="text" /> -
密 码: <input type="password" /> -
<input type="submit" value="登录" /> -
</blockquote> -
</fieldset> - </form>
注:当一组元素放到 <fieldset>标签内时,浏览器会以特殊方式来显示它们,它们可能有特殊的边界、3D 效果,或者甚至可创建一个子表单来处理这些元素。
5、分区标签:<div>,可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具,并且不使用任何格式与其关联。
- <div
style="color:#00FF00"> -
<h3>乐学PHP学院</h3> -
<p>天津最好的PHP培训学校</p> - </div>
注:<div>是一个块级元素。这意味着它的内容自动地开始一个新行。实际上,换行是<div> 固有的唯一格式表现。可以通过<div> 的 class 或 id 应用额外的样式。
6、组合行内标签:<span>,用来组合文档中的行内元素。
- <p><span>乐学PHP学院</span>是天津最好的PHP学校</p>
-
- <p><span
style="color:#FF0000;">乐学PHP学院</span>是天津最好的PHP学校</p>
注:<span>没有固定的格式表现。当对它应用样式时,它才会产生视觉上的变化。
7、列表标签:<dl>标签定义了定义列表,结合<dt><dd>标签使用
- <dl>
-
<dt>HTML</dt> -
<dd>HTML是超文本标记语言</dd> -
<dt>CSS</dt> -
<dd>CSS是层叠样式表</dd> - </dl>
8、无序列表:<ul>标签定义无序列表,结合<li>标签使用
- <ul>
-
<li>HTML</li> -
<li>CSS</li> -
<li>JavaScript</li> - </ul>
9、有序列表:<ol>标签定义有序列表,结合<li>标签使用
- <ol>
-
<li>HTML</li> -
<li>CSS</li> -
<li>JavaScript</li> - </ol>