HTML+CSS+JavaScript网页制作简明教程

第1章 HTML、CSS、JavaScript基础

知识和基本语法 1

1.1 Web网页的基本概念 1

1.1.1 网页 1

1.1.2 网站 3

1.1.3 Web标准 4

1.2 网页的工作原理与制作工具 5

1.2.1 网页的工作原理 5

1.2.2 网页制作工具 5

1.3 HTML、CSS、JavaScript简介

与示例 6

1.3.1 HTML超文本标记语言 6

1.3.2 CSS层叠样式表 7

1.3.3 JavaScript脚本语言 8

1.4 HTML文档结构和基本语法 8

1.4.1 HTML文档结构 8

1.4.2 HTML基本语法 9

1.4.3 HTML文档的标记与分类 11

1.5 XHTML文档结构和文档类型 11

1.6 HTML文档头部的相关标记 12

1.6.1 设置页面标题 12

1.6.2 定义页面元信息 13

1.6.3 引用外部文件 14

1.7 习题 15

第2章 CSS样式表基础与盒子模型 17

2.1 CSS概述 17

2.2 CSS样式规则与内联CSS样式 17

2.2.1 CSS样式规则 17

2.2.2 内联CSS样式 18

2.3 CSS样式表 19

2.3.1 CSS样式表的结构和使用 19

2.3.2 基本选择符 20

2.3.3 群组与通用选择符 24

2.3.4 包含与子对象选择符 25

2.3.5 相邻选择符 28

2.3.6 属性选择符 30

2.3.7 伪对象(伪元素)选择符 33

2.4 样式规则的优先级 34

2.4.1 样式规则的优先级原则 35

2.4.2 用!important提高样式

优先级 37

2.5 CSS中的颜色与鼠标指针 38

2.5.1 CSS颜色的属性值 38

2.5.2 CSS设置鼠标形状cursor 39

2.6 块级元素的盒模型 40

2.6.1 盒模型结构 40

2.6.2 垂直外边距的合并 46

2.6.3 网页元素div 47

2.7 盒子的居中、浮动及显示方式 48

2.7.1 盒子的居中 48

2.7.2 盒子的浮动与清除浮动 49

2.7.3 元素的显示方式 52

2.7.4 元素的可见性visibility 52

2.8 盒子的布局应用举例 53

2.9 习题 57

第3章 HTML的基本元素及样式 59

3.1 HTML文本字符、注释标记

及水平线标记 59

3.2 文本与修饰标记 61

3.2.1 设置文本标记 61

3.2.2 文本修饰标记 62

3.2.3 块级文本标记 63

3.2.4 样式组织标记 64

3.3 CSS文本样式规则 65

3.3.1 CSS大小尺寸量度的

属性值 65

3.3.2 文本字符的CSS样式属性 66

3.3.3 文本外观CSS样式属性 68

3.4 图像与图像样式 72

3.4.1 插入图像 72

3.4.2 图像样式 73

3.4.3 使用display:block;将图像

转换为块级元素 75

3.5 小案例：div、图像和文本的

综合排版 76

3.5.1 案例分析 76

3.5.2 案例代码 77

3.6 列表标记与相关样式 78

3.6.1 各种列表标记介绍 79

3.6.2 列表样式 82

3.7 超链接标记与伪类 83

3.7.1 超链接标记及属性 84

3.7.2 链接到普通文档、图像

或多媒体文件 86

3.7.3 设置锚点和E-mail链接 87

3.7.4 伪类选择符 89

3.8 图像映射标记 92

3.8.1 创建图像映射标记 93

3.8.2 使用图像映射的图像 93

3.9 表格标记及样式 95

3.9.1 创建表格的基本标记 96

3.9.2 表格基本标记中的样式属性 98

3.9.3 表格单元格合并 100

3.9.4 表格结构划分标记、

、 102

3.10 小案例：山东商职学院网站首页

制作 103

3.11 课堂练习小案例 110

3.12 习题 111

第4章 HTML框架、表单、多媒体 115

4.1 HTML的浮动框架 115

4.1.1 浮动框架的基本概念 115

4.1.2 浮动框架的应用举例 116

4.2 表单标记 119

4.2.1 创建表单标记 119

4.2.2 表单输入标记 120

4.2.3 文本区标记 124

4.2.4 按钮标记 125

4.2.5 滚动列表与下拉列表

标记 126

4.2.6 控件标签标记 130

4.2.7 表单分组及标题

标记 130

4.2.8 应用div和样式的表单

设计 132

4.3 IE浏览器滚动字幕、背景音乐

......

目前，对网页制作的要求已不仅仅是视觉效果的美观，更主要的是要符合Web标准。传统网页制作是先考虑外观布局，再填入内容，内容与外观交织在一起，代码量大，难以维护。而目前Web标准的最大特点就是采用XHTML + CSS + JavaScript，将网页内容、外观样式及动态效果彻底分离，从而大大减少了页面代码，可节省带宽、提高网速，更便于分工设计、代码重用，既易于维护，又方便移植。 作者根据多年的网页制作教学、实践经验以及学生的认知规律，精心编写了本书。本书最大的特点是将HTML的各种元素与对应的CSS样式有效地融为一体，配备了大量的页面例题和丰富的运行效果图，以帮助读者系统、全面地掌握符合Web标准的网页制作技术。本书知识内容系统、全面，例题丰富，既可以作为本科、专科(高职)院校相关专业的教材，也可作为计算机专业人员的自学或参考工具书。