HTML基础介绍二(图像和超级链接)

原创 2015年07月08日 15:48:45

一:图像

1.      添加图片

<img src="图片名称">

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

<img src="img/2.jpg"/>

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.      边框

<img src ="img/3.gif"border="0px"/>

5.      提示文字

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

  <img src="img/3.gif"alt="HTML教程"/>

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>

 <a href="3.rar">下载文件</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>


 

HTML的超链接标签

底部 本文本指向div页面 本文本指向百度 本文本通过新窗口打开百度
  • u014050788
  • u014050788
  • 2016年04月27日 16:25
  • 337

HTML 基础控件介绍

1.标签 标签用于搜集用户信息。 根据不同的 type 属性值,输入字段拥有很多种形式。可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。 type属性如下:type= text:文本区...
  • a359680405
  • a359680405
  • 2015年04月27日 15:20
  • 1897

HTML 超级链接详细讲解

超级链接 超级链接是网站中使用比较频繁的HTML元素,因为网站的各种页面都是由超级链接串接而成,超级链接完成了页面之间的跳转。超级链接是浏览者和服务器的交互的主要手段,在后面的技术中会逐步深化学习。...
  • liuxuekai
  • liuxuekai
  • 2016年07月22日 22:29
  • 678

【OpenCV学习笔记】2.1OpenCV基本数据类型

OpenCV提供了多种基本数据类型。虽然这些数据类型在C语言中不是基本类型,但结构都很简单,可将它们作为原子类型。可以在“…/OpenCV/cxcore/include”目录下的cxtypes.h文件...
  • mpp_king
  • mpp_king
  • 2016年12月15日 09:37
  • 316

图像处理常用算法(基础)

同图像灰度不同,边界处一般会有明显的边缘,利用此特征可以分割图像。需要说明的是:边缘和物体间的边界并不等同,边缘指的是图像中像素的值有突变的地方,而物体间的边界指的是现实场景中的存在于物体之间的边界。...
  • wahaha1_
  • wahaha1_
  • 2016年01月16日 20:13
  • 3112

科目二上车前的基础说明

从科目一到科目中间大概有一个半月时间
  • lilinoscar
  • lilinoscar
  • 2014年11月11日 14:38
  • 8234

灰度图像二值化-----c++实现

前天闲着没事干,就写了写BMP图像处理,感觉大家还比较感兴趣。。所以现在没事,继续更新。。这次简单的写了灰度图像二值化。。这是什么概念呢? 图像的二值化的基本原理    图像的二值化处理就是将图像上的...
  • keep_moving_cqu
  • keep_moving_cqu
  • 2013年08月13日 16:47
  • 5996

每天一点matlab——二值图像及其特征提取

[+] 1、二值图像的生成 函数im2bw:把图像转换成二值图像 [plain] view plaincopy load trees...
  • lf666000
  • lf666000
  • 2015年12月10日 19:22
  • 3034

基于HTML5的轻量级图像处理引擎Demo

前几天看了看腾讯Web前端Alloy Team的基于HTML5的专业级开源图像处理引擎,非常喜欢,毕竟这样的项目本身在国内就不多,更别说做得好的。我说的所谓这样的项目,指的是基于HTML5和javas...
  • ph_wuwuwu
  • ph_wuwuwu
  • 2013年04月24日 18:33
  • 1529

细化处理(二值图像)Hilditch细化算法

细化处理即删除标记像素,但不会影响图像的性质(连接、方向等) 标记目标像素删除需要满足6个条件: 1.p的灰度值为255,即p不是背景; 2.x0、x2、x4、x6不全为255;(不然删除p...
  • qq_27208177
  • qq_27208177
  • 2017年01月04日 16:12
  • 802
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:HTML基础介绍二(图像和超级链接)
举报原因:
原因补充:

(最多只允许输入30个字)