Html基础学习系列 第四篇【HTML 元素的分类和属性 】

Html基础学习系列
第一篇 【HTML 的定义和起源 】
第二篇 【HTML 的版本和演变 】
第三篇 【HTML 标记的语法和结构 】
第四篇 【HTML 元素的分类和属性 】
第五篇 【HTML 文档的结构和基本布局】

---

Html进阶学习系列一 常用元素和属性

第一篇 【文本元素 】
如 h1 、p 、a 等
第二篇 【图像元素 】
（如 img）
第三篇 【表格元素 】
（如 table 、tr、td 等）
第四篇 【表单元素】
（如 <form、input、textarea 等）
第五篇 【媒体元素】
（如 audio、video、source 等）
第六篇 【其他常用元素】
（如 div、span、ul、ol、li 等）
第七篇 【常用属性】
（如 id、class、style、href、src、alt、title 等）

---

Html进阶学习系列二 页面布局和样式
第一篇 【HTML 的基本布局 】
（如 head、body、header、footer 等）
第二篇 【CSS 的基本语法和选择器 】
第三篇 【常用 CSS 样式 】
（如文本样式、盒子模型、布局样式、背景和边框样式等）
第四篇 【CSS 媒体查询和响应式布局】
第五篇 【常用 CSS 框架】
（如 Bootstrap、Foundation 等）

---

HTML 元素的分类和属性

HTML 元素可以分为以下几类：

块级元素（Block-level Elements）

块级元素指的是默认情况下会在页面中生成一个块级盒子的元素。块级元素通常被用来组织文档的结构，例如标题、段落、列表、表格等。它通常会独占一行，从上至下按顺序排列。块级元素可以设置宽度、高度、内边距和外边距(margin、padding、border )等样式属性。常见的块级元素包括：

div：用于划分文档的不同部分，通常结合CSS来设置样式；
p：用于表示段落，会在段落前后添加空白，可以设置文本的对齐方式；
h1~h6：用于表示标题，重要性逐级递减；
ul、ol：用于表示无序列表和有序列表；
li：用于表示列表项。

内联元素（Inline Elements）

内联元素也称行内元素，指的是默认情况下不会在页面中生成一个块级盒子的元素。它通常会和其他元素在一行上排列，并只占用所需的宽度空间，不能设置宽度、高度(width、height )和外边距(margin、padding、border )等属性。
内联元素通常用来包裹文本内容，例如强调、链接、图片等。内联元素不会在页面中新起一行，宽度和高度由包含它的父元素决定，不可以设置 等样式属性。
常见的内联元素包括：

a：用于表示超链接，可以在网页中跳转到其他页面或位置；
span：用于划分文本的不同部分，通常结合CSS来设置样式；
img：用于表示图片；
strong、em：用于表示强调的文本；
input：用于表示表单中的输入框。

行内块级元素（Inline-block Elements）

行内块级元素继承了内联元素不换行的特性，它和其他元素在一行上排列 ,但是可以设置宽度、高度、(width、height padding、border、margin )等样式属性。
常见的行内块级元素包括：

button：用于表示按钮； input[type=“button”]：用于表示按钮；
input[type="checkbox"]：用于表示多选框；
input[type="radio"]：用于表示单选框；
input[type="image"]：用于表示图像按钮；
select：用于表示下拉列表。

HTML 元素还可以具有一些属性，属性是可以添加到 HTML 元素的额外信息。常用的 HTML 属性有以下几种：

class：为 HTML 元素定义一个或多个类名，用于样式表中的元素选择器。

id：为 HTML 元素定义唯一的标识符。

style：为 HTML 元素定义内联样式。

title：为 HTML 元素定义额外的信息，通常在鼠标移到元素上时显示为工具提示。

href：定义链接的目标 URL。

src：定义图像的 URL。

alt：定义图像的替代文本。

需要注意的是，元素的显示类型可以通过CSS来修改，即使是默认的块级元素也可以通过CSS设置为内联元素或行内块级元素，反之亦然。