HTML+CSS+JavaScript网页设计-第3章-HTML5快速入门课件

1、第1页第3章HTML 5快速入门本章概述 本章的学习目标主要内容第1页第3章HTML 5快速入门本章概述 第2页本章概述为了增强Web的实用性，HTML5引入了许多新技术，对传统HTML文档进行了大幅修改，使得文档结构更加清晰明了、易读，降低了学习难度，这样既方便浏览者访问，也提高了Web开发的速度。本章将从认识HTML 5文档结构开始，详细介绍HTML 5中新增和废除的元素，新增和废除的属性，以及新增的事件等。重点讲述了新增结构元素的用法。第2页本章概述为了增强Web的实用性，HTML5引入了许多新第3页本章的学习目标了解HTML5文档结构掌握HTML 5新增的结构元素的用法掌握HTML 5

2、新增的块级元素的用法掌握HTML 5新增的行内语义元素的用法了解HTML 5中废除的元素了解HTML 5中新增和废除的属性了解HTML 5中新增的事件第3页本章的学习目标了解HTML5文档结构第4页主要内容3.1 认识HTML5文档结构3.2 HTML 5元素3.3 新增和废除的属性3.4 新增的事件3.5 本章小结3.6 思考和练习第4页主要内容3.1 认识HTML5文档结构第5页3.1 认识HTML 5文档结构HTML5文档以开头，这是文档类型声明，并且必须位于HTML5文档的第一行，用来告诉浏览器或任何其他分析程序它们所查看的文档类型。标签是HTML5文档的根标签，紧跟在之后。html标

3、签支持HTML5全局属性和manifest属性，manifest属性主要在创建HTML5离线应用的时候用到。标签是所有头部元素的容器。位于内部的元素可以包含脚本、样式表、元信息等。标签支持HTML5全局属性。第5页3.1 认识HTML 5文档结构HTML5文档以!第6页HTML 5文档结构标签位于文档的头部，不包含任何内容。meta标签的属性定义了与文档相关联的名称/值对。该标签提供页面的元信息，如针对搜索引擎和更新频度的描述和关键词。上述代码中定义了文档的字符编码是utf-8。这里，charset是meta标签的属性，而utf-8是该属性的值。标签位于标签内，定义了文档的标题。该标签定义浏览

4、器工具栏中的标题、提供页面被添加到收藏夹时的标题以及显示在搜索引擎结果中的页面标题。标签支持HTML5全局属性。标签定义文档的主题和所有内容，如文本、超链接、图像、表格和列表等都包含在该标签中。第6页HTML 5文档结构标签位于文档的头部，不第7页主要内容3.1 认识HTML5文档结构3.2 HTML 5元素3.3 新增和废除的属性3.4 新增的事件3.5 本章小结3.6 思考和练习第7页主要内容3.1 认识HTML5文档结构第8页3.2 HTML5元素HTML5在HTML4的基础上进行了大量修改，引入了很多新的元素，同时也废除了很多元素，改由其他属性或CSS样式来替代。在HTML5对分组元素

5、进行扩展之前，最常用的HTML元素的组容器就是元素。它代表一个通用的内容块，用来结合class与id对文档赋予结构。第8页3.2 HTML5元素HTML5在HTML4的基础上进第9页HTML5元素HTML5通过引入一些新元素改变了这种情况。这些元素可以对内容进行更精确的分组。新增的结构元素解决了这种div漫天飞舞的情况，增强了网页内容的语义性，这对搜索引擎而言，能够更好地识别和组织索引内容。合理地使用这些结构元素，将极大地提高搜索结果的准确度。第9页HTML5元素HTML5通过引入一些新元素改变了这种情第10页新增结构元素元 素描 述section在Web页面应用中，section元素也可以用

6、于区域的章节表述header页面主体的头部，注意与head元素相区别。head元素不可见，而header往往包含在body中footer页面的底部，即页脚。通常用于标出网站的一些相关信息，例如“关于我们”、法律声明、邮件信息和版权所有等nav专门用于菜单导航、链接导航的元素，是navigator的缩写article用于表示一篇文章的主题内容，一般为文字集中显示的区域第10页新增结构元素元 素描 述section在We第11页Section元素section元素主要用来对网站或应用程序中页面上的内容进行分块。section元素表示文档或应用的一个部分。所谓“部分”，这里是指按照主题分组的内容区域

7、。section元素通常由标题和内容组成。但section元素并不是容器元素，所以不能用CSS来渲染。当一个容器需要直接定义样式或通过脚本控制行为时，则应使用div元素。第11页Section元素section元素主要用来对网站或第12页header元素header元素是一种具有引导和导航作用的结构元素，通常用来放置整个页面或页面内的内容区块的标题，也可以包含其他内容，如数据表格、搜索表单或相关的logo图片。因此，整个页面的标题都应该放在页面的开头。header元素定义文档或者文档的一部分区域的页眉。在一个文档中，可以定义多个 header元素。需要注意head与header的不同，head

