Web增强与垄断 #
- WebAPP
HTML5新增加了离线存储,更丰富的表单、JS线程、socket、标准扩展embed、CSS3...
- 流媒体与多媒体引擎
Audio、Video、Canvas、webgl等等
- 搜索引擎和无障碍领域
移动互联网 #
- 跨平台
HTML5是唯一一个通吃PC、Mac、iPhone、Android等主流平台的跨平台语言
- 快速迭代
互联网产品大多免费、且有网络效应,后入者抢夺用户的难度非常大
- 减低成本
HTML5开发比原生APP开发成本降低一倍
- 导流入口多
HTML5应用导流以非常容易
- 分发效率高
Web趋势 #
- Native App -> WebAPP -> Hybird App
- PC->移动->智慧互联
- AR、VR、智能硬件
- 视频变局、在线教育、泛娱乐
内容 #
标签变化 #
DTD、新增的标签、删除的标签、重定义标签
页面布局 #
新的页面布局、区别和意义
属性变化 #
Input、表单属性、链接属性、其它属性
HTML5展望 #
简述API、简述Canvas、移动端应用
浏览器 #
目前支持HTML5的浏览器有
- IE9+
- Firefox
- Opera
- Safari
- Chrome
开发工具 #
- 文本编辑器
记事本、Editplus、Sublime Text、Notepad++等
- IDE
Adobe Dreamweaver、Webstorm、Microsoft Visual Studio
- 推荐使用
Node.js+Sublime Text 3
HTML 标签 #
定义和用法
<!DOCTYPE>声明必须是HTML文档的第一行,位于标签之前
DOCTYPE不是HTML标签
指示Web浏览器关于页面是使用哪个HTML版本进行编写的指令
常用的DOCTYPE声明 #
HTML 4.01 Strict
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01 Transitional
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
HTML 4.01 Frameset
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
HTML5
<!DOCTPYE html>
文档类型定义(DTD) #
DTD
DTD可定义合法的XML文档构建模块,它使用一系列合法的元素来定义文档的结构
在HTML中
DTD规定了标记语言的规则,这样浏览器才能正确的呈现内容
HTML5
HTML5不基于SGML,让你以不需要引入DTD
HTML元素和文档类型
dtd
新增加标签 #
结构标签 #
结构标签(块状元素) - 有意义的div
- article 标记定义一篇文章
- header 标记定义一个页面或一个区域的头部
- nav 标记定义导航链接
- section 标记定义一个区域
- aside 标记定义页面内容部分的侧边栏
- hgroup 标记定义文件中一个区块的相关信息
- figure 标记定义一级媒体内容以及它们的标题
- figcaption 标签定上庄镇figure元素的标题
- footer 标记定义一个页面或一个区域的底部
- dialog 标记定义一个对话框(会话框)类似微信
header/section/aside/article/footer
header/section/footer > aside/article/figure/hgroup/nav > div
多媒体标签 #
多媒体 标签的出现意味着富媒体的发展以及支持不使用插件的情况下即可操作媒体文件,极大地提升了用户体验
Web应用标签 #
状态标签 #
- 状态标签(实时状态显示:气压、气温)
- Chrome、Opera
列表标签 #
Firefox Opera
Chrome
- menu标记一个命令按钮(只有IE9支持)
注释标签 #
- 标记定义注释或音标
其他标签 #
- 标记定义有标记的文本(黄色选中状态)
- 标记定义表单里一个生成的键值(加密信息传送)
删除标签 #
纯表现元素 #
Basefont big center font s strike tt u
对可用性产生负责影响的元素 #
frame freamset noframes
- 破坏整体结构
- 不影响搜索引擎的收录
产生混淆的元素 #
acronym applet isindex dir
重定向标签 #
显示不变,只是表达的含义进行了重新定义的标签
- 代表内联文本,通常是粗体,没有传递表示重要的意思
- 代表内联文本,通常是斜体,没有传递表示重要的意思
- 可以同details与figure一同使用,包含文本,dialog也可用
- 可以同details与figure一同使用,汇总细节,dialog也可用
表示主题结束,而不是水平线,虽然显示相同
- 表示小字体,例如打印注释 或者法律条款
- 表示重要性而不是强调符号