HTML基础开篇教程(一)

最新推荐文章于 2025-07-29 22:58:49 发布

jishujiaoliu1680

最新推荐文章于 2025-07-29 22:58:49 发布

阅读量413

点赞数 4

CC 4.0 BY-SA版权

文章标签： html css css3

本文链接：https://blog.youkuaiyun.com/jishujiaoliu1680/article/details/148726853

# HTML基础开篇教程

我将创建一个介绍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>HTML基础入门教程</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
line-height: 1.6;
color: #333;
background-color: #f8f9fa;
padding: 20px;
max-width: 1200px;
margin: 0 auto;
}

header {
background: linear-gradient(135deg, #4f6ef2, #8454e9);
color: white;
text-align: center;
padding: 40px 20px;
border-radius: 12px;
margin-bottom: 30px;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

h1 {
font-size: 3rem;
margin-bottom: 15px;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}

.subtitle {
font-size: 1.5rem;
font-weight: 300;
max-width: 800px;
margin: 0 auto;
}

.container {
display: flex;
flex-wrap: wrap;
gap: 30px;
margin-bottom: 40px;
}

.section {
background: white;
border-radius: 12px;
padding: 30px;
flex: 1;
min-width: 300px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.section:hover {
transform: translateY(-5px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

h2 {
color: #4f6ef2;
margin-bottom: 20px;
padding-bottom: 10px;
border-bottom: 2px solid #eaeaea;
}

h3 {
color: #8454e9;
margin: 20px 0 10px;
}

.example {
background: #f8f9ff;
border-left: 4px solid #4f6ef2;
padding: 15px;
margin: 15px 0;
border-radius: 0 8px 8px 0;
font-family: 'Courier New', monospace;
overflow-x: auto;
}

.image-container {
display: flex;
justify-content: center;
margin: 25px 0;
}

img {
max-width: 100%;
height: auto;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease;
}

img:hover {
transform: scale(1.03);
}

.caption {
text-align: center;
color: #666;
font-style: italic;
margin-top: 10px;
}

.features {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
margin-top: 30px;
}

.feature-card {
background: #f1f4ff;
border-radius: 10px;
padding: 20px;
text-align: center;
transition: all 0.3s ease;
}

.feature-card:hover {
background: #e1e8ff;
transform: translateY(-3px);
}

footer {
text-align: center;
padding: 30px;
margin-top: 40px;
color: #666;
background: white;
border-radius: 12px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

@media (max-width: 768px) {
.container {
flex-direction: column;
}

h1 {
font-size: 2.2rem;
}

.subtitle {
font-size: 1.2rem;
}
}
</style>
</head>
<body>
<header>
<h1>HTML基础入门教程</h1>
<p class="subtitle">学习构建网页的基本元素 - 从标题、图片到完整页面结构</p>
</header>

<div class="container">
<div class="section">
<h2>什么是HTML？</h2>
<p>HTML（超文本标记语言）是构建网页的基础技术，它使用标签来定义内容和结构。</p>

<div class="example">
<!DOCTYPE html><br>
<html><br>
<head><br>
  <title>页面标题</title><br>
</head><br>
<body><br>
  <h1>这是我的第一个标题</h1><br>
  <p>这是我的第一个段落</p><br>
</body><br>
</html>
</div>

<h3>HTML基础结构</h3>
<ul>
<li><strong><!DOCTYPE html></strong> - 声明文档类型</li>
<li><strong><html></strong> - 页面的根元素</li>
<li><strong><head></strong> - 包含页面的元信息</li>
<li><strong><title></strong> - 指定浏览器标签标题</li>
<li><strong><body></strong> - 包含可见的页面内容</li>
</ul>
</div>

<div class="section">
<h2>标题与图片示例</h2>

<h3>HTML标题 (H1-H6)</h3>
<p>标题标签定义文档中的标题层次结构：</p>

<div class="example">
<h1>主标题</h1><br>
<h2>副标题</h2><br>
<h3>三级标题</h3>
</div>

<div class="image-container">
<img src="https://images.unsplash.com/photo-1547658719-da2b51169166?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=400&w=600" alt="HTML代码示例" width="600" height="400">
</div>
<p class="caption">图1: HTML代码示例 - 展示基本结构和元素</p>

<h3>插入图片</h3>
<p>使用<code><img></code>标签添加图片，需要指定图片源(src)和替代文本(alt)：</p>

<div class="example">
<img src="image.jpg" alt="描述文字" width="500" height="300">
</div>
</div>
</div>

<div class="section">
<h2>核心HTML功能</h2>
<div class="features">
<div class="feature-card">
<h3>结构清晰</h3>
<p>使用语义化标签组织内容</p>
</div>
<div class="feature-card">
<h3>媒体支持</h3>
<p>轻松添加图片、视频和音频</p>
</div>
<div class="feature-card">
<h3>超链接</h3>
<p>创建文档和页面间的链接</p>
</div>
<div class="feature-card">
<h3>表单元素</h3>
<p>收集用户输入和数据</p>
</div>
</div>

<div class="image-container">
<img src="https://images.unsplash.com/photo-1618044733300-9472054094ee?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=400&w=600" alt="现代网页设计" width="600" height="400">
</div>
<p class="caption">图2: 现代网页设计 - 结合HTML、CSS和JavaScript</p>
</div>

<footer>
<p>© 2023 HTML基础入门教程 | 学习构建现代网页的基础</p>
<p>HTML是网页开发的基石，掌握它你将能够创建自己的网站！</p>
</footer>
</body>
</html>