HTML 元素详解：类型、属性和示例 - 前端开发基础

HTML 元素是构成 HTML 文档的基本单位，可以理解为 HTML 页面中的各种标签。HTML 元素由开始标签、结束标签和标签内容组成。开始标签和结束标签分别用尖括号 < 和 > 包裹，标签名位于尖括号之间，结束标签在标签名前加上斜杠 /。标签可以包含属性和属性值，属性和属性值以属性名=属性值的形式出现在开始标签中。

常见的 HTML 元素

1. 文本元素

用于显示文本内容，如段落、标题、文本链接等。

<p>这是一个段落。</p>
<h1>这是一级标题</h1>
<a href='http://www.example.com'>这是一个链接</a>

2. 表单元素

用于收集用户输入的数据，如文本框、单选框、复选框、下拉框等。

<form>
  <label>用户名：<input type='text' name='username'></label><br>
  <label>密码：<input type='password' name='password'></label><br>
  <label>性别：<input type='radio' name='gender' value='male'>男<input type='radio' name='gender' value='female'>女</label><br>
  <label>爱好：<input type='checkbox' name='hobby' value='reading'>阅读<input type='checkbox' name='hobby' value='music'>音乐</label><br>
  <label>城市：<select name='city'><option value='beijing'>北京</option><option value='shanghai'>上海</option></select></label><br>
  <input type='submit' value='提交'>
</form>

3. 图像元素

用于显示图像，如图片、图标等。

<img src='http://www.example.com/image.jpg' alt='图片描述'>

4. 多媒体元素

用于嵌入音频、视频等多媒体内容。

<audio src='http://www.example.com/audio.mp3' controls>您的浏览器不支持 audio 元素。</audio>
<video src='http://www.example.com/video.mp4' controls>您的浏览器不支持 video 元素。</video>

5. 按钮元素

用于触发事件或提交表单。

<button onclick='alert('Hello World!')'>点击我</button>
<input type='submit' value='提交'>

6. 列表元素

用于显示有序或无序列表。

<ul>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
</ul>
<ol>
  <li>有序列表项1</li>
  <li>有序列表项2</li>
  <li>有序列表项3</li>
</ol>

7. 表格元素

用于显示表格。

<table>
  <tr>
    <th>姓名</th>
    <th>年龄</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>20</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>22</td>
  </tr>
</table>

以上是 HTML 元素的常见类型和示例。HTML 元素非常丰富，可以根据需要灵活运用。