Html5新增元素详解

Html5新增元素详解王国军itwanggj@163.com

可以省略标签的元素

拥有bool值的属性

省略属性的引用符1.Html5与之前版本的不同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”时，可以将属性名设定为属性值，也可以将属性值设为空字符串。<inputtype=“checkbox”checked><inputtype=“checkbox”checked=“checked”><inputtype=“checkbox”checked=“”>前端开发

视觉设计

3.省略属性的引用符：

设置属性值时，可以使用双引号或单引号来引用。在Html5中进一步进行了改进，只要属性值不包含字符串、单引号、双引号、“<”、“>”、“=”等字符，都可以省略属性的引用符。<inputtype=“text”><inputtype=‘text’><inputtype=text>

新增的结构元素

新增的行内（inline）语义元素新增的块级（block）语义元素新增的input元素的类型

新增的多媒体元素与交互性元素

废除的元素2.新增的元素和废除的元素HTML52.1新增的结构元素在HTML5中，新增了以下与结构相关的元素：section元素：section元素表示页面或应用程序中的一个区块，比如章节、页眉、页脚或文档中的其他部分。它可以与h1、h2、h3、h4、h5、h6等元素结合起来使用，标示文档结构。<section属性=“属性值”…>内容</section><div

属性=“属性值”…>内容</div>HTML4HTML5article元素：article元素表示页面中的一块独立的内容，如博客中的一篇文章或者报纸中的一篇文章。<article属性=“属性值”…>内容</article><div

class=“article”…>内容</div>HTML4前端开发

视觉设计HTML5header元素：header元素表示页面中一个内容区块或整个页面的标题。<header属性=“属性值”…>内容</header><div属性=“属性值”…>内容</div>HTML4前端开发

视觉设计HTML5nav元素：nav元素表示页面中导航链接的部分（导航栏）。<nav属性=“属性值”…>内容</nav><ul属性=“属性值”…>内容</ul>HTML4前端开发

视觉设计HTML5footer元素：footer元素表示整个页面或者页面中的一个内容区块的标注。一般来说，它会包含作者的姓名、创作日期以及创建者联系信息。<footer属性=“属性值”…>内容</footer><div属性=“属性值”…>内容</div>HTML4HTML52.2新增的行内（inline）语义元素在HTML5中，新增了以下与行内的语义相关的元素：mark元素：mark元素主要用来在视觉上向用户呈现那些需要突出显示或高亮显示的文字。mark元素的一个比较典型的应用就是在搜索结果中向用户高亮显示搜索关键字。<mark属性=“属性值”…>内容</mark><span属性=“属性值”…>内容</span>HTML4前端开发

视觉设计HTML5time元素：time元素表示日期或时间，也可以同时表示两者。<time属性=“属性值”…>内容</time><spanclass=“article”…>内容</span>HTML4HTML5meter元素：meter元素表示度量衡。仅用于已知最大和最小值的度量。必须定义度量的范围，既可以在元素的文本中，也可以在min/max属性中定义。<meter属性=“属性值”…>内容</meter>HTML5progress元素：progress元素表示运行中的进程。可以使用progress元素来显示JavaScript中耗费时间的函数的进程。例如：下载进度提示。<progressvalue=“22”

max=“100”></progress>HTML52.3新增的块级（block）语义元素在HTML5中，新增了以下与块级的语义相关的元素：aside元素：aside元素主要表示article元素的内容之外的与article元素的内容相关内容。<aside属性=“属性值”…>内容</aside><div属性=“属性值”…>内容</div>HTML4前端开发

视觉设计figure元素：figure元素表示一段独立的流内容，一般表示文档主体流内容中的一个独立单元。使用<figcaption>元素为figure元素组添加标题。<figure>

<figcaption>fruit</figcaption>

<p>Thepersonhaveanapple.</p></figure><dl>

<h1>fruit</h1>

<p>Thepersonhaveanapple.</p></dl>2.4新增的input元素的类型在HTML5中，新增了许多input元素的类型，列举如下：email：email类型需要输入E-mail地址的输入框；url：url类型需要输入URL地址的输入框；number：number类型需要输入数值的输入框；DataPickers（数据检出器）：HTML5拥有多个可供选择日期与时间的新型输入框：date-选取年、月、日month-选取年、月week-选取周、年time-选取时间（小时和分钟）datetime-选取时间、日、月、年（UTC时间）datetime-local–选取时间、日、月、年（本地时间）2.5新增的多媒体元素与交互性元素新增video和audio元素，顾名思义，分别是用来插入视频和音频的。值得注意的是可以在开始标签和结束标签之间放置文本内容，这样在旧的浏览器中就可以显示出不支持该标签的提示信息。这些标签的增加是为了提高页面的交互体验。<videosrc=“somevideo.wmv”>

您的浏览器不支持video标签。</video>HTML5details元素：details元素表示用户要求得到并且可以得到的细节信息。它可以与<summary>元素配合使用，<summary>元素提供标题或图例，标题是可见的，用户点击标题时，会显示出details。同时<summary>应该是<details>元素的第一个子元素。<details>

<summary>HTML5</summary>HowtolearnHtml5?</details>HTML5menu元素：menu元素表示菜单列表，当希望列出表单控件时使用该标签。<menu>

<li><inputtype=“checkbox”>black</li>

<li><inputtype=“checkbox”>green</li></menu>2.6

废除的元素由于种种原因，在Html5中废除了很多元素，下面简单介绍一下被废除的元素：1、可以使用css代替的元素

对于basefont、big、center、font、s、strike、tt、u这些元素，由于它们的功能都是纯粹为了画面服务的，而在Html5中提倡把画面展示性功能放在css样式表中统一编辑，所以将这些元素废除，并使用编辑css样式表的方式进行替代；2、不可以使用frame框架

对于frameset元素、frame元素与nofrances元素，由于frame框架对页面存在负面影响，在html5中已不再支持frame框架，只支持iframe框架，或者用服务器方创建的由多个页面组成的复合页面的形式，同时将以上