第2讲HTML5新特性.ppt

4．HTML5的!DOCTYPE标签 对于初学者而言，前面的内容也许有些复杂，不好理解。不过，好在HTML5对!DOCTYPE标签进行了简化，只支持HTML一种文档类型。定义代码如下： !DOCTYPE HTML 之所以这么简单，是因为HTML5不再是SGML（Standard Generalized Markup Language，标准通用标记语言，是一种定义电子文档结构和描述其内容的国际标准语言，是所有电子文档标记语言的起源）的一部分，而是独立的标记语言。这样做设计HTML文档时就不需要考虑文档类型了。 5．HTML5的字符集 如果要正确地显示HTML页面，浏览器必须知道使用何种字符集。HTML4的字符集包括ASCII、ISO-8859-1、Unicode等很多类型。 HTML5的字符集也得到了简化，只需要使用UTF-8即可，使用一个meta标记就可以指定HTML5的字符集，代码如下： meta charset=UTF-8 1.3.2 HTML5的新结构 HTML5的设计者们认为网页应该像XML文档和图书一样有结构。 通常，网页中有导航、网页体内容、工具栏、页眉和页脚等结构。 HTML5中增加了一些新的标记以实现这些网页结构，这些新标记及其定义的网页布局 1．section标签 section 标签用于定义文档中的区段，例如章节、页眉、页脚或文档中的其他部分。 【例1-14】 使用 section 标签的例子。 section h1 HTML5/h1 p HTML5是必威体育精装版的HTML标准.../p /section 2．header标签 header标签用于定义文档的页眉（介绍信息）。 【例1-15】 使用header标签的例子。 header h1欢迎光临我的网站/h1 p我是启明星/p /header p网页的其他部分.../p 浏览【例1-15】的结果 3．footer标签 footer标签用于定义区段（section）或文档的页脚。通常，该元素包含作者的姓名、文档的创作日期或者联系方式等信息。 【例1-16】 使用footer标签的例子。 header h1欢迎光临我的网站/h1 p我是启明星/p /header p网页的其他部分.../p footer本文档创建于2012-10-07/footer 浏览【例1-16】的结果 4．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 浏览【例1-17】的结果 5．article标签 article标签用于定义文章或网页中的主要内容。 【例1-18】 使用article标签的例子。 article 微软在发布Windows Phone 8时曾表示，移动版IE10在HTML5上比起IE9将会有长足的进步，看来他们并没有吹嘘。根据外站WPCentral近日对各大浏览器进行的跑分测试，我们可以看到，IE10的成绩是IE9的两倍有余。 /article 6．aside标签 aside标签用于定义主要内容之外的其他内容。 【例1-19】 使用aside标签的例子。 p微软在发布Windows Phone 8时曾表示，移动版IE10在HTML5上比起IE9将会有长足的进步，看来他们并没有吹嘘。根据外站WPCentral近日对各大浏览器进行的跑分测试，我们可以看到，IE10的成绩是IE9的两倍有余。/p aside h4HTML5/h4 HTML5是必威体育精装版的HTML标准。目前HTML5的标准草案已进入了W3C制定标准5大程序的第1步。预期要到2022年才会成为 W3C 推荐标准。HTML5无疑会成为未来10年最热门的互联网技术。 /aside 浏览【例1-19】的结果 7．figure标签 figure标签用于定义独立的流内容（图像、图表、照片、代码等等）。 【例1-20】 使用figure标签的例子。 figure p睡莲/p img src=Water lilies.jpg width=350 height=234 / /figure 浏览【例1-20】的结果 1.3.3 HTML5的新增内联元素 1．mark标签 2．time标签 3．meter标签 4．progress标签 1．mark标签 mark标签用于定义带有记号的文本。 【例1-21】 使mark标