html5 网页设计 第1篇
根据用户设备和环境的特点为用户提供适当的图像一直是一个棘手的问题。这个问题在响应式网页设计的出现时就被突显出来，其本质是为每个设备提供单一的代码库。
总结这个难题，我们知道我们拥有的图像是一半的解决方案，浏览器知道访问网站的设备的特点以及最合适的图像尺寸和分辨率是另一半的解决方案。
我们如何告诉浏览器我们拥有哪些图像，以便它可以为用户选择最合适的图像？
演示响应式图像示例是棘手的。在单个屏幕上无法欣赏到特定语法或技术加载的不同图像。因此，接下来的示例将主要是代码，你只能相信我，它将在支持的浏览器中产生你需要的结果。
让我们看看你可能需要响应式图片的两种最常见情况。这些是在需要不同分辨率时切换图像，以及根据可用的视口空间改变图像。
假设你有图像的三个版本。它们看起来都一样，只是一个是为较小的视口而设计的较小尺寸或分辨率，另一个是为中等尺寸视口而设计的，最后一个更大的版本适用于其他任何视口。以下是我们如何让浏览器知道我们有这三个版本可用。
这是响应式图片中最简单的情况，所以让我们确保语法完全合理。
首先，src属性，你可能已经熟悉了，这里有一个双重作用；它指定了图像的小尺寸 1x 版本，如果浏览器不支持srcset属性，它也充当备用图像。这就是为什么我们在小图像上使用它。这样，忽略srcset信息的旧浏览器将得到最小且性能最佳的图像。
对于理解srcset的浏览器，我们在该属性后提供了一个逗号分隔的图像列表，供浏览器选择。在图像名称（如）之后，我们发出了一个简单的分辨率提示。在这个例子中，使用了 和 2x，但任何整数都是有效的。例如，3x 或 4x 也可以（只要你能找到适当分辨率的屏幕）。
然而，这里存在一个问题；一个 1440 像素宽，1x 屏幕的设备将得到与 480 像素宽，3x 屏幕相同的图像。这可能是期望的效果，也可能不是。
让我们考虑另一种情况。在响应式网页设计中，图像在较小的视口上可能是整个视口宽度，但在较大的尺寸上可能只有视口宽度的一半。第一章中的主要示例，“响应式网页设计的基本要素”，就是一个典型的例子。以下是我们如何向浏览器传达这些意图的方式：
在图像标签内部，我们再次使用srcset。然而，这一次，在指定图像之后，我们添加了一个带有 w 后缀的值。这告诉浏览器图像有多宽。在我们的例子中，我们有一个宽度为 450 像素的图像（名为）和一个宽度为 900 像素的图像（名为）。重要的是要注意，这个带有w后缀的值并不是一个“真实”的尺寸。它只是对浏览器的一种指示，大致相当于“CSS 像素”的宽度。
CSS 中究竟是什么定义了像素？我自己也想知道。然后我在找到了解释，但后悔了。
当我们考虑sizes属性时，这个带有w后缀的值更有意义。sizes属性允许我们向浏览器传达我们图像的意图。在我们之前的例子中，第一个值相当于“对于至少宽度为 17em 的设备，我打算显示大约 100vw 宽的图像”。
如果一些使用的单位，比如 vh（其中 1vh 等于视口高度的 1%）和 vw（其中 1vw 等于视口宽度的 1%）不合理，请务必阅读第五章，“CSS3 – 选择器，排版，颜色模式和新特性”。
第二部分有效地是，“嗨，浏览器，对于至少 40em 宽的设备，我只打算以 50vw 的宽度显示图像”。这可能看起来有点多余，直到你考虑 DPI（或 DPR，设备像素比）。例如，在一个 320px 宽的设备上，分辨率为 2 倍（如果以全宽度显示需要 640px 宽的图像），浏览器可能会决定 900px 宽的图像实际上更合适，因为它是满足所需尺寸的第一个选项。
html5 网页设计 第2篇
在第一段中，我承诺到本章结束时，你将知道构建完全响应式网页所需的一切。到目前为止，我只是在围绕手头的问题进行讨论。是时候付诸行动了。
代码示例
你可以通过访问或通过 GitHub 来下载本书中的所有代码示例。值得知道的是，在整个章节中构建的个别示例中，代码下载只提供了示例的最终版本。例如，如果你下载了第二章, 媒体查询-支持不同的视口的代码示例，这些示例将是在第二章, 媒体查询-支持不同的视口结束时的状态。除了文本中提供的中间状态外，不提供其他中间状态。
我们将从一个简单的 HTML5 结构开始。现在不用担心每一行都做了什么（特别是的内容，我们将在第四章中详细介绍，响应式网页设计的 HTML5）。
暂时，只需专注于标签内的元素。我相当确定那里没有什么看起来太不寻常的东西；一些 div，一个用于标志的图形，一张图片（看起来很美味的烤饼），一两段文字和一列项目的列表。
以下是代码的摘要版本。为了简洁起见，我已经在下面的代码中删除了段落文字，因为我们只需要关注结构。但是，你应该知道这是一个食谱，描述了如何制作司康饼；典型的英式蛋糕。
如果你想看完整的 HTML 文件，可以从网站下载。
默认情况下，网页是灵活的。如果你打开示例页面，即使在这一点上（没有媒体查询的情况下），调整浏览器窗口大小，你会看到文本会根据需要重新排列。
在不同的设备上呢？没有任何 CSS 的情况下，在 iPhone 上的呈现如下：
正如你所看到的，它在 iPhone 上呈现得像一个“正常”的网页。原因是 iOS 默认将网页呈现为 980px 宽，并将其缩小到视口中。
浏览器的可视区域在技术上被称为viewport。视口很少等同于设备的屏幕尺寸，特别是在用户可以调整浏览器窗口大小的情况下。
因此，从现在开始，当我们提到网页的可用空间时，我们通常会使用这个更准确的术语。
我们可以通过在中添加以下片段来轻松解决之前的问题：
这个 viewport meta标签是一种非标准（但事实上的标准）的告诉浏览器如何呈现页面的方式。在这种情况下，我们的 viewport meta标签实际上是在说“使内容以设备的宽度呈现”。实际上，最好的办法可能是直接向您展示这一行对适用设备的影响：
太好了！现在文本以更“原生”的大小呈现和流动了。让我们继续。
我们将在第二章中介绍meta标签及其各种设置和变体（以及相同功能的基于标准的版本），媒体查询-支持不同的视口。
他们说一张图片胜过千言万语。在我们的示例页面中写了这么多关于烤饼干的内容，却没有展示这些美味的图片。我要在页面顶部添加一张烤饼干的图片；一种“英雄”图片，吸引用户阅读页面。
哦！那张漂亮的大图片（宽度为 2000px）强制我们的页面呈现得有点乱。我们需要解决这个问题。我们可以通过 CSS 为图片添加固定宽度，但问题在于我们希望图片能够根据不同的屏幕尺寸进行缩放。
例如，我们的 iPhone 示例宽度为 320px，所以我们可以将该图片的宽度设置为 320px，但是如果用户旋转屏幕会发生什么呢？320px 宽的视口现在变成了 480px 宽。幸运的是，通过一行 CSS 代码很容易实现图片的流动，使其可以根据容器的可用宽度进行缩放。
我现在要创建css/ CSS 文件，并将其链接到 HTML 页面的头部。
这是我要添加的第一件事。通常我会设置一些其他默认值，我们将在后面的章节中讨论这些默认值，但是为了我们的目的，我很乐意只用这个来开始：
现在当页面刷新后，我们看到的更接近我们预期的东西。
这个基于max-width的规则的作用只是规定所有的图片的宽度最大为 100%（即它们应该扩展到 100%的大小，不再更大）。如果包含元素（如body或者它所在的div）的宽度小于图片的固有宽度，图片将简单地缩放到最大可用空间。
为什么不简单地使用 width: 100%？
要使图片流动，您也可以使用更常用的 width 属性。例如，width: 100%，但这会产生不同的效果。当使用width属性时，图片将以该宽度显示，而不考虑其固有大小。在我们的示例中，结果将是 logo（也是一张图片）拉伸以填满其容器的 100%。对于比图片（如我们的 logo）宽得多的容器，这会导致图片过大。
太好了。现在一切都按预期布局。无论视口大小如何，都没有内容横向溢出页面。
然而，如果我们在更大的视口中查看页面，基本样式开始变得字面上和比喻上都被拉伸了。看一下大约在 1400px 大小的示例页面：
哦，天哪！事实上，即使在大约 600px 宽的时候，它开始受到影响。在这一点上，如果我们能重新安排一些东西就会很方便。也许调整一下图片的大小并将其放在一边。也许改变一些字体大小和元素的背景颜色。
幸运的是，我们可以通过使用 CSS 媒体查询来轻松实现所有这些功能，以使事情按照我们的意愿进行弯曲。
正如我们已经确定的那样，在 600px 宽的某个点之后，我们当前的布局开始显得拉伸。让我们使用 CSS3 媒体查询根据屏幕宽度调整布局。媒体查询允许我们根据一些条件（例如屏幕宽度和高度）应用特定的 CSS 规则。
不要将断点设置为流行的设备宽度
“断点”是用来定义响应式设计应该显著改变的点。
当人们开始使用媒体查询时，常见的做法是在设计中设置特定于当时流行设备的断点。当时通常是 iPhone（320px x 480px）和 iPad（768px x 1024px）定义了这些“断点”。
那种做法当时是一个糟糕的选择，现在甚至更糟。问题在于，通过这样做，我们是在为特定的屏幕尺寸定制设计。我们需要一个响应式设计——不管查看它的屏幕尺寸是多大，它都能够适应；而不是只在特定尺寸下才能看起来最好。
因此，让内容和设计本身决定断点的相关性。也许你的初始布局在 500px 宽及以上开始看起来不对，也许是 800px。你自己的项目设计应该决定何时需要断点。
我们将在第二章中涵盖整个 CSS 媒体查询范围，媒体查询-支持不同的视口，巧妙地命名为媒体查询。
然而，为了将我们的基本示例整理成形，我们将集中讨论一种媒体查询类型；最小宽度媒体查询。在这种类型的媒体查询中，只有在视口达到最小定义宽度时，才会应用其中的 CSS 规则。可以使用一系列不同的长度单位来指定确切的最小宽度，包括百分比、em、rem 和 px。在 CSS 中，最小宽度媒体查询的写法如下：
@media指令告诉浏览器我们正在开始一个媒体查询，screen部分（在这种情况下，声明“屏幕”在技术上并不需要，但我们将在下一章中详细处理这个问题）告诉浏览器这些规则应该适用于所有屏幕类型，and (min-width: 50em)告诉浏览器这些规则应该限制在所有大于 50em 大小的视口上。
“对媒体查询的支持的缺失实际上是第一个媒体查询。”
他的意思是，我们写的第一条规则，除了媒体查询之外，应该是我们的“基本”规则，然后我们可以为更有能力的设备增强这些规则。
目前，只需意识到这种方法首先强调我们最小的屏幕，并允许我们根据设计的需要逐步添加细节。
我们已经确定我们的设计在大约 600px/ 宽度时开始受到影响。
因此，让我们通过一个简单的示例来混合一下，展示在不同的视口尺寸下如何布局不同的内容。
几乎所有的浏览器都有一个默认的文本大小为 16px，所以你可以通过将 px 值除以 16 来轻松地将宽度转换为 rems。我们将在第二章中讨论为什么你可能想要这样做，媒体查询-支持不同的视口。
首先，我们将阻止主要的“英雄”图像变得过大，并将其保持在右侧。然后介绍文本可以位于左侧。
然后我们将有主要的文本部分，描述如何制作烤饼的“方法”，位于左侧，下面有一个小的方框部分，详细介绍右侧的配料。
所有这些变化都可以通过在媒体查询中封装这些特定样式来相对简单地实现。以下是添加相关样式后的情况：
在较小的屏幕上，它看起来基本上与以前一样，但一旦视口达到 50rem 或更宽，它就会调整到新的布局。
以下是添加的布局样式：
这并不太糟糕，是吗？只需很少的代码，我们就建立了一个可以根据视口大小做出响应并在需要时提供更合适布局的页面。通过添加更多的样式，页面看起来甚至更加舒适。有了这些，我们基本的响应式页面现在在 iPhone 上看起来是这样的：
就像上面的 50rem 宽度一样：
这些进一步的视觉装饰并没有增加对响应式发生的理解，因此我在这里省略了它们，但如果你想查看相关代码，请在或下载本章代码。
这只是一个非常基本的示例，但它已经包含了构建响应式网页设计的基本方法论。
重申我们所涵盖的基本要点；从“基础”样式开始，这些样式可以在任何设备上使用。然后随着视口大小和/或功能的增加逐渐添加增强功能。
你可以在这里找到 CSS 媒体查询（Level 3）的完整规范：
html5 网页设计 第3篇
术语“响应式网页设计”是由 Ethan Marcotte 于 2010 年创造的。在他的开创性的A List Apart文章中（），他将三种现有技术（灵活的网格布局，灵活的图像/媒体和媒体查询）整合成一种统一的方法，并将其命名为响应式网页设计。
响应式网页设计是以最相关的格式呈现网页内容，以适应视口和访问设备。
在其初期，典型的响应式设计是从“桌面”固定宽度设计开始构建的。然后，内容被重新排列或删除，以使设计在较小的屏幕上工作。然而，流程发展并且变得明显，从设计到内容和开发，一切都在相反的方向工作得更好；从较小的屏幕开始，逐渐扩展。
html5 网页设计 第4篇
我喜欢在原始的“正常”定义下编写媒体查询。例如，假设我想要根据视口宽度在样式表的不同位置更改一些元素的宽度，我会这样做：
这乍一看似乎是疯狂的。我们有两个媒体查询都与屏幕最小宽度为 30rem 有关。重复相同的@media声明肯定是冗长和浪费的吧？我应该主张将所有相同的媒体查询分组到一个单独的代码块中，就像这样：
这当然是一种方法。然而，从维护的角度来看，我觉得这更加困难。没有“正确”的方法，但我更喜欢为单个选择器定义一条规则，并在其后立即定义该规则的任何变体（例如在媒体查询中的更改）。这样我就不必搜索单独的代码块，找到与特定选择器相关的声明。
通过 CSS 预处理器和后处理器，这甚至可以更加方便，因为媒体查询的“变体”可以直接嵌套在规则集中。我的另一本书Sass and Compass for Designers中有一个完整的章节介绍这个。
从冗长的角度来看，对前一种技术提出异议似乎是公平的。单单文件大小就足以成为不以这种方式编写媒体查询的理由了吧？毕竟，没有人希望为用户提供一个臃肿的 CSS 文件。然而，简单的事实是，gzip 压缩（应该压缩服务器上的所有可能的资源）将这种差异减少到完全可以忽略的程度。我过去做过各种测试，所以如果您想了解更多信息，请访问：。最重要的是，如果您宁愿直接在标准样式之后编写媒体查询，我认为您不应该担心文件大小。
如果您想直接在原始规则之后编写媒体查询，但希望所有相同的媒体查询定义合并为一个，那么有许多构建工具（在撰写本文时，Grunt 和 Gulp 都有相关插件）可以实现这一点。
html5 网页设计 第5篇
第一章，“响应式网页设计的要点”，是对编写响应式网页设计的关键要素进行快速介绍。
第二章，“媒体查询-支持不同的视口”，涵盖了关于 CSS 媒体查询的一切：它们的功能、语法以及你可以使用它们的各种方式。
第三章，“流动布局和响应式图像”，向你展示如何编写比例布局和响应式图像，并全面探讨了 Flexbox 布局。
第四章，“HTML5 用于响应式网页设计”，涵盖了 HTML5 的所有语义元素、文本级语义和可访问性考虑。我们还介绍了如何使用 HTML5 在页面中插入视频和音频。
第五章，“CSS3-选择器、排版、颜色模式和新功能”，深入探讨了 CSS 的无限可能性：选择器、HSLA 和 RGBA 颜色、网页排版、视口相对单位等等。
第六章，“用 CSS3 创建令人惊叹的美学”，涵盖了 CSS 滤镜、框阴影、线性和径向渐变、多重背景，以及如何将背景图像定位到高分辨率设备。
第七章，“使用 SVG 实现分辨率独立性”，解释了我们在文档中使用 SVG 以及作为背景图像的一切所需，以及如何使用 JavaScript 与它们交互。
第八章，“过渡、变换和动画”，我们的 CSS 开始动起来，探讨了如何使用 CSS 进行交互和动画。
第九章，“用 HTML5 和 CSS3 征服表单”，网页表单一直很难处理，但最新的 HTML5 和 CSS3 功能使它们比以往更容易处理。
第十章，“接近响应式网页设计”，探讨了在着手进行响应式网页设计之前的基本考虑因素，并提供了一些最后一刻的智慧金点子，以帮助你在响应式探索中取得成功。
html5 网页设计 第6篇
在E:\web_work里创建一个名称为chapter01的文件夹然后创建一个名为htmlDemo01的HTML文件。
保存并运行程序，使用浏览器打开。
在chapter01文件夹中新建HTML文件
保存并运行程序，使用浏览器打开。
在chapter01文件夹中新建HTML文件
保存并运行程序，使用浏览器打开。
html5 网页设计 第7篇
由于它们的本质，样式表中更下面的样式（对我们来说是 CSS 文件）会覆盖更上面的等效样式（除非更上面的样式更具体）。因此，我们可以在样式表的开头设置基本样式，适用于我们设计的所有版本（或者至少提供我们的“基本”体验），然后在文档中进一步使用媒体查询来覆盖相关部分。例如，我们可能选择在有限的视口中将导航链接设置为纯文本（或者只是较小的文本），然后使用媒体查询来在更大的视口中覆盖这些样式，以便在更大的空间可用时为我们提供文本和图标。
让我们看看这在实践中是什么样子（example_02-02）。首先是标记：
现在 CSS：
下载示例代码
您可以从您在的帐户中下载您购买的所有 Packt 图书的示例代码文件。如果您在其他地方购买了这本书，您可以访问并注册，以便将文件直接通过电子邮件发送给您。
这是一个小视口中链接的屏幕截图：
这是它在较大的视口中的截图：
重要的是要记住，您通常在 CSS 中编写的任何内容也可以包含在媒体查询中。因此，可以使用媒体查询在不同情况下（通常是不同的视口大小）完全改变站点的布局和外观。
媒体查询的另一个常见用例是在高分辨率设备上查看站点时更改样式。考虑这个：
在这里，我们的媒体查询指定，我们只希望封闭的样式应用于屏幕分辨率为 2 像素每像素单位（2dppx）的情况。这将适用于 iPhone 4 等设备（苹果的 HiDPI 设备被称为“Retina”）以及大量的 Android 设备。您可以通过减少 dppx 值来将该媒体查询应用于更广泛的设备范围。
在编写最小分辨率媒体查询时，确保运行有一个添加前缀的工具，以提供相关的供应商前缀，以获得尽可能广泛的支持。如果现在对供应商前缀这个术语不太理解，也不用担心，因为我们将在下一章更详细地讨论这个主题。
html5 网页设计 第8篇
在chapter01文件夹中创建一个名为JavaScriptDemo04的HTML文件
运行查看效果
在chapter01文件夹中创建一个名为JavaScriptDemo05的HTML文件。
html5 网页设计 第9篇
仅仅几年前，网站可以以固定宽度构建，预期所有最终用户都会获得相当一致的体验。这个固定宽度（通常为 960 像素宽或周围）对于笔记本电脑屏幕来说并不太宽，而具有大分辨率显示器的用户只是在两侧有大量的边距。
但是在 2007 年，苹果的 iPhone 引领了第一个真正可用的手机浏览体验，人们访问和互动网络的方式永远改变了。
在这本书的第一版中，曾经指出过：
“在 2010 年 7 月至 2011 年 7 月的 12 个月内，全球移动浏览器使用率从 ％上升到 ％。”
在 2015 年中期，同一统计系统（）报告称，这一数字已上升至 ％。作为对比，北美的移动设备占比为 ％。
无论从任何角度来看，移动设备的使用量都在不断增加，而与此同时，27 英寸和 30 英寸的显示器现在也很常见。现在，浏览网络的最小屏幕和最大屏幕之间的差异比以往任何时候都要大。
值得庆幸的是，对于不断扩大的浏览器和设备环境，有一个解决方案。使用 HTML5 和 CSS3 构建的响应式网页设计可以使网站在多个设备和屏幕上“只需工作”。它使网站的布局和功能能够响应其环境（屏幕大小，输入类型，设备/浏览器功能）。
此外，使用 HTML5 和 CSS3 构建的响应式网页设计可以在无需基于服务器的后端解决方案的情况下实现。
html5 网页设计 第10篇
Flexbox 解决了上述每种显示机制的不足。以下是它的超级功能的简要概述：
它可以轻松地垂直居中内容
它可以改变元素的视觉顺序
它可以自动在框内对齐和排列元素，自动分配它们之间的可用空间。
它可以让你看起来年轻 10 岁（可能不是，但在少量经验测试中（我）已经证明可以减轻压力）
这些不同的规范意味着有三个主要的实现版本。您需要关注多少取决于您需要的浏览器支持级别。
让我们先说清楚：Internet Explorer 9、8 或更低版本都不支持 Flexbox。
对于您可能想要支持的其他所有内容（几乎所有移动浏览器），都有一种方法可以享受 Flexbox 的大多数（如果不是全部）功能。您可以在上查看支持信息。
在我们深入 Flexbox 之前，我们需要进行一个简短但必要的偏离。
我希望一旦您看到了 Flexbox 的一些示例，您会欣赏到它的实用性，并感到有能力使用它。然而，手动编写支持每个不同 Flexbox 规范所需的所有必要代码是一项艰巨的任务。这里有一个例子。我将设置三个与 Flexbox 相关的属性和值。考虑一下：
这就是最新语法中属性和值的样子。然而，如果我们想要支持 Android 浏览器（v4 及以下）和 IE 10，实际上需要的是：
有必要写出所有这些，因为在过去几年里，随着浏览器发布了新功能的实验版本，它们都带有“供应商前缀”。每个供应商都有自己的前缀。例如，微软的是-ms-，WebKit 的是-webkit-，Mozilla 的是-moz-，等等。对于每个新功能，这意味着需要编写同一属性的多个版本；首先是供应商前缀版本，然后是官方的 W3C 版本。
这个咒语在 Web 历史上的结果是 CSS 看起来像前面的例子。这是在尽可能多的设备上使功能正常工作的唯一方法。如今，供应商很少添加前缀，但在可预见的未来，我们必须接受许多现有浏览器仍然需要前缀来启用某些功能的现实。这让我们回到了 Flexbox，这是供应商前缀的一个极端例子，不仅有多个供应商版本，还有不同的功能规范。记住并理解您需要以当前格式和每个以前的格式编写的所有内容并不是一件有趣的事情。
我不知道你怎么想，但我宁愿把时间花在做一些更有意义的事情上，而不是每次都写出那么多东西！简而言之，如果您打算愤怒地使用 Flexbox，请花时间设置自动前缀解决方案。
为了保持理智，准确且轻松地向 CSS 添加供应商前缀，使用某种形式的自动前缀解决方案。目前，我更喜欢 Autoprefixer（）。它快速、易于设置且非常准确。
大多数设置都有 Autoprefixer 的版本；您不一定需要基于命令行的构建工具（例如 Gulp 或 Grunt）。例如，如果您使用 Sublime Text，有一个版本可以直接从命令面板中使用：。Atom、Brackets 和 Visual Studio 也有 Autoprefixer 的版本。
从这一点开始，除非必须说明一个观点，否则在代码示例中将不再有供应商前缀。
html5 网页设计 第11篇
在chapter01=文件夹中创建一个HTML文件
运行查看效果
在chapter01文件夹中创建一个HTML文件
运行查看效果
在chapter01文件夹中创建一个名称为的文件。
在chapter01文件夹中创建一个HTML文件
运行查看效果
在chapter01文件夹中创建一个HTML文件
运行查看效果
1、标签选择器
2、类选择器
3、id选择器
4、通配符选择器
在chapter01文件夹中创建一个HTML文件
运行查看效果