物聯(lián)網(wǎng)出來做什么工作首頁關(guān)鍵詞優(yōu)化價格
編程筆記 html5&css&js 012 HTML分塊
- 一、HTML 塊級元素
- 二、HTML 內(nèi)聯(lián)元素
- 三、HTML` <div>` 元素
- 四、HTML `<span>` 元素
- 五、HTML`<article>`元素
- 六、`<article>元素和<div>元素`的區(qū)別與聯(lián)系
- 小結(jié)
像報紙排版一樣，很多時候需要把平面劃分為多個塊，網(wǎng)頁也是一樣，這里就看一下，怎么在頁面中劃分區(qū)塊。
HTML <div> 和<span>
HTML 可以通過 <div> 和 <span>將元素組合起來。
一、HTML 塊級元素
大多數(shù) HTML 元素被定義為塊級元素或內(nèi)聯(lián)元素。
塊級元素在瀏覽器顯示時，通常會以新行來開始（和結(jié)束）。
實例: <h1>, <p>, <ul>, <table>
二、HTML 內(nèi)聯(lián)元素
內(nèi)聯(lián)元素在顯示時通常不會以新行開始。
實例: <b>, <td>, <a>, <img>
HTML中的塊級元素指的是在渲染時以塊的形式顯示的元素。
以下是一些常見的HTML塊級元素：
<div>：用于創(chuàng)建一個分隔的塊級區(qū)域，常用于布局和樣式的分離。<p>：用于段落文本。<h1> - <h6>：用于標題，其中<h1>表示最高級別的標題，<h6>表示最低級別的標題。<ul>：用于創(chuàng)建無序列表。<ol>：用于創(chuàng)建有序列表。<li>：用于列表項，必須位于<ul>或<ol>內(nèi)部。<table>：用于創(chuàng)建表格。<thead>：用于定義表格的表頭部分。<tbody>：用于定義表格的主體部分。<tr>：用于定義表格的一行。<th>：用于定義表格的表頭單元格。<td>：用于定義表格的數(shù)據(jù)單元格。<form>：用于創(chuàng)建表單。<fieldset>：用于將相關(guān)表單元素分組。<legend>：用于為元素定義標題。<blockquote>：用于引用長段落的文本。<address>：用于定義聯(lián)系信息。<pre>：保留空白字符和換行符的格式化文本。<figure>：用于包含獨立的內(nèi)容，如圖像或表格。<figcaption>：用于為<figure>元素定義標題。
這只是一些常見的塊級元素，還有其他塊級元素，如<article>、<section>、<nav>、<header>等等。
三、HTML <div> 元素
HTML <div> 元素是塊級元素，它可用于組合其他 HTML 元素的容器。
<div> 元素沒有特定的含義。除此之外，由于它屬于塊級元素，瀏覽器會在其前后顯示折行。
如果與 CSS 一同使用，<div> 元素可用于對大的內(nèi)容塊設(shè)置樣式屬性。
<div> 元素的另一個常見的用途是文檔布局。它取代了使用表格定義布局的老式方法。使用 <table> 元素進行文檔布局不是表格的正確用法。<table> 元素的作用是顯示表格化的數(shù)據(jù)。
四、HTML <span> 元素
HTML <span> 元素是內(nèi)聯(lián)元素，可用作文本的容器
<span> 元素也沒有特定的含義。
當與 CSS 一同使用時，<span> 元素可用于為部分文本設(shè)置樣式屬性。
五、HTML<article>元素
用于定義獨立的、完整的、與頁面內(nèi)容無關(guān)的文章內(nèi)容。是HTML5新增元素。
<article>元素應(yīng)該包含一片完整的、獨立于頁面的文章內(nèi)容，例如一篇新聞報道、一篇博客文章等。這些內(nèi)容可以作為獨立的實體進行分發(fā)，例如通過RSS訂閱或社交媒體分享。
<article>元素可以包含標題、摘要、作者、發(fā)布日期等信息。它可以包含其他HTML元素，如段落(<p>)、標題(<h1>-<h6>)、圖片(<img>)、列表(<ul>、<ol>)等，以展示完整的文章內(nèi)容。
<article><h2>Article Title</h2><p>Article content goes here...</p><p>Another paragraph...</p>
</article>
六、<article>元素和<div>元素的區(qū)別與聯(lián)系
注意：<article>元素應(yīng)該是獨立的，即使嵌套在其他元素中，也應(yīng)該具有自己的完整語義。
元素是HTML文檔中的構(gòu)建塊，用于定義網(wǎng)頁的結(jié)構(gòu)和內(nèi)容。在HTML中，有許多不同類型的元素，每個元素都有特定的功能和用途。
其中兩個常見的元素是"<article>"和"<div>"。
"<article>"元素用于定義一個獨立的內(nèi)容塊，通常表示一篇文章或一個獨立的主題。它可以包含標題、內(nèi)容、作者等信息。一個網(wǎng)頁可以包含多個"<article>"元素，每個元素獨立顯示。
"<div>"元素是一個通用的容器元素，用于將多個元素組合在一起或為它們提供樣式。它沒有特定的含義或語義，僅用于布局和組織目的。"<div>"元素可以用于分組相關(guān)的內(nèi)容，設(shè)置樣式，或創(chuàng)建網(wǎng)頁布局的不同區(qū)域。
"<article>"元素和"<div>"元素之間的關(guān)系是，"<article>"元素通常可以包含多個"<div>"元素作為其子元素。這樣可以將文章分為不同的部分或塊，并使用"<div>"元素對每個部分進行樣式設(shè)置或布局。
另外，"<div>"元素也可以存在于除了"<article>"元素以外的其他元素中，用于創(chuàng)建更復(fù)雜的布局或組織結(jié)構(gòu)。
總的來說，"<article>"元素表示一個獨立的內(nèi)容塊，而"<div>"元素是一個通用的容器元素，用于組合和布局其他元素。它們之間可以互相嵌套，以創(chuàng)建更具結(jié)構(gòu)和樣式的網(wǎng)頁。
小結(jié)
熟練掌握區(qū)塊劃分的各種方法，才能滿足制作網(wǎng)頁的實際需要。