别来无恙 2023-03-26
html5新标签之<aside>标签
如何定义<aside>及如何使用<aside>呢？
aside这个标签用来定义网页布局的侧栏容器，就相当于：div定义样式然后担当侧栏容器。直接让大家看个例子：
<!doctype html>
<meta charset="utf-8">
<html>
<head>
<style type="text/css">
body{ font-size:12px; padding:10px 0; background:#00CCCC}
*{ margin:0; padding:0;}
.main{ width:960px; height:auto; margin:0 auto}
aside{ text-align:center; padding:20px 0; background:#efefef; border:#CCCCCC 1px solid; border-radius:3px;-moz-border-radius:3px; -khtml-border-radius:3px; }
aside.left{ width:30%; height:600px; float:left;}
aside.right{ width:60%; height:600px; float:right;}
</style>
<title>Html5新标签之<aside>标签</title>
</head>
<body>
<div class="main">
<aside draggable="true" class="left">
左侧栏
</aside>
<aside contenteditable="true" class="right">
右侧栏。
</aside>
</div>
</body>
</html>这种定义方法带来的好处就是能够统一调用基本属性，其实这种布局通过div也能够实现，不过官方既然出了这个标签，那就肯定有别的用意。
这里大家可以略知即可，后面还有写几个成型的网站，再为大家一一详解。从例子得到，它也支持article的属性，因此可以得一结论：article、aside标签可以理解成为容器量身定做的一件衣服。
大家自己动手测试下，不愿意复制代码的可以下载附件：
<aside>标签支持哪些属性呢？
常用的属性：class、id、style，这三个就不用给大家介绍了。
在这里着重的给大家说aside标签的新属性及属性值：
contenteditable（规定是否允许用户编辑内容。值：true、false）
contextmenu（规定元素的上下文菜单。值：menu_id）
data-yourvalue（创作者定义的属性。HTML 文档的创作者可以定义他们自己的属性。必须以 “data-” 开头。值：value）
draggable（规定是否允许用户拖动元素。值：true、false）
hidden（规定该元素是无关的。被隐藏的元素不会显示。值：hidden）
item（用于组合元素。值：empty、url）
itemprop（用于组合项目。值：url、group value）
spellcheck（规定是否必须对元素进行拼写或语法检查。值：true、false）
subject（规定元素对应的项目。值：id）
