HTML <nav>标签,语义化定义导航

<nav>标签

nav元素可以用于语义化定义导航,比如当前这个网页的导航条便是使用nav来定义的。nav元素为块级元素,包含起始标签和结束标签。

<nav></nav>

nav元素实例代码,及在线编辑器

下方的实例,将设计一个简单的导航条,其中,通过background-color、width和height来设置nav的样式:

<nav class='n1'>
<ul class='lt1'>
  <li><a href='https://www.x1y1z1.com/' target='_blank'>首页</a></li>
  <li><a href='https://www.x1y1z1.com/html/html_index.html' target='_blank'>HTML</a></li>
  <li><a href='https://www.x1y1z1.com/css/css_index.html' target='_blank'>CSS</a></li>
  <li><a href='https://www.x1y1z1.com/python/python_index.html' target='_blank'>Python</a></li>
  <li><a href='https://www.x1y1z1.com/javascript/javascript_index.html' target='_blank'>JavaScript</a></li>
</ul>
</nav>
<style>
  .n1{width:100%;height:50px;background-color:skyblue;}
  .lt1{list-style:none;line-height:50px;}
  .lt1 li{display:inline-block;margin-right:20px;}
</style>

全栈前端 / HTML教程 :


















Copyright © 2022-2024 笨鸟工具 x1y1z1.com All Rights Reserved.