2023蓝桥杯备赛 块级标签

Qi_Xtreme
154 阅读4分钟

块级标签

（图片来源于www.lanqiao.cn/courses ）

div标签

在 HTML 中，div 标签是最重要的一个块级元素，它可以是组合其他 HTML 元素的容器，相当于是个透明的盒子，可以把其他标签放在里面。

图片描述

div 标签没有特定的含义，它主要是用于实现页面布局操作。如果与 CSS 一同使用，div 标签可用于对内容块设置样式属性。

同学们有没有发现这个特性有点像我们之前介绍的 span 标签，它们的区别在于 span 是行内元素，可以和其他元素共处一行，而 div 是块级元素，无论大小都不允许其他元素占自己的地盘。

div 标签的使用格式如下所示：

<div></div>

在 body 中添加两个 div 标签，分别给这两个 div 标签加上不同的颜色和文字，并设置其宽度为 100 个像素值。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div style="background-color:darkslateblue; width:100px;">1</div>
    <div style="background-color: chocolate; width:100px;">2</div>
  </body>
</html>

点击预览页面，实验效果如下：

图片描述

从预览效果可以看出，尽管 div 的宽度未占满整行，但是 div 元素还是会单独占一行，这比第一个例子更能展现块级元素的特点。

p标签

在 HTML 中为我们提供 p 标签来分段，添加 p 标签效果如下：

图片描述

对于段落标签，有一个可选的属性 align，用于表示段落相对浏览器窗口在水平位置上的对齐方式。它有三个可取值，每个可取值的含义如表所示：

属性值说明
left段落左对齐
right段落右对齐
center段落居中对齐

注意：虽然大部分浏览器支持 align 属性，但 HTML 4.0 不推荐使用该属性，并且 HTML 5 也不支持该属性了。

在 body 中写入三对 p 标签，设置不同的样式并写入不同的文字内容。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <p style="width: 200px; background-color:rgb(50, 148, 205)" align="center">
      文字居中显示
    </p>
    <p style="width: 200px; background-color:rgb(50, 148, 205)" align="left">
      文字居左显示
    </p>
    <p style="width: 200px; background-color:rgb(50, 148, 205)" align="right">
      文字居右显示
    </p>
  </body>
</html>

点击预览页面，实验效果如下：

图片描述

预览效果之后我们可以看见设置 align 属性的不同属性值后，文字显示的位置是不同的。

注意：style 用于样式设置，在这段代码里并没有实际意义，仅用于效果显示。

标题标签

这里的标题标签不是我们之前讲过的 <title>，而是能够在页面上用于标题显示的 <hn> 系列标签。在 HTML 中一共有六级标题，用 <h1> ~ <h6> 来表示，其中 <h1> 的标题字号最大，依次递减。

在浏览器解析标题标签时，会将标题内容设为一个段落，字体设为黑体，字号大小根据 n 值的大小确定。

例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>一级标题</h1>
    <h2>二级标题</h1>
    <h3>三级标题</h1>
    <h4>四级标题</h1>
    <h5>五级标题</h1>
    <h6>六级标题</h1>
</body>
</html>

点击预览页面，实验效果如下：

图片描述

从预览效果中我们可以看到，随着标题标签的级数增大，字体是越来越小的。

ol列表标签

列表标签一共有三种，分别是：

  • 无序列表
  • 有序列表
  • 自定义列表

有序列表 有序列表就是使用项目符号来标识项目，比如日常我们需要步骤化的操作，可以使用有序列表来表示。

其基本用法为：

<ol>
  <li>项目一</li>
  <li>项目二</li>
  <li>项目三</li>
</ol>

图片描述

从上面截图可以看到有序列表的默认是从 1 开始的数字排序。我们可以使用 type 属性来改变排序符号，取值如下所示：

属性值说明
A用大写字母作为排序符号
a用小写字母作为排序符号
I用大写罗马字符作为排序符号
i用小写罗马字符作为排序符号
1用数字作为排序符号

我们默认都是从第一个字母或数字开头来排序的，其实我们可以通过 start 属性，来自定义起始排序符号。start 属性必须要配合 type 属性来使用。例如：

<!--从第 4 个大写罗马数字开始排序-->
<ol type="I" start="4">
  <li>项目一</li>
  <li>项目二</li>
  <li>项目三</li>
</ol>

图片描述

ul无序列表

在 HTML 文档中，所谓无序列表，是指以实心圆 ●（默认）、空心圆 ○、实心方块 ■ 开头的，没有顺序的列表项目。比如，有时候我们会用无序列表的形式来做一个总结，这样会让内容看起来更加清晰。

基本用法为：

<ul>
  <li>项目一</li>
  <li>项目二</li>
  <li>项目三</li>
</ul>

图片描述

我们使用 type 属性可以修改列表开头的符号，其取值如下：

属性值说明
disc实心圆 ●
circle空心圆 ○
square实心方块 ■

dl自定义列表标签

自定义列表跟前两种列表有些区别，用 dl 标签表示自定义列表，其中的 dt 是代表列表项，而 dd 是列表项的描述。比如：我们需要对列表项的内容进行解释的时候，就可以使用自定义列表了。

基本用法为：

<dl>
  <dt>列表项一</dt>
  <dd>列表项一的描述</dd>
  <dt>列表项二</dt>
  <dd>列表项二的描述</dd>
</dl>

图片描述

在开发过程中，一般使用这个组合标签来实现图文混编的功能。例如既有图片又有描述的商品列表，就可以使用这个组合标签来实现。

avatar
文章
阅读
粉丝