零基础html5网页开发教程第008期 导航栏开发案例

简介: 零基础html5网页开发教程第008期 导航栏开发案例

小伙伴们大家好,欢迎收看刘金玉编程第八期。本期我们主要做一个导航栏的一个。导航栏,有的人又喜欢叫菜单栏。确实和菜单有点像。导航栏几乎会用在所有的网站中。那么导航栏是怎么开发出来的呢?今天我们就来开发一个最为简单的导航栏。


重要知识点:链接标签<a>

基本举例<a href="index.html">首页</a>这是最基本的标签的使用举例。我们可以形成一个最为简单的链接文字。用在浏览器中,会在同一个窗口标签中进行跳转网页。<a>标签还有其它更为有用的属性,以下我们来简单介绍一下:


  • href属性:

链接的目标,如果要链接外部网站,那么要加http://www.bcczcs.com


  • target属性:

使用_blank,可以打开新窗口链接出去。默认如果没写,意味着在本窗口打开链接。


<a>标签在不同的css包装下,可以形成完全不同的效果。我们可以通过普通的点击效果进行跳转。也可以使用js控件a标签来进行跳转。


总结

1、掌握链接标签<a>  成对出现的,标签的中间写链接的文字

2、掌握href属性

3、掌握target属性


文件结构:


index.html源代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>刘金玉编程首页</title>
  </head>
  <body>
    <div id="wrapper">
      <div class="header">
        <div class="nav">
          <a href="index.html">首页</a>
          <a href="#">编程开发</a>
          <a href="#">人生旅程</a>
          <a href="#">摄影摄像</a>
          <a href="#">网赚技巧</a>
          <a href="#">电脑技巧</a>
          <a href="http://ljy.kim" target="_blank">编程创造城市</a>
        </div>
      </div>
      <div class="main"></div>
      <div class="footer"></div>
    </div>
  </body>
</html>
相关文章
|
3月前
|
存储 移动开发 前端开发
HTML基础知识:构建网页的基石
【10月更文挑战第11天】HTML基础知识:构建网页的基石
263 0
|
21天前
HTML在线扫雷游戏网页源码
HTML在线扫雷游戏网页源码是一款基于HTML+CSS+JavaScript开发的在线扫雷小游戏单页源码,为用户提供了一个无需安装即可在浏览器中直接玩的扫雷游戏。该游戏的源码不仅包含了完整的游戏逻辑,还具备丰富的界面设计和用户交互功能,使得玩家能够轻松上手并享受扫雷带来的乐趣。
60 22
|
1月前
|
数据采集 前端开发 数据挖掘
利用 html_table 函数轻松获取网页中的表格数据
本文介绍了如何使用 R 语言中的 `html_table` 函数结合代理 IP 技术,轻松提取网页表格数据并规避反爬机制。通过设置代理和请求头,示例代码展示了如何从 58 同城采集租房信息并保存为 CSV 文件。该方法适用于需要频繁采集数据的场景,确保数据采集的高效和稳定性。
利用 html_table 函数轻松获取网页中的表格数据
|
5月前
|
数据采集 移动开发 前端开发
HTML代码的革命:语义化标签的魅力,让你的网页结构焕然一新!
【8月更文挑战第26天】本文探讨了Web前端开发中的语义化标签概念及其重要性。语义化标签通过使用具有明确含义的HTML标签来构建页面结构,提升了网页的可访问性及搜索引擎优化效果,并增强了代码的可读性和维护性。文章还讨论了实际开发中遇到的问题及未来发展趋势。
74 0
|
4月前
|
JavaScript 前端开发 容器
用HTML DOM实现有条件地渲染网页元素(上)
用HTML DOM实现有条件地渲染网页元素(上)
|
4月前
|
存储 JavaScript 前端开发
用HTML DOM实现有条件地渲染网页元素(下)
用HTML DOM实现有条件地渲染网页元素(下)
|
6月前
|
移动开发 前端开发 JavaScript
基于 HTML5 和 Canvas 开发的在线图片编辑器
基于 HTML5 和 Canvas 开发的在线图片编辑器
121 0
|
3月前
|
数据安全/隐私保护 C++
【HTML】构建网页的基石
本文介绍了HTML的基本概念和常用标签,包括HTML文件的基本结构、常见标签(如标题、段落、换行、图片、超链接等)、表格与表单的使用方法,以及无语义标签div和span的特性。通过具体示例展示了如何在VS Code中快速生成HTML框架及各标签的应用场景,帮助初学者快速掌握HTML的基础知识。
68 1
【HTML】构建网页的基石
|
4月前
|
Web App开发 前端开发 JavaScript
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
|
5月前
|
移动开发 HTML5
可达鸭举牌网页版本在线生成源码html5
可达鸭举牌网页版本,在线生成源码,点击分享即可制作DIY自己的举牌文字网页,需要GIF动图的自行用GIF图片录制工具录制下来。
72 1

热门文章

最新文章