HTML5 - 用<aside>添加附注

2015-08-26 发布：hangge 阅读：718

1，附注介绍和使用场景

新的<aside>元素表示它与周围的文本没有密切关系的内容。

（1）可以通过附注介绍另一个相关的话题。

（2）或对主文档中提出的某个观点进行解释。

（3）也可用来盛放广告、相关内容链接、醒目引文（pull quote）等。

当然，如果使用<div>元素也可以实现同样的功能，但使用<aside>可以让标记更富有意义。

2，使用样例（实现一个醒目引文）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>附注</title>
    <style>
        body {
          font-family: "Helvetica","Hiragino Sans GB","Microsoft Yahei", sans-serif;
          max-width: 650px;
        }
        
		.PullQuote {
		  float: right;
		  max-width: 300px;
		  border-top: thin black solid;
		  border-bottom: thick black solid;
		  font-size: 30px;
		  line-height: 130%;
		  font-style: italic;
		  padding-top: 5px;	
		  padding-bottom: 5px;	
		  margin-left: 15px;
		  margin-bottom: 10px;
		}

		.PullQuote img {
		  vertical-align: bottom;
		}
    </style>
</head>
<body>
  
<div class="Content">
    <p>一，前面讲了如何让程序申请后台短时运行。但这个额外延长的时间毕竟有限。所以从iOS7起又引入两种在后台运行任务的方式：后台获取和后台通知。</p>   
    <aside class="PullQuote">
		<img src="quotes_start.png" alt="Quote">
		Welcome to hangge.com
		<img src="quotes_end.png" alt="End quote">
	</aside>
    <p>二，前面讲了如何让程序申请后台短时运行。但这个额外延长的时间毕竟有限。所以从iOS7起又引入两种在后台运行任务的方式：后台获取和后台通知。</p>
    <p>三，前面讲了如何让程序申请后台短时运行。但这个额外延长的时间毕竟有限。所以从iOS7起又引入两种在后台运行任务的方式：后台获取和后台通知。</p>
</div>
 
</body>
</html>