html5教程.doc

內容关于 HTML5 你需要注意的事项2html4 和 html5 的十大区别4html5学习：如何添加音频文件6html5学习：如何添加视频文件7html5学习:html5中的标记方法11html5学习:article元素的使用13HTML符号的实体代码集合16HTML 支持的数学符号16HTML 支持的希腊字母18HTML 支持的其他实体21关于 HTML5 你需要注意的事项时间:2011-10-22 来源:开源中国社区 作者:R9传奇 点击:146次 html5的到来将第五代网络语言带入了多媒体的世界。尽管HTML5的启动并没有多轰轰烈烈，但是在过去6 个月还是有不少的软件开发者开始应用HTML5。然而，在选择HTML5时，有一些基本注意事项大家还是需要了解的。 它新并不表示它安全 网络应用开发工程师们在学习新html5的到来将第五代网络语言带入了多媒体的世界。尽管HTML5的启动并没有多轰轰烈烈，但是在过去6个月还是有不少的软件开发者开始应用HTML5。然而，在选择HTML5时，有一些基本注意事项大家还是需要了解的。它新并不表示它安全网络应用开发工程师们在学习新技术的同时需要时刻记住网络安全。HTML5所购建的网页和其他语言编写的网页一样容易泄露一些敏感数据。欧洲网络信息安全 机构（European Network and Information Security Agency，ENISA）已经警告说HTML5可能并不够安全。它可能会消灭Flash但不是现在许多业内人士表示，HTML将会最终代替多媒体框架，如Adobe的Flash，但是短期看来还不是现在。HTML5估计到2014年才能逐步成熟，而且 将现有应用Flash的网络开发完全转向HTML5还需要一段时间。尽管HTML5提出了许多优点，但是还可能有某些应用更适合于更灵活的框架。现在，一 些主流的大公司都逐步转向使用HTML5，但是这个转变的过程也不是一蹴而就的。它将会变得很移动化现在几乎所有人都热衷于开发独立的移动应用，但是HTML5很可能会是独立移动应用的终结者。由于HTML5将应用的功能直接加入其内核，这很可能引导移 动技术潮流重新回到浏览器时代。HTML5允许开发者在（移动）浏览器内开发应用，所以如果你正在制定一项桌面或者移动应用的长期发展策略，你可能需要考 虑这一点。它承诺带来一个无缝的网络HTML5会带来一个统一的网络，无论是笔记本、台式机还是智能手机都应该很方便的浏览基于HTML5的网站。因此在设计网站的时候，开发者需要重新考虑用户体验、网站浏览、网站结构等因素使得这个网站对任何硬件设备都通用。它会变成企业的SaaS平台一些重量级的企业，如微软、Salesforce、SAP Sybase正在开发HTML5的开发工具。如果你正在构建企业应用，很可能不久的将来你就要用到HTML5。所以当构建公司的SaaS战略迁移的时候也不要忘记HTML5。html4 和 html5 的十大区别时间:2011-10-16 来源:R9IT 作者:R9传奇 点击:131次 html5是html标准的下一个版本。越来越多的程序员开始html5来构建网站。如果你同时使用 html4和html5的话 ，你会发现用html5从头构建，比从html4迁移到html5要方便很多。虽然html5没有完全颠覆html4，它们还是有很多相似之处，但是它们 也有一些关键的不同。本html5 是html标准的下一个版本。越来越多的程序员开始html5来构建网站。如果你同时使用html4和html5的话 ，你会发现用html5从头构建，比从html4迁移到html5要方便很多。虽然html5没有完全颠覆html4，它们还是有很多相似之处，但是它们 也有一些关键的不同。本文就列出了它们之间10个关键的不同之处。1. 简化的语法html5简化了很多细微的语法，例如doctype的声明，你只需要写就行了。html5与html5，Xhtml1兼容，但是与SGML不兼容。2. html5 标准还在制定中首先要注意的是，html5虽然现在很火，但是html5标准还在制定中，标准仍在改变。html4已经10多年了，不会有任何改变了。3. 新增 和 标签html5设计的一个原则是更好的体现网站的语义性，所以增加了和这样的标签，用来明确表示网页的结构。4. 标签替代FlashFlash给很多Web开发者带来了麻烦，要在网页上播放Flash需要一堆代码和插件。标签使得开发者只要使用一个标签就 能和用户产生UI交互。虽然目前标签还不能实现Flash的所有功能，但是很快就会让 Flash看起来老土，哈哈！5. 新增 和 标签与, 类似，和也有利于清晰化网页的结构，更有利于SEO。6. 新增 和 标签可以被用于创建传统的菜单，也可以用于工具栏和上下文菜单。标签使得网页文字和图片的排版更专业。7. 全新的表单html5对 和 标签进行了大量修改，添加了很多新的属性，也修改了很多属性。8. 新增 和 标签这两个标签可能是html5里面最有用的两个标签了。顾名思义，这两个标签是用来播放音频和视频的。9. 删除 和 标签这个改进我还无法理解。我不认为删除这两个标签对代码的改进有很大的帮助。官方的解释是应该用CSS来替代这两个标签。但我还是觉得对于简单的文本，这两个标签还是很方便的。10. 删除 , , 标签我已经记不得上次是什么时候使用这些标签了。以上十点只是html5和html4差别的很小一部分，最新最全的html5-html4对比信息请看/html5/html4-differences/html5学习：如何添加音频文件时间:2011-10-19 来源:R9IT 作者:R9传奇 点击:124次 Html5是通过audio元素来添加音频文件的。它可以播放声音文件和音频流。 目前hmtl5的audio元素支持三种音频格式： IE 9 Firefox 3.5 Opera 10.5 Chrome 3.0 Safari 3.0 Ogg Vorbis MP3 Wav 接下来我们大概说下它的属性含义，因为他和video的属性用法基本相同html5是通过audio元素来添加音频文件的。它可以播放声音文件和音频流。目前html5的audio元素支持三种音频格式：IE 9Firefox 3.5Opera 10.5Chrome 3.0Safari 3.0Ogg VorbisMP3Wav接下来我们大概说下它的属性含义，因为他和video的属性用法基本相同，你学会了video，那么audio也就没什么了。属性值描述autoplayautoplay如果出现该属性，则音频在就绪后马上播放。controlscontrols如果出现该属性，则向用户显示控件，比如播放按钮。looploop如果出现该属性，则每当音频结束时重新开始播放。preloadpreload如果出现该属性，则音频在页面加载时进行加载，并预备播放。如果使用autoplay，则忽略该属性。srcurl要播放的音频的URL。具体用法可以参照video的用法。 地址：/wzkf/html/html/259.htmlhtml5学习：如何添加视频文件时间:2011-10-19 来源:R9IT 作者:R9传奇 点击:114次 以前在网页中添加视频大部分都是用flash来完成，现在不用了，htm l5规定了一种通过video元素来包含视频的标准方法。 目前hmtl5的video元素支持三种格式： 格式 IE Firefox Opera Chrome Safari Ogg No 3.5+ 10.5+ 5.0+ No MPEG 4 9.0+ No No 5.0+ 3.0+ WebM以前在网页中添加视频大部分都是用flash来完成，现在不用了，html5规定了一种通过video元素来包含视频的标准方法。目前html5的video元素支持三种格式：格式IEFirefoxOperaChromeSafariOggNo3.5+10.5+5.0+NoMPEG 49.0+NoNo5.0+3.0+WebMNo4.0+10.6+6.0+No以上三种格式我就不多说了。下面我们来举个简单的例子说明下他的属性应用：1:src属性src 属性规定要播放的视频的URL。Src属性也可以用source标签代替，如果要添加多个视频时建议用source标签来代替，在我们为了兼容不同的游览器，所以添加同一个视频时需要添加不同格式的视频，这里就可以使用source标签。例如： Your browser does not support the video tag.浏览器将使用第一个可识别的格式视频来加载视频。代码中Your browser does not support the video tag.这句话是供不支持video 元素的浏览器显示的。下面是source标签的属性图：属性值描述mediamedia query定义媒介资源的类型，供浏览器决定是否下载。srcurl媒介的URL。typenumeric value定义播放器在音频流中的什么位置开始播放。默认，音频从开头播放。2 :Controls属性这是个最基本的例子，src属性为视频源，controls属性是添加播放，暂定和音量控制等的控件。下图为无controls属性的效果：下图为有controls属性的效果：就是在最下面多了一个视频播放控制的控件。:3:height 和width 属性height 和width 属性分别指定了视频的高和宽。规定视频的高度和宽度是一个好习惯。如果设置这些属性，在页面加载时会为视频预留出空间。如果没有设置这些属性，那么浏览器 就无法预先确定视频的尺寸，这样就无法为视频保留合适的空间。结果是，在页面加载的过程中，其布局也会产生变化。4:autoplay 属性autoplay 属性表示如果视频一旦加载完成，将自动播放。而不需要点击开始按钮。5：loop 属性loop 属性是设置视频循环播放6：preload 属性preload 属性规定是否在页面加载后载入视频。如果设置了autoplay 属性，则忽略该属性。preload 属性可以设置的值有： auto - 当页面加载后载入整个视频 meta - 当页面加载后只载入元数据 none - 当页面加载后不载入视频html5学习:html5中的标记方法时间:2011-10-19 来源:R9IT 作者:R9传奇 点击:141次 让我们来看下在html5中的标记方法： 一：内容类型(ContentType) 首先，html5的文件扩展符与内容类型保持不变。也就是说，扩展符仍然是.html或者htm，内容类型(ContentType)仍然为 text/html。 二：DOCTYPE声明 DOCTYPE声明是html文件中必不可或缺的，它位于文让我们来看下在html5中的标记方法：一：内容类型(ContentType) 首先，html5的文件扩展符与内容类型保持不变。也就是说，扩展符仍然是.html或者htm，内容类型(ContentType)仍然为text/html。二：DOCTYPE声明DOCTYPE声明是html文件中必不可或缺的，它位于文件的第一行，在html4中，它的声明方法如下：在html5中，刻意不使用版本声明，一份文档将会适用于所有版本的html。html5中的DOCTYPE声明方法(不区分大小写)如下：另外，当使用工具时，也可以在DOCTYPE声明方式中加入SYSTEM识别符，声明方法如下面的代码所示：在HTML5中像这样的DOCTYPE声明方式是允许的(不区分大小写，引号不区分是单引号还是双引号)。三：指定字符编码在html4中，使用meta元素的形式指定文件中的字符编码，如下所示：在html5中，可以使用对元素直接追加charset属性的方式来指定字符编码，如下所示：两种方法都有效，可以继续使用前面一种方式(通过content元素的属性来指定)，但是不能同时混合使用两种方式。在以前的网站代码中可能会存在下面代码所示的标记方式，但是在html5中，这种字符编码方式将被认为是错误的，这一点请注意：注：从html5开始，对于文件的字符编码推荐使用UTF-8。html5学习:article元素的使用时间:2011-10-20 来源:R9IT 作者:R9传奇 点击:137次 article元素代表文档，页面或应用程序中独立的，完整的，可以独自被外部引用的内容。它可以是一篇博客或者报刊中的文章，一篇论坛的帖子，一段用户评论或者独立的插件，或者其他任何独立的内容。 除了内容，一个article元素通常有它自己的标题(一般放在一个h article元素代表文档，页面或应用程序中独立的，完整的，可以独自被外部引用的内容。它可以是一篇博客或者报刊中的文章，一篇论坛的帖子，一段用户评论或者独立的插件，或者其他任何独立的内容。 除了内容，一个article元素通常有它自己的标题(一般放在一个header元素里面)，有时还有自己的脚注。 现在，让我们以博客为例来看一段关于article元素的代码示例，如代码清单3-1所示。代码清单3-1 article元素示例 皇马 发表日期：2011/10/20 皇马，超级俱乐部.（皇马文章正文） 著作版权归it技术所有。 这个示例是一篇讲述皇马的博客文章，在header元素中嵌入了文章的标题部分，在这部分中，文章的标题皇马被嵌入在h1元素中，文章的发表日期嵌入 在p元素中。在标题下部得p元素中，嵌入了一大段该博文的文章正文，在结尾处的footer元素中，嵌入了文章的著作权，作为脚注。整个示例的内容相对比 较独立，完整。因此，对这部分内容使用了article元素。 article元素是可以嵌套使用的，内层的内容在原则上需要与外层的内容相关联。例如：一篇博客文章中，针对该文章的评论就可以使用嵌套article元素的方式。用来呈现评论的article元素被包含在表示整体内容的article元素里面。 接着，让我们来看下关于一个article元素嵌套的代码示例，如代码清单3-2所示。代码清单3-2 article元素嵌套示例 皇马 发表日期：2011/10/20 皇马，超级俱乐部.（皇马文章正文） it技术 发表者：ronaldo 1小时 我最喜欢足球，我最爱的球星是ronaldo 发表者：rual 1小时 我最喜欢足球，我最爱的球星是rual 这个示例中的内容比代码清单3-1的内容更加完整了，它添加了文章读者的评论内容，示例的整体内容还是比较独立，完整的。因此对其使用article元 素。具体来说，示例内容又分为几部分，文章标题放在header元素中，文章正文放在了header元素后面的p元素中，然后section元素把正文与 评论部分进行了区分,在section元素中嵌入了评论的内容，评论中每一个人的评论相对来说是独立，完整的。因此对它们都使用一个article元素， 在评论article元素中，又可以分为标题和评论内容部分，分别放在header元素和p元素中。HTML符号的实体代码集合时间:2011-09-30 来源: 作者:real 点击:4次 HTML 支持的数学符号 结果 描述 实体名称 实体编号 for all forall; #8704; part part; #8706; exists exists; #8707; empty empty; #8709; nabla nabla; #8711; isin isin; #8712; notin notin; #8713; ni ni; #8715; prod prod; #8719; sum sum; #8721; miHTML 支持的数学符号结果描述实体名称实体编号for all∀part∂exists&exists;empty∅nabla∇isin∈notin∉ni∋prod∏sum∑minus−lowast∗square root√proportional to∝infinity∞angle∠and∧or∨cap∩cup∪integral∫therefore∴simular to∼approximately equal≅almost equal≈not equal≠equivalent≡less or equal≤greater or equal≥subset of⊂superset of⊃not subset of⊄subset or equal⊆superset or equal⊇circled plus⊕cirled times⊗perpendicular⊥dot operator⋅HTML 支持的希腊字母结果描述实体名称实体编号AlphaΑBetaΒGammaΓDeltaΔEpsilonΕZetaΖEtaΗThetaΘIotaΙKappaΚLambdaΛMuΜNuΝXiΞOmicronΟPiΠRhoΡSigmafundefinedSigmaΣTauΤUpsilonΥPhiΦChiΧPsiΨOmegaΩalphaαbetaβgammaγdeltaδepsilonεzetaζetaηthetaθiotaιkappaκlambdaλmuμnuνxiξomicronοpiπrhoρsigmafςsigmaσtauτupsilonυphiφchiχpsiψomegaωtheta symbolϑupsilon symbolϒpi symbolϖHTML 支持的其他实体结果描述实体名称实体编号capital ligature OEŒsmall ligature oeœcapital S with caronŠsmall S with caronšcapital Y with diaeresŸf with hookƒmodifier letter circumflex acc