HTML5语义标签
来源:互联网 发布:甲骨文java培训班骗局 编辑:程序博客网 时间:2024/06/06 12:45
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>
- HTML5语义化标签
- html5 语义化标签
- html5语义化标签
- html5语义化标签
- html5语义化标签
- html5语义化标签
- html5语义化标签
- html5语义化标签
- html5语义化标签
- html5语义化标签
- html5新增语义标签
- html5语义化标签
- html5语义化标签
- html5语义化标签
- html5语义化标签
- html5语义化标签
- HTML5语义化标签
- html5语义化标签
- java的String类理解
- 针对recyclerView的adapter封装
- ndarray数组的索引与切片
- Linux下开发文件规范常用处理
- JVM知识点总览-中高级Java工程师面试必备
- HTML5语义标签
- JAVA方法参数
- Android Gradle项目同步失败错误
- Python3之Django Web框架F对象,Q对象
- Asia “New Retail” Forum 2018亚洲新零售峰会举办通知
- 1, 从PHP 到python 到Django
- JAVA架构师入门教学视频,linux nginx dubbox zookeeper activemq storm FastDFS等
- openssl编程之服务端
- pdaf添加实例(2p7,type2)