Html5 各属性详解

Div

这个标签是我们见得最多、用得最多的一个标签。本身没有任何语义,用作布局以及样式化或脚本的钩子(hook)。

Section

section 应用的典型场景有文章的章节、标签对话框中的标签页、或者论文中有编号的部分。一个网站的主页可以分成简介、新闻和联系信息等几部分。其实我对这里传达信息很感兴趣,因为感觉 section 和下面要介绍的 artilce 更加适用于模块化应用,这个话题以后会出篇专门的文章来讨论,这里暂时略过。

Article

article 是一个特殊的 section 标签,它比 section 具有更明确的语义, 它代表一个独立的、完整的相关内容块。一般来说, article 会有标题部分(通常包含在 header 内),有时也会 包含 footer 。虽然 section 也是带有主题性的一块内容,但是无论从结构上还是内容上来说,article 本身就是独立的、完整的。

当 article 内嵌 article 时,原则上来说,内部的 article 的内容是和外层的 article 内容是相关的。例如,一篇博客文章中,包含用户提交的评论的 article 就应该潜逃在包含博客文章 article 之中。

注:div section article的区别

语义是从无到有,逐渐增强的。div 无任何语义,仅仅用作样式化或者脚本化的钩子(hook),对于一段主题性的内容,则就适用 section,而假如这段内容可以脱离上下文,作为完整的独立存在的一段内容,则就适用 article。原则上来说,能使用 article 的时候,也是可以使用 section 的,但是实际上,假如使用 article 更合适,那么就不要使用 section 。nav 和 aside 的使用也是如此,这两个标签也是特殊的 section,在使用 nav 和 aside 更合适的情况下,也不要使用 section 了。

对于 div 和 section、 article 以及其他标签的区分比较简单。对于 section 和 article 的区分乍看比较难,其实重点就是看看这段内容脱离了整体是不是还能作为一个完整的、独立的内容而存在,这里面的重点又在完整身上。因为其实说起来 section 包含的内容也能算作独立的一块,但是它只能算是组成整体的一部分,article 才是一个完整的整体。

Aside

aside元素在网站制作中主要有以下两种使用方法

1)被包含在article元素中作为主要内容的附属信息部分,其中的内容可以是与当前文章有关的相关资料、名次解释,等等。

<article>
  <h1>…</h1>
  <p>…</p>
  <aside>…</aside>
</article>

2)在article元素之外使用作为页面或站点全局的附属信息部分。最典型的是侧边栏,其中的内容可以使友情链接,博客中的其它文章列表、广告单元等。

<aside>
  <h2>…</h2>
  <ul>
    <li>…</li>
    <li>…</li>
  </ul>
  <h2>…</h2>
  <ul>
    <li>…</li>
    <li>…</li>
  </ul>
</aside>

Nav

nav元素是一个可以用来作为页面导航的链接组;其中的导航元素链接到其他页面或当前页面的其他部分。并不是所有的链接组都要被放进<nav>元素;例如,在页脚中通常会有一组链接,包括服务条款、首页、版权声明等;这时使用<footer>元素是最恰当的,而不需要<nav>元素。

一个页面中可以拥有多个<nav>元素,作为页面整体或不同部分的导航;下面是W3C给出的一个代码示例:

<body>

<h1>The Wiki Center Of Exampland</h1>

<nav>

<ul>

<li><a href="/">Home</a></li>

<li><a href="/events">Current Events</a></li>

...more...

</ul>

</nav>

<article>

<header>

<h1>Demos in Exampland</h1>

<p>Written by A. N. Other.</p>

</header>

<nav>

<ul>

<li><a href="#public">Public demonstrations</a></li>

<li><a href="#destroy">Demolitions</a></li>

...more...

</ul>

</nav>

<div>

<section id="public">

<h1>Public demonstrations</h1>

<p>...more...</p>

</section>

<section id="destroy">

<h1>Demolitions</h1>

<p>...more...</p>

</section>

...more...

</div>

<footer>

<p><a href="?edit">Edit</a> | <a href="?delete">Delete</a> | <a href="?Rename">Rename</a></p>

</footer>

</article>

<footer>

<p><small>© copyright 1998 Exampland Emperor</small></p>

</footer>

</body>

在这个示例中,我们可以看到<nav>不仅可以用来作为页面全局导航,也可以放在<article>标签内,作为单篇文章内容的相关导航链接到当前页面的其他位置。

