Html5新增的元素详解.pptx

Html5新增元素详解王国军itwanggj@163.com1. Html5与之前版本的不同 可以省略标签的元素 拥有bool值的属性 省略属性的引用符 Html5的语法与之前的Html语法在某种程度上达到了一定的兼容性。例如，有时可以看到“p标签没有结束符”等现象，在Html5中不将这些视为错误，而是“允许这些现象存在，并明确记录在Html5规范中”。下面具体看看Html5与之前版本的不同： 1.可以省略标签的元素（3种情况） （1）不允许写结束标记的元素有： input、link、area、base、br、col、hr、command、embed、img、keygen、meta、param、source、track、wbr等； （2）可省略结束标签的元素有： li、dt、dd、p、rt、rp、option、optgroup、colgroup、thead、tbody、tfoot、tr、td、th等； （3）可省略整个标签的元素有： html、head、body、colgroup、tbody等。注：虽然这些元素可以省略，但实际上却是隐式存在的，在DOM树上它是存在的。 2.拥有bool值的属性： 拥有布尔值（boolean）的属性，例如disabled和readonly等，通过省略属性的值来表达值为“true”，如果要表达值为“false”，则直接省略属性本身即可。此外，当写明属性值为“true”时，可以将属性名设定为属性值，也可以将属性值设为空字符串。input type=“checkbox” checkedinput type=“checkbox” checked=“checked”input type=“checkbox” checked=“”前端开发 视觉设计 3.省略属性的引用符： 设置属性值时，可以使用双引号或单引号来引用。在Html5中进一步进行了改进，只要属性值不包含字符串、单引号、双引号、“”、“”、“=”等字符，都可以省略属性的引用符。input type=“ text ”input type=‘ text ’ input type=text前端开发 视觉设计2. 新增的元素和废除的元素 新增的结构元素 新增的行内（inline）语义元素 新增的块级（block）语义元素 新增的input元素的类型 新增的多媒体元素与交互性元素 废除的元素2.1 新增的结构元素在HTML5中，新增了以下与结构相关的元素：section元素：section元素表示页面或应用程序中的一个区块，比如章节、页眉、页脚或文档中的其他部分。它可以与h1、h2、h3、h4、h5、h6等元素结合起来使用，标示文档结构。HTML5section 属性=“属性值”…内容/sectionHTML4div 属性=“属性值”…内容/divarticle元素：article元素表示页面中的一块独立的内容，如博客中的一篇文章或者报纸中的一篇文章。HTML5article 属性=“属性值”…内容/articleHTML4div class=“article”…内容/divheader元素：header元素表示页面中一个内容区块或整个页面的标题。HTML5header 属性=“属性值”…内容/header前端开发 视觉设计HTML4div 属性=“属性值”… 内容/divnav元素：nav元素表示页面中导航链接的部分（导航栏）。HTML5前端开发 视觉设计nav属性=“属性值”…内容/navHTML4ul 属性=“属性值”… 内容/ulfooter元素：footer元素表示整个页面或者页面中的一个内容区块的标注。一般来说，它会包含作者的姓名、创作日期以及创建者联系信息。HTML5前端开发 视觉设计footer属性=“属性值”…内容/footerHTML4div 属性=“属性值”… 内容/div2.2 新增的行内（inline）语义元素在HTML5中，新增了以下与行内的语义相关的元素：mark元素：mark元素主要用来在视觉上向用户呈现那些需要突出显示或高亮显示的文字。mark元素的一个比较典型的应用就是在搜索结果中向用户高亮显示搜索关键字。HTML5mark 属性=“属性值”…内容/markHTML4span 属性=“属性值”…内容/spantime元素：time元素表示日期或时间，也可以同时表示两者。HTML5前端开发 视觉设计time 属性=“属性值”…内容/timeHTML4span class=“article”…内容/spanmeter元素：meter元素表示度量衡。仅用于已知最大和最小值的度量。必须定义度量的范围，既可以在元素的文本中，也可以在min/max属性中定义。HTML5meter 属性=“属性值”…内容/meterprogress元