前端祖传三件套HTML的HTML5之新语义/结构元素 header/footer/article/aside/nav

HTML5 新语义/结构元素——header、footer、article、aside 和 nav

在 HTML4 中，元素通常只有少数几个，比如

和等等。而在 HTML5 中，增加了一些新的语义/结构元素，下面会为大家介绍其中五个：header、footer、article、aside 和 nav。

header 元素

header 元素用于定义页面或者区块的页头。通常包括网站标题、标志、导航菜单等等。下面是一个简单的例子：

header>
    
  h1>
    My Website/h1>
    
  nav>
    
    a href="#">
    Home/a>
    
    a href="#">
    About/a>
    
    a href="#">
    Contact/a>
    
  /nav>
    
/header>
    

在这个例子中，我们使用元素来定义整个页面的页头部分，其中包括网站标题和导航菜单。

footer 元素

footer 元素用于定义页面或者区块的页脚。通常包括版权信息、联系方式、所属组织等等。下面是一个简单的例子：

footer>
    
  p>
    Copyright © 2021 My Website.
    All rights reserved./p>
    
  p>
    Contact: contact@mywebsite.com/p>
    
/footer>
    

在这个例子中，我们使用元素来定义整个页面的页脚部分，其中包括版权信息和联系方式。

article 元素

article 元素用于定义页面主体中的独立内容单元（比如博客文章、新闻报道等等）。下面是一个简单的例子：

article>
    
  h2>
    How to Learn HTML5/h2>
    
  p>
    HTML5 is a powerful tool for web developers. 
     In this article, we will explore some tips and tricks 
     to help you learn HTML5 quickly and efficiently./p>
    
/article>
    

在这个例子中，我们使用元素来定义一篇博客文章，其中包括标题和正文内容。

aside 元素

aside 元素用于定义页面主体中的附加内容单元（比如侧边栏内容、广告等等）。下面是一个简单的例子：

main>
    
  article>
    
    h2>
    How to Learn HTML5/h2>
    
    p>
    HTML5 is a powerful tool for web developers. /p>
    
  /article>
    
  aside>
    
    h3>
    Related Articles/h3>
    
    ul>
    
      li>
    a href="#">
    10 Tips for Web Design/a>
    /li>
    
      li>
    a href="#">
    CSS3 for Beginners/a>
    /li>
    
    /ul>
    
  /aside>
    
/main>
    

在这个例子中，我们使用元素来定义页面侧边栏内容，其中包括相关文章链接列表。

nav 元素

nav 元素用于定义导航菜单。下面是一个简单的例子：

nav>
    
  a href="#">
    Home/a>
    
  a href="#">
    About/a>
    
  a href="#">
    Contact/a>
    
/nav>
    

在这个例子中，我们使用元素来定义整个页面的导航菜单。

总结

HTML5 的新语义/结构元素可以更好地描述页面内容的结构和意义，使得开发者能够更好地进行页面设计和优化。header 元素用于定义页面或者

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！