书签 分享 收藏 举报 版权申诉 / 15
立即下载 加入VIP,免费下载
当前位置： 首页 > 医药卫生 > 基础医学 > HTML5特征窍门和技术.docx

类型HTML5特征窍门和技术.docx

  • 文档编号：6649100
  • 上传时间：2023-01-08
  • 格式：DOCX
  • 页数：15
  • 大小：86.20KB

...

div嘛，很自然的，没有语义化的结构——即使在应用了id后。

现在，通过HTML5，我们可以使用

和
元素。

以上的代码可以替换成：

...

...

它完全适合您有多个页眉和页脚的项目。

尽量不要混淆”header”和”footer”这些元素。

他们只是指他们的容器。

因此，将博客底部的，例如，元信息放在footer元素内部是说得通的。

这同样也适用于header。

十一、更多HTML5表单特征（MoreHTML5FormFeatures）

通过下面视频学习更多有用的HTML5表单特征：

//zxx:

TouTuBe视频，需要***

SubscribetoourYouTubepagetowatchallofthevideotutorials!

十二、IE和HTML5（InternetExplorerandHTML5）

不幸的是，讨厌的IE浏览器需要动点小手术才能理解新的HTML5元素。

所有元素，默认的，都有个inline的display

为了确保所有新的HTML5元素能以block水平的元素正确地渲染，有必要对其做如下定义：

header,footer,article,section,nav,menu,hgroup{

display:

block;

}

不幸的是，IE仍旧忽略这些样式，因为它不知道这些标签从哪里来的，好比是header元素。

幸运的是，有一个简单的解决办法：

document.createElement（"article"）;

document.createElement（"footer"）;

document.createElement（"header"）;

document.createElement（"hgroup"）;

document.createElement（"nav"）;

document.createElement（"menu"）;

奇怪的是，这段代码似乎触发IE浏览器。

为了更简单将此应用到每个新的应用过程中，雷米夏普（RemySharp）创建了一个脚本，通常称为HTML5shiv。

该脚本同样修复了些显示问题。

--[ifIE]>

[endif]-->

十三、文档某一部分的信息（hgroup）

想象一下，在我的网站的标题，我有我的站点的名称，随后立即由一个副标题。

虽然我们可以使用一个

和

标签，为其分别创造标记，但是依旧没有（因为HTML4）一个简单的方法来语义上说明了两者之间的关系。

此外，一个h2标记的使用提出了更多的问题，在层次结构上，当涉及到其他网页上显示的标题时。

通过使用不影响文档的大纲流hgroup元素，我们可以将这些标题组合在一起。

RecallFanPage

Onlyforpeoplewhowantthememoryofalifetime.

十四、必要的属性（RequiredAttribute）

表单允许新的必要属性，用来指定是否需要特殊的input。

这取决于你的代码偏好，你可以以下面两种方式之一申明此属性。

或者，使用更结构化的方法：

两种方法都行。

有了这个代码，并且浏览器支持此属性，如果“someInput”文本框是空白，则表单不会被提交。

下面是一个简单的例子，我们还将添加占位符属性，因为没有理由不这样做。

姓名:

提交

您可以狠狠地点击这里：

HTML5必要属性Demo

如果input里面内容是空白，则表单提交的时候，文本框会高亮显示。

//zxx:

貌似仅在Chrome浏览器下有点小效果

十五、Autofocus属性

同样，HTML5的解决方案消除了对JavaScript的需要。

如果一个特定的输入应该是“选择”，或有重点的，默认情况下，我们现在可以利用自动获取焦点属性。

有趣的是，虽然我个人更倾向于喜欢XHTML的方法（用引号，等等），写作“autofocus=autofocus”让人感到有点怪。

因此，我们将坚持使用单一关键字的方法。

十六、Audio支持

我们无需再依赖第三方插件区渲染音频。

HTML5提供了

就目前，只有最近期的的浏览器提供HTML5音频支持。

在这个时候，它仍然是一个很好的做法提供一些向后兼容的形式。

Downloadthisfile.

Mozilla和WebKit的还没有完全相处，当涉及到音频格式，Firefox会希望看到一个.ogg文件，而WebKit的浏览器支持.mp3扩展。

这意味着，至少在现在，你应该创建两个版本的音频。

当Safari加载页面时，它不会承认.ogg格式，会跳过它并移动到的MP3版本，因此。

请注意IE，每往常一样，不支持这些格式，Opera10和以及以下版本只能使用.wav文件。

十七、Video支持

与

事实上，就在最近，YouTube宣告了新的HTML5视频嵌入，当然，是为支持此功能浏览器。

因为HTML5的规范没有指定特定的视频编解码器，它留给了浏览器来决定。

虽然Safari和InternetExplorer9可以预期支持H.264格式的视频（其中Flash播放器可以播放），Firefox和Opera是坚持开源Theora和Vorbis格式。

因此，当显示HTML5的视频，您必须提供这两种格式。

