【学习】【HTML】块级元素，行内元素，行内块级元素

news2024/11/17 4:15:09

块级元素

块级元素是 HTML 中一类重要的元素，它们在页面布局中占据整行空间，通常用于创建页面的主要结构组件。

常见的块级元素有哪些？

<div>: 通用的容器元素，常用于创建布局块。
<p>：段落元素，用于包含文本段落。
<h1> 至 <h6>：标题元素，用于表示不同级别的标题。
<ul>、<ol>、<li>：列表元素，分别用于无序列表、有序列表和列表项。
<table>：表格元素，用于创建数据表格。
<form>：表单元素，用于创建用户输入表单。
<header>：页眉元素，用于定义文档或节的头部(HTML5 新增)。
<footer>：页脚元素，用于定义文档或节的底部(HTML5 新增)。
<nav>:导航元素，用于定义导航链接的集合(HTML5 新增)。
<article>：文章元素，用于定义独立的、自包含的内容(HTML5 新增)。
<section>：节元素，用于定义文档中的节或区域(HTML5 新增)。
<main>：主内容元素，用于定义文档或应用程序的主要内容(HTML5 新增)。
<aside>：侧边栏元素，用于定义与主要内容相关的辅助信息(HTML5 新增)。
<figure> 和 <figcaption>：用于包含图像、图表、视频等内容及其标题或说明(HTML5 新增)。

块级元素的特点？

独占一行，并且其后的内容也会从新的一行开始。
如果没有显式设置宽度，块级元素的默认宽度是其父级元素的可填充宽度(标准盒模型/怪异盒模型/边框盒模型)。
可以设置宽度、高度、内外边距等样式属性。
许多块级元素具有明确的语义含义，有助于提高文档的可读性和可维护性。例如，<header> 用于定义页面头部，<footer> 用于定义页面底部，<article> 用于定义独立的文章内容。

标准盒模型
width 不包括 padding 和 border，总宽度是 width + padding + border。
边框盒模型
width 包括 padding 和 border，总宽度是 width，在标准模式下通过 box-sizing: border-box; 启用。
怪异盒模型
width 包括 padding 和 border，总宽度是 width，通常在怪异模式下使用。

触发怪异模式
浏览器会根据文档类型声明（Doctype）来决定是否进入怪异模式。以下是一些常见的 Doctype 声明及其效果：

标准模式：使用现代的 Doctype 声明，如 <!DOCTYPE html> 或 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">，浏览器会进入标准模式。
怪异模式：使用旧的或不完整的 Doctype 声明，如 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 或完全省略 Doctype 声明，浏览器会进入怪异模式。

块级元素的嵌套规则？

块级元素可以包含其他块级元素、行内块级元素，也可以包含行内元素。

`<p>` 可以嵌套`<div>`吗？

规范要求

<p> 元素用于定义段落，它应该只包含文本和其他行内元素，如 <span>, <a>, <strong>, <em> 等。
块级元素（如 <div>, <h1> 至 <h6>, <ul>, <ol>, <li>, <table>, <form>, <header>, <footer>, <nav>, <article>, <section> 等）不应该嵌套在 <p> 元素中。

原因

语义清晰：<p> 元素的目的是定义一段文本，嵌套块级元素会破坏这一语义，使文档结构变得混乱。
浏览器解析：大多数现代浏览器会自动修正不规范的嵌套，但这可能导致意外的布局问题和不可预测的行为。

正确做法

使用合适的块级元素：如果需要在段落中插入块级元素，可以考虑使用其他块级元素来替代 <p>，或者将块级元素放在段落之外。

行内块级元素

行内块级元素在布局中表现为行内元素，但可以设置宽度、高度、边距和内边距，类似于块级元素。

常见的行内块级元素有哪些？

<img>：图像元素。
<input>：输入元素。
<button>：按钮元素。
<textarea>：文本区域元素。
<select>：选择框元素。

行内块级元素的特点？

行内块级元素不会独占一行，可以与其他行内元素和文本内容在同一行内显示。
行内块级元素可以设置宽度和高度，可以使用百分比或固定值。
行内块级元素可以设置所有方向的边距（margin）和内边距（padding）。

css:vertical-align
CSS vertical-align 属性用来指定行内（inline）、行内区块（inline-block）、表格单元格（table-cell）盒子的垂直对齐方式。

行内块级元素的嵌套规则？

行内块级元素可以嵌套其他行内块级元素。
行内块级元素可以包含行内元素，文本内容。
行内块级元素不应该包含块级元素。

行内元素

行内元素不会独占一行，而是与其他内容在同一行内显示。它们通常用于对文本进行标记和修饰，如链接、强调、图片等。

常见的行内元素有哪些？

<a>：超链接。
<span>：通用的行内容器，用于对文本进行标记和修饰。
<strong>：表示重要文本，通常以粗体显示。
<em>：表示强调文本，通常以斜体显示。
<img>：图像。
<code>：表示计算机代码。
<b>：表示粗体文本。
<i>：表示斜体文本。
<sub>：表示下标文本。
<sup>：表示上标文本。
<u>：表示下划线文本。
<s>：表示删除线文本。
<var>：表示变量。
<abbr>：表示缩写。
<mark>：表示高亮文本。
<small>：表示小号文本。
<time>：表示日期和时间。

行内元素的特点？

行内元素不会独占一行，而是与其他行内元素,行内块级元素和文本内容在同一行内显示。
行内元素不能设置宽度和高度。如果尝试设置宽度和高度，这些属性会被忽略。
行内元素可以设置左右边距（margin-left 和 margin-right）和内边距（padding-left 和 padding-right），但不能设置上下边距（margin-top 和 margin-bottom）和内边距（padding-top 和 padding-bottom）。
行内元素不会打断文本流，因此不会影响周围其他内容的布局。

文本流
文本流（Text Flow）是指文本在页面上的自然排列方式。在 HTML 中，文本流通常是从左到右、从上到下的顺序排列。行内元素不会打断这种自然排列方式，而是与其他文本内容在同一行内显示。这与块级元素的行为形成对比，块级元素会从新的一行开始，并且其后的内容也会从新的一行开始。

行内元素的嵌套规则？

行内元素可以包含其他行内元素，行内块级元素，文本内容。
行内元素不应该包含块级元素。

`<a>` 可以包含块级元素吗？

规范要求
HTML5：在 HTML5 中，<a> 元素可以包含块级元素。这是为了提高灵活性和语义化，允许创建更复杂的链接结构。
HTML4 和 XHTML：在 HTML4 和 XHTML 中，<a> 元素只能包含行内元素，不能包含块级元素。
注意事项
语义清晰：虽然<a> 元素可以包含块级元素，但应确保这样做不会破坏文档的语义和可读性。
用户体验：包含块级元素的 <a> 元素可能会导致较大的点击区域，这可能会影响用户体验。确保链接的目标内容是明确的，避免用户误点击。