Appearance
3. HTML基础语法（入门第一步，必学基础，SEO重点）
3.1 HTML文档结构
基本结构
一个完整的HTML文档包含以下基本结构：
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>页面标题</title>
</head>
<body>
<!-- 页面内容 -->
</body>
</html>各部分说明
<!DOCTYPE html>：DOCTYPE声明，告诉浏览器使用HTML5标准解析页面<html>：根标签，包含整个HTML文档lang="zh-CN"：指定页面语言为中文
<head>：头部标签，包含页面的元信息<meta charset="UTF-8">：指定字符编码为UTF-8<meta name="viewport" content="width=device-width, initial-scale=1.0">：设置视口，适配移动设备<title>：设置页面标题，显示在浏览器标签栏
<body>：主体标签，包含页面的可见内容
3.2 HTML标签规则
标签的基本格式
- 开始标签：如
<h1> - 结束标签：如
</h1> - 内容：位于开始标签和结束标签之间
- 自闭合标签：如
<img>、<br>、<hr>等，不需要结束标签
标签嵌套规则
- 标签必须正确嵌套，不能交叉
- 子标签必须完全包含在父标签内
正确示例：
html
<div>
<p>这是一个段落</p>
</div>错误示例：
html
<div>
<p>这是一个段落
</div>
</p>3.3 HTML属性
属性的基本格式
属性是标签的附加信息，格式为 属性名="属性值"，写在开始标签中。
常用属性
| 属性名 | 描述 | 示例 |
|---|---|---|
class | 为元素指定类名 | <div class="container"> |
id | 为元素指定唯一标识符 | <div id="header"> |
src | 指定资源路径（用于图片、视频等） | <img src="image.jpg"> |
href | 指定链接地址（用于链接） | <a href="https://www.example.com"> |
alt | 为图片指定替代文本（SEO重点） | <img alt="示例图片"> |
title | 为元素指定提示文本 | <a title="访问示例网站"> |
style | 为元素指定内联样式 | <div style="color: red;"> |
3.4 HTML注释
注释的格式
- 单行注释：
<!-- 注释内容 --> - 多行注释：
<!-- 注释内容 多行注释 注释结束 -->
注释的作用
- 解释代码的功能
- 暂时禁用某些代码
- 提高代码的可读性和可维护性
3.5 新手必知：HTML代码规范与命名习惯
代码规范
- 缩进：使用4个空格或1个制表符进行缩进
- 大小写：HTML标签和属性名推荐使用小写
- 引号：属性值使用双引号包围
- 换行：每个标签占一行，方便阅读
命名习惯
- class和id命名：使用语义化的名称，如
header、nav、footer等 - 文件命名：使用小写字母，单词之间用连字符
-分隔，如index.html、about-us.html - 目录结构：合理组织文件和文件夹，如
css/、js/、images/等
3.6 随堂练习：编写第一个简单网页
练习目标
创建一个包含标题、段落、图片的简单网页。
代码示例
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的第一个网页</title>
</head>
<body>
<!-- 页面标题 -->
<h1>欢迎来到我的网站</h1>
<!-- 段落 -->
<p>这是我的第一个HTML网页，包含了标题、段落和图片。</p>
<p>HTML是网页开发的基础，通过学习HTML，我可以创建各种网页结构。</p>
<!-- 图片 -->
<img src="https://trae-api-cn.mchost.guru/api/ide/v1/text_to_image?prompt=web%20development%20concept&image_size=landscape_16_9" alt="网页开发概念图">
<!-- 列表 -->
<h2>我学习的技术</h2>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</body>
</html>小结
HTML基础语法是学习HTML的第一步，掌握好这些基础概念，对于后续的学习非常重要。通过正确使用HTML标签和属性，可以创建结构清晰、语义化的网页，为后续的CSS美化和JavaScript交互打下良好的基础。