HTML5完整教程PPT学习课件

合集下载

相关主题

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

2020/3/1
6
简化的文档类型和字符集
<!DOCTYPE> 声明位于HTML文档中的最前面的位置，它位于 <html> 标签之前。
该标签告知浏览器文档所使用的HTML或 XHTML规范。
在HTML4中，<!DOCTYPE>标签可以声明三种 DTD 类型，分别表示严格版本（ Strict）、过渡版本（Transitional）和基于框架（Frameset）的 HTML 文档。
<HTML5>培训教程
2020/3/1
1
什么是HTML5？
HTML5是一个新的网络标准，现在仍处于发展阶段。目标是取代现有的HTML 4.01和 XHTML 1.0 标准。它希望能够减少互联网富应用（RIA)对Flash、Silverlight、JavaFX等的依赖，并且提供更多能有效增强网络应用的API。
14
<nav>标签示例
15
<section>标签
<section> 标签用于定义文档中的区段，例如章节、页眉、页脚或文档中的其他部分。
使用< section >标签的例子。 <section>
<h1> HTML5</h1> <p> HTML5是最新的HTML标准...</p> </section>
<meta charset="UTF-8">
10
语义化的文档标签
HTML5的设计者们认为网页应该像XML文档和图书一样有结构。
通常，网页中有导航、网页体内容、工具栏、页眉和页脚等结构。
HTML5中增加了一些新的标记以实现这些网页结构，这些新标记及其定义的网页布局
2020/3/1
<header>标签用于定义文档的页眉（介绍信息）。
使用<header>标签的例子。 <header> <h1>欢迎光临我的网站</h1> <p>我是黑龙江傲立</p> </header> <p>网页的其他部分...</p>
13
<nav>标签
<nav>标签用于定义导航链接。【例1-17】使用<nav>标签的例子。 <header> <h1>欢迎光临我的网站</h1> <p>我是黑龙江傲立</p> </header> <nav> <a href="index.asp">首页</a> <a href="intro.asp">简介</a> <a href="contact.asp">联系方式</a> </nav> <p>网页的其他部分...</p> <footer>本文档创建于2012-10-07</footer>
11
十个常用的新标签列表
<article> 定义文章
<header>定义页眉
<aside> 定义文章的侧边栏 <figure> 一组媒体对象以及文字 <figcaption> 定义 figure 的标题
<nav>定义导航 <section> 定义文档中的区段 <time>定义日期和时间
<footer>定义页脚
</article>
17
<aside>标签
<aside>标签用于定义主要内容之外的其他内容。
使用<aside>标签的例子。
<p>微软在发布Windows Phone 8时曾表示，移动版IE10在HTML5上比起IE9将会有长足的进步，看来他们并没有吹嘘。根据外站WPCentral近日对各大浏览器进行的跑分测试，我们可以看到，IE10的成绩是IE9的两倍有余。</p>
<aside>
<h4>HTML5</h4>
HTML5是最新的HTML标准。目前HTML5的标准草案已进入了W3C制定标准5大程序的第1步。预期要到 2022年才会成为 W3C 推荐标准。HTML5无疑会成为未来10年最热门的互联网技术。
</aside>
18
aside标签示例
19
<figure>标签
被弃用的标签：<acronym>、<applet>、<basefont>、<big>、<center>、<dir>、<font>、 <frame>、 <s>、<isindex>、<noframes>、 <frameset> 、<strike>、<tt>、<u>和<xmp>。
2020/3/1
12
<header>标签
<figure>标签用于定义独立的流内容（图像、图表、照片、代码等等）。
使用 <figcaption> 元素为 figure 添加标题。
<figure> <figcaption>黄浦江上的的卢浦大桥</figcaption> <p>拍摄者：W3School 项目组，拍摄时间：2010 年 10 月 </p> <img src="img/shanghai_lupu_bridge.jpg" width="350" height="234" />
2020/3/1
2
HTML5时间表
2020/3/1
3
HTML5的八大新特性
语义
离线存储
设备通用
2020/3/1
连接
多媒体三维、图形与特效性能与集成 CSS3
4
语义
2020/3/1
5
思考：什么是语义化？
语义化：是指用合理HTML标记以及其特有的属性去格式化文档内容。通俗地讲,语义化就是对数据和信息进行处理,使得机器可以理解. 语义化的(X)HTML文档有助于提升你的网站对访客的易用性，比如使用PDA、文字浏览器以及残障人士将从中受益。对于搜索引擎或者爬虫软件来说，则有助于它们建立索引，并可能给予一个较高的权值。
16
<article>标签
<article>标签用于定义文章或网页中的主要内容。
使用<article>标Байду номын сангаас的例子。
<article>
微软在发布Windows Phone 8时曾表示，移动版IE10在HTML5上比起IE9将会有长足的进步，看来他们并没有吹嘘。根据外站 WPCentral近日对各大浏览器进行的跑分测试，我们可以看到，IE10的成绩是IE9的两倍有余。......
7
HTML5的<!DOCTYPE>标签 <!DOCTYPE HTML>
8
HTML5的字符集
HTML5的字符集也得到了简化，只需要使用UTF-8即可，使用一个meta标记就可以指定HTML5的字符集，代码如下：
<meta charset="UTF-8">
9
HTML5的字符集
HTML5的字符集也得到了简化，只需要使用UTF-8即可，使用一个meta标记就可以指定HTML5的字符集，代码如下：