已经存在近十年的HTML4已经成为不断发展的Web开发领域的瓶颈;HTML5标准在此时显得尤为重要。每天都有新颖而创新的网站出现,全方位地拓展HTML的边界。Web开发者正在寻求新的技术,提供更强大的功能,那些因为脚本语言和浏览器的限制而被隐瞒了的功能。

为了实现更好的灵活性和更强的互动性,及创造令人兴奋而更具交互性的网站和应用程序,HTML5 引入和增强了更为广泛的特性,包括控制,APIs,多媒体,结构和语义等。

有关HTML5标准的工作,起于2004年,在W3C HTML WG和WHATWG的共同努力下,目前还在进行中。许多关键成员加入了W3G的工作,包括四大主流浏览器厂商代表:苹果,Mozilla,Opera,和微软;还有一些有着不同利益和专业知识的其他组织和个人。

请注意,规范仍然只是一个进行中的工作,完成它还有很长的路要走。因此,文章中提到的这些特性可能将发生改变。这篇文章是为了对目前草案中的一些主要特性做一个简单的介绍。

结构

HTML5标准中引入了一整套新的元素,使建构网页更变得更容易。大多数的HTML 4网页含有各种共同的结构,比如页眉,页脚和列,如今,使用div元素加上描述id或class来标记是相当普遍的。

此图说明了一个典型的带id和class属性的div标记的两列布局。它包含一个页眉,页脚和标题下方的水平导航条。主要内容包含一篇文章和侧右栏。

div元素的大量使用是因为最新版本的HTML 4缺少必要的语义元素来更具体的描述这些部分。HTML5标准通过引入一些新的元素来解决这个问题,而这些元素表示各个不同的部分。

那些div元素可以用这些新元素代替:header, nav, section, article, aside, and footer

那个文档的标记可以如下所示:

﹤header﹥...﹤/header﹥

﹤nav﹥...﹤/nav﹥

﹤article﹥

﹤section﹥

...

﹤/section﹥

﹤/article﹥

﹤aside﹥...﹤/aside﹥

﹤footer﹥...﹤/footer﹥

﹤/body﹥

使用这些元素有几个优点。当与标题元素(h1,h2,h3,h4,h5,h6)联同使用时,产生了一种使用标题级别标记嵌套章节的方法,这将超过以前版本HTML的6个标题级别。这个规范包含一个生成大纲的详细算法,其中考虑到这些元素的结构并使之与以前版本的兼容。这个可以用来制作工具和浏览器生成内容表以协助用户浏览文档,例如,以下标记结构使用嵌套的section和h1构造:

﹤section﹥

﹤h1﹥Level 1﹤/h1﹥

﹤section﹥

﹤h1﹥Level 2﹤/h1﹥

﹤section﹥

﹤h1﹥Level 3﹤/h1﹥

﹤/section﹥

﹤/section﹥

﹤/section﹥

注意为了更好的与最新浏览器兼容,也可能适当用其他的标题元素(h2,h3,h4,h5,h6)代替h1元素。通过确认页面各部分的目的,使用特定的章节元素和辅助技术能帮助用户更容易地浏览网页。例如,他们可以很容易地从导航栏跳读或快速地从一篇文章跳到下一篇而不需要作者提供切换链接。作者也从中受益,由于采用几个显明的元素代替了文档中大量的div元素,从而使得源代码变得更清晰容易。

元素header表示一个部分的开头,但可能不只是包含章节标题——如它可以合理地加入副标题,版本信息或署名等。

﹤header﹥

﹤h1﹥A Preview of HTML 5﹤/h1﹥

﹤p class="byline"﹥By Lachlan Hunt﹤/p﹥

﹤/header﹥﹤header﹥

﹤h1﹥Example Blog﹤/h1﹥

﹤h2﹥Insert tag line here.﹤/h2﹥

﹤/header﹥

元素footer表示所在章节的脚注。脚注通常包含章节信息如作者,相关文章链接,版权等等。

© 2007 Example Inc.元素nav表示导航链接部分。它适用于网站导航或目录列表。

﹤nav﹥

﹤ul﹥

﹤li﹥﹤a href="/"﹥Home﹤/a﹥﹤/li﹥

﹤li﹥﹤a href="/products"﹥Products﹤/a﹥﹤/li﹥

﹤li﹥﹤a href="/services"﹥Services﹤/a﹥﹤/li﹥

﹤li﹥﹤a href="/about"﹥About﹤/a﹥﹤/li﹥

﹤/ul﹥

﹤/nav﹥

元素aside是为了关联周边参考内容,一般用作侧边栏。

﹤aside﹥

﹤h1﹥Archives﹤/h1﹥

﹤ul﹥

﹤li﹥﹤a href="/2007/09/"﹥September 2007﹤/a﹥﹤/li﹥

﹤li﹥﹤a href="/2007/08/"﹥August 2007﹤/a﹥﹤/li﹥

﹤li﹥﹤a href="/2007/07/"﹥July 2007﹤/a﹥﹤/li﹥

﹤/ul﹥

﹤/aside﹥

元素section表示文章或应用程序的通用部分,如一个章节,例:

﹤section﹥

﹤h1﹥Chapter 1: The Period﹤/h1﹥

﹤p﹥It was the best of times, it was the worst of times,

it was the age of wisdom, it was the age of foolishness,

it was the epoch of belief, it was the epoch of incredulity,

it was the season of Light, it was the season of Darkness,

...﹤/p﹥

﹤/section﹥

元素article表示文档,页面或站点的独立部分。它适用于像新闻,博客文章,论坛帖子或个人意见等内容。

﹤article id="comment-2"﹥

﹤header﹥

﹤h4﹥﹤a href="#comment-2" rel="bookmark"﹥Comment #2﹤/a﹥

