图像
图像是网页的主要内容之一,在HTML标签中,img标签用于定义HTML页面中的图像
- 语法:
- img标签属性
- src属性
- 作用:用于指定图像文件的路径和文件名
- 注意:是标签的必须属性
- 代码演示
- alt属性
- 作用:指定替换文本,默认不显示,当图像不能正常显示时,显示该文字对图像进行替换,有利于用户体验
- 代码演示
- width/height属性
- 作用:指定图片宽度/高度
- 注意:值可以不带单位默认px,只指定宽或高属性其中一个,另一个按照原比例等比缩放
- 代码演示
- title 鼠标悬停时的文字提示
- src属性
默认样式
- 多张图片可以交列在一行显示
- 默认产生下间隙
应用:
作为内容展示的图像:产品图、广告图、详情页、文章页中插图
路径
页面中的图片会非常的多,通常我们会新建一个文件夹来存放这些图像文件images,这时候再查找图像,就需要通过路径的来描述图像文件的位置。 路径可以分成,相对路径和绝对路径
相对路径
概述:相对路径是指由这个文件所在位置为参考基础,而建立出的目录关系,常用的相对路径包括当前目录,上一级目录,下一级目录
-
当前目录
-
语法:一个点(.)后面跟一个斜杠表示当前目录也就是当前文件所在目录。
<img src="pic.png" alt=""> <img src="./pic.png" alt=""> <!-- ./ 可以省略 -->
-
-
上一级目录
-
语法:两个点(.)后跟一个斜杠表示前文件所在目录的上一级目录
<img src="../pic2.png" alt="">
-
-
下一级目录
-
语法:一个斜杠,表示图像文件位于HTML文件下一级
<img src="images/pic3.png" alt="">
-
绝对路径
绝对路径文件在目录中的绝对位置完整描述,常见的绝对路径一种由其在网络上的绝对位置定义的位置,一种是本地从盘符出发的绝对位置
-
网络绝对位置
-
本地绝对位置
-
语法:D盘下webset文件夹下的image文件夹中的logo.png描述为:
D:\webset\images\logo.jpg
-
-
特点:绝对URL始终指向同一位置,无论在何处使用
注意:在链接到同一网站内的其他位置时,应尽可能使用相对链接。链接到另一个网站时,需要使用绝对链接。
CSS介绍 ,引入
css 层叠样式表 cascading 层叠 style 样式 sheets表 标记语言
负责样式 也就是网页上那些内容的样式 (宽高,位置,字体样式,背景样式,动画,阴影,边框)
属性名:属性值;
属性名:属性值;
属性名:属性值;
...
属性名:属性值;
width:300px;
- 属性毫无逻辑性
- 不能计算
引入 (3个)
1.行内引入
<div style="width:300px;height:200px;background-color:red"></div> style样式对象 包含着这个div的所有css属性
缺点:1. 结构不清晰 2. 代码重复冗余3. 与官方提倡的结构与样式相分离不符合
2.内部嵌入
<head>
<!-- 嵌入样式style标签 通过css选择器挑选出来 在加css样式!
css选择器: 挑选html标签
1.标签选择器 {
利用标签名字挑选元素
}
2.类选择器 {
1. 先设置一个类属性 class(并不是唯一挑选)
2. 通过.类名实现挑选
}
-->
<style>
div {
width:300px;
height:200px;
/* 背景色 */
background-color: red;
}
p {
/* 字体大小 */
font-size: 50px;
}
.a {
font-size: 100px;
}
.b {
color: pink;
/* font-size: 100px; */
}
</style>
</head>
3.外部链接
<head>
<!-- link 链接一个外部文件 .css样式文件
rel 指明链接进来的文件类型
href
-->
<link rel="stylesheet" href="./9-style.css">
</head>