美文网首页web进阶
web进阶之二:写一个简单的网页。

web进阶之二:写一个简单的网页。

作者: 甚得朕心 | 来源:发表于2018-09-07 08:17 被阅读55次

我们需要怎么写

  我们要心中有个想法,我这个网页要有什么,有哪些功能。不过一般都会有美工给你做好图或者根据客户需要做一个效果图,然后就是设计,实现各种各样的功能。在这里我们只做一个简单的网页:

  • 实现网页内顶部和底部的跳转
  • 实现网页的跳转
  • 插图片。
    直接上代码:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>韩磊—《等待》</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <!--
           1.写外部样式表时,要注意样式表的文件名要以.css结尾,可以用sublime或者webstorm编辑好了再保存
           2.链接外部样式表时,要在<head>内,然后写上链接的标签。
    -->
</head>
<body>
    <center>
    <a href="#bottom">去底部</a>|<a href="#tar">去歌词部分</a>
        <a name="top"></a>
    <h1>甚得朕心之韩磊——等待</h1>
    <hr/>
    <h2>等待</h2>
    <a href="https://baike.baidu.com/item/%E9%9F%A9%E7%A3%8A/32383?fr=aladdin" target="blank">韩磊</a>
    <!--上一行为超链接,target表示目标为一个空的网页,如果不写将会在本网页重新加载链接网页-->
    <p>
        <a name="tar"></a>
        我为什么还在等待<br>
        我不知道为何仍这样痴情<br>
        明知辉煌过后是暗淡<br>
        仍期待着把一切从头来过<br>
        我们既然曾经拥有<br>
        我的爱就不想停顿<br>
        每个梦里都有你的梦<br>
        共同期待一个永恒的春天<br>
        春天<br>
        <img src="pic02.jpg"> <br>
        我为什么还在等待<br>
        我不知道为何仍这样痴情<br>
        明知辉煌过后是暗淡<br>
        仍期待着把一切从头来过<br>
        我们既然曾经拥有<br>
        我的爱就不想停顿<br>
        每个梦里都有你的梦<br>
        共同期待一个永恒的春天<br>
        春天<br>
        <a href="http://s.music.so.com/s?q=%E7%AD%89%E5%BE%85#src=so" target="blank">点击试听</a><br>
        <img src="pic01.jpg" width="300" height="450" > <br>
    </p>
        <hr/>
        <a href="#top">返回顶部</a>|<a href="https://www.jianshu.com/u/f7b98666a32e" target="blank">给我留言</a>
        <!--站内的锚点也是用了超链接的方式
        1.首先要在制定的位置定义一个名字(比如:top)
        2.在需要显示点击跳转的地方,写上超链接<a href="#+需要去的位置的名字比如top">去顶部</a>
        3.通过1和2就能实现在网页内跳转到底部或者顶部的位置。
        -->
        <dir>友情链接:
            <a href="https://www.xiami.com/artist/305" target="blank">虾米好听韩磊</a>
        </dir>
        <a name="bottom"></a>
    </center>
</body>
</html>

效果图:


001.JPG

在这张图片的顶部,我写了一个“去底部和去歌词部分”,在点击这个两个链接时,就会跳转到所去的位置。因为我在底部的位置和歌词的位置各设置了一个锚点。

<a name='bottom'></a>
<!---底部的锚点-->
<a name='tar'></a>
<!--歌词部分的锚点-->

这样设置之后,在网页想要呈现的地方,再把它调用出来

<a herf='#bottom'>去顶部</a>|<a herf='tar'>去歌词部分</a>
<!--在需要显示的位置写出来,这样一点击,就会到设置好的位置。-->

在“韩磊”的位置,我用了一个超链接,实现网页的跳转,到韩磊的百度百科主页。

    <a herf="https://baike.baidu.com/item/%E9%9F%A9%E7%A3%8A/32383?fr=aladdin" target="blank"></a>
<!--herf后面跟着网页的地址,target后面我选择网页的打开的位置为空白页,如果不写,就会在当前页面跳转。-->
002.JPG

同理,上图片中的,返回顶部也是设置锚点来实现。而给我留言和虾米好听韩磊,则是采用了超链接,跳转到其他的页面。

相关文章

  • web进阶之二:写一个简单的网页。

    我们需要怎么写   我们要心中有个想法,我这个网页要有什么,有哪些功能。不过一般都会有美工给你做好图或者根据客户需...

  • Python Web开发实战.epub

    【下载地址】 《Python Web开发实战》按照一个Web 产品从无到有、从简单变复杂、从基础到进阶的过程,多角...

  • java web目录

    java web目录 web编程基础web编程进阶(一)web编程进阶(二)web编程原理

  • 小程序随笔4:嵌入网页

    今天简单的说一下嵌入网页,使用一个新控件web-view,每个页面只能有一个 web-view,web-view ...

  • 搭建一个简单的web网页

    github demo 新建django项目 2.创建一个名字叫app的程序 django中不管是博客还是一个站点...

  • 前端这么简单,还有必参加web前端培训吗?

    前端这么简单,参加web前端培训还有必要吗?相信这是不少人对web前端培训的疑惑吧。在大多数人眼中,前端就是写网页...

  • 就是JavaWeb(零)——JavaWeb概述

    1.Web概述 什么是web? web在计算机网页开发中就是网页的意思,网页是网站中的一个页面。通常我们浏览网页时...

  • Ionic2实战-Web网页版编译部署

    前言 作为一个WebApp,最直观的体现就是Web网页的形式,Web的好处就是部署简单,更新方便,跨平台,可以任意...

  • 响应式网页设计

    响应式Web设计(Responsive Web design) ,简单来说,就是网页内容会随着访问它的视口及设备的...

  • 响应式网页设计

    响应式web设计(Responsive Web Design) 简单来说,就是网页内容会随着访问他的视口及设备的不...

网友评论

    本文标题:web进阶之二:写一个简单的网页。

    本文链接:https://www.haomeiwen.com/subject/dqsqgftx.html