这段代码是一个简单的HTML文件，主要功能是展示一个美观的可点击按钮，具体介绍如下：
1. 基础结构：
- 标准的HTML5文档结构，包含`<!DOCTYPE html>`声明和`<html>`根标签
- 包含`<head>`头部和`<body>`主体两大部分
2. 头部设置：
- 通过`<meta charset="UTF-8">`指定字符编码为UTF-8
- 设置视口（viewport）以适配移动设备：`width=device-width, initial-scale=1.0`
- 页面标题为“好看的按钮”
3. 主体内容：
- 整个页面采用flex布局（`display: flex`），让内容居中显示（`justify-content: center; align-items: center`）
- 页面高度占满整个视口（`height: 100vh`），背景色为浅灰色（`#f4f4f4`）
- 核心是一个包裹在`<a>`标签内的按钮：
- `<a>`标签链接到`https://www.example.com`，`target="_blank"`表示在新窗口打开
- 按钮样式：蓝色背景（`#007BFF`）、白色文字、12px上下内边距和24px左右内边距、无边框、4px圆角
- 鼠标悬停时显示手型指针（`cursor: pointer`）
- 背景色变化有0.3秒的平滑过渡效果（`transition`）
整体效果是：在浅灰色背景的页面中央，显示一个蓝色按钮，点击按钮会在新窗口打开example.com网站，并且按钮有悬停时的平滑颜色过渡效果。
以下是完整代码：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>好看的按钮</title> </head> <body style="display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #f4f4f4;"> <a href="https://www.example.com" target="_blank" style="text-decoration: none;"> <button style="background-color: #007BFF; color: white; padding: 12px 24px; border: none; border-radius: 4px; cursor: pointer; transition: background-color 0.3s ease;"> 点击我 </button> </a> </body> </html>
本文链接：https://blog.lahong.top/post/18.html 本文及相关素材著作权归原作者所有，未经书面授权禁止擅自转载、摘抄、改编及商业使用，违者将追究法律责任
