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的Media Queries(跨平台设计)
Jul 27 HTML / CSS
浅谈HTML5 defer和async的区别
Jun 07 HTML / CSS
HTML5 本地存储实现购物车功能
Sep 07 HTML / CSS
Html5游戏开发之乒乓Ping Pong游戏示例(二)
Jan 21 HTML / CSS
HTML5 CSS3打造相册效果附源码下载
Jun 16 HTML / CSS
HTML5 拖放(Drag 和 Drop)详解与实例代码
Sep 14 HTML / CSS
使用html5实现表格实现标题合并的实例代码
May 13 HTML / CSS
HTML里显示pdf、word、xls、ppt的方法示例
Apr 14 HTML / CSS
HTML5单选框、复选框、下拉菜单、文本域的实现代码
Dec 01 HTML / CSS
HTML5中 rem适配方案与 viewport 适配问题详解
Apr 27 HTML / CSS
HTML5之高度塌陷问题的解决
Jun 01 HTML / CSS
CSS中理解层叠性及权重如何分配
Dec 24 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
重新封装zend_soap实现http连接安全认证的php代码
2011/01/12 PHP
基于PHP导出Excel的小经验 完美解决乱码问题
2013/06/10 PHP
php+mysqli预处理技术实现添加、修改及删除多条数据的方法
2015/01/30 PHP
3种php生成唯一id的方法
2015/11/23 PHP
PHP将英文数字转换为阿拉伯数字实例讲解
2019/01/28 PHP
自己动手制作jquery插件之自动添加删除行功能介绍
2011/10/14 Javascript
JavaScript link方法入门实例(给字符串加上超链接)
2014/10/17 Javascript
JavaScript 事件对象介绍
2015/04/13 Javascript
javascript将DOM节点添加到文档的方法实例分析
2015/08/04 Javascript
js实现全国省份城市级联下拉菜单效果代码
2015/09/07 Javascript
JS+CSS实现简单滑动门(滑动菜单)效果
2015/09/19 Javascript
JavaScript脚本判断蜘蛛来源的方法
2015/09/22 Javascript
JavaScript鼠标事件,点击鼠标右键,弹出div的简单实例
2016/08/03 Javascript
实例解析js中try、catch、finally的执行规则
2017/02/24 Javascript
jQuery插件ImgAreaSelect实现头像上传预览和裁剪功能实例讲解一
2017/05/26 jQuery
详解react-router 4.0 下服务器如何配合BrowserRouter
2017/12/29 Javascript
jQuery 查找元素操作实例小结
2019/10/02 jQuery
JavaScript将数组转换为链表的方法
2020/02/16 Javascript
JS异步宏队列微队列原理详解
2020/09/09 Javascript
python ip正则式
2009/05/07 Python
python对于requests的封装方法详解
2019/01/03 Python
python3的数据类型及数据类型转换实例详解
2019/08/20 Python
Python拆分大型CSV文件代码实例
2019/10/07 Python
使用tensorflow框架在Colab上跑通猫狗识别代码
2020/04/26 Python
Python 常用日期处理 -- calendar 与 dateutil 模块的使用
2020/09/02 Python
Pycharm 如何一键加引号的方法步骤
2021/02/05 Python
通过HTML5 Canvas API绘制弧线和圆形的教程
2016/03/14 HTML / CSS
Web前端页面跳转并取到值
2017/04/24 HTML / CSS
植物选择:Botanic Choice
2017/02/15 全球购物
补充协议书范本
2014/04/23 职场文书
工作粗心大意检讨书
2014/09/18 职场文书
党员民主评议总结
2014/10/20 职场文书
民事申诉状范本
2015/05/20 职场文书
大学生读书笔记范文
2015/07/01 职场文书
初中语文教师研修日志
2015/11/13 职场文书
利用Python实现模拟登录知乎
2022/05/25 Python