(前端)html与css，html 6、_a标签

我不是女神ヾ 2021-11-23 09:58 375阅读 0赞

## a标签: ##

anchor，锚的意思，超级链接，可跳转到相应的网站。

a标签是一个双标签。

## a的属性 ##

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

href:hypertext reference超文本引用，属性值就是要跳转网页的路径。  
target:目标的意思，设置我们要跳转的网页是否在新窗口打开，默认在原来的窗口打开。  
在新窗口打开:添加属性值"\_blank",blank空白的意思。

## 网页跳转 ##

这是一个名为a1的html文件代码↓

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

<body>
        <a href="http://www.baidu.com" target="_blank" >点我跳转到百度</a>
        <a href="a2.html">点我跳转到a2</a>
     </body>

这是一个名为a2的html文件代码↓

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

<body>
        <a href="a1.html">点我跳转到a1</a>
     </body

效果图↓

当打开a1时![1365792-20190530181823346-1886609758.png][]点击跳转百度就会在新窗口打开百度

当点击跳转a2时![1365792-20190530182005240-1975206476.png][]就会在原本a1的窗口直接进入a2，再点击跳转a1就相当于一个返回的效果

## 页面内锚点跳转 ##

添加锚点的方法:  
方法(一):给对应的位置添加一个id属性，属性值就是id名。代码↓

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

然后在h1标签上放写个a标签，href="\#id"代码↓

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

方法(二):在需要添加锚点的位置，加入一个a标签，不需要写href属性，只需写name，代码↓

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

方法一与方法二的区别:

方法一需要在需要添加锚点的标签里取了一个id名，方法二则是在需要添加锚点的位置新写一个a标签，这个a标签里只有name

整体代码↓（我这个文件名叫zhourunfa，因为下面的跨网站锚点跳转要用他做例子）

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

