Appearance
HTML 元素
什么是 HTML 元素
HTML 元素是 HTML 页面的基本构建块。一个 HTML 元素通常由开始标签、内容和结束标签组成。
元素的组成
html
<标签名>内容</标签名>示例：
html
<h1>这是标题</h1>
<p>这是段落内容</p>
<strong>这是重要文本</strong>元素的语法规则
1. 开始标签和结束标签
- 开始标签：
<标签名> - 结束标签：
</标签名>（注意斜杠）
html
<p>段落内容</p>
<h1>标题内容</h1>2. 自闭合元素
某些元素不需要结束标签：
html
<br> <!-- 换行 -->
<hr> <!-- 水平线 -->
<img> <!-- 图片 -->
<input> <!-- 输入框 -->
<meta> <!-- 元数据 -->3. 空元素
没有内容的元素称为空元素：
html
<br> <!-- 简写形式 -->
<br /> <!-- XHTML 风格 -->
<img src="photo.jpg"> <!-- 只有属性 -->
<hr> <!-- 分割线 -->元素的分类
1. 块级元素 (Block Elements)
块级元素占据整行，前后会自动换行。
特点：
- 独占一行
- 可以设置宽度、高度
- 可以包含其他块级和行内元素
常用块级元素：
html
<h1>-<h6> <!-- 标题 -->
<p> <!-- 段落 -->
<div> <!-- 通用容器 -->
<ul> <!-- 无序列表 -->
<ol> <!-- 有序列表 -->
<li> <!-- 列表项 -->
<blockquote> <!-- 引用块 -->
<form> <!-- 表单 -->
<table> <!-- 表格 -->示例：
html
<h1>这是标题</h1>
<p>这是第一个段落。</p>
<p>这是第二个段落。</p>
<div>这是一个div容器</div>2. 行内元素 (Inline Elements)
行内元素不会独占一行，只占据内容所需的空间。
特点：
- 不换行
- 不能设置宽度、高度
- 只能包含文本或其他行内元素
常用行内元素：
html
<span> <!-- 通用行内容器 -->
<a> <!-- 链接 -->
<strong> <!-- 重要文本 -->
<em> <!-- 强调文本 -->
<b> <!-- 粗体 -->
<i> <!-- 斜体 -->
<small> <!-- 小号文本 -->
<code> <!-- 代码 -->示例：
html
<p>这是一个包含 <strong>重要文本</strong> 和 <em>强调文本</em> 的段落。</p>
<p>访问 <a href="#">这个链接</a> 了解更多信息。</p>3. 行内块元素 (Inline-Block Elements)
结合了块级和行内元素的特点。
特点：
- 不独占一行
- 可以设置宽度、高度
- 可以与其他元素并排显示
常用行内块元素：
html
<img> <!-- 图片 -->
<input> <!-- 输入框 -->
<button> <!-- 按钮 -->元素嵌套规则
1. 基本嵌套规则
正确嵌套：
html
<div>
<h1>标题</h1>
<p>段落内容</p>
</div>错误嵌套：
html
<p>
<h1>标题</h1> <!-- h1是块级元素，不能放在p里 -->
</p>2. 块级元素嵌套规则
- 可以包含行内元素
- 可以包含其他块级元素
- 某些特殊元素有限制（如
<p>不能包含块级元素）
html
<div>
<h2>小节标题</h2>
<p>段落文本</p>
<ul>
<li>列表项</li>
</ul>
</div>3. 行内元素嵌套规则
- 只能包含文本或其他行内元素
- 不能包含块级元素
html
<p>这是 <strong>重要的 <em>强调文本</em></strong></p>常用 HTML 元素详解
文本元素
html
<!-- 标题元素 -->
<h1>最重要的标题</h1>
<h2>次重要的标题</h2>
<h3>三级标题</h3>
<!-- 段落和文本 -->
<p>普通段落文本</p>
<strong>重要文本（语义上重要）</strong>
<b>粗体文本（视觉上粗体）</b>
<em>强调文本（语义上强调）</em>
<i>斜体文本（视觉上斜体）</i>
<!-- 其他文本元素 -->
<small>小号文本</small>
<mark>高亮文本</mark>
<del>删除的文本</del>
<ins>插入的文本</ins>
<sub>下标</sub>
<sup>上标</sup>容器元素
html
<!-- 通用容器 -->
<div>块级通用容器</div>
<span>行内通用容器</span>
<!-- 语义化容器 -->
<header>页面或区域头部</header>
<nav>导航区域</nav>
<main>主要内容</main>
<section>文档区段</section>
<article>文章内容</article>
<aside>侧边栏内容</aside>
<footer>页面或区域脚部</footer>分组元素
html
<!-- 换行和分割 -->
<br> <!-- 换行 -->
<hr> <!-- 水平分割线 -->
<!-- 引用 -->
<blockquote>
这是一个长引用块
</blockquote>
<!-- 预格式化文本 -->
<pre>
保持原有的
空格和换行
</pre>
<!-- 代码 -->
<code>var x = 10;</code>元素的语义化
为什么要语义化
- 可访问性：屏幕阅读器能更好地理解内容
- SEO：搜索引擎能更好地理解页面结构
- 可维护性：代码更易读和维护
语义化示例
不好的写法：
html
<div class="title">文章标题</div>
<div class="content">文章内容...</div>好的写法：
html
<h1>文章标题</h1>
<p>文章内容...</p>实践练习
创建一个包含以下元素的 HTML 页面：
- 使用不同级别的标题
- 创建几个段落
- 使用强调和重要文本
- 添加换行和水平线
- 使用 div 和 span 容器
示例结构：
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>HTML 元素练习</title>
</head>
<body>
<h1>我的博客</h1>
<h2>今日文章</h2>
<p>这是文章的第一段，包含一些 <strong>重要信息</strong>。</p>
<p>这是第二段，有 <em>强调内容</em> 和普通文本。</p>
<hr>
<h3>关于我</h3>
<p>我是一个 <span>HTML</span> 学习者。</p>
</body>
</html>常见错误
1. 元素嵌套错误
html
<!-- 错误 -->
<p><div>内容</div></p>
<!-- 正确 -->
<div><p>内容</p></div>2. 忘记闭合标签
html
<!-- 错误 -->
<p>段落内容
<p>另一个段落
<!-- 正确 -->
<p>段落内容</p>
<p>另一个段落</p>3. 滥用 div 和 span
html
<!-- 不推荐 -->
<div>标题</div>
<!-- 推荐 -->
<h1>标题</h1>小结
- HTML 元素是网页的基本构建块
- 元素分为块级、行内和行内块三种类型
- 正确的嵌套很重要
- 选择语义化的元素比通用元素更好
- 理解元素特性有助于页面布局
下一章我们将学习 HTML 属性，进一步丰富元素的功能。