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

《HTML+CSS+JavaScript网页设计-第3章-HTML5快速入门课件.ppt》由会员分享，可在线阅读，更多相关《HTML+CSS+JavaScript网页设计-第3章-HTML5快速入门课件.ppt（44页珍藏版）》请在三一办公上搜索。

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新增的结构元素的用

2、法掌握HTML 5新增的块级元素的用法掌握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文

3、档的根标签，紧跟在之后。html标签支持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的基础上进行了大量修改，引入了很多新的元素，同时也废除了很多元

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

6、,第10页新增结构元素元 素描 述section在We,第11页,Section元素,section元素主要用来对网站或应用程序中页面上的内容进行分块。section元素表示文档或应用的一个部分。所谓“部分”，这里是指按照主题分组的内容区域。section元素通常由标题和内容组成。但section元素并不是容器元素，所以不能用CSS来渲染。当一个容器需要直接定义样式或通过脚本控制行为时，则应使用div元素。,第11页Section元素section元素主要用来对网站或,第12页,header元素,header元素是一种具有引导和导航作用的结构元素，通常用来放置整个页面或页面内的内容区块的标题，

7、也可以包含其他内容，如数据表格、搜索表单或相关的logo图片。因此，整个页面的标题都应该放在页面的开头。header元素定义文档或者文档的一部分区域的页眉。在一个文档中，可以定义多个 header元素。需要注意head与header的不同，head元素是HTML文档的所有头部元素的容器，而header元素是body元素中的一个结构元素，也可以在article元素内使用header元素，但是不能在footer、address或者另一个header元素内使用header元素。,第12页header元素header元素是一种具有引导和导航,第13页,footer元素,footer元素可以作为内容块的

8、脚注，比如在父级内容块中添加注释，或者在网页中添加版权信息等。脚注信息的形式有作者、相关阅读链接及版权信息等。footer元素与header元素的用法基本相同，二者一个位于区块的头部，一个位于区块的尾部。与header元素一样，一个网页中也可以重复使用footer元素，还可以为article元素和section元素添加footer元素。,第13页footer元素footer元素可以作为内容块的脚注,第14页,nav元素,nav元素是一个可以用来作为页面导航的链接组，其中的导航元素链接到其他页面或当前页面的其他部分。一般情况下，只需要将主要的、基本的链接组放进nav元素即可。例如，在页脚中通常会

9、有一组链接，其中放着服务条款、首页和版权声明等，这时使用nav元素来组织并不适合，使用footer元素最为恰当。一个页面可以拥有多个nav元素，作为页面整体或不同部分的导航。一般来说，nav元素适用于以下场景：传统导航条、侧边栏导航条、页内导航、翻页操作。nav元素在以前版本HTML的布局中作为导航条相关常用命名来使用。,第14页nav元素nav元素是一个可以用来作为页面导航的链接,第15页,article元素,article元素代表文档、页面或应用程序中独立的、完整的、可以独自被外部引用的内容。它可以是论坛帖子、报纸文章、博客条目、用户评论或独立的插件，或是其他任何独立的内容。除了内容部分，

10、article元素通常有自己的标题(一般为header元素)，有时还有脚注(footer元素)。另外，article元素也可以嵌套使用。在嵌套使用时，内层的内容原则上需要与外层的内容有关系，即联系比较紧密，嵌套的内外层描述的又都是独立的事物。,第15页article元素article元素代表文档、页面或,块级元素,第16页,块级元素第16页元 素描 述aside用来表示注记、,第17页,Aside元素,aside元素表示跟这个页面的其他内容关联性不强或者没有关联的内容，一般是一些附属信息。aside元素通常用来在侧边栏显示一些定义，比如目录、索引、术语表等；也可以用来显示相关的广告宣传、作者介

