HTML块元素详解-优快云博客

本文链接：https://blog.youkuaiyun.com/ROMdayfish/article/details/109327596

本文详细介绍了HTML中的各类块元素，包括标题、段落、预格式化文本、水平线、通用块元素div，以及HTML5新增的语义块元素如header、nav、article等。同时还讲解了列表元素的使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

4.块元素

块元素：无论宽度大小，始终会占据页面中它高度范围内的那一整行空间，不会与其他元素共享。同时你可以任意控制块元素的宽高度，内填充等。常见的块元素有div，p，ul，li，h1~h6系列标签等。

2.4.1 标题块元素
为了使网页更具有语义化，经常会在页面中用到标题标记，HTML提供了6个等级的标题，即<h1>、<h2>、<h3>、<h4>、<h5>和<h6>，从<h1>到<h6>重要性递减。其基本语法格式如下：

<hn align="对齐方式">标题文本</hn>

例如：

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>标题标记</title>
 </head>
 <body>
  <h1>你有没有见过你妈妈羡慕别人的眼神？</h1>
  <h2>你有没有见过你妈妈羡慕别人的眼神？</h2>
  <h3>你有没有见过你妈妈羡慕别人的眼神？</h3>
  <h4>你有没有见过你妈妈羡慕别人的眼神？</h4>
  <h5>你有没有见过你妈妈羡慕别人的眼神？</h5>
  <h6>你有没有见过你妈妈羡慕别人的眼神？</h6>
 </body>
</html>

2.4.2 段落块元素
最常用的段落块元素有p(段落)元素 和pre（原样显示文字）元素，hr(水平线)。

1．P元素
在网页中要把文字有条理地显示出来，离不开段落标记，就如同我们平常写文章一样，整个网页也可以分为若干个段落，而段落的标记就是<p>。其基本语法格式如下：

<p align="对齐方式">段落文本</p> <!-- align 是可选属性 -->

例如：

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>p标签</title>
 </head>
 <body>
  <p>宇宙山河浪漫，生活点滴温暖，都值得我前进。</p>
  <p align="left">忙碌的日子特别好，没有辜负早起的床，
  中午的大碗饭，和夜晚的好睡眠。所以人一定要前进。</p> <!-- 左对齐 -->
  <p align="center">原来万物皆有裂痕，那是光照进来的地方 ——科恩</p> <!-- 居中对齐 -->
  <p align="right">那些杀不死我们的，终将让我们更强大。——尼采</p> <!-- 右对齐 -->
 </body>
</html>

*注意:在元素内容中用空格或换行符进行排版都是无效的。

2.pre元素
pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。pre元素与p元素基本相同，唯一区别是，该元素中的文字内容将保留空格和换行符，并且元素中的英文字符都将统一用等宽字体，以便对齐，格式如下：

<pre>  pre 标签可以对空行和空格进行保留控制。 </pre>

例如：
将这个代码放到代码块里面好像有冲突，还是怎么的。卡住了，只能用截图抱歉
3. hr元素
<hr />标记在 HTML 页面中创建一条水平线
在这里插入图片描述例如：

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>hr标记</title>
 </head>
 <body>
  <h3 align="center">书到用时方恨少，事非经过不知难。</h3>
  <hr size="2" color="#bf1e2f" />
  <h5 align="center">上面一根线属性是 size="2" color="#bf1e2f"</h5>
  <hr align="center" width="60%" size="4" color="#b2969f" />
  <h5 align="center">上面一根线属性是 align="center" width="60%" 
  size="4" color="#b2969f" </h5>
 </body>
</html>

2.4.3 通用块元素
       div元素是一个最常用的通用块元素，它用于包住一些元素和文字内容，以便进一步用CSS进行排版处理。
       <div>标记简单而言就是一个区块容器标记，可以将网页分割为独立的、不同的部分，以实现网页的规划和布局。<div>与</div>之间相当于一个容器，可以容纳段落、标题、图像等各种网页元素，也就是说大多数HTML标记都可以嵌套在<div>标记中，<div>中还可以嵌套多层<div>。
       <div>标记非常强大，通过与id、class等属性配合，然后使用CSS设置样式，来替代大多数的文本标记。

