当前位置：首页 > news >正文

小学期前端三件套学习（更新中）

news 2025/6/24 11:02:54

第一阶段

HTML 基础结构

<!DOCTYPE html>
<html><head><title>页面标题</title></head><body>页面内容</body>
</html>

常用内容标签

文本类标签

• <h1>~<h6>：标题（h1 每个页面建议只用一次）

• <p>：段落

• <span>：行内文本容器

• <strong>：加粗强调

• <em>：斜体强调

媒体类标签

• <img src="..." alt="描述" title="悬停时显示" width="400">：图片（alt 属性必须写）

• <audio controls>：音频

• <video controls>：视频

列表标签

<ul>  <!-- 无序列表 --><li>项目</li>
</ul><ol>  <!-- 有序列表 --><li>第一项</li>
</ol>

超链接与锚点

<a href="https://example.com">外部链接</a>
<a href="#section2">跳转到章节</a>  <!-- 需配合id使用 -->
<a href="mailto:email@example.com">邮件链接</a>

表格

<table><tr><th>表头</th></tr><tr><td>单元格</td></tr>
</table>

表单控件

输入框

<input type="text">   <!-- 文本 -->
<input type="password">
<input type="email">

单选/多选

<!-- 单选框（同name为一组） -->
<input type="radio" name="gender" value="male"><!-- 多选框 -->
<input type="checkbox" name="hobby" value="sports">

提交按钮

<input type="submit" value="提交">
<button type="submit">提交</button>

语义化标签

标签	用途
`<header>`	页眉
`<nav>`	导航栏
`<section>`	文档独立区块
`<article>`	独立文章内容
`<footer>`	页脚

表单分组标签

`<fieldset>` 和 `<legend>`

<fieldset><legend>目标配置</legend><label>目标 url<input type="url" name="target"></label><br><label>端口范围<input type="text" name="port"></label><br>
</fieldset>

作用：
• 将相关的表单控件归类为一个逻辑单元

• 默认生成一个灰色边框包围分组内容

• 屏幕阅读器会朗读<legend>内容，帮助视障用户理解分组目的

注意事项

所有标签必须闭合（如 <img> 写成 <img />）
属性值用双引号包裹：src="image.jpg"
图片必须写 alt 属性
表单元素需搭配 <label> 提升可访问性
<label> 标签的 for 属性与表单元素的 id 对应

第一阶段成果示例

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Yzd的网络安全简介</title>
</head>
<body><header><h1 id="top" style="color: red; text-align: center; font-size: 50px;">Yzd 的网络安全简介</h1><hr></header><section><h2>基本信息</h2><p><strong>职业：</strong>网络安全研究员</p><p><strong>爱好：</strong>CS:GO竞技游戏</p><p><a href="https://www.csgo.com.cn/show/index.html" target="_blank">访问CS:GO官网</a></p><img src="2.jpg" alt="Yzd的个人照片" width="200"></section><section><h2>渗透测试工具配置</h2><form><fieldset><legend>身份验证</legend><label for="username">测试人员名称：</label><input type="text" id="username" name="username"></fieldset><fieldset><legend>工具选择</legend><input type="checkbox" name="tool" id="yakit" value="yakit"><label for="yakit">Yakit安全测试平台</label></fieldset><input type="submit" value="开始测试"></form></section>
</body>
</html>

蓝色星球综合示例

