html5新标签 aside,Html5新标签之aside标签详解

这节，我为大家介绍下：html5新标签之标签

如何定义及如何使用aside呢？

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

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;}

Html5新标签之<aside>标签

左侧栏

右侧栏。

这种定义方法带来的好处就是能够统一调用基本属性，其实这种布局通过div也能够实现，不过官方既然出了这个标签，那就肯定有别的用意。

这里大家可以略知即可，后面还有写几个成型的网站，再为大家一一详解。从例子得到，它也支持article的属性，因此可以得一结论：article、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)

html5新标签 aside,Html5新标签之aside标签详解相关推荐

win7计算机服务项,新萝卜家园win7旗舰版服务项的详解
在win7系统里面会有非常多的服务项的,而我们想要提高系统的运行速度,优化一些不必要的服务项目是很关键的,但是在系统里面这么多的服务项里面,哪些服务项对应哪些功能,哪些服务项又可以关闭的呢.下面我们就 ...
html5走格子游戏,JS/HTML5游戏常用算法之碰撞检测地图格子算法实例详解
JS/HTML5游戏常用算法之碰撞检测地图格子算法实例详解发布时间:2020-09-26 20:42:24 来源:脚本之家阅读:112 作者:krapnik 本文实例讲述了JS/HTML5游戏常 ...
html a href=mailto 发件人怎么设置,a标签创建mailto链接发送电子邮箱用法详解
在html5中,利用标签的mailto可以创建发送邮件到一个或多个电子邮箱的超链接功能,其用法详解如下: 标签mailto最常见用法这个用法是最常见的用法,在大多数情况下,我们都会使用这个方式发送电 ...
html中a标签设置红色,css 里面，a标签里面的字体颜色怎么调?请详解！谢谢.
css 里面,a元素和所有元素.6.elementelement,例如:div p,选择元素内部的所有元素.7.element>element,例如:div>p,选择父元素为元素的 ...
HTML5中新增的文件API和拖拽API详解
文件API 在HTML5之前的,从网页上传文件一次只能上传一个文件,而且也无法对要上传的文件做更深一步的操作. HTML5提供了一个系列关于文件操在的API,通过使用这些API,对于从Web页面访问本 ...
HTML meta 标签遇到meta http-equiv=refresh content=0; url=详解
页面定期刷新,如果加url的,则会重新定向到指定的网页,content后面跟的是时间(单位秒),把这句话加到指定网页的<head></head>里一般也用在实时性很强的应用中 ...
video 标签内音量_HTML5 视频(Video)元素使用详解
很多站点都会使用到视频. HTML5 提供了展示视频的标准. 检测您的浏览器是否支持 HTML5 视频: Web站点上的视频直到现在,仍然不存在一项旨在网页上显示视频的标准.今天,大多数视频是通过插 ...
html中的行内标签吗,HTML标签中行内元素和块级元素详解
本文主要和大家详细介绍了HTML常用的标签中行内元素和块级元素,需要的朋友参考下吧,希望能帮助到大家. 块元素(block element) HTML标签分类明细 * address - 地址 * b ...
CSS3新单位vw，vh，vmin，vmax详解
1,vw,vh,vmin,vmax是由视窗Viewport大小来决定的,单位1,代表1%,是一种相对单位,只要是为响应式适配视窗的一种解决方案: vw:view width(视窗宽度)的百分比,1vw ...
easyui打开新的选项卡_Jquery Easyui选项卡组件Tab使用详解（10）
本文实例为大家分享了Jquery Easyui选项卡组件的实现代码,供大家参考,具体内容如下加载方式 Class加载 tab1 tab2 tab3 JS调用加载 tab1 tab2 tab3 $(f ...

html5新标签 aside,Html5新标签之aside标签详解

html5新标签 aside,Html5新标签之aside标签详解相关推荐

最新文章

热门文章