1、HTML5的新语义元素
OS X 词典中关于”语义”的定义如下:
"含义在语言和逻辑方面的分支"。
1-1、main元素
main 标签用来声明主内容区
无论是页面的主要内容,还是web应用中的主要部分都应该放在main元素中
文档的主内容指的是文档中特有的内容,导航链接、版权信息、站点标志、广告和搜索表单等多个文档中重复出现的内容不算主内容(除非网页或文档的主要内容就是搜索表单)。
注意:
每个页面的主内容区只能有一个(两个主内容就没有主内容),而且不能作为article、aside、header、footer、nav或header等其他HTML5语义元素的后代。上诉的这些元素倒是都可以放在main元素中。
例子
<main>
<h1>Web Browsers</h1>
<p>Google Chrome、Firefox 以及 Internet Explorer 是目前最流行的浏览器。</p>
<article>
<h1>Google Chrome</h1>
<p>Google Chrome 是由 Google 开发的一款免费的开源 web 浏览器,于 2008 年发布。</p>
</article>
<article>
<h1>Internet Explorer</h1>
<p>Internet Explorer 由微软开发的一款免费的 web 浏览器,发布于 1995 年。</p>
</article>
<article>
<h1>Mozilla Firefox</h1>
<p>Firefox 是一款来自 Mozilla 的免费开源 web 浏览器,发布于 2004 年。</p>
</article>
</main>
1-2、section元素
section 标签定义文档的节(section、区段)。比如章节、页眉、页脚或文档中的其他部分。
使用技巧:
类似于div,如果配有自然标题则使用section,如果没有则建议使用div
例子
<section>
<h1>测试标题</h1>
<p>这是一段测试的内容</p>
</section>
1-3、nav元素
nav标签定义导航链接的部分。 用来替代ul
例如
<nav>
<li>HTML</li>
<li>CSS</li>
<li>JAVASCRIPT</li>
<li>NODE.JS</li>
</nav>
1-4、article元素
article标签规定独立的自包含内容
一篇文章应有其自身的意义,应该有可能独立于站点的其余部分对其进行分发。
article 元素的潜在来源:
论坛帖子
报纸文章
博客条目
用户评价
注意:
article的范围小于main
例子
<article>
<h1>Internet Explorer 9</h1>
<p>Windows Internet Explorer 9(简称 IE9)于 2011 年 3 月 14 日发布.....</p>
</article>
1-5、aside元素
aside标签定义其所处内容之外的内容。aside元素包含的内容与旁边的内容不相关。
实践中,我经常用它包装侧边栏(在内容适当的情况下)。这个内容也适合包装突出引用、广告和导航元素。基本上任何与主内容无直接关系的,都可以放这里边。对于电子商务站点来说,我会把“购买了这个商品的用户还购买了”的内容放在aside里面。
例子
<aside>
<a href=""><img src="" alt="这是一个游戏链接图片" /></a>
</aside>
1-6、figure和figcaption元素
figure 元素包装一个小小的独立区块,可以是注解、图示、表格、照片、代码等等。
figcaption用来被包含在figure元素中,提供一个小标题
例子
<figure>
<figcaption>帅帅的我</figcaption>
<img src="" alt="一张帅哥的照片" />
</figure>
1-7、details和summary元素
details标签用来描述文档或文档某个部分的细节。
summary标签包含details元素的标题。
效果为标题可见,当用户点击的时候会显示详细信息
例子
<details>
<summary>热销商品</summary>
<p>衣服</p>
<p>水果</p>
<p>书籍</p>
</details>
1-8、header元素
标签定义文档的页眉(介绍信息)。
实践中,可以将header元素用在站点页头作为“报头”,或者在article元素中用作某个区块的引介区。他可以在一个页面中出现多次(比如页面中每个section)中都可以有一个header。
例子
<!--对主页的介绍-->
<header>
<h1>欢迎来到我的博客</h1>
<p>my name is Aresnine. if you need my help please write it down.</p>
</header>
1-9、footer元素
footer标签定义文档或者节的页脚。
footer元素应当含有其包含元素的信息。
页脚通常包含文档的作者、版权信息、使用条款链接、联系信息等等。不过,规范规定作者的联系信息应该写在address元素中
例子
<footer>
<p>Posted by: W3School</p>
<p>Contact information: <a href="mailto:someone@example.com">someone@example.com</a>.</p>
</footer>
1-10、address元素
address标签定义文档或文章的作者/拥有者的联系信息
如果address元素位于body元素内,则他表示文档文档信息
如果address元素位于article元素内,则他表示文章的联系信息
address标签不应该用于描述通讯地址,除非他是联系信息的一部分
address元素通常同其他信息被包含在footer元素中
例子
<address>
Written by <a href="mailto:webmaster@example.com">Donald Duck</a>.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>
总结
凭常识选择元素
这里删除了很多内部包含的内容,因为我们想聚焦于结构。相信你也觉得从标记中找出不同
的区块并不难。不过,此时此刻我还是想提供一个实用的建议。某一时刻选错了标记并不意味着
世界末日。比如,在前面的例子中是用
的地方用了,我也不觉得有什么罪恶感。W3C制定规范的人不会追究你。你要做的就是运
用一点点常识。也就是说,如果你可以在合适的地方使用
无障碍方面的好处。
<article>
<!--页眉部分-->
<header class="Header">
<a href="/" class="LogoWrapper">
<img src="img/SOC-Logo.png" alt="文章的logo" />
</a>
<h1 class="Strap">文章的一级标题</h1>
</header>
<!--第一个小节部分,注意这里不能使用main因为main比article大-->
<section class="IntroWrapper">
<p class="IntroText">
文章段落
</p>
<!--这里用了一个关于展开项-->
<figure class="MoneyShot">
<img class="MoneyShotImg" src="img/scones.jpg" alt="Incrediblescones" />
<figcaption class="ImageCaption">展开项展示的标题</figcaption>
</figure>
</section>
<p>单独的一个段落</p>
<section class="Ingredients">
<h3 class="SubHeader">小节的三级标题</h3>
</section>
<section class="HowToMake">
<h3 class="SubHeader">小节的三级标题</h3>
</section>
<footer>
文章的页脚部分
<a href="http://rwd.education">一个链接元素</a>
<address><a href="http://benfrain">作者的联系链接</a></address>
</footer>
</article>