Yourbrowserisold.Downloadthisvideoinstead.

还有一个值得注意的一些事情：

1我们技术上不需要来设置type属性，但是，如果我们不这样做，浏览器不得不自己去寻找类型。

节省一些带宽，还是你自己声明下吧。

2不是所有的浏览器理解HTML5视频。

在资源元素的下面，我们可以提供一个下载链接，或嵌入视频的Flash版本代替。

这取决于你。

3controls和preload属性就会在下面提及。

4有方法可以让所有的浏览器支持video标签，具体参见我前面的“让所有浏览器支持HTML5video视频标签”一文。

十八、视频预载（PreloadVideos）

预载属性不完全是你想的那个样子，虽然，你应该先决定是否要在浏览器预装的视频。

是否有必要？

或许吧。

如果访问者访问一个专门展示了一个视频的页面，你一定要预载的视频，节约参观者等待的一部分时间。

影片可以通过设置preload=”preload”或是简单地添加preload进行预载。

我更喜欢后者的解决方案，它少了一点多余的东西。

请注意，不同浏览器渲染出来的进度条的模样都是不一样的。

二十、正则表达式

你发现自己多久匆匆编写一些正则表达式验证一个特定的文本。

多亏了新的pattern属性，我们可以在标签处直接插入一个正则表达式。

姓名:

提交

如果你熟悉正则表达式，那么应该清楚[A-Za-z]{4,10}表示接受4-10位不区分大小写的英文字母。

如果浏览器支持pattern属性，则提交表单时，如果文本框中的内容不符合其正则表达式，文本框会高亮显示。

如下图所示。

您可以狠狠地点击这里：

HTML5正则表达式Demo

//zxx:

我自己小测了下，貌似目前只在Chrome下有效（win系统）

注意到，我们已经开始组合使用这些很棒的属性。

如果您对正则表达式概念模糊了，可以参见这里。

二十一、属性支持检测

如果我们没有方法检测浏览器是否支持这些属性，这些就不能称之为好的属性。

恩，不错的观点，事实上我们是有几种方法的，这里我们讨论2个。

第一个是利用优秀的Modernizr库，或者，我们可以创建和分析这些元素，以确定浏览器的能力。

例如，在我们前面的例子，如果我们要确定浏览器是否能使用pattern的属性，我们可以添加一小段JavaScript到我们的页面上：

alert（'pattern'indocument.createElement（'input'））;//boolean

事实上，这是一种确定浏览器兼容的常用方法。

jQuery库了利用这种伎俩。

在上面，我们创建了一个新的input元素，并确定了里面的pattern属性浏览器是否认得。

如果是，浏览器则支持此功能。

否则，当然就不支持了。

谨记此方法依赖于JavaScript。

二十二、mark元素（MarkElement）

试想元素作为高亮。

此标签包裹的字符串应该与用户当前的行动相关联。

例如，我在一些博客上搜索“北川景子”，我就可以使用一些JavaScript将当前的每个结果字符串用mark标签包裹。

搜索结果

我很喜欢《零秒出手》里面那个拉小提琴的女孩，原来她叫做北川景子。

二十三、什么时候使用div

我们有些人开始质问到底何时该使用div。

现在我们可以使用header,article,section,和footer，还有机会使用div…吗？

当然可以。

div应该用在没有更好的元素的时候。

例如，如果你发现你需要包裹一段代码块在对内容定位处理的包装单元内。

不过如果你是包裹一个博客文章，或者，可能是，底部的链接列表，则需考虑分别使用

和

检索自定义属性的价值

vartheDiv=document.getElementById（'myDiv'）;

varattr=theDiv.getAttribute（'data-custom-attr'）;

alert（attr）;//MyValue

此属性还可以用在CSS中，例如下面这个有些傻里傻气的CSS文字改变的例子：

CSS代码：

.data_custom{display:

inline-block;position:

relative;}

举报
举报 版权申诉
版权申诉 word格式文档无特别注明外均可编辑修改；预览文档经过压缩，下载后原文更清晰！ 立即下载
配套讲稿：

如PPT文件的首页显示word图标，表示该PPT已包含配套word讲稿。双击word图标可打开word文档。

特殊限制：

部分文档作品中含有的国旗、国徽等图片，仅作为作品整体效果示例展示，禁止商用。设计者仅对作品中独创性部分享有著作权。

关 键  词：
HTML5 特征 窍门 技术
提示  冰豆网所有资源均是用户自行上传分享，仅供网友学习交流，未经上传用户书面授权，请勿作他用。
关于本文
本文标题：HTML5特征窍门和技术.docx
链接地址：https://www.bdocx.com/doc/6649100.html
关于我们 - 网站声明 - 网站地图 - 资源地图 - 友情链接 - 网站客服 - 联系我们

copyright@ 2008-2022 冰点文档网站版权所有

经营许可证编号:鄂ICP备2022015515号-1

收起
在线客服
意见反馈
返回顶部
展开
QQ交谈
返回顶部