您好,欢迎访问深圳市伟枫网络科技有限公司官方网站!我公司是专业的网站建设公司、网站设计公司、网站制作公司,如有需要请联系我们:13302961230
关于我们
News Center
新闻中心

Html5新标签之aside标签详解

发布时间:2017-11-22     阅读次数: 223 次

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)


最新更新动态

企业网站制作怎么突出网站特点?

 在网站制作过程中,我们应该了解用户的需求和用户的浏览行为,浏览习惯以及我们做网...

2019-09-19

深圳企业网站开发制作都有哪些类型?

企业网站开发制作一般都有哪些类型?互联网竞争如此的激烈,对于企业来说要想在成千上...

2019-09-19

2019年深圳企业网站制作应该有什么特色

2019年企业网站制作应该有什么特色?随着人们生活水平的提高,审美也慢慢在提升,...

2019-09-19

企业网站制作需要注意哪些方面?

大家都知道网站设计需要涉及很多因素,而且不同类型的网站,在设计时需要体现的内容也...

2019-09-19

企业网站制作普遍会有哪些需求?

随着互联网的高速发展,不难发现市场上新成立的企业和公司越来越多了,而这些企业都存...

2019-09-19

手机网站设计要怎么做来提升用户体验感?

目前,很多企业只是建设PC端的网站,而忽略了移动端这个偌大的市场。如今,很多人可...

2019-09-11

网站设计时经常会犯的这些小毛病,你知道吗

页面设计人员在设计网页时,往往会犯一些小毛病。把注意力放在其它功能上,比如追求一...

2019-09-11

中小企业建设网站的优势在哪里?

在互联网+时代,企业建立自己的网站已经是刻不容缓。无论大,中,小企业,都不能被这...

2019-09-11