课一:导学 - 在线演示

HTML与CSS作用对比及课程内容预览

1. HTML与CSS作用对比

🔴 无CSS的HTML网页

网页标题

这是段落文本,没有任何CSS样式修饰,使用浏览器默认样式。

百度链接
  • 列表项1
  • 列表项2
  • 列表项3
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>无CSS示例</title>
</head>
<body>
<h1>网页标题</h1>
<p>这是段落文本...</p>
<a href="https://www.baidu.com">百度链接</a>
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ul>
</body>
</html>

🟢 有CSS的HTML网页

美化后的网页标题

这是添加了CSS样式的段落文本,设置了颜色、字体大小和行高,阅读体验更好。

美化后的百度链接
  • 美化后的列表项1
  • 美化后的列表项2
  • 美化后的列表项3
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>有CSS示例</title>
<style>
h1 { color: #2980b9; text-align: center; font-size: 24px; }
p { color: #333; font-size: 16px; line-height: 1.6; }
a { color: #e74c3c; text-decoration: none; font-weight: bold; }
ul { color: #666; padding-left: 25px; line-height: 1.8; }
.demo-content { background: #e9f7ef; border: 1px solid #27ae60; }
</style>
</head>
<body>
<div class="demo-content">
<h1>美化后的网页标题</h1>
<p>这是添加了CSS样式的段落文本...</p>
<a href="#">美化后的百度链接</a>
<ul>
<li>美化后的列表项1</li>
<li>美化后的列表项2</li>
<li>美化后的列表项3</li>
</ul>
</div>
</body>
</html>

2. 课程内容预览

本学期核心技能图谱

📄 HTML技能

  • 基本标签使用
  • 表单与交互元素
  • 图片与链接管理
  • 网页结构规划

🎨 CSS技能

  • 样式引入方式
  • 文本与背景美化
  • 单位与布局应用
  • 响应式设计基础

⚙️ 实战能力

  • 静态网页开发
  • 网站目录管理
  • 浏览器兼容性处理
  • 网页优化与发布
学习路径建议: 1. 先掌握HTML基础结构,再学习CSS样式美化 2. 每节课完成至少2个实训案例,巩固知识点 3. 定期复习已学内容,避免遗忘 4. 建立个人代码库,分类保存所有实训项目 5. 多浏览优秀网站,学习设计思路和实现方式

3. 开发环境展示(VS Code)

VS Code核心功能

  1. 代码高亮:不同语法元素显示不同颜色,便于识别
  2. 自动补全:输入标签或属性时自动提示,提高编写效率
  3. 文件管理:左侧面板可快速切换和管理项目文件
  4. 内置终端:可直接执行命令,无需额外打开命令行工具
  5. 插件扩展:可安装HTML/CSS相关插件,增强开发功能

🔌 推荐插件:

1. HTML CSS Support:提供HTML/CSS语法提示和补全

2. Live Server:实时预览网页效果,保存即刷新

3. Prettier:代码格式化工具,保持代码风格一致