HTML5之常用块级标签简介

块级标签 ： 独占一行

---

标题标签h1

<!--标题标签默认是加大粗体的效果-->

<h1>1级标题 </h1>

...................

<h6>6级标题 </h6>

---

段落标签p

<!-- text-align:段落对齐 inherit:两端对齐 text-indent:首行缩进 em：字符-->

<!-- 在文本的开始处添加空格，没有任何效果-->

<!-- 在文本之间的多个空格或者回车换行，浏览器默认为是一个空格-->

<p style="text-align: inherit;text-indent: 2em">

百度 ，中文 搜索引擎 ，2000年1月创

立于 北京 中 关

村。

</p>

<p>段落标签</p>

<p>段落标签</p>

---

分隔线标签hr

<h1>1级标题</h1>

<hr>

---

换行标签br

<!-- 在文本间换行用换行标签br-->

姓名：<input type="text" ><br>

年龄：<input type="text" >

---

引用标签blockquote

< blockquote cite="www.baidu.com">

谦虚使人进步，骄傲使人落后！--毛泽东

</blockquote>

---

预格式标签pre

<!-- pre:保留文本的默认格式-->

<pre>

阿里巴巴

互联网

淘宝

服装

</pre>

---

组合标签figure

<!-- 用于图文混编-->

<figure>

<img src="../img/2.jpg" alt="图片加载出错">

<!-- 定义figure元素的标题 -->

< figcaption>

一只可爱的小猫。

</figcaption>

</figure>

---

分区标签div

<div style="height: 100px;background-color:red "></div>

<div style="height: 50px;background-color: yellow"> </div>

<div style="height: 300px;background-color: blue"></div>

---

列表标签

---

（1）有序列表ol

<!-- 有序列表OrderList-->

<ol>

<!-- ListItem-->

<li>填写信息</li>

<li>接收邮件</li>

<li>注册成功</li>

</ol>

---

（2）无序列表ul

<!-- 无序列表UnorderList-->

<ul>

<li>如何激活会员</li>

<li>如何注册会员</li>

<li>设置密码的要求</li>

<li>权限认证</li>

</ul>

---

（3）定义列表dl

<!-- 定义列表DefineList-->

<dl>

<!-- 定义列表的标题DefineListTitle-->

<dt>咖啡</dt>

<!-- 定义列表的描述DefineListDescription-->

<dd>

一种黑色的热饮料，原料据说是咖啡豆,非洲盛产这类原料

</dd>

<dd>简介</dd>

</dl>