HTML基础介绍二（图像和超级链接）

最新推荐文章于 2022-03-30 00:37:56 发布

@struggle@

最新推荐文章于 2022-03-30 00:37:56 发布

阅读量1.1k

点赞数 1

分类专栏： web学习笔记

本文链接：https://blog.csdn.net/zxq1138634642/article/details/46804357

版权

web学习笔记专栏收录该内容

8 篇文章 0 订阅

订阅专栏

一：图像

1. 添加图片

Src属性指定图像的具体位置。

2. 宽度属性

<imgsrc="img/3.jpg" width="100" /><br> 大小是固定的

<img src="img/3.jpg"width="80%"/> 图像宽度占浏览器宽度的80%，大小是不固定的。

设置网页时，为了有意的增大或减小图像的宽度和高度，才指定具体的值。

3. 高度属性

align 的值共分为五种，分别是top顶，right右，bottom底，left左，middle中间。

<imgsrc="img/4.gif" width="100" height="100" align="top"/> 图像与文本top对齐<br/>

<imgsrc="img/4.gif" width="100" height="100"algin="middle"/>图像与文本middle对齐<br/>

4. 边框

5. 提示文字

制作网页时，为了避免图像不能正常显示的情况，都要设置alt参数。

6. 水平边距hspace和垂直边距vspace

<imgsrc="img/3.gif" width="50px" height ="50px"hspace="10px" vspace="10px"align="left"/>

二：超级链接

1.<a></a>标签是双标签，文字内容放置在<a></a>之间，有一个href属性，它的值表示链接的地址，可以使网页地址，图像地址，影视文件。

<ahref="">文字链接</a>

<ahref="http://www.xinhua.org">新华网</a>

<a href="2-1.html">HTML教程</a>

2.图像链接

<ahref="http://www.xinhua.org"><imgsrc="img/3.gif"/></a>

3.锚点链接

锚点由name属性来创建一个命名锚记，实现同一个网页内快速跳转。创建锚点

<aname="one">第一段</a>

然后在链接中指向这个锚，但要在其名前加上”#”。

<ahref="#one">第一段</a>

<aname="one">第一段内容</a>

4.超级链接的路径

绝对路径：带域名的文件的完整路径，通常使用http://

<ahref=”http://www.xinhua.org”>新华网</a>

相对路径：<a href=”2_img.html”返回上一页</a>

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
 </head>
 <body>
  <img src="图片名称">
  <img src="img/2.jpg"/>
  <img src="img/3.jpg" width="100" /><br>
  <img src="img/3.jpg" width="80%"/>
  <img src="img/4.gif" width="100" height="100" 
  align="top"/> 图像与文本top对齐<br/>
  <img src="img/4.gif" width="100" height="100" algin="middle"/>
  图像与文本middle对齐<br/>
  <img src ="img/3.gif" border="0px"/>
  <img src="img/3.gif" alt="HTML教程"/>
  <img src="img/3.gif" width="50px" height ="50px" hspace="10px" vspace="10px"align="left"/>
  <a href="">文字链接</a>
  <a href="http://www.xinhua.org">新华网</a>
  <a href="2-1.html">HTML教程</a>
  <a href="3.rar">下载文件</a>
  <a href="http://www.xinhua.org"><img src="img/3.gif"/></a>
  <a name="one">第一段</a>
  <a href="#one">第一段</a>
  <a name="one">第一段内容</a>
 </body>
</html>