资源描述
,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,第,*,页,HTML+CSS+JavaScript,网页设计,第,3,章,HTML,5,快速入门,第,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新增的块级元素的用法,掌握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,标签支持,HTML5,全局属性和,manifest,属性，,manifest,属性主要在创建,HTML5,离线应用的时候用到。,标签是所有头部元素的容器。位于,内部的元素可以包含脚本、样式表、元信息等。,标签支持,HTML5,全局属性。,第5页3.1 认识HTML 5文档结构HTML5文档以!,第,6,页,HTML,5,文档结构,标签位于文档的头部，不包含任何内容。,meta,标签的属性定义了与文档相关联的名称,/,值对。该标签提供页面的元信息，如针对搜索引擎和更新频度的描述和关键词。上述代码中,定义了文档的字符编码是,utf-8,。这里，,charset,是,meta,标签的属性，而,utf-8,是该属性的值。,标签位于,标签内，定义了文档的标题。该标签定义浏览器工具栏中的标题、提供页面被添加到收藏夹时的标题以及显示在搜索引擎结果中的页面标题。,标签支持,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,对分组元素进行扩展之前，最常用的,HTML,元素的组容器就是,元素。它代表一个通用的内容块，用来结合,class,与,id,对文档赋予结构。,第8页3.2 HTML5元素HTML5在HTML4的基础上进,第,9,页,HTML5,元素,HTML5通过引入一些新元素改变了这种情况。这些元素可以对内容进行更精确的分组。新增的结构元素解决了这种div漫天飞舞的情况，增强了网页内容的语义性，这对搜索引擎而言，能够更好地识别和组织索引内容。合理地使用这些结构元素，将极大地提高搜索结果的准确度。,第9页HTML5元素HTML5通过引入一些新元素改变了这种情,第,10,页,新增结构元素,元,素,描,述,section,在,Web页面应用中，section元素也可以用于区域的章节表述,header,页面主体的头部，注意与,head元素相区别。head元素不可见，而header往往包含在body中,footer,页面的底部，即页脚。通常用于标出网站的一些相关信息，例如“关于我们”、法律声明、邮件信息和版权所有等,nav,专门用于菜单导航、链接导航的元素，是,navigator的缩写,article,用于表示一篇文章的主题内容，一般为文字集中显示的区域,第10页新增结构元素元 素描 述section在We,第,11,页,Section,元素,section元素主要用来对网站或应用程序中页面上的内容进行分块。section元素表示文档或应用的一个部分。所谓“部分”，这里是指按照主题分组的内容区域。,section元素通常由标题和内容组成。但section元素并不是容器元素，所以不能用CSS来渲染。当一个容器需要直接定义样式或通过脚本控制行为时，则应使用div元素。,第11页Section元素section元素主要用来对网站或,第,12,页,header,元素,header,元素是一种具有引导和导航作用的结构元素，通常用来放置整个页面或页面内的内容区块的标题，也可以包含其他内容，如数据表格、搜索表单或相关的,logo,图片。因此，整个页面的标题都应该放在页面的开头。,header,元素定义文档或者文档的一部分区域的页眉。在一个文档中，可以定义多个,header,元素。,需要注意,head,与,header,的不同，,head,元素是,HTML,文档的所有头部元素的容器，而,header,元素是,body,元素中的一个结构元素，也可以在,article,元素内使用,header,元素，但是不能在,footer,、,address,或者另一个,header,元素内使用,header,元素。,第12页header元素header元素是一种具有引导和导航,第,13,页,footer,元素,footer元素可以作为内容块的脚注，比如在父级内容块中添加注释，或者在网页中添加版权信息等。脚注信息的形式有作者、相关阅读链接及版权信息等。,footer元素与header元素的用法基本相同，二者一个位于区块的头部，一个位于区块的尾部。与header元素一样，一个网页中也可以重复使用footer元素，还可以为article元素和section元素添加footer元素。,第13页footer元素footer元素可以作为内容块的脚注,第,14,页,nav,元素,nav,元素是一个可以用来作为页面导航的链接组，其中的导航元素链接到其他页面或当前页面的其他部分。,一般情况下，只需要将主要的、基本的链接组放进,nav,元素即可。例如，在页脚中通常会有一组链接，其中放着服务条款、首页和版权声明等，这时使用,nav,元素来组织并不适合，使用,footer,元素最为恰当。,一个页面可以拥有多个,nav,元素，作为页面整体或不同部分的导航。一般来说，,nav,元素适用于以下场景：传统导航条、侧边栏导航条、页内导航、翻页操作。,nav,元素在以前版本,HTML,的布局中作为导航条相关常用命名来使用。,第14页nav元素nav元素是一个可以用来作为页面导航的链接,第,15,页,article,元素,article,元素代表文档、页面或应用程序中独立的、完整的、可以独自被外部引用的内容。它可以是论坛帖子、报纸文章、博客条目、用户评论或独立的插件，或是其他任何独立的内容。,除了内容部分，,article,元素通常有自己的标题,(,一般为,header,元素,),，有时还有脚注,(footer,元素,),。,另外，,article,元素也可以嵌套使用。在嵌套使用时，内层的内容原则上需要与外层的内容有关系，即联系比较紧密，嵌套的内外层描述的又都是独立的事物。,第15页article元素article元素代表文档、页面或,块级元素,第,16,页,元,素,描,述,aside,用来表示注记、贴士、侧栏、摘要、插入的引用等，作为补充主体的内容。从简单页面的显示上看，就是侧边栏，可以在左边，也可以在右边,figure,定义媒介内容的分组，是对多个元素进行组合并展示的元素，通常和,figcaption元素配合使用,hgroup,用来对标题元素进行分组,dialog,用来表示人与人之间的对话。,dialog元素还包括dt和dd这两个组合元素，它们常常同时使用。dt用来表示说话者，dd表示说话内容,块级元素第16页元 素描 述aside用来表示注记、,第,17,页,Aside,元素,aside元素表示跟这个页面的其他内容关联性不强或者没有关联的内容，一般是一些附属信息。aside元素通常用来在侧边栏显示一些定义，比如目录、索引、术语表等；也可以用来显示相关的广告宣传、作者介绍、Web应用、相关链接、当前页内容简介等。但不要使用aside元素标记括号中的文字，因为这种类型的文本被认为是主内容的一部分。,第17页Aside元素aside元素表示跟这个页面的其他内容,第,18,页,figure,元素,figure元素表示一段独立的流内容，一般表示文档主题流内容中的一个独立单元，可以使用figcaption元素为figure元素组添加标题。,figure元素的内容应该与主内容相关，但如果被删除，则不应对文档流产生影响。,第18页figure元素figure元素表示一段独立的流内容,第,19,页,hgroup,元素,hgroup 元素是将标题及其子标题进行分组的元素。当标题有多个层级(副标题)时，hgroup元素被用来对一系列 -元素进行分组，一个内容区块的标题及其子标题算一组。,通常，如果文章只有一个标题，是不需要使用hgroup元素的。,第19页hgroup元素hgroup 元素是将标题及其子标题,第,20,页,dialog,元素,dialog元素用于定义一个对话框、确认框或窗口，它的open属性用来规定dialog元素是有效的，用户可以与它进行交互。通常会在JavaScript脚本中处理对话框的交互。,第20页dialog元素dialog元素用于定义一个对话框、,新增的行内语义元素,第,21,页,元,素,描,述,mark,定义有记号的文本,meter,表示特定范围内的数值，可用于工资、数量、百分比等,time,表示时间值,progress,用来表示进度条，可通过对其,max、min、step等属性进行控制，完成对进度的表示和监视,新增的行内语义元素第21页元 素描 述mark定义有,第,22,页,mark,元素,mark元素用来标签一些不是特别需要强调的文本。如果是需要突出显示文本，则使用上一章学习的或标签。,可以为了标记特定上下文中的文本而使用这个标签，例如，用来显示搜索引擎搜索后的关键词。,第22页mark元素mark元素用来标签一些不是特别需要强调,第,23,页,mark,元素,meter,元素用来定义已知范围或分数值内的标量测量，也被称为尺度。,支持的属性如下,min：值域的最小边界值。默认为0，如果设置了具体值，它必须比最大值要小。,max：值域的上限边界值。默认为1。,value：当前值。,low：定义了低值区间的上限值(如果value介于min和low之间，该元素就会表现出低值的视觉效果，value落在min,low、high,max等不同的区间会使浏览器渲染该元素时出不同的视觉效果)。,high：定义了高值区间的下限值。,optimum,：这个属性用来指示最优,/,最佳取值。,第23页mark元素meter元素用来定义已知范围或分数值内,第,24,页,time,元素,time元素用于定义时间或日期，该元素代表24小时中的某个时刻或某个日期，表示时刻时允许带时差。该元素能够以机器可读的方式对日期和时间进行编码，这样，用户
展开阅读全文