上文我们介绍到的<a>标签,由于<a>标签可以用来跳转,所以我们可以拿<a>标签来生成网页的导航栏。

其实在实际运用中,<a>标签就经常会被用来生成导航栏。

导航栏在HTML中有一个语义化的标签<nav>,这个标签表示带有导航性质的内容,会有自己默认的特殊样式。语义化标签我们将会在后面讲到。

我们在这里先使用下<nav>标签,和<a>组合成一个导航栏。

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>生成导航栏</title>
</head>
<body>
<h1>使用nav标签生成导航栏</h1>
  <a href="https://www.baidu.com">百度</a><a href="http://im.qq.com/">QQ</a> <a href="http://www.mayacoder.com/index">码芽</a>
</body>
</html>

结果会是怎样的?

更多内容学习 就在码芽网 http://www.mayacoder.com/lesson/index

HTML&CSS基础学习笔记1.11—导航栏的更多相关文章

  1. HTML&CSS基础学习笔记—创建列表

    创建一张表格 很多时候我们需要在网页上展示一些数据,使用表格可以很好的来展示数据. 在HTML中<table>标签定义 表格. <table> </table> 添 ...

  2. CSS基础学习笔记

    一. CSS介绍 1. CSS概述:CSS(Cascading Style Sheets)指层叠样式表,极大提高了工作效率. 2. 基础语法: 属性大于1个之后,属性之间用分号隔开 如果大于1个单词, ...

  3. HTML&CSS基础学习笔记1.21-语义化标签

    语义化标签 “语义化”指的是机器在需要更少的人类干预的情况下能够研究和收集信息,让网页能够被机器理解,最终让人类受益. HTML 标签语义化是让大家直观的认识标签和属性的用途和作用,很明显<hx ...

  4. HTML&CSS基础学习笔记1.16-单元格间距和表格主体

    上一篇讲html学习笔记,讲过了合并单元格,那么今天就来介绍下如何控制单元格的间距,以及表格主体的相关知识. 单元格间距 在上个知识点的显示结果中你可能发现了,单元格与单元格之间有一小段空白.这是由& ...

  5. HTML&CSS基础学习笔记1.32-选择器是什么

    选择器是什么 选择器是CSS样式为了定位页面上的任意元素的一种方法. 选择器主要分为:元素标签选择器.通用选择器.类选择器.ID选择器.属性选择器.组合选择器.伪类选择器.伪元素选择器. 先做个了解, ...

  6. HTML&CSS基础学习笔记1.31-像素和相对长度

    像素和相对长度 之前的笔记中,我们提到过用属性width.height来设置图片的尺寸,它们的单元都是”px(像素)”.长度单位总结一下,目前比较常用到px(像素).em.% 百分比,要注意其实这三种 ...

  7. C#学习笔记8:HTML和CSS基础学习笔记

    <!-- 1.<P>...</P>段落标签 2.<br/>折行标签. 3.<img src="" height="*px& ...

  8. HTML&CSS基础学习笔记1.33-元素选择器

    元素选择器 最常见的 CSS 选择器是元素选择器.换句话说,文档的元素就是最基本的选择器: p { text-indent:10px; color:blue; } 什么情况下使用元素选择器,一般我们这 ...

  9. HTML&CSS基础学习笔记1.30-颜色的表达

    颜色的表述 在网页中的颜色设置是非常重要,CSS的属性有字体颜色(color).背景颜色(background-color).边框颜色(border)等,设置颜色的方法也有很多种: 1.英文命令颜色 ...

随机推荐

  1. [POJ] 2226 Muddy Fields(二分图最小点覆盖)

    题目地址:http://poj.org/problem?id=2226 二分图的题目关键在于建图.因为“*”的地方只有两种木板覆盖方式:水平或竖直,所以运用这种方式进行二分.首先按行排列,算出每个&q ...

  2. 认识Android

    安卓的特点开放性平等性无界性方便性硬件的丰富性 Android操作系统之中,一共将体系结构划分为四层:应用层(Application).应用框架层(Application Framework).系统运 ...

  3. Android中如何利用attrs和styles定义控件

    一直有个问题就是,Android中是如何通过布局文件,就能实现控件效果的不同呢?比如在布局文件中,我设置了一个TextView,给它设置了 textColor,它就能够改变这个TextView的文本的 ...

  4. uboot之board.c源码分析

    /lib_arm/board.c 主要完成了一些初始化的操作,最重要的是有start_armboot函数 _armboot_start地址为多少?? /* * * U-Boot code: 00F00 ...

  5. 深入理解linux网络技术内幕读书笔记(五)--网络设备初始化

    Table of Contents 1 简介 2 系统初始化概论 2.1 引导期间选项 2.2 中断和定时器 2.3 初始化函数 3 设备注册和初始化 3.1 硬件初始化 3.2 软件初始化 3.3 ...

  6. maven安装 maven上传jar包到库里面

    maven的安装与配置:http://pansanday.blog.163.com/blog/static/381662802012727103454743/ maven上传jar包到库里面: 将私有 ...

  7. brent ozar的sqlserver dba训练课程翻译——第二章:手动恢复数据库

    备份的唯一原因 备份的唯一原因是我们可以还原   当我第一次成为sqlserver数据库管理员,只要备份工作都能成功运行,我就会觉得一切都很好.我会查看sqlserver代理,保证那些作业都在运行,然 ...

  8. Grails教程

    1简介- Reference DocumentationVersion:null Table of Contents 1.1Grails 2.0有那些新特性?1.1.1面向开发的特性1.1.2核心特性 ...

  9. 限定checkbox最多选中数量

    一.概述: checkbox是我们在编写网页的时候经常使用的多选框,但是有些时候我们会限定最多选中的数量,如何限定呢? 下面这例子限定了最多选中两个元素,并且将这两个选中的源依次显示在一个文本框里: ...

  10. arclistsg独立单表模型文档列表

    arclistsg独立单表模型文档列表 (DedeCMS > 5.3) 名称:arclistsg 功能:类似arclist标签,获取指定单表模型(例如:分类信息),指定栏目,指定排序及呈现样式的 ...