《响应式Web设计:HTML5和CSS3实战》-- 阅读笔记2

最新推荐文章于 2021-07-01 03:49:54 发布

来打小怪啊

最新推荐文章于 2021-07-01 03:49:54 发布

阅读量208

点赞数

分类专栏： html 读书笔记

本文链接：https://blog.csdn.net/qq_36291747/article/details/106802163

版权

html 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

读书笔记

2 篇文章 0 订阅

订阅专栏

文章目录

- - 响应式网页设计中的 HTML5

响应式网页设计中的 HTML5

响应式设计的“移动优先”（mobile first）思想使它很适宜采纳 HTML5 中最简洁、最有效和最具语义的代码。

1. 腻子脚本

腻子脚本（polyfill）这个词由Remy Sharp提出，意指使用腻子来补平老版本浏览器的缺陷。因此，腻子脚本具体指的是一段能给老版本浏览器带来新特性的JavaScript代码。

IE9以前的老的浏览器不支持 HTML5 中提出的新特性。因此，JavaScript 专家 Remy Sharp 开发了一个轻量级的增强脚本，在HTML5网页中引入该文件后，就能神奇地让老版本IE支持新HTML元素。

更进一步地，Modernizr 出现了。除了能让IE支持HTML5新元素之外，它还能够基于一系列特性测试来有条件地加载更高级的腻子脚本（polyfill）、CSS 文件以及额外的 JavaScript 文件。

2. HTML5 的全新语义化元素

1. 结构级语义元素

<section>: 用来定义文档或应用程序中的区域（或节）。
<nav>: 用来定义文档的主导航区域，其中的链接指向其他页面或当前页面的某些区域。
<article>: 用来包裹独立的内容片段。
<aside>: 用来表示与页面主内容松散相关的内容。
<hgroup>: 如果页面中有一组使用 <h1> 、<h2> 、<h3> 等标签的标题、标语和副标题，则可以考虑使用 <hgroup> 将它们包裹起来。这样在HTML5的大纲结构算法中就会隐藏次级标题元素，从而只让 <hgroup> 中的第一个标题元素进入文档大纲。
<header>: 用来包含对区域内容的介绍说明。
<footer>: 用来包含其所在区域的辅助信息。
<address>: 用来明确地标注离其最近的 <article> 或 <body> 祖先元素的联系信息。

2. 文本级语义元素

<b>: 用来给文本加粗，不传达或暗示任何语态或语气。
<em>: 用来给文本加粗，强调内容中的重点。
<i>: 用来给文本添加斜体效果，带有不同的语态或预期。

3. WAI-ARIA（无障碍网页应用技术）

WAI-ARIA 是 Web Accessibility Initiative - Accessible Rich Internet Applications 的缩写，它主要解决一个问题：让残障人士能无障碍地访问网页上的动态内容。这项技术包含了很多方面的知识，感兴趣可以查看更多细节。

1. ARIA的地标角色

地标角色（landmark role）可以使支持无障碍网页应用技术的屏幕阅读器可以在不同的页面区块之间轻松跳转。

下面来看一个代码例子：

<nav role="navigation">
	<ul>
		<li>导航1</li>
		<li>导航2</li>
		<li>导航3</li>
	</ul>
</nav>

role=“navigation” 就给 nav 这一个内容区块定义了一个地标角色，十分简单。

针对文档结构的各部分分别有如下的地标角色：

application: 用来定义用作网页应用的区域。
banner: 用来定义一个站点级别（而不是某个特定文档的）的区域。如网站的头部和logo。
complementary: 用来定义一个对页面主要区域进行补充说明的区域。
contentinfo: 用来定义与页面主要内容相关的信息区域。
form: 用来定义表单。
main: 定义页面的主体内容。
navigation: 用来定义链向当前文档或相关文档的导航链接。
search: 用来定义一个用于搜索的区域。

4. HTML5 中的 video

1. 添加视频

使用 HTML5 向网页中添加视频，是一件很容易的事。

<video src="hello.mp4" width="960" height="720" controls>
	你的浏览器不支持 video 标签！
</video>

上面 3 行简单的代码，就能向页面中插入一个带有默认播出控制条的视频元素了。

2. 提供备用的媒体源文件

在此基础上，可以提供备用的媒体源文件，以防浏览器不支持某一类型格式的文件。改造起来也很 easy 。

<video width="960" height="720" controls>
	<source src="hello.mp4" type="video/mp4"></source>
	<source src="hello.ogg" type="video/ogg"></source>
	你的浏览器不支持 video 标签！
</video>

这样子的话，如果浏览器支持 mp4 格式，就会使用第一个文件；否则，它会继续往下解析下一个 <source> 标签。

3. 为视频添加响应式

如果页面上的视频是通过 <video> 标签来插入的，那么，为它添加响应式也是很容易的，要用到强大了 max-width 属性了。

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

但是，除了上面这种插入视频的方式以外，还有通过 <iframe> 嵌入视频的方式。

<iframe width="960" height="720" src="http://www.youtube.com/embed/B1_N28DA3gY" frameborder="0" allowfullscreen>
</iframe>

以 <iframe> 嵌入视频，使用 max-width 属性就不能起到预期的效果了。这时候，可以使用一个名为 FitVids 的 jQuery 小插件。

5. 离线 WEB 应用

这有一个很棒很详细的《使用 HTML 开发离线应用》的例子。

其中，主要涉及了以下三个方面：

离线资源缓存
在线状态检测
本地数据存储

来打小怪啊

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
《响应式Web设计:HTML5和CSS3实战》-- 阅读笔记2

响应式网页设计中的 HTML5响应式设计的“移动优先”（mobile first）思想使它很适宜采纳 HTML5 中最简洁、最有效和最具语义的代码。1. 腻子脚本腻子脚本（polyfill）这个词由Remy Sharp提出，意指使用腻子来补平老版本浏览器的缺陷。因此，腻子脚本具体指的是一段能给老版本浏览器带来新特性的JavaScript代码。IE9以前的老的浏览器不支持 HTML5 中提出的新特性。因此，JavaScript 专家 Remy Sharp 开发了一个轻量级的增强脚本，在HTML5网页中
复制链接

扫一扫