详解HTML块级元素-html教程-PHP中文网

详解HTML块级元素

迷茫

发布： 2017-03-25 12:16:00

原创

2223人浏览过

前面的话

在html5出现之前，人们一般把元素分为块级、内联和内联块元素。本文将详细介绍html块级元素

h

标题(Heading)元素有六个不同的级别，<h1></h1>是最高级的，而<h6></h6>则是最低的。一个标题元素能简要描述该节的主题

从<h1></h1>到<h6></h6>，重要性逐渐减小，字体大小也逐渐减小。在使用标题元素时，要注意以下几点

1、不要为了减小标题的字体而使用低级别的标题，而是使用CSS的font-size样式

2、避免跳过某级标题：始终要从<h1></h1>开始，接下来使用<h2></h2> 等等

立即学习“前端免费学习笔记（深入）”；

3、使用<section></section> 元素时，为了方便起见，避免重复在一个页面上使用<h1></h1>，<h1></h1>应该用来表示页面的标题，其他的标题当从<h2></h2>开始。使用<section></section>时，应当每个 section都使用一个<h2></h2>

【默认样式】

//从h1到h6
margin: 0.67em 0 -> 0.83em 0 -> 1em 0 -> 1.33em 0 -> 1.67em 0 -> 2.33em 0;
font-size: 2em -> 1.5em -> 1.17em -> 1em -> 0.83em -> 0.67em;
font-weight: bold;

登录后复制

HTML5新增了<hgroup></hgroup>标签，它表示标题组，用于组合标题，只在区块需要有多个级别的标题时使用　

<hgroup>
    <h1>水果</h1>
    <h2>苹果</h2>
</hgroup>

登录后复制

p

<p></p>元素(paragraph)表示文本的一个段落，该元素通常表现为一整块与相邻文本分离的文本，或以垂直的空白隔离或以首行缩进

【默认样式】

margin: 16px 0;
<p>段落1</p>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/xiazai/code/9441">
                            <img src="https://img.php.cn/upload/webcode/000/000/016/175897620547705.jpg" alt="微信小程序公众号SaaS管理系统">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/xiazai/code/9441">微信小程序公众号SaaS管理系统</a>
                            <p>微信小程序公众号SaaS管理系统是一款完全开源的微信第三方管理系统，为中小企业提供最佳的小程序集中管理解决方案。可实现小程序的快速免审核注册（免300元审核费），可批量发布小程序模板，同步升级版本等功能。基础版本提供商城和扫码点餐两种小程序模板。商户端可以实现小程序页面模块化设计和自动生成小程序源代码并直接发布。</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="微信小程序公众号SaaS管理系统">
                                <span>0</span>
                            </div>
                        </div>
                        <a href="/xiazai/code/9441" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="微信小程序公众号SaaS管理系统">
                        </a>
                    </div>
                
<p>段落2</p>
<p>段落3</p>

登录后复制

p

<p></p>元素(pide)(或HTML文档分区元素)是一个通用型的流内容容器，它在语义上不代表任何特定类型的内容，它可以被用来对其它元素进行分组，一般用于样式化相关的需求(使用class或id特性)或者对具有相同特性的一组元素进行分组(比如lang)，它应该在没有任何其它语义元素可用时才使用(比如<article></article>元素中)。通常，<address></address>元素可以放在当前section的<footer></footer>元素中，如果存在的话

【默认样式】

<p>段落1</p>
<hr>
<p>段落2</p>

登录后复制

其他

除了上面介绍的<p></p>、<h></h>、<p></p>、<hr>、<blockquote></blockquote>、<address></address>标签外，还有一些前面已经介绍过的标签属于块级标签

包括骨架类标签(、)，列表类标签(<ul></ul>、<ol></ol>、<dl></dl>、<dd></dd>、<dt></dt>)，表单类标签(form、<fieldset></fieldset>、<output></output>、<legend></legend>、<optgroup></optgroup>、<option></option>)，HTML5新增的结构标签(<article></article>、<aside></aside>、<header></header>、<footer></footer>、<nav></nav>、<section></section>)，HTML5新增的多媒体标签(<figure></figure>、<figcaption></figcaption>)，HTML5新增的功能性标签(<summary></summary>、<details></details>)

最后

可能有人会觉得<br>标签应该是一个块级元素，因为它有换行，与块级元素的特征很相似。但它实际上是一个内联元素，它的用途是在文本中产生一个换行

margin: 8px 0;
border-style: inset;
border-width: 1px;

登录后复制

</code>元素表示预定义格式文本。在该元素中的文本通常按照原文件中的编排，以等宽字体的形式展现出来，文本中的空白符(比如空格和换行符)都会显示出来，通常表示已排版的内容，如代码块和字符画等</p><pre class="brush:css;toolbar:false;"><pre class="brush:php;toolbar:false;">
body {
  color:red;
}

登录后复制