任务3 运用HTML5的新标签.ppt

,任务3:运用HTML5的新标签,网页设计与制作(HTML+CSS+Javascript),网页设计与制作课程组,目标,TARGET,知识目标,了解HTML5新标签；掌握结构性标签；掌握级块标签；掌握页面交互标签；掌握行内语义性标签;掌握HTML5的全局属性。,1任务描述,2结构性标签,3分组标签,4页面交互标签,5行内语义性标签,7综合实例,8任务实施,9任务拓展,6HTML5的全局属性,1,任务描述,Part,使用HTML5新标签优化网页,依据草图实现基本的HTML只是实现前端页面的一小步，HTML5中所有的标签都是有结构性的。本任务就是使用HTML5新标签来优化门户网站主页的页面文档。,任务描述：使用HTML5新标签优化网页,2,HTML5结构性标签,Part,HTML5结构性标签,section标签,nav标签,article标签,aside标签,header标签,footer标签,1认知结构性标签,传统DIV+CSS布局,HTML5结构标签,结构性标签其实就是语义化的html网页框架。结构性标签，标签本质上和div没有任何区别。,借助id与class，通过CSS样式来实现页面布局，没有标准的规范，搜索引擎只能去猜测某部分的功能，文档结构和内容不够清晰。,举例界面,举例代码,举例演示,【实例3-1】HTML5结构性标签。,举例：,2section标签,定义和用法,标签用于对网页的内容进行分区、分块，定义文档中的节。比如章节、页眉、页脚或文档中的其它部分。一般情况下，section标签通常由内容和标题组成。,section是什么？用于对网页的内容进行分区、分块，定义文档中的节,文档中的区段，解释了“section的具体介绍”,注意,标签表示一段专题性的内容，一般会带有标题，没有标题的内容区块不要使用section标签定义。,根据实际情况，如果article标签、aside标签或nav标签更符合使用条件，那么不要使用section标签。,当一个容器需要被直接定义样式或通过脚本定义行为时，推荐使用div标签而非section。,3article标签,定义和用法,是一个特殊的section标签，它比section具有更明确的语义，它代表一个独立的、完整的相关内容块，可独立于页面其它内容使用。,这是一篇介绍HTML5结构标签的文章,例如：新闻提供者的一篇新的文章、一篇博客、一个用户评价等。,注意,举例：,这是一篇介绍HTML5结构标签的文章HTML5的历史2017.02.20文章内容详情,Article标签会有标题部分，通常包含在header内，有时也会包含footer。,article可以嵌套，内层的article对外层的article标签有隶属关系。例如，一篇博客的文章，可以用article显示，然后一些评论也可以以article的形式嵌入其中。,4nav标签,首页学校新闻院系设置师资队伍,定义和用法,nav标签代表页面的一个部分，是一个可以作为页面导航的链接组，是navigator的缩写。,举例：,首页学校新闻院系设置师资队伍,nav标签可以应用于传统导航条、侧边栏导航、页内导航、翻页操作等场合。,5aside标签,首页学校新闻院系设置师资队伍,定义和用法,aside标签用来装载非正文的内容，被视为页面里面一个单独的部分。,举例：,aside标签可以被包含在article标签内作为主要内容的附属信息。,文章标题文章内容附属信息部分,也可以在article标签之外使用，作为页面或站点全局的附属信息部分。例如广告、友情链接、侧边栏、导航条等等。,6header标签,院系设置师资队伍,定义和用法,header标签定义文档的页眉，通常是一些引导和导航信息。,举例：,标签不局限于写在网页头部，也可以写在网页内容里面。,网站标题网站副标题,通常标签至少包含（但不局限于）一个标题标记（-），还可以包括标签，还可以包括表格内容、标识Logo、搜索表单、导航等。,7footer标签,院系设置师资队伍,定义和用法,footer标签定义section或document的页脚，包含了与页面、文章或是部分内容有关的信息，比如说文章的作者或者日期。,举例：,作为页面的页脚时，一般包含了版权、相关文件和链接。,Copyright淮信科技有限公司,footer标签和标签使用基本一样，可以在一个页面中多次使用，也可以在article标签或者section标签中添加footer标签，那么它就相当于该区段的页脚了。,3,分组标签,Part,figure标签和figcaption标签,hgroup标签,dialog标签,分组标签主要完成web页面区域的划分，确保内容的有效分隔。主要包括figure标签、hgroup标签、figcaption标签、dialog标签等。,分组标签,1figure标签和figcaption标签,figure标签用于定义独立的流内容，例如图像、图表、照片、代码等，一般指一个单独的单元。,figcaption标签用于为figure标签组添加标题，一个figure标签内最多允许使用一个figcaption标签，该标签应该放在figure标签的第一个或者最后一个子标签的位置。,举例演示,【实例3-2】figure标签和figcaption标签的使用。,2hgroup标签,hgroup标签可以将标题或者子标题进行分组，通常它与h1h6标签组合使用，一个内容块中的标题可以通过hgroup标签组成一组。,举例演示,【实例3-3】hgroup标签。,3dialog标签,dialog标签主要用于人与人之间的对话。该标签还包括dt和dd两个组合标签，他们常常同时使用。dt表示说话者，dd表示说话者说的内容。,兼容性,Chrome,Safari,目前只有Chrome和Safari6支持标签。,注意,举例演示,老师dialog标签所有的浏览器都支持吗？学生目前只有Chrome和Safari6支持老师答对了！,4,页面交互标签,Part,details标签和summary标签,menu标签与command标签,交互性标签主要用于功能性的内容表达，会有一定的内容和数据的关联，是各种事件的基础，主要包括details标签、menu标签、commond标签等。,页面交互标签,1details标签和summary标签,details标签用于描述文档或文档某个部分的细节。summary标签经常与details标签配合使用，作为details标签的第一个子标签，用于为details定义标题。,标题是可见的，当用户单击标题时，会显示或隐藏details中的其他内容。,举例演示,【实例3-4】对details标签和summary标签的用法进行演示。,2menu标签与commond标签,标签定义命令的列表或菜单，标签用于上下文菜单、工具栏以及用于列出表单控件和命令。,例如,menu,新建打开其他项,2menu标签与command标签,command元素表示用户能够调用的命令。标签可以定义命令按钮，比如单选按钮、复选框或按钮。只有当command元素位于menu元素内时，该元素才是可见的。否则不会显示这个元素，但是可以用它规定键盘快捷键。,例如,command,测试点击!,注意：,目前所有主流浏览器都不支持和标签。,5,行内语义性标签,Part,progress标签,meter标签,time标签,time标签,1progress标签,progress标签表示任务的进度或进程。,例如：,需要注意的是value和max属性的值必须大于0，且value的值要小于或等于max属性的值。,progress元素的常用属性值有两个，value表示已经完成的工作量，max表示总共有多少工作量。,通常标签与Javascript一同使用，来显示任务的进度。,举例演示,【实例3-5】progress标签的用法演示。,2meter标签,meter标签定义度量衡，为已知范围或分数值内的标量测量。也被称为gauge（尺度）。例如，显示硬盘容量、对某个选项的比例统计等，都可以使用meter元素。,meter标签的属性,例如：,标签不应用于指示进度，如果标记进度条，请使用标签。,注意：,Firefox,Chrome,Opera以及Safari6支持标签，而IE浏览器不支持该标签。,举例演示,【实例3-6】meter标签用法演示。,3time标签,time标签表示时间值，主要加强了html的语义化结构。而是让网页的代码有条理，让计算机，例如百度或者谷歌搜索机器人能够理解网页的意思。,例如：2017年3月2日2017年3月2日21:002017年3月2日21:00,4video标签和audio标签,video标签定义视频。,例如：您的浏览器不支持video标签。,举例演示,【实例3-7】video标签用法演示。,4video标签和audio标签,audio标签定义音频。,例如：您的浏览器不支持audio标签。,举例演示,【实例3-8】audio标签用法演示。,6,HTML5的全局属性,Part,contenteditable属性,hidden属性,spellcheck属性,draggable属性,1contenteditable属性,contenteditable属性规定标签的内容是否可编辑。,例如：首页学校新闻院系设置,contenteditable属性是一个布尔值属性，可以被设置为true和false，属性值为true时，元素被指定为允许编辑；属性值为false时，元素被指定为不允许编辑。,同时，该属性还有个隐藏的inherit（继承）状体。当未指定true或false时，则有inherit状态来决定，如果父元素为可编辑的，则该元素也为可编辑的。,举例演示,【实例3-9】contenteditable属性的用法演示。,标签不应用于指示进度，如果标记进度条，请使用标签。,注意：,前提是该元素必须可以获得鼠标焦点并且其内容不是只读的。编辑完成后的内容，如果需要调用或者保存，只能通过把该元素的innerHTML发送至服务器端进行处理。,2hidden属性,hidden属性规定对元素进行隐藏。,例如：首页学校新闻院系设置,如果使用该属性，则会隐藏元素。,可以对hidden属性进行设置，使用户在满足某些条件时才能看到某个元素（比如选中复选框，等等）。然后，可使用JavaScript来删除hidden属性，使该元素变得可见。,3spellcheck属性,spellcheck属性规定是否对元素内容进行拼写检查。,主要针对于input文本框、textarea多行文本输入框、可编辑元素中的值进行拼写和语法检查。,该属性有两个值:true（默认值）和false，值为true时检测输入框中的值，反之不检测。,举例演示,【实例3-10】spellcheck属性的用法演示。,4draggable属性,draggable属性用来定义元素是否可以拖动。,例如：,该属性有两个值：true和false，默认为false，当值为true时表示元素选中之后可以进行拖动操作，否则不能拖动。,标签不应用于指示进度，如果标记进度条，请使用标签。,注意：,对于图片即使不设置draggable属性，也是可以被拖动的，因为链接和图像默认是可拖动的。如果想实现元素的拖动功能，需要配合JavaScript脚本才能实现。,举例演示,【实例3-11】draggable属性的用法演示。,7,综合实例,Part,个人博客页面结构设计,个人博客页面结构设计,【演示】综合分析该页面的网页结构，并使用HTML5实现该页面结构部分。,HTML5结构设计示意图,8,任务实施,Part,使用HTML5新标签优化网页,【演示】本任务就是使用HTML5新标签来优化门户网站主页的页面文档。,9,任务拓展,Part,div标签和span标签,div、section和article的区别和使用,div标签和span标签,div标签,标签可定义文档中的分区或节（division/section）。,是块级元素，用来把文档分割为独立的、不同的部分。如果用id或class来标记，那么该标签的作用会变得更加有效。,span标签,标签在行内定义一个区域，也就是一行内可以被划分成好几个区域，从而实现某种特定效果。本身没有任何属性。,属于一个行内元素，而是块级元素，可通俗地理解为为大容器，大容器当然可以放一个小容器了，就是小容器。,div、section和article的区别和使用,div在html早期版本就支持了，section和article是html5提出的两个语义化标签。如果只是针对一个块内容做样式化，三者并无区别。,作为语义化标签，section应用的典型场景有文章的章节、标签对话框中的标签页、或者论文中有编号的部分。一般来说，当元素内容明确地出现在文档大纲中时，section就是适用的。,对于article标签来说，无论从结构上还是内容上来说，article本身就是独立的、完整的。有个最简单的判断方法是看这段内容脱离了所在的语境，是否还是完整的、独立的，如果是，则应该用article标签。,divsectionarticle，语义是从无到有，逐渐增强的。div无任何语义，仅仅用作样式化或者脚本化，对于一段主题性的内容，则就适用section，而假如这段内容可以脱离上下文，作为完整的独立