编写html5的小技巧3

╰半夏微凉° 2022-06-15 12:07 158阅读 0赞

## 1.使用<a>标签，链接到另一个页面 ##

使用`<a>`标签可实现超链接，它在网页制作中可以说是无处不在，只要有链接的地方，就会有这个标签。

语法：

<a  href="目标网址"  title="鼠标滑过显示的文本">链接显示的文本</a>

例如：

<a  href="http://www.imooc.com"  title="点击进入慕课网">click here!</a>

上面例子作用是单击`click here!`文字，网页链接到`http://www.imooc.com`这个网页。

title属性的作用，鼠标滑过链接文字时会显示这个属性的文本内容。这个属性在实际网页开发中作用很大，主要方便搜索引擎了解链接地址的内容（语义化更友好），如右侧案例代码（8-12行）。

注意：还有一个有趣的现象不知道小伙伴们发现了没有，只要为文本加入a标签后，文字的颜色就会自动变为蓝色（被点击过的文本颜色为紫色），颜色很难看吧，不过没有关系后面我们学习了css样子就可以设置过来（a\{color:\#000\}),后面会详细讲解。

## 在新建浏览器窗口中打开链接 ##

`<a>`标签在默认情况下，链接的网页是在当前浏览器窗口中打开，有时我们需要在新的浏览器窗口中打开。

如下代码：

`<a href="目标网址" target="_blank">click here!</a>`

## 2.使用mailto在网页中链接Email地址 ##

`<a>`标签还有一个作用是可以链接Email地址，使用mailto能让访问者便捷向网站管理者发送电子邮件。我们还可以利用`mailto`做许多其它事情。下面一一进行讲解，请看详细图示：

[![52da4f2a000150b714280550.jpg][]][52da4f2a000150b714280550.jpg]

注意：如果mailto后面同时有多个参数的话，第一个参数必须以“`?`”开头，后面的参数每一个都以“`&`”分隔。

下面是一个完整的实例:

[![52da52200001e00e07930061.jpg][]][52da52200001e00e07930061.jpg]

在浏览器中显示的结果：

发送

点击链接会打开电子邮件应用，并自动填写收件人等设置好的信息，如下图：

[![52da5026000148a706850470.jpg][]][52da5026000148a706850470.jpg]

## 3.认识<img>标签，为网页插入图片 ##

在网页的制作中为使网页炫丽美观，肯定是缺少不了图片，可以使用`<img>`标签来插入图片。

语法：

`<img src="图片地址" alt="下载失败时的替换文本" title = "提示文本">`

举例：

`<img src = "myimage.gif" alt = "My Image" title = "My Image" />`

讲解：

1、src：标识图像的位置；

2、alt：指定图像的描述性文本，当图像不可见时（下载不成功时），可看到该属性指定的文本；

3、title：提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本)；

4、图像可以是GIF，PNG，JPEG格式的图像文件。

[52da4f2a000150b714280550.jpg]: /images/20220615/3f948757a2194ce6bdb0be8e6bf87b06.png
[52da52200001e00e07930061.jpg]: /images/20220615/d3660e09e50141ffb5dbd6a160a2ddd6.png
[52da5026000148a706850470.jpg]: /images/20220615/3627b81078e64189ac195e13698e6421.png

发表评论取消回复

表情：

评论列表（有 0 条评论，158人围观）

还没有评论，来说两句吧...

相关阅读

相关用html编写的小广告板

练习小作品

淡淡的烟草味﹌/ 2024年05月06日 21:24/ 0 赞/ 27 阅读

相关编写简历的小技巧

事情的起因突然想要写这么一篇帖子，主要是因为看了社区中有个小伙伴开了一个匿名贴并贴出了简历让大家来一起讨论。我觉得很有意思，社区里好像很少有人写教程来讨论如何优化自己的简历

水深无声/ 2023年09月24日 23:30/ 0 赞/ 30 阅读

相关【HTML】905- 5个隐藏的 HTML 技巧

![48f8a5b5d99ec0f9d94fb42c5752198c.png][] 编译：冷星来源：SegmentFault 思否社区 Web开发人员都在广泛的使用HT

小鱼儿/ 2022年11月12日 05:24/ 0 赞/ 141 阅读

相关 html5技巧集锦

html5技巧集锦包括：设置<input>标签只能输入数字、如何设置select下拉框的默认值、显示/隐藏某个元素、使用css制作一个圆角按钮。 1、设置<input

红太狼/ 2022年09月15日 15:52/ 0 赞/ 169 阅读

相关 12个鲜为人知的HTML 5设计小技巧

慎用向右滑动操作、慎用横屏展示效果、按钮原理页面底部、使用SVG格式做矢量图…… 以上提到的技巧全都出自今天这篇好文，简单小巧但实操性很强，作为设计师，也要尽量避开这些坑。

矫情吗；*/ 2022年08月21日 12:52/ 0 赞/ 166 阅读

相关 OpenWrt Luci编写小技巧

技巧一：在luci页面中执行shell命令方法一：获得标准输出流 luci.sys.exec("命令") 然后可以声明一个变量将标准输出内容保存起来，如下

爱被打了一巴掌/ 2022年07月12日 02:53/ 1 赞/ 994 阅读

相关编写html5的小技巧2

1.使用ul，添加新闻信息列表在浏览网页时，你会发现网页上有很多信息的列表，如新闻列表、图片列表，如下图所示。 [![52d383cd0001085503320216

ゝ一纸荒年。/ 2022年07月03日 15:28/ 0 赞/ 171 阅读

相关编写html5程序的小技巧

1.使用<br>标签分行显示文本对于上一小节的例子，我们想让那首诗显示得更美观些，如显示下面效果： [![5292e6ee00014d6406260408.jpg][

分手后的思念是犯贱/ 2022年07月03日 15:28/ 0 赞/ 212 阅读

相关编写html5的小技巧3

1.使用<a>标签，链接到另一个页面使用`<a>`标签可实现超链接，它在网页制作中可以说是无处不在，只要有链接的地方，就会有这个标签。语法： <a hr

╰半夏微凉°/ 2022年06月15日 12:07/ 0 赞/ 159 阅读

相关编写 Spring MVC 的 14 个小技巧

![format_png][] 译者 | 失控的狗蛋 blog.csdn.net/Summer\_Lyf/article/details/102911215 通常，

逃离我推掉我的手/ 2021年08月26日 17:48/ 0 赞/ 313 阅读