热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

HTML5标签与HTML4的区别

概念的变化HTML5专注内容与结构,而不专注的表现<header><hgroup>导航相关数据<hgroup><header>

概念的变化

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

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

声明与标签

HTML5在更多的声明和标签上面做了简化,也对兼容做了详细的规定,废除了部分元素,增加了部分元素。

html5语法规则

  1. 标签要小写
  2. 属性值不加” “或 ’ ‘
  3. 可以省略某些标签
    html body head tbody
  4. 可以省略某些结束标签
    tr td li
  5. 单标签不用加结束标签
    img input
  6. 废除的标签
    font center big

文档声明

  1. 文档声明
    定义和用法
    声明必须位于 HTML5 文档中的第一行,也就是位于 标签之前。该标签告知浏览器文档所使用的 HTML 规范。
    doctype 声明不属于 HTML 标签; 它是一条指令,告诉浏览器编写页面所用的标记的版本。
    在所有 HTML 文档中规定 doctype 是非常重要的,这样浏览器就能了解预期的文档类型。
    HTML 4.01 中的 doctype 需要对 DTD 进行引用,因为 HTML 4.01 基于 SGML。而 HTML 5 不基于 SGML,因此不需要对 DTD 进行引用,但是需要 doctype 来规范浏览器的行为(让浏览器按照它们应该的方式来运行。)。

  2. 结构性标签
    结构性标签(construct tag)主要负责Web的上下文结构的定义,确保 HTML文档的完整性,这类标签包括以下几个。
    section:用于表达书的一部分或一章,或者一章内的一节。在Web页面应用中,该标签也可以用于区域的章节表述。
    hgroup:对网页或区段(section)的标题进行组合:。
    header:页面主体上的头部,注意区别于head标签。这里可以给初学者提供一个判断的小技巧:head标签中的内容往往是不可见的,而header标签往往在一对body标签之中。
    footer:页面的底部(页脚)。通常,人们会在这里标出网站的一些相关信息,例如关于我们、法律申明、邮件信息、管理入口等。
    nav:是专门用于菜单导航、链接导航的标签,是navigator的缩写。
    article:用于表示一篇文章的主体内容,一般为文字集中显示的区域

  3. 块级性标签
    级块性标签(block tag)主要完成Web页面区域的划分,确保内容的有效分隔,这类标签包括以下几个。
    aside。用以表达注记、贴士、侧栏、摘要、插入的引用等作为补充主体的内容。从一个简单页面显示上看,就是侧边栏,可以在左边,也可以在右边。从一个页面的局部看,就是摘要。
    figure 标签规定独立的流内容,通常与figcaption联合使用。
    code。表示一段代码块。
    dialog 对话标签 配合dt dd标签使用

  4. 行内标签
    行内语义性标签(in-line tag )主要完成Web页面具体内容的引用和表述,是丰富内容展示的基础,这类标签包括以下几个。
    meter。表示特定范围内的数值,可用于工资、数量、百分比等 max表示最大值,min表示最小值,value代表当前值。
    time。表示时间值,属性datetime强调时间
    progress。用来表示进度条

  5. 多媒体标签
    video。视频标签,用于支持和实现视频(含视频流)文件的直接播放,支持缓冲预载和多种视频媒体格式,例如MPEG-4、OggV和WebM等。
    audio。音频标签,用于支持和实现音频(音频流)文件的直接播放,支持缓冲预载和多种音频媒体格式。

  6. 列表标签
    标签定义选项列表。请与 input 元素配合使用该元素,来定义 input 可能的值。datalist 及其选项不会被显示出来,它仅仅是合法的输入值列表。
    所有主流浏览器都支持 标签,除了 Internet Explorer 和 Safari。

  7. 交互性标签
    交互性标签(interactive tag)主要用于功能性的内容表达,会有一定的内容和数据的关联,是各种事件的基础,这类标签包括以下几个。
    menu。主要用于交互菜单(这是一个曾被废弃现在又被重新启用的标签)。
    command。用来处理命令按钮。

HTML5标签语法介绍及新增标记

  1. 语法标签
    • 不允许写的结束符的标签:area、basebr、col、command、Embed、hr、img、input、keygen、link、meta、param、source、Track、wbr
    • 可以省略结束符的标签:li、dt、dd、p、rt、optgroup、option、Colgroup、thread、tbody、tr、td、th
    • 可以完全省略的标签: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简单示例

  
<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:00time>
<time datetime="2013-2-10">春节time>
<p>测试相关内容p>
article>
<footer>
<address>地址address>
footer>
body>
html>

