HTML 元素

HTML 元素就像是构建网页这个神奇城堡的一块块独特积木🧱，每一个元素都有着自己专属的功能和样式，它们相互组合、搭配，就能创造出丰富多彩、各式各样的网页页面啦！无论是展示文字信息、插入精美图片，还是搭建复杂的表格、创建互动性强的表单，都离不开这些 HTML 元素小精灵的帮忙哦。接下来，让我们一起深入探索这个奇妙的 HTML 元素世界吧 (✿◠‿◠)。

文本元素

标题元素

用于定义网页中的标题，从 <h1> 到 <h6> 重要性递减，字体大小也逐渐变小，能清晰地展示网页内容的层次结构。

<h1>网页的主标题</h1>
<h2>这是一个二级标题</h2>
<h3>三级标题在此</h3>

段落元素

将文本划分成段落，使网页文字布局更清晰易读，每个 <p> 元素之间会自动换行并产生一定的间距。

<p>这是一段文字，它在网页上独立成段，方便阅读。</p>
<p>这是另一段文字，与上一段有明显的区分。</p>

文本格式化元素

• <b> 和 <strong> 元素

使文本加粗显示，<strong> 更强调文本的重要性，而 <b> 主要用于视觉上的突出。

<p>这个词用 <b>加粗</b> 来突出。</p>
<p><strong>重要信息</strong> 要特别注意哦！</p>

• <i> 和 <em> 元素

让文本呈现斜体效果，<em> 带有语义上的强调，<i> 常用于表示特定的文本，如外语单词、书籍名称等。

<p>我喜欢 <i>《哈利·波特》</i> 这本书。</p>
<p>她说话的语气 <em>很特别</em>。</p>

链接与图像元素

链接元素

创建超链接，通过 href 属性指定目标 URL，用户点击链接可跳转到其他网页或同一网页的特定位置，是网页导航的重要元素。

<a href="https://docx.qiovo.cn">点击跳转到示例网站</a>
<!-- 需配合相应的 `id="section2"` 元素使用 -->
<a href="#section2">跳到网页内的“xiaoqi”部分</a>

图像元素

在网页上展示图片，通过 src 属性指定图片的路径，alt 属性提供图片的替代文本，用于在图片无法加载时显示或帮助搜索引擎理解图片内容。

<img src="bang.jpg" alt="一张捷风的宣传照">

列表元素

无序列表

创建无序列表，列表项前通常有默认的标记（如小圆点），用于展示一组无序的项目，使信息罗列更加清晰。

<ul>
  <li>苹果</li>
  <li>香蕉</li>
  <li>橙子</li>
</ul>

有序列表

生成有序列表，列表项会按照顺序自动编号，适用于呈现有步骤或顺序的内容，如操作指南、排行榜等。

<ol>
  <li>打开网页</li>
  <li>登录账号</li>
  <li>进行操作</li>
</ol>

表格元素

构建表格结构，<table> 定义表格整体，<tr> 表示表格行，<td> 是普通单元格，<th> 用于表头单元格，使数据以表格形式清晰呈现，便于对比和查看。

<table>
  <tr>
    <th>姓名</th>
    <th>年龄</th>
    <th>性别</th>
  </tr>
  <tr>
    <td>小琦</td>
    <td>15</td>
    <td>女</td>
  </tr>
</table>

表单元素

<form> 元素

作为表单的容器，定义表单的开始和结束，通过 action 属性指定表单数据提交的目标 URL，method 属性确定提交数据的方式（如 get 或 post）。

<form action="submit.php" method="post">
  <!-- 表单内容 -->
</form>

<input> 元素

根据 type 属性的不同，呈现多种表单输入控件，如文本框、密码框、单选按钮、复选框、提交按钮等，用于收集用户输入的各种类型信息。

<input type="text" name="username" placeholder="请输入用户名"> （文本框）
<input type="password" name="password" placeholder="输入密码"> （密码框）
<input type="radio" name="gender" value="male"> 男 （单选按钮）
<input type="checkbox" name="hobby" value="reading"> 阅读 （复选框）
<input type="submit" value="提交"> （提交按钮）

<textarea> 元素

提供一个多行文本输入区域，用户可以输入较长的文本内容，如留言、评论等，通过 rows 和 cols 属性可大致设定文本区域的行数和列数。

<textarea rows="5" cols="30">在这里写下您的留言吧。</textarea>

<select> 元素

创建下拉菜单，包含多个 <option> 元素，每个 <option> 代表一个菜单项，用户可从中选择一个选项，适用于有限选项的选择场景，如选择地区、类别等。

<select name="city">
  <option value="beijing">北京</option>
  <option value="shanghai">南昌</option>
  <option value="guangzhou">赣州</option>
</select>

<button> 元素

创建可点击的按钮，通过 type 属性可设置按钮的类型（如 submit 用于提交表单，reset 用于重置表单，还可自定义 onclick 等事件处理函数），用于触发特定的操作。

<button type="submit">提交表单</button>
<button type="reset">重置表单</button>
<button onclick="myFunction()">点击执行自定义函数</button>

这些只是 HTML 元素中的一部分常见元素哦，通过巧妙地运用它们，你就能创造出各种各样精彩的网页啦！继续探索和实践，你会发现更多 HTML 元素的神奇之处哦！(ง・̀_・́)ง