<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta name="description" content="蓝色星球联盟 - 探索宇宙奥秘，保护地球家园"><title>蓝色星球联盟 | 探索与保护</title><style>/* 基础样式 */body {font-family: 'Arial', sans-serif;line-height: 1.6;color: #333;margin: 0;padding: 0;background-color: #f5f9ff;}/* 导航栏 */.navbar {background-color: #1a4b8c;padding: 1rem 0;box-shadow: 0 2px 5px rgba(0,0,0,0.1);}.nav-container {width: 90%;max-width: 1200px;margin: 0 auto;display: flex;justify-content: space-between;align-items: center;}.logo {color: white;font-size: 1.5rem;font-weight: bold;text-decoration: none;}.nav-links {display: flex;gap: 2rem;}.nav-links a {color: white;text-decoration: none;transition: color 0.3s;}.nav-links a:hover {color: #7fb2ff;}/* 主要内容 */.container {width: 90%;max-width: 1200px;margin: 2rem auto;padding: 0 1rem;}/* 页眉 */.header {text-align: center;padding: 3rem 0;background: linear-gradient(135deg, #1a4b8c, #3a7bd5);color: white;border-radius: 8px;margin-bottom: 2rem;}.header h1 {font-size: 2.5rem;margin-bottom: 1rem;}.header p {font-size: 1.2rem;max-width: 800px;margin: 0 auto;}/* 内容区块 */.section {background: white;padding: 2rem;border-radius: 8px;box-shadow: 0 2px 10px rgba(0,0,0,0.05);margin-bottom: 2rem;}.section h2 {color: #1a4b8c;border-bottom: 2px solid #e1e8f0;padding-bottom: 0.5rem;margin-top: 0;}/* 页脚 */.footer {background-color: #1a4b8c;color: white;text-align: center;padding: 2rem 0;margin-top: 3rem;}/* 响应式设计 */@media (max-width: 768px) {.nav-container {flex-direction: column;gap: 1rem;}.nav-links {flex-direction: column;gap: 1rem;align-items: center;}.header h1 {font-size: 2rem;}}</style></head><body><!-- 导航栏 --><nav class="navbar"><div class="nav-container"><a href="#" class="logo">蓝色星球联盟</a><div class="nav-links"><a href="#about">关于我们</a><a href="#mission">使命愿景</a><a href="#join">加入我们</a><a href="#contact">联系我们</a></div></div></nav><!-- 主要内容 --><div class="container"><!-- 页眉 --><header class="header"><h1>蓝色星球联盟</h1><p>探索宇宙奥秘 · 保护地球家园 · 共创可持续未来</p></header><!-- 关于我们 --><section id="about" class="section"><h2>关于我们</h2><p>蓝色星球联盟成立于2010年，是一个致力于宇宙探索和地球环境保护的国际性非营利组织。我们汇聚了来自全球的天文学家、环境科学家和热心公益人士，共同为人类的未来努力。</p><p><strong>我们的信念：</strong>地球是人类唯一的家园，探索宇宙和保护环境同等重要。</p></section><!-- 使命愿景 --><section id="mission" class="section"><h2>使命与愿景</h2><p><em>"探索未知，守护已知"</em> - 这是蓝色星球联盟的核心使命。</p><p>我们致力于：</p><ul><li>推动宇宙探索和天文科学研究</li><li>促进地球环境保护和可持续发展</li><li>搭建科学家与公众之间的沟通桥梁</li><li>培养下一代的科学探索精神和环保意识</li></ul></section><!-- 加入我们 --><section id="join" class="section"><h2>加入我们</h2><p>无论您是科学家、教育工作者、学生还是热心公益的普通公民，都可以成为蓝色星球联盟的一员。</p><p>选择您的参与方式：</p><ol><li>成为正式会员</li><li>参与志愿者活动</li><li>捐助支持我们的项目</li><li>传播我们的理念</li></ol><p><a href="#contact">立即联系我们</a>，开始您的蓝色星球之旅！</p></section></div><!-- 页脚 --><footer class="footer"><div class="container"><p>© 2023 蓝色星球联盟 版权所有</p><p>联系方式: info@blueplanet.org | 电话: +1 (800) 123-4567</p><p><span>行内文本容器示例</span> | <strong>加粗显示重要信息</strong> | <em>斜体显示强调内容</em></p></div></footer></body></html>

第二阶段

1. CSS 基本结构实例

CSS 规则由 选择器 和 声明块 组成：

/* 选择器 { 属性: 值; } */
p {color: blue;font-size: 16px;
}

实例解析：

p：选择所有 <p> 段落元素
color: blue;：将文字颜色设为蓝色
font-size: 16px;：将字号设为16像素

2. 三种引入方式实例

2.1 内联样式（直接写在HTML标签内）

<p style="color: red; margin: 10px;">这是一个红色段落</p>

2.2 内部样式表（写在 `<style>` 标签中）

<head><style>h1 {color: green;text-align: center;}</style>
</head>
<body><h1>这个标题会居中显示为绿色</h1>
</body>

2.3 外部样式表（最推荐的方式）

<!-- index.html -->
<head><link rel="stylesheet" href="styles.css">
</head>/* styles.css */
body {background-color: #f0f0f0;font-family: Arial;
}

3. 基础选择器实例

3.1 元素选择器

/* 选择所有div元素 */
div {border: 1px solid black;
}

3.2 类选择器（最常用）

/* 选择class="highlight"的元素 */
.highlight {background-color: yellow;
}

<p class="highlight">这个段落会有黄色背景</p>

3.3 ID选择器

/* 选择id="header"的元素 */
#header {height: 80px;background: #333;
}

<div id="header">网站头部</div>

4. 常用样式属性实例

4.1 文本样式

