HTML文档的核心组成部分
HTML文档由三个基本构件组成：标签、属性和元素。理解这些组件的协同工作是学习网页开发的基础。1.HTML标签
标签是HTML的语法基础，用于定义内容在浏览器中的显示方式或行为特征。大多数HTML标签成对出现，包含开始标签和结束标签。
语法结构：
<tagname>内容区域</tagname>
开始标签（如<p>）标识元素起始位置，结束标签（如</p>）标识元素结束位置。两标签之间的内容受标签功能影响。部分标签为自闭合标签，不需要内容区域，例如换行标签<br>和图像标签<img>。
2.HTML属性
属性为元素提供附加信息，通常设置在开始标签内。属性由名称和值组成，名称指示属性类型，值定义具体参数。
语法示例：
<tagname attribute="value">内容</tagname>
实际应用：
<p style="color:blue;">此段落文本显示为蓝色</p>
<img src="photo.jpg" alt="风景图片" width="400" height="300" />
<a href="https://.example.com">访问示例网站</a>
常用属性包括style（样式）、src（资源路径）、href（超链接）、alt（替代文本）和class（类名），这些属性显著增强了HTML的表现力和功能性。3.HTML元素
HTML元素由开始标签、内容和结束标签共同组成。浏览器将这些元素解析为可视化内容，如标题、段落、列表和图像等。
代码示例：
<!DOCTYPE html>
<html>
<head>
<title>HTML 基础构件</title>
</head>
<body>
<h2>基本构建模块</h2>
<p>这是一个段落元素</p>
<p style="color: red">style是段落元素的属性</p>
<span>元素包含标签、属性和内容</span>
</body>
</html>
HTML文档结构规范
所有HTML文档都遵循特定的结构框架，以下是一个标准文档结构：
<!DOCTYPE html>
<html>
<head>
<title>网页标题</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>这是一个简单网页示例</p>
</body>
</html>
结构元素说明：<!DOCTYPE html>：声明文档类型为HTML5
<html>：文档根容器
<head>：包含元数据（如字符集、视口设置和外部资源链接）
<title>：定义浏览器标签页显示的标题
<body>：包含所有可见内容（文本、图像、交互控件等）
元素嵌套规则
HTML支持元素嵌套，即一个元素包含其他元素，这种层次结构对内容组织至关重要。
嵌套示例：
<body>
<div>
<h2>嵌套结构示例</h2>
<p>此段落嵌套在div元素内</p>
</div>
</body>
上例中，<p>和<h2>元素以<div>作为父级容器。块级与行内元素
块级元素
块级元素独立占据一行，默认宽度为父容器的100%。常见块级元素包括：<p>,<h1>-<h6>,<section>,<article>,<table>。
示例：
<p>这是一个块级段落元素</p>
行内元素行内元素仅占据内容所需宽度，与相邻内容同行显示。常见行内元素包括：<span>,<a>,<img>,<strong>,<em>,<input>。
示例：
<p>这是段落中的<strong>加粗文本</strong></p>
文本格式化标签
HTML提供多种文本格式化标签（无需CSS即可使用）：标签描述
<strong>重要文本（加粗）
<em>强调文本（斜体）
<u>下划线文本
<mark>标记高亮文本
<del>删除线文本
<small>小号文本
列表元素
HTML提供三种列表类型：
无序列表
用于顺序无关的项目列表，通常显示为项目符号列表：
<ul>
<li>HTML</li>
<li>CSS</li>
</ul>
有序列表用于顺序重要的项目列表，自动编号：
<ol>
<li>第一步</li>
<li>第二步</li>
</ol>
定义列表用于术语及其定义的展示：
<dl>
<dt>HTML</dt>
<dd>创建网页的标准标记语言</dd>
</dl>
超链接与媒体嵌入
超链接通过<a>标签创建指向其他资源的链接：
<a href="https://www.ebingou.cn">访问示例网站</a>
图像嵌入使用<img>标签嵌入图像，需指定src属性和可选的alt属性：
<img src="logo.png" alt="示例Logo" width="200" />
alt属性提供替代文本，增强可访问性和搜索引擎优化。表格结构
表格用于行列形式的数据组织：
<table>
<thead>
<tr><th>姓名</th><th>年龄</th></tr>
</thead>
<tbody>
<tr><td>Alice</td><td>28</td></tr>
<tr><td>Bob</td><td>32</td></tr>
</tbody>
</table>
表单元素表单用于收集用户输入数据：
<form>
<label>姓名:</label>
<input type="text" name="username" />
<button type="submit">提交</button>
</form>
HTML5语义化标签
HTML5引入语义化元素，明确描述内容的含义和角色：（只了解后面课程再讲）<header>：页面或区域的顶部内容
<footer>：页面或区域的底部内容
<nav>：导航链接
<main>：页面主要内容区域
<section>：文档中的独立部分
<article>：自包含的可独立分配内容
使用语义化标签可提升可访问性、改进搜索引擎优化，并使代码结构更清晰易维护。
HTML通过标签、属性和元素的组合，构建了网页内容的结构框架。掌握这些核心概念后，开发者能够创建包含标题、段落、图像、表单和导航链接的标准网页。深入学习这些基础知识为后续学习CSS样式设计和JavaScript交互功能奠定了坚实基础。
