HTML5新增的元素、废除的元素.ppt

Logo Logo Logo Logo Logo Logo Logo Logo Logo Logo Logo 添加背景音乐 本讲大纲： 1、新增的结构元素 2、新增的块级（block）的语义元素 3、新增的行内（inline）的语义元素 4、新增的嵌入多媒体元素与交互性元素 5、新增的input元素的类型 5、废除的元素 新增的结构元素 section元素 section元素定义文档或应用程序中的一个区段,比如章节、页眉、页 脚或文档中的其他部分。它可以与h1,h2,h3,h4,h5,h6元素结合起来使 用，标示文档结构。 HTML5中代码示例： section…/section HTML4中代码示例： div…/div article元素 article元素表示文档中的一块独立的内容，譬如博客中的一篇文章 或报纸中的一篇文章。 HTML5中代码示例： article…/article HTML4中代码示例： div class=article…/div 新增的结构元素 header元素 header元素表示页面中一个内容区块或整个页面的标题。HTML5中代码 示例： header…/header HTML4中代码示例： div…/div nav元素 nav元素表示导航链接的部分。 HTML5中代码示例： nav…/nav HTML4中代码示例： ul…/ul 新增的结构元素 footer元素 footer元素表示整个页面或页面中一个内容区块的脚注。一般来说，它会 包含创作者的姓名、文档的创作日期以及创建者联系信息。 HTML5中代码示例： footer…/footer HTML4中代码示例： div…/div 新增的块级（block）的语义元素 aside元素 aside元素表示article元素的内容之外的与article元 素的内容相关的有关内容。 HTML5中代码示例： aside…/aside HTML4中代码示例： div…/div 新增的块级（block）的语义元素 figure元素 figure元素表示一段独立的流内容，一般表示文档主体流内容 中的一个独立单元。使用 figcaption 元素为figure元素组添 加标题。 HTML5中代码示例： figure figcaptionPRC/figcaption pThe Peoples Republic of China was born in 1949.../p /figure HTML4中代码示例： dl h1PRC/h1 pThe Peoples Republic of China was born in 1949.../p /dl 新增的块级（block）的语义元素 dialog元素 dialog标签定义对话，比如交谈。 注意：对话中的每个句子都必须属于 dt 标签所定义的部分。 HTML5中代码示例： dialog dt老师/dt dd2+2 等于？/dd dt学生/dt dd4/dd dt老师/dt dd答对了！/dd /dialog 新增的行内（inline）的语义元素 mark元素 mark元素主要用来在视觉上向用户呈现那些需要突出显示或高亮显 示的文字。mark元素的一个比较典型的应用就是在搜索结果中向用户 高亮显示搜索关键词。 HTML5中代码示例： mark…/mark HTML4中代码示例： span…/span 新增的行内（inline）的语义元素 time元素 time元素表示日期或时间，也可以同时表示两者。 HTML5中代码示例: time…/time HTML4中代码示例: span…/span 新增的行内（inline）的语义元素 meter元素 meter元素表示度量衡。仅用于已知最大和最小值的度量。必须定 义度量的范围，既可以在元素的文本中，也可以在 min/max 属性中定 义。 HTML5中代码示例: meter value=3 min=0 max=103/10/meterbr meter value=0.660%/meter 新增的行内（inline）的语义元素 progress元素 progress元素表示运行中的进程。可以使用 progress元素来显示 JavaScript 中耗费时间的函数的进程。 HTML5中代码示例： progress…/progress 下载进度： progress value=22 max=100 /progress 新增的嵌入多媒体元素与交互性元素 details元素 details元素表示用户要求得到并且可以得到的细