html的技术标准网站,HTML5标准最新技术预览

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

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

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

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

结构

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

a4ddebadc3a0d2bc357acc9eda709e76.gif

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

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

f01e3cfec13414c48e1fcd695b4740eb.gif

那些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﹥

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/440646.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【Hihocoder - offer编程练习赛86 - C】跳数游戏(STLset或map预处理,dp)

题干: 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 给定一个长度为N的数组A1, A2, ... AN,请你判断其中有几个元素Ai按如下跳跃规则能跳到最后一个元素AN。 假设你当前位于Ai,跳跃的规则是: 如果这一步是第奇…

linux+平均磁盘请求数量_Linux 查看磁盘IO并找出占用IO读写很高的进程

背景-线上告警线上一台服务器告警,磁盘利用率 disk.util > 90,并持续告警。登录该服务器后通过 iostat -x 1 10 查看了相关磁盘使用信息。相关截图如下:# 如果没有 iostat 命令,那么使用 yum install sysstat 进行安装# iostat…

计算机网络技术实验,计算机网络技术实验

计算机网络技术实验 实 验 一 (2课时) 课题(项目)名称: 基本网络命令 计划学时: 2学时 实验目的 1. 了解网络命令的基本使用方法 2. 掌握常用网络命令的应用 3. 掌握网络通达性的基本测试方法 实验要求 1. 全面了解各种网络命令 2. 对常用的网络命令,上机测试运行 3…

【7-10 PAT】树的遍历(给定一棵二叉树的后序遍历和中序遍历,请你输出其层序遍历的序列。)

题干&#xff1a; 给定一棵二叉树的后序遍历和中序遍历&#xff0c;请你输出其层序遍历的序列。这里假设键值都是互不相等的正整数。 解题报告&#xff1a; dfs求出这棵树来&#xff0c;然后bfs求层序遍历就行了。 AC代码&#xff1a; #include<cstdio> #include<…

html div分钟刷新一次啊代码_接口测试平台代码实现57首页重构5

本节我们接着开发首页&#xff0c;主要内容是 让左侧的请求记录和右侧的请求模块 联动起来。具体联动需求&#xff1a;右侧请求一次之后&#xff0c;左侧生成记录点击左侧记录&#xff0c;右侧则会显示这次记录的请求数据我们本节课的内容是想办法实现1-生成记录。我们知道&…

会计专业领域计算机应用系统,信息技术在会计专业领域中的应用

