HTML常用标签详解学习博客：从基础标签到页面结构完整掌握

一、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">

Google

</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
  ↓
网页交互