11、绍、Web应用、相关链接、当前页内容简介等。但不要使用aside元素标记括号中的文字，因为这种类型的文本被认为是主内容的一部分。,第17页Aside元素aside元素表示跟这个页面的其他内容,第18页,figure元素,figure元素表示一段独立的流内容，一般表示文档主题流内容中的一个独立单元，可以使用figcaption元素为figure元素组添加标题。figure元素的内容应该与主内容相关，但如果被删除，则不应对文档流产生影响。,第18页figure元素figure元素表示一段独立的流内容,第19页,hgroup元素,hgroup 元素是将标题及其子标题进行分组的元素。当标题有多个层级(

12、副标题)时，hgroup元素被用来对一系列 - 元素进行分组，一个内容区块的标题及其子标题算一组。通常，如果文章只有一个标题，是不需要使用hgroup元素的。,第19页hgroup元素hgroup 元素是将标题及其子标题,第20页,dialog元素,dialog元素用于定义一个对话框、确认框或窗口，它的open属性用来规定dialog元素是有效的，用户可以与它进行交互。通常会在JavaScript脚本中处理对话框的交互。,第20页dialog元素dialog元素用于定义一个对话框、,新增的行内语义元素,第21页,新增的行内语义元素第21页元 素描 述mark定义有,第22页,mark元素,ma

13、rk元素用来标签一些不是特别需要强调的文本。如果是需要突出显示文本，则使用上一章学习的或标签。可以为了标记特定上下文中的文本而使用这个标签，例如，用来显示搜索引擎搜索后的关键词。,第22页mark元素mark元素用来标签一些不是特别需要强调,第23页,mark元素,meter元素用来定义已知范围或分数值内的标量测量，也被称为尺度。支持的属性如下min：值域的最小边界值。默认为0，如果设置了具体值，它必须比最大值要小。max：值域的上限边界值。默认为1。value：当前值。low：定义了低值区间的上限值(如果value介于min和low之间，该元素就会表现出低值的视觉效果，value落在min,

14、low、high,max等不同的区间会使浏览器渲染该元素时出不同的视觉效果)。high：定义了高值区间的下限值。optimum：这个属性用来指示最优/最佳取值。,第23页mark元素meter元素用来定义已知范围或分数值内,第24页,time元素,time元素用于定义时间或日期，该元素代表24小时中的某个时刻或某个日期，表示时刻时允许带时差。该元素能够以机器可读的方式对日期和时间进行编码，这样，用户就能够把生日提醒或排定的事件添加到用户日程表中，搜索引擎也能够生成更智能的搜索结果。,第24页time元素time元素用于定义时间或日期，该元素代,第25页,rogress元素,rogress元素用

15、来显示一项任务的完成进度，为了使progress元素能够动态展示下载进度，通常需要JavaScript代码编写一个处理程序，根据实际任务进度，动态更新progress的value属性值。除了全局属性，该元素还有如下两个属性：max：该属性描述了这个progress元素所表示的任务一共需要完成多少工作。value：该属性用来指定该进度条已完成的工作量。如果没有设置value属性，则该进度条的进度为“不确定”，浏览器中会看到一个来回滚动的进度条。,第25页progress元素progress元素用来显示一项,新增的其他功能元素,除了前面介绍的一些元素，HTML 5还新增了一些功能元素和input元

16、素的类型。新增的input元素的类型将在下一章学习表单时详细介绍，这里简单介绍一下新增的功能元素。所谓功能元素，是指可以用在页面中以完成某种页面显示行为的元素。,第26页,新增的其他功能元素除了前面介绍的一些元素，HTML 5还新增,新增的其他功能元素,output表示不同类型的输出source为媒介元素(如video、audio等)定义资源menu菜单列表，使用li元素列举每一个菜单项ruby ruby注释rt表示字符的解释或发音rp在ruby注释中使用，定义不支持ruby的浏览器所显示的内容wbr软换行。在浏览器窗口或父级元素的宽度足够时不换行，而宽度不够时主动换行command命令按钮，

17、如单选按钮、复选框或按钮details表示细节信息，可以和summary元素配合使用datalist表示可选数据列表，和input元素配合使用datagrid表示可选数据列表，以树型列表的形式显示keygen表示生成密钥,第27页,新增的其他功能元素output表示不同类型的输出第27页,废除的元素,除了新增元素以外，HTML 5还废除了一些HTML4中的元素，主要包括：能用CSS替代的元素、不再使用frame框架、只有部分浏览器支持的元素。HTML 4中的一些表现文本效果的元素，如basefont、big、center、font、s、strike、tt和u这些元素，HTML5将它们放在了CS