<!doctype html>
    <html lang="en">
     <head>
      <meta charset="UTF-8">
      <meta name="Generator" content="EditPlus®">
      <meta name="Author" content="">
      <meta name="Keywords" content="">
      <meta name="Description" content="">
      <title>Document</title>
     </head>
     <body>
        <a href="#jingli">人物经历</a>
        <a href="#shenghuo">个人生活</a>
        <h1>周润发</h1>
          <p>
            &nbsp&nbsp&nbsp周润发（Chow Yun Fat），1955年5月18日出生在香港南丫岛，籍贯广东开平，中国影视演员、摄影家，国家一级演员。
    1974年毕业于TVB艺员训练班，主演了《网中人》、《亲情》、《上海滩》等20余部剧集。1976年初涉影坛，在80年代凭《英雄本色》、《监狱风云》、《赌神》等电影成为香港“暴力美学”风格电影的代表人物之一。90年代与成龙、周星驰并称为“双周一成”。1995年远赴好莱坞发展。主演了《安娜与国王》、《卧虎藏龙》等多部不同风格的电影，曾两次担任奥斯卡颁奖嘉宾。1999年在洛杉矶中国城“中央广场”留下手印，2000年获法国多维尔亚洲电影节特别成就奖，2004年凭《喋血双雄》等影片中塑造的枪手形象成为全美最多人收藏其DVD的男演员前三名 。2005年被香港网民评为“经典电视剧小生”第一名；2007年获美国AZN电视台 “亚洲卓越奖颁奖礼”终身成就奖。
    此外，周润发还热衷于公益事业，2000年被美国《时代》周刊选为七位“地球名人英雄”之一， 2003年获颁特区政府银紫荆星章，同年其奋斗历程被写入香港启思出版社出版的中学一年级语文课本，成为首位被列入中学教科书的演艺界人士
            <img src="https://gss0.bdstatic.com/94o3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike92%2C5%2C5%2C92%2C30/sign=f100d1f75382b2b7b392319650c4a08a/d31b0ef41bd5ad6e8d802d198bcb39dbb7fd3cc3.jpg" width="400" height="400" title="周润发" alt="">
            <img src="https://gss1.bdstatic.com/-vo3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike80%2C5%2C5%2C80%2C26/sign=03025002bb003af359b7d4325443ad39/bba1cd11728b47108cc34dc7cecec3fdfd0323c8.jpg" width="400" height="400" title="周润发" alt="
            ">
            <img src="https://gss3.bdstatic.com/-Po3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike92%2C5%2C5%2C92%2C30/sign=1fc0d811df88d43fe4a499a01c77b97e/58ee3d6d55fbb2fba0d52776464a20a44723dcdc.jpg"  width="400" height="400" title="周润发" alt="">
            <img src="https://gss1.bdstatic.com/9vo3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike92%2C5%2C5%2C92%2C30/sign=77dba3eafdfaaf5190ee89eded3dff8b/aa64034f78f0f736160347cd0a55b319eac41378.jpg" width="200" height="400" title="周润发" alt="">
          </p>
        <h2 id="jingli">人物经历</h2>
          <p>
            &nbsp&nbsp&nbsp周润发出生于农村家庭，从小帮母亲打零工贴补家用，生活清苦，却也乐在其中。
          </p>
          <p>
            &nbsp&nbsp&nbsp1965年，即周润发10岁时，全家搬到九龙，读中学的3年里，周润发每个暑假都去电子厂打工，也因此视力不好。中学毕业后，父亲病重，周润发没有选择升学，开始做临时工赚钱养家。在底层社会的艰难打拼和历练，丰富了周润发的人生经验，也让他日后的表演生涯从中受益。
          </p>
          <p>
            &nbsp&nbsp&nbsp1973年，18岁的周润发在报纸上看到无线电视演员训练班（TVB）的征人广告，便与朋友一同去应征，幸得考官之一的钟景辉赏识。
          </p>
        <h2>演艺经历</h2>
          <p>
            &nbsp&nbsp&nbsp1974年，周润发顺利从训练班毕业，经过短暂的龙套生涯，周润发就得到了演出的机会。
          </p>
          <p>
            &nbsp&nbsp&nbsp1975年，周润发在《江湖小子》影片中充当配角接着是《大江南北》在这两个剧集中，脱颖而出。
          </p>
          <p>
            &nbsp&nbsp&nbsp1976年，拍摄电视剧《狂潮》。之后，周润发又主演了多部剧集如《奋斗》、《强人》、《网中人》、《亲情》等。其中与郑裕玲合作了剧集《网中人》、《亲情》、《火凤凰》《鳄鱼潭》。
          </p>
          <p>
            &nbsp&nbsp&nbsp1980年，无线电视台播放了25集电视连续剧《上海滩》，该片在香港无线电视举办“八十年代十大电视剧集”评选中名列第一位，周润发在这部戏中饰演矛盾、犹豫、冷酷的许文强。
          </p>
          <p>
            &nbsp&nbsp&nbsp1981年，参演的由香港新浪潮导演许鞍华导演的电影《胡越的故事》，在首届金像奖上获得了最佳影片提名并拿到了最佳编剧奖，周润发也开始受到影坛的瞩目。
          </p>
          <p>
            &nbsp&nbsp&nbsp1984年，周润发在学院派导演梁普智的《等待黎明》中出演叶剑飞一角，获得亚太影展和台湾电影金马奖的最佳男主角奖，且凭该角色和1985年主演的《女人心》两次提名金像奖最佳男主角。
          </p>
          <p>
            &nbsp&nbsp&nbsp1986年，在吴宇森导演的电影《英雄本色》饰演Mark哥（小马哥），该片打破香港电影票房纪录，并开创了黑帮英雄片的电影潮流，小马哥也成为了影迷的偶像。周润发也拿到了首个香港金像奖最佳男主角奖。
          </p>
          <p>
            &nbsp&nbsp&nbsp1987年，凭借参演的影片《秋天的童话》获得台湾金马奖最佳男主角奖座，该片获当届金像奖最佳影片奖，年度票房排行第五名。同年，与导演林岭东合作的《龙虎风云》。林岭东凭借影片成为金像奖最佳导演； 另一部与林岭东导演合作的作品《监狱风云》《监狱风云2逃犯》周润发在片中扮演钟天正，与梁家辉、张耀扬、何家驹、黄光亮合作，也提名最佳电影，名列年度卖座片第二名。
          </p>
          <p>
            &nbsp&nbsp&nbsp1988年的香港金像奖，周润发更是有《秋天的童话》、《龙虎风云》、《监狱风云》三部电影同时提名影帝，以三个各不相同的角色自相角逐，最后以《龙虎风云》中高秋一角胜出；美国电影协会也因此片授予他亚洲杰出演员奖，而这一年他的票房总成绩达一亿三千万港元。同年，与杜琪峰合作的《八星报喜》拿下全年票房冠军，周润发饰演一个摇头摆尾的娘娘腔形象，与《大丈夫日记》《吉星拱照》成为影迷喜欢的周润发喜剧。
          </p>
          <p>
            &nbsp&nbsp&nbsp1989年，《赌神》上映。《赌神》是周润发创造的另一个银幕角色。赌神高进一角，与《阿郎的故事》中的阿郎一起，成为周润发提名1990年香港金像奖最佳男主角奖的两部作品角色，金像奖上拿到了第三次获得金像奖最佳男主角奖。1989年，周润发同吴宇森一起，拍摄了电影《喋血双雄》。此片不仅是吴氏暴力美学的代表之作之一，更向欧美观众展现了周润发的银幕枪手形象。同年，参加黄沾、倪匡、蔡澜主持的《今夜不设防》，拿台湾导演侯孝贤的名作《童年往事》和自己的童年欣然对比。
          </p>
          <p>
            &nbsp&nbsp&nbsp1994年主演电影《赌神2》。同年与吴宇森合作的《辣手神探》被美国《娱乐周刊》评为“最有影响力的动作电影第9名”和“最佳cult电影第18名”。片中周润发的角色也被评为“最伟大的电影角色第33名”。
          </p>
          <p>
            &nbsp&nbsp&nbsp1995年年底，在洛衫矶与好莱坞众多名导、明星的见面会上，周润发在致词中说：“作为一个电影演员，最大的乐趣当然是在更大的范围内和其他的电影人共同工作。我来美国，首先想多学习，并愿意继续拍片。”此次赴美之前，周润发将以往获得的16樽奖座全部捐献给了香港电影资料馆。此举表现出他一切从零开始的决心；明白过去的成就不能代表未来的成功，因此他花了3年的时间学习英文，并且努力了解和接受好莱坞的拍片方式。
          </p>
          <p>
            &nbsp&nbsp&nbsp1998年，周润发好莱坞处女作《替身杀手》上映。该片延续了他的银幕枪手形象，并运用了很多香港电影的标志性技巧，如慢镜头等；但该部电影的口碑与票房都不如预期。德国版《CINEMA》杂志在介绍此片时说：“导演安东尼·福奎阿并没有把这种情感发挥到最好，反而是使用了太多肆无忌惮和媚俗的动作戏，这种空洞的动作场面很难让周润发的首次美国公演留下深刻的印象”。同年，芝加哥市长将1月12日命名为“周润发纪念日”以表扬他对电影业的贡献获“卡地亚卓越成就奖”。
          </p>
        <a name="shenghuo"></a>
        <h2>个人生活</h2>
        <h3>家庭成员</h3>
          <p>
            &nbsp&nbsp&nbsp周润发祖籍广东开平，父亲周容允，母亲陈丽芳，阿婆是广东东莞人。兄妹四人，周润发在家里排行老三。周润发母亲，港媒多称发妈，周润发孝顺母亲，曾每天早上带妈妈游泳，给妈妈治哮喘，跟妈妈感情好，妈妈也对儿子的每部戏都不会错过。在2008年世界杰出华人奖暨美国纽卡索大学荣誉博士颁奖礼上，发妈获颁“杰出华人母亲”奖的美誉。
          </p>
        <h3>婚姻生活</h3>
          <p>
            &nbsp&nbsp&nbsp976年周润发承认因拍《狂潮》爱上剧中的对手缪骞人，却苦无结果。1979年，周润发和无线电视台另一位知名女艺人陈玉莲相恋，后于1983年终告分手。
          </p>
          <p>
            &nbsp&nbsp&nbsp周润发一生有过两段婚姻，一段是与前妻余安安，1983年2月8日，与陈玉莲分手不久的周润发传出和女艺人余安安闪电结婚的消息，但这段婚姻仅仅维持了9个月。翌年，周润发和现任妻子陈荟莲（当时名为陈蕙莲）恋情曝光，两人在1987年6月5日共结连理。周润发和陈荟莲结婚27年，膝下无子嗣，承诺在自己死后把99%的财产捐赠给公益事业。
          </p>
        <h3>摄影爱好</h3>
          <p>
            &nbsp&nbsp&nbsp1997年，在迎接香港回归的一次大型影展上，周润发的姐姐周聪玲偷偷用化名拿了他拍的三张照片来参展，其中一幅以西红柿为全景的照片，夺得三等奖，周润发热衷摄影的事因此被公众所知。从演员到摄影师，周润发曾经在2004年与九位摄影爱好者举行名为《黑白情怀》的摄影作品联展，当时他提供了6幅照片，其中包括关帝像及渔村等。
          </p>
          <p>
            &nbsp&nbsp&nbsp周润发曾正式举办过两次个人的摄影展，2008年周润发举办名为《MovingPictures》的摄影展，18张照片都是以其参演电影的幕后故事作主题，推出首部个人摄影集，首批影集发行1000本，所有收益将捐给香港红十字会，以帮助四川地震灾区人民，其中偷拍巩俐一张在《满城尽带黄金甲》剧组的化妆照深受周润发的喜爱，后来他将该照捐给嫣然基金，结果以318万元成交。2009年，与友人黄贵权合办名为《香港印象》黑白摄影展，展出2004年后拍摄的41幅香港市民生活照，并将亲友赠送的祝贺影展的花篮折为现钱，捐助内地地震灾区灾民。
          </p>
     </body>
    </html>

