HTML 5与CSS 3网页设计入门与提高

作品简介

将HTML、CSS和JavaScript结合使用是一种最常用的网页布局，HTML即超文本标记语言，它使用标记来描述网页。HTML 5是HTML早期版本的自然延续，它尽可能地满足了当前网站和未来网站的需求。HTML 5从以前的版本中继承了大部分特性，这就意味着，HTML 5的大部分内容都可以兼容新旧浏览器，向后兼容是HTML 5的一项重要设计原则。

张慧芳，徐小慧编著

作品目录

• 前言
• 第1章HTML快速入门
• 1.1 HTML的概念
• 1.2 HTML的文档结构
• 1.2.1 文档编写规范
• 1.2.2 文档声明标记
• 1.2.3 标记文档开始
• 1.2.4 标记文档头部
• 1.2.5 标记文档主体
• 1.2.6 编写注意事项
• 1.2.7 实战——创建第一个HTML文档
• 1.3 文档基础标记
• 1.3.1 元信息标记
• 1.3.2 字体标记
• 1.3.3 超链接标记
• 1.3.4 水平线标记
• 1.3.5 段落标记
• 1.4 列 表 标 记
• 1.4.1 编号列表
• 1.4.2 项目符号列表
• 1.4.3 说明项目列表
• 1.5 表 格 标 记
• 1.5.1 表格的结构
• 1.5.2 表格的属性
• 1.6 表 单 标 记
• 1.6.1 创建表单
• 1.6.2 创建表单元素
• 1.7 实战——制作卡通类页面
• 1.8 本 章 习 题
• 第2章CSS 基础
• 2.1 CSS概述
• 2.1.1 CSS简介
• 2.1.2 CSS的使用
• 2.2 CSS基础语法
• 2.3 CSS高级语法
• 2.4 CSS的常用样式
• 2.4.1 CSS常用样式概述
• 2.4.2 背景样式
• 2.4.3 文本样式
• 2.4.4 字体样式
• 2.4.5 链接样式
• 2.4.6 列表样式
• 2.4.7 表格和轮廓
• 2.4.8 其他样式
• 2.5 实战——诗词鉴赏页面设计
• 2.6 本 章 习 题
• 第3章JavaScript脚本语言
• 3.1 JavaScript脚本概述
• 3.2 JavaScript的基本语法
• 3.2.1 简单的JavaScript例子
• 3.2.2 JavaScript语句
• 3.3 JavaScript变量
• 3.3.1 变量
• 3.3.2 数据类型
• 3.4 运 算 符
• 3.5 JavaScript语句的类型
• 3.5.1 选择语句
• 3.5.2 循环语句
• 3.5.3 跳转语句
• 3.5.4 异常处理语句
• 3.6 对 象
• 3.6.1 对象概述
• 3.6.2 函数
• 3.6.3 构造函数
• 3.7 常 用 对 象
• 3.7.1 Array对象
• 3.7.2 Document对象
• 3.7.3 HTML DOM Event对象
• 3.7.4 Window对象
• 3.8 实战——长方体几何计算
• 3.9 本 章 习 题
• 第4章网页设计实战案例
• 4.1 网页设计流程
• 4.2 网页设计工具
• 4.2.1 记事本
• 4.2.2 FrontPage
• 4.2.3 Dreamweaver
• 4.2.4 实战——制作个人主页
• 4.3 网 页 布 局
• 4.3.1 常见的网页布局结构
• 4.3.2 设计居中布局
• 4.3.3 设计自适应布局
• 4.3.4 DIV+CSS重构网站布局
• 4.4 布 局 理 论
• 4.4.1 区块的概念
• 4.4.2 定义区块
• 4.4.3 定位
• 4.4.4 实战——具有固定位置的广告框
• 4.4.5 空白边叠加
• 4.5 实战——制作网页导航条
• 4.6 实战——制作文本环绕图片
• 4.7 实战——制作三栏博客页面
• 4.8 CSS设计规范
• 4.9 本 章 习 题
• 第5章认识HTML 5
• 5.1 了解HTML 5
• 5.1.1 HTML 5的发展历史
• 5.1.2 开发HTML 5的三大组织
• 5.1.3 使用HTML 5的五大原因
• 5.1.4 HTML 5的未来发展趋势
• 5.2 HTML 5的语法
• 5.2.1 文档媒体类型
• 5.2.2 编码类型
• 5.2.3 DOCTYPE声明
• 5.2.4 其他内容
• 5.3 HTML 5表单
• 5.3.1 HTML 5输入类型
• 5.3.2 HTML 5表单元素
• 5.3.3 HTML 5表单属性
• 5.4 HTML 5的元素
• 5.4.1 新增的元素
• 5.4.2 更改元素
• 5.4.3 废除的元素
• 5.5 HTML 5的属性
• 5.5.1 标准属性
• 5.5.2 事件属性
• 5.6 支持HTML 5的浏览器
• 5.6.1 浏览器内核
• 5.6.2 常用的浏览器
• 5.7 实战——Chrome浏览器的安装和测试
• 5.8 本 章 习 题
• 第6章HTML 5快速入门
• 6.1 结 构 元 素
• 6.1.1 header元素
• 6.1.2 article元素
• 6.1.3 section元素
• 6.1.4 nav元素
• 6.1.5 aside元素
• 6.1.6 footer元素
• 6.2 分 组 元 素
• 6.2.1 hgroup元素
• 6.2.2 figcaption和figure
• 6.3 文本语义元素
• 6.3.1 mark元素
• 6.3.2 ruby、rt和rp元素
• 6.3.3 time元素
• 6.3.4 wbr元素
• 6.4 交 互 元 素
• 6.4.1 meter元素
• 6.4.2 progress元素
• 6.4.3 details元素
• 6.4.4 summary元素
• 6.5 音频和视频元素
• 6.5.1 video元素
• 6.5.2 audio元素
• 6.6 标 准 属 性
• 6.6.1 hidden属性
• 6.6.2 contenteditable属性
• 6.6.3 spellcheck属性
• 6.7 实战——使用HTML 5元素构建网页
• 6.8 本 章 习 题
• 第7章HTML 5新型表单的使用
• 7.1 了 解 表 单
• 7.1.1 表单概述
• 7.1.2 表单的基本结构
• 7.2 表 单 元 素
• 7.2.1 datalist元素
• 7.2.2 keygen元素
• 7.2.3 output元素
• 7.3 输 入 类 型
• 7.3.1 email类型
• 7.3.2 url类型
• 7.3.3 number类型
• 7.3.4 range类型
• 7.3.5 datepickers类型
• 7.3.6 search类型
• 7.3.7 color类型
• 7.3.8 tel类型
• 7.4 表 单 属 性
• 7.4.1 表单属性
• 7.4.2 input属性
• 7.5 实战——修改用户个人资料
• 7.6 表 单 验 证
• 7.6.1 表单验证概述
• 7.6.2 checkVali dity()验证
• 7.6.3 setCustomValidity()验证
• 7.7 本 章 习 题
• 第8章HTML 5操作页面图形
• 8.1 了解canvas元素
• 8.1.1 canvas历史
• 8.1.2 canvas元素
• 8.1.3 CSS和canvas
• 8.1.4 Canvas API
• 8.1.5 浏览器支持情况
• 8.2 绘 制 文 本
• 8.2.1 绘制普通文本
• 8.2.2 绘制阴影文本
• 8.3 绘 制 矩 形
• 8.3.1 用rect()方法绘制
• 8.3.2 用fillRect()方法绘制
• 8.3.3 用strokeRect()方法绘制
• 8.3.4 用clearRect()方法清除
• 8.4 绘 制 路 径
• 8.4.1 路径绘图方法
• 8.4.2 绘制基本图形
• 8.4.3 绘制圆形和扇形
• 8.4.4 贝塞尔曲线
• 8.5 图形变换和组合
• 8.5.1 图形变形
• 8.5.2 矩阵变换
• 8.5.3 图形组合
• 8.6 绘制颜色渐变
• 8.6.1 线性渐变
• 8.6.2 径向渐变
• 8.7 图片的常用操作
• 8.7.1 drawImage()绘制
• 8.7.2 createPattern()方法
• 8.7.3 clip()方法
• 8.8 实现动画特效
• 8.8.1 了解动画
• 8.8.2 实战——绘制动态闪动线条
• 8.9 本 章 习 题
• 第9章HTML 5的其他新特性
• 9.1 文件新增特性
• 9.1.1 获取多个文件的信息
• 9.1.2 新增的FileReader接口简介
• 9.1.3 使用FileReader接口读取文件
• 9.1.4 使用FileReader接口监听事件
• 9.1.5 文件读取时的异常处理
• 9.1.6 实战——实现文件上传
• 9.2 拖 放 功 能
• 9.2.1 拖放API简介
• 9.2.2 拖放对象的方法和属性
• 9.2.3 实战——模拟图片删除
• 9.3 新增的客户端数据存储特性
• 9.3.1 客户端存储对象简介
• 9.3.2 操作本地数据
• 9.3.3 实战——以JSON方式存取数据
• 9.4 新增的本地数据库特性
• 9.4.1 HTML 5本地数据库简介
• 9.4.2 数据库操作API
• 9.4.3 实战——实现基于数据库的收藏夹管理
• 9.5 跨文档传输信息
• 9.6 多 线 程
• 9.6.1 认识HTML 5多线程
• 9.6.2 实战——Worker对象的简单应用
• 9.7 获取位置信息
• 9.7.1 认识地图API
• 9.7.2 Position对象
• 9.8 HTML 5的离线缓存特性
• 9.9 本 章 习 题
• 第10章CSS 3快速入门
• 10.1 了解CSS 3
• 10.1.1 CSS 3发展概述
• 10.1.2 CSS 3的优缺点
• 10.1.3 浏览器支持情况
• 10.2 CSS 3的新增颜色
• 10.2.1 HSL属性
• 10.2.2 HSLA属性
• 10.2.3 RGBA属性
• 10.2.4 Opacity属性
• 10.3 CSS 3新增的选择器
• 10.3.1 属性选择器
• 10.3.2 结构化伪类选择器
• 10.3.3 目标伪类选择器
• 10.3.4 UI元素状态伪类选择器
• 10.3.5 否定伪类
• 10.3.6 通用兄弟选择器
• 10.4 CSS 3的新增属性
• 10.4.1 边框属性
• 10.4.2 背景属性
• 10.4.3 文本属性
• 10.4.4 盒模型属性
• 10.4.5 用户界面属性
• 10.4.6 新增的其他属性
• 10.5 实战——以CSS 3属性制作漂亮按钮
• 10.6 本 章 习 题
• 第11章CSS 3新增的选择器
• 11.1 属性选择器
• 11.1.1 E[att^=value]选择器
• 11.1.2 E[att$=value]选择器
• 11.1.3 E[att*=value]选择器
• 11.2 结构化伪类选择器
• 11.2.1 E:root选择器
• 11.2.2 E:nth-child(n)选择器
• 11.2.3 E:nth-last-child(n)选择器
• 11.2.4 E:nth-of-type(n)选择器
• 11.2.5 E:nth-last-of-type(n)选择器
• 11.2.6 E:last-child选择器
• 11.2.7 E:first-of-type选择器
• 11.2.8 其他选择器
• 11.3 目标伪类选择器
• 11.4 UI元素状态伪类选择器
• 11.4.1 常用的选择器
• 11.4.2 E::selection选择器
• 11.5 否定伪类选择器
• 11.6 通用兄弟选择器
• 11.7 实战——设计直观的表单页面
• 11.8 本 章 习 题
• 第12章CSS 3页面美化样式
• 12.1 CSS 3页面美化
• 12.2 文 本 样 式
• 12.2.1 新增样式
• 12.2.2 新增样式的用法
• 12.3 字 体 样 式
• 12.4 背 景 样 式
• 12.4.1 background-clip属性
• 12.4.2 background-origin属性
• 12.4.3 background-size属性
• 12.5 边 框 样 式
• 12.5.1 box-shadow属性
• 12.5.2 border-image属性
• 12.5.3 border-radius属性
• 12.6 实战——表格的艺术
• 12.7 本 章 习 题
• 第13章CSS 3页面布局样式
• 13.1 新增的多列布局属性
• 13.1.1 columns属性
• 13.1.2 column-width属性
• 13.1.3 column-count属性
• 13.1.4 column-gap属性
• 13.1.5 column-rule属性
• 13.1.6 column-span属性
• 13.1.7 column-fill属性
• 13.2 新增的盒模型属性
• 13.2.1 box-orient属性
• 13.2.2 box-direction属性
• 13.2.3 box-ordinal-group属性
• 13.2.4 box-flex属性
• 13.2.5 box-flex-group属性
• 13.2.6 box-pack属性
• 13.2.7 box-align属性
• 13.2.8 box-lines属性
• 13.3 新增的界面布局属性
• 13.3.1 box-sizing属性
• 13.3.2 resize属性
• 13.3.3 zoom属性
• 13.3.4 outline-offset属性
• 13.3.5 nav-index属性
• 13.4 本 章 习 题
• 第14章CSS 3动画特效
• 14.1 渐 变 特 效
• 14.1.1 线性渐变
• 14.1.2 径向渐变
• 14.2 转 换
• 14.2.1 2D转换
• 14.2.2 3D转换
• 14.3 过 渡
• 14.3.1 常用的单个属性
• 14.3.2 transition的简写属性
• 14.4 动 画
• 14.4.1 动画相关属性
• 14.4.2 @keyframes
• 14.5 实战——制作动画海报圈
• 14.6 本 章 习 题
• 第15章HTML 5 + CSS 3页面案例
• 15.1 JavaScript经典贪吃蛇
• 15.1.1 案例分析
• 15.1.2 JavaScript实现
• 15.1.3 页面美化
• 15.2 jQuery导航特效
• 15.2.1 jQuery简介
• 15.2.2 jQuery实现导航特效
• 15.3 CSS 3图片特效
• 15.4 其他页面效果
• 15.4.1 页面悬浮广告
• 15.4.2 鼠标特效