在当今这个信息时代,信息技术对会计专业产生了重大的变革。本文在详细分析会计信息化特征的基础上,阐述了由于信息技术应用对会计职能产生的影响,并提出了如何更好的在会计专业领域推广信息技术。信息技术在会计专业领域中的应用郑晨(福建农林大学计算机与信息学院&#xff0c;…

【ZOJ - 3703】Happy Programming Contest(带优先级的01背包,贪心背包)

题干&#xff1a; In Zhejiang University Programming Contest, a team is called "couple team" if it consists of only two students loving each other. In the contest, the team will get a lovely balloon with unique color for each problem they solved.…

固定 顶部_纹络型温室大棚顶部通风样式及效率对比

纹络型温室大棚是一种使用玻璃作为覆盖材料的温室大棚&#xff0c;该种温室大棚由于抗风雪能力强&#xff0c;环境控制能力强、使用年限长&#xff0c;目前在我国的南北地区大量建造。由于该型号的玻璃温室大棚单体占地面积能够达到几十亩地&#xff0c;因此单靠墙面通风无法满…

微型计算机智能体重评测,荣耀智能体脂秤WiFi版评测:17项身体指标 比你更懂你...

原标题&#xff1a;荣耀智能体脂秤WiFi版评测&#xff1a;17项身体指标 比你更懂你[PConline 评测]俗话说冬天不减肥&#xff0c;夏天徒伤悲&#xff0c;每个人都希望拥有穿衣显瘦、脱 衣有肉的完美身材。但往往理想很丰满&#xff0c;现实很骨感&#xff0c;很多人都陷入减肥的…

【ZOJ - 3211】Dream City (01背包类问题,贪心背包)

题干&#xff1a; JAVAMAN is visiting Dream City and he sees a yard of gold coin trees. There are n trees in the yard. Lets call them tree 1, tree 2 ...and tree n. At the first day, each tree i has ai coins on it (i1, 2, 3...n). Surprisingly, each tree i c…

gitlable iphone_使用gitlab ci构建IOS包并发送通知消息到企业微信

在之前的文章中&#xff0c;我们介绍了使用gitlab ci构建Android包的方法。今天我们介绍使用gitlab ci如何构建IOS包&#xff0c;并且在打包成功或者失败时&#xff0c;如何将消息通知到企业微信。如果对gitlab ci还不熟悉的&#xff0c;可以参考之前的文章使用gitlab ci构建An…

2020计算机网络基础与应用,2020年国防科技大学硕士研究生考试F1107计算机网络基础考试大纲...

全国各省市院校2020年硕士研究生考试大纲汇总(持续更新中)》》》2020年全国硕士研究生入学考试命题标准大纲已于7月8日正式公布&#xff0c;接下来全国各研招院校将陆续发布2020考研专业课大纲。以下是中公考研小编整理的“2020年国防科技大学硕士研究生考试F1107计算机网络基础…

【ZOJ - 3212 】K-Nice (构造)

题干&#xff1a; This is a super simple problem. The description is simple, the solution is simple. If you believe so, just read it on. Or if you dont, just pretend that you cant see this one. We say an element is inside a matrix if it has four neighbori…

chrome jsp 显示不正常_JSP程序在chrome下不兼容的问题!

比如&#xff0c;我这里有个&#xff1a;">比如&#xff0c;我这里有个&#xff1a;οnclick"javascript:onChooseLongCode()" value"...">在下面的JS动作中&#xff1a;function onChooseLongCode(){var qryFldVal qryFld.value;//要用 var q…

人脑意识转入量子计算机,人脑产生意识:可能是因为量子纠缠

图片来源&#xff1a;quanta magazine一提到“量子意识”这个词语&#xff0c;大多数物理学家都会选择避而不谈&#xff0c;因为这个词语听起来好像有点“民科”&#xff0c;甚至让人联想宗教或者玄学。不过出人意料的是&#xff0c;量子效应可能真的在人类的认知过程中起到了一…

【ZOJ - 1163】The Staircases(dp)

题干&#xff1a; One curious child has a set of N little bricks. From these bricks he builds different staircases. Staircase consists of steps of different sizes in a strictly descending order. It is not allowed for staircase to have steps equal sizes. Ev…

函授本科统考计算机考试时间,函授2006级计算机、机电本科第一学期考试时间安排.doc...

函授2006级计算机、机电本科第一学期考试时间安排.doc函授2006级计算机、机电本科第一学期考试时间安排答疑时间9月16日下午2&#xff1a;30&#xff0d;3&#xff1a;309月16日下午3&#xff1a;30&#xff0d;4&#xff1a;309月16日下午4&#xff1a;30&#xff0d;5&#x…

的级联选择_级联接收机的计算及Y因子噪声因子测量法

对于RF系统工程师来说&#xff0c;计算噪声系数预算对预测产品性能至关重要。一、级联接收机的计算这部分讨论噪声系数的一般概念&#xff0c;以及产品定义和电路设计者如何利用噪声系数表示噪声性能要求。噪声系数也用于预测接收机系统的总体灵敏度。也介绍级联接收机的噪声系…

*【PAT天梯】分而治之(并查集,暴力)

题干&#xff1a; L2-1 分而治之 &#xff08;25 分&#xff09; 分而治之&#xff0c;各个击破是兵家常用的策略之一。在战争中&#xff0c;我们希望首先攻下敌方的部分城市&#xff0c;使其剩余的城市变成孤立无援&#xff0c;然后再分头各个击破。为此参谋部提供了若干打击…

免费测试英语发音的软件,2020英语音标免费版

2020英语音标免费版是一款安卓手机英语音标内容学习软件&#xff0c;在这里汇集了英语音标相关内容学习&#xff0c;包含了音标、发音等内容学习&#xff0c;能够进行对比练习&#xff0c;不断对比&#xff0c;让发音更标准&#xff0c;拥有详细的发音知识可以学习&#xff0c;…