html文字加超链接设置

html文字加超链接设置

超级链接简单来讲，就是指按内容链接。下面是html文字加超链接的设置步骤，欢迎大家阅读了解。

超链接的基本格式是： scheme://host[:post]/path/filename

scheme指的是http,ftp,file,mailto,news,gopher,telnet七种

host指的是IP地址或计算机名称

post指的是服务器端口

path指的是文件路径

filename指的是文件名

如图就是htpp和file形式的链接

常见的超链接1--http

只要在链接体外添加代码，如去百度，鼠标放在去百度上出现下划线，下面有百度网址出现，点击变登陆百度主页。

常见的`超链接2--file

只要在链接体外添加代码，如本地图片

常见的超链接3--file

只要在链接体外添加代码，如进入ftp

常见的超链接4--mailto

只要在链接体外添加代码，如E-MAIL

示例中因为我电脑没装邮箱客户端所以不能打开，只要装了的电脑都难打开邮箱并跳出写信给630851303@qq.com界面。

注意事项

代码中的符号请注意都要在英文状态下输入。

1、图像链接

图片超链接和文字超链接是一样的，在图像上插入链接：点击图片，跳转页面：<a></a>之间插入<img/>元素。如：<a href="超链接地址"><img src="路径" alt="替代文本"></a>。（如图）

2、局部链接

在某种情况下，我们不希望整张图片加链接。希望的效果是：点击图片某个区域，链接到某地址。是通过map标签和<area>标签结合使用的。如：

(1)、<img src="超链接地址" alt="替换文本"  usemap="#map名称" width="链接区域宽度"  height="链接区域高度"/>

(2)、<map name="map名称" id="id名称"><area shape="描述区域的形状" coords="坐标" href="链接地址" target="打开方式" alt="替换文本" /></map>

扩展资料：

<img>元素向网页中嵌入一幅图像。

img元素的属性：

(1)、src：图片来源URL。

(2)、alt:规定图像的替代文本。

(3)、height和width:单位为像素，如果不指定，则为默认；如果只指定height或width，则自动调整大小。

(4)、ismap ：将图像定义为服务器端图像映射。

(5)、usemap：将图像定义为客户器端图像映射。

(6)、longdesc： 指向包含长的图像描述文档的 URL。

<map>元素定义一个客户端图像映射。

map元素的属性：

(1)、id:为 map 标签定义唯一的名称。

(2)、name:为 image-map 规定的名称。

注意：<img>中的 usemap 属性可引用 <map>中的 id 或 name 属性（取决于浏览器），所以应同时向 <map>添加 id 和 name 属性。

<area>元素定义图像映射中的区域。

area元素的属性：

(1)、alt:规定图像的替代文本。

(2)、shape：用于描述区域的形状，rect\poly\circle\default可选,default指的是还没有被定义的区域。

(3)、coords：指定区域的坐标。比如矩形有4个坐标，前两个是左上角的x,y坐标，后两个是右下角的x,y坐标。

(4)、href和nohref：href指定目的的链接，如果不指定href属性，则需要指定nohref，nohref="nohref"

(5)、target：和<a>标签的作用一样。

注意：area 元素永远嵌套在 map 元素内部。

参考资料：

百度百科-链接图像

可以使用input的click事件进行处理，这里假设点击转向的链接是百度，方法如下：

1、DOM0级事件处理:

1）html代码：<input name="注册" type="button" id="btn1" title="登注册" value="注册" o nclick="goToBaiDu()"/>

2）js代码：

function goToBaiDu(){

console.log('现在去百度啦！')

window.open('http://www.baidu.com')

}

效果如下：

2、DOM2级事件，绑定click事件，如下：

1）html代码：<input name="注册" type="button" id="btn1" title="登注册" value="注册"/>

2）js代码：

window.onload = function(){

document.getElementById('btn1').addEventListener('click',goToBaiDu)

}

function goToBaiDu(){

console.log('现在去百度啦！')

window.open('http://www.baidu.com')

}

效果如下：

3、上面的方式的打开一个新窗口，还有一个打开链接的方式，是在当前标签页下直接跳转到另一个页面，代码如下：

window.location.href="http://www.baidu.com"

---