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


Posted in HTML / CSS onJuly 18, 2013

(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>
HTML / CSS 相关文章推荐
CSS3画一个阴阳八卦图
Mar 09 HTML / CSS
利用纯css3实现的文字亮光特效的代码演示
Nov 27 HTML / CSS
使用CSS3实现SVG路径描边动画效果入门教程
Oct 21 HTML / CSS
html5时钟实现代码
Oct 22 HTML / CSS
突破canvas语法限制 让他支持链式语法
Dec 24 HTML / CSS
用canvas实现图片滤镜效果附演示
Nov 05 HTML / CSS
HTML5 Canvas锯齿图代码实例
Apr 10 HTML / CSS
分享29个基于Bootstrap的HTML5响应式网页设计模板
Nov 19 HTML / CSS
使用phonegap获取位置信息的实现方法
Mar 31 HTML / CSS
canvas压缩图片以及卡片制作的方法示例
Dec 04 HTML / CSS
移动端Html5中百度地图的点击事件
Jan 31 HTML / CSS
AmazeUI 加载进度条的实现示例
Aug 20 HTML / CSS
html5 音乐播放器 audio 标签使用概述
Jul 15 #HTML / CSS
HTML5 Canvas如何实现纹理填充与描边(Fill And Stroke)
Jul 15 #HTML / CSS
css 如何让背景图片拉伸填充避免重复显示
Jul 11 #HTML / CSS
HTML5 Canvas渐进填充与透明实现图像的Mask效果
Jul 11 #HTML / CSS
HTML5 Canvas draw方法制作动画效果示例
Jul 11 #HTML / CSS
HTML5验证以及日期显示的实现详解
Jul 05 #HTML / CSS
html标签之Object和EMBED标签详解
Jul 04 #HTML / CSS
You might like
PHP导出EXCEL快速开发指南--PHPEXCEL的使用详解
2013/06/03 PHP
php用正则表达式匹配URL的简单方法
2013/11/12 PHP
ThinkPHP里用U方法调用js文件实例
2015/06/18 PHP
jquery中的 $(&quot;#jb51&quot;)与document.getElementById(&quot;jb51&quot;) 的区别
2011/07/26 Javascript
用js一次改变多个input的readonly属性值的方法
2014/06/11 Javascript
jQuery创建DOM元素实例解析
2015/01/19 Javascript
JavaScript生成福利彩票双色球号码
2015/05/15 Javascript
获取当前月(季度/年)的最后一天(set相关操作及应用)
2016/12/27 Javascript
详解vue-Resource(与后端数据交互)
2017/01/16 Javascript
js实现首屏延迟加载实现方法 js实现多屏单张图片延迟加载效果
2017/07/17 Javascript
vue使用原生js实现滚动页面跟踪导航高亮的示例代码
2018/10/25 Javascript
vue集成chart.js的实现方法
2019/08/20 Javascript
vue+canvas实现拼图小游戏
2020/09/18 Javascript
Python序列之list和tuple常用方法以及注意事项
2015/01/09 Python
python实现给数组按片赋值的方法
2015/07/28 Python
qpython3 读取安卓lastpass Cookies
2016/06/19 Python
Python快速从注释生成文档的方法
2016/12/26 Python
详解如何管理多个Python版本和虚拟环境
2019/05/10 Python
python多进程间通信代码实例
2019/09/30 Python
pytorch实现对输入超过三通道的数据进行训练
2020/01/15 Python
python matplotlib实现将图例放在图外
2020/04/17 Python
Matplotlib中%matplotlib inline如何使用
2020/07/28 Python
使用python库xlsxwriter库来输出各种xlsx文件的示例
2020/09/01 Python
总结Pyinstaller的坑及终极解决方法(小结)
2020/09/21 Python
python 多进程和协程配合使用写入数据
2020/10/30 Python
肯尼亚网上商城:Kilimall
2016/08/20 全球购物
阿联酋彩妆品牌:OUD MILANO
2019/10/06 全球购物
火山咖啡:Volcanica Coffee
2019/10/29 全球购物
简述进程的启动、终止的方式以及如何进行进程的查看
2014/02/20 面试题
电子专业推荐信范文
2013/11/18 职场文书
大学生求职推荐信
2013/11/27 职场文书
Java方法重载和方法重写的区别到底在哪?
2021/06/11 Java/Android
Unity连接MySQL并读取表格数据的实现代码
2021/06/20 MySQL
SpringBoot工程下使用OpenFeign的坑及解决
2021/07/02 Java/Android
Python torch.flatten()函数案例详解
2021/08/30 Python
Python爬虫网络请求之代理服务器和动态Cookies
2022/04/12 Python