大学网站开发与管理课程心得体会,网站开发硬件,制作视频的方法,江门市亿阳科技有限公司1、HTML5概述
2014年10月28日#xff0c;W3C#xff08;world wide web consortium#xff0c;万维网联盟#xff09;的HTML工作组发布了HTML5的正式推荐标准。HTML5作为构建开放Web平台的核心#xff0c;增加了支持Web应用的许多新特性#xff0c;以及更符合开发者使用…1、HTML5概述
2014年10月28日W3Cworld wide web consortium万维网联盟的HTML工作组发布了HTML5的正式推荐标准。HTML5作为构建开放Web平台的核心增加了支持Web应用的许多新特性以及更符合开发者使用习惯的新元素更关注定义的清晰、一致的标准确保Web应用和内容在不同浏览器中的互操作性。
1.1、HTML发展历程 **提示**从 HTML语言的发展历程来看HTML没有1.0版本这主要是因为当时有很多不同的版本。有些人认为Tim Berners-Lee的版本应该算初版但这个版本没有img元素也就是说HTML刚开始时仅能够显示文本信息。
2019年5月28日W3C与WHATWG宣布放下分歧签署新的谅解备忘录根据这项新协议W3C正式放弃发布HTML和DOM标准将HTML和DOM标准的制定权全权移交给浏览器厂商联盟WHATWG。
1.2、HTML5组织
HTML5是W3C与WHATWG合作的结晶。HTML5的开发主要由下面三个组织负责。
WHATWGWHATWG由来自Apple、Mozilla、Google、Opera等浏览器厂商的专家组成成立于2004年负责开发HTML和Web应用API。W3CW3C指万维网联盟(world wide web consortium)负责发布HTML5规范。IETF因特网工程任务组IETF负责因特网(Internet)协议开发。HTML5定义的WebSocket API依赖于新的WebSocket协议IETF工作组负责开发这个协议。
1.3、HTML5规则
为了避免HTML5开发过程中出现的各种分歧和偏差HTML5开发工作组在共识基础上建立了一套行事规则。
新特性应该基于HTML、CSS、DOM以及JavaScript。减少对外部插件的依赖如Flash。更优秀的错误处理。更多取代脚本的标记。HTML5应该独立于设备。开发进程应即时、透明倾听技术社区的声音吸纳社区内优秀的Web应用。允许试错允许纠偏从实践中来服务于实践快速迭代。
1.4、HTML5特性
1.4.1、兼容性
考虑到在互联网上HTML文档已经存在20多年因此支持所有现存HTML文档是非常重要的。HTML5不是颠覆性的革新它的核心理念就是要保持与过去技术的兼容和过渡。一旦浏览器不支持HTML5的某项功能针对该功能的备选行为就会悄悄运行。
1.4.2、实用性
HTML5新增加的元素都是对现有网页和用户习惯进行跟踪、分析和概括而推出的。例如Google分析了上百万的页面从中分析出DIV标签的通用ID名称并且发现其重复量很大如很多开发人员使用div idheader标记页眉区域为了解决实际问题HTML5就直接添加一个header标签。也就是说HTML5新增的很多元素、属性或者功能都是根据现实互联网中已经存在的各种应用进行技术精炼而不是在实验室中进行理想化的虚构新功能。
1.4.3、效率
HTML5规范是基于用户优先的原则编写的其宗旨是用户即上帝。这意味着在遇到无法解决的冲突时首先是用户其次是页面制作者再次是浏览器解析标准和规范制定者如W3C、WHATWG最后才考虑理论的纯粹性。因此HTML5的绝大部分功能是实用的只是在有些情况下还不够完美。例如下面的几种代码写法在HTML5中都能被识别。 idprohtml5idprohtml5IDprohtml5当然上面几种写法比较混乱不够严谨但是从用户和开发的角度考虑用户不在乎代码怎么写开发人员根据个人习惯书写反而提高了代码的编写效率。
1.4.4、安全性
为保证足够安全HTML5引入了一种新的基于来源的安全模型该模型不仅易用而且对各种不同的API都通用。这个安全模型不需要借助于任何所谓聪明、有创意却不安全的hack就能跨域进行安全对话。
1.4.5、分离
在清晰分离表现与内容方面HTML5迈出了很大的步伐。HTML5在所有可能的地方都努力进行分离包括HTML和CSS。实际上HTML5规范已经不支持旧版本HTML的大部分表现功能。
1.4.6、简化
HTML5要的就是简单避免不必要的复杂性。HTML5的口号是简单至上尽可能简化。因此HTML5做了以下改进。
以浏览器原生能力替代复杂的JavaScript代码。简化的DOCTYPE。简化的字符集声明。简单而强大的HTML5 API。
1.4.7、通用性
通用访问的原则可以分成三个概念。
可访问性出于对残障用户的考虑HTML5与WAIWeb可访问性倡议和ARIA可访问的富Internet应用做到了紧密结合WAI-ARIA中以屏幕阅读器为基础的元素已经被添加到HTML中。媒体中立如果可能的话HTML5的功能在所有不同的设备和平台上应该都能正常运行。支持所有语种如新的元素支持在东亚页面排版中会用到的Ruby注释。
1.4.8、无插件
在传统Web应用中很多功能只能通过插件或者复杂的hack实现但在HTML5中提供了对这些功能的原生支持。插件的方式存在以下问题。
插件安装可能失败。插件可以被禁用或屏蔽如Flash插件。插件自身会成为被攻击的对象。因为插件边界、剪裁和透明度的问题插件不容易与HTML文档的其他部分集成。
以HTML5中的canvas元素为例有很多非常底层的操作以前是没办法做到的如在HTML4的页面中就很难画出对角线而有了canvas就可以很轻易地实现了。基于HTML5的各类API的优秀设计可以轻松地对它们进行组合应用。例如从video元素中抓取的帧可以显示在canvas里面用户单击canvas即可播放这帧对应的视频文件。
最后用万维网联盟创始人Tim Berners-Lee的评论来小结“今天我们想做的事情已经不再是通过浏览器观看视频或收听音频或者在一部手机上运行浏览器。我们希望通过不同的设备在任何地方都能够共享照片、网上购物、阅读新闻以及查找信息。虽然大多数用户对HTML5和开放Web平台(Open Web Platform, OWP)并不熟悉但是它们正在不断改进用户体验。”
1.5、浏览器支持
HTML5发展的速度非常快主流浏览器对于HTML5各API的支持也不尽统一用户需要访问https://www.caniuse.com/在首页输入API的名称或关键词了解各浏览器以及各版本对其支持的详细情况如下图所示。在默认主题下绿色表示完全支持紫色表示部分支持红色表示不支持。 如果访问http://html5test.com/可以获取用户当前浏览器和版本对于HTML5规范的所有API支持的详情。另外也可以使用ModernizrJavaScript库进行特性检测它提供了非常先进的HTML5和CSS3检测功能。
2、HTML5设计原则
为了规范HTML5开发的兼容性、实用性和可操作性W3C发布了HTML5设计原则(http://www.w3.org/ TR/html-design-principles/)简单说明如下。
2.1、避免不必要的复杂性
规范可以写得十分复杂但浏览器的实现应该非常简单。把复杂的工作留给浏览器后台去处理用户仅需要输入最简单的字符甚至不需要输入这才是最佳文档规范。因此HTML5首先采用化繁为简的思路进行设计。
**【示例1】**在HTML 4.01中定义文档类型的代码如下 !DOCTYPE html PUBLIC -//W3C/DTD HTML 4.01//EN http://www.w3.org/TR/html4/strict.dtdHTML5简化如下: !DOCTYPE htmlHTML 4.01和XHTML中的DOCTYPE过于冗长连自己都记不住这些内容但在HTML5中只需要简单的就可以了。DOCTYPE是给验证器用的而非给浏览器浏览器只需在DOCTYPE切换时关注这个标签因此并不需要写得太复杂。
**【示例2】**在HTML 4.01中定义字符编码的代码如下 meta http-equivContent-Type contenttext/html; charsetutf-8在XHTML 1.0中还需要再次声明XML标签并在其中指定字符编码 ?xml version1.0 encodingutf-8 ?meta http-equivContent-Type contenttext/html; charsetutf-8 /HTML5简化如下 meta charsetutf-8关于省略不必要的复杂性或者说避免不必要的复杂性的例子还有不少但关键是既能避免不必要的复杂性又不会妨碍在现有浏览器中使用。
在HTML5中如果使用link元素链接到一个样式表先定义rel“stylesheet”然后再定义type“text/css”这样就重复了。对浏览器而言只要设置relstylesheet就够了因为它可以猜出要链接的是一个CSS样式表不必再指定type属性。
对Web开发而言大家都使用JavaScript脚本语言也就是默认的通用语言用户可以为script元素定义typetext/javascript属性也可以什么都不写浏览器自然会假设在使用JavaScript。
2.2、支持已有内容
XHTML 2.0最大的问题就是不支持已经存在的内容这违反了Postel法则即对自己发送的内容要严格对接收的内容则要宽容。现实中开发者可以写出各种风格的HTML浏览器遇到这些代码时在内部所构建的结构应该是一样的呈现的效果也应该是一样的。
**【示例】**下面代码展示了编写同样内容的4种不同写法4种写法唯一的不同点就是语法。 !--写法1--img srcfoo altbar /p classfooHello world/p!--写法2--img srcfoo altbarp classfooHello world!--写法3--IMG SRCfoo ALTbarP CLASSfooHello world/P!--写法4--img srcfoo altbarp classfooHello world/p从浏览器解析的角度分析这些写法实际上都是一样的。HTML5必须支持已经存在的约定以适应不同的用户习惯而不是要求用户适应浏览器的严格解析标准。
2.3、解决实际问题
规范应该解决现实中实际遇到的问题而不应该考虑复杂的理论问题。
**【示例】**既然有在a中嵌套多个段落标签的需要那就让规范支持它。
如果块内容包含一个标题、一个段落按HTML4规范必须至少使用2个链接。例如 h2a href#标题文本/a/h2pa href#段落文本/a/p在HTML5中只需要把所有内容都包裹在一个链接中。例如 a href#h2标题文本/h2p段落文本/p/a其实这种写法早已经存在当然以前这样写是不合乎规范的。HTML5解决现实的问题其本质还是纠正因循守旧的规范标准现在把标准改了允许用户这样写。
2.4、根据用户使用习惯设计规范
当一个实践已经被广泛接受时就应该考虑将它吸纳进来而不是禁止它或搞一个新的实践。例如HTML5新增了nav、section、article、aside等标签引入了新的文档模型即文档中的文档。在section中还可以嵌套h1h6的标签这样就有了无限的标题层级这也是很早之前Tim Berners-Lee所设想的。
**【示例】**下面几行代码都是频繁使用过的ID名称。 div idheader.../divdiv idnavigation.../divdiv idmain.../divdiv idaside.../divdiv idfooter.../div在HTML5中可以用新的元素代替它们。 header.../headernav.../navdiv idmain.../divaside.../asidefooter.../footer实际上这并不是HTML5工作组发明的也不是W3C开会研究出来的而是谷歌根据大数据分析用户习惯总结出来的。
2.5、优雅的降级
渐进增强的另一面就是优雅地回退。最典型的例子就是使用type属性增强表单。
**【示例1】**下面代码列出了可以为type属性指定的新值如number、search、range等。 input typenumber /input typesearch /input typerange /input typeemail /input typedate /input typeurl /最关键的问题在于当浏览器看到新type值时会如何处理。旧版本浏览器是无法解析新type值的但是当它们看到不理解的type值时会将type的值解析为text。
**【示例2】**对于新的video元素它设计得很简单且实用。针对不支持video元素的浏览器可以这样写 video srcmovie.mp4!-- 回退内容 --/video这样HTML5视频与Flash视频就可以协同起来用户就不用纠结如何进行选择了。 video srcmovie.mp4object datamovie.swf!-- 回退内容 --/object/video这样HTML5视频与Flash视频就可以协同起来用户就不用纠结如何进行选择了。 video srcmovie.mp4object datamovie.swf!-- 回退内容 --/object/video如果愿意的话还可以使用source元素而非用src属性来指定不同的视频格式。 videosource srcmovie.mp4source srcmovie.ogvobject datamovie.swfa hrefmovie.mp4download/a/object/video上面代码包含以下4个不同的层次
如果浏览器支持video元素也支持H264那么用第一个视频。如果浏览器支持video元素也支持Ogg那么用第二个视频。如果浏览器不支持video元素那么就要试试Flash视频。如果浏览器不支持video元素也不支持Flash视频那么可以给出下载链接。
总之无论是HTML5还是Flash一个也不能少。如果只使用video元素提供视频难免会遇到问题如果只提供Flash影片性质是一样的。所以还是应该两者兼顾。
2.6、支持优先级
用户与开发者的重要性要远远高于规范和理论。在考虑优先级时应该按照下面的顺序 用户 编写HTML的开发者 浏览器厂商 规范制定者 理论
这个设计原则本质上是一种解决冲突的机制。例如当面临一个要解决的问题时如果W3C给出了一种解决方案而WHATWG给出了另一种解决方案。一旦遇到冲突第一是最终用户第二是编写HTML的开发者第三是浏览器厂商第四是规范制定者第五才是理论上的完美。
根据最终用户优先原理开发人员在链条中的位置高于实现者。假如我们发现规范中的某些地方有问题不支持实现这个特性那么就等于把相应的特性给否定了其在规范里就得删除因为用户有更高的权重。在本质上用户拥有更大的发言权开发人员也拥有更多的主动性。
3、HTML5语法特性
HTML5以HTML4为基础对HTML 4进行了全面的升级改造。与HTML4相比HTML5在语法上有很大的变化具体说明如下。
3.1、文档和标记
3.1.1、内容类型
HTML5的文件扩展名和内容类型保持不变。例如扩展名仍然为“.html”或“.htm”内容类型(ContentType)仍然为“text/html”。
3.1.2、文档类型
在HTML4中文档类型的声明方法如下 !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd在HTML5中文档类型的声明方法如下 !DOCTYPE html当使用工具时也可以在DOCTYPE声明中加入SYSTEM识别符声明方法如下 !DOCTYPE HTML SYSTEM about:legacy-compat在HTML5中DOCTYPE的声明方式是不区分大小写的引号也不区分是单引号还是双引号。
注意使用HTML5的DOCTYPE会触发浏览器以标准模式显示页面。众所周知网页都有多种显示模式如怪异模式(Quirks)、标准模式(Standards)。浏览器根据DOCTYPE识别应该使用哪种解析模式。
3.1.3、字符编码
在HTML4中使用meta元素定义文档的字符编码如下所示 meta http-equivContent-Type contenttext/html;charsetUTF-8在HTML5中继续沿用meta元素定义文档的字符编码但是简化了charset属性的写法如下所示 meta charsetUTF-8对于HTML5来说上述两种方法都有效用户可以继续使用前面一种方式即通过content元素的属性指定。但是不能同时混用两种方式。
**注意**在传统网页中下面标记是合法的。在HTML 5中这种字符编码方式将被认为是错误的。
meta charsetUTF-8 http-equivContent-Type contenttext/html;charsetUTF-8从HTML5开始对于文件的字符编码推荐使用UTF-8。
3.2、宽松的约定
HTML5语法是为了保证与HTML4语法达到最大程度的兼容而设计的。
3.2.1、标记省略
在HTML5中元素的标记可以分为三种类型不允许写结束标记、可以省略结束标记、开始标记和结束标记可以全部省略。下面简单介绍这三种类型各包括哪些HTML5元素。
(1)不允许写结束标记的元素有area、base、br、col、command、embed、hr、img、input、keygen、link、meta、param、source、track、wbr。
(2)可以省略结束标记的元素有li、dt、dd、p、rt、rp、optgroup、option、colgroup、thead、tbody、tfoot、tr、td、th。
(3)开始标记和结束标记可以全部省略的元素有html、head、body、colgroup、tbody。
**提示**不允许写结束标记的元素是指不允许使用开始标记与结束标记将元素括起来的形式只允许使用元素/的形式进行书写。 例如 错误的书写方式如下
br/br正确的书写方式如下
/brHTML5之前的版本中这种写法可以继续沿用。
开始标记和结束标记可以全部省略的元素是指元素可以完全被省略。注意该元素还是会以隐式的方式存在的。例如将body元素省略时它在文档结构中还是存在的可以使用document.body进行访问。
3.2.2、布尔值
对于布尔型属性如disabled与readonly等当只写属性而不指定属性值时表示属性值为true如果属性值为false可以不使用该属性。另外要想将属性值设定为true可以将属性名设定为属性值或将空字符串设定为属性值。
【示例1】下面是几种正确的书写方法 !--只写属性不写属性值代表属性为true--input typecheckbox checked!--不写属性代表属性为false--input typecheckbox!--属性值属性名代表属性为true--input typecheckbox checkedchecked!--属性值空字符串代表属性为true--input typecheckbox checked3.2.3、属性值
属性值可以加双引号也可以加单引号。HTML5在此基础上做了一些改进当属性值不包括空字符串、、、、单引号、双引号等字符时属性值两边的引号可以省略。
**【示例2】**下面的写法都是合法的。 input typetextinput typetextinput typetext4、HTML5基本结构
4.1、新建HTML5文档
完整的HTML5文档结构一般包括两部分头部消息(head)和主体信息(body)。
在head和/head标签之间的内容表示网页文档的头部消息。在头部代码中有一部分是浏览者可见的如title和/title之间的文本也称为网页标题会显示在浏览器标签页中但是大部分内容是不可见的是专门为浏览器解析网页服务的如网页字符编码、各种元信息等。
在body和/body标签之间的内容表示网页文档的主体信息。它包括三部分。
文本内容在页面上让访问者了解页面信息的纯文字如关于产品、资讯的内容以及其他任何内容。外部引用用来加载图像、音视频文件以及CSS样式表文件、JavaScript脚本文件等还可以指向其他HTML页面或资源。标签对文本内容进行分类标记以确保浏览器能够正确显示。
**【示例1】**使用记事本或者其他类型的文本编辑器新建文本文件保存为index.html。注意扩展名为.html而不是.txt。
输入下面的代码由于网页没有包含任何信息在浏览器中显示为空如下图所示
!DOCTYPE html
html langen
head
meta charsetutf-8 /
title网页标题/title
/head
body
/body
/html由于网页内容都由文本构成因此网页可以保存为纯文本格式可以在任何平台使用任何编辑器查看源代码这个特性也确保了用户能够很容易地创建HTML页面。
提示如果使用专业网页编辑器如VSCode等在新建网页文件时会自动构建基本的网页结构。
本帖所称HTML泛指HTML语言本身。如果需要强调某个版本的特殊性则使用它们各自的名称。例如HTML5引入了一些新的元素并重新定义或删除了HTML 4和XHTML 1.0中的某些元素。
**【示例2】**在示例1基础上为页面添加内容代码如下 !DOCTYPE htmlhtml langenheadmeta charsetutf-8 /titleHTML5示例/title/headbodyarticleh1第一个HTML5网页/h1img srcimages/html5.jpg width200 althtml5图标 /p我是em小白/em, 现在准备学习a hrefhttps://www.w3.org/TR/html5/ relexternal titleHTML5参考手册
HTML5/a/p/article/body/html示例2演示了6种最常用的标签a、article、em、h1、img和p。每个标签都表示不同的语义例如h1定义标题a定义链接img定义图像。
**注意**在代码中行与行之间通过回车符分开不过它不会影响页面的呈现效果。对HTML进行代码缩进显示与在浏览器中的显示效果没有任何关系但是pre元素是一个例外。习惯上我们会对嵌套结构的代码进行缩进排版这样更容易看出元素之间的层级关系。
4.2、标签
一个标签由3部分组成元素、属性和值。
4.2.1、元素
元素表示标签的名称。大多数标签由开始标签和结束标签配对使用。习惯上标签名称采用小写形式HTML5对此未做强制要求也可以使用大写字母。除非特殊需要否则不推荐使用大写字母。例如
em小白/em开始标签em被标记的文本小白结束标签/em
还有一些标签不包含文本仅有开始标签称为孤标签。例如
img srcimages/xiaobai.jpg width50 alt小白者我也 /在HTML5中孤标签名称结尾处的空格和斜杠是可选的。不过“”是必需的。
元素包含父元素和子元素。
如果一个元素包含另一个元素它就是被包含元素的父元素被包含元素称为子元素。子元素中包含的任何元素都是外层父元素的后代。这种类似家谱结构的HTML代码的结构特性有助于在元素上添加样式和应用JavaScript行为。
当元素中包含其他元素时每个元素都必须嵌套正确也就是子元素必须完全包含在父元素中不能把子元素的结束标签放在外面。例如 articleh1小白自语/h1img srcimages/xiaobai.jpg width50 alt小白者我也 /p我是em小白/em, 现在准备学习a hrefhttps://www.w3.org/TR/html5/ relexternal titleHTML5参考手册
HTML5/a/p/article4.2.2、属性和值
属性用来设置标签的特性。在HTML5中属性的值可以不加引号习惯上建议添加同时尽量使用小写形式。例如 label foremail电子邮箱/label一个标签可以设置多个属性每个属性都有各自的值。属性的顺序并不重要。不同的属性之间用空格隔开。例如
a hrefhttps://www.w3.org/TR/html5/ relexternal titleHTML5参考手册HTML5/a有的属性可以接收任何值有的属性则有限制。最常见的是仅接收预定义值即枚举值的属性。此时用户必须从一个标准列表中选一个值枚举值一般用小写字母编写。例如
link relstylesheet mediascreen hrefstyle.css /用户只能将link元素的media属性设为all、screen、print等值中的一个不能像href属性和title属性可以输入任意值。
有很多属性的值需要设置为数字特别是描述大小和长度的属性。数字值不需要包含单位只需输入数字本身。图像和视频的宽度和高度是有单位的默认为像素。
有的属性如href和src用于引用其他文件它们只能包含URL形式的字符串。
有一种特殊的属性称为布尔属性这种属性的值是可选的只要这种属性出现就表示其值为真。布尔属性是预定义好的无法自创。例如
input typeemail nameemailaddr required /上面代码提供了一个让用户输入电子邮件地址的输入框。布尔属性required表示用户必须填写该输入框。布尔属性不需要属性值如果一定要加上属性值则可以编写为required“required”。
4.2.3、文本内容
网页中显示的文本内容就是元素中包含的文本它是网页最基本的构成成分。在HTML早期的版本中只能使用ASCII字符。
ASCII字符仅包括英语字母、数字和少数几个常用符号。开发人员必须用特殊的字符引用创建很多日常符号。例如nbsp;表示空格copy;表示版权符号©reg;表示注册商标符号®等。完整列表请访问http://www.elizabethcastro.com/html/extras/entities.html。
**注意**浏览器在呈现HTML页面时会把文本内容中的多个空格或制表符压缩成单个空格把回车符和换行符转换成单个空格或者忽略。字符引用也替换成对应的符号如把copy;显示为©。
Unicode字符集极大地缓解了特殊字符的显示问题。使用UTF-8对页面进行编码并用同样的编码保存HTML文件已成为一种标准做法。推荐在网页中将charset值指定为UTF-8。HTML5不区分大小写UTF-8和utf-8的编码结果是一样的。
4.2.3、超文本内容
在网页中除了大量的文本内容外还有很多非文本内容如链接、图像、视频、音乐等。从网页外引用图像和其他非文本内容时浏览器会将这些内容与文本一起显示。在默认情况下链接文本的颜色与其他文本的颜色不一样而且带有下画线。 articleh1小白自语/h1img srcimages/xiaobai.jpg width50 alt小白者我也 /p我是em小白/em, 现在准备学习a hrefhttps://www.w3.org/TR/html5/ relexternal titleHTML5参考手册
HTML5/a/p/article在基本HTML文档中有一个对图像文件xiaobai.jpg的引用img标签的src属性浏览器在加载页面其他部分的同时会请求、加载和显示这个图像该页面包括一个指向HTML5参考页面的链接a标签的href属性。
浏览器可以处理链接和图像不过无法处理其他任何文件类型。例如对于一般浏览器来说要查看PDF格式的外部文件就需要在系统中预先安装Adobe Reader软件要查看电子表格就需要预先安装Open Office等软件。早期HTML没有内置的方法播放视频和音频文件各软件厂商都开发出相应的播放软件用户可以下载并安装这些软件从而弥补浏览器缺失的功能。这样的软件称为插件。
在浏览器插件中使用最广泛的是Flash插件。多年以来Flash插件是网页视频必备的工具。不过这个插件也有一些问题如它会耗费较多的计算资源。HTML5新增了audio和video元素这样无须使用插件就可以播放音频和视频。新的浏览器提供了内置的媒体播放器用户仍然可以使用Flash播放器作为旧浏览器的备用工具。
5、代码示例
5.1、编写简洁的HTML5文档
示例将遵循HTML5语法规范编写一个文档。本例文档省略了html、head、body等标签使用HTML5的DOCTYPE声明文档类型简化meta的charset属性设置省略p标签的结束标记使用元素/的方式结束meta和br标签等。 !DOCTYPE htmlmeta charsetUTF-8titleHTML5基本语法/titleh1HTML5的目标/h1pHTML 5的目标是为了能够创建更简单的Web程序书写出更简洁的HTML代码。br/例如为了使Web应用程序的开发变得更容易提供了很多API为了使HTML变得更简洁开发出了新的属性、
新的元素等。总体来说为下一代Web平台提供了许许多多新的功能。效果如下 过短短几行代码就完成一个页面的设计这充分说明HTML5语法的简洁同时也说明HTML5不是一种XML语言其语法也很随意。下面从这两方面进行逐句分析。
第一行代码如下
!DOCTYPE HTML不需要版本号仅告诉浏览器需要一个doctype触发标准模式可谓简明扼要。
接下来说明文档的字符编码否则将出现浏览器不能正确解析的情况: meta charsetutf-8HTML5不区分大小写不需要标记结束符不介意属性值是否加引号即下列代码是等效的。 meta charsetutf-8META charsetutf-8 /META charsetutf-8在主体中可以省略主体标记直接编写需要显示的内容。虽然在编写代码时省略了html、head和body标记但在浏览器进行解析时将会自动进行添加。考虑到代码的可维护性在编写代码时应该尽量增加基本结构标签。
5.2、比较HTML4与HTML5文档结构
下面通过示例具体说明HTML 5是如何使用全新的结构化标签编织网页的。
**【示例1】**本例设计将页面分成上、中、下三部分上面显示网站标题中间分两部分左侧为辅助栏右侧显示网页正文内容下面显示版权信息如下图所示。使用HTML4构建文档基本结构如下 div idheader[标题栏]/divdiv idaside[侧边栏]/divdiv idarticle[正文内容]/divdiv idfooter[页脚栏]/div尽管上述代码不存在任何语法错误也可以在HTML5中很好地解析但该页面结构对于浏览器来说不具有区分度。对于不同的用户来说ID命名可能因人而异但对浏览器来说就无法辨别每个div元素在页面中的作用必然影响其对页面的语义解析。
**【示例2】**下面使用HTML5新增元素重新构建页面结构明确定义每部分在页面中的作用。 header[标题栏]/headeraside[侧边栏]/asidearticle[正文内容]/articlefooter[页脚栏]/footer虽然示例1和示例2的两段代码不一样但比较这两段代码可以发现使用HTML5新增元素创建的页面代码更简洁、明晰。通过比较可以很容易地看出HTML4使用div idheader、div idaside、div idarticle和div idfooter标记元素没有任何语义浏览器不能根据标记的ID名称推断它的作用因为ID名称是随意变化的。而HTML5新增元素header明确地告诉浏览器此处是页头aside元素用于构建页面辅助栏目article元素用于构建页面正文内容footer元素定义页脚注释内容这样极大地提高了开发者的便利性和浏览器的解析效率。
