HTML代码常用
发布日期：2025-06-19 18:18:07
HTML基本结构
HTML文档有其固定的基本结构。首先是文档类型声明，使用<!DOCTYPE html>，这告诉浏览器文档使用的是HTML5标准。接着是HTML根标签<html>，所有的HTML内容都包含在这个标签内。
在HTML标签内，有两个重要的子标签。<head>标签用于包含文档的元数据，如页面标题、字符编码、引用的外部样式表和脚本等。例如：
<head>
<meta charset="UTF-8">
<title>页面标题</title>
<link rel="stylesheet" href="styles.css">
<script src="script.js"></script>
</head>
<body>标签则包含了页面的可见内容，如文本、图像、链接等。
文本标签
文本标签用于在页面上显示文字。<p>标签用于定义段落，每个段落会自动换行。<h1> - <h6>标签用于定义标题，<h1>是最大的标题，<h6>是最小的标题。
<strong>标签用于强调文本，通常显示为粗体；<em>标签用于强调文本，通常显示为斜体。例如：
<p>这是一个普通段落。</p>
<h2>这是一个二级标题</h2>
<strong>这段文本被强调了。</strong>
<em>这段文本也被强调了。</em>
列表标签
HTML中有两种常见的列表：无序列表和有序列表。无序列表使用<ul>标签，列表项使用<li>标签，列表项前会显示一个圆点。例如：
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ul>
有序列表使用<ol>标签，列表项同样使用<li>标签，列表项前会显示数字序号。
图像标签
使用<img>标签可以在页面上显示图像。该标签需要指定图像的源文件路径（src属性）和替代文本（alt属性）。例如：
<img src="image.jpg" alt="这是一张图片">
替代文本在图像无法加载时显示，同时也有助于搜索引擎优化（SEO）。
链接标签
<a>标签用于创建链接。需要指定链接的目标地址（href属性）。例如：
<a href="https://www.example.com">访问示例网站</a>
还可以使用target属性指定链接的打开方式，如在新窗口中打开：
<a href="https://www.example.com" target="_blank">在新窗口访问示例网站</a>
表格标签
表格用于展示数据。使用<table>标签定义表格，<tr>标签定义表格行，<th>标签定义表头单元格，<td>标签定义普通单元格。例如：
<table>
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td>张三</td>
<td>25</td>
</tr>
<tr>
<td>李四</td>
<td>30</td>
</tr>
</table>
表单标签
表单用于收集用户输入。使用<form>标签定义表单，常见的表单元素有输入框（<input>）、下拉列表（<select>）、文本域（<textarea>）等。例如：
<form action="submit.php" method="post">
<label for="name">姓名：</label>
<input type="text" id="name" name="name"><br>
<label for="email">邮箱：</label>
<input type="email" id="email" name="email"><br>
<input type="submit" value="提交">
</form>
相关问答
1. 为什么要在图像标签中使用alt属性？
在图像标签中使用alt属性有两个重要原因。一是当图像无法加载时，alt属性指定的替代文本会显示出来，让用户知道这里原本应该显示什么内容。二是搜索引擎会读取alt属性的内容，有助于提高页面的搜索引擎优化（SEO）效果，使页面在搜索结果中更容易被找到。
2. 表单中的action和method属性分别有什么作用？
表单中的action属性指定了表单数据提交的目标地址，即当用户点击提交按钮时，表单数据会被发送到这个地址进行处理。method属性则指定了表单数据的提交方式，常见的有get和post两种。get方式会将表单数据附加在URL后面，适合用于获取数据；post方式会将表单数据放在请求体中，更适合用于提交敏感信息或大量数据。