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

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


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

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

一、HTML 块级元素

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

二、HTML 内联元素

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

  1. <div>：用于创建一个分隔的块级区域，常用于布局和样式的分离。
  2. <p>：用于段落文本。
  3. <h1> - <h6>：用于标题，其中<h1>表示最高级别的标题，<h6>表示最低级别的标题。
  4. <ul>：用于创建无序列表。
  5. <ol>：用于创建有序列表。
  6. <li>：用于列表项，必须位于<ul>或<ol>内部。
  7. <table>：用于创建表格。
  8. <thead>：用于定义表格的表头部分。
  9. <tbody>：用于定义表格的主体部分。
  10. <tr>：用于定义表格的一行。
  11. <th>：用于定义表格的表头单元格。
  12. <td>：用于定义表格的数据单元格。
  13. <form>：用于创建表单。
  14. <fieldset>：用于将相关表单元素分组。
  15. <legend>：用于为元素定义标题。
  16. <blockquote>：用于引用长段落的文本。
  17. <address>：用于定义联系信息。
  18. <pre>：保留空白字符和换行符的格式化文本。
  19. <figure>：用于包含独立的内容，如图像或表格。
  20. <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>"元素是一个通用的容器元素，用于组合和布局其他元素。它们之间可以互相嵌套，以创建更具结构和样式的网页。

小结

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