响应式网页设计——学习笔记二:HTML5

1. 腻子脚本和 Modernizr

Modernizr:http://www.modernizr.com),除了能让 IE支持 HTML5新元素之外,它还能够基于一系列特性测试来有条件地加载更高级的腻子脚本(polyfill)、CSS文件以及额外的 JavaScript文件。

html5boilerplate.com:是一个预先做好的融合了“最佳实践”HTML5文件模板

2.HTML5标签

<section> 元素用来定义文档或应用程序中的区域(或节)。可以理解成一个信息模块,汇聚一类信息。

<nav> 元素用来定义文档的主导航区域,其中的链接指向其他页面或当前页面的某些区域。主要用来做导航。

<article>放有独立内容的文章,能表达完整意义。

<aside>元素用来表示与页面主内容松散相关的内容。在实践中,我经常将其用作侧边栏(当它包含合适的内容时)。另外,引文、广告以及导航元素(如友情链接等)也可以
使用它。

<hgroup>如果页面中有一组使用 <h1> 、 <h2> 、 <h3> 等标签的标题、标语和副标题,则可以考虑使用 <hgroup> 将它们包裹起来。这样在 HTML5的大纲结构算法中就会隐藏次级标题元素,从而只让 <hgroup> 中的第一个标题元素进入文档大纲。

<header>实际使用中, <header> 可用作网站头部的“刊头”区域,也可用作对其他内容如 <article> 元素的简要介绍。

<footer>网站的页脚可以用它,同时正文 <article> 元素内的文脚也可以用它。

<address> 元素用于明确地标注离其最近的 <article> 或 <body> 祖先元素的联系信息。

<b>不强调语义,可以作为加样式的标签

<em>强调内容中的重点。

<video>显示视频,支持的属性有src,width,height,controls 显示默认的播放控制,autoplay自动播放,preload控制媒体预加载,定义视频缩略图的 poster,用来重复播放视频的 loop ,下面是全部使用的示例。也可以添加flash。嵌入视频的响应式只需删除宽,高,在css中添加

video { max-width: 100%; height: auto; }

<video width="640" height="480" controls autoplay preload="auto" loop
poster="myVideoPoster.jpg">
<source src="video/myVideo.ogv" type="video/ogg"><!--支持Ogg的浏览器-->
<source src="video/myVideo.mp4" type="video/mp4"><!--支持mp4的浏览器-->
What, do you mean you don't understand HTML5?<!--不支持HTML5的浏览器-->
</video>
<audio>属性与上边基本相同,没有可视区。
3. 针对iframe引入的视频的响应式,a)引入jQuery库  b) http://fitvidsjs.com/上下载 FitVids 插件,引入插件  c)使用 jQuery指定包含视频的特定元素。视频放入了 id为 #content 的 div 中

<script>
$(document).ready(function(){
// Target your .container, .wrapper, .post, etc.
$("#content").fitVids();
});
</script>


你可能感兴趣的:(响应式网页设计——学习笔记二:HTML5)