8、元素是HTML文档的所有头部元素的容器，而header元素是body元素中的一个结构元素，也可以在article元素内使用header元素，但是不能在footer、address或者另一个header元素内使用header元素。第12页header元素header元素是一种具有引导和导航第13页footer元素footer元素可以作为内容块的脚注，比如在父级内容块中添加注释，或者在网页中添加版权信息等。脚注信息的形式有作者、相关阅读链接及版权信息等。footer元素与header元素的用法基本相同，二者一个位于区块的头部，一个位于区块的尾部。与header元素一样，一个网页中也可以重复使用fo

9、oter元素，还可以为article元素和section元素添加footer元素。第13页footer元素footer元素可以作为内容块的脚注第14页nav元素nav元素是一个可以用来作为页面导航的链接组，其中的导航元素链接到其他页面或当前页面的其他部分。一般情况下，只需要将主要的、基本的链接组放进nav元素即可。例如，在页脚中通常会有一组链接，其中放着服务条款、首页和版权声明等，这时使用nav元素来组织并不适合，使用footer元素最为恰当。一个页面可以拥有多个nav元素，作为页面整体或不同部分的导航。一般来说，nav元素适用于以下场景：传统导航条、侧边栏导航条、页内导航、翻页操作。nav元

10、素在以前版本HTML的布局中作为导航条相关常用命名来使用。第14页nav元素nav元素是一个可以用来作为页面导航的链接第15页article元素article元素代表文档、页面或应用程序中独立的、完整的、可以独自被外部引用的内容。它可以是论坛帖子、报纸文章、博客条目、用户评论或独立的插件，或是其他任何独立的内容。除了内容部分，article元素通常有自己的标题(一般为header元素)，有时还有脚注(footer元素)。另外，article元素也可以嵌套使用。在嵌套使用时，内层的内容原则上需要与外层的内容有关系，即联系比较紧密，嵌套的内外层描述的又都是独立的事物。第15页article元素ar

11、ticle元素代表文档、页面或块级元素第16页元 素描 述aside用来表示注记、贴士、侧栏、摘要、插入的引用等，作为补充主体的内容。从简单页面的显示上看，就是侧边栏，可以在左边，也可以在右边figure定义媒介内容的分组，是对多个元素进行组合并展示的元素，通常和figcaption元素配合使用hgroup用来对标题元素进行分组dialog用来表示人与人之间的对话。dialog元素还包括dt和dd这两个组合元素，它们常常同时使用。dt用来表示说话者，dd表示说话内容块级元素第16页元 素描 述aside用来表示注记、第17页Aside元素aside元素表示跟这个页面的其他内容关联性不强或者没有

12、关联的内容，一般是一些附属信息。aside元素通常用来在侧边栏显示一些定义，比如目录、索引、术语表等；也可以用来显示相关的广告宣传、作者介绍、Web应用、相关链接、当前页内容简介等。但不要使用aside元素标记括号中的文字，因为这种类型的文本被认为是主内容的一部分。第17页Aside元素aside元素表示跟这个页面的其他内容第18页figure元素figure元素表示一段独立的流内容，一般表示文档主题流内容中的一个独立单元，可以使用figcaption元素为figure元素组添加标题。figure元素的内容应该与主内容相关，但如果被删除，则不应对文档流产生影响。第18页figure元素figu

13、re元素表示一段独立的流内容第19页hgroup元素hgroup 元素是将标题及其子标题进行分组的元素。当标题有多个层级(副标题)时，hgroup元素被用来对一系列 - 元素进行分组，一个内容区块的标题及其子标题算一组。通常，如果文章只有一个标题，是不需要使用hgroup元素的。第19页hgroup元素hgroup 元素是将标题及其子标题第20页dialog元素dialog元素用于定义一个对话框、确认框或窗口，它的open属性用来规定dialog元素是有效的，用户可以与它进行交互。通常会在JavaScript脚本中处理对话框的交互。第20页dialog元素dialog元素用于定义一个对话框、新

14、增的行内语义元素第21页元 素描 述mark定义有记号的文本meter表示特定范围内的数值，可用于工资、数量、百分比等time表示时间值progress用来表示进度条，可通过对其max、min、step等属性进行控制，完成对进度的表示和监视新增的行内语义元素第21页元 素描 述mark定义有第22页mark元素mark元素用来标签一些不是特别需要强调的文本。如果是需要突出显示文本，则使用上一章学习的或标签。可以为了标记特定上下文中的文本而使用这个标签，例如，用来显示搜索引擎搜索后的关键词。第22页mark元素mark元素用来标签一些不是特别需要强调第23页mark元素meter元素用来定义已知

