HEAD FIRST HTML&CSS 读书笔记(3)

一、为页面增加图像

1、JPEG、PNG和GIF的不同

照片和复杂的图像使用JPEG。

JPEG:有损、不支持透明、比较小。

单色图像、几何图形和logo使用PNG和GIF。

PNG:最适合单色和线条构成的图像、无损、可以将颜色设置成透明、压缩优于GIF。

GIF:最适合单色和线条构成的图像、无损、只允许将一种颜色设置为透明、支持动画。


2、<img>元素

<img>元素最简单情况

<img src="../image/red.jpg">

a)可以指向另一个不同网站上的图像

<img src="http://my.csdn.net/uploads/avatar/0/D/2/1_xu3737284.jpg">
注:对相同网站上的链接或图像最好使用相对链接。

b)一定要提供候选格式

不同设备上查看网页图像的效果可能会不同,提供候选格式可以在图像无法显示时给出一些提示,告诉他们图像里有什么信息。

使用<img>元素的 alt属性

<img src="http://my.csdn.net/uploads/avatar/0/D/2/1_xu3737284.jpg" alt="a man">

c)调整图像大小

使用<img>元素的 widthheigth属性。宽度和高度都是用像素设定。
<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验证工具

位于http://validator.w3.org

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、检查属性

 
 

你可能感兴趣的:(HEAD FIRST HTML&CSS 读书笔记(3))