【HTML】链接、图像

链接

• 如果没有“http://”浏览器就会在当前服务器寻找链接文档

邮件链接

<a href="mailto:alklecker@example.com">Contact  Al Klecker</a>

电话链接

<a href="tel:+01-800-555-1212">Call us free at （800）555-1212</a>

• Android和Iphone会检测电话号码并自动把它们变成链接，可以在meta中关闭自动检测

<meta name="format-detection" content="telephone=no">

图像

• 位图：由彩色像素网格组成，PNG、JPEG、GIF、WebP、JPEG-XR
• 矢量图：包含从数学角度定义的路径，有SVG格式
• 其他格式必须转换成网页认可的形式，如果想保持图形文件原有的形式的话，就使用文件链接

<a href="architecture.eps">Get the drawing</a>

• 新图像格式：如果是SVG或者其他较新的格式如WebP、JPEG-XR，就需要将该媒体类型添加到服务器的官方列表中

浏览器会使用助手应用程序来显示无法单独处理的媒体，将链接中的文件后缀与相应的助手应用程序匹配。

• MIME类型：即官方媒体类型，任何可能驻留在服务器上的媒体文件都有MIME类型和后缀，如SVG有MIME类型image/svg+xml以及后缀.svg和.svgz
• htaccess文件：该文件包含所有文件类型及其可接受后缀的列表，需要确保添加新图像格式的MIME类型才能正确提供服务。（流行的Apache服务器软件都会使用根目录中的htaccess文件）

服务器会在列表中查找请求文件的后缀如.webp并将其与包含在浏览器HTTP响应中的ContentType（image/webp）匹配。这会告诉浏览器什么数据来了，以及如何解析它

• 默认情况下内联图像的底部与文本的基准线对齐
• XML：eXtensible Markup Language，可扩展标记语言
• SVG：是XML的一个示例或应用程序，提供了标记语言应如何编写和协作的规则、标准。SVG格式的图像形状和路径及其属性都是用标准的SVG标记语言编写的。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 180"> 

<rect width="300" height="180" fill="purple" rx="20" ry="20"/>

<text x="40" y="114" fill="yellow" font-family="'Verdana-Bold'" font-size="72"> hello!
</text>

</svg>

• 支持SVG的浏览器读取指令并按照设计绘制图像，并且可以使用样式表改变它们的外观，也可以使用JavaScript添加交互性

创建SVG的四种方式

• 嵌入img

<img src="/images/circle.svg" alt="">

缺点：
1、不能使用外部样式表将样式应用于SVG
2、不能使用JavaScript操纵SVG中的元素
3、不能在SVG中使用任何外部文件，如嵌入式图像或Web字体

• 在HTML中内联

<p>This summer, try making pizza 
	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 72 72" width="100" height="100">
		<circle fill="#D4AB00" cx="36" cy="36" r="36"/>
		<circle opacity=".7" fill="#FFF" stroke="#8A291C" cx="36.1" cy="35.9" r="31.2"/>
		<circle fill="#A52C1B" cx="38.8" cy="13.5" r="4.8"/>
		<circle fill="#A52C1B" cx="22.4" cy="20.9" r="4.8"/> 
		<circle fill="#A52C1B" cx="32" cy="37.2" r="4.8"/> 
		<circle fill="#A52C1B" cx="16.6" cy="39.9" r="4.8"/> 
		<circle fill="#A52C1B" cx="26.2" cy="53.3" r="4.8"/> 
		<circle fill="#A52C1B" cx="42.5" cy="27.3" r="4.8"/> 
		<circle fill="#A52C1B" cx="44.3" cy="55.2" r="4.8"/> 
		<circle fill="#A52C1B" cx="54.7" cy="42.9" r="4.8"/>
		<circle fill="#A52C1B" cx="56" cy="28.3" r="4.8"/>
	</svg>
on your grill.
</p>

• 嵌入object元素

<object type="image/svg+xml" data="pizza.svg"> 
	<img src="pizza.png" alt="pizza">
</object>

自带回退效果，如果无法为显示data指定的媒体，object中的任何内容都会显现
不是页面DOM的一部分，不能使用样式表对SVG中的元素设置样式。
可以编写脚本并加载外部文件，也可以使用脚本访问父HTML文档
有些浏览器即使支持SVG也会下载object中的内容，解决方法是使用空div容器中的CSS背景图像

<object type="image/svg+xml" data="pizza.svg"> 
	<div style="background-image: url(pizza.png); width 100px; height:
100px;" role="img" aria-label="pizza">
</object>

• 用CSS的背景图像嵌入

header { background-image: url(/images/decorative.svg);
}

使用picture实现SVG回退

<picture> 
	<source type="image/svg+xml" srcset="pizza.svg"> 
	<img srcset="pizza.png" alt="No SVG support">
</picture>

图像元素总结