页面布局基础3

HTML 5的结构元素

1.HTML5引入语义上的结构性元素来配置网页区域，这些新的块级元素并不是取代div元素，而是和div及其他元素结合使用。

• header元素。包含网页文档或者文档中的一个区域(如section或article)的标题。
• hgroup元素。hgroup元素分组标题级别的标记。
• nav元素。包含导航链接。
• footer元素。包含网页、section、article、段落或blockquote元素的footer内容。

2.更多HTML5结构元素

• section元素。包含文档的section，比如章节或主题。section是块显示元素。
• article元素。包含一个独立条目，比如博客文章、评论或电子杂志文章。article是块显示元素。
• aside元素。块显示元素，可包含sidebar，note或其他补充内容。
• time元素。代表时间或日期，标记文章的发表日期时特别有用。通过可选的datetime属性，可用一种机器可识别的格式显示日历日期或时间。

CSS对打印和移动Web的支持

1.为浏览器显示创建一个外部样式样式表和打印设置创建另一个样式表，现代浏览器会根据在屏幕上显示还是打印显示选择正确样式表。用link元素将样式表关联到网页时，要用到media属性。

值用途screen默认值：指出样式表配置的是彩色计算机显示器上
浏览器窗口的显示print指出样式表配置的是打印时的格式handhelp指出样式表配置的是手持移动设备上的显示通常，我们会在打印样式表中使用display:none属性防止打印条幅广告、导航栏或者其他无关区域。在打印样式表中使用pt为单位设置字号，可更好控制打印文本。

2.可单独创建一个样式表来配置在移动设备上显示，设置media="handhelp"即可。

3.移动设备设计注意事项

• 屏幕较小。CSS3允许执行媒体查询。例如，面向屏幕宽度小于480像素：

<link href="mobile.css" rel="stylesheet" media="screen and (max-width:480px)">

• 低带宽。开发时能不用图片就不用。
• 字体、颜色和媒体问题。考虑使用em或百分比配置字号。许多移动设备不支持Adobe Flash。
• 较弱的控制，有限的处理器和内存。

4.移动设计核对表

• 注意小屏幕尺寸和带宽问题
• 无关紧要的内容(如补充内容)不用显示(使用display:none;)
• 将背景图片替换为针对小屏幕显示优化图片
• 为图片提供alt文本
• 使用单列页面布局
• 选择能最大化对比度的颜色