解读 HTML5Word格式文档下载.docx
- 文档编号:17090445
- 上传时间:2022-11-28
- 格式:DOCX
- 页数:27
- 大小:494.79KB
解读 HTML5Word格式文档下载.docx
《解读 HTML5Word格式文档下载.docx》由会员分享,可在线阅读,更多相关《解读 HTML5Word格式文档下载.docx(27页珍藏版)》请在冰豆网上搜索。
∙简洁的DOCTYPE
HTML5只需一个简洁的文档类型:
<
!
DOCTYPEhtml>
。
它有意不使用版本,因此文档将会适用所有版本的HTML。
∙简单易记的语言标签
你并不需要在<
html>
中使用xmlns或xml:
lang标记。
<
htmllang="
en"
>
将对HTML5有效。
∙简单易记的编码类型
你现在可以在meta标签中使用"
charset"
:
metacharset="
utf-8″/>
∙不需要闭合标签
在HTML5中,空标签(如:
br、img和input)并不需要闭合标签。
∙废弃的标签
下面这些标签并不被HTML5支持:
acronym>
、<
applet>
basefont>
big>
center>
dir>
font>
frame>
frameset>
noframes>
s>
strike>
tt>
u>
和<
xmp>
简单代码示例:
doctypehtml>
head>
utf-8"
/>
title>
HTML5Document<
/title>
/head>
body>
/body>
/html>
你可以使用HTML5Validator
或
W3CMarkupValidationService
来测试你的HTML5文档。
语义化标记
HTML5新增的一些新标签除了不仅仅是更具语义的<
div>
标签的替代品,并不提供额外的功能。
这些都是新增的标签:
article>
section>
aside>
hgroup>
header>
<
footer>
nav>
time>
mark>
figure>
和
figcaption>
这些标签被除了IE外的所有现代浏览器(Firefox3+、Safari3.1+、Chrome2+、andOpera9.6+)支持。
Javascript提供了document.createElement(tagName)的方法,让你可以用来创建新的HTML5标签。
代替自己创建这些元素,你还可以用HTML5EnablingScript
IEPrintProtector
—这些脚本将帮助IE正常处理HTML5元素的渲染。
你可能会想到添加CSSReset到这些新元素上。
这里是一些可以用在你以HTML5为基础的项目的CSSReset:
∙HTML5ResetCSS
∙Reset5
兼容IE的HTML5页面布局
HTML5SemanticMarkupDemo:
CrossBrowser<
linkrel="
stylesheet"
href="
html5reset.css"
type="
text/css"
html5semanticmarkup.css"
--[ifltIE9]>
scriptsrc="
html5.js"
/script>
[endif]-->
h1>
PageHeader<
/h1>
h2>
PageSubHeading<
/h2>
/hgroup>
/header>
ul>
li>
ahref="
#"
Home<
/a>
/li>
Projects<
Portfolio<
Profile<
Contact<
/ul>
/nav>
ArticleHeading<
timedatetime="
2010-05-05"
pubdate>
May5th,2010<
/time>
p>
Loremipsumdolorsitamet,consecteturadipiscingelit.<
/p>
SectionHeading<
Utsapienenim,porttitoridfeugiatnon,ultricesnonodio.<
SectionFooter:
Pellentesquevolutpat,leonecauctoreuismod<
/footer>
/section>
imgsrc="
item-1.png"
alt="
Club"
item-2.png"
Heart"
item-3.png"
Spade"
item-4.png"
Diamond"
FigCaption:
Club,Heart,SpadeandDiamond<
/figcaption>
/figure>
Utsapienenim,porttitoridfeugiatnon,ultricesnonodio<
Pellentesquevolutpat,leonecauctoreuismodest.<
ArticleFooter
/article>
SiderbarHeading<
/aside>
PageFooter
注意:
没有一个div标签,id或class属性被使用到—简洁、小巧和更语义化的标记(ViewDemo)。
你仍可以用
HTML5Validator
来检测你的HTML5文档。
这个示例在IE6下并未正常显示。
这只是因为我使用CSSchildcombinators来避免使用额外的class。
你可以在IE6下用自己的CSS,像其他浏览器一样处理HTML5标记。
其他资源
∙HTML5的"
articles"
和"
sections"
:
有什么区别?
∙HTML5中的结构标签
∙Figure和caption元素
∙解读HTML5:
∙<
并不仅仅是"
语义化的<
"
∙用jQuery提供HTML5<
details>
的完美折衷方法
∙不用脚本实现IE对HTML5样式控制
表单增强
HTML5为表单提供了几个新的属性、input类型和标签。
到目前为止,只有Opera对HTML5有比较好的支持。
你因此应该下载Opera来查看大部分新特性如何工作。
∙新的INPUT类型
color,
email,
date,
month,
week,
time,
datetime,
datetime-local,
number,range,
search,
tel,和
url
∙新属性
required,
autofocus,
pattern,
list,
autocomplete
placeholder
∙新元素
keygen>
datalist>
output>
meter>
progress>
值得高兴的是尽管支持有限,使用这些特性也是个不错的选择。
因为新的INPUT类型会漂亮地降级为TEXT类INPUT(译注:
INPUT的默认type为text)。
且记住现今你仍可以折衷使用Javascript控制表单(这个技巧是指首先检测浏览器自身支持,然后才是使用折衷方法)。
简单代码示例:
列出一些今天你可以拿来测试的新特性
form>
fieldset>
legend>
NewAttributes<
/legend>
label>
Required:
/label>
inputtype="
text"
name="
html5requied"
required="
true"
small>
WorksinOpera&
Chrome<
/small>
AutoFocus:
html5autofocus"
autofocus="
WorksinOpera,Chrome&
Safari<
PlaceHolder:
html5placeholder"
placeholder="
ThisWillShowinWebKit"
WorksinChrome&
InputPattern:
pattern="
[0-9][A-Z]{3}"
html5pattern"
requiredtitle="
Enteradigitfollowedbythreeuppercaseletters"
/>
MultipleFiles:
file"
html5multiplefileupload"
multiple>
WorksinChrome,Safari&
Firefox<
List:
html5textwithdatalist"
list="
colors"
datalistid="
optionvalue="
Red"
Green"
Blue"
/datalist>
WorksinOpera<
/fieldset>
NewInputTypes<
Email:
email"
html5email"
URL:
url"
html5url"
Number:
number"
html5number"
min="
1"
max="
10"
step="
value="
Range:
range"
html5range"
-100"
100"
0"
Time:
time"
900"
html5time"
Date:
date"
html5date"
Month:
month"
html5month"
Week:
week"
html5week"
DateTime:
datetime"
html5datetime"
button>
Submit<
/button>
/div>
/form>
在我们的DEMO中的出现的特性,都顺利地运行在Opera上,但你仍需要使用Chrome或Safari来看其他小部分功能的实际运行状态(ViewDemo)。
了解更多:
∙疯狂的表单
∙互联网的未来:
如何创建一个HTML5表单
∙HTML5Input类型
∙忙于HTML5表单的一天
∙对HTML5表单的再次思考
∙HTML5表单来吧
工具&
资源列表:
∙利用jQuery和Modernizr实现跨浏览器HTML5Placeholder
∙使用jQueryTool实现跨浏览器Date/Range/Validationns类型INPUT
∙jQueryHTML5文件上传:
异步上传多文件
∙有jQuery插件启动WebForms2.0
∙跨浏览器WebForms2.0
不需要插件的视频和音频
HTML5对视频和音频特性规范文档的制定是被讨论最多的。
除浏览器自带支持的明显好处外,评论点集中在浏览器提供商对音频/视频格式的不同选择。
如果你准备使用HTML5的
audio>
video>
,使你熟悉下面这些视频/音频的解码器和浏览器支持是非常重要的:
∙音频:
ogg(ogg,oga),
mp3,
wav,
AAC
∙视频:
ogg(ogv),
H.264(mp4)
另外你还需要留意一下Google的
VP8
视频解码,这个将被作为一个开源格式来结束(格式选择的)纷争。
HTML5提供的一个解决方案是,让你可以指定多个不同格式的源文件,以便于用户浏览器选择它认识的文件。
对于<
IE9和旧浏览器,你将需要一个折衷的解决方案。
当你第一次尝试HTML5的音频/视频,你可能会想知道这些可能对你有帮助的东东:
∙你的服务器必须支持你打算提供的音频/视频的MIME格式。
你将需要检查一下其在本地服务器上是否被支持。
∙如果你使用Safari来检测HTML5的音频/视频支持,需要安装QuickTimePlayer,没有QuickTimePlayer的Safari什么都不能播放。
音频标记(ViewDemo)
audiocontrols>
sourcesrc="
demo-audio.ogg"
demo-audio.mp3"
/audio>
视频标记(ViewDemo)
videowidth="
320"
height="
240"
controlspreload="
none"
poster="
videoframe.jpg"
demo-video.mp4"
video/mp4"
demo-video.ogv"
video/ogg"
/video>
译注:
记得加上type,不然,即使格式对了,也可能播放不了
尽管相对于要依赖第三方插件已经迈了一大步,但上面提供的示例,只是一个开始。
由于各个浏览都提供了不同外观的控制栏,你可能会希望改变他们以适应你的设计。
看看下面例子如何利用DOMAPI来创造一个属于你自己的自定义控制栏。
拥有自定义控制栏的视频(ViewDemo)
preload="
script>
varvideo=document.getElementsByTagName('
video'
)[0];
functiontoggleMute(){
video.muted=!
video.muted;
}
JavaScript:
video.play();
Play<
|
video.pause();
Pause<
toggleMute();
SoundOn/Off<
你还可以利用DOMAPI来为音频/视频做更多。
而且如果你乐意添加一些其他的东西,将会把这个带向一个完全不同的级别。
例如,你可以把视频放到了HTML5canvas元素中。
这将会允许你读取一个视频的像素数据、控制、和帧,并做一些你想做的好玩的东东。
(自己看看:
BlowingupHTML5Video,
AmbilightforHTML5Video)
了解更多:
∙关于HTML5音频/视频的一切
∙在HTML5页面播放音频/视频
∙浏览器自带HTML5支持
∙网页中的视频(不需要额外支持)
∙HTML5Video.org
∙视频类型的参数
跨浏览器解决方案:
∙SublimeVideo
∙KalturaHTML5MediaLibrary
∙VideoforEverybody
∙jPlayer:
jQueryAudioPlayer
∙Projekktor
∙YUIHTML5Player
∙OIPlayerjQueryPlugin
∙DegradableHTML5audioandvideoPlugin
∙XiphQuickTimeComponenttomakeOggworkinSafari
Javascript交互:
∙处理HTML5视频的Mootools
编码、转换工具:
∙MiroVideoConverter
∙SUPER
∙MiniCoder
∙HandBrake
∙ffmpeg2theora
∙Firefogg
基于JavaScript的2D绘画
HTML5中最让人兴奋的特性是
canvas>
—那个用来作
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 解读 HTML5