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

2016-02-19 10:39 2 1 收藏

在这个颜值当道,屌丝闪边的时代,拼不过颜值拼内涵,只有知识丰富才能提升一个人的内在气质和修养,所谓人丑就要多学习,今天图老师给大家分享HTML5标签与HTML4标签的区别示例介绍,希望可以对大家能有小小的帮助。

【 tulaoshi.com - Web开发 】

(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
titlePHP100中文网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
h1HTML5专题视频教程/h1
发布日期:time09:00/time
time datetime="2013-2-10"春节/time
p测试相关内容/p
/article
footer
address地址/address
/footer
/body
/html

来源:https://www.tulaoshi.com/n/20160219/1595353.html

延伸阅读
表单 一、基本架构 <form action="处理资料用的CGI程式之URL"或"mailto:电子信箱的URL" method="get或post"> .......... .......... .......... </form>  二、输入文件型表单 <form action="URL" method="post"> <input> <input> .......... ..........&...
标签: Web开发
新增的结构标签 section元素 表示页面中的一个内容区块,比如章节、页眉、页脚或页面的其他部分。可以和h1、 h2等元素结合起来使用,表示文档结构。例:HTML5中section/section;HTML4中div /div。 article元素 表示页面中一块与上下文不相关的独立内容。比如一篇文章。 aside元素 表示article元素内容之外的、与article元素内容相...
标签: Web开发
a href="tel:电话号码"/a
标签: Web开发
fieldset是一个不常用的HTML标签,很有意思,其语法如下: fieldset legendfieldset名称/legend !-- 加入你的内容 -- /fieldset fieldset元素用于对表单中的元素进行分组并在文档中区别标出文本。它与窗口框架的行为有些相似。fieldset在 Internet Explorer 4.0 及以上版本的HTML 和的脚本中可用。 fieldset元素元素是块元素...
标签: Web开发
我们在文章中一直强调HTML标签语义的重要,富含语义而且科学得当的运用HTML标签,对CSS网页布局既建立符合WEB标准的网站是非常有意义、非常有益处的。 或许有朋友感到迷惑,到底如何运用HTML标签才是保持文档语义并有良好的结构呢?我们看下面的这方面知识的介绍,相信你一定有所收获。但也请你注意,有些标签可能不符合WEB标准了,这...

经验教程

415

收藏

18
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部