HTML标签详解之格式标签

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

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

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

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

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

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

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

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

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

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

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

<pre>
if($type > 1){
echo "<h1>乐学PHP管理员</h1>";
}else{
echo "<h2>乐学PHP学员</h2>";
}
</pre>

注：

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

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

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

<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>，可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。

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

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

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

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

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

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

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

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

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

<dl>
<dt>HTML</dt>
<dd>HTML是超文本标记语言</dd>
<dt>CSS</dt>
<dd>CSS是层叠样式表</dd>
</dl>

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

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

<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>

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

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

<ol>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>

HTML标签详解之格式标签相关推荐

html常用标签详解4-列表标签
列表标签列表标签分为3大类:无序列表.有序列表.自定义列表.线面我会依依简单介绍一.无序列表有个type属性: 默认:disc:实心小圆点:circle:空心小圆点:square:实心小方块:n ...
web前端 --- HTML标签详解
HTML标签详解 head头标签: meta标签.title标签.link标签.style标签.script标签 body标签: 字体标签: h1~h6标签.font标签.u标签.b标签.strong ...
前端基础-HTML的的标签详解
阅读目录一.head内常用标签二. HTML语义化三. 字符实体四. h系列标签五. p标签六. img标签七. a标签八. 列表标签九. table标签十. form标签一. ...
W3C中meta标签详解
2019独角兽企业重金招聘Python工程师标准>>> meta是html语言head区的一个辅助性标签.几乎所有的网页里,我们可以看到类似下面这段的html代码: <meta ...
JSF标签详解（全）
转自:https://wenku.baidu.com/view/82b84b255901020207409c87.html :https://blog.csdn.net/qq_36411874/art ...
SEO技巧：Meta标签详解
网页设计:Meta标签详解您的个人网站即使做得再精彩,在"浩瀚如海"的网络空间中,也如一叶扁舟不易为人发现,如何推广个人网站,人们首先想到的方法无外乎以下几种: ●在搜索引擎中 ...
网页设计：Meta标签详解
网页设计:Meta标签详解很多人忽视了HTML标签META的强大功效,一个好的META标签设计可以大大提高你的个人网站被搜索到的可能性,有兴趣吗,谁我来重新认识一下META标签吧! META标签是H ...
meta标签详解(meta标签的作用)///////////////////////////转
meta标签详解(meta标签的作用) 很多人却忽视了HTML标签META的强大功效,一个好的META标签设计可以大大提高你的个人网站被搜索到的可能性,有兴趣吗,谁我来重新认识一下META标签吧您的 ...
html中的mata标签详解
总是有很多朋友问我<meta name="author" content"xxxxx"><meta http-equiv="xx&q ...

HTML标签详解之格式标签

HTML标签详解之格式标签相关推荐

最新文章

热门文章