HTML标签与元素
HTML标签定义网页内容结构，掌握其语法是前端入门第一步。
标签基础语法
标签构成
HTML
<标签名>内容</标签名>
标签类型
| 类型 | 语法 | 示例 |
|---|---|---|
| 双标签 | <开始>内容</结束> | <p>文本</p> |
| 单标签 | <标签名> 或 <标签名/> | <br> <img> |
常用单标签
HTML
<br> <!-- 换行 -->
<hr> <!-- 水平线 -->
<img> <!-- 图像 -->
<input> <!-- 输入框 -->
<meta> <!-- 元信息 -->
<link> <!-- 外部资源 -->
元素与属性
元素结构
HTML
<p class="intro">这是一个段落元素</p>
属性规则
HTML
<标签名 属性名="属性值">内容</标签名>
<!-- 示例 -->
<a href="url" target="_blank">链接</a>
<img src="image.jpg" alt="描述">
<div id="container" class="wrapper"></div>
通用属性
| 属性 | 用途 | 示例 |
|---|---|---|
id | 唯一标识 | id="header" |
class | 类名 | class="btn primary" |
style | 行内样式 | style="color:red" |
title | 提示文本 | title="点击详情" |
标签嵌套规则
正确嵌套
HTML
<!-- 正确 -->
<div>
<p>段落<span>行内</span></p>
</div>
错误嵌套
HTML
<!-- 错误 -->
<div>
<p>段落<span>行内</p></span>
</div>
要点总结
- 标签成对：双标签必须正确闭合
- 属性规范：属性值必须用引号包裹
- 嵌套正确：标签层级必须完整闭合
- 语义明确：根据内容选择合适标签
