HTML/CSS 学习中心

HTML结构 CSS字体 CSS背景 代码示例

HTML/CSS 基础入门

基于真实教学材料整理的前端开发基础知识，涵盖网页结构、字体设置、背景图像控制等核心内容。

标准HTML结构 CSS字体系统 背景图像控制 可运行示例

HTML 文档基本结构

每个有效的网页都始于正确的文档结构，以下是标准HTML5模板

HTML5标准结构 
<!-- 声明文档类型为 HTML5 -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title>页面标题</title>
    <meta charset="utf-8">
    <style>
        /* CSS 样式写在此处 */
    </style>
</head>
<body>
    <!-- 页面内容 -->
</body>
</html>

关键标签说明

1

<!DOCTYPE html>

声明文档类型为 HTML5，确保浏览器以标准模式渲染

2

<html lang="zh-CN">

根元素，指定语言为简体中文，提升可访问性与SEO

3

<head>

包含元数据，如标题、字符集、样式等，不显示在页面上

4

<title>

定义浏览器标签页显示的标题

示例文件路径

E:/课程素材/web前端开发/w4/CSS图片&文本.html

CSS 字体设置

掌握字体家族分类、回退机制与字号单位设置

字体家族分类

CSS 提供五类通用字体族，开发者可根据语义选择合适的字体风格。

font-family 类别 说明 常见字体示例
serif 有衬线，笔画末端带小装饰线，常用于标题 Times New Roman, Georgia, 宋体
sans-serif 无衬线，无额外装饰，简洁现代，适合正文 Arial, Verdana, 黑体
monospace 等宽，每个字符宽度相同，适用于代码展示 Courier New, Lucida Console
cursive 草书/手写体，风格随意，阅读性较差，慎用 Comic Sans MS
fantasy 异体，装饰性强，夸张风格，仅限标题使用 Jokerman, Curlz MT

教学提示

"惯例是标题使用某种衬线字体，正文使用某种无衬线字体。"

字体回退机制

由于不同设备安装字体不同，应列出多个备选字体，浏览器按顺序尝试加载。

正确示例 

p {
    font-family: Verdana, Arial, sans-serif;
}

h2, h3 {
    font-family: Georgia, "Times New Roman", serif;
}

注意事项

  • 多个单词的字体名称必须用引号包裹
  • 不同字体之间用英文逗号分隔
  • 最后一个应为通用字体族作为最终兜底

字号单位设置

CSS支持多种字号单位，各有适用场景。

em 相对单位，W3C推荐，缩放良好
推荐
% 百分比单位，效果与em相似，更直观
推荐
px 像素单位，屏幕分辨率固定，缩放可能失效
谨慎使用

em与%的关系： 在body中，通常1em ≈ 16px（浏览器默认）。font-size: 100%与font-size: 1em显示效果一致。

CSS 背景图像设置

掌握背景属性控制、多背景配置与渐进式增强策略

基础属性一览

background-color

设置背景颜色，默认值：transparent

background-image

设置背景图片，默认值：none

background-repeat

控制图片是否平铺，默认值：repeat

background-position

设置图片位置，默认值：0% 0% (左上角)

background-repeat 属性

repeat 水平和垂直方向重复（默认）
repeat-x 仅水平方向重复
repeat-y 仅垂直方向重复
no-repeat 不重复，只显示一次
space (CSS3) 平铺时不裁剪图片，通过增加间距填充
round (CSS3) 平铺时缩放图片以适应空间，避免裁剪

背景颜色与图片共用

推荐同时设置 background-color 和 background-image。

body {
    background-color: #99cccc;
    background-image: url(background.jpg);
}

图片加载失败时，背景色仍能保证文本可读性

图片小于视口时，未覆盖区域显示背景色

视觉过渡更自然，提升用户体验

配置多张背景图片（CSS3）

实现方式

使用 background 复合属性，多个背景声明以逗号分隔，层级从前到后堆叠（前面的在最上层）。

background: url("咖啡.gif") no-repeat left bottom,
        url("咖啡背景.gif") no-repeat,
        url("倒咖啡.jpg") no-repeat;

渐进式增强策略

为确保旧浏览器兼容性，应先设置单一背景作为后备方案。

body {
    /* 兼容性后备：单图背景 */
    background-image: url("倒咖啡.gif");
    background-repeat: no-repeat;

    /* 现代浏览器支持：多图叠加 */
    background: url("咖啡.gif") no-repeat left bottom,
                url("咖啡背景.gif") no-repeat,
                url("倒咖啡.jpg") no-repeat;
}