效果图↓

![1365792-20190530193753276-1408853140.png][] ![1365792-20190530193829703-2021119140.png][]

当点击个人经历或者个人生活时，网页就会自动跳转到相应的位置，图片以个人生活为例，这就是页面内锚点跳转的方法，需要注意的一点就是整个网页id和name是惟一的，不可重复。

## 跨网站锚点跳转 ##

方法:<a href="网址\#maodina"></a>

如我新建一个html文件，取名叫b，想在b页面进入周润发的个人生活，怎么写？↓

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

<body>
        <a href="zhourunfa.html#shenghuo">点我跳转的周润发个人生活</a>
    </body>

效果↓

![1365792-20190530195307981-1182820132.png][] ![1365792-20190530195332363-307298785.png][]

点击后就可直接跳转到个人生活。

转载于:https://www.cnblogs.com/StevenSunYiwen/p/10951304.html

[ContractedBlock.gif]: https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif
[ExpandedBlockStart.gif]: /images/20211122/0d34a7ec32104a538dcb0b0eb35feb62.png
[1365792-20190530181823346-1886609758.png]: /images/20211122/a6d0ff1ac014443fb2284e891b599be7.png
[1365792-20190530182005240-1975206476.png]: /images/20211122/8d317706581b4088b5fede7d90880561.png
[1365792-20190530193753276-1408853140.png]: https://img2018.cnblogs.com/blog/1365792/201905/1365792-20190530193753276-1408853140.png
[1365792-20190530193829703-2021119140.png]: /images/20211122/979f5a88097e47a39d1dc519d9d329e0.png
[1365792-20190530195307981-1182820132.png]: https://img2018.cnblogs.com/blog/1365792/201905/1365792-20190530195307981-1182820132.png
[1365792-20190530195332363-307298785.png]: /images/20211122/2b4632e490154b339d198a176074b376.png