块级元素(Block-level elements):
块级元素通常用于构建页面的整体结构,如段落、标题、列表、表格等。它们独占一行,从新行开始显示,宽度默认为父元素的100%。
-
<div>
:- 说明: 通用的块级容器,用于组合其他元素。
- 示例:
<div> <!-- 内容 --> </div>
-
<p>
:- 说明: 定义段落。
- 示例:
<p>这是一个段落。</p>
-
<h1>
到<h6>
:- 说明: 定义标题,级别从1到6逐渐减小。
- 示例:
<h1>这是一级标题</h1> <h2>这是二级标题</h2>
-
<ul>
和<ol>
:-
说明: 分别定义无序列表和有序列表。
-
示例:
<ul> <li>项目1</li> <li>项目2</li> </ul> <ol> <li>第一项</li> <li>第二项</li> </ol>
-
-
<li>
:- 说明: 定义列表项。
- 示例:
<ul> <li>项目1</li> <li>项目2</li> </ul>
-
<table>
:- 说明: 定义表格。
- 示例:
<table> <tr> <th>表头1</th> <th>表头2</th> </tr> <tr> <td>数据1</td> <td>数据2</td> </tr> </table>
-
<form>
:- 说明: 定义表单。
- 示例:
<form action="/submit" method="post"> <!-- 表单元素 --> </form>
行内元素(Inline elements):
行内元素通常用于包裹文本或其他行内元素,它们不会独占一行,宽度仅包含内容所需的宽度,不会产生明显的换行。
-
<span>
:- 说明: 通用的行内容器,用于包裹一小段文本或其他行内元素。
- 示例:
<span>这是一小段文本</span>
-
<a>
:- 说明: 定义超链接。
- 示例:
<a href="https://www.example.com">访问示例网站</a>
-
<strong>
和<em>
:- 说明:
<strong>
表示强调文本,<em>
表示斜体文本。 - 示例:
<p><strong>重要信息</strong></p> <p><em>斜体文本</em></p>
- 说明:
-
<img>
:- 说明: 插入图片。
- 示例:
<img src="image.jpg?x-oss-process=image/resize,w_700,limit_1/format,webp" alt="图片描述">
-
<abbr>
:- 说明: 定义缩写。
- 示例:
<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>
这些是一些常见的块级元素和行内元素,它们用于构建文档结构、定义内容和实现布局。在实际开发中,根据具体需求和语义要求选择合适的元素是很重要的。