html5新增标签有哪些 html5与传统html区别- 网络编程问题,虚拟主机域名注册-常见问题-帮助中心

目前html5在之前html的基础上增加了许多实用的标签，页面文档的声明方式也更加简洁了，下面来具体看一下这些区别。

一、文档声明以及编码声明发生了改变

以前的html声明文档类型的方法：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

声明文档编码：

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

html5声明文档类型的方法：

<!doctype html>

声明文档编码：

<meta charset="utf-8">

看，是不是简洁很多，就算是用记事本手写，都不用敲那么多复杂的代码。

二、html5新增结构标签

结构标签是“块状元素” 有语意的div。

<article>标记定义一篇文章；

<header>标记定义一个页面或一个区域的头部；

<nav>标记定义导航链接；

<section>标记定义一个区域；

<aside> 标记定义页面内容部分的侧边栏；

<hgroup> 标记定义文件中一个区块的相关信息；

<figure> 标记定义一组媒体内容以及它们的标题；

<figcaption> 标签定义 figure 元素的标题；

<footer> 标记定义一个页面或一个区域的底部；

<dialog> 标记定义一个对话框(会话框)类似微信。

需要注意的是：如果只是一个简单的布局，通过html5新增的这些标签，就大概可以做出一个外边的框架，如果是很复杂的大型网站，还是用传统的<div>和<p>等标签比较方便。

下面这个简单的布局就是用html5新增标签做的，仅供参考，同样可以给这些标签添加id或class样式。

<header>
    <p>这是头部标签</p>
    <nav>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
    </nav>
</header>
<div class="content clearfix">
    <section>
        <p>这里是section内容区域</p>
        <article>
            <h2>百度百科</h2>
            <p>百度百科是百度公司推出的一部内容开放、自由的网络百科全书平台，其测试版于2006年4月20日上线，正式版在2008年4月21日发布，截至2015年12月，百度百科已经收录了超过1300万的词条，参与编辑用户数达569万人，几乎涵盖了所有已知的知识领域。</p>
        </article>
        <hr/>
        <article>
            <h2>标题二</h2>
            <p>内容</p>
        </article>
    </section>
    <aside>
        <p>这里是aside侧边栏</p>
    </aside>
</div>
<footer>
    <p>这里是footer页面底部</p>
</footer>

三、html5新增的其他标签。

（1）多媒体标签：

<video> 页面中插入视频内容；

<audio> 页面中插入音频内容；

<source> 可定义多个媒体资源。

（2）绘图标签：

<canvas> 绘制图片；

<svg> 矢量图。

（3）WEB运用标签：

<meter>状态标签，温度等；

<progress>进度条；

datalist 为input定义下拉列表；

details 定义元素的详细内容。

（4）注释标签：

<ruby> 标记定义注释或音标；

<rp> 告诉那些不支持 Ruby元素的浏览器如何去显示；

<rt> 标记定义对ruby的注释内容文本。

（5）其他标签：

<keygen> 标记定义表单里公钥；

<mark> 标记定义有标记的文本 (默认为黄色背景)；

<output> 标记定义一些输出类型,计算表单结果配合oninput事件；

<time> 标记定义一个日期/时间。

四、html5重新定义的标签

dd:可以同details与figure一同使用，定义包含文本，dialog也可用；

dt:可以同details与figure一同使用，汇总细节，dialog也可用；

hr:表示主题结束，而不是水平线，虽然显示相同；

menu:重新定义用户界面的菜单，配合commond或者menuitem使用；

small:表示小字体，例如打印注释或者法律条款；

strong:表示重要性而不是强调符号。

总结：html5新增的标签，有些并不是像div那样经常用到，大家只要先记住h5有这样的标签，到时候在具体的项目中知道怎么用就行，最重要的是多练习！

我的购物车