用好html的其他标签（2）打造网站精致外观

前端

2024-01-08 05:43:07

[正文]

1. 图像标签（img）

图像标签用于在网页中插入图像，可以通过src属性指定要插入的图像文件。图像标签还可以设置alt属性，当图像无法正常显示时，alt属性指定的内容将作为图像的替代文本显示出来。

2. 链接标签（a）

链接标签用于创建超链接，可以通过href属性指定要链接到的目标地址。链接标签还可以设置target属性，指定链接打开的方式，例如_blank表示在新窗口中打开链接。

3. 表格标签（table）

表格标签用于创建表格，可以通过tr、td和th标签来定义表格的行、列和表头。表格标签可以设置border属性来控制表格的边框样式，也可以设置cellpadding和cellspacing属性来控制表格中单元格的边距和间距。

4. 表单标签（form）

表单标签用于创建表单，可以通过input、select和textarea标签来定义表单中的输入框、下拉列表和文本域。表单标签还可以设置action属性来指定表单提交后的处理程序，也可以设置method属性来指定表单提交的方式。

5. 分隔符标签（div）

分隔符标签用于在网页中创建分隔符，可以通过style属性来设置分隔符的样式，例如背景颜色、边框样式和文字样式。分隔符标签可以用来分隔网页中的不同内容，也可以用来创建布局。

[实例]

<!DOCTYPE html>
<html>
<head>

</head>
<body>
<h1>欢迎来到我的网站</h1>
<p>这是一个简单的网站，使用了html的其他标签（2）来打造精致的外观。</p>
<img src="images/my_photo.jpg" alt="我的照片" />
<p>这是我的照片，我是一名web开发人员。</p>
<a href="about.html">关于我</a>
<p>点击上面的链接可以了解更多关于我的信息。</p>
<table>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>职业</th>
</tr>
<tr>
<td>张三</td>
<td>20</td>
<td>学生</td>
</tr>
<tr>
<td>李四</td>
<td>30</td>
<td>教师</td>
</tr>
<tr>
<td>王五</td>
<td>40</td>
<td>医生</td>
</tr>
</table>
<p>这是我的个人信息表格。</p>
<form action="submit.php" method="post">
<input type="text" name="name" placeholder="姓名" />
<input type="email" name="email" placeholder="邮箱" />
<input type="submit" value="提交" />
</form>
<p>这是我的联系表单，您可以在这里给我留言。</p>
<div style="background-color: #f0f0f0;padding: 10px;">
这是我的博客，我在这里分享我的技术文章。
</div>
<p>这是我的博客内容，我在这里分享我的技术文章。</p>
</body>
</html>