理解HTML5的语义性元素

2017-07-05 14:07:45
admin
1480
最后编辑:admin 于 2018-05-01 18:07:02
曾讨论过HTML5的语义性元素,可以看到,如果使用HTML 5提供的布局元素,整个文档代码将具有更好的可理解性,便于被其他的应用程序分析和识别。
HTML 5提供了如下3种类型的语义性元素。
结构性语义元素:用来处理网页的语义性布局,比如定义网页的页眉、页脚、导航、内容显示部分等,通过CSS的样式控制,可以达到布局的效果。
   语义性块级元素:用来定义具有块级( block)效果的语义元素,比如显示图示、 边栏及会话信息。
   语义性内联元素:用来定义具有内联(inline)效果的语义元素,比如度量衡、进度条等。
结构化语义元素用来定义网页的结构,这与使用DIV进行布局非常类似,相关的HTML5元素如下所示。
   header元素:在页面上显示页眉信息,可以是标题栏、Logo栏等。
   footer元素:在页面上显示页脚信息,比如电子邮件签名、版权信息等。
   nav元素:在网页上显示一组链接。
   section元素:显示网页上的一个块,有自己的标题、页脚及内容区。
   article元素:用来显示页面的主体内容,比如博客文章、新闻内容等。
语义性的块元素是指具有块级结构的HTML 5页面元素,在HTML 5中具有语义性的块元素如下所示。
   aside:与主内容无关,但是又可以独立的块内容,一般用于显示广告、引用或侧边栏等。
    figure:用来组合多个元素,一般用来在网页上显示图像及其标题,表示网页上的一块独立的内容,即便将其移除后也不会对网页上其他内容造成影响。
   dialog:用来显示谈话或会话信息,在内部使用dt和dd表示对话的内容,块级元素总是会占据整行来显示,而内联元素则不会占据整行,通常用来在块级元素内部显示一些强调或特殊意义的信息。在HTML 5中提供了如下的几个具有语义性的内联元素。
   m:定义一段需要突出显示的文本内容。
   mark:定义需要进行标记的文本。
   time:显示日期时间,该元素有一个datetime属性用来标识能被电脑所识别的时间。
   meter:表达特定范围内的数值。可用于薪水、百分比、分数等。
   progress:表示进度。
相较于DIV+CSS的布局,页面上可以见到的基本上就是<div>元素,而使用HTML 5的语义性元素后,就可以看到页面内容的语义性提示,例如使用aside和article构建非主要内容的提示,如代码所示;
 
<aside class="grid_6">
        	<div class="prefix_1">
          	<article>
            	<!-- .box -->
              <div class="box">
                <h2>如何找到我们</h2>
                <h3><a href="#">我们的工作理念</a></h3>
                <p>自以为聪明的人往往是没有上场的。世界上最聪明的人是最老实的人。因为只有老实人才能经得起事实和历史的考验。</p>
                <a href="#" class="button">Read More</a>
              </div>
              <!-- /.box -->
            </article>
            <article class="last">
              <h2>留言表单</h2>
              <form action="" id="contacts-form">
                <fieldset>
                  <label><span>姓名:</span><input type="text" /></label>
                  <label><span>民子邮件:</span><input type="text" /></label>
                  <div class="wrapper"><span>留言:</span><textarea></textarea></div>
                  <div class="wrapper"><a href="#" onclick="document.getElementById('contacts-form').submit()" class="button">提交</a><a href="#" onclick="document.getElementById('contacts-form').submit()" class="button">重置</a></div>
                </fieldset>
              </form>
            </article>
          </div>
        </aside>

    aside在HTML 5中指明装载非正文类的内容,因此对于侧边栏或与主要内容相关的部分,可以使用aside进行声明,在aside内部放置了article标签,用来定义文章,可以是一篇新的文章或来自博客的文本内容,或其他的外部内容。article标签的内容独立于文档的其余部分。在article标签的内部,可以看到各种格式化用的HTML标签,这些语义性标签和CSS样式搭配使用,也可以创建出非常有创意的网页。
  • 在线客服
  • 关注微信
  • 联系电话
    • 欢迎咨询
    • 欢迎加入QQ群 303257430
  • 公众号:源宝网络
    • 联系电话及微信号 18902328227