第四章 认识标签(第三部分)

4.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}),后面会详细讲解。

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

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

如下代码:

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

4.3 使用mailto在网页中链接Email地址

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

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

下面是一个完整的实例:

在浏览器中显示的结果:

发送

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

4.4 认识<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格式的图像文件。

时间: 2024-10-28 20:17:50

第四章 认识标签(第三部分)的相关文章

从零开始学习html(四)认识标签(第三部分)

一.使用<a>标签,链接到另一个页面 1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>了不起的盖茨比</title> 6 </head> 7 <body> 8 <ul>

【设计模式+原型理解】第四章:函数的三种角色+原型链终结版

一.函数的三种角色 1)作为普通函数 2)作为对象 3)作为类 ps:可以同时存在,之间没有任何冲突 二.怎么理解函数的三种角色 这三种角色可以同时存在,没有任何冲突,举个例子 // 这三种角色是没有冲突的,看下面的例子 function Fn1() { // 这时候,Fn就是一个普通函数,形参赋值,预解释,代码执行 var num = 500 this.x = 100; } Fn.prototype.getX = function () { console.log(this.x); }; Fn

android驱动开发第三、四章读书笔记

第三章讲解了git及git操作的基本命令 1.git是一款免费.开源的分布式版本控制系统,符合linux的开源思想,且相对于svn cvs等,git有自己的优势,且广受开发者欢迎 2.git的安装: apt-get install git apt-get install git-doc git-svn apt-get install git-email git-gui gitk 3.常见命令: man git—checkout   /  git help git-checkout    查看gi

APUE读书笔记-第四章 文件和目录

到第四章了,不知什么时候才能把这本书看完,耽误的时间太多了. 第四章是在第三章的基础上,主要描述文件系统的其他性质和文件的性质. 4.2 stat.fstat.fstatat.lstat函数 首先来看看这四个函数的原型: #include <sys/stat.h> ///usr/include/x86_64-linux-gnu/sys/ int stat (const char *__restrict __file, struct stat *__restrict __buf) int fst

JavaScript DOM编程艺术-学习笔记(第三章、第四章)

第三章: 1.js的对象分为三种:①用户自定义对象 ② 内建对象(js提供的对象) ③宿主对象(js寄宿的环境-浏览器,提供的对象) 2.文档是由节点组成的集合,即dom树,html元素是根元素,是唯一一个没有被其它元素包含的元素. 3.元素节点并非直接包含文本节点,例如:<ul><li>你好</li><ul>    ul元素并没有直接包含文本元素 4.获取元素的方法: ①getElementById() ②getElementsByTagName ()  

Welcome to Swift (苹果官方Swift文档初译与注解三十)---219~224页(第四章-- 流程控制 完)

Labeled Statements  (标签语句) 循环或者switch语句可以嵌套其他的循环或者switch,这样在Swift中可以创建复杂的流程控制结构.循环或者switch语句都可以通过break语句来永久的结束,因此,有时候需要显式的 表明在循环或者switch中你需要break的语句.同样的,如果你嵌套多个循环,显式的表明里面的continue语句也是类似的. 为了达成这个目标,可以在循环语句或者switch语句中使用一个语句标签(statement label),利用这个标签和br

Java 线程第三版 第四章 Thread Notification 读书笔记

一.等待与通知 public final void wait() throws InterruptedException 等待条件的发生. public final void wait(long timeout) throws InterruptedException 等待条件的发生.如果通知没有在timeout指定的时间内发生,它还是会返回. public final void wait(long timeout, int nanos) throws InterruptedException

Shell脚本学习指南 [ 第三、四章 ] 查找与替换、文本处理工具

摘要:第三章讨论的是编写Shell脚本时经常用到的两个基本操作.第四章总共介绍了约30种处理文本文件的好用工具. 第三章 查找与替换 概括:本章讨论的是编写Shell脚本时经常用到的两个基本操作:文本查找.文本替换. 3.1  查找文本 如需从输入的数据文件中取出特定的文本行,主要的工具为grep程序.POSIX采用三种不同grep变体:grep.egrep.fgrep整合为单个版本,通过不同的选项,分别提供这三种行为模式.who | grep -F root上面使用-F选项,以查找固定字符串r

Python读书笔记-第三章,四章

第三章 1. 字符串格式化 >>>format="hello %s  %s world" >>>values=('world','hot') >>>print format % values  #也可以接收单个字符串也 也可以用%f %d这类的类似与c的printf 匹配多个参数的时候应该用圆括号 >>>'%s plus %s equals %s'  %(1,1,2) >>>'%010.2f' %