HTML块级元素

前面的话

  在HTML5出现之前,人们一般把元素分为块级、内联和内联块元素。本文将详细介绍HTML块级元素

 

h

  标题(Heading)元素有六个不同的级别,<h1>是最高级的,而<h6>则是最低的。一个标题元素能简要描述该节的主题

  从<h1><h6>,重要性逐渐减小,字体大小也逐渐减小。在使用标题元素时,要注意以下几点

  1、不要为了减小标题的字体而使用低级别的标题,而是使用CSS的font-size样式

  2、避免跳过某级标题:始终要从<h1>开始,接下来使用<h2> 等等

  3、使用<section> 元素时,为了方便起见,避免重复在一个页面上使用<h1><h1>应该用来表示页面的标题,其他的标题当从<h2>开始。使用<section>时,应当每个 section都使用一个<h2>

【默认样式】

//从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新增了<hgroup>标签,它表示标题组,用于组合标题,只在区块需要有多个级别的标题时使用 

<hgroup>
    <h1>水果</h1>
    <h2>苹果</h2>
</hgroup>

 

p

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

【默认样式】

margin: 16px 0;

<p>段落1</p>
<p>段落2</p>
<p>段落3</p>

 

div

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

 

hr

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

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

<p>段落1</p>
<hr>
<p>段落2</p>

【默认样式】

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

 

pre

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

<pre>
body {
  color:red;
}
</pre>

【默认样式】

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

 

blockquote

  <blockquote>元素(或者HTML块级引用元素),代表其中的文字是引用内容。通常在渲染时,这部分的内容会有一定的缩进。若引文来源于网络,则可以将原内容的出处URL地址设置到cite特性上,若要以文本的形式告知读者引文的出处时,可以通过<cite>元素

  [注意]引用的署名必须在引用外部定义

<blockquote cite="https://baike.baidu.com/view/921793.htm">
  <p>横眉冷对千夫指,俯首甘为孺子牛</p>
</blockquote>    
<p>鲁迅</p>

【默认样式】

margin: 1em  40px;

 

address

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

  当表示一个和联系信息无关的任意的地址时,使用<p>元素而不是<address>元素。这个元素不能包含除了联系信息之外的任何信息,比如出版日期(这应该包含在<time>元素中)。通常,<address>元素可以放在当前section的<footer>元素中,如果存在的话

【默认样式】

font-style: italic;

 

其他

  除了上面介绍的<div><h><p><hr><blockquote><address>标签外,还有一些前面已经介绍过的标签属于块级标签

  包括骨架类标签(<html><body>),列表类标签(<ul><ol><dl><dd><dt>),表单类标签(form<fieldset><output><legend><optgroup><option>),HTML5新增的结构标签(<article><aside><header><footer><nav><section>),HTML5新增的多媒体标签(<figure><figcaption>),HTML5新增的功能性标签(<summary><details>)

 

最后

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

<think>好的,用户想了解HTML块级元素的标签列表及用法。首先,我需要回忆一下HTML中的块级元素有哪些,以及它们的用途和基本语法。 根据引用[2],块级元素包括骨架类标签如<html>、<body>,列表类标签如<ul>、<ol>,表单类标签如<form>、<input>,还有HTML5新增的结构标签比如<header>、<footer>,多媒体标签如<video>、<audio>,以及功能性标签如<progress>、<meter>。不过这里可能需要确认,因为有些标签比如<input>其实是行内元素,表单类标签可能混合了块级和行内元素,需要仔细区分。 接下来,我需要整理这些块级元素,并分类说明。比如,骨架类标签是构成页面结构的基础,列表类用于创建各种列表,表单类可能指的是包裹表单的块级容器,而HTML5新增的标签则用于更语义化的结构。 同时,用户提到的<del>标签在引用[1]中被讨论是否是块级元素。根据我的知识,<del>通常是行内元素,但需要确认引用内容。引用[1]中可能提到<del>的显示属性,可能通过CSS可以改变其显示方式,但默认情况下是否为块级需要明确说明。 需要确保每个标签的正确分类,避免错误。例如,<form>确实是块级元素,而<input>、<button>是行内元素。列表类中的<ul>、<ol>是块级,而<li>作为列表项也是块级。HTML5的结构标签如<article>、<section>都是块级。 此外,要说明块级元素的特点:独占一行,可设置宽高,默认宽度100%等。用法部分需要举例说明每个标签的典型应用场景和基本代码结构,比如<div>用于布局,<p>用于段落,<header>用于页眉等。 可能还需要对比行内元素,帮助用户更好理解块级元素的区别。例如,行内元素不会另起一行,设置宽高无效,而块级元素反之。 最后,生成相关问题需要考虑用户可能进一步想了解的内容,比如如何转换元素的显示类型,常见的块级元素使用误区,或者HTML5新元素的浏览器兼容性等。 现在整理这些内容,确保信息准确,引用正确,并按照用户的要求分点回答,使用中文,注意LaTeX格式的正确应用,虽然这个问题可能不涉及数学公式,但需要遵守系统指令中的格式要求。</think>### HTML 块级元素标签列表及用法 #### 一、块级元素特点 1. **独占一行**:前后自动换行; 2. **可控制尺寸**:支持设置宽度(`width`)、高度(`height`)、边距(`margin`)和填充(`padding`); 3. **默认宽度**:占满父容器宽度(`width: 100%`)[^2]。 #### 二、块级元素分类及用法 ##### 1. 基础骨架类 - **`<html>`**:根元素,定义整个HTML文档; - **`<body>`**:页面主体内容容器; - **`<div>`**:通用容器,用于布局和样式控制; - **`<p>`**:段落文本,默认上下有边距; - **`<h1>-<h6>`**:标题标签,层级从高到低。 ##### 2. 列表类 - **`<ul>`**:无序列表,搭配`<li>`使用; - **`<ol>`**:有序列表,搭配`<li>`使用; - **`<li>`**:列表项(块级元素); - **`<dl>`**:定义列表,包含`<dt>`(术语)和`<dd>`(描述)。 ##### 3. 表单容器类 - **`<form>`**:表单容器,包含输入控件; - **`<fieldset>`**:分组表单元素; - **`<legend>`**:`<fieldset>`的标题。 ##### 4. HTML5 新增结构标签 - **`<header>`**:页眉或内容头部; - **`<footer>`**:页脚或内容尾部; - **`<nav>`**:导航栏; - **`<article>`**:独立内容区块(如博客文章); - **`<section>`**:文档中的章节; - **`<aside>`**:侧边栏或附加内容。 ##### 5. HTML5 多媒体标签 - **`<video>`**:嵌入视频; - **`<audio>`**:嵌入音频; - **`<canvas>`**:绘制图形(需JavaScript支持)。 ##### 6. 功能性标签 - **`<table>`**:表格,包含`<tr>`(行)、`<td>`(单元格); - **`<hr>`**:水平分隔线; - **`<pre>`**:预格式化文本(保留空格和换行)。 #### 三、特殊说明 - **`<del>`标签**:默认是行内元素,用于表示删除文本,但可通过CSS修改为块级(`display: block`)[^1]; - **表单控件**:如`<input>`、`<button>`为行内元素,需包裹在块级容器(如`<div>`)中布局。 #### 示例代码 ```html <!-- 基础结构 --> <body> <header> <h1>页面标题</h1> <nav>导航链接</nav> </header> <section> <article> <p>这是一个段落。</p> <ul> <li>列表项1</li> <li>列表项2</li> </ul> </article> </section> <footer>版权所有 © 2023</footer> </body> ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值