欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!

 

一、 新的文档类型(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