您好,欢迎访问上海华夕网络科技有限公司官方网站!我公司专业提供上海网站建设,网站SEO优化,百度关键词优化,让客户花较少的钱做到满意的效果,咨询热线:18055602260
关于我们

Html5新标签之aside标签详解

发布时间:2016-10-21   编辑:华夕网络  阅读次数:

html5新标签之<aside>标签

如何定义<aside>及如何使用aside呢?

aside这个标签用来定义网页布局的侧栏容器,就相当于:div定义样式然后担当侧栏容器。直接让大家看个例子:


<!doctype html>
<meta charset="utf-8"> 
<html> 
<head> 
<!--尊重他人劳动果实,转载请注明出处:今标网络 021360.net --> 
<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新标签之&lt;aside&gt;标签</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)


如没特殊注明,文章均为华夕网络原创,转载请注明来自 http://www.seoyk.cn/

华夕学院栏目分类

大家都在浏览

这些是最新的