解读 HTML5.docx
- 文档编号:4174433
- 上传时间:2022-11-28
- 格式:DOCX
- 页数:27
- 大小:494.79KB
解读 HTML5.docx
《解读 HTML5.docx》由会员分享,可在线阅读,更多相关《解读 HTML5.docx(27页珍藏版)》请在冰豆网上搜索。
解读HTML5
解读HTML5:
建议、技巧和技术
标签:
HTML, html5, 向后兼容
Design
想总结一下HTML5的支持列表,写了许久,无果。
在众多文章中,这篇文章涉及到了我想到的,以及没想到的。
遂做粗略的翻译,因个人英文水平一般,本文FYI。
原文请看:
HTML5Unleashed:
Tips,TricksandTechniques。
=====
现今我们能用HTML5吗,能用它做些什么呢,是否真的是Flash杀手?
想必你也注意到了这些日渐增长且常被问起的类似问题,被讨论着,甚至被回答过。
在我看来,你必须自己回答这些基本的问题。
这篇文章的本意是想帮你通过一些基本指南的学习,以轻松学习代码模板。
一旦你熟悉了这些基本,并想更进一学习,你还将会找到更多提供了建议、技巧和技术的有用资源。
HTML5特性
官方详细的文档是寻找HTML5特性的最好地方,当然你还可以轻松通过W3Schools来学习HTML5标签。
我们将会在文章中涉及到以下的特性:
∙语义化标记
∙Form表单增强功能
∙视频/音频
∙画布(Canvas)
∙可编辑内容
∙拖放
∙稳健的数据存储
检测浏览器支持
在你开始尝试HTML5之前,需要知道各主流浏览器的支持状况。
这些有用的资源,将可以帮助你向着正轨走:
∙何时能用
∙网页设计师的浏览器支持列表
∙HTML5测试
∙布局引擎对比
你还可以运行Javascript(用Javascript检测浏览器特性)来检测HTML5特性的支持。
你还应该用用Modernizr:
一个非常不错的检测HTML5/CSS3本地支持的Javascript库。
如果你选择用Mootools可以使用MooModernizr (MooToolsportofModernizr)。
你可能也会想留意不断变化的"浏览器市场份额分享"—这些信息对于你决定用何种解决或折衷的方法将会是非常必要的。
值得注意的变更点
除了新的特征,你还应该记下这些重要的变更点:
∙简洁的DOCTYPE HTML5只需一个简洁的文档类型:
DOCTYPEhtml>。
它有意不使用版本,因此文档将会适用所有版本的HTML。
∙简单易记的语言标签 你并不需要在中使用xmlns或xml:
lang标记。
∙简单易记的编码类型 你现在可以在meta标签中使用"charset":
∙不需要闭合标签 在HTML5中,空标签(如:
br、img和input)并不需要闭合标签。
∙废弃的标签 下面这些标签并不被HTML5支持:
、
简单代码示例:
doctypehtml>
你可以使用HTML5Validator 或 W3CMarkupValidationService 来测试你的HTML5文档。
语义化标记
HTML5新增的一些新标签除了不仅仅是更具语义的
这些都是新增的标签:
这些标签被除了IE外的所有现代浏览器(Firefox3+、Safari3.1+、Chrome2+、andOpera9.6+)支持。
Javascript提供了document.createElement(tagName)的方法,让你可以用来创建新的HTML5标签。
代替自己创建这些元素,你还可以用HTML5EnablingScript 或 IEPrintProtector —这些脚本将帮助IE正常处理HTML5元素的渲染。
你可能会想到添加CSSReset到这些新元素上。
这里是一些可以用在你以HTML5为基础的项目的CSSReset:
∙HTML5ResetCSS
∙Reset5
简单代码示例:
兼容IE的HTML5页面布局
doctypehtml>
CrossBrowser
--[ifltIE9]>
[endif]-->
PageHeader
PageSubHeading
Home Projects Portfolio Profile Contact
ArticleHeading
Loremipsumdolorsitamet,consecteturadipiscingelit.
SectionHeading
Utsapienenim,porttitoridfeugiatnon,ultricesnonodio.
SectionFooter:
Pellentesquevolutpat,leonecauctoreuismod
SectionHeading
Loremipsumdolorsitamet,consecteturadipiscingelit.
Club,Heart,SpadeandDiamond
Utsapienenim,porttitoridfeugiatnon,ultricesnonodio
SectionFooter:
Pellentesquevolutpat,leonecauctoreuismodest.
ArticleFooter
SiderbarHeading
Utsapienenim,porttitoridfeugiatnon,ultricesnonodio.
PageFooter