005+limou+HTML——(5)HTML图片和HTML超链接

1、图片标签

(1)图片标签属性

  • [src]:用于指定这个图片所在的路径,常使用相对路径,比较少使用绝对路劲。如果图片路径有错误的话,就会发生图片显示错误
  • [alt]:用于指定图片的提示文字,这个描述文字是给收索引擎看的,当图片无法显示时,就会显示这个属性的文字
  • [title]:用于指定图片的提示文字,这个描述文字是给用户看的,当鼠标指针移动到图片上时,会显示这个属性的文字
DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>网页标题title>
    head>
    <body>
        <img src="D:\limou_picture\bd90a92f3ac21ba8-1650856738514.png" alt="阿鸠" title="阿鸠和她的小伙伴" />
    body>
html>

005+limou+HTML——(5)HTML图片和HTML超链接_第1张图片

(2)图片格式

图片格式一般有两种:像素图(位图)、矢量图(向量图)

  • 像素图:由像素点构成,无论是放大还是缩小都会有一定程度的失真
    • .jpg格式,很好处理大面积色调的图片,适合存储颜色丰富的复杂图片,例如照片、高清图片。但是一般体积较大,并且不支持保存透明背景
    • .png格式,是一种无损格式,可以无损压缩以保证页面打开速度。此外png体积小,并且支持保存透明背景,不过不适合存储颜色丰富的图片
    • .gif格式,图片效果最差,但是适合制作动画。在qq和微信发的表情包大都是gif格式的
    • 对于像素图一般采用Photoshop软件处理
  • 矢量图:是一种通过数学描述的方式来记录内容的图片格式,优点是图片可以任意放大缩小或旋转,不会有失真,缺点是难以表现色彩丰富的图片
    • 常见格式有,.ai、.cdr、.fh、.swf,其中“.swf”格式是最常用的
    • 对于矢量图一般采用illustrator、CorelDRAW软件处理

2、超链接标签

(1)外部链接:跳转到其他外部网站

①文字超链接

②图片超链接

DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>网页标题title>
    head>
    <body>
        <a href="https://www.baidu.com">一个百度的链接a>
        <a href="https://bilibili.com"><img src="D:\limou_picture\WEB\按钮-赞_o.png" alt="bilibili" title="bilibili网站"/>a>
    body>
html>

005+limou+HTML——(5)HTML图片和HTML超链接_第2张图片

③[target]属性

默认情况下,超链接都是在当前浏览器窗口打开新窗口,不过可以使用target属性改变这一默认
005+limou+HTML——(5)HTML图片和HTML超链接_第3张图片
一般情况下只会用“_blank”这一个值就行

DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>网页标题title>
    head>
    <body>
        <a href="https://www.baidu.com">一个百度的链接a>
        <a href="https://bilibili.com" target="_blank"><img src="D:\limou_picture\WEB\按钮-赞_o.png" alt="bilibili" title="bilibili网站"/>a>
    body>
html>

005+limou+HTML——(5)HTML图片和HTML超链接_第4张图片

(2)内部链接:指向内部链接指向“自身网站的页面”

①我们尝试把之前做的html文档链接进去,先建一个文件夹

005+limou+HTML——(5)HTML图片和HTML超链接_第5张图片

DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>网页标题title>
    head>
    <body>
        <a href="https://www.baidu.com">一个百度的链接a>
        <a href="https://bilibili.com" target="_blank"><img src="D:\limou_picture\WEB\按钮-赞_o.png" alt="bilibili" title="bilibili网站"/>a>
       
        <br/>
        <a href="website\my_web_2023_2_28.html" target="_blank">跳转页面1a>
        <br/>
        <a href="website\my_web_2023_3_1.html" target="_blank">跳转页面2a>
        <br/>
        <a href="my_web_2023_3_2.html" target="_blank">跳转页面3a>
        <br/>
    body>
html>

005+limou+HTML——(5)HTML图片和HTML超链接_第6张图片

②锚点链接主要是为了跳转到当前网页的某处,其实也算内部链接的一种

DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>网页标题title>
    head>
    <body>
        <div>
            <a href="#article">推荐文章a><br/>
            <a href="#music">推荐音乐a><br/>
            <a href="#movie">推荐电影a><br/>
        div>
        <p>……p>
        <p>……p>
        <p>……p>
        <p>……p>
        <p>……p>
        <p>……p>
        <p>……p>
        <p>……p>
        <div id="article">
            <h3>推荐文章h3>
            <ul>
                <li>计算机网络基础li>
                <li>深入浅出Javali>
                <li>C primer pulsli>
            ul>
        div>
        <p>……p>
        <p>……p>
        <p>……p>
        <p>……p>
        <p>……p>
        <p>……p>
        <p>……p>
        <p>……p>
        <div id="music">
            <h3>推荐音乐h3>
            <ul>
                <li>Ether Strike (以太打击)('Divine Mercy' Extended)li>
                <li>K-forest、Seiya komori - Break Overli>
                <li>World.Execute (Me) ;li>
            ul>
        div>
        <p>……p>
        <p>……p>
        <p>……p>
        <p>……p>
        <p>……p>
        <p>……p>
        <p>……p>
        <p>……p>
        <div id="movie">
            <h3>推荐电影h3>
            <ul>
                <li>游戏人生-零li>
                <li>天气之子li>
                <li>夏日幻魂li>
            ul>
        div>
        <p>……p>
        <p>……p>
        <p>……p>
        <p>……p>
        <p>……p>
        <p>……p>
        <p>……p>
        <p>……p>
    body>
html>

005+limou+HTML——(5)HTML图片和HTML超链接_第7张图片

点击“推荐文章”、“推荐音乐”、“推荐电影”三个文字,就可以跳转到下面的文字
005+limou+HTML——(5)HTML图片和HTML超链接_第8张图片
005+limou+HTML——(5)HTML图片和HTML超链接_第9张图片
005+limou+HTML——(5)HTML图片和HTML超链接_第10张图片

你可能感兴趣的:(HTML学习笔记,html,photoshop,前端)