zoukankan      html  css  js  c++  java
  • HTML5学习笔记(二):用于构建页面的语义元素

    1、语义元素

    大多数HTML5语义元素的用途是标识页面中的一个内容区块,为标注的内容赋予额外的含义,不真正做任何事。

    2、使用语义元素的原因

    • 容易修改和维护;
    • 无障碍性(现代Web设计的一个重要主题);
    • 对搜索引擎的友好性高;
    • 适应未来的浏览器和Web设计工具的发展趋势

    3、语义元素的来历

    在发明HTML5之前,其发明者花很长时间研究已有的网页,还研读了谷歌对十几亿个网页的统计信息。谷歌公布的这个调查分析并列出了Web作者在自己网页中使用的类名,将Web页面中一些共性的东西(比如页面都有页眉、页脚导航菜单等)从人们普通的做法中提取出相应的语义。发明者依据这个调查制定成了规范。

    4、浏览器对语义元素的支持情况

    HTML5的语义元素基本得到了所有现代浏览器的支持,最大的绊脚石还是IE9之前的Internet Exploer。

    浏览器在遇到不认识的元素时,会把它们当成内联(inline)元素挤在一起,为了解决这个问题,可为HTML5的这些语义元素添加一个样式,可转化为块级元素:

    article,aside,figure,figcaption,header,footer,nav,main,section,details,summary {
           display:block;    
    }

    在支持HTML5元素的浏览器中并不会有影响。

    5、用语义元素构建页面

    • <article>元素

      这个元素表示一个完整的、自成一体的内容块,比如博客文章或者新闻报道。<article>元素应该包含所有相关的内容,包括标题、作者署名以及正文,但不包含<footer>元素。例:

    <article>
        <header>
               <h1>This is blog's title</h1>
        </header>
        <div class="content">
               ......
        </div>
    </article>
    
    <footer>
        ......
    </footer>    
    • aside元素:用来添加附注  

      此元素表示与它周围的文本无密切的内容,可以用此元素介绍另一个相关的话题,或者对主文档提出的某个观点进行解释;另外,也可以用<aside>元素来盛放广告、相关内容或者链接,甚至可以添加醒目引文。

    <aside>
      <img src="quotes_start.png" alt="quote" /> <!--,开始引用符号的图片-->
      <span>We don't know how the universe started, so we can't be sure it won't just end, maybe today.</span>
      <img src="quotes_end.png" alt="quote" /><!--结束引用符号的图片-->
    </aside>
    • <figure>+<figcaption>元素

      为页面添加插图(与普通图片区分),插图是与文本相关的,文本会提到它,且常常伴有图题(<figcaption>)。

    <figure class="FloatFigure">
       <img src="human_skull.jpg" alt="Human skull">
       <figcaption>Will you be the last person standing if one of these apocalyptic scenarios plays out?</figcaption>
    </figure>
    • <header>元素

      一个网页中可以包含多个<header>元素,有两种使用方式,差别并不是很大。

      一种是用它标注内容的标题,此种情况除非必要,否则不必使用,只有在内容标题还附带了其他信息的情况下,才有必要,例:

    <header>
        <h1>......</h1>
        <p>......</p>
        <p>......</p>
    </header>

      另一种是它标注网页的页眉。

    • <footer>元素

      HTML5规定,只能在<footer>元素中放一些网站的版权信息、作品来源、法律限制以及链接之类的信息,不能放太多其他内容。

      为了不违反HTML5的规定且在页面底部放入更多内容,可用如下:

    <div class="fatfooter">
        <aside>
              <img  src="..." />
              <p>......</p>
        </aside>
        <footer>
              <p>......</p>
        </footer>
    </div>
    • <nav>元素:标注导航链接
    <nav>
       <ul>
              <li><a href="#">......</a></li>
              <li><a href="#">......</a></li>
              <li><a href="#">......</a></li>
       </ul>
    </nav>
    • <section>元素

      可用于:和页面主体内容并列的小内容块、独立性内容(但并不是文章)、分组内容等。

    • <details>和<summary>元素:折叠栏(但目前只有Chrome、Opera和Safari浏览器支持)
    <details>
         <summary>Section #1</summary>
         <p>......</p>
    </details>
    • <main>元素

      用于标识网页的主要内容,一个页面只能有一个此元素,对屏幕阅读器非常重要。

  • 相关阅读:
    常用的站内搜索技术比较
    .NET中读取csv文件内容
    C#编码规范
    处理模型——检测光标是否在模型上
    数据库如何规范命名
    处理顶点——绘制三角形,线和点
    处理模型——根据地形正确倾斜模型
    处理顶点——使用索引移除冗余顶点
    处理顶点——在三角形上添加纹理
    处理模型——通过定义一个自定义的TypeWriter和TypeReader将多个对象存储在Tag属性中
  • 原文地址:https://www.cnblogs.com/zhaoyingli/p/5377753.html
Copyright © 2011-2022 走看看