链接与图像链接元素< a >元素 - 表示链接元素作用 - 从当前html页面跳转到指定html页面属性href - 设置指定跳转html页面的路径路径分类相对路径 - 相对于当前html页面的路径绝对路径 - 访问的路径地址不变化示例代码:<body><!-- 相对路径的链接 --><a href="04.文本阴影案例.html">他是链接</a><br><!-- 绝对路径的链接 --><a href="http://localhost:63342/untitled/Study2/HTML%E4%B8%8ECSS-04/04.%E6%96%87%E6%9C%AC%E9%98%B4%E5%BD%B1%E6%A1%88%E4%BE%8B.html">他也是链接</a><br><!-- 绝对路径的链接 --><a href="https://www.baidu.com/">百度</a></body>效果显示图:链接元素样式通过CSS可以改变链接元素样式示例代码:<style> a{ color: cyan; text-decoration: none; } a:hover{ /* 设置鼠标样式 */ cursor: default; text-decoration: underline; } </style></head><body><a href="#">我是谁?你是链接!</a></body>链接元素的属性链接元素也可以实现Email链接效果 - 前提是必须配合当前电脑中的邮箱软件共同使用示例代码: <style> a{ margin-left: 200px; font-size: 48px; line-height: 200px; color: cyan; } </style></head><body><!-- <a>元素的属性 * target - 表示当前链接的打开方式 * _self - 默认值，表示在当前窗口中打开目标页面 * _blank - 表示在新窗口(页签)打开目标页面 * 实现Email链接效果 * 用法 - 配合href属性使用，值是以"mailTo:"开头的 * 问题 - 必须配合当前电脑中的邮箱软件使用 --><a href="imgs/c.jpg">点开有惊喜</a><a target="_blank" href="imgs/b.jpg">点开吓死你</a><!-- <a>元素中特殊的方法 - 打开email软件 --><a href="mailTo:18603644430@163.com">email</a></body>效果显示图:锚点所谓锚点就是点击指定链接回到之前设置的元素那里< a >元素实现锚点功能设置href属性值为 "#id属性值" 格式就行示例代码:<body><a id="top">往下看</a><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><!-- <a>元素实现锚点功能 * 设置href属性值为 "#id属性值" 格式就行--><a href="#top">看完回去吧</a></body>效果显示图:下载功能注意: 下载功能是HTML5新增的download属性可以实现a元素的下载功能< a >元素实现下载功能如果默认使用href属性指定下载文件路径的话 -> 实现跳转到指定文件如果浏览器能识别该文件类型的话 -> 直接打开该文件需要使用HTML5新增的download属性实现< a >元素的下载功能download属性的值 - 表示下载文件的名称(不一定是原文件名称)示例代码:<body><a href="imgs/a.jpg" download="吓死你.jpg">下载图片</a></body>动态伪类选择器注意: 设置input时需要先去除浏览器默认的边框样式才能重新设置示例代码:<style> /* 字体颜色 */ a:link{ color: #33FF33; } /* 鼠标悬停 */ a:hover{ color: cyan; } /* 按住不松手的时候 */ a:active{ color: yellow; } /* 跳转完成后回来的颜色 */ a:visited{ color: olivedrab; } /* 获取焦点 - 就是一闪一闪的小竖杠 */ input:focus{ border: 2px solid mediumspringgreen; outline: none; } </style></head><body><a href="04.文本阴影案例.html">进去瞅瞅</a><input type="text"></body>效果显示图:图片元素<img>元素 - 空元素属性src - 设置引入指定图片的路径alt - 设置如果图片没有正确显示时的文本提示内容改变图片显示的大小 - 保持原图片宽度和高度的比例(只设置宽度或高度)元素的属性 - width和height(不常使用)CSS的属性 - width和height(建议使用这种方式)示例代码: <style> img{ width: 450px; } </style></head><body><img src="imgs/c.jpg" alt="吓死你"></body>背景图片引入背景图像的情况:如果引入图片大于当前HT如果引入图片小于当前HTML页面 - 重复出现(铺满整个页面)ML页面 - 图片会显示不完整如果引入图片小于当前HTML页面 - 重复出现(铺满整个页面)示例代码: <style> body{ background-image: url("imgs/dalv.jpg"); } </style></head><body></body>效果显示图:平铺方式注意: 浏览器默认是平铺整个浏览器的示例代码: <style> /*body { background-image: url("imgs/wolongxueyuan.png"); !* 背景图像的平铺方式： * repeat - 默认值，表示水平方向与垂直方向平铺 * repeat-x - 表示水平方向平铺 * repeat-y - 表示垂直方向平铺 * no-repeat - 表示不平铺 * space - 水平方向平铺(根据页面的宽度进行均匀分配) *! background-repeat: no-repeat; !* 背景图像的定位 - 水平方向和垂直方向 * 水平方向 - left、center和right * 垂直方向 - top、center和bottom *! background-position: center right;!* 水平 垂直 *! }*/ div{ width: 800px; height: 600px; /* 边框 */ border: 1px solid black; /* 引入背景图片 */ background-image: url("imgs/dalv.jpg"); /* 背景重复 - 不重复 */ background-repeat: no-repeat; /* 背景定位 - 控制背景图片的位置 */ background-position: 210px 100px; /* 背景大小 - 控制背景图片大小 */ background-size: 260px 260px; } </style></head><body><div></div></body>效果显示图:背景关联备注: 浏览器默认背景图片跟随页面滚动示例代码: <style> body{ height: 5000px; /* 引入背景图片 */ background-image: url("imgs/dalv.jpg"); /* 控制背景图片不重复 */ background-repeat: no-repeat; /* 设置背景图片是否跟随页面滚动 * 浏览器默认是滚动 */ background-attachment: fixed; } </style></head><body><p>一花一世界,一叶一孤城,我是谁?我在哪?我在干什么?</p></body>效果显示图:精灵图精灵图又叫雪碧图由于页面中需要引入多个背景图像 -> 将HTML页面加载变慢所以将多个背景图像整合成一张图片 -> 只需要引入一次利用background-position属性 - 设置背景图像的定位位置 - 实现现实背景图像哪个部分精灵图分析图:绝对路径与相对路径相对路径 - 相对于当前html页面的路径绝对路径 - 访问的路径地址不变化分析图:
