一、HTML 是什么？为什么学它？
- 定义：HTML（HyperText Markup Language，超文本标记语言）是用来描述网页的一种语言，它通过「标签」定义页面的结构和内容（文字、图片、链接、表单等）。
- 注意：HTML 不是编程语言，而是「标记语言」（用标签标记内容的语义和结构），不负责样式（交给 CSS）和交互（交给 JavaScript）。
- 作用：所有网页的基础都是 HTML，它是前端开发的「骨架」—— 没有 HTML，CSS 和 JS 就没有作用的对象。
二、HTML 文档的基本结构
一个完整的 HTML 文档有固定的结构，就像写文章要有开头、正文、结尾一样。
基础结构代码：
<!DOCTYPE html> <!-- 声明文档类型：告诉浏览器这是 HTML5 文档 -->
<html lang="zh-CN"> <!-- 根标签：整个页面的包裹容器，lang="zh-CN" 表示中文页面 -->
<head> <!-- 头部：存放页面的元信息（不直接显示在页面上） -->
<meta charset="UTF-8"> <!-- 编码格式：必须写，避免中文乱码（UTF-8 是通用编码） -->
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 适配移动端：让页面在手机上正常显示 -->
<title>我的第一个 HTML 页面</title> <!-- 页面标题：显示在浏览器标签栏 -->
</head>
<body> <!-- 身体：存放页面的可见内容（所有用户能看到的东西都在这里） -->
<h1>你好，HTML！</h1>
<p>这是我的第一个 HTML 页面。</p>
</body>
</html>
结构说明：
<!DOCTYPE html>：必须放在第一行，告诉浏览器用 HTML5 标准解析页面（不写可能导致兼容性问题）。<html>：根标签，所有其他标签都必须放在<html>和</html>之间。<head>：存放「元数据」，比如页面标题、编码、引入的外部文件（CSS/JS）等，这些内容不会显示在页面上。<body>：存放页面的「可见内容」，比如文字、图片、按钮等，用户打开页面看到的内容都在这里。
三、HTML 标签的核心规则
所有 HTML 功能都通过「标签」实现，掌握标签的规则是关键。
（1） 标签的基本格式
- 大多数标签是「成对出现」的：
<标签名>内容</标签名>（比如<p>段落内容</p>）。 - 少数标签是「单标签」（自闭合标签）：不需要结束标签，格式为
<标签名>或<标签名/>（HTML5 中推荐省略/，比如<br>、<img>）。
（2）标签的属性
标签可以通过「属性」添加额外信息，格式：<标签名 属性1="值1" 属性2="值2">。
- 属性必须写在开始标签中，用空格分隔。
- 属性值通常用双引号包裹（规范写法）。
- 示例：
<img src="cat.jpg" alt="一只猫" width="300">（src、alt、width都是属性）。
（3）标签的嵌套
标签可以嵌套，但必须「正确嵌套」（不能交叉嵌套）。
- 正确：
<p>这是<strong>重要</strong>内容</p>（<strong>完全在<p>内部）。 - 错误：
<p>这是<strong>错误</p></strong>（交叉嵌套，浏览器可能解析错乱）。
四、常用标签详解
按功能分类讲解，每个标签都附实际用法。
（1）文本内容类标签（呈现文字信息）
用于展示标题、段落、列表等文本内容，核心是明确文本的「语义」（比如 “这是标题” 还是 “这是段落”）。
- 标题标签：
<h1>到<h6>表示不同级别的标题，<h1>级别最高（页面中建议只出现一次，通常是网站标题），<h6>级别最低。
```html
一级标题（最大）
二级标题
三级标题
四级标题
五级标题
六级标题（最小）
```
效果：浏览器会自动为标题添加加粗和上下间距，级别越低字体越小。
- 段落标签：
<p>表示一个段落，浏览器会自动在段落前后添加空白（换行 + 间距）。
```html
这是第一个段落。HTML 中的多个空格或换行，在浏览器中会被解析为一个空格。
这是第二个段落。如果需要强制换行，要用 <br> 标签（后面会讲）。
```
- 换行标签：
<br>单标签，强制换行（段落内换行用<br>，段落间分隔用<p>）。
```html
床前明月光，
疑是地上霜。
举头望明月，
低头思故乡。
```
-
文本强调标签：
<strong>和<em> -
<strong>：表示「重要内容」，浏览器默认加粗显示（有语义，不是单纯为了样式）。 <em>：表示「强调内容」，浏览器默认斜体显示（同样有语义）。
```html
警告：请勿触摸电源，否则可能 导致触电。
```
-
列表标签：有序列表
<ol>、无序列表<ul>、列表项<li> -
无序列表
<ul>：列表项前默认是圆点（常用于导航、选项等无顺序的内容）。 - 有序列表
<ol>：列表项前默认是数字（常用于步骤、排名等有顺序的内容）。 - 列表项
<li>：必须嵌套在<ul>或<ol>中，表示每个列表项。
```html
我的爱好：
- 打篮球
- 听音乐
- 写代码
学习步骤：
- 学习 HTML
- 学习 CSS
- 学习 JavaScript
```
（2）媒体与链接类标签（展示图片、视频、链接）
-
图片标签：
<img>单标签，用于插入图片，核心属性： -
src：图片的路径（必须写，否则图片无法显示）。 alt：图片加载失败时显示的替代文本（必须写，用于无障碍访问和 SEO）。width/height：图片的宽度 / 高度（单位是像素，只写一个会自动等比例缩放）。
```html
```
注意：src 路径错误时，浏览器会显示一个破碎图片图标，并显示 alt 的文字。
-
超链接标签：
<a>用于跳转页面或链接到资源，核心属性： -
href：链接的目标地址（必须写，值可以是：网页 URL、本地 HTML 文件路径、邮箱、电话等）。 target：指定链接打开方式（_self是默认值，在当前窗口打开；_blank在新窗口打开）。
```html
第一章：HTML 基础
```
注意：href 如果暂时没有目标，可以写 href="#"（表示空链接，点击不会跳转）。
-
视频标签：
<video>用于插入视频，核心属性： -
src：视频路径（本地或网络地址）。 controls：显示播放控件（必须加，否则视频无法操作）。width：视频宽度。autoplay：自动播放（部分浏览器需要配合muted静音才能生效）。
```html
```
（3）结构容器类标签（划分页面区域）
用于将页面划分为不同区域（如头部、导航、正文、底部），核心是「语义化」—— 用有含义的标签替代无意义的 <div>。
-
通用容器：
<div>和<span> -
<div>：块级容器（独占一行，可用于大区域划分，如导航栏、内容区）。 -
<span>：行内容器（不独占一行，用于包裹小段文本，如高亮某个词）。（两者本身无语义，主要用于配合 CSS 控制样式）
```html
用户信息
姓名：张三
年龄：25
```
- 语义化结构标签（HTML5 新增，推荐优先使用）这些标签本身有明确含义，让代码更易读，同时帮助搜索引擎和屏幕阅读器理解页面结构。
| 标签 | 含义 | 示例场景 |
|---|---|---|
<header> |
页面或区域的头部 | 网站 Logo、标题、导航栏 |
<nav> |
导航区域 | 首页、关于我们、联系我们等链接 |
<main> |
页面的核心内容（唯一） | 文章正文、商品列表 |
<article> |
独立的内容块（可单独存在） | 一篇文章、一条评论 |
<section> |
页面中的一个区块（主题相关） | 章节、商品详情中的规格区 |
<aside> |
侧边栏（与主内容相关但非核心） | 作者信息、相关推荐 |
<footer> |
页面或区域的底部 | 版权信息、联系方式 |
示例：一个简单的页面结构
```html
我的博客
HTML 语义化的重要性
语义化标签能让代码更清晰...
```
（4）表单类标签（收集用户输入）
用于创建登录框、注册页、搜索框等，核心是 <form> 容器 + 各种输入控件。
-
表单容器：
<form>所有表单控件都必须放在<form>中，用于提交数据，核心属性： -
action：数据提交的目标地址（后端接口 URL）。 -
method：提交方式（get或post，get适合简单数据，post适合敏感数据如密码）。 -
输入控件：
<input>单标签，通过type属性控制输入类型，常用类型：
| type 值 | 作用 | 示例代码 |
|---|---|---|
text |
单行文本输入框（默认） | <input type="text" placeholder="请输入姓名">（placeholder 是提示文字） |
password |
密码框（输入内容隐藏为圆点） | <input type="password" placeholder="请输入密码"> |
radio |
单选框（多个互斥，需相同 name） | <input type="radio" name="gender" value="male"> 男 |
checkbox |
复选框（可多选，需相同 name） | <input type="checkbox" name="hobby" value="basketball"> 篮球 |
file |
文件上传 | <input type="file" accept="image/*">（accept 限制文件类型） |
submit |
提交按钮（触发表单提交） | <input type="submit" value="注册">（value 是按钮文字） |
reset |
重置按钮（清空表单内容） | <input type="reset" value="重置"> |
button |
普通按钮（需配合 JS 用） | <input type="button" value="点击"> |
-
其他表单控件
-
<textarea>：多行文本输入框（如留言板）。 <select>+<option>：下拉选择框。<label>：绑定表单元素（点击 label 文字会聚焦到对应控件，提升体验）。
完整表单示例（注册页）：
<form action="/register" method="post">
<!-- 姓名 -->
<label for="username">姓名：</label> <!-- for 对应 input 的 id，点击文字聚焦输入框 -->
<input type="text" id="username" name="username" placeholder="请输入姓名" required> <!-- required 表示必填 -->
<br><br>
<!-- 密码 -->
<label for="password">密码：</label>
<input type="password" id="password" name="password" placeholder="请输入密码" required>
<br><br>
<!-- 性别（单选框） -->
性别：
<input type="radio" id="male" name="gender" value="male" checked> <!-- checked 表示默认选中 -->
<label for="male">男</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">女</label>
<br><br>
<!-- 爱好（复选框） -->
爱好：
<input type="checkbox" id="hobby1" name="hobby" value="reading">
<label for="hobby1">阅读</label>
<input type="checkbox" id="hobby2" name="hobby" value="coding">
<label for="hobby2">编程</label>
<br><br>
<!-- 城市（下拉选择框） -->
<label for="city">城市：</label>
<select id="city" name="city">
<option value="">请选择</option> <!-- 默认选项 -->
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
</select>
<br><br>
<!-- 个人简介（多行文本） -->
<label for="intro">个人简介：</label><br>
<textarea id="intro" name="intro" rows="4" cols="30" placeholder="请输入个人简介"></textarea> <!-- rows 行数，cols 列数 -->
<br><br>
<!-- 提交和重置按钮 -->
<input type="submit" value="注册">
<input type="reset" value="重置">
</form>
五、HTML 语义化
前面多次提到「语义化」，这里单独强调：
- 语义化：用有明确含义的标签（如
<header>、<nav>、<article>）而非全用<div>来描述内容。 - 好处：
- 代码可读性高：开发者能快速理解页面结构（比如看到
<nav>就知道是导航）。 - SEO 友好：搜索引擎（如百度、谷歌）能更好地识别内容，提升页面排名。
- 无障碍访问：屏幕阅读器（帮助盲人浏览网页的工具）能通过语义标签正确解读内容。
- 反例：全用
<div class="header">代替<header>，虽然能实现同样的结构，但丢失了语义。
六、实战练习
结合上面的知识，动手写一个页面，包含以下内容：
- 页头（标题 + 导航）。
- 个人信息（姓名、照片、简介）。
- 爱好列表（无序列表）。
- 联系表单（姓名输入框、留言框、提交按钮）。
参考代码（可直接复制到 .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>
<!-- 页头 -->
<header>
<h1>欢迎来到我的个人主页</h1>
<nav>
<a href="#info">个人信息</a> |
<a href="#hobby">我的爱好</a> |
<a href="#contact">联系我</a>
</nav>
</header>
<!-- 核心内容 -->
<main>
<!-- 个人信息 -->
<section id="info">
<h2>个人信息</h2>
<img src="https://picsum.photos/200/200" alt="我的照片" width="200">
<p>姓名：小明</p>
<p>职业：前端开发学习者</p>
<p>简介：我正在学习 HTML、CSS 和 JavaScript，希望成为一名优秀的前端工程师。</p>
</section>
<!-- 我的爱好 -->
<section id="hobby">
<h2>我的爱好</h2>
<ul>
<li>看技术文档</li>
<li>写代码</li>
<li>打篮球</li>
</ul>
</section>
<!-- 联系表单 -->
<section id="contact">
<h2>联系我</h2>
<form>
<label for="name">你的名字：</label>
<input type="text" id="name" placeholder="请输入你的名字">
<br><br>
<label for="message">留言：</label><br>
<textarea id="message" rows="3" cols="30" placeholder="请输入想对我说的话"></textarea>
<br><br>
<input type="submit" value="发送">
</form>
</section>
</main>
<!-- 页脚 -->
<footer>
<p>© 2023 我的个人主页 | 版权所有</p>
</footer>
</body>
</html>
推荐初学者可以访问https://www.w3school.com.cn/获取更多详细。
发表评论