当前位置：首页 > news >正文

编程笔记 html5cssjs 012 HTML分块

news 2026/2/7 18:27:15

编程笔记 html5&css&js 012 HTML分块

一、HTML 块级元素
二、HTML 内联元素
三、HTML` <div>` 元素
四、HTML `<span>` 元素
五、HTML`<article>`元素
六、`<article>元素和<div>元素`的区别与联系
小结

像报纸排版一样，很多时候需要把平面划分为多个块，网页也是一样，这里就看一下，怎么在页面中划分区块。

HTML <div> 和<span>
HTML 可以通过 <div> 和 <span>将元素组合起来。

一、HTML 块级元素

大多数 HTML 元素被定义为块级元素或内联元素。
块级元素在浏览器显示时，通常会以新行来开始（和结束）。
实例: <h1>, <p>, <ul>, <table>

二、HTML 内联元素

内联元素在显示时通常不会以新行开始。
实例: <b>, <td>, <a>, <img>
HTML中的块级元素指的是在渲染时以块的形式显示的元素。
以下是一些常见的HTML块级元素：

<div>：用于创建一个分隔的块级区域，常用于布局和样式的分离。
<p>：用于段落文本。
<h1> - <h6>：用于标题，其中<h1>表示最高级别的标题，<h6>表示最低级别的标题。
<ul>：用于创建无序列表。
<ol>：用于创建有序列表。
<li>：用于列表项，必须位于<ul>或<ol>内部。
<table>：用于创建表格。
<thead>：用于定义表格的表头部分。
<tbody>：用于定义表格的主体部分。
<tr>：用于定义表格的一行。
<th>：用于定义表格的表头单元格。
<td>：用于定义表格的数据单元格。
<form>：用于创建表单。
<fieldset>：用于将相关表单元素分组。
<legend>：用于为元素定义标题。
<blockquote>：用于引用长段落的文本。
<address>：用于定义联系信息。
<pre>：保留空白字符和换行符的格式化文本。
<figure>：用于包含独立的内容，如图像或表格。
<figcaption>：用于为<figure>元素定义标题。

这只是一些常见的块级元素，还有其他块级元素，如<article>、<section>、<nav>、<header>等等。

三、HTML `<div>` 元素

HTML <div> 元素是块级元素，它可用于组合其他 HTML 元素的容器。
<div> 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。
如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。
<div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。

四、HTML `<span>` 元素

HTML <span> 元素是内联元素，可用作文本的容器
<span> 元素也没有特定的含义。
当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。

五、HTML`<article>`元素

用于定义独立的、完整的、与页面内容无关的文章内容。是HTML5新增元素。
<article>元素应该包含一片完整的、独立于页面的文章内容，例如一篇新闻报道、一篇博客文章等。这些内容可以作为独立的实体进行分发，例如通过RSS订阅或社交媒体分享。
<article>元素可以包含标题、摘要、作者、发布日期等信息。它可以包含其他HTML元素，如段落(<p>)、标题(<h1>-<h6>)、图片(<img>)、列表(<ul>、<ol>)等，以展示完整的文章内容。

<article><h2>Article Title</h2><p>Article content goes here...</p><p>Another paragraph...</p>
</article>

六、`<article>元素和<div>元素`的区别与联系

注意：<article>元素应该是独立的，即使嵌套在其他元素中，也应该具有自己的完整语义。
元素是HTML文档中的构建块，用于定义网页的结构和内容。在HTML中，有许多不同类型的元素，每个元素都有特定的功能和用途。
其中两个常见的元素是"<article>"和"<div>"。
"<article>"元素用于定义一个独立的内容块，通常表示一篇文章或一个独立的主题。它可以包含标题、内容、作者等信息。一个网页可以包含多个"<article>"元素，每个元素独立显示。
"<div>"元素是一个通用的容器元素，用于将多个元素组合在一起或为它们提供样式。它没有特定的含义或语义，仅用于布局和组织目的。"<div>"元素可以用于分组相关的内容，设置样式，或创建网页布局的不同区域。
"<article>"元素和"<div>"元素之间的关系是，"<article>"元素通常可以包含多个"<div>"元素作为其子元素。这样可以将文章分为不同的部分或块，并使用"<div>"元素对每个部分进行样式设置或布局。
另外，"<div>"元素也可以存在于除了"<article>"元素以外的其他元素中，用于创建更复杂的布局或组织结构。
总的来说，"<article>"元素表示一个独立的内容块，而"<div>"元素是一个通用的容器元素，用于组合和布局其他元素。它们之间可以互相嵌套，以创建更具结构和样式的网页。

小结

熟练掌握区块划分的各种方法，才能满足制作网页的实际需要。