第1章 【HTML5入门精通实战教程】HTML5概述.pptx

HTML5 入门精通实战教程第1章 HTML5概述讲师：金超服第1章 HTML5概述（大纲）1.1 什么是HTML51.2 HTML5发展历史1.3 HTML5的特点什么？1.4 HTML5开发工具1.5 HTML文档的基本结构1.6 为什么要学HTML5？1.7 如何学好HTML5？1.1 什么是HTML5HTML5是HTML的一个版本。HTML即超文本标记语言。HTML是一种标准或者规范。HTML通过标记显示网页各个部分。HTML5是W3C推荐标准。HTML5是web编程的核心语言。Link: 1“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。之所以称为超文本标记语言，是因为文本中包含了所谓“超级链接”点。21.2 HTML5发展历史HTML5发展历史2000年XHTML1.02012年HTML5成为候选标准2022年正式发布1993年HTML1.01997年HTML3.21995 年HTML2.01999年HTML4.012008年HTML5第一份草案2020年最终测试……1.3 HTML5的特点是什么？1、各大浏览器对HTML支持较好 HTML5对浏览器要求最低版本：IE9、Firefox 3.5、Chrome 3.0、Safari 3.0、Opera 10.5 目前各大浏览器的最新版本：IE11、Firefox 45.0.1、Chrome 49.0.2623.110、Safari 、Opera 36.0.2130.461.3 HTML5的特点是什么？2、网页布局更加简洁、清晰、规范VS1.3 HTML5的特点是什么？3、声明和引用更加简洁HTML4一声明HTML5HTML4编码HTML5HTML4壹CSSHTML5HTML4JSHTML51.3 HTML5的特点是什么？4、HTML5可跨平台运行 从PC浏览器到手机、平板电脑，甚至将来的智能电视。 比如你开发了一款HTML5的游戏，你可以很轻易地移植到UC的开放平台、Opera的游戏中心、Facebook应用平台，甚至可以通过封装的技术发放到App Store或Google Play上。设备通用语义图形连接HTML5性能与集成多媒体离线存储CSS1.3 HTML5的特点是什么？5、HTML5的八大新特征1.3 HTML5的特点是什么？6、HTML5更有利于SEO(1)清晰的语义有利于蜘蛛抓取。(2)图形和多媒体为图片、视频、FLASH站带来更多的流量。(3)更多的功能有利于用户体验。 小知识SEO：SEO是由英文Search Engine Optimization缩写而来， 中文意译为“搜索引擎优化”。1.4 HTML5的开发工具推荐工具（1）dreamweaver（2）JetBrains WebStorm （3）Sublime Text（4）Hbuilder（5）Brackets我们用Brackets，因为它是开源免费的，还是大公司Adobe的产品，插件很丰富，界面简洁，功能强大，支持实时预览。http://brackets.io//adobe/brackets/releases1.4 HTML5的开发工具Brackets插件推荐（1）Indent Guides，显示一条竖直的缩进辅助线。（2）Emmet(原名Zen coding)，快速书写HTML/CSS必备神器。（3）Beautify，一个代码格式化的软件。（4）Autosave Files on Window Blur，当软件失去焦点或切换程序时，自动保存所有文件。（5）Themes，可以改变编辑器的样式。选择想要的主题。1.5 HTML5文档的基本结构HTML5文档基本元素说明HTML5文档的基本结构!DOCTYPE html html lang = zh-cn“ headmeta charset= “utf-8”titleHTML5/title /head body /body /html!DOCTYPE 不是 HTML 标签。它为浏览器提供一项信息（声明），即 HTML 是用什么版本编写的。html 元素定义了整个 HTML 文档head 元素是所有头部元素的容器meta定义关于 HTML 文档的元信息title 标签定义文档的标题body 元素定义文档的主体HTML 元素以开始标签起始HTML 元素以结束标签终止元素的内容是开始标签与结束标签之间的内容大多数 HTML 元素可以嵌套大多数 HTML 元素可拥有属性某些 HTML 元素具有空内容HTML 标签对大小写不敏感自身优势UC浏览器百度轻应用Web APP游戏乔布斯HTML5谷歌视频微信微软支付宝需求大，工资高1.6 为什么要学HTML5？1.7 如何学好HTML51、牢固熟练掌握基本元素2、常看HTML5手册(w