0

0

HTML块级元素的详细说明

高洛峰

高洛峰

发布时间:2017-03-15 12:48:54

|

2175人浏览过

|

来源于php中文网

原创

前面的话

  在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新增

标签,它表示标题组,用于组合标题,只在区块需要有多个级别的标题时使用 

水果

苹果

 

p

  

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

【默认样式】

margin: 16px 0;

段落1

段落2

段落3

 

p

  

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

 

hr

  


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

  


用于段落级元素之间的分割,区块之间不需要使用
进行分割

医真AI+开放平台
医真AI+开放平台

医真AI+ 医学AI开放平台

下载

段落1


段落2

【默认样式】

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

 

pre

  

元素表示预定义格式文本。在该元素中的文本通常按照原文件中的编排,以等宽字体的形式展现出来,文本中的空白符(比如空格和换行符)都会显示出来,通常表示已排版的内容,如代码块和字符画等

body {
  color:red;
}

【默认样式】

margin: 1em 0;
white-space: pre;

 

blockquote

  

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

鲁迅

【默认样式】

margin: 1em  40px;

 

address

  

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

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

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

【默认样式】

font-style: italic;

 

其他

  除了上面介绍的


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

  包括骨架类标签(),列表类标签(

      dl>
      ),表单类标签(form
      ),HTML5新增的结构标签(
      ),HTML5新增的多媒体标签(
      ),HTML5新增的功能性标签(
      )

       

      最后

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

      相关文章

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

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

      下载

      本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

      相关专题

      更多
      高德地图升级方法汇总
      高德地图升级方法汇总

      本专题整合了高德地图升级相关教程,阅读专题下面的文章了解更多详细内容。

      4

      2026.01.16

      全民K歌得高分教程大全
      全民K歌得高分教程大全

      本专题整合了全民K歌得高分技巧汇总,阅读专题下面的文章了解更多详细内容。

      3

      2026.01.16

      C++ 单元测试与代码质量保障
      C++ 单元测试与代码质量保障

      本专题系统讲解 C++ 在单元测试与代码质量保障方面的实战方法,包括测试驱动开发理念、Google Test/Google Mock 的使用、测试用例设计、边界条件验证、持续集成中的自动化测试流程,以及常见代码质量问题的发现与修复。通过工程化示例,帮助开发者建立 可测试、可维护、高质量的 C++ 项目体系。

      10

      2026.01.16

      java数据库连接教程大全
      java数据库连接教程大全

      本专题整合了java数据库连接相关教程,阅读专题下面的文章了解更多详细内容。

      33

      2026.01.15

      Java音频处理教程汇总
      Java音频处理教程汇总

      本专题整合了java音频处理教程大全,阅读专题下面的文章了解更多详细内容。

      15

      2026.01.15

      windows查看wifi密码教程大全
      windows查看wifi密码教程大全

      本专题整合了windows查看wifi密码教程大全,阅读专题下面的文章了解更多详细内容。

      42

      2026.01.15

      浏览器缓存清理方法汇总
      浏览器缓存清理方法汇总

      本专题整合了浏览器缓存清理教程汇总,阅读专题下面的文章了解更多详细内容。

      7

      2026.01.15

      ps图片相关教程汇总
      ps图片相关教程汇总

      本专题整合了ps图片设置相关教程合集,阅读专题下面的文章了解更多详细内容。

      9

      2026.01.15

      ppt一键生成相关合集
      ppt一键生成相关合集

      本专题整合了ppt一键生成相关教程汇总,阅读专题下面的的文章了解更多详细内容。

      6

      2026.01.15

      热门下载

      更多
      网站特效
      /
      网站源码
      /
      网站素材
      /
      前端模板

      精品课程

      更多
      相关推荐
      /
      热门推荐
      /
      最新课程
      CSS教程
      CSS教程

      共754课时 | 19.7万人学习

      CSS3-瞬间提升网页逼格的利器
      CSS3-瞬间提升网页逼格的利器

      共56课时 | 17.1万人学习

      HTML5-网页结构就靠你了
      HTML5-网页结构就靠你了

      共23课时 | 6.6万人学习

      关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
      php中文网:公益在线php培训,帮助PHP学习者快速成长!
      关注服务号 技术交流群
      PHP中文网订阅号
      每天精选资源文章推送

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