WEB前端技术

包艳霞

目录

  • 1 初识HTML5
    • 1.1 初识HTML5
    • 1.2 第一章教学视频
      • 1.2.1 1HTML5发展历史及优势
      • 1.2.2 2HTML5浏览器支持情况
      • 1.2.3 3创建第一个HTML5页面
      • 1.2.4 4HTML5文档基本格式
      • 1.2.5 5HTML5语法
      • 1.2.6 6HTML标记
      • 1.2.7 7标记的属性
      • 1.2.8 8HTML5文档头部相关标记
      • 1.2.9 9标题和段落标记
      • 1.2.10 10文本格式化标记
      • 1.2.11 11特殊字符标记
      • 1.2.12 12常用图像格式
      • 1.2.13 13图像标记img
      • 1.2.14 14绝对路径和相对路径
      • 1.2.15 15创建超链接
      • 1.2.16 16锚点链接
      • 1.2.17 17阶段案例—制作HTML5百科页面
  • 2 HTML5页面元素及属性
    • 2.1 HTML5页面元素及属性
    • 2.2 第二章教学视频
      • 2.2.1 1ul元素
      • 2.2.2 2ol元素
      • 2.2.3 3dl元素
      • 2.2.4 4列表的嵌套应用
      • 2.2.5 5header元素
      • 2.2.6 6nav元素
      • 2.2.7 7article元素
      • 2.2.8 8section元素
      • 2.2.9 9footer元素
      • 2.2.10 10figure和figcaption元素
      • 2.2.11 11hgroup元素
      • 2.2.12 12details和summary元素
      • 2.2.13 13progress元素 
      • 2.2.14 14meter元素
      • 2.2.15 15time元素
      • 2.2.16 16mark元素
      • 2.2.17 17cite元素
      • 2.2.18 18全局属性
      • 2.2.19 19.阶段案例——制作电影影评网
  • 3 CSS3入门
    • 3.1 CSS3入门
    • 3.2 第三章教学视频
      • 3.2.1 1CSS3简介
      • 3.2.2 2CSS样式规则
      • 3.2.3 3引入CSS样式表
      • 3.2.4 4标记选择器
      • 3.2.5 5类选择器
      • 3.2.6 6id选择器
      • 3.2.7 7通配符选择器
      • 3.2.8 8标签指定式选择器
      • 3.2.9 9后代选择器
      • 3.2.10 10并集选择器
      • 3.2.11 11字体样式属性
      • 3.2.12 12文本外观属性
      • 3.2.13 13CSS层叠性和继承性
      • 3.2.14 14CSS优先级
      • 3.2.15 15阶段案例——制作服装推广软文
  • 4 CSS3选择器
    • 4.1 CSS3选择器
    • 4.2 第四章教学视频
      • 4.2.1 1.E[att^=value] 属性选择器
      • 4.2.2 2E[att$=value]属性选择器
      • 4.2.3 3E[att=value]属性选择器
      • 4.2.4 4子代选择器
      • 4.2.5 5兄弟选择器
      • 4.2.6 6root选择器
      • 4.2.7 7not选择器
      • 4.2.8 8only-child 选择器
      • 4.2.9 9first-child和last-child选择器
      • 4.2.10 10nth-child(n)和nth-last-child(n)选择器
      • 4.2.11 11nth-of-type(n)和nth-last-of-type(n)选择器
      • 4.2.12 12empty选择器
      • 4.2.13 13target选择器
      • 4.2.14 14before选择器
      • 4.2.15 15after选择器
      • 4.2.16 16链接伪类
      • 4.2.17 17.阶段案例——制作网页设计软件列表
  • 5 CSS盒子模型
    • 5.1 CSS盒子模型
    • 5.2 第五章教学视频
      • 5.2.1 1.认识盒子模型
      • 5.2.2 2div标记
      • 5.2.3 3盒子的宽与高
      • 5.2.4 4边框属性
      • 5.2.5 5边距属性
      • 5.2.6 6box-shadow属性
      • 5.2.7 7box-sizing 属性
      • 5.2.8 8设置背景颜色与图像
      • 5.2.9 9背景与图片不透明度的设置
      • 5.2.10 10设置背景图像的平铺与位置
      • 5.2.11 11设置背景图像固定方式与大小
      • 5.2.12 12设置背景图像的显示区域与裁剪区域
      • 5.2.13 13设置多重背景图像
      • 5.2.14 14背景复合属性
      • 5.2.15 15线性渐变
      • 5.2.16 16径向渐变
      • 5.2.17 17重复渐变
      • 5.2.18 18.阶段案例——制作音乐排行
  • 6 浮动与定位
    • 6.1 浮动与定位
    • 6.2 第六章教学视频
      • 6.2.1 1.元素的浮动属性float
      • 6.2.2 2清除浮动
      • 6.2.3 3overflow属性
      • 6.2.4 4元素的定位属性
      • 6.2.5 5相对定位relative
      • 6.2.6 6绝对定位absolute
      • 6.2.7 7静态定位与固定定位
      • 6.2.8 8z-index层叠等级属性
      • 6.2.9 9元素的类型
      • 6.2.10 10span标记
      • 6.2.11 11元素的转换
      • 6.2.12 12.阶段案例—制作网页焦点图
    • 6.3 补充案例-----日历
  • 7 表单的应用
    • 7.1 表单的应用
    • 7.2 第七章教学视频
      • 7.2.1 1.表单的构成与创建
      • 7.2.2 2表单属性
      • 7.2.3 3Input元素的type属性
      • 7.2.4 4Input元素的其他属性
      • 7.2.5 5textarea元素
      • 7.2.6 6select元素
      • 7.2.7 7datalist元素
      • 7.2.8 8keygen元素
      • 7.2.9 9output元素
      • 7.2.10 10CSS控制表单样式
      • 7.2.11 11.阶段案例—制作信息登记表
  • 8 多媒体技术
    • 8.1 多媒体技术
    • 8.2 第八章教学视频
      • 8.2.1 1.HTML5多媒体的特性
      • 8.2.2 2视频和音频编解码器
      • 8.2.3 3多媒体的格式
      • 8.2.4 4支持视频和音频的浏览器
      • 8.2.5 5在HTML5中嵌入视频
      • 8.2.6 6在HTML5中嵌入音频
      • 8.2.7 7音视频中的source元素
      • 8.2.8 8调用网页多媒体文件
      • 8.2.9 9CSS控制视频的宽高
      • 8.2.10 10视频和音频的方法和事件
      • 8.2.11 11HTML5音视频发展趋势
      • 8.2.12 12.阶段案例——制作音乐播放界面
  • 9 CSS3高级应用
    • 9.1 CSS3高级应用
    • 9.2 第九章教学视频
      • 9.2.1 1.transition-property属性
      • 9.2.2 2transition-duration属性
      • 9.2.3 3transition-timing-function属性
      • 9.2.4 4transition-delay属性
      • 9.2.5 5transition属性
      • 9.2.6 6认识transform
      • 9.2.7 7.2D转换
      • 9.2.8 8.3D转换
      • 9.2.9 9@keyframes
      • 9.2.10 10animation-name属性
      • 9.2.11 11animation-duration属性
      • 9.2.12 12animation-timing-function属性
      • 9.2.13 13animation-delay属性
      • 9.2.14 14animation-iteration-count属性
      • 9.2.15 15animation-direction属性
      • 9.2.16 16animation属性
      • 9.2.17 17.阶段案例—制作工作日天气预报
    • 9.3 补充案例
      • 9.3.1 CSS3动画时钟
  • 10 实战开发—制作电商网站首页面
    • 10.1 实战开发—制作电商网站首页面
    • 10.2 第十章教学视频
      • 10.2.1 1.站点的建立与初始化
      • 10.2.2 2效果图分析
      • 10.2.3 3页面布局与定义公共样式
      • 10.2.4 4制作头部、导航及视频内容
      • 10.2.5 5制作内容部分（新品）
      • 10.2.6 6制作内容部分（试装）
      • 10.2.7 7制作内容部分（评测）
      • 10.2.8 8.制作脚部（信息注册）及版权信息部分
  • 11 补充内容
    • 11.1 补充案例源码
  • 12 实验一
    • 12.1 实验指导书及相关素材下载
    • 12.2 1标注工具介绍及HTML页面结构搭建
    • 12.3 2css样式中header部分调整
    • 12.4 3css样式中主体部分调整
    • 12.5 4css样式中footer部分调整
  • 13 实验二
    • 13.1 实验指导书及相关素材下载
    • 13.2 01京东页面结构介绍
    • 13.3 02京东页面资源获取
    • 13.4 03京东项目文件夹的创建
    • 13.5 04shortcut部分
    • 13.6 05header部分
    • 13.7 06footer下的service部分
    • 13.8 07footer下的help部分
    • 13.9 08footer下的copyright部分
  • 14 实验三
    • 14.1 实验指导书及相关素材下载
    • 14.2 mk01慕课手机实战-1
    • 14.3 mk02慕课手机实战-2
    • 14.4 mk03慕课手机实战-3
    • 14.5 mk04慕课手机实战-4
    • 14.6 mk05慕课手机实战-5(header部分补充)
    • 14.7 mk06header-nav部分动画
    • 14.8 mk07screen-1屏动画
    • 14.9 mk08screen-2屏动画
    • 14.10 mk09screen-3屏动画
    • 14.11 mk10screen-3屏动画修正
    • 14.12 mk11screen-4、5屏动画
    • 14.13 mk12screen-5屏动画修正
CSS3选择器