18、S样式表中，因此将这些元素废除了。其中，font元素允许由“所见即所得”的编辑器插入，s、strike元素可以由del元素替代，tt元素可以由CSS的font-family属性替代。,第28页,废除的元素除了新增元素以外，HTML 5还废除了一些HTML,废除的元素,由于frame框架对网页可用性存在负面影响，因此HTML5不再支持frame，只支持iframe。与frame框架相关的frameset、frame、noframes元素被废除。对于只有部分浏览器支持的元素，如applet、bgsound、blink和marquee等元素，由于只被少数浏览器支持，因此HTML5将它们废除。其中ap

19、plet元素可由embed元素或object元素替代，bgsound元素可由audio元素替代，marquee元素可以由JavaScript编程方式替代。,第29页,废除的元素由于frame框架对网页可用性存在负面影响，因此H,废除的元素,使用ruby元素替代rb元素。使用abbr元素替代acronym元素。使用ul元素替代dir元素。使用form元素与input元素相结合的方式替代isindex元素。使用pre元素替代listing元素。使用code元素替代xmp元素。使用GUIDS替代nextid元素。使用text/plain的MIME类型替代plaintext元素。,第30页,废除的元素

20、使用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中的一些属性。HTML 5新增的属性主要体现为表单属性、链接属性以及其他属性。,第32页3.3 新增和废除的属性HTML 5除了新增和废除,新增的表单属性,第33页,新增的表单属性第33页属性名称描 述autofocus,新增的链接属性,第34页,新增的链接

21、属性第34页属性名称描 述media规定目标,新增的其他属性,第35页,新增的其他属性第35页属性名称描 述reversed为,废除的属性,前面废除的元素中就有一些用CSS样式替代的，同样，对于一些表现页面效果的属性，如align、bgcolor、background、border、cellpadding、cellspacing、frame、rules、width、alink、link、text、vlink、char、charoff、height、nowrap、vaign、hspace、vspace、nowrap、compact、type、frameborder、scrolling、margi

22、nheight、marginwidth等属性，都被废除了，改由CSS样式实现。,第36页,废除的属性前面废除的元素中就有一些用CSS样式替代的，同样，,其它废除的属性,第37页,其它废除的属性第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中对页面、表单、键盘元素新增了许多事件,第39页,3.4 新增的事件HTML 5中对页面、表单、键盘元素新增,新增的事件,第40

23、页,新增的事件第40页元素对象事件触发时机window对象bef,第41页,主要内容,3.1 认识HTML5文档结构3.2 HTML 5元素3.3 新增和废除的属性3.4 新增的事件3.5 本章小结3.6 思考和练习,第41页主要内容3.1 认识HTML5文档结构,第42页,3.5 本章小结,HTML 5引入了许多新技术，对传统HTML元素进行了分类，并根据开发人员的习惯和实践中常用的功能，以及Web应用跨平台的发展需求，增加了大量新元素、新功能。本章详细介绍了HTML 5中新增的元素、属性和事件。首先介绍了HTML 5的文档结构；接着重点学习了HTML 5中新增和废除的元素，把这些新增的元素

24、分为几类分别举例说明了其用法；然后阐述了HTML 5中新增和废除的属性，这些属性会在以后学习中详细介绍，非常的属性也会在学习CSS时讲解如何使用CSS替代废除的属性；最后简要介绍了HTML 5中新增的事件。,第42页3.5 本章小结 HTML 5引入了许多新技术，对,第43页,主要内容,3.1 认识HTML5文档结构3.2 HTML 5元素3.3 新增和废除的属性3.4 新增的事件3.5 本章小结3.6 思考和练习,第43页主要内容3.1 认识HTML5文档结构,第44页,3.6 思考和练习,1. 简单描述HTML 5文档的结构，并指出每个部分的含义。2. HTML5新增了哪些结构元素？简单描述这些元素的使用场景。3. nav元素在HTML5 中用于包裹一个导航链接组，用于显示地说明这是一个导航组，在同一个页面这可以同时存在 个nav。4. 元素用于定义一个对话框、确认框或窗口，它的 属性用来规定该元素是有效的，用户可以与它进行交互5. HTML5新增了哪些语义元素？简单描述这些元素的使用场景。6. 使用本章介绍的HTML文档结构知识及新增元素构建一个简单的网页。,第44页3.6 思考和练习 1. 简单描述HTML 5文档,