详解HTML块级元素

迷茫
发布: 2017-03-25 12:16:00
原创
2130人浏览过

前面的话

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

h

  标题(Heading)元素有六个不同的级别,

是最高级的,而

则是最低的。一个标题元素能简要描述该节的主题

  从

,重要性逐渐减小,字体大小也逐渐减小。在使用标题元素时,要注意以下几点

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

  2、避免跳过某级标题:始终要从

开始,接下来使用

等等

立即学习前端免费学习笔记(深入)”;

  3、使用

元素时,为了方便起见,避免重复在一个页面上使用

应该用来表示页面的标题,其他的标题当从

开始。使用
时,应当每个 section都使用一个

【默认样式】

//从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>
    <h1>水果</h1>
    <h2>苹果</h2>
</hgroup>
登录后复制

p

  

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

【默认样式】

margin: 16px 0;
<p>段落1</p>
<p>段落2</p>
<p>段落3</p>
登录后复制

p

元素(pide)(或HTML文档分区元素)是一个通用型的流内容容器,它在语义上不代表任何特定类型的内容,它可以被用来对其它元素进行分组,一般用于样式化相关的需求(使用class或id特性)或者对具有相同特性的一组元素进行分组(比如lang),它应该在没有任何其它语义元素可用时才使用(比如

hr

  


元素表示段落级元素之间的主题转换(例如,一个故事中的场景的改变,或一个章节的主题的改变)。在HTML的早期版本中,它是一个水平线。现在它仍能在可视化浏览器中表现为水平线,但目前被定义为语义上的,而不是表现层面上

  


用于段落级元素之间的分割,区块之间不需要使用
进行分割
<p>段落1</p>
<hr>
<p>段落2</p>
登录后复制

【默认样式】

margin: 8px 0;
border-style: inset;
border-width: 1px;
登录后复制

pre

  

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

【默认样式】

margin: 1em 0;
white-space: pre;
登录后复制

blockquote

  

元素(或者HTML块级引用元素),代表其中的文字是引用内容。通常在渲染时,这部分的内容会有一定的缩进。若引文来源于网络,则可以将原内容的出处URL地址设置到cite特性上,若要以文本的形式告知读者引文的出处时,可以通过元素  [注意]引用的署名必须在引用外部定义 横眉冷对千夫指,俯首甘为孺子牛
    

鲁迅

【默认样式】

margin: 1em  40px;
登录后复制

address

  

元素可以让作者为它最近的
或者祖先元素提供联系信息。在后一种情况下,它应用于整个文档

  当表示一个和联系信息无关的任意的地址时,使用

元素而不是

元素。这个元素不能包含除了联系信息之外的任何信息,比如出版日期(这应该包含在time>元素中)。通常,
元素可以放在当前section的
元素中,如果存在的话

【默认样式】

font-style: italic;
登录后复制

其他

除了上面介绍的


标签外,还有一些前面已经介绍过的标签属于块级标签

  包括骨架类标签(、

),列表类标签(
    ),表单类标签(form、

以上就是详解HTML块级元素的详细内容,更多请关注php中文网其它相关文章!

HTML速学教程(入门课程)
HTML速学教程(入门课程)

HTML怎么学习?HTML怎么入门?HTML在哪学?HTML怎么学才快?不用担心,这里为大家提供了HTML速学教程(入门课程),有需要的小伙伴保存下载就能学习啦!

下载
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号