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

来源：互联网发布：查企业法律纠纷的软件编辑：程序博客网时间：2024/05/21 01:49

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" loopposter="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>

0 0