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