html 图片上下居中 HTML图片(Images)
|
html 图片上下居中 HTML图片(Images)
|
|
作者：互联网 来源：
互联网 点击数： <script src="http://www.08.la/news2010/Plus/ACT.Hits.asp?ModeID=1&ID=7615"></script> 更新时间：2010年07月31日
|
|
用<img>这个Tag可以在 HTML里面插入 图片。最基本的语法如下： <img src="url"> url表示 图片的路径和文件名。比如url可以是http://5blogs.com/images/oblog_powered.gif，也可以是个相对路径"../image/logo.jpg"。 图片alt属性 <img>中有一个alt属性，英文叫alternate text。例句如下： <img src = "http://5blogs.com/images/oblog_powered.gif" alt="smile face"> 假使浏览器没有载入 图片的功能，浏览器就会转而显示Alt属性的值。 其实，现在大多数浏览器都支持 图片载入。在此介绍Alt属性，是因为它的另外一个重要功能。目前搜索引擎抓取工具无法识别图像中所含的文字，所以用ALT属性写上 图片的说明，便于搜索引擎抓取你网页的内容。 示例 <html> <body> <p>将鼠标停留在 图片上，你可以看到Alt属性里写的内容。</p> <img src="http://5blogs.com/images/oblog_powered.gif" alt="我博客Logo标志" ><br> </body> </html> 图片align属性 用align属性，可以改变 图片的垂直(居上、 居中、居下)对齐方式和水平对齐方式(居左、 居中、居右)。 示例 <html> <body> <p> 图片的 上下对齐方式：</p> <p><img src="http://5blogs.com/images/oblog_powered.gif" align="top">对齐方式:top</p> <p><img src="http://5blogs.com/images/oblog_powered.gif" align="middle">对齐方式:middle</p> <p><img src="http://5blogs.com/images/oblog_powered.gif" align="bottom">对齐方式:bottom</p> <p> 图片的左右对齐方式：</p> <p><img src="http://5blogs.com/images/oblog_powered.gif" align="Left">对齐方式:left</p> <p><img src="http://5blogs.com/images/oblog_powered.gif" align="center">对齐方式:center</p> <p><img src="http://5blogs.com/images/oblog_powered.gif" align="right">对齐方式:right</p> </body> </html> 图片的大小 在缺省状况下， 图片显示原有的大小。你可以用height和width属性改变 图片的大小。不过 图片的大小一旦被改变， 图片会相应放大或缩小，显示出来的结果可能会很难看。 示例 <html> <body> <p>你可以使用Height和Width属性来改变 图片的大小。</p> <p><img src="> <p><img src="http://5blogs.com/images/oblog_powered.gif" width="30" height="30"></p> <p><img src="http://5blogs.com/images/oblog_powered.gif" width="100" height="80"></p> <p><img src="http://5blogs.com/images/oblog_powered.gif" width="300" height="300"></p> </body> </html> 建议 图片相对文字，所占的字节数较多，比如一个全屏的 图片，即使经过压缩，也要占去大约50k字节，这相当于25000字的文本。因此浏览器载入 图片比较费时，建议一个 HTML文件里不要包含过多的 图片，否则会影响你的网页显示速度。 更多示例 背景 图片 <html> <body background="../image/background.jpg"> <h3>这个网页有背景 图片哦！</h3> <p>如果 图片比页面小， 图片会自动重复。</p> </body> </html> 这个示例演示如何将一个 图片作为 HTML网页的背景 图片。 将一个 图片作为一个超链接 <html> <body> <p> 你可以将一张 图片作为一个链接，点击这个 图片。 <a href=" src="../image/logo.jpg" ></a> </p> </body> </html> |
|
html 图片上下居中 HTML图片(Images)
|
|
作者：互联网 来源：
互联网 点击数： <script src="http://www.08.la/news2010/Plus/ACT.Hits.asp?ModeID=1&ID=7615"></script> 更新时间：2010年07月31日
|
|
用<img>这个Tag可以在 HTML里面插入 图片。最基本的语法如下： <img src="url"> url表示 图片的路径和文件名。比如url可以是http://5blogs.com/images/oblog_powered.gif，也可以是个相对路径"../image/logo.jpg"。 图片alt属性 <img>中有一个alt属性，英文叫alternate text。例句如下： <img src = "http://5blogs.com/images/oblog_powered.gif" alt="smile face"> 假使浏览器没有载入 图片的功能，浏览器就会转而显示Alt属性的值。 其实，现在大多数浏览器都支持 图片载入。在此介绍Alt属性，是因为它的另外一个重要功能。目前搜索引擎抓取工具无法识别图像中所含的文字，所以用ALT属性写上 图片的说明，便于搜索引擎抓取你网页的内容。 示例 <html> <body> <p>将鼠标停留在 图片上，你可以看到Alt属性里写的内容。</p> <img src="http://5blogs.com/images/oblog_powered.gif" alt="我博客Logo标志" ><br> </body> </html> 图片align属性 用align属性，可以改变 图片的垂直(居上、 居中、居下)对齐方式和水平对齐方式(居左、 居中、居右)。 示例 <html> <body> <p> 图片的 上下对齐方式：</p> <p><img src="http://5blogs.com/images/oblog_powered.gif" align="top">对齐方式:top</p> <p><img src="http://5blogs.com/images/oblog_powered.gif" align="middle">对齐方式:middle</p> <p><img src="http://5blogs.com/images/oblog_powered.gif" align="bottom">对齐方式:bottom</p> <p> 图片的左右对齐方式：</p> <p><img src="http://5blogs.com/images/oblog_powered.gif" align="Left">对齐方式:left</p> <p><img src="http://5blogs.com/images/oblog_powered.gif" align="center">对齐方式:center</p> <p><img src="http://5blogs.com/images/oblog_powered.gif" align="right">对齐方式:right</p> </body> </html> 图片的大小 在缺省状况下， 图片显示原有的大小。你可以用height和width属性改变 图片的大小。不过 图片的大小一旦被改变， 图片会相应放大或缩小，显示出来的结果可能会很难看。 示例 <html> <body> <p>你可以使用Height和Width属性来改变 图片的大小。</p> <p><img src="> <p><img src="http://5blogs.com/images/oblog_powered.gif" width="30" height="30"></p> <p><img src="http://5blogs.com/images/oblog_powered.gif" width="100" height="80"></p> <p><img src="http://5blogs.com/images/oblog_powered.gif" width="300" height="300"></p> </body> </html> 建议 图片相对文字，所占的字节数较多，比如一个全屏的 图片，即使经过压缩，也要占去大约50k字节，这相当于25000字的文本。因此浏览器载入 图片比较费时，建议一个 HTML文件里不要包含过多的 图片，否则会影响你的网页显示速度。 更多示例 背景 图片 <html> <body background="../image/background.jpg"> <h3>这个网页有背景 图片哦！</h3> <p>如果 图片比页面小， 图片会自动重复。</p> </body> </html> 这个示例演示如何将一个 图片作为 HTML网页的背景 图片。 将一个 图片作为一个超链接 <html> <body> <p> 你可以将一张 图片作为一个链接，点击这个 图片。 <a href=" src="../image/logo.jpg" ></a> </p> </body> </html> |
html 图片上下居中 HTML图片(Images)
用<img>这个Tag可以在HTML里面插入图片。最基本的语法如下： <img src="url">
url表示图片的路径和文件名。比如url可以是http://5blogs.com/images/oblog_powered.gif，也可以是个相对路径"../image/logo.jpg"。 图片alt属性
<img>中有一个alt属性，英文叫alternate text。例句如下： <img src = "http://5blogs.com/images/oblog_powered.gif" alt="smile face">
假使浏览器没有载入图片的功能，浏览器就会转而显示Alt属性的值。
其实，现在大多数浏览器都支持图片载入。在此介绍Alt属性，是因为它的另外一个重要功能。目前搜索引擎抓取工具无法识别图像中所含的文字，所以用ALT属性写上图片的说明，便于搜索引擎抓取你网页的内容。
示例
<html>
<body>
<p>将鼠标停留在图片上，你可以看到Alt属性里写的内容。</p>
<img src="http://5blogs.com/images/oblog_powered.gif" alt="我博客Logo标志" ><br>
</body>
</html>
图片align属性
用align属性，可以改变图片的垂直(居上、居中、居下)对齐方式和水平对齐方式(居左、居中、居右)。
示例
<html>
<body>
<p>图片的上下对齐方式：</p>
<p><img src="http://5blogs.com/images/oblog_powered.gif" align="top">对齐方式:top</p>
<p><img src="http://5blogs.com/images/oblog_powered.gif" align="middle">对齐方式:middle</p>
<p><img src="http://5blogs.com/images/oblog_powered.gif" align="bottom">对齐方式:bottom</p>
<p>图片的左右对齐方式：</p>
<p><img src="http://5blogs.com/images/oblog_powered.gif" align="Left">对齐方式:left</p>
<p><img src="http://5blogs.com/images/oblog_powered.gif" align="center">对齐方式:center</p>
<p><img src="http://5blogs.com/images/oblog_powered.gif" align="right">对齐方式:right</p>
</body>
</html>
图片的大小
在缺省状况下，图片显示原有的大小。你可以用height和width属性改变图片的大小。不过图片的大小一旦被改变，图片会相应放大或缩小，显示出来的结果可能会很难看。
示例
<html>
<body>
<p>你可以使用Height和Width属性来改变图片的大小。</p>
<p><img src=">
<p><img src="http://5blogs.com/images/oblog_powered.gif" width="30" height="30"></p>
<p><img src="http://5blogs.com/images/oblog_powered.gif" width="100" height="80"></p>
<p><img src="http://5blogs.com/images/oblog_powered.gif" width="300" height="300"></p>
</body>
</html>
建议
图片相对文字，所占的字节数较多，比如一个全屏的图片，即使经过压缩，也要占去大约50k字节，这相当于25000字的文本。因此浏览器载入图片比较费时，建议一个HTML文件里不要包含过多的图片，否则会影响你的网页显示速度。 更多示例
背景图片 <html>
<body background="../image/background.jpg"> <h3>这个网页有背景图片哦！</h3>
<p>如果图片比页面小，图片会自动重复。</p>
</body>
</html>
这个示例演示如何将一个图片作为HTML网页的背景图片。
将一个图片作为一个超链接
<html>
<body>
<p>
你可以将一张图片作为一个链接，点击这个图片。
<a href=" src="../image/logo.jpg" ></a>
</p>
</body>
</html>
<div style="text-align:center"></div>或者
<center></center>
<div style="vertical-align:middle"></div>