本文详细介绍了如何在网页上正确引用图片（包括相对路径和绝对路径），使用img标签的各种属性（如src、alt、width、height），以及创建链接（href属性与target属性应用）。此外，还涉及表格的创建与样式，如table标签、td和th的用法。
如何在网页上显示图片
图片
后缀名是.jpg,.png,.bmp,.gif,.psd...的文件
### 怎么样在网页上显示图片- 准备一张图片 1.jgp
- 在day03目录下新建img.html
- 把图片复制到当前html文件的目录下
- 使用img标签引入当前的图片文件
<img src="1.jpg" alt=""/>
- 在网页引入图片时使用img标签来引入,起的作用是一个占位的作用,具体引入的是哪张图片,由img标签的属性src的取值来决定,src是资源路径属性,它的取值分为两种:
6.1相对路径:不以盘符开始的路径,在本例中,由于图片文件和html文件都在day03目录下,可以直接使用文件名作为路径名,最简单的相对路径
6.2 绝对路径:使用盘符开始的路径day03下的1.jpg的完整路径:F:\hubu1030\web2108\public\day03\1.jpg,在使用模拟服务器方式使用浏览器打开html文件的时候图片不能使用这种绝对路径.
可以观察浏览器的地址栏的路径:
http://127.0.0.1:8020/web2108/public/day03/img.html?__hbt=1628733046253
http:协议
127.0.0.1 IP地址(当前这个IP地址代表的是本地主机)
8020 端口号 本机开放服务器端口,通过这个端口我们可以访问我们当前的html文件
/web2108/public/day03/img.html 文件的路径
http协议不认识F盘,我的绝对路径也要以http开头,http://127.0.0.1:8020\web2108\public\day03\1.jpg
<img src="http://127.0.0.1:8020\web2108\public\day03\1.jpg" alt="家有儿女"/>
在上面的案例中,src的取值就是图片在模拟服务器上的完整路径,也可以认为这个路径是一个绝对路径
打开DOS命令窗口的方式:win R -->cmd
8. 能不能是本地绝对路径(以盘符开始的路径)在网页是哪个访问到图片文件? 通过本地打开html文件的形式就可以访问,使用的浏览器必须是国产的或者谷歌浏览器,火狐浏览器需要再改一下路径
9. alt属性:当图片不能正常加载时的提示文本信息
10. width属性 设置图片的宽度,取值为0~?px
11. height属性 设置图片的高度,取值为0~?px
12. 长度和宽度方向一般不宜同时设置尺寸,为了避免出现失真现象
13. 边框线属性 style=“border:1px solid red”
14. 做为块级元素的背景图片显示
<div style="width:700px;height:530px;
background-image: url(1.jpg);
border:1px solid red;
border-radius: 50%;
text-align: center;
color: white;">
八月十五月儿圆
</div>
img.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>img</title>
</head>
<body>
<div style="width:700px;height:530px;
background-image: url(1.jpg);
border:1px solid red;
border-radius: 50%;
text-align: center;
color: white;">
八月十五月儿圆
</div>
<div>
<img src="1.jpg" alt=""
style="border:1px solid red;"/>
<img src="1.jpg" width="200"
alt=""/>
</div>
<div>
<img src="1.jpg" height="200"
alt=""/>
</div>
<div>
<img src="1.jpg" width="200" height="200"
alt=""/>
</div>
<div>
<img src="F:\hubu1030\web2108\public\day03\1.jpg" alt="家有儿女"/>
</div>
<div>
<img src="http://127.0.0.1:8020\web2108\public\day03\1.jpg" alt="家有儿女"/>
</div>
</body>
</html>
链接
链接的定义:
通过点击可以完成页面的跳转,点击的对象可以是文本或者图片.
- 链接的标签是a,它的属性有:
- href属性 必须属性 链接要跳转的页面地址
取值- 域名 http://www.163.com 网易的地址,域名 163.com,域名容易记忆.专门的域名网站 玉米网
<a href="http://www.163.com"
title="网易">
网易
</a>
- ip地址 百度的服务器可以通过IP地址访问
<div>
<a href="http://www.baidu.com"
>
百度
</a>
</div>
<div>
<a href="http://163.177.151.110"
>
百度ip
</a>
</div>
- 取值为# 返回顶部
<div id="">
<a href="#">返回顶部</a>
</div>
- a的属性 target 设置打开新页面的方式
- target的取值:_self 默认打开页面的方式,在当前打开新页面替换当前页面
- target取值为:_blank 在新的选项卡打开新页面
a.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>a</title>
</head>
<body>
<div>
<a href="http://www.163.com"
title="网易"
target="_blank" >
网易
</a>
</div>
<div>
<a href="http://www.baidu.com"
>
百度
</a>
</div>
<div>
<a href="http://163.177.151.110"
>
百度ip
</a>
</div>
<div id="" style="width: 200px;
height:600px;
background-color: red;">
</div>
<div id="">
<a href="#">返回顶部</a>
</div>
</body>
</html>
表格
用来存储结构化信息,由行和列组成
每一行是一条完整的信息或者记录(一个对象),每一行是每条记录的共有的一个特征 (属性)
比如 某位男同学,家里个介绍了一个女朋友,首先关心的是:姓名 年龄 身高 住址 工作地点,一个月挣多少钱,如果考虑到这些,就已经有面向对象的思维.
| 姓名 | 年龄 |
|---|---|
| Tom | 10 |
| Marry | 9 |
如何在页面显示一个表格
要使用table标签,里面包含行标签 tr 行标签里面包含列标签td
新建一个table.html
<div>
一行一列的表格<br />
<table border="1"
cellspacing="0">
<tr>
<td>1-1</td>
</tr>
</table>
</div>
<div>
一行三列的表格<br />
<table border="1"
cellspacing="0">
<tr>
<td>1-1</td>
<td>1-2</td>
<td>1-3</td>
</tr>
</table>
</div>
<div>
三行三列的表格<br />
<table border="1"
cellspacing="0">
<tr>
<td>1-1</td>
<td>1-2</td>
<td>1-3</td>
</tr>
<tr>
<td>2-1</td>
<td>2-2</td>
<td>2-3</td>
</tr>
<tr>
<td>3-1</td>
<td>3-2</td>
<td>3-3</td>
</tr>
</table>
</div>
- 表格各个标签的属性
- table标签的属性
- border 边框线属性
- border=“1” 边框线宽度为1像素
- bordercolor=“red” 边框线颜色 为红色
- cellspacing=“0” 内外边框线距离为0
- align="center"设置表格水平位置居中,align是水平位置的意思,取值有三个:left-左 center-中 right-右,其中left为默认值
- width=“300” 设置表格的宽度为300像素
- height="300"设置表格的高度为300像素
- bgcolor="pink"背景色设置为粉色
<table border="1"
bordercolor="red"
cellspacing="0"
align="center"
width="300"
height="300">
- 和td同样的一个标签叫th使用方法和td相同,但是显示效果不一样:文本水平居中,垂直居中,加粗显示
<tr>
<th>学号</th>
<th>姓名</th>
<th>年龄</th>
</tr>
- tr的属性 align 水平位置 取值 left center right left是默认值
- valign 垂直位置 取值:top-上 middle-中 bottom-下 middle是默认值
- td的属性 align 水平位置 取值 left center right left是默认值
- valign 垂直位置 取值:top-上 middle-中 bottom-下middle是默认值
- rowspan 行合并/跨行 取值为一个数值,表示合并几行
- colspan 列合并/跨列取值为一个数值,表示合并几列
跨行跨列练习:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表格</title>
</head>
<body>
<div>
<table border="1"
cellspacing="0"
cellpadding="0"
width="200"
height="200">
<tr>
<td colspan="2">1-1</td>
<!--<td>1-2</td>-->
<td rowspan="2">1-3</td>
</tr>
<tr>
<td rowspan="2">2-1</td>
<td>2-2</td>
<!--<td>2-3</td>-->
</tr>
<tr>
<!--<td>3-1</td>-->
<td colspan="2">3-2</td>
<!--<td>3-3</td>-->
</tr>
</table>
</div>
</body>
</html>
<tr align="center">
<td valign="top">1</td>
<td>周星驰</td>
<td valign="top">62</td>
</tr>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>table</title>
</head>
<body>
<div>
一行一列的表格<br />
<table border="1"
cellspacing="0">
<tr>
<td>1-1</td>
</tr>
</table>
</div>
<div>
一行三列的表格<br />
<table border="1"
cellspacing="0">
<tr>
<td>1-1</td>
<td>1-2</td>
<td>1-3</td>
</tr>
</table>
</div>
<div>
三行三列的表格<br />
<table border="1"
cellspacing="0">
<tr>
<td>1-1</td>
<td>1-2</td>
<td>1-3</td>
</tr>
<tr>
<td>2-1</td>
<td>2-2</td>
<td>2-3</td>
</tr>
<tr>
<td>3-1</td>
<td>3-2</td>
<td>3-3</td>
</tr>
</table>
</div>
<div>
<!--写一个三行四列的表格-->
三行四列的表格<br />
<table border="1"
bordercolor="red"
cellspacing="0"
align="center"
width="300"
height="300">
<tr>
<th>学号</th>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr align="center">
<td valign="top">1</td>
<td>周星驰</td>
<td valign="top">62</td>
</tr>
<tr>
<td>2</td>
<td>周润发</td>
<td>66</td>
</tr>
<tr>
<td>3</td>
<td>刘德华</td>
<td>60</td>
</tr>
</table>
</div>
</body>
</html>
扫一扫
5370
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
