HTML5与CSS3实现动态网页
步骤1: 初识HTML5
本阶段内容主要涵盖H5新增、删除标签、标签属性变化以及HTML5布局知识。
通过本阶段学习，大家可以运用HTML5标签轻松实现网页音乐播放器和视频播放器，熟练运用HTML5的语义化标签进行静态网页的开发。
HTML5 ≈ HTML + CSS + JS + API
学前准备：
了解HTML基本知识
具备CSS基础
熟练使用JavaScript移动互联网 HTML5 的优势
- 跨平台
- HTML5 是唯一通吃PC、Mac、iPhone、Android等主流平台的语言
- 快速迭代
- 互联网产品大多免费、且有网络效应，后来者抢夺用户难度非常大
- 减低成本
- HTML5 开发比原生APP开发成本低一半
- 导流入口多
- HTML5 应用导流非常容易
- 跨平台
Web 改变趋势
- Native APP → WebApp → Hybrid App
- PC → 移动 → 智慧互联
学习目标
- 掌握新标签以及新属性的功能特点，并熟练应用
- 了解HTML5的前景及学习展望
- 明确未来的学习目标和深入学习的方向
- 为移动前端打好基础
第1课 HTML5标签变化
HTML5标签变化
HTML5文档类型如何定义，有哪些标签，以及如何使用，从整体认识HTML5
DTD、新增的标签、删除的标签、重定义标签
HTML
<!DOCTYPE>标签定义和用法：
- 版本声明，在文档的第一行
不是 HTML 标签
常用声明：
HTML 4.01 Strict
该 DTD 包含所有 HTML 元素和属性，但不包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">HTML 4.01 Transitional
该 DTD 包含所有 HTML 元素和属性，包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">HTML 4.01 Frameset
该 DTD 等同于 HTML 4.01 Transitional，但允许框架集内容。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
文档类型定义（DTD)
- DTD：定义合法的 XML 文档构建模块，它使用一系列合法元素来定义文档结构
- HTML 中的 DTD：规定了标记语言的规则，浏览器才能正确的显示内容
- HTML5 中的 DTD：HTML5 不基于 SGML，所以不需要引用 DTD
- HTML 元素和文档类型：www.w3school.com.cn/tags/html_ref_dtd.asp
新增的标签
结构标签
- 块状元素，有意义的 div
| 标签 | 描述 |
|---|---|
<header> |
定义了一个页面或一个头部区域 |
<nav> |
定义导航栏链接 |
<section> |
定义一个区域 |
<aside> |
定义页面内容部分的侧边栏 |
<hgroup> |
定义文件中一个区块的相关信息 |
<figure> |
定义一组媒体内容以及他们的标题 |
<figcaption> |
定义 figure 元素的标题 |
<footer> |
定义一个页面或一个区域的底部 |
<article> |
定义一篇文章 |
<dialog> |
定义一个会话框，类似微信 |
- 标签嵌套级别：header / section / footer > aside / article / figure / hgroup / nav > div / figcaption
多媒体标签
- 三类媒体标签
| 标签 | 描述 |
|---|---|
<video> |
定义一个视频 |
<audio> |
定义音频内容 |
<source> |
定义媒体资源 |
<canvas> |
定义画布 |
<embed> |
定义外部的可交互的内容或插件，如：flash |
- 默认属性：
controls="controls" width="200px" autoplay="autoplay" loop="-1" - 标签的意义：多媒体标签的出现意味着富媒体的发展以及支持不使用插件的情况下操作媒体文件，极大的提高可用户体验
Web 应用标签
状态标签：
标签 描述 <meter>状态标签（实时状态显示：气压、气温） <progress>状态标签（任务过程：安装、加载） - 浏览器兼容：
标签 兼容性 <meter>Chrome、Opera <progress>Chrome、FireFox、Opera 列表标签
标签 描述 <datalist>为 input标记定义一个下拉列表，配合option<details>标记定义一个元素的详细内容，配合 summary- 浏览器兼容
标签 兼容性 <datalist>FireFox、Opera <datails>Chrome Menu 标签
标签 描述 <menu>命令列表（目前所有浏览器不支持） <menuitem>menu 命令列表标签（只有 FireFox8.0+ 支持） <command>menu 标记定义一个命令按钮（只有 IE9 支持）
其它标签
注释标签
标签 描述 <ruby>定义注释或音标 <rt>定义对ruby的注释内容文本 <rp>告诉不支持的浏览器如何去显示 <mark>：定义有标记的文本（黄色选中显示）- 兼容IE9以上所有浏览器
<output>：定义一些输出类型，计算表单结果配合oninput事件<keygen>：定义表单里一个生成的键值（加密信息传送）<time>：定义一个日期/事件，目前所有主流浏览器都不支持
删除的标签
- 纯表现的元素
- basefont、big、center、font、s、strike、tt、u
- 对可用性产生负面影响的元素
- frame、frameset、noframes
- 产生混淆的元素
- acronym、applet、isindex、dir
重定义标签
显示不变，表达的含义进行了重新定义的标签
标签 描述 <b>代表内联文本，通常是粗体，没有传递表示重要的意思 <i>代表内联文本，通常是斜体，没有传递表示重要的意思 <dd>可以同details于figure以前使用，定义包含文本，dialog也可以用 <dt>可以同details于figure以前使用，汇总细节，dialog也可以用 <hr>表示主题结束，而不是水平线，虽然显示相同 <menu>重新定义用户界面菜单，配合commond或者menitem使用 <small>表示小字体，例如打印注释或者法律条款 <strong>表示重要性而不是强调符号
第2课 HTML5网页布局
HTML5网页布局
传统布局与HTML5网页布局的区别和意义，通过案例讲解如何使用HTML5搭建网页
传统布局与HTML5布局
新布局的意义
- 语义化
- HTML5 可以让更语义化的结构化代码标签代替大量的无意义的 div 标签
- 这种语义化特性提升了网页的质量和语义
- 减少了以前用于 CSS 调用的 class 和 id 属性
- 对搜索引擎更友好
- 新的架构标签带来的是网页布局的改变，即提升搜索引擎的友好
- HTML5 可以让更语义化的结构化代码标签代替大量的无意义的 div 标签
第3课 HTML5属性变化
HTML5属性变化
了解这些属性带来的好处，加深对标签的认识，将提高以后的开发效率
input、表单属性、链接属性、其它属性
input 属性
- email 、url、number、tel ：手机端输入法有效果
- Date picker 类型：
- Date：选取日、月、年
- Mouth：选取月、年
- Week：选取周、年
- Time：选取时间（小时、分钟）
- Datetime：选取时间、日、月、年（utc时间），safari opera兼容
- Datetime-local：选取使时间、日、月、年（本地时间）chrome safari opera兼容
- range 类型：取值范围，
<input type="range" name="range" min="1" max="10"> - search 类型：带清空的输入框，
<input type="search" name="search"> - color 类型：取色器，
<input type="color" name="color">
表单属性
- autocomplete 属性：
form或input域应该拥有自动完成功能<form autocomplete="on"></form>- autocomplete 适用于
<form>标签，以及以下类型的<input>标签：- text、search、url、telephone、email、password、datepickers、range、color
autofocus="autofocus"属性：- 页面加载时，域自动获得焦点
<input type="text autofocus="autofocus">- 适用于所有 input 标签
- multiple 属性：
- 规定输入域中可以选择多个值
<input type="text multiple="multiple">- 适用于email、file类型 input标签
- placeholder 属性：
- 提供一种提示（hint），描述输入域所期待的值
<input type="search" placeholder="Search Content"- 适用于 input 标签 type 属性为：
- text、search、url、telephone、email、password
- required 属性：
- 规定必须在提交之前填写输入域（不能为空）
<input type="text" required="required">- 适用于 input 标签 type 属性为：
- text、search、url、telephone、email、password、date pinckers、number、checkbox、radio、file
链接属性
<link>的sizes属性：<link rel="icon" href="icon.gif" type="image/gif" sizes="16x16">
<base>的target属性 ：<base href="http://localhost/" target="_blank">
- 超链接
<a>属性：a:meida=""：表示对设备进行优化，handhelp对手持设备支持，tv对电视设备支持a:hreflang="zh"：设置语言，这里表示中文a:rel="external"：设置超链接的引用，这里表示外部链接
其它属性
- script 标签
- defer：加载完脚本后并不执行，而是等整个页面加载完之后再执行
<script defer src="url"></script>- 原来只兼容IE，现在已经兼容所有浏览器
- async：加载完脚本后立即执行，不用等整个页面加载完，属于异步执行
<script async src="url"></script>- 兼容所有浏览器
- defer：加载完脚本后并不执行，而是等整个页面加载完之后再执行
- ol 标签
- Start：有序列表起始位置
- Reserved：有序列表倒叙
- html 标签
- manifest=”cache.manifest”
- 定义页面离线应用文件
<html manifest="cache.manifest"
- manifest=”cache.manifest”
- style 标签
- scoped：内嵌 CSS
<style scoped> </style>
步骤2: 搞懂CSS3
本阶段内容主要涵盖CSS3选择器、边框、圆角、背景、渐变、转换、过渡、动画等知识。
通过本阶段学习，大家将能够更加准确的控制页面的布局等样式效果，实现非常炫酷的CSS3动画特效，让网页丰富多彩。
点击去GitHub查看完整版
步骤5: 项目实战
光学不练假把式，实践是巩固知识最好的方法，本环节，将带领大家一步步开发出炫酷的动态网页，让大家能够从实践中总结经验，并且提升解决问题的能力。