时间: 2024-10-11 18:17:07

Html5 各属性详解的相关文章

Html5之高级-2 HTML5表单属性(属性介绍、属性详解)

一.属性介绍 属性介绍 - 有一些输入类型要求使用特定的属性才能显示效果,如前面提到过min,max,step. 其他输入类型需要使用一些属性来改进其他性能,或者决定验证过程的重要性.HTML5 标准中再原来的基础上增加了一些新的属性. - Placeholder 属性 - Nultiple 属性 - Autofocus 属性 - Form 属性 二.属性详解 Placeholder 属性 - Placeholder 属性通常用于search输入类型,也可以用在文本域.它表示一个简单提示.单词或

HTML5基础与Meta http-equiv属性详解

HTML基础知识 <!DOCTYPE> 声明帮助浏览器正确地显示网页. <html> 元素定义了整个 HTML 文档. 现代网站都使用meta来声明页面内容的编码格式,我们推荐这种方式 : <meta http-equiv="Content-Type" content="text/html; charset=GBK"> 参考: head元素(head)及其包含的子元素 <head>    定义关于文档的信息. <

HTML5之Viewport详解

做移动Web开发也有一年多的时间了,虽然手机上浏览器对于PC上来说很友好了,但是手机各种设备的显示尺寸分辨率大小不一也要花大心思兼容它们. 关于HTML5中Viewport的文章Google,百度一搜有很多.记录一些自己理解的内容: Viewport属性详解 Viewport:字面意思为视图窗口,在移动 web 开发中使用.表示将设备浏览器宽度虚拟成一个特定的值(或计算得出)这样利于移动 web 站点跨设备显示效果基本一致. 基础写法: <meta name="viewport"

css动画-animation各个属性详解(转)

CSS3的animation很容易就能实现各种酷炫的动画,虽然看到别人的成果图会觉得很难,但是如果掌握好各种动画属性,做好酷炫吊炸天的动画都不在话下,好,切入正题. 一.动画属性: 动画属性包括:①animation-name,②animation-duration,③animation-timing-function, 以下是各属性详解: 1.animation-name:指定要绑定到选择器的关键帧的名称. 2.animation-duration:定义动画完成一个周期需要多少秒或毫秒 3.a

jQuery Event.which 属性详解

jQuery Event.which 属性详解 which属性用于返回触发当前事件时按下的键盘按键或鼠标按钮. 对于键盘和鼠标事件,该属性用于确定你按下的是哪一个键盘按键或鼠标按钮. which属性对DOM原生的event.keyCode和event.charCode进行了标准化. 适用的事件类型主要有键盘事件:keypress.keydown.keyup,以及鼠标事件:mouseup.mousedown. 该属性属于jQuery的Event对象(实例). 语法 jQuery 1.1.3 新增该

WPF依赖属性详解

WPF依赖属性详解 WPF 依赖属性 英文译为 Dependency Properties,是WPF引入的一种新类型的属性,在WPF中有着极为广泛的应用,在WPF中对于WPF Dependency Properties 的使用贯穿样式的使用,数据绑定,动画等等,在刚刚接触Dependency Properties的时候可能觉得有些奇怪,但是,当你了解他要解决的问题的时候,你可能就不觉得奇怪了.Dependency Properties第一个要解决的问题就是控件的属性共享问题,由于大部分的WPF控

Hibernate fetch属性详解

主要参考 :http://4045060.blog.51cto.com/4035060/1088025 一.hibernate抓取策略(单端代理的批量抓取fetch=select(默认)/join) 1)保持默认,同fetch="select" <many-to-one name="group" column="group_id" fetch="select" /> 另外发送一条select语句抓取当前对象关联实体

MWPhotoBrowser 属性详解 和代理解释

--------0.MWPhoto简单属性解释---------------- MWPhoto *photo = [MWPhoto photoWithURL:[NSURL URLWithString:@"http://farm4.static.flickr.com/3629/3339128908_7aecabc34b.jpg"]]; photo.caption = @"在将photo添加到数组中时,可以在这里设置标题名字"; photo = [MWPhotophot

Android textAppearance的属性设置及TextView属性详解

textAppearance的属性设置 android:textAppearance="?android:attr/textAppearanceSmall" android:textAppearance="?android:attr/textAppearanceMedium" android:textAppearance="?android:attr/textAppearanceLarge" TextView属性详解 android:autoLi