网页设计与制作（HTML+CSS+JS）-3期（KC003） 运用HTML5的新标签 任务3 运用HTML5的新标签.pptx

;;;; 依据草图实现基本的HTML只是实现前端页面的一小步，HTML5 中所有的标签都是有结构性的。 本任务就是使用HTML5新标签来优化门户网站主页的页面文档。;;;/;举例演示;;;举例演示;;;举例演示;;举例演示;;举例演示;;;;; figure 标签和figcaption标签;;举例演示;举例演示; hgroup标签可以将标题或者子标题进行分组，通常它与h1~h6标签组合使用，一个内容块中的标题可以通过hgroup标签组成一组。;举例演示;举例演示; dialog标签主要用于人与人之间的对话。该标签还包括dt和dd两个组合标签，他们常常同时使用。dt表示说话者，dd表示说话者说的内容。;;;;1 details标签和summary标签;举例演示;;;;;举例演示;;例如： meter value=148 min=0 max=160 low=20 high=110 title=148票 optimum=120 /meter;举例演示;;例如： time datetime=“2017-2-14”情人节/time;;举例演示;;举例演示;;;举例演示;meter 标签不应用于指示进度，如果标记进度条，请使用 progress 标签。;;举例演示;;举例演示;;举例演示;meter 标签不应用于指示进度，如果标记进度条，请使用 progress 标签。;;个人博客页面结构设计;实现步骤;;HTML5结构设计示意图;;举例演示;;举例演示;;举例演示;;举例演示;;举例演示;;【演示】本任务就是使用HTML5新标签来优化门户网站主页的页面文档。;实现步骤;;HTML5结构设计示意图;;举例演示;;div标签和span标签;div、section和article的区别和使用;;【实训目的】 1.通过网页页面分析，掌握HTML5结构性标签的语义。 2.能通过网页页面与“查看源代码”功能，模仿编写HTML页面 【实训内容】 实训任务1：通过浏览清华大学主页，分析其HTML5的结构性编码。;实训任务2：使用HTML实现“设计师列表”的页面效果。;