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智研社是一个专注于人工智能领域的综合性平台

下载

段落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

      热门AI工具

      更多
      DeepSeek
      DeepSeek

      幻方量化公司旗下的开源大模型平台

      豆包大模型
      豆包大模型

      字节跳动自主研发的一系列大型语言模型

      通义千问
      通义千问

      阿里巴巴推出的全能AI助手

      腾讯元宝
      腾讯元宝

      腾讯混元平台推出的AI助手

      文心一言
      文心一言

      文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

      讯飞写作
      讯飞写作

      基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

      即梦AI
      即梦AI

      一站式AI创作平台,免费AI图片和视频生成。

      ChatGPT
      ChatGPT

      最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

      相关专题

      更多
      C++ 设计模式与软件架构
      C++ 设计模式与软件架构

      本专题深入讲解 C++ 中的常见设计模式与架构优化,包括单例模式、工厂模式、观察者模式、策略模式、命令模式等,结合实际案例展示如何在 C++ 项目中应用这些模式提升代码可维护性与扩展性。通过案例分析,帮助开发者掌握 如何运用设计模式构建高质量的软件架构,提升系统的灵活性与可扩展性。

      14

      2026.01.30

      c++ 字符串格式化
      c++ 字符串格式化

      本专题整合了c++字符串格式化用法、输出技巧、实践等等内容,阅读专题下面的文章了解更多详细内容。

      9

      2026.01.30

      java 字符串格式化
      java 字符串格式化

      本专题整合了java如何进行字符串格式化相关教程、使用解析、方法详解等等内容。阅读专题下面的文章了解更多详细教程。

      12

      2026.01.30

      python 字符串格式化
      python 字符串格式化

      本专题整合了python字符串格式化教程、实践、方法、进阶等等相关内容,阅读专题下面的文章了解更多详细操作。

      4

      2026.01.30

      java入门学习合集
      java入门学习合集

      本专题整合了java入门学习指南、初学者项目实战、入门到精通等等内容,阅读专题下面的文章了解更多详细学习方法。

      20

      2026.01.29

      java配置环境变量教程合集
      java配置环境变量教程合集

      本专题整合了java配置环境变量设置、步骤、安装jdk、避免冲突等等相关内容,阅读专题下面的文章了解更多详细操作。

      18

      2026.01.29

      java成品学习网站推荐大全
      java成品学习网站推荐大全

      本专题整合了java成品网站、在线成品网站源码、源码入口等等相关内容,阅读专题下面的文章了解更多详细推荐内容。

      19

      2026.01.29

      Java字符串处理使用教程合集
      Java字符串处理使用教程合集

      本专题整合了Java字符串截取、处理、使用、实战等等教程内容,阅读专题下面的文章了解详细操作教程。

      3

      2026.01.29

      Java空对象相关教程合集
      Java空对象相关教程合集

      本专题整合了Java空对象相关教程,阅读专题下面的文章了解更多详细内容。

      6

      2026.01.29

      热门下载

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

      精品课程

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

      共754课时 | 25.3万人学习

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

      共56课时 | 17.2万人学习

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

      共23课时 | 6.7万人学习

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

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