整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
人人都是产品经理【起点学院】，BAT实战派产品总监手把手系统带你学产品、学运营。
产品设计时细节是产品经理最头疼的问题，一个button，一个链接都要考虑太多的细节问题。作者整理了常见的一些功能设计问题，一篇文章看懂这些功能设计。来学习吧。
链接也称为超链接，所谓的超链接是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序。而在一个网页中用来超链接的对象，可以是一段文本或者是一个图片。当浏览者单击已经链接的文字或图片后，链接目标将显示在浏览器上，并且根据目标的类型来打开或运行。
链接可以是一个字或是一段字这样的文本，也可以是一个按钮，一张图片，当你点击后跳转到另一个目标，当你把鼠标指针移到某个链接时会变成一个小手，当然在手机上没有这一特点。
文本样式的链接一般在搜索引擎的网站呈现蓝色字样，大多会在下面加上下划线以便识别，不过现如今考虑到不影响文本的可读性与用户体验，逐渐取消了下划线。而在一些别的网站考虑到界面设计风格各方面的因素而不用蓝色。
谷歌的文本链接是蓝色，没有下划线
百度的文本链接也是蓝色，关键词是红色，有下划线
而京东的文本链接有灰色，有白色，有黑色
按钮样式的链接比文本样式的更容易识别，每一个按钮都是一样链接。
按钮样式链接
图片样式的链接可以是单独的一张图片，也可以是文字与按钮一起组成一张图片，只是鼠标指针扫过图片的任何一个部位都会变成小手。
如桌面弹出这种游戏小窗口的图片式链接
由文字/图/按钮样式一起构成的一张图片式按钮，鼠标可以点击图中任何一部位
链接打开的方式有三种：第一种是在当前页面刷新跳转，国外的网站大多是这样的打开式；第二种是在新标签页面打开链接，国内大多采用这种；第三种是提示用APP打开。当然现在出现了一种新的打开方式，那就是二维码扫描。
提示用美拍APP打开
按照连接路径的不同，网页中超链接一般分为以下3种类型：内部链接，锚点链接和外部链接。
链接还可以分为动态链接和静态链接。动态超链接指的是可以通过改变HTML代码来实现动态变化的链接，例如我们可以实现将鼠标移动到某个文字链接上，文字就会象动画一样动起来或改变颜色的效果，也可以实现鼠标移到图片上图片就产生反色或朦胧等等的效果。而静态链接，顾名思义，就是没有动态效果的链接。
与外部链接（即反向链接）相反，内部链接是指同一网站域名下的内容页面之间互相链接。如频道、栏目、终极内容页之间的链接，乃至站内关键词之间的Tag链接都可以归类为内部链接，因此内部链接我们也可以称之为站内链接，对内部链接的优化其实就是对网站的站内链接的优化。
HTML中的链接，正确的说法应该称作"锚点"，它命名锚点链接（也叫书签链接）常常用于那些内容庞大繁琐的网页，通过点击命名锚点，不仅让我们能指向文档，还能指向页面里的特定段落，更能当作"精准链接"的便利工具，让链接对象接近焦点。便于浏览者查看网页内容。类似于我们阅读书籍时的目录页码或章回提示。在需要指定到页面的特定部分时，标记锚点是最佳的方法。
外部链接，又常被称为：“反向链接”或“导入链接”，是指通过其他网站链接到你的网站的链接。
外部链接指的是针对搜索引擎，与其它站点所做的友情链接。高质量的外部链接指：和你的网站建立链接的网站知名度高，访问量大，同时相对的外部链接较少，有助于快速提升你的网站知名度和排名的其他网站的友情链接。
如果按照使用对象的不同，网页中的链接又可以分为：文本超链接，图像超链接，E-mail链接，锚点链接，多媒体文件链接，空链接等。
链接是一种对象，它以特殊编码的文本或图形的形式来实现链接，如果单击该链接，则相当于指示浏览器移至同一网页内的某个位置，或打开一个新的网页，或打开某一个新的WWW网站中的网页。
链接在交互上一般会呈现4种状态，即默认状态/悬停时状态/点击时状态/点击后状态。比如谷哥网站的交互体验。如下图：
点击前
悬停时，下面浮现半透明线条
点击时，有波纹晕开的动态效果
点击后，下面线条粗
有时候是3种状态，比如百度网和知乎应用：
默认状态
点击时链接变红
点击后链接变成紫色
IOS系统知乎应用的3种状态，而在Android系统没有用力点击这一状态。
默认状态
点击状态
用力点击会弹出预览小窗口
有些时候只有2种状态，如下图谷歌网：
默认和点击后状态一样
鼠标悬停时出现下划线
默认状态
点击时
而有时候比如在APP里有时候就一直只有一种状态，也可以称静态链接，之前的可以称之为动态链接。在不同的使用场景会因为当时的情况选择最合适的交互体验设计。有的情况下还会加上点击的音效，使用户体验更畅快，这在移动端用的使用情况多一些。
总之链接是网页不可缺少的构成部分，每一个链接的呈现都是经过深思熟虑的。
作者：潘瑶琼（简书作者）
本文由 @潘瑶琼 授权发布于人人都是产品经理，未经作者许可，禁止转载。
NO.3:<!--注释-->
注释标签是为代码添加注释使用的，它的内容不会显示在页面中。几乎每种编程语言都有自己注释的写法。对于一些复杂代码标注注释对团队合作非常重要，即使自己若干年后打开以前写的代码，也能通过注释快速回忆起曾经的思路。当然，HTML很少用到注释，因为它太简单了。
<!--这里是注释-->代码示例：
<!DOCTYPE HTML>
<html>
<head>
<title>第一个网页</title>
</head>
<body>
<h1>第一个网页</h1><hr>
<p>千里之行始于足下<br>值得注意的是我们没有必要一一讲解HTML中的所有元素以及每个元素的各个属性，<br>
因为每个元素的使用都是大同小异，我们完全可以通过几个常用案例对HTML全部元<br>
素及属性的指定形成一个整体认识，以后可以根据需求通过查询手册来自己学习其他<br>
元素及其属性的用法。</p><hr><!--这里是注释-->
</body>
</html>因为页面中没有显示，就不给大家截图了。
NO.4:<img>
<img>可以用来显示图片元素，但是写法和之前的元素不太一样，这个元素没有结尾标签。它是通过改变标签的src属性向页面导入图片。
在做这个练习之前我们需要做一个准备工作，
step1：找一张图片，例如：下面这张美女
step2：右键-另存为
step3：选择路径，我们在之前的篇章中已经带领大家在自己的某个盘上建立了一个叫做"零基础自学网页制作"的文件夹，图片保存到这个文件夹中！
step4：图片命名为 image1.jpg
step5：确定你的"第一个页面.html"文件和"image1.jpg"在一个文件夹中。
<img src="image1.jpg"/> 示例代码如下：
<!DOCTYPE HTML>
<html>
<head>
<title>第一个网页</title>
</head>
<body><h1>第一个网页</h1><hr>
<img src="image1.jpg"/>
</body>
</html>页面效果如图所示：
HTML元素中除了有向首尾标签中间添加文字来显示内容的元素，也有通过src属性导入信息的元素。
NO.5:<a></a>
<a></a>标签是用来添加超链接的元素，这个元素的写法比较有趣。
<a href="https://www.toutiao.com/i6785149184245760516/?group_id=6785149184245760516?group_id=6785149184245760516?group_id=6785149184245760516">零基础自学网页制作——序章（学习目的、对象、基本概念）</a>代码示例：
<!DOCTYPE HTML>
<html>
<head>
<title>第一个网页</title>
</head>
<body>
<h1>第一个网页</h1>
<hr><a href="https://www.toutiao.com/i6785149184245760516/?group_id=6785149184245760516?group_id=6785149184245760516?group_id=6785149184245760516"> 零基础自学网页制作——序章（学习目的、对象、基本概念）</a></body> </html>页面效果如图：
通过点击"零基础自学网页制作——序章（学习目的、对象、基本概念）"可以跳转到相应页面。
通过观察发现，a标签是在首尾标签之间添加要显示的文字内容，通过为href属性添加网址完成超链接设置。
大家思考一下，如果把文字换成图片，超链接还会起作用吗？
示例代码如下：
<a href="https://www.toutiao.com/i6785149184245760516/?group_id=6785149184245760516?group_
id=6785149184245760516?group_id=6785149184245760516"><img src="image1.jpg"/></a>使用"<img src="image1.jpg"/>"代替"零基础自学网页制作——序章（学习目的、对象、基本概念）"。
<!DOCTYPE HTML>
<html>
<head>
<title>第一个网页</title>
</head>
<body>
<h1>第一个网页</h1><hr>
<a href="https://www.toutiao.com/i6785149184245760516/?group_id=6785149184245760516?group
_id=6785149184245760516?group_id=6785149184245760516"> <img src="image1.jpg"/></a>
</body>
</html>效果如下：
看起来似乎没有变化，但是鼠标移动到图片上时，箭头变成了小手的图标。
点击后打开目标链接。
今天的内容到这里就结束了，通过这几个元素的学习，大家对html元素的使用建立了基本概念。
下一期我们将详细讲解html元素中的属性，在练习中再次介绍几个常用元素，并为大家讲解"绝对路径"与"相对路径"的区别。
喜欢的小伙伴请关注我，阅读中遇到任何问题请给我留言，如有疏漏或错误欢迎大家斧正，不胜感激！
HTML序章（学习目的、对象、基本概念）——零基础自学网页制作
HTML是什么？——零基础自学网页制作
第一个HTML页面如何写？——零基础自学网页制作
HTML页面中head标签有啥用？——零基础自学网页制作
初识meta标签与SEO——零基础自学网页制作
HTML中的元素使用方法1——零基础自学网页制作
HTML中的元素使用方法2——零基础自学网页制作
HTML元素中的属性1——零基础自学网页制作
HTML元素中的属性2（路径详解）——零基础自学网页制作
使用HTML添加表格1（基本元素）——零基础自学网页制作
使用HTML添加表格2（表格头部与脚部）——零基础自学网页制作
使用HTML添加表格3（间距与颜色）——零基础自学网页制作
使用HTML添加表格4（行颜色与表格嵌套）——零基础自学网页制作
16进制颜色表示与RGB色彩模型——零基础自学网页制作
HTML中的块级元素与内联元素——零基础自学网页制作
在HTML页面中嵌入其他页面的方法——零基础自学网页制作
封闭在家学网页制作！为页面嵌入PDF文件——零基础自学网页制作
HTML表单元素初识1——零基础自学网页制作
HTML表单元素初识2——零基础自学网页制作
HTML表单3（下拉列表、多行文字输入）——零基础自学网页制作
HTML表单4（form的action、method属性）——零基础自学网页制作
HTML列表制作讲解——零基础自学网页制作
为HTML页面添加视频、音频的方法——零基础自学网页制作
音视频格式转换神器与html视频元素加字幕——零基础自学网页制作
HTML中使用<a>标签实现文本内链接——零基础自学网页制作
TML全局属性是所有HTML元素共有的属性。它们可以应用于所有元素，尽管它们可能对某些元素没有影响。
HTML元素可以设置属性
属性可以在元素中添加附加信息
属性一般描述于开始标签
属性总是以名称/值对的形式出现，比如：name="value"。
属性和属性值对大小写不敏感。不过，万维网联盟在其HTML4推荐标准中推荐小写的属性/属性值。而新版本的(X)HTML要求使用小写属性。
class：为html元素定义一个或多个类名（classname）(类名从样式文件引入)
id：定义元素的唯一id
style：规定元素的行内样式（inlinestyle）
title：描述了元素的额外信息(作为工具条使用)
HTML使用标签<a>来设置超文本链接。超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。默认情况下，链接将以以下形式出现在浏览器中：
一个未访问过的链接显示为蓝色字体并带有下划线。
访问过的链接显示为紫色并带有下划线。
点击链接时，链接显示为红色并带有下划线。
如果为这些超链接设置了CSS样式，展示样式会根据CSS的设定而显示。
在标签<a>中使用了href属性来描述链接的地址。
实例
<a href="https://www.kaikeba.com/">访问开课吧</a>1复制代码类型：[html]上面这行代码显示为：访问开课吧
点击这个超链接会把用户带到开课吧的首页。
使用target属性，你可以定义被链接的文档在何处显示。
实例
<ahref="https://www.kaikeba.com/"target="_blank">访问开课吧</a>
target="_blank":在新窗口中打开被链接文档。
target="_self": 默认，在相同的框架中打开被链接文档。
target="_parent":在父框架集中打开被链接文档。
target="_top": 在整个窗口中打开被链接文档。
target=framename:在指定的框架中打开被链接文档。 1234567891011复制代码类型：[html]HTML图像标签及其属性
在HTML中，图像由<img>标签定义。<img>是空标签，意思是说，它只包含属性，并且没有闭合标签。
要在页面上显示图像，你需要使用源属性（src）。src指"source"。源属性的值是图像的URL地址。
定义图像的语法是：
<imgsrc="url"alt="some_text"> 1复制代码类型：[html]URL指存储图像的位置。
alt属性用来为图像定义一串预备的可替换的文本。在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯，这样有助于更好的显示信息，并且对于那些使用纯文本浏览器的人来说是非常有用的。
height（高度）与width（宽度）属性用于设置图像的高度与宽度。属性值默认单位为像素。
<imgsrc="logo.jpg"alt="kaikeba"width="300"height="120"> 1复制代码类型：[html]提示:指定图像的高度和宽度是一个很好的习惯。如果图像指定了高度宽度，页面加载时就会保留指定的尺寸。如果没有指定图片的大小，加载页面时有可能会破坏HTML页面的整体布局。
开课吧广场-人才学习交流平台
*请认真填写需求信息，我们会在24小时内与您取得联系。
