1、一个结构必须展现出坚实，有用和美丽的三个特质。
- 马库斯Vitruvius Pollio
2、页面结构语义
指定常见类型的页面区域，如页眉，页脚和导航区域。<div>编码人员不需要创建许多独特的ID来包含这些常见的页面元素，而是可以直接使用新元素并对其进行设置。这种在页面区域布局中长期实践的规则化使盲人自动化系统（如搜索引擎和浏览器）更容易查找，突出显示或跳过页面上的结构元素。
除了长期的HTML页面结构的标签，如<head>和<body>，在HTML5我们现在有这些新的标签来丰富页面元素的描述：
标题：定义页面的标题区域或节或文章的标题。页面标题通常包含导航元素（<nav>）。文章，部分和旁白都可以包含自己的标题区域。
导航：设计为包含主要导航元素的元素。这些通常是主要网站部分的全球导航链接，或导航到本地分部主题。
主要：设计为包含页面的所有主要内容元素。该标签在屏幕阅读器网页浏览器的辅助功能中很有用，因为它允许读者直接跳转到页面内容。它也可以使搜索引擎标记页面的中心内容。
除此之外：该<aside>元素有两个主要用途：作为页面布局容器，如用于导航的侧栏，或用于其他内容“离开”主页面内容。一个<aside>元素也可以用来指定与页面的主要内容相关的括号内容相关内容，如在“边栏”文章或注释中。
页脚：<footer>元素通常标记页面的结尾，通常包含有关网站的一般信息，版权或其他日期信息以及联系信息。该<footer>元素还可以用在章节或文章的末尾，以便保存章节或文章末尾通常列出的脚注，参考书目或其他材料。
Page structure semantics �页面结构语义
Header
Navigation
Main
Aside
Footer
<header>，常包 <nav>
<nav>
<main>
<aside>
<footer>
3、HTML5中的新内容语义元素
文章：一个独立或自立的内容块。设计作为一种手段来指定可能在不同页面或网站上重复使用的内容块，并且在其原始上下文之外仍然是独立和可理解的。请注意，既<section>不要使用<article>元素也不要仅用于视觉样式或布局页面上的内容。<div>如果您只需要一个容器将CSS样式应用于页面区域，请使用该元素。
旁白：内容与主要内容有关，但与主要内容叙述不同。在印刷出版物旁边通常被分开作为“边栏”文章。一个<aside>元素也可以用来指定页面布局的侧边栏列。
详细信息：一个新的元素，用于指定可以被披露或隐藏的解释性内容，如由JavaScript驱动的弹出式注释。点击以透露详情; 再次点击以隐藏笔记。看到相关的<summary>元素。
图：用于单个图形或一组紧密相关的图形（如插图，照片，图表等）的容器。
Figcaption：指定图形的标题。该<figcaption>元素应嵌套在相关<figure>元素中。
标记：定义标记或突出显示的文本或为其他语义目的而区分的文本。
章节：定义文档的一部分。这是一个故意宽泛的定义，主要由作者决定。一节可能只是一段或两段，或者整章。
摘要：与弹出<details>元素关联的可见文本。<summary>和<details>元件用于弹出的解释性说明，通常是由JavaScript控制。用户点击一个摘要，一个<details>元素与解释性文本一起出现，然后当用户再次单击时，详细信息文本消失。
时间：定义日期（通常以yyyy-mm-dd格式）或时间（24小时制）。例如：
<p>Curtain time for the play is <time>20:00</time>.</p>
<p>The first performance of the play is on <time>2016-05-15, 20:00</time>.</p>
画布：该<canvas>元素允许您指定一个网页的矩形区域，其中通过JavaScript或其他逻辑编程进行脚本控制 - 您可以创建高度交互式的图形和动画，包括交互式3D对象的未来可能性。到目前为止，<canvas>元素已经成为一种有趣的可能性，除了古怪的图形演示和粗糙的动画之外，其实际应用很少。随着最近对Adobe Flash Professional CC中的画布交互性的支持，我们可能会看到更多有用的互动内容，它利用了<canvas>元素中固有的可能性的优势，这次是Flash之类的专有文件格式。
视频和音频： HTML5包含将音频和视频文件嵌入到网页中的标准方法，无需Adobe Flash等专有浏览器插件。不幸的是，HTML5视频仍在进行中，对各种视频格式（.mov，.ogv，.m4v和其他格式）的点击式浏览器支持可能会迫使您以多达三种不同的文件格式对每个视频进行编码确保它可以在主流浏览器（Chrome，Firefox和Internet Explorer）上播放，并且在您的页面上添加JavaScript以测试其他浏览器中是否缺少视频支持。我们目前的建议是坚持从Vimeo或YouTube嵌入视频，直到HTML5视频的浏览器支持更广泛，更一致。
SVG：可缩放矢量图形（SVG）由以xml文本格式描述为xy坐标和曲线的几何形状组成。因为它们是矢量图形，所以SVG可以非常紧凑 - 考虑Adobe Illustrator文件（矢量图形的专有形式），而不是Adobe Photoshop或由像素网格组成的jpeg位图文件。在JavaScript控制下，SVG也可以是动画和交互式的。SVG是HTML5的标准组件，并且在主流浏览器中得到广泛支持，但与jpeg和png格式的图形相比，它仍然很少被使用。有关Web图形格式的更多信息，请参见第8章“图形设计”。
Content semantic�內容语义
<article>
<aside>
<summary>
<details>
<figure>
<figcaption>
<mark>
<section>
<time>
<canvas>
<video>
<audio>
<svg>
3、Content Management Systems (CMS)�内容管理系统
CMS占有率最高的WordPress和Drupal目前并非全由HTML5元素构成，然而即将迭代的版本将建立在HTML5和CSS3的基础上。https://w3techs.com/
4、使用CSS设计页面布局
级联样式表（CSS）
测试HTML5和CSS3元素和浏览器支持的当前状态：
- 我可以使用吗？：caniuse.com
- CSS3test.com：css3test.com
- CSS3点击图表：css3clickchart.com
目前的网页浏览器统计
- W3schools，Web浏览器：www.w3schools.com/browsers/browsers_stats.asp
- W3Counter，浏览器市场份额：www.w3counter.com/globalstats.php
- Statcounter全球统计：gs.statcounter.com
有两项新功能突出表现为web技术的重大甚至基础性增强：@media查询是响应的基础网页设计和@ font-face元素，最终将web排版从“web安全”操作系统字体或gimcrack字体替换方案的局限性中解放出来。
5、编码页面以获得最佳的可访问性和可读性
HTML源顺序是文档源代码中出现的元素（如网站标识，导航，主要内容，相关内容和页脚信息）的顺序。
0
正确的HTML源代码顺序有以下几个原因：
有些时候，由于网站技术故障导致正常的CSS样式不存在，或者有时在移动或无线环境中，带宽非常有限，导致HTML在浏览器中显示为无格式。如果您的源代码HTML是按照逻辑顺序（图6.4），读者仍然可以访问您的内容和链接，尽管其格式很简单。
源订单对于辅助功能非常重要，因为盲人用户的网络浏览器期望获得特定的逻辑代码顺序，并且您的网站的盲人用户将能够快速跳过您的标题和导航区域并进入主页面内容。
在源订单中保持主站点导航链接和主页面内容高，有助于搜索引擎优化。标题区域中包含太多CSS或JavaScript的页面可能会将主页内容深深地埋藏在HTML文件中，导致搜索引擎蜘蛛无法看到它，或者由于代码过多而对页面内容取消排名。
现代网页使用样式表来布置网页上的内容，图形和导航元素，保持HTML内容和视觉样式的清晰分离。
页面元素的选择性显示
6、响应式设计
响应式网页设计围绕三个概念构建：
“流畅”或灵活的页面布局，按照与浏览器窗口大小成比例的单位构建。
灵活的，相称大小的图像和视听媒体。
确定浏览器屏幕宽度并作出相应响应的CSS3媒体查询。
基于液体布局和比例测量：
“流动”布局 - 即基于浏览器窗口宽度扩展或缩小的网页设计，而不是设置为固定宽度。
响应式布局设计从液体布局网格开始，该网格基于百分比测量的比例集而不是固定像素宽度。按照浏览器窗口宽度的百分比指定列，排水沟，边框区域和其他空间（多列布局），整个设计根据需要展开或收缩以“流畅地”适应可用空间。更复杂的流体布局和CSS样式也使得排版与基于em（或rem）单位的单一基本类型尺寸成比例。但是，如图6.3所示，纯粹的比例液体布局并不能完全解决许多屏幕尺寸的问题，因为在小屏幕上，宽度的规格：100％会让您在小屏幕上出现荒谬压扁的布局，在大屏幕上出现荒谬拉伸的布局。
基于Em的印刷尺寸（图6.6）很重要，原因有两个：
如果用户的设备类型太大或太小，用户可以轻松普遍地重新调整印刷格式，这对于具有视觉障碍的读者来说是一种重要的辅助功能。
相对字体大小可以在CSS控件下轻松缩放，通常在全局页面缩放比例上使用font-size元素，如<html>or <body>标签。通过缩放em的值，您可以一次放大或缩小页面上的所有版式，这是快速响应式设计中的一项有用功能，您可以快速缩放页面的版式，从而轻松地匹配整个屏幕大小和像素密度。
比例图像和媒体
通过在图像或视频容器的CSS样式中指定max-width：100％，您可以按比例调整容器大小，并确保容器中的图像始终填充容器（最大宽度的100％），但始终不会超过容器的大小。因此，不仅页面布局变得流畅地填充浏览器窗口，而且所有图像也随着空间的规定而流畅地改变大小。
媒体查询
方向
长宽比
彩色或单色显示
分辨率为dpi
扫描（用于电视监视器，逐行扫描或隔行扫描
媒体查询提供了一种有条件地测试用户显示屏各个方面的方法，然后有选择地加载样式表，以响应这些条件并提供最合适的布局，排版和图形。这些用于特定范围屏幕尺寸的样式表通常由CSS3媒体查询触发，这些查询旨在以特定的最小尺寸或“断点”进行激活。
在您的台式机或笔记本电脑上，逐渐减小网页浏览器窗口的宽度，然后您会看到布局先挤压以适合框架，然后突然跳到新的布局样式，因为您将“断点”键入最低限度浏览器窗口的宽度。
响应式设计不仅仅是拉伸或小型化页面布局 - 而是关于如何为特定范围的屏幕尺寸提供最佳优化的内容和导航的独特布局。
大多数响应式设计至少使用三种不同的布局样式表，用于智能手机，平板电脑和更大的桌面或笔记本电脑屏幕的视口宽度断点。
响应式设计通常在每个响应式样式表中对不同网站的主要导航链接进行样式设置 - 例如，用于智能手机的紧凑型弹出式菜单，用于平板电脑屏幕的紧凑型链接布局以及用于桌面屏幕的更为广泛和传统的布局。
课堂提问：
1、为什么要使用HTML5新语义标签？
更注重于内容而不是形式
对人友好：更加语义化，高度描述性，更加直观，增加了代码的可读性
对计算机友好：浏览器更容易解析，搜索引擎更容易抓取文档内容
代码更加简洁
2、恰当的HTML代码顺序很重要，因为：
-
有时网站会因为技术问题无法展示CSS样式表，或手机或其他无线设备由于带宽原因无法下载CSS，此时如果你的HTML文件顺序逻辑清晰，浏览器仍然能够成功获取内容和链接。
-
HTML代码顺序是网页可读性的重要基础。规范的内容顺序能够让视觉障碍用户使用网页时顺利的找到需要的内容。
-
让网站的导航链接和主要网页内容在所有内容中排序较高，能够帮助网站优化搜索结果。一个头部区域放置了太多CSS和JavaScript文件的网页会误导搜索引擎无法发觉网页的主要内容。
3、RWD的三种技术
Liquid layouts and proportional measurements
Proportional images and media
Media queries
流式布局和比例测量
比例图像和媒体
媒体查询
4、HTML5 srcset属性使浏览器可以选择合适的图片尺寸（小、中、大），从而提高页面加载速度。
5、响应式布局：导航栏的变化
网友评论