第二章 第4节——块元素

本文详细介绍了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>
  1. 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>
  1. 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>
  1. 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元素用于存放页面的侧边栏内容。

  1. 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>
  1. 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元素。

  1. ul元素
           ul无序列表是网页中最常用的列表,之所以称为“无序列表”,是因为其各个列表项之间没有顺序级别之分,通常是并列的。定义无序列表的基本语法格式如下:
<ul>      
<li>列表项1</li>      
<li>列表项2</li>      
<li>列表项3</li>
 ...... 
 </ul>
  1. ol元素
           
    ol有序列表即为有排列顺序的列表,其各个列表项按照一定的顺序排列,例如网页中常见的歌曲排行榜、游戏排行榜等都可以通过有序列表来定义。定义有序列表的基本语法格式如下:
<ol  type=""   start="">     
<li>列表项1</li>     
<li>列表项2</li>     
<li>列表项3</li> 
...... 
</ol>
  1. 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>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值