.title {color: #333;                    /* 文字颜色 - 深灰色 */font-size: 24px;                /* 字号 - 24像素 */font-weight: 700;               /* 加粗 - 700相当于bold */font-family: 'Helvetica Neue', Arial, sans-serif; /* 字体栈 */text-align: center;             /* 水平居中 */text-decoration: underline wavy #ff5722; /* 波浪下划线，橙色 */text-transform: uppercase;      /* 文本大写 */letter-spacing: 1px;            /* 字母间距 */line-height: 1.6;               /* 行高1.6倍 */text-shadow: 1px 1px 2px rgba(0,0,0,0.1); /* 文字阴影 */word-spacing: 2px;              /* 单词间距 */
}

4.2 盒模型实例

.box {/* 尺寸 */width: 200px;                  /* 内容宽度 */height: 100px;                /* 内容高度 */min-width: 150px;              /* 最小宽度 */max-width: 90vw;              /* 最大宽度为视窗90% *//* 盒模型 */box-sizing: border-box;       /* 更合理的盒模型计算方式 */padding: 20px;                /* 内边距 */border: 2px solid #f44336;   /* 边框 */margin: 10px auto;           /* 外边距 + 水平居中 *//* 背景 */background-color: #f5f5f5;    /* 背景色 */background-image: linear-gradient(to bottom, #fff, #eee); /* 渐变背景 *//* 视觉效果 */border-radius: 8px;           /* 圆角 */box-shadow: 0 4px 8px rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,0.5); /* 外阴影+内阴影 */opacity: 0.95;               /* 透明度 *//* 变换 */transform: rotate(0.5deg);   /* 轻微旋转 */transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); /* 平滑过渡 */
}

4.3 实际布局实例

<style>.container {width: 80%;margin: 0 auto; /* 水平居中 */background: white;padding: 20px;}.card {border: 1px solid #ddd;padding: 15px;margin-bottom: 20px;border-radius: 5px; /* 圆角 */}
</style><div class="container"><div class="card"><h2>卡片标题</h2><p>卡片内容...</p></div>
</div>

4.4实际布局增强版

<style>/* 容器优化 */.container {width: min(1200px, 90%);    /* 不超过1200px且不超视窗90% */margin: 2rem auto;           /* 垂直间距+水平居中 */padding: 2rem;background: white;/* 布局模式 */display: grid;grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));gap: 1.5rem;/* 视觉效果 */box-shadow: 0 0 20px rgba(0,0,0,0.05);border-radius: 12px;}/* 卡片组件升级 */.card {--card-padding: 1.5rem;--card-radius: 8px;display: flex;flex-direction: column;border: 1px solid #eee;border-radius: var(--card-radius);overflow: hidden;transition: transform 0.3s ease, box-shadow 0.3s ease;/* 层叠上下文 */position: relative;z-index: 1;}.card:hover {transform: translateY(-5px);box-shadow: 0 10px 20px rgba(0,0,0,0.1);z-index: 2;}.card-header {padding: var(--card-padding);background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);color: white;}.card-body {padding: var(--card-padding);flex-grow: 1;  /* 撑满剩余空间 */}.card-footer {padding: var(--card-padding);border-top: 1px solid #eee;background: #f9f9f9;}/* 响应式调整 */@media (max-width: 768px) {.container {grid-template-columns: 1fr;padding: 1rem;}.card {margin-bottom: 1rem;}}
</style><div class="container"><article class="card"><header class="card-header"><h2>高级卡片标题</h2></header><div class="card-body"><p>这是一个增强版的卡片组件，包含渐变标题、悬浮效果和灵活的布局。</p><ul><li>响应式网格布局</li><li>CSS变量控制间距</li><li>平滑的悬停动画</li></ul></div><footer class="card-footer"><button>了解更多</button></footer></article><article class="card"><header class="card-header" style="background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);"><h2>第二张卡片</h2></header><div class="card-body"><p>展示如何使用不同的渐变背景，同时保持卡片结构一致。</p></div></article>
</div>

5. 实例练习：简单导航栏

<!DOCTYPE html>
<html>
<head><style>/* 导航栏样式 */.navbar {background-color: #333;overflow: hidden;}/* 导航链接样式 */.navbar a {float: left;color: white;text-align: center;padding: 14px 16px;text-decoration: none;font-size: 17px;}/* 鼠标悬停效果 */.navbar a:hover {background-color: #ddd;color: black;}</style>
</head>
<body><div class="navbar"><a href="#home">首页</a><a href="#news">新闻</a><a href="#contact">联系</a><a href="#about">关于</a>
</div></body>
</html>