15、范围或分数值内的标量测量，也被称为尺度。支持的属性如下min：值域的最小边界值。默认为0，如果设置了具体值，它必须比最大值要小。max：值域的上限边界值。默认为1。value：当前值。low：定义了低值区间的上限值(如果value介于min和low之间，该元素就会表现出低值的视觉效果，value落在min,low、high,max等不同的区间会使浏览器渲染该元素时出不同的视觉效果)。high：定义了高值区间的下限值。optimum：这个属性用来指示最优/最佳取值。第23页mark元素meter元素用来定义已知范围或分数值内第24页time元素time元素用于定义时间或日期，该元素代表24小时中

16、的某个时刻或某个日期，表示时刻时允许带时差。该元素能够以机器可读的方式对日期和时间进行编码，这样，用户就能够把生日提醒或排定的事件添加到用户日程表中，搜索引擎也能够生成更智能的搜索结果。第24页time元素time元素用于定义时间或日期，该元素代第25页progress元素progress元素用来显示一项任务的完成进度，为了使progress元素能够动态展示下载进度，通常需要JavaScript代码编写一个处理程序，根据实际任务进度，动态更新progress的value属性值。除了全局属性，该元素还有如下两个属性：max：该属性描述了这个progress元素所表示的任务一共需要完成多少工作。v

17、alue：该属性用来指定该进度条已完成的工作量。如果没有设置value属性，则该进度条的进度为“不确定”，浏览器中会看到一个来回滚动的进度条。第25页progress元素progress元素用来显示一项新增的其他功能元素除了前面介绍的一些元素，HTML 5还新增了一些功能元素和input元素的类型。新增的input元素的类型将在下一章学习表单时详细介绍，这里简单介绍一下新增的功能元素。所谓功能元素，是指可以用在页面中以完成某种页面显示行为的元素。第26页新增的其他功能元素除了前面介绍的一些元素，HTML 5还新增新增的其他功能元素output表示不同类型的输出source为媒介元素(如vide

18、o、audio等)定义资源menu菜单列表，使用li元素列举每一个菜单项ruby ruby注释rt表示字符的解释或发音rp在ruby注释中使用，定义不支持ruby的浏览器所显示的内容wbr软换行。在浏览器窗口或父级元素的宽度足够时不换行，而宽度不够时主动换行command命令按钮，如单选按钮、复选框或按钮details表示细节信息，可以和summary元素配合使用datalist表示可选数据列表，和input元素配合使用datagrid表示可选数据列表，以树型列表的形式显示keygen表示生成密钥第27页新增的其他功能元素output表示不同类型的输出第27页废除的元素除了新增元素以外，HTM

19、L 5还废除了一些HTML4中的元素，主要包括：能用CSS替代的元素、不再使用frame框架、只有部分浏览器支持的元素。HTML 4中的一些表现文本效果的元素，如basefont、big、center、font、s、strike、tt和u这些元素，HTML5将它们放在了CSS样式表中，因此将这些元素废除了。其中，font元素允许由“所见即所得”的编辑器插入，s、strike元素可以由del元素替代，tt元素可以由CSS的font-family属性替代。第28页废除的元素除了新增元素以外，HTML 5还废除了一些HTML废除的元素由于frame框架对网页可用性存在负面影响，因此HTML5不再支持

20、frame，只支持iframe。与frame框架相关的frameset、frame、noframes元素被废除。对于只有部分浏览器支持的元素，如applet、bgsound、blink和marquee等元素，由于只被少数浏览器支持，因此HTML5将它们废除。其中applet元素可由embed元素或object元素替代，bgsound元素可由audio元素替代，marquee元素可以由JavaScript编程方式替代。第29页废除的元素由于frame框架对网页可用性存在负面影响，因此H废除的元素使用ruby元素替代rb元素。使用abbr元素替代acronym元素。使用ul元素替代dir元素。使用

21、form元素与input元素相结合的方式替代isindex元素。使用pre元素替代listing元素。使用code元素替代xmp元素。使用GUIDS替代nextid元素。使用text/plain的MIME类型替代plaintext元素。第30页废除的元素使用ruby元素替代rb元素。第30页第31页主要内容3.1 认识HTML5文档结构3.2 HTML 5元素3.3 新增和废除的属性3.4 新增的事件3.5 本章小结3.6 思考和练习第31页主要内容3.1 认识HTML5文档结构第32页3.3 新增和废除的属性HTML 5除了新增和废除一些元素标记外，还新增和废除了HTML4中的一些属性。HT