例如：

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>div元素</title>
 </head>
 <body>
  <div>   
     <h2>静夜思</h2>   
     <hr>   
      <pre>   
       窗前明月光，   
       疑是地上霜。   
       举头望明月，   
       低头思故乡。    
       </pre>   
  </div>   
  <div>   
       <h2>下江陵</h2>   
      <hr>   
       <pre>   
        朝辞白帝彩云间，
        千里江陵一日还。    
        两岸猿声啼不住，
        轻舟已过万重山。
       </pre>
  </div>
 </body>
</html>

2.4.4 语义块元素

曾几何时，前端的页面布局一直采用div，但是div本身并没有实际的意义，它只是定义了一个区域，而且这个区域是做什么的浏览器并不知道，不利于页面的SEO优化。因此HTML5中新增的语义化标签就很好的解决了这个问题，如下图所示：
在这里插入图片描述
传统方式布局与html5语义标签的对比

1.herader元素

HTML5中的header元素是一种具有引导和导航作用的结构元素，该元素可以包含所有通常放在页面头部的内容。其基本语法格式如下：

<header>    
<h1>网页主题</h1>     
... 
</header>

nav元素
nav元素用于定义导航链接，是HTML5新增的元素，该元素可以将具有导航性质的链接归纳在一个区域中，使页面元素的语义更加明确。

例如：

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>nav元素</title>
 </head>
 <body>
  <nav>
   <ul>
    <li><a href="#">首页</a></li>
    <li><a href="#">公司概述</a></li>
    <li><a href="#">产品展示</a></li>
    <li><a href="#">联系我们</a></li>
   </ul>
  </nav>
 </body>
</html>

article元素
article元素代表文档、页面或者应用程序中与上下文不相关的独立部分，该元素经常被用于定义一篇日志、一条新闻或用户评论等。article元素通常使用多个section元素进行划分，一个页面中article元素可以出现多次。

例如：

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>article元素</title>
 </head>
 <body>
  <article>
     <header>    
           <h2>第一章</h2>    
       </header>    
       <section>    
           <header>    
               <h2>第1节</h2>    
           </header>    
       </section>    
       <section>    
           <header>    
               <h2>第2节</h2>    
           </header>    
       </section>    
   </article>    
   <article>    
       <header>    
           <h2>第二章</h2>   
       </header>
  </article>
 </body>
</html>

aside元素
aside元素用来定义当前页面或者文章的附属信息部分，它可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条等其他类似的有别于主要内容的部分。 aside元素的用法主要分为两种：

(1)被包含在article元素内作为主要内容的附属信息。

(2)在article元素之外使用，作为页面或站点全局的附属信息部分。

例如：

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>aside元素</title>
 </head>
 <body>
  <article>   
      <header>   
          <h1>标题</h1>   
      </header>   
      <section>文章主要内容</section>   
      <aside>其他相关文章</aside>   
  </article>   
  <aside>右侧菜单</aside>
 </body>
</html>

在例子中定义了两个aside元素，其中第1个aside元素位于article元素中，用于添加文章的其他相关信息。第2个aside元素用于存放页面的侧边栏内容。

section元素
section元素用于对网站或应用程序中页面上的内容进行分块，一个section元素通常由内容和标题组成。在使用section元素时，需要注意以下3点：

(1)不要将section元素用作设置样式的页面容器，那是div的特性。section元素并非一个普通的容器元素，当一个容器需要被直接定义样式或通过脚本定义行为时，推荐使用div。

(2)如果article元素、aside元素或nav元素更符合使用条件，那么不要使用section元素。

(3)没有标题的内容区块不要使用section元素定义。

例如：

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>section元素</title>
 </head>
 <body>
  <article>   
          <header>   
            <h2>小张的个人介绍</h2>   
         </header>   
      <p>小张是一个好学生，是一个帅哥……</p>   
      <section>   
          <h2>评论</h2>   
          <article>   
              <h3>评论者：A</h3>   
              <p>小张真的很帅</p>   
          </article>   
          <article>   
              <h3>评论者：B</h3>   
              <p>小张是一个好学生</p>   
          </article>   
      </section>   
  </article>
 </body>
