入门HTML 之2.28

最新推荐文章于 2021-09-28 09:55:12 发布

y-can-choose-kiss-m

最新推荐文章于 2021-09-28 09:55:12 发布

阅读量452

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/y_can_choose_kiss_me/article/details/17173855

版权

HTML 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

HTML对图片的控制--1，2

基本语法:
<img src=“图片名称”>
引用图片必须用<img>元素标志。<img>元素下的基本元素属性是src属性，src的属性值为所引用的图片的URL地址。
src属性是必须的。Src的URL可以是绝对地址，也可以是相对地址

所谓图片的替代文本，指图片不能显示时在图片所在位置显示的一段文本或当鼠标移到图片上时也会显示替代文本。
定义图片替代文本的方法是：
<img src=“图片名称” alt=“这是一张图片”>

<html>
<head>
	<title>图片的基本应用</title>
</head>
<body>
	<img src = "E://1.jpg" alt = "图片">
	<img src = "E://2.jpg" alt = "图片2">
</body>
</html>

HTML对图片的控制--3

图片的显示大小
我们可以指定一幅图片在浏览器窗口里的显示大小。
定义图片的显示大小的方法是：
<img src="sample.jpg" width=100 height=100 >
width指定图片的宽度，height指定高度。它们的属性值可以是象素，也可以是%。

<html>
<head>
	<title>控制图片的大小</title>
</head>
<body>
	<img src = "E://1.jpg"><p>
	<img src = "E://2.jpg" width = 100 height = 100><p>
</body>
</html>

HTML对图片的控制--4

图片的边框
我们可以为一幅图片加一个边框以突出显示：
<img src="sample.jpg" border= " 2 " >
border的属性值为象素数

<html>
<head>
	<title>对图片的控制</title>
</head>
<body>
	<img src = "E://1.jpg" color = "#00ff00" border = 2>
</body>
<html>

HTML对图片的控制--5

图片的对齐方式
图片可以相对于页面或单元格有一个对齐方式。
定义水平对齐方式的方法是：
<img src=“sample.jpg” align=“left” >
<img rc=“sample.jpg” align=“right”>

<html>
<head>
	<title>图片的对齐方式</title>
</head>
<body>
	<img src = "E://1.jpg" align = "left"><p>
	图片在左边<br>
	<img src = "E://2.jpg" align = "center"<p>
	图片在中间<br>
	<img src = "E://1.jpg" align = "right"<p>
	图片在右边<br>
</body>
</html>

HTML对图片的控制--6

图片的对齐方式
定义图片的垂直对齐方式：
<img src="sample.jpg" align="top" >
<img src="sample.jpg" align="middle">
<img src="sample.jpg" align="bottom" >
对于图片的对齐方式不仅是以上几种，但是以上的几种是最常用的。

<html>
<head>
	<title>图片的垂直方式</title>
</head>
<body>
	<img src = "E://1.jpg" align = "top"><br>
	图片在顶部<br>
	<img src = "E://2.jpg" align = "middle"><br>
	图片在中间<br>
	<img src = "E://1.jpg" align = "bottom"><br>
	图片在底部<br>
</body>
</html>