HTML5元素介绍

1. 块元素

块元素在浏览器中会以新行开始和结束，通常会独占一行，其宽度默认为父元素的100%，可以设置宽度和高度。

常用块元素及场景：

• <div>：通用容器，用于页面布局。
• <p>：用于显示大段文本。
• <h1> - <h6>：定义标题，用于文章标题、模块标题等。
• <ul> 和 <ol>：分别用于无序列表和有序列表。
• <li>：定义列表项。
• <table>：用于显示结构化数据。
• <form>：用于创建表单。
• <header>：定义页面头部。
• <nav>：定义导航菜单。
• <footer>：定义页面尾部。
• <section>：定义页面的一个节。
• <article>：定义独立的内容。

2. 行元素

行元素不会独占一行，可以与其他行元素并排显示，不能设置宽度和高度，宽度由内容决定。

常用行元素及场景：

• <span>：用于对文本的部分进行样式调整。
• <a>：用于创建超链接。
• <img>：用于插入图片。
• <strong>：用于加粗文本。
• <em>：用于强调文本。
• <br>：用于强制换行。
• <input>：用于创建表单输入框。
• <select>：用于创建下拉列表。
• <button>：用于创建按钮。

3. 兼具两种属性的元素

以下元素既可以表现得像块元素，也可以表现得像行元素：

• <input>：默认为行内块元素，可以设置宽度和高度。
• <img>：默认为行内块元素，可以设置宽度和高度。
• <textarea>：可以设置宽度和高度，也可以通过CSS设置为行内块元素。
• <button>：默认为行内块元素，可以设置宽度和高度。