推荐阅读
  • 这是原文链接:sendingformdata许多情况下,我们使用表单发送数据到服务器。服务器处理数据并返回响应给用户。这看起来很简单,但是 ... [详细]
  • Webmin远程命令执行漏洞复现及防护方法
    本文介绍了Webmin远程命令执行漏洞CVE-2019-15107的漏洞详情和复现方法,同时提供了防护方法。漏洞存在于Webmin的找回密码页面中,攻击者无需权限即可注入命令并执行任意系统命令。文章还提供了相关参考链接和搭建靶场的步骤。此外,还指出了参考链接中的数据包不准确的问题,并解释了漏洞触发的条件。最后,给出了防护方法以避免受到该漏洞的攻击。 ... [详细]
  • 高质量SQL书写的30条建议
    本文提供了30条关于优化SQL的建议,包括避免使用select *,使用具体字段,以及使用limit 1等。这些建议是基于实际开发经验总结出来的,旨在帮助读者优化SQL查询。 ... [详细]
  • 本文介绍了南邮ctf-web的writeup,包括签到题和md5 collision。在CTF比赛和渗透测试中,可以通过查看源代码、代码注释、页面隐藏元素、超链接和HTTP响应头部来寻找flag或提示信息。利用PHP弱类型,可以发现md5('QNKCDZO')='0e830400451993494058024219903391'和md5('240610708')='0e462097431906509019562988736854'。 ... [详细]
  • Imtryingtofigureoutawaytogeneratetorrentfilesfromabucket,usingtheAWSSDKforGo.我正 ... [详细]
  • NotSupportedException无法将类型“System.DateTime”强制转换为类型“System.Object”
    本文介绍了在使用LINQ to Entities时出现的NotSupportedException异常,该异常是由于无法将类型“System.DateTime”强制转换为类型“System.Object”所导致的。同时还介绍了相关的错误信息和解决方法。 ... [详细]
  • Monkey《大话移动——Android与iOS应用测试指南》的预购信息发布啦!
    Monkey《大话移动——Android与iOS应用测试指南》的预购信息已经发布,可以在京东和当当网进行预购。感谢几位大牛给出的书评,并呼吁大家的支持。明天京东的链接也将发布。 ... [详细]
  • 解决VS写C#项目导入MySQL数据源报错“You have a usable connection already”问题的正确方法
    本文介绍了在VS写C#项目导入MySQL数据源时出现报错“You have a usable connection already”的问题,并给出了正确的解决方法。详细描述了问题的出现情况和报错信息,并提供了解决该问题的步骤和注意事项。 ... [详细]
  • Linux磁盘的分区、格式化的观察和操作步骤
    本文介绍了如何观察Linux磁盘的分区状态,使用lsblk命令列出系统上的所有磁盘列表,并解释了列表中各个字段的含义。同时,还介绍了使用parted命令列出磁盘的分区表类型和分区信息的方法。在进行磁盘分区操作时,根据分区表类型选择使用fdisk或gdisk命令,并提供了具体的分区步骤。通过本文,读者可以了解到Linux磁盘分区和格式化的基本知识和操作步骤。 ... [详细]
  • 个人学习使用:谨慎参考1Client类importcom.thoughtworks.gauge.Step;importcom.thoughtworks.gauge.T ... [详细]
  • 本文介绍了三种方法来实现在Win7系统中显示桌面的快捷方式,包括使用任务栏快速启动栏、运行命令和自己创建快捷方式的方法。具体操作步骤详细说明,并提供了保存图标的路径,方便以后使用。 ... [详细]
  • [大整数乘法] java代码实现
    本文介绍了使用java代码实现大整数乘法的过程,同时也涉及到大整数加法和大整数减法的计算方法。通过分治算法来提高计算效率,并对算法的时间复杂度进行了研究。详细代码实现请参考文章链接。 ... [详细]
  • Ihavethefollowingonhtml我在html上有以下内容<html><head><scriptsrc..3003_Tes ... [详细]
  • PDO MySQL
    PDOMySQL如果文章有成千上万篇,该怎样保存?数据保存有多种方式,比如单机文件、单机数据库(SQLite)、网络数据库(MySQL、MariaDB)等等。根据项目来选择,做We ... [详细]
  • 解决.net项目中未注册“microsoft.ACE.oledb.12.0”提供程序的方法
    在开发.net项目中,通过microsoft.ACE.oledb读取excel文件信息时,报错“未在本地计算机上注册“microsoft.ACE.oledb.12.0”提供程序”。本文提供了解决这个问题的方法,包括错误描述和代码示例。通过注册提供程序和修改连接字符串,可以成功读取excel文件信息。 ... [详细]
author-avatar
王者荣耀戒毒所
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有