一、HTML标签基础概念
1. 什么是HTML标签？
HTML使用**标签（Tag）**来描述网页结构。
基本格式：
<标签名>内容</标签名>
例如：
<p>这是一个段落</p>
其中：
-
<p> 是开始标签
-
</p> 是结束标签
-
中间的内容是标签内容
2. 单标签和双标签
（1）双标签
有开始和结束：
<p>我是段落</p>
常见：
<h1></h1>
<p></p>
<div></div>
<a></a>
（2）单标签
只有一个标签：
例如：
<img src="photo.jpg">
常见：
<img>
<br>
<hr>
<input>
二、HTML文档基本结构
一个完整HTML页面：
<!DOCTYPE html>
<html>
<head>
<title>我的网页</title>
</head>
<body>
网页显示内容
</body>
</html>
结构说明：
| <!DOCTYPE html> | 声明HTML5文档 |
| html | 网页根标签 |
| head | 网页头部信息 |
| title | 网页标题 |
| body | 网页主体内容 |
三、格式化标签
HTML提供了一些标签用于控制文字显示效果。
1. 标题标签 h1-h6
HTML提供6级标题：
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
效果：
一级标题
↓
二级标题
↓
三级标题
特点：
-
h1最大
-
h6最小
实际开发：
<h1>个人博客首页</h1>
<h2>技术文章</h2>
2. 段落标签 p
用于表示一段文字：
<p>
HTML是网页开发的基础语言。
</p>
特点：
-
自动换行
-
段落之间有间距
3. 换行标签 br
作用：
强制换行
代码：
你好<br>
世界
显示：
你好
世界
注意：
br 是单标签。
4. 水平线标签 hr
创建分割线：
<hr>
效果：
—————–
常用于：
-
文章分割
-
内容区域划分
5. 加粗标签
strong标签（推荐）
<strong>重要内容</strong>
效果：
重要内容
b标签
<b>加粗文字</b>
区别：
| strong | 强调重要性 |
| b | 单纯视觉加粗 |
开发推荐：
<strong>
6. 斜体标签
em标签
<em>强调文字</em>
i标签
<i>斜体文字</i>
7. 删除线标签
<del>
原价格：999元
</del>
显示：
原价格：999元
常用于：
-
商品价格
-
修改内容
8. 下划线标签
<u>
重点内容
</u>
四、图片标签 img
图片是网页的重要组成部分。
基本语法
<img src="图片地址">
例如：
<img src="cat.jpg">
img常用属性
1.src属性
src：
source（资源）
表示图片路径。
例如：
<img src="./images/logo.png">
2.alt属性
图片加载失败时显示文字。
<img
src="logo.png"
alt="网站logo">
作用：
-
提高用户体验
-
SEO优化
-
无障碍访问
3.width和height属性
设置图片大小：
<img
src="dog.jpg"
width="300"
height="200">
单位：
默认：
px（像素）
五、超链接标签 a
超链接用于跳转网页。
基本格式：
<a href="地址">
链接文字
</a>
例如：
<a href="https://www.baidu.com">
百度
</a>
点击：
跳转百度。
六、a标签 href属性
href：
Hypertext Reference
超文本引用。
作用：
指定跳转地址。
例如：
<a href="https://www.google.com">
</a>
href跳转类型
1. 外部网站
<a href="https://www.baidu.com">
百度
</a>
2. 本地页面
目录：
项目
index.html
about.html
跳转：
<a href="about.html">
关于我们
</a>
3. 锚点跳转
跳转页面某位置。
定义：
<h2 id="java">
Java学习
</h2>
跳转：
<a href="#java">
Java章节
</a>
七、a标签 target属性
target：
控制链接打开方式。
1._self
默认方式：
当前窗口打开。
<a href="https://www.baidu.com"
target="_self">
百度
</a>
2._blank
新窗口打开。
<a href="https://www.baidu.com"
target="_blank">
百度
</a>
常用：
网站外链。
八、列表标签
HTML提供三种列表：
无序列表
有序列表
自定义列表
1. 无序列表 ul
语法：
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
显示：
-
HTML
-
CSS
-
JavaScript
特点：
默认圆点。
2. 有序列表 ol
<ol>
<li>第一步</li>
<li>第二步</li>
<li>第三步</li>
</ol>
显示：
第一步
第二步
第三步
适合：
教程步骤。
3. 自定义列表 dl
结构：
<dl>
<dt>HTML</dt>
<dd>
网页结构语言
</dd>
</dl>
含义：
| dl | 列表整体 |
| dt | 标题 |
| dd | 描述 |
常用于：
商品介绍、名词解释。
九、表格标签 table
表格用于展示数据。
基本结构：
<table>
<tr>
<td>姓名</td>
<td>年龄</td>
</tr>
</table>
table相关标签
| table | 表格 |
| tr | 行 |
| td | 单元格 |
| th | 表头 |
示例
<table border="1">
<tr>
<th>姓名</th>
<th>成绩</th>
</tr>
<tr>
<td>张三</td>
<td>90</td>
</tr>
</table>
显示：
| 张三 | 90 |
十、表单标签 form
表单用于收集用户信息。
例如：
-
登录
-
注册
-
搜索
基本结构：
<form>
用户名：
<input>
</form>
十一、input输入框
input是最重要的表单元素。
文本框
<input type="text">
效果：
请输入内容
密码框
<input type="password">
输入：
******
单选按钮
<input type="radio">
男
<input type="radio">
女
复选框
<input type="checkbox">
篮球
<input type="checkbox">
足球
文件上传
<input type="file">
提交按钮
<input type="submit">
十二、按钮标签 button
<button>
登录
</button>
相比input：
button更加灵活。
例如：
<button>
<img src="icon.png">
提交
</button>
十三、select下拉列表
<select>
<option>
北京
</option>
<option>
上海
</option>
</select>
效果：
北京 ▼
十四、textarea多行文本框
用于输入大量文字。
例如：
留言：
<textarea>
</textarea>
常用于：
-
评论
-
简介
-
留言
十五、div标签
div是最常用布局标签。
<div>
网页内容
</div>
特点：
-
没有特殊含义
-
用于页面布局
例如：
<div class="header">
网站头部
</div>
<div class="content">
文章内容
</div>
十六、span标签
用于修饰一小段文字。
例如：
<p>
价格：
<span>
99元
</span>
</p>
特点：
-
行内元素
-
不会换行
十七、语义化标签 HTML5
HTML5新增：
| header | 头部 |
| nav | 导航 |
| main | 主要内容 |
| article | 文章 |
| section | 区域 |
| footer | 底部 |
| aside | 侧边栏 |
示例：
<header>
网站Logo
</header>
<nav>
首页 新闻
</nav>
<article>
文章内容
</article>
<footer>
版权信息
</footer>
十八、HTML标签学习总结
HTML常用标签体系：
HTML
├── 文本标签
│
├── h1-h6 标题
├── p 段落
├── strong 加粗
├── em 强调
│
├── 媒体标签
│
├── img 图片
│
├── 链接标签
│
├── a
│ ├── href
│ └── target
│
├── 列表标签
│
├── ul
├── ol
├── dl
│
├── 表格
│
├── table
├── tr
├── td
│
├── 表单
│
├── form
├── input
├── select
├── textarea
│
└── 布局标签
div
span
学习建议
HTML阶段重点掌握：
标签结构
标签属性
页面布局
表单交互
HTML5语义化
HTML只是网页的骨架：
HTML
↓
网页结构
CSS
↓
网页样式
JavaScript
↓
网页交互
