HTML标签列表学习笔记

引言

HTML标签是网页开发的基础，理解各种标签的作用和用法对于网页开发至关重要。本文将按字母顺序介绍HTML常用标签，并提供相应的实例。

标签列表

a标签

a标签用于创建超链接，可以指向外部网页、内部锚点以及各种资源文件。示例：

htmlCopy Code
<a href="https://www.baidu.com/">百度一下，你就知道</a>

br标签

br标签用于在文本中换行，没有结束标签。示例：

htmlCopy Code
<p>请阅读以下内容<br>如有疑问，请联系我们。</p>

div标签

div标签是最常用的容器标签，用于将页面分成独立的区域，并且可以通过CSS进行样式设置。示例：

htmlCopy Code
<div class="container">
  <h1>欢迎来到HTML教程</h1>
  <p>在这里你可以学到HTML的所有知识。</p>
</div>

form标签

form标签用于创建表单，可以包含输入框、下拉框、单选框、复选框等元素。示例：

htmlCopy Code
<form action="/submit.php" method="post">
  <input type="text" name="username">
  <input type="password" name="password">
  <button type="submit">提交</button>
</form>

h1~h6标签

h1~h6标签用于创建标题，其中h1是最高级的标题，h6是最低级的标题。示例：

htmlCopy Code
<h1>HTML教程</h1>
<h2>基础知识</h2>
<h3>文本格式化标签</h3>
<h4>字体标签</h4>
<h5>超链接标签</h5>
<h6>图片标签</h6>

img标签

img标签用于插入图片，可以设置图片来源、宽度、高度等属性。示例：

htmlCopy Code
<img src="https://www.example.com/images/logo.png" alt="品牌logo">

input标签

input标签用于收集用户输入的数据，可以创建文本框、密码框、单选框、复选框、按钮等控件。示例：

htmlCopy Code
<input type="text" name="username">
<input type="password" name="password">
<input type="radio" name="gender" value="male">男性
<input type="radio" name="gender" value="female">女性
<input type="submit" value="提交">

li标签

li标签用于创建无序列表或有序列表的每个选项。示例：

htmlCopy Code
<ul>
  <li>第一项</li>
  <li>第二项</li>
  <li>第三项</li>
</ul>
<ol>
  <li>第一项</li>
  <li>第二项</li>
  <li>第三项</li>
</ol>

p标签

p标签用于创建段落文本，默认有上下间距。示例：

htmlCopy Code
<p>HTML是一种用于创建网页的标准标记语言。</p>

span标签

span标签用于选定文本并应用样式，常用于为文本设置颜色、字体等特性。示例：

htmlCopy Code
<p>这是一段<span style="color:red">红色</span>字体。</p>

table标签

table标签用于创建表格，可以设置行列数、边框样式、单元格合并等属性。示例：

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

结论

本文介绍了HTML常用标签，并提供相应实例。熟练掌握这些标签，可以让你轻松地创建一个丰富多彩的网页。