一、 新的文档类型(Doctype)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
你还在使用上面这个既麻烦又难记的XHTML文档类型吗? 如果还是这样的话,现在该切换到新的HTML5文档类型了。
<!DOCTYPE html>
二、 图形(Figure)元素
考虑用下面的代码来标记图片?
<mg src="path/to/image" alt="About image" />
<p>Image of Mars. </p>
很不幸,它不能用简单、富有语义关联的方式与图形的标题关联,因为它仅仅是用段落标记以及图片元素包裹着,而HTML5通过引进<figure>元素,改进了这一点。当结合 <figcaption> 元素使用时,我们就可以将图形标题与图形配对起来。代码如下:
<figure>
<img src="path/to/image" alt="About image" />
<figcaption>
<p>This is an image of something interesting. </p>
</figcaption>
</figure>
三、字体
一个响应式的字体大小应关联它的父容器的宽度,这样它才可以适应客户端的屏幕。
CSS3 规范引入了一个新的单位叫 rem,和 em 类相似,但相对于 HTML 元素来说, rem 更易于使用。
rem 是相对于 HTML 元素的,不要忘了重置 HTML 的字体大小:
1.html { font-size:100%; }
完成后,您可以定义响应式的字体大小,如下所示:
1.@media (min-width: 640px) { body {font-size:1rem;} }
2.@media (min-width:960px) { body {font-size:1.2rem;} }
3.@media (min-width:1100px) { body {font-size:1.5rem;} }
请注意,旧浏览器不支持 rem 单元,所以不要忘了实现一个替代。
如需转载,请注明文章出处和来源网址:http://www.divcss5.com/html5/h27600.shtml