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轻松实现圆角效果
Nov 09 HTML / CSS
CSS3 background-image颜色渐变的实现代码
Sep 13 HTML / CSS
image-set实现Retina屏幕下图片显示详细介绍
Dec 24 HTML / CSS
CSS3制作圆角图片和椭圆形图片
Jul 08 HTML / CSS
CSS3制作缩略图的详细过程
Jul 08 HTML / CSS
css3的过滤效果简单实例
Aug 03 HTML / CSS
html5贪吃蛇游戏使用63行代码完美实现
Jun 25 HTML / CSS
html5基础教程常用技巧整理
Aug 20 HTML / CSS
浅谈利用缓存来优化HTML5 Canvas程序的性能
May 12 HTML / CSS
详解canvas多边形(蜘蛛图)的画法示例
Jan 29 HTML / CSS
详解android与HTML混合开发总结
Jun 06 HTML / CSS
Canvas实现保存图片到本地的示例代码
Jun 28 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 addslashes 函数详细分析说明
2009/06/23 PHP
php基础教程
2015/08/26 PHP
PHP实现微信网页授权开发教程
2016/01/19 PHP
javascript+mapbar实现地图定位
2010/04/09 Javascript
jQuery对下拉框,单选框,多选框的操作
2014/02/21 Javascript
纯javascript移动优先的幻灯片效果
2015/11/02 Javascript
JQuery组件基于Bootstrap的DropDownList(完整版)
2016/07/05 Javascript
Javascript 对cookie操作详解及实例
2016/12/29 Javascript
详解nodejs微信公众号开发——4.自动回复各种消息
2017/04/11 NodeJs
jquery ajax异步提交表单数据的方法
2017/10/27 jQuery
使用Electron构建React+Webpack桌面应用的方法
2017/12/15 Javascript
webpack项目轻松混用css module的方法
2018/06/12 Javascript
使用D3.js+Vue实现一个简单的柱形图
2018/08/05 Javascript
vue项目在安卓低版本机显示空白的原因分析(两种)
2018/09/04 Javascript
Angular中innerHTML标签的样式不起作用的原因解析
2019/06/18 Javascript
Python中的startswith和endswith函数使用实例
2014/08/25 Python
Python实现去除代码前行号的方法
2015/03/10 Python
python从sqlite读取并显示数据的方法
2015/05/08 Python
python实现用户登录系统
2016/05/21 Python
Python创建二维数组实例(关于list的一个小坑)
2017/11/07 Python
Python自然语言处理之词干,词形与最大匹配算法代码详解
2017/11/16 Python
Python文本统计功能之西游记用字统计操作示例
2018/05/07 Python
python脚本监控Tomcat服务器的方法
2018/07/06 Python
python字符串和常用数据结构知识总结
2019/05/21 Python
如何解决pycharm调试报错的问题
2020/08/06 Python
美国打印机墨水和碳粉购物网站:QuikShip Toner
2018/08/29 全球购物
如何打印出当前源文件的文件名以及源文件的当前行号
2015/04/05 面试题
linux面试题参考答案(4)
2013/01/28 面试题
EJB3.1都有哪些改进
2012/11/17 面试题
新闻学专业应届生求职信
2013/11/08 职场文书
大学毕业生通用自我评价
2014/01/05 职场文书
教师党员公开承诺事项
2014/05/28 职场文书
学习考察心得体会
2014/09/04 职场文书
SpringBoot整合Redis入门之缓存数据的方法
2021/11/17 Redis
windows10声卡驱动怎么安装?win10声卡驱动安装操作步骤教程
2022/08/05 数码科技
AndroidStudio图片压缩工具ImgCompressPlugin使用实例
2022/08/05 Java/Android