Web前端开发-6

最新推荐文章于 2022-04-06 14:46:35 发布

阅微草堂123

最新推荐文章于 2022-04-06 14:46:35 发布

阅读量611

点赞数

分类专栏： Web 文章标签： web开发6 图像标签

本文链接：https://blog.csdn.net/cfyzcc/article/details/50827314

版权

Web 专栏收录该内容

11 篇文章 1 订阅

订阅专栏

/************************************
本文主要记述了web前端开发中图像布局等问题
*************************************/
一、概述
图像标签：img，这个标签是自闭合标签，有三个属性值，分别是src定义图像的路径，alt是给搜索引擎看的，方便你的图像被搜索到，title是给用户看到，鼠标放到图像上显示什么。

<img src="../cc/1.jpg" alt="cc的照片" title="cc"/>

完整的套路为：

<html>
<head>
<title>img标签的用法</title>
</head>
<body>
    <img src="d:/cc/1.jpg" alt=''cc's picture" title="cc"/>
</body>
</html>

效果图为：
这里写图片描述

二、绝对路径和相对路径
在img标签内的src写路径时候可以采用绝对或者相对路径。但是在实际开发过程中，往往采用相对路径。绝对路径很多情况下编译器无法进行的编译。
绝对路径写法：

<img src="d:/cc/1.jpg" alt="cc" title="lala"/>

相对路径写法：

<img src="cc/1.jpg" alt="cc" title="lala"/>    //这种情况是文件夹cc和网页文件在一个根目录下面
<img src="../cc/1.jpg" alt="cc" title="lala"/>  //这种情况是文件夹cc在网页文件的上一级目录。这里要记住..表示上一级目录的意思。

注意：”../“表示上一级目录的意思

三、图像的格式
图像格式主要分为位图和矢量图，下面分别阐述他们的特点：
位图：
1.主要格式：jpg，png，gif；
2.jpg主要用于色彩丰富的场景，png可以包含透明信息，属于32位图，另外8位是透明信息，是网页设计的专用格式，gif可以做逐帧动画；
3.位图有8、16、24、32四种，其中8位是灰度图，24位是彩色图，32为包括了透明信息；
4.位图在放大过程中会降低质量；
5.主要绘图工具；adobe公司的photoshop，windows自带画图工具

矢量图：
1.主要格式是ai，cdf，fh，swf；
2.矢量图组成是数学向量；
3.主要用在印刷业，放大不会失真；
4.主要绘图工具：Adobe公司的illustrator，Corel公司的CorelDRAW。