本文介绍: 表单元素: 、、、、等,用于创建表单,包括文本框单选按钮复选框下拉框等。多媒体元素: 、、、、,用于插入图像视频音频。、、、、、、、等:用于对文本进行修饰和强调。表格元素: 、、、,用于表示表格表格的行和单元格

一、块级元素行内元素行内块级元素

在 HTML 5 标准前,HTML 中的元素可以分为块级元素、行内元素(又称行级元素)和行内块级元素三种类型 ,它们的主要区别在于它们在文档流中所占据的空间如何与其他元素相互作用。

1、块级元素

块级元素(block element)特点:

  1. 默认情况下,会新起一行
  2. 块级元素可以包含行内元素和其他块级元素。
  3. 可以设置宽度高度、内边距、边框外边距等盒模型属性

常见的 HTML 块级元素包括:

  1. <p>:用于表示段落。
  2. <h1> – <h6>:用于表示标题,h1 是最高级别的标题。
  3. &lt;ul&gt;、<ol&gt;、<li>:用于创建无序列表有序列表
  4. <div>:用于分组布局页面元素。
  5. <table>、<tr>、<td>等:用于创建表格。
  6. <hr>:用于创建水平线。
  7. <pre>:用于展示格式化文本,其中的空格、回车等会保留在输出结果中。

由于块级元素会占据一整行,因此通常用于分隔和布局页面的不同区域,可以设置宽度高度等盒模型属性,从而实现复杂的布局效果

2、行内元素

行内元素(inline element)特点:

  1. 默认情况下,不会以新行开始,其内容会在同一行显示,直到到达该行的末尾才会换行显示。
  2. 一般情况下,行内元素只能包含数据和其他行内元素。
  3. 默认情况下,无法设置宽度和高度,除非将 display 设为除 inline 之外的某个值。

常见的 HTML 行内元素包括:

  1. <a>:用于创建超链接

  2. <span>:用于包含文本和其他行内元素,可以用于实现文本的样式和布局效果
  3. <b>、<i>、<u>、<strong>、<em>、<small>、<sup>、<sub>等:用于对文本进行修饰和强调。

  4. <br>:用于强制换行

  5. <code>、<var>、<kbd>等:用于表示计算机代码用户输入

  6. <q>、<cite>、<blockquote>等:用于表示引用和短文本块。

由于行内元素在默认情况下不会开始新行,因此通常用于文本内容内联元素的排列和布局。但是行内元素无法设置宽度和高度等盒模型属性,其宽度和高度都是由它们所包含的内容决定的,因此不能实现像块级元素那样的复杂布局效果

3、行内块级元素

行内块级元素(inlineblock)特点:

  1. 行内块级元素与行内元素类似(即在默认情况下,不会以新行开始),
  2. 可以包含其他行内块级元素或行内元素。
  3. 宽度和高度是可以设置的,不需要将 display 设为除 inline 之外的某个值。

常见的 HTML 行内块级元素包括:

  1. <img>:用于插入图片,可以通过设置其宽度和高度来控制图片大小,但是在默认情况下,它是一个行内块级元素。

  2. <button>:用于创建按钮

  3. <input>:用于创建输入框表单元素。

  4. <select>:用于创建下拉菜单

  5. <textarea>:用于创建多行文本输入框
  6. <label>:用于创建表单标签

通过将行内块级元素设置display: inline-block;,可以将其布局在一行中,并允许设置其宽度、高度、内边距和外边距等样式属性,从而实现更加灵活的布局效果

二、按用途分类

HTML中有多种不同类型的元素,这些元素可以用来表示文本、图像、视频、链接、表格、表单页面结构等不同的内容结构。以下是HTML中常见的元素类型

  1. 文本元素: <h1> ~ <h6>、<p>,<span>用于文本的展示

  2. 超链接元素: <a>,用于创建链接到其他页面文档

  3. 多媒体元素: <img>、<video>、<audio>、<picture>、<source>,用于插入图像、视频和音频

  4. 列表元素: <ul>、<ol>、<li>,用于表示无序列表有序列表和列表项。

  5. 表格元素: <table>、<tr>、<th>、<td>,用于表示表格和表格的行和单元格。

  6. 表单元素: <form>、<input>、<button>、<textarea>、<select>等,用于创建表单,包括文本框单选按钮复选框下拉框等。

  7. 框架元素: <iframe>,用于嵌入其他网页文档

  8. 头部元素: <head>、<meta>、<title>等,用于定义文档头部信息,如标题、关键字描述作者字符编码等。

  9. 分区元素: <div>、<section>、<article>、<nav>、<aside>等,用于组织划分文档内容区块

  10. 样式类元素: <link>、<style>,用于连接外部样式表内部样式表
  11. 脚本元素: <script>,用于嵌入JavaScript代码。

  12. 区块级别的元素: <header>、<main>、<footer>等,用于标识文档中的不同区域

这些元素不仅构成了 HTML 文档基本结构,而且可以结合 CSS 和 JavaScript 等技术,实现更加丰富和复杂页面效果交互行为

原文地址:https://blog.csdn.net/lwf3115841/article/details/129052250

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任

如若转载,请注明出处:http://www.7code.cn/show_13563.html

如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱suwngjj01@126.com进行投诉反馈,一经查实,立即删除

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注