HTML5标签与HTML4标签的区别示例介绍

(1)概念的变化:

HTML5专注内容与结构,而不专注的表现

<header>
<hgroup>导航相关数据</hgroup>
</header>
<nav>菜单</nav>
<article>
<h1>标题:HTML5专题视频教程</h1>

(2)声明与标签:
HTML5在更多的声明和标签上面做了简化,也对兼容做了详细的规定,废除了部分元素,增加了部分元素。
HTML5标签语法介绍及新增标记

1、语法标签:

(1) 不允许写的结束符的标签:area、basebr、col、command、Embed、hr、img、input、keygen、link、meta、param、source、Track、wbr
(2)可以省略结束符的标签:li、dt、dd、p、rt、optgroup、option、Colgroup、thread、tbody、tr、td、th
(3)可以完全省略的标签:html、head、body、colgroup、tbody

2、新增标签:

<article> 标记定义一篇文章
<aside> 标记定义页面内容部分的侧边栏
<audio> 标记定义音频内容
<canvas> 标记定义图片
<command> 标记定义一个命令按钮
<datalist> 标记定义一个下拉列表
<details> 标记定义一个元素的详细内容
<dialog> 标记定义一个对话框(会话框)
<embed> 标记定义外部的可交互的内容或插件
<figure> 标记定义一组媒体内容以及它们的标题<footer> 标记定义一个页面或一个区域的底部
<header> 标记定义一个页面或一个区域的头部
<hgroup> 标记定义文件中一个区块的相关信息
<keygen> 标记定义表单里一个生成的键值
<mark> 标记定义有标记的文本
<meter> 标记定义 measurementwithin apredefinedrange
<nav> 标记定义导航链接
<output> 标记定义一些输出类型
<progress> 标记定义任务的过程
<rp> 标记是用在Rubyannotations 告诉那些不支持Ruby元素的浏览器如何去显示
<rt> 标记定义对rubyannotations的解释
<ruby> 标记定义 rubyannotations.
<section> 标记定义一个区域
<source> 标记定义媒体资源
<time> 标记定义一个日期/时间
<video> 标记定义一个视频

HTML5简单示例
 

复制代码
代码如下:

<!DOCTYPE html>
<head>
<meta charset=utf-8>
<title>PHP100中文网HTML5专题</title>
<style type="text/css" rel="stylesheet">
header,nav,article,footer {border:solid 1px #666;padding:5px}
header{width:500px}
nav{float:left;width:60px;height:200px}
article{float:left;width:428px;height:200px}
footer{clear:both;width:500px}
</style>
<script type="text/javascript">
document.createElement('article');
document.createElement('nav');
document.createElement('header');
</script>
</head>
<body>
<header>
<hgroup>导航相关数据</hgroup>
</header>
<nav>菜单</nav>
<article>
<h1>HTML5专题视频教程</h1>
发布日期:<time>09:00</time>
<time datetime="2013-2-10">春节</time>
<p>测试相关内容</p>
</article>
<footer>
<address>地址</address>
</footer>
</body>
</html>

时间: 2024-12-21 20:58:47

HTML5标签与HTML4标签的区别示例介绍的相关文章

Jquery中的层次选择器与find()的区别示例介绍

Jquery中的层次选择器与find()是有一定的区别,本文有个示例可以很好的说明,感兴趣的朋友可以参考下 代码如下: $("#anaylseBody tr").find("td:eq(" + $("#analyse th:contains(" + $(this).val() + ")").index() + ")").hide(); ("#anaylseBody tr") find作为

php中\r \r\n \t的区别示例介绍

 这篇文章主要介绍了php中r rn t的区别,需要的朋友可以参考下 n 软回车:  在Windows 中表示换行且回到下一行的最开始位置.相当于Mac OS 里的 r 的效果.  在Linux.unix 中只表示换行,但不会回到下一行的开始位置.    r 软空格:  在Linux.unix 中表示返回到当行的最开始位置.  在Mac OS 中表示换行且返回到下一行的最开始位置,相当于Windows 里的 n 的效果.    t 跳格(移至下一列).    它们在双引号或定界符表示的字符串中有

JQuery与JS里submit()的区别示例介绍

 这篇文章主要介绍了JQuery与JS里submit()的区别,需要的朋友可以参考下 ASP.NET 的服务器控件回发是使用这一段JS代码:   代码如下: var theForm = document.forms['form1'];  if (!theForm) {  theForm = document.form1;  }  function __doPostBack(eventTarget, eventArgument) {  if (!theForm.onsubmit || (theFo

javascript中的undefined和not defined区别示例介绍

这篇文章主要介绍了javascript中的undefined和not defined区别,需要的朋友可以参考下 经研究发现,两者之间有很大的区别,不知从英语讲,这两者都有啥区别,研究结果如下 测试os:ubuntu 测试浏览器:chrome 测试案例1 console.log(a) 报错 ReferenceError: a is not defined 测试案例2 var a console.log(a) 无报错,但是输出undefined 测试案例2 var b = {}; console.l

Document.location.href和.replace的区别示例介绍

document.location.href和document.location.replace都可以实现从A页面切换到B页面,下面为大家介绍下它们的区别 document.location.href和document.location.replace都可以实现从A页面切换到B页面,但他们的区别是: 用document.location.href切换后,可以退回到原页面. 而用document.location.replace切换后,不可以通过"后退"退回到原页面. 关于documen

javascript中interval与setTimeOut的区别示例介绍

 这篇文章主要介绍了javascript中interval与setTimeOut的区别,需要的朋友可以参考下 setTimeout(code,millisec) //- 在指定时间后执行代码    code必须:    millisec必须:    clearTimeout(setTimeoutId) //- 取消 setTimeout()    setInterval(code,millisec)://指定间隔毫秒内循环执行代码    code必须:    millisec必须:    cle

$.each与$().each的区别示例介绍

 $.each是一个通用的迭代函数,可用于近似地迭代 对象和数组,这个函数与$().each是专用用于迭代和执行jquery对象函数 $.each() 与 $().each之间的区别,$.each是一个通用的迭代函数,可用于近似地迭代 对象和数组,这个函数与$().each是专用用于迭代和执行jquery对象函数.而这个函数可以用于迭代任何对象,这个函数的回调中包含两个参数:第一个是key(对象)或index(数组),第二个是值 .   代码如下: <script type="text/j

jquery获取颜色在ie和ff下的区别示例介绍

 在使用$(#id).attr(color) 获取颜色的时候,ie和ff是不同的,下面有个示例,大家可以参考下 在使用$("#id").attr("color") 获取颜色的时候,ie和ff是不同的.举个简单的例子:   代码如下: <font id="id" color="green">    使用$("#id").attr("color") 在ff,chrome中获取到的

jquery中子元素和后代元素的区别示例介绍

 后代,就是当前元素的所有后代,都算,子元素,就是当前元素的子集,再往下走就不算了 今天学习jQuery的选择器:    jQuery选择器分为基本选择器.层次选择器.过滤选择器.表单选择器.    基本选择器:id,class,标签名,*,元素组合(div,span,p.myClass)    层次选择器:    难点: jquery中子元素和后代元素的区别  后代,就是当前元素的所有后代,都算,  子元素,就是当前元素的子集,再往下走就不算了.    具体的分析可以参考:  代码如下: <d