原理： 不支持 background 多值语法的浏览器会忽略该行，继续使用 background-image。

常见错误模式与最佳实践

错误模式 正确做法 说明
Times New Roman "Times New Roman" 字体名含空格必须用引号包裹，否则会被当作两个独立字体
多背景图片未做渐进增强 先设background-image，再设background多图 保障低版本浏览器可用性
忘记设置background-repeat 显式声明是否重复 避免图片意外平铺造成混乱
使用绝对路径或错误文件名 使用相对路径并确认资源存在 如url(coffeepour.jpg)应确保存在对应文件

代码示例与练习

动手实践，编辑并运行HTML/CSS代码

综合示例：咖啡屋网页

整合所有知识点
咖啡屋网页示例 
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title>咖啡屋</title>
    <meta charset="utf-8">
    <style>
        body {
            font-size: 150%;
            font-family: Arial, 黑体, sans-serif;
            color: #992435;

            /* 渐进式增强：先设单图 */
            background-image: url("倒咖啡.gif");
            background-repeat: no-repeat;

            /* 多背景图支持 */
            background: url("咖啡.gif") no-repeat left bottom,
                        url("咖啡背景.gif") no-repeat,
                        url("倒咖啡.jpg") no-repeat;
        }

        h1 {
            font-family: 宋体, "Times New Roman", serif;
        }

        ul {
            list-style-image: url(列表符号.gif);
        }
    </style>
</head>
<body>
    <header>
        <h1>咖啡屋</h1>
    </header>
    <main>
        <p>在咖啡屋享受一杯优质咖啡或茶！</p>
        <ul>
            <li>美式咖啡</li>
            <li>拿铁</li>
            <li>抹茶拿铁</li>
        </ul>
    </main>
</body>
</html>

运行结果预览

点击"运行"按钮查看示例效果

练习建议

  • 尝试修改字体家族，观察不同字体的显示效果
  • 调整背景图片的位置和重复方式
  • 添加更多CSS样式美化页面

教学结构与练习安排

根据"随堂练习"编号推测课程进度如下：

练习 5.5

背景定位与重复控制

掌握 background-position 与 background-repeat

练习 5.6

多背景图片配置

学会使用 background 设置多图并实现渐进增强

练习 5.7

字体设置实践

应用 font-family 回退机制与多种字号单位

交互式代码练习

在下方编辑器中修改代码并查看实时效果

HTML/CSS 代码编辑器

editor.html
0 字符

提示：尝试修改CSS属性值，如颜色、字体、背景等，然后点击"运行代码"查看效果。

实时预览

预览窗口
实时更新

点击"运行代码"按钮查看编辑器的实时效果

欢迎来到HTML/CSS练习

这是一个示例段落。尝试修改上面的CSS样式来改变页面外观。

`; updateCharCount(); livePreview.innerHTML = '

点击"运行代码"按钮查看编辑器的实时效果

'; showNotification('编辑器已重置', 'info'); } // 显示通知 function showNotification(message, type) { // 创建通知元素 const notification = document.createElement('div'); notification.className = `fixed top-4 right-4 z-50 px-6 py-3 rounded-lg shadow-lg transform transition-transform duration-300 ${type === 'success' ? 'bg-green-600 text-white' : 'bg-blue-600 text-white'}`; notification.innerHTML = `
${message}
`; // 添加到页面 document.body.appendChild(notification); // 3秒后移除 setTimeout(() => { notification.style.transform = 'translateX(100%)'; setTimeout(() => { document.body.removeChild(notification); }, 300); }, 3000); } // 初始化页面时运行一次咖啡屋示例 document.addEventListener('DOMContentLoaded', function() { // 自动运行咖啡屋示例 setTimeout(() => { const coffeeCode = document.getElementById('coffee-example-code'); if (coffeeCode) { runCode('coffee-example-code', 'coffee-output'); } }, 1000); // 初始化编辑器预览 runEditorCode(); }); // 平滑滚动到锚点 document.querySelectorAll('a[href^="#"]').forEach(anchor => { anchor.addEventListener('click', function(e) { e.preventDefault(); const targetId = this.getAttribute('href'); if (targetId === '#') return; const targetElement = document.querySelector(targetId); if (targetElement) { window.scrollTo({ top: targetElement.offsetTop - 80, behavior: 'smooth' }); } }); });