HTML分享学习

1.HTML 图像

在 HTML 中，图像由<img> 标签定义。
<img> 是空标签，意思是说，它只包含属性，并且没有闭合标签。
 

1.1HTML图像src属性

src属性指 "source"。源属性的值是图像的 URL 地址。也就是图片资源的路径。
图片资源的路径分绝对路径和相对路径,还可以是网络地址
绝对路径--从操作系统的指定盘中的目录开始查找图片的路径。

<img src="F:\wangxingruanjian\project\veer-352390696.jpg">

效果如下： 

 绝对路径缺点:
      1.如果图片保存目录太深，图片的操作路径就会很长
      2.当我们将网页\保存图片的文件夹移动之后，这个图片的路径就变化。图片无法正常显示。

相对路径--以当前网页为参照、为中心，对外开始查找图片的路径。
1.图片与当前网页在同一个目录下【src=”图片名称”】
2.图片保存在当前网页所在目录的子文件夹中【src=”子文件夹的名称\图片名称”】
3.图片保存在当前网页所在目录的父文件夹中【src=”../子文件夹的名称/图片名称”】

<img src="..\project\veer-352390696.jpg">

图片路径还可以是网络地址
 

<img src="https://tenfei02.cfp.cn/creative/vcg/veer/1600water/veer-352390696.jpg">

1.2HTML 图像- alt属性

alt 属性用来为图像定义一串预备的可替换的文本。
在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯，这样有助于更好的显示信息，并且对于那些使用纯文本浏览器的人来说是非常有用的。
 

<img src="pulpit.jpg" alt="这是一张图片">

 1.3HTML 图像- 设置图像的高度与宽度

height（高度） 与 width（宽度）属性用于设置图像的高度与宽度。属性值默认单位为像素。

<img src="pulpit.jpg" alt="这是一张图片" width="50" height="50">

 

 指定图像的高度和宽度是一个很好的习惯。如果图像指定了高度宽度，页面加载时就会保留  指定的尺寸。如果没有指定图片的大小，加载页面时有可能会破坏HTML页面的整体布局。

 2.HTML 超链接（链接）

HTML使用标签 <a>来设置超文本链接。
超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。
当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。
在标签<a> 中使用了href属性来描述链接的地址。
默认情况下，链接将以以下形式出现在浏览器中：
一个未访问过的链接显示为蓝色字体并带有下划线。
访问过的链接显示为紫色并带有下划线。
点击链接时，链接显示为红色并带有下划线。
注意：如果为这些超链接设置了 CSS 样式，展示样式会根据 CSS 的设定而显示。 

<a href="#">超链接</a>