22、ML 5新增的属性主要体现为表单属性、链接属性以及其他属性。第32页3.3 新增和废除的属性HTML 5除了新增和废除新增的表单属性第33页属性名称描 述autofocusinput、select、textarea和button元素拥有，以指定属性的方式让元素在画面打开时自动获得焦点placeholderinput(type=text)、textarea元素拥有，提示用户可以输入的内容forminput、output、select、textarea、button与fieldset元素拥有，声明这些控件属于哪个表单，然后放置在页面上的任何位置而不是表单之内required指示输入字段的值是必需的

23、autocomplete、min、max、multiple、pattern、step为input元素新增的属性。datalist元素和autocomplete属性配合使用。multiple允许在上传文件时一次上传多个文件formactionformenctypeformmethodformnovalidateformtargetinput和button元素拥有，重载form元素的action、enctype、method、novalidate、target属性novalidate取消提交时进行的有关检查，表单可以被无条件提交新增的表单属性第33页属性名称描 述autofocus新增的链接属性第

24、34页属性名称描 述media规定目标URL是为哪种类型的媒介和设备进行优化的，只能在href属性存在时使用hreflang和 rel为area元素增加的属性，以保持和a、link元素保持一致sizes为link元素增加的属性，可以和icon元素结合使用，指定关联图标的大小target为base元素增加的属性，目的是和a元素保持一致新增的链接属性第34页属性名称描 述media规定目标新增的其他属性第35页属性名称描 述reversed为ol元素增加的属性，用于指定列表倒序显示charset为meta元素增加的属性type 和label为menu元素增加的属性，label属性为菜单定义可见的标

25、注，type属性让菜单能以上下文菜单、工具条和列表菜单的形式出现scoped为style元素增加的属性，规定样式的作用范围async为script元素增加的属性，定义脚本是否异步执行manifest为html元素增加的属性，开发离线Web应用程序时，与API结合使用，定义一个URL，在这个URL上描述文档的缓存信息sandboxseamlesssrcdoc为iframe元素增加的属性，用来提高页面安全性，防止不信任的Web页面执行某些操作新增的其他属性第35页属性名称描 述reversed为废除的属性前面废除的元素中就有一些用CSS样式替代的，同样，对于一些表现页面效果的属性，如align、b

26、gcolor、background、border、cellpadding、cellspacing、frame、rules、width、alink、link、text、vlink、char、charoff、height、nowrap、vaign、hspace、vspace、nowrap、compact、type、frameborder、scrolling、marginheight、marginwidth等属性，都被废除了，改由CSS样式实现。第36页废除的属性前面废除的元素中就有一些用CSS样式替代的，同样，其它废除的属性第37页HTML4属性适应元素HTML5替代方案revlink、arelc

27、harsetlink、a在被链接的资源中使用HTTP content-type头元素shape、coordsa使用area元素代替a元素longdescimg、iframe使用a元素链接到较长描述targetlink多余属性，被省略nohrefarea多余属性，被省略profilehead多余属性，被省略versionhtml多余属性，被省略nameimgidschememeta只为某个表单域使用schemearchive、classid、codebase、codetype、declare、standbyobject使用data与type属性类调用插件。需要使用这些属性来设置参数时，使用par

28、am属性valuetype、typeparam使用name和value属性，不声明值的MIME类型axis、abbrtd、th使用以明确、简洁的文字开头，后跟详述文字的形式。可以对更详细的内容使用title属性，以使单元格的内容变得简短scopetd在被链接的资源中使用HTTP content-type头元素其它废除的属性第37页HTML4属性适应元素HTML5替代方第38页主要内容3.1 认识HTML5文档结构3.2 HTML 5元素3.3 新增和废除的属性3.4 新增的事件3.5 本章小结3.6 思考和练习第38页主要内容3.1 认识HTML5文档结构3.4 新增的事件HTML 5中对页面

29、、表单、键盘元素新增了许多事件第39页3.4 新增的事件HTML 5中对页面、表单、键盘元素新增新增的事件第40页元素对象事件触发时机window对象body对象beforeprint即将开始打印之前触发afterprint打印结束后触发resize浏览器窗口大小发生改变时触发error页面加载出错时触发offline页面变为离线状态时触发online页面变为在线状态时触发pageshow页面加载时触发，类似于load事件，区别在于load事件在页面第一次加载时触发，而pageshow事件在每一次加载时触发，即从网页缓存中读取页面时只触发pageshow事件，不触发load事件beforeunload当前页面被关闭时触发，该事件通知浏览器显示一个用于询问用户是否确实离开本页面的确认窗口，可以设置确认窗口中的提示文字hashchange页面URL地址字符串中的哈希部分发生改变时触发任何元素mousewheel当鼠标指针悬停在元素上并滚动鼠标滚轮时触发任何容器元素scroll当元