十一，HTML图片（图片）
用<img>这个Tag可以在HTML里面插入图片。最基本的语法如下：
<img src="url">url表示图片的路径和文件名。比如url可以是images / logo / blabla_logo01.gif，也可以是个相对路径“ ../ images/logo/blabla_logo01.gif ”。
<html>
<body>
<p>
Logo图片：<img src="../images/html_tutorials/blabla_logo.gif">
</p>
</body>
</html>图片ALT属性
<img>中有一个alt属性，英文叫备用文本。翻译如下：
<img src = "../images/html_tutorials/smile.jpg" alt="smile face">假使浏览器没有载入图片的功能，浏览器就会转而显示Alt键属性的值。
其实，现在大多数浏览器都支持图片载入。在此介绍Alt键属性，是因为它的另外一个重要功能。目前搜索引擎抓取工具无法识别图像中所含的文字，所以用ALT属性写上图片的说明，便于搜索引擎抓取你网页的内容。
<html>
<body>
<p>将鼠标停留在图片上，你可以看到Alt属性里写的内容。</p>
<img src="../images/logo/blabla_logo.gif" alt="Logo标志" ><br>
<img src="../images/html_tutorials/frjj01.jpg" alt="芙蓉姐姐照片：红配绿一台戏" >
</body>
</html>图片对齐属性
用对准属性，可以改变图片的垂直（居上，居中，居下）对齐方式和水平对齐方式（居左，居中，居右）。
<html>
<body>
<p>图片的上下对齐方式：</p>
<p><img src="../images/logo/blabla_logo.gif" align="top">对齐方式:top</p>
<p><img src="../images/logo/blabla_logo.gif" align="middle">对齐方式:middle</p>
<p><img src="../images/logo/blabla_logo.gif" align="bottom">对齐方式:bottom</p>
<p>图片的左右对齐方式：</p>
<p><img src="../images/logo/blabla_logo.gif" align="Left">对齐方式:left</p>
<p><img src="../images/logo/blabla_logo.gif" align="center">对齐方式:center</p>
<p><img src="../images/logo/blabla_logo.gif" align="right">对齐方式:right</p>
</body>
</html>图片的大小
在缺省状况下，图片显示原有的大小。你可以用高度和宽度属性改变图片的大小。不过图片的大小一旦被改变，图片会相应放大或缩小，显示出来的结果可能会很难看。
<html>
<body>
<p>你可以使用Height和Width属性来改变图片的大小。</p>
<p><img src="../images/html_tutorials/smile.jpg"></p>
<p><img src="../images/html_tutorials/smile.jpg" width="30" height="30"></p>
<p><img src="../images/html_tutorials/smile.jpg" width="100" height="80"></p>
<p><img src="../images/html_tutorials/smile.jpg" width="300" height="300"></p>
</body>
</html> 建议
图片相对文字，所占的字节数较多，比如一个全屏的图片，即使经过压缩，也要占去大约50K字节，这相当于25000字的文本。因此浏览器载入图片比较费时，建议一个HTML文件里不要包含过多的图片，否则会影响你的网页显示速度。
更多示例
这个示例演示如何将一个图片作为HTML网页的背景图片。
<html>
<body background="../images/html_tutorials/background.jpg">
<h3>这个网页有背景图片哦！</h3>
<p>如果图片比页面小，图片会自动重复。</p>
</body>
</html>这个示例演示了如何将一个图片作为一个超链接，即点击一个图片，可以连接到其它文件。
<html>
<body>
<p>
你可以将一张图片作为一个链接，点击这个图片。
<a href="../asdocs/html_tutorials/humor03.html"><img src="../images/html_tutorials/smile.jpg" ></a>
</p>
</body>
</html>十二，HTML字体（字体）
在HTML里，可以用字体这个元素及其属性来设定字体的大小，颜色和字体风格。
字体大小
用字体大小属性（size）来设定字体的大小。示例代码如下：
<p><font size="2">这一段的字体大小的值是2。</font></p><html>
<head><title>字体大小 font size</title></head>
<body>
<p><font size="1">这段文字的字体大小值为1。</font></p>
<p><font size="2">这段文字的字体大小值为2。</font></p>
<p><font size="3">这段文字的字体大小值为3。</font></p>
<p><font size="4">这段文字的字体大小值为4。</font></p>
<p><font size="5">这段文字的字体大小值为5。</font></p>
<p><font size="6">这段文字的字体大小值为6。</font></p>
<p><font size="7">这段文字的字体大小值为7。</font></p>
</body>
</html>字体风格
用脸属性来设定字体风格示例代码如下：
<p><font fac="arial">这一段的字体风格是arial。</font></p><html>
<head><title>字体风格 font face</title></head>
<body>
<p>以下第一段用的是arial字体，第二段用的是courier字体，第三段用的是verdana字体。</p>
<p><font face="arial">arial courier verdana</font></p>
<p><font face = "courier">arial courier verdana</font></p>
<p><font face="verdana">arial courier verdana</font></p>
</body>
</html>字体颜色
用颜色属性（color）来设定字体颜色。
颜色字体请代码参见_百度一下。
<p><font color="#FF0000">这一段的字体颜色是红色</font></p><html>
<head><title>字体颜色 font color</title></head>
<body>
<p>这段文字用的是缺省的字体颜色。</p>
<p><font color="#FF0000">这段文字的字体颜色为红色。</font></p>
<p><font color="gray">这段文字的字体颜色为灰色。</font></p>
<p><font color="#33CC00">这段文字的字体颜色为绿色。</font></p>
</body>
</html>注意
HTML4的标准中，已经不建议使用的字体及其属性来设定字体，而是建议用CSS来设定字体的大小，颜色，字体风格等。
十三，HTML背景颜色和背景图片
HTML的<body>有两个关于背景的属性，一个是bgcolor，是设置背景颜色的;另一个是background，是设置背景图片的。
BGCOLOR属性
的bgcolor属性用来设置HTML网页的背景颜色。
<html>
<body bgcolor="yellow">
<h2>看，这个页面是黄色的。</h2>
</body>
</html>背景属性
背景属性用来设置HTML网页的背景图片。背景属性值就是背景图片的路径和文件名，如：
<body background="../images/html_tutorials/blabla_logo.gif">
<body background="http://www.admin5.com/html/gifs/blabla_logo01.gif">如果背景图片小于网页显示窗口，那么这个背景图片会自动重复。
<html>
<body background="../images/html_tutorials/background.jpg">
<h3>这个网页有背景图片哦！</h3>
<p>如果图片比页面小，图片会自动重复。</p>
</body>
</html>建议
bgcolor和background这两个<body>的属性，在新的HTML标准（HTML 4和XHTML）里已不建议使用，而建议用CSS设置背景颜色和图片。
为保证浏览器载入网页的速度，建议尽量不要使用字节过大的图片作为背景图片。
十四，HTML头部信息（Head）
HTML头部信息（head）里包含关于所在网页的信息。头部信息（head）里的内容，主要是被浏览器所用，不会显示在网页的正文内容里。
另外，搜索引擎如谷歌，雅虎，百度等也会查找你网页中的头信息。为了让搜索引擎能够收录你的网页，你也要填写适当的头信息。（网站被搜索引擎收录，还有其它的方法，比如被其它网站链接，这里不赘述，请浏览搜索引擎网站。）
下面说几个常用的头信息里的HTML元素，如标题（标题），链接（链接），样式（风格）以及关于信息（元）。
标题（标题）
标题（标题）是最常用的头信息它不显示在HTML网页正文里，显示在浏览器窗口的标题栏里见图。：
示例代码如下：
<head>
<title>HTML中文教程头部信息(head)之标题(title)说明</title>
</head>链接（链接）
用链接（链接）可以建立和外部文件的链接。常用的是对CSS外部样式表（外部样式表）的链接。示例代码如下：
<link rel="stylesheet" href="mainstyles.css" type="text/css">有关CSS外部样式表和示例，详见百度CSS简介。
样式（风格）
用样式（style）可以设值网页的内部样式表（internal style sheet）。示例代码如下：
<head>
<style>
body {background-color:white; color:black;}
h1 {font: 18pt arial bold;}
</style>
</head>有关CSS内部样式表和示例，详见百度CSS简介。
关于网页信息（甲基）
在计算机语言里，你经常可以看到一个前缀 - meta，meta就是“关于”（about）的意思。
这元解释起来比较拗口，比如元数据，意为描述数据的数据，英文即关于数据的数据。还有一个词叫元语言，表示一种描述其它语言的语言。再举一个例子，图元文件，表示描述其它文件的文件。
在HTML里，meta标记（meta tags）表示用来描述网页的有关信息。示例代码如下：
<meta name="description" content="HTML中文教程之头部信息">
<meta name="keywords" content="HTML,tutorials,source codes">
<meta name="author" content="csdn">
利用元中的刷新你还可以实现自动跳转页面的功能示例代码：
<meta http-equiv="Refresh" content="5;url=http://www.admin5.com/html/html_tutorials/index.html"><html>
<head>
<meta http-equiv="Refresh" content="5;url=http://www.admin5.com/html/html_tutorials/index.html">
</head>
<body>
<p>
由于网站版本更新，网站的HTML中文教程链接已改为
<a href="http://www.demo.com/html/html_tutorials/index.html"> http://www.demo.com/html/html_tutorials/index.html </a>。
</p>
<p>
如果在5秒钟后网页没有自动跳转，请点击上面的链接，进入网站的HTML中文教程。
</p>
</body>
</html>
扫一扫
151
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