</html>

footer元素
footer元素用于定义一个页面或者区域的底部，它可以包含所有通常放在页面底部的内容。在HTML5出现之前，一般使用<div id=“footer”></div>标记来定义页面底部，而通过HTML5的footer元素可以轻松实现。HTML元素的许多属性不仅可以用于块元素，而且可以用于大多数HTML元素，因此称其为HTML的“ 通用属性”，这里先介绍id（元素标识）属性和title(提示)属性两种通用属性，在后续模块节中，还会继续介绍其他通用属性。
（1）id(元素标识) 属性在HTML中，每个元素都可以有一个标识，但每个标识名在整个HTML文档中必须是唯一的。例如以下示例代码。

<div id="myid">........</div>
  <p   id="myId">...........</p>

标识名对大小写是敏感的，即“myid”与”myId”是不一样的。HTML的id属性在CSS和JavaScript的应用中起到了很重要的作用。
（2）title(提示)属性
元素的title属性在HTML的网页中起到了提示的作用。如果元素设置了title属性，当将鼠标指针移动到该内容上时，就可以看到title值的内容。

例如：

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>title属性</title>
 </head>
 <body>
  <div  id="zgxw"  title="《增广贤文》之劝学篇">   
      <h2 align="left">《增广贤文》之劝学篇</h2>  
      <hr width="40%" align="left" color="#DB7093">   
      <pre>   
 枯木逢春犹再发，人无两度再少年。
 不患老而无成，只怕幼而不学。
 长江后浪推前浪，世上今人胜古人。
 若使年华虚度过，到老空留后悔心。
 有志不在年高，无志空长百岁。
 少壮不努力，老大徒伤悲。
 好好学习，天天向上。
 坚持不懈，久炼成钢。
 三百六十行，行行出状元。
 冰生于水而寒于水，青出于蓝而胜于蓝。
 书到用时方恨少，事非经过不知难。   
      </pre>   
  </div>   
  <p >注意: 将鼠标移动"《增广贤文》之劝学篇"诗上，就可以看到title的属性值</p>
 </body>
</html>

2.4.5 常用列表块元素
常用列表元素有ul元素、ol元素、dl元素及li、dl、dt元素。

ul元素
ul无序列表是网页中最常用的列表，之所以称为“无序列表”，是因为其各个列表项之间没有顺序级别之分，通常是并列的。定义无序列表的基本语法格式如下：

<ul>      
<li>列表项1</li>      
<li>列表项2</li>      
<li>列表项3</li>
 ...... 
 </ul>

ol元素

ol有序列表即为有排列顺序的列表，其各个列表项按照一定的顺序排列，例如网页中常见的歌曲排行榜、游戏排行榜等都可以通过有序列表来定义。定义有序列表的基本语法格式如下：

<ol  type=""   start="">     
<li>列表项1</li>     
<li>列表项2</li>     
<li>列表项3</li> 
...... 
</ol>

dl 元素
定义dl列表常用于对术语或名词进行解释和描述，与无序和有序列表不同，定义列表的列表项前没有任何项目符号。其基本语法如下：

<dl> 
	<dt>名词1</dt>     
		<dd>名词1解释1</dd>     
		<dd>名词1解释2</dd>     
		...     
		<dt>名词2</dt>     
		<dd>名词2解释1</dd>     
		<dd>名词2解释2</dd>     
		... 
</dl>

案例：

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>列表元素的嵌套使用</title>
 </head>
 <body>
   <h2>饮品</h2>
   <ul>
       <li>咖啡
           <ol>                    <!--有序列表的嵌套-->
               <li>拿铁</li>
               <li>摩卡</li>
           </ol>
       </li>
       <li>茶
           <ul>                     <!--无序列表的嵌套-->
               <li>碧螺春</li>
               <li>龙井</li>
           </ul>
       </li>
   </ul>
 </body>
</html>