by ﹤a href="http://example.com/"﹥Jack O'Niell﹤/a﹥﹤/h4﹥

﹤p﹥

﹤time datetime="2007-08-29T13:58Z"﹥

August 29th, 2007 at 13:58

﹤/time﹥

﹤/header﹥

﹤p﹥That's another great article!﹤/p﹥

﹤/article﹥

html的技术标准网站,HTML5标准最新技术预览相关推荐

  1. iPhone App创建与审核步骤二:如何在developer.apple.com网站中设置App预览和截屏以完成App上架

    iPhone App创建与审核步骤二:如何在developer.apple.com网站中设置App预览和截屏以完成App上架,根据图标规范RAD Studio 10.4 for delphi XE 或 ...

  2. 上传图片显示扫描效果html5,JS+HTML5实现上传图片预览效果完整实例【测试可用】...

    本文实例讲述了JS+HTML5实现上传图片预览效果.分享给大家供大家参考,具体如下: 在项目中遇到用input标签file类型的文件上传,想实在上传之前进行图片的预览功能:之前的做的一个解决方案是文件 ...

  3. html图片查看代码实现,如何用HTML5实现图片预览和查看原图的功能

    html5实现图片预览和查看原图 html5实现图片预览和查看原图相对以前容易多了,在以前,为了安全,web端的js是不能读取文件的本地真实路径的,只能将图片上传到服务器上,再取图片的链接,这样才能实 ...

  4. html5实现图片预览和查看原图

    html5提供了很多新的API,减轻了很多开发者的工作,比如这次要讲解的FileReader和naturalWidth,naturalHeight就能实现图片预览和查看原图功能 html5 从一开始就 ...

  5. HTML5点击图片查看大图,科技常识:HTML5 实现图片预览和查看原图

    今天小编跟大家讲解下有关HTML5 实现图片预览和查看原图 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关HTML5 实现图片预览和查看原图 的相关资料,希望小伙伴们看了有所帮助. htm ...

  6. html画布显示PPT,【Web前端问题】有没有办法让HTML5 canvas显示/预览word/excel/powerpoint 文档?...

    目前想实现类似百度文库那样的在线文档预览,但是他们使用的一般都是Flash,而HTML5 canvas可以在大多数情况下代替Flash,那么有没有办法让canvas显示/预览Office文档? 如果不 ...

  7. HTML5 实现图片预览和查看原图

    html5从一开始就给开发者很多的期待,提供众多新的API,不用再想以前一样,为了实现某个功能写很多的代码.在以前,如果要实现图片预览会怎么做呢,因为为了安全的原因,web端的js是不能读取文件的本地 ...

  8. Safari 最新技术预览版来啦,为开发者带来了哪些新功能?

    [CSDN 编者按]2022年3月3日,苹果发布了Safari(苹果浏览器)技术预览版更新,此次更新是针对开发人员的实验版本,并且介绍了有关Safari未来版本的功能. 整理 | 郭露 出品 | CS ...

  9. html5 预览图片原理,html5实现图片预览和查看原图

    html5提供了很多新的API,减轻了很多开发者的工作,比如这次要讲解的FileReader和naturalWidth,naturalHeight就能实现图片预览和查看原图功能 html5 从一开始就 ...

最新文章

  1. Linux定时任务Crontab执行PHP脚本
  2. P3 Simulink仿真-《Matlab/Simulink与控制系统仿真》程序指令总结
  3. Git本地仓库文件的创建、修改和删除
  4. 威斯康星大学计算机专业找工作,威斯康星麦迪逊大学计算机申请条件有哪些?...
  5. 类UNIX操作系统家族发展时间线图谱(1969-2020)
  6. powershell自动化操作AD域、Exchange邮箱系列(8)—链接操作Sqlserver数据库
  7. 简析平衡树(四)——FHQ Treap
  8. Kotlin-字符串小写转大写
  9. 点赞 分数 20作者 陈越单位 浙江大学
  10. 破解 WIDCOMM 蓝牙驱动的方法
  11. Python程序不使用函数将字符大写
  12. 10年资深DBA老郭(门下已出多位DBA学生)老男孩MySQL DBA标杆班实战视频教程
  13. mx3 android 5.1,魅蓝note3 稳定版Flyme 5.1.11.1[A]
  14. 华为鸿蒙亮利剑,华为亮利剑,超级主镜头+鸿蒙OS,所有期许或将如愿以偿
  15. python爬取好友微信地区_python爬取微信信息--显示性别/地域/词云(附代码)
  16. JVM 启动参数规则:-、-X、-XX、-D表示什么意思?
  17. 微信公众号 - Java推送公众号模板消息给用户
  18. [异常退出,错误代码0xC0000005]:解决Windows应用程序崩溃的问题
  19. Linux用户、组管理
  20. [网络安全自学篇] 2021年安全学习规划

热门文章

  1. mysql 分页算法_MySQL高效的分页算法
  2. mysql编程_PHP数据库编程之一MySQL优化策略概述
  3. mysql中间件面试题_面试题集锦-中间件 - 春哥大魔王的博客的个人空间 - OSCHINA - 中文开源技术交流社区...
  4. nodejs readfilesync 路径_Linux 磁盘多路径聚合multipath
  5. c++源码矢量图形编辑器_下一代代码编辑器的设想
  6. 在vlan2用计算机名访问,计算机是如何访问一个网页的?vlan间如何实现通信?
  7. python内函数名加括号和不加括号的区别,python中 函数名加括号与不加括号
  8. 点云数据生成三维模型_可直接编辑的高质量3D生成模型:三维深度生成方法SDM-NET...
  9. 2021南京大学计算机复试线,南京大学2021年硕士研究生复试基本分数线
  10. 【转】azure认证路线以及学习资源