html5新增元素详解.pptx

该【html5新增元素详解 】是由【977562398】上传分享，文档一共【23】页，该文档可以免费在线阅读，需要了解更多关于【html5新增元素详解 】的内容，可以使用淘豆网的站内搜索功能，选择自己适合的文档，以下文字是截取该文章内的部分文字，如需要获得完整电子版，请下载此文档到您的设备，方便您编辑和打印。可以省略标签的元素
拥有bool值的属性
省略属性的引用符

第一页,共23页。
Html5的语法与之前的Html语法在某种程度上达到了一定的兼容性。例如,有时可以看到“<p>标签没有结束符”等现象,在Html5中不将这些视为错误,而是“允许这些现象存在,并明确记录在Html5规范中”。下面具体看看Html5与之前版本的不同:
(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树上它是存在的。
第二页,共23页。
前端开发
视觉设计
:
拥有布尔值(boolean)的属性,例如disabled和readonly等,通过省略属性的值来表达值为“true”,如果要表达值为“false”,则直接省略属性本身即可。此外,当写明属性值为“true”时,可以将属性名设定为属性值,也可以将属性值设为空字符串。
<inputtype=“checkbox”checked>
<inputtype=“checkbox”checked=“checked”>
<inputtype=“checkbox”checked=“”>
第三页,共23页。
前端开发
视觉设计
:
设置属性值时,可以使用双引号或单引号来引用。在Html5中进一步进行了改进,只要属性值不包含字符串、单引号、双引号、“<”、“>”、“=”等字符,都可以省略属性的引用符。
<inputtype=“text”>
<inputtype=‘text’>
<inputtype=text>
第四页,共23页。
新增的结构元素
新增的行内(inline)语义元素
新增的块级(block)语义元素
新增的input元素的类型
新增的多媒体元素与交互性元素
废除的元素

第五页,共23页。
HTML5

在HTML5中,新增了以下与结构相关的元素:
section元素:section元素表示页面或应用程序中的一个区块,比如章节、页眉、页脚或文档中的其他部分。它可以与h1、h2、h3、h4、h5、h6等元素结合起来使用,标示文档结构。
<section属性=“属性值”…>内容</section>
<div属性=“属性值”…>内容</div>
HTML4
第六页,共23页。
HTML5
article元素:article元素表示页面中的一块独立的内容,如博客中的一篇文章或者报纸中的一篇文章。
<article属性=“属性值”…>内容</article>
<divclass=“article”…>内容</div>
HTML4
第七页,共23页。
前端开发
视觉设计
HTML5
header元素:header元素表示页面中一个内容区块或整个页面的标题。
<header属性=“属性值”…>内容</header>
<div属性=“属性值”…>内容</div>
HTML4
第八页,共23页。
前端开发
视觉设计
HTML5
nav元素:nav元素表示页面中导航链接的部分(导航栏)。
<nav属性=“属性值”…>内容</nav>
<ul属性=“属性值”…>内容</ul>
HTML4
第九页,共23页。
前端开发
视觉设计
HTML5
footer元素:footer元素表示整个页面或者页面中的一个内容区块的标注。一般来说,它会包含作者的姓名、创作日期以及创建者联系信息。
<footer属性=“属性值”…>内容</footer>
<div属性=“属性值”…>内容</div>
HTML4
第十页,共23页。