一、为页面增加图像
1、JPEG、PNG和GIF的不同
照片和复杂的图像使用JPEG。
JPEG:有损、不支持透明、比较小。
单色图像、几何图形和logo使用PNG和GIF。
PNG:最适合单色和线条构成的图像、无损、可以将颜色设置成透明、压缩优于GIF。
GIF:最适合单色和线条构成的图像、无损、只允许将一种颜色设置为透明、支持动画。
2、<img>元素
<img>元素最简单情况
<img src="../image/red.jpg">
a)可以指向另一个不同网站上的图像
<img src="https://img-my.youkuaiyun.com/uploads/avatar/0/D/2/1_xu3737284.jpg">
注:对相同网站上的链接或图像最好使用相对链接。
b)一定要提供候选格式
不同设备上查看网页图像的效果可能会不同,提供候选格式可以在图像无法显示时给出一些提示,告诉他们图像里有什么信息。
使用<img>元素的
alt属性
<img src="https://img-my.youkuaiyun.com/uploads/avatar/0/D/2/1_xu3737284.jpg" alt="a man">
c)调整图像大小
使用<img>元素的 width和 heigth属性。宽度和高度都是用像素设定。<img src="../image/red.jpg" width="48" height="100">
d)为图像添加链接
将<img>元素放在 <a>元素中。浏览器就会将这个图像当成可点击的链接。 <a href="test.html">
<img src="red.jpg" alt="red">
</a>
二、HTML标准
1、使用HTML5标准
HTML5是HTML最好最棒的标准,其是随时间而不断完善的,也是HTML的最后一个版本。
最重要的是,HTML5不只被设计用来建立web页面,而且被设计建立成熟的web应用,如地图、游戏。
告诉浏览器你使用的是HTML5。HTML5的doctype:
<!doctype html>
注:doctype不是元素。
2、W3C验证工具
3、增加<meta>指定字符编码
<meta>加到head元素中所有其他元素的上面。<pre name="code" class="html"> <head> <meta charset="utf-8"> <title>hello world!</title> </head>
三、HTML小结
a、一定要以<doctype>开头
b、<html>要紧随<doctype>后
c、只有<head>和<body>元素能放在<html>中,其他元素必须放在<head>或<body>中
d、在<head>中指定正确的字符编码
e、一定要在<head>中包含<title>元素
f、嵌套元素时要当心,不允许在<img>等void元素中嵌套其他内联元素
g、检查属性