整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
人人都是产品经理【起点学院】，BAT实战派产品总监手把手系统带你学产品、学运营。
产品设计时细节是产品经理最头疼的问题，一个button，一个链接都要考虑太多的细节问题。作者整理了常见的一些功能设计问题，一篇文章看懂这些功能设计。来学习吧。
链接也称为超链接，所谓的超链接是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序。而在一个网页中用来超链接的对象，可以是一段文本或者是一个图片。当浏览者单击已经链接的文字或图片后，链接目标将显示在浏览器上，并且根据目标的类型来打开或运行。
链接可以是一个字或是一段字这样的文本，也可以是一个按钮，一张图片，当你点击后跳转到另一个目标，当你把鼠标指针移到某个链接时会变成一个小手，当然在手机上没有这一特点。
文本样式的链接一般在搜索引擎的网站呈现蓝色字样，大多会在下面加上下划线以便识别，不过现如今考虑到不影响文本的可读性与用户体验，逐渐取消了下划线。而在一些别的网站考虑到界面设计风格各方面的因素而不用蓝色。
谷歌的文本链接是蓝色，没有下划线
百度的文本链接也是蓝色，关键词是红色，有下划线
而京东的文本链接有灰色，有白色，有黑色
按钮样式的链接比文本样式的更容易识别，每一个按钮都是一样链接。
按钮样式链接
图片样式的链接可以是单独的一张图片，也可以是文字与按钮一起组成一张图片，只是鼠标指针扫过图片的任何一个部位都会变成小手。
如桌面弹出这种游戏小窗口的图片式链接
由文字/图/按钮样式一起构成的一张图片式按钮，鼠标可以点击图中任何一部位
链接打开的方式有三种：第一种是在当前页面刷新跳转，国外的网站大多是这样的打开式；第二种是在新标签页面打开链接，国内大多采用这种；第三种是提示用APP打开。当然现在出现了一种新的打开方式，那就是二维码扫描。
提示用美拍APP打开
按照连接路径的不同，网页中超链接一般分为以下3种类型：内部链接，锚点链接和外部链接。
链接还可以分为动态链接和静态链接。动态超链接指的是可以通过改变HTML代码来实现动态变化的链接，例如我们可以实现将鼠标移动到某个文字链接上，文字就会象动画一样动起来或改变颜色的效果，也可以实现鼠标移到图片上图片就产生反色或朦胧等等的效果。而静态链接，顾名思义，就是没有动态效果的链接。
与外部链接（即反向链接）相反，内部链接是指同一网站域名下的内容页面之间互相链接。如频道、栏目、终极内容页之间的链接，乃至站内关键词之间的Tag链接都可以归类为内部链接，因此内部链接我们也可以称之为站内链接，对内部链接的优化其实就是对网站的站内链接的优化。
HTML中的链接，正确的说法应该称作"锚点"，它命名锚点链接（也叫书签链接）常常用于那些内容庞大繁琐的网页，通过点击命名锚点，不仅让我们能指向文档，还能指向页面里的特定段落，更能当作"精准链接"的便利工具，让链接对象接近焦点。便于浏览者查看网页内容。类似于我们阅读书籍时的目录页码或章回提示。在需要指定到页面的特定部分时，标记锚点是最佳的方法。
外部链接，又常被称为：“反向链接”或“导入链接”，是指通过其他网站链接到你的网站的链接。
外部链接指的是针对搜索引擎，与其它站点所做的友情链接。高质量的外部链接指：和你的网站建立链接的网站知名度高，访问量大，同时相对的外部链接较少，有助于快速提升你的网站知名度和排名的其他网站的友情链接。
如果按照使用对象的不同，网页中的链接又可以分为：文本超链接，图像超链接，E-mail链接，锚点链接，多媒体文件链接，空链接等。
链接是一种对象，它以特殊编码的文本或图形的形式来实现链接，如果单击该链接，则相当于指示浏览器移至同一网页内的某个位置，或打开一个新的网页，或打开某一个新的WWW网站中的网页。
链接在交互上一般会呈现4种状态，即默认状态/悬停时状态/点击时状态/点击后状态。比如谷哥网站的交互体验。如下图：
点击前
悬停时，下面浮现半透明线条
点击时，有波纹晕开的动态效果
点击后，下面线条粗
有时候是3种状态，比如百度网和知乎应用：
默认状态
点击时链接变红
点击后链接变成紫色
IOS系统知乎应用的3种状态，而在Android系统没有用力点击这一状态。
默认状态
点击状态
用力点击会弹出预览小窗口
有些时候只有2种状态，如下图谷歌网：
默认和点击后状态一样
鼠标悬停时出现下划线
默认状态
点击时
而有时候比如在APP里有时候就一直只有一种状态，也可以称静态链接，之前的可以称之为动态链接。在不同的使用场景会因为当时的情况选择最合适的交互体验设计。有的情况下还会加上点击的音效，使用户体验更畅快，这在移动端用的使用情况多一些。
总之链接是网页不可缺少的构成部分，每一个链接的呈现都是经过深思熟虑的。
作者：潘瑶琼（简书作者）
本文由 @潘瑶琼 授权发布于人人都是产品经理，未经作者许可，禁止转载。
昨天我们在《使用HTML添加表格3（间距与颜色）——零基础自学网页制作》（目录在结尾）中学习了设置单元格以及其中内容的空间间距和背景颜色。
其中添加列向单元格背景颜色只需要修改对应的<tr>标签中的style属性，而修改行向标签需要修改不同<tr></tr>标签中的<td>标签的style属性，这样操作起来就非常的麻烦，那有没有简便的修改行向单元格背景颜色的方法呢？
当然有！
开发团队给出了<colgroup><col></col></colgroup>这样的组合来解决这个问题，下面让我们详细学习。
<colgroup></colgroup>标签是一个给行向单元格打组的标签，在页面中不会显示。
<col></col>标签是来具体设置行向单元格数量和颜色的标签。
示例代码如下：
<colgroup><col span = "1" style="background-color:#ff0000;"></col></colgroup>这段代码添加到"第一个页面.html"当中就可以，具体代码如下：
<!DOCTYPE HTML>
<html>
<head>
<title>第一个网页</title>
</head>
<body>
<h1>第一个网页</h1><hr>
<h2>表格元素</h2><hr>
<table border="1" width="100%">
<thead>
<tr>
<td colspan="2">表格的头部信息</td>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="2">表格的脚部信息</td>
<tr>
</tfoot>
<tbody>
<caption>表格标题</caption>
<colgroup>
<col span = "1" style="background-color:#ff0000;"></col>
</colgroup>
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td>一列一行</td>
<td>一列二行</td>
</tr>
<tr>
<td>二列一行</td>
<td>二列二行</td>
</tr>
</tbody>
</table>
</body>
</html>页面效果如图：
因为第一列和最后一列只有一行所以，也都变红了。
其中span的数量代表行数。
如果把span等号后面的数改成2，因为表格只有两行，所以整个表格都红了。
表格嵌套
我们可以通过向表格中添加表格实现表格嵌套。表格嵌套可以把一个单元格分成行向或列向分割单元格。
代码示例如下：我们把"一列一行"分割成列向两个单元格。
<tr><td><table border = "1" width="100%"><tr><td>1</td><td>2</td></tr></table></td>使用
<table border = "1" width="100%">
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>这段代码替换文字"一列一行"即可。
页面效果如图所示：
留个思考题，大家可以思考一下行向分割单元格怎么写。
今天的内容结束了。
全部示例代码如下：
<!DOCTYPE HTML>
<html>
<head>
<title>第一个网页</title>
</head>
<body>
<h1>第一个网页</h1><hr>
<h2>表格元素</h2><hr>
<table border="1" width="100%">
<thead>
<tr>
<td colspan="2">表格的头部信息</td>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="2">表格的脚部信息</td>
<tr>
</tfoot>
<tbody>
<caption>表格标题</caption>
<colgroup>
<col span = "1" style="background-color:#ff0000;"></col>
</colgroup>
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td>
<table border = "1" width="100%">
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>
</td>
<td>一列二行</td>
</tr>
<tr>
<td>二列一行</td>
<td>二列二行</td>
</tr>
</tbody>
</table>
</body>
</html>喜欢的小伙伴请关注我，阅读中遇到任何问题请给我留言，如有疏漏或错误欢迎大家斧正，不胜感激！
学到这里，相信大家已经有独立读懂HTML代码说明的能力了，明天我会为大家讲解16进制颜色表示方法。之后会给大家推荐html代码参考手册的链接。如果您是零基础的话，学完16进制颜色表示方法后，基本上就可以无障碍的阅读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中的<div>块元素——零基础自学网页制作
在HTML页面中嵌入其他页面的方法——零基础自学网页制作
封闭在家学网页制作！为页面嵌入PDF文件——零基础自学网页制作
HTML表单元素初识1——零基础自学网页制作
HTML表单元素初识2——零基础自学网页制作
HTML表单3（下拉列表、多行文字输入）——零基础自学网页制作
HTML表单4（form的action、method属性）——零基础自学网页制作
HTML列表制作讲解——零基础自学网页制作
为HTML页面添加视频、音频的方法——零基础自学网页制作
音视频格式转换神器与html视频元素加字幕——零基础自学网页制作
HTML中使用<a>标签实现文本内链接——零基础自学网页制作
先要安装css的loader
npm install css-loader style-loader --save-dev
然后在webpack.config.js中配置如下代码
意思是先用css-loader加载css文件，再用style-loader添加在页面中
在app目录下创建component.css文件
body{
background-color: red;
}在app/index.js中引入css文件
运行npm run start命令。
可以看到我们浏览器整个背景都变成了红色。
webpack做了什么呢？
看到build/app.js中有如下代码。
再看下我们生产的index.html文件
奇怪了，并没有内敛样式也没有引入的css文件，那浏览器是为什么变红的呢？
我们在浏览器中打开调试工具。
原来样式在这！
webpack动态的添加了内敛样式在代码中。
如果多人协作开发的情况下，会有很大可能出现代码命名重复的情况，如果出现这种情况怎么办呢？
来让我们试验一下。
在app目录下添加两个css文件，style1.css
body{
background-color: red;
}.class1{
color: green;
}和style2.css
body{
background-color: black;
}.class1{
color: blue;
}在index.js中引入这两个文件
修改component.js文件，使其给元素添加传入的类名
在webpack.config.js中添加如下配置
我们执行npm run start 命令若看到
即为打包成功。
打开浏览器http://localhost:8080/
可以看到同样的类名都正常显示出来了，看下右边的文档结构，发现我们的类名不是class1了。
原来CSS Modules对我们的类名做了哈希处理，我们再也不用担心同事跟我们有相同的命名了。
是不是很方便呢？
让我们再来面对另一个问题，现在这种情况下css是js动态添加上去的，如果当js文件有一个长时间的阻塞事件，页面将会处于长时间的无样式的状态。
这是我们不希望看到的，怎么把css文件和js文件分离呢？
首先我们需要安装一个插件
npm install extract-text-webpack-plugin --save-dev
安装成功之后在webpack.config.js中添加如下配置
完成之后运行一下npm run start
打开浏览器http://localhost:8080/
可以看到我们两个css文件合并为一个app.css文件并以外部样式表的形式加载。
而且css文件比js文件要先请求，这样就避免页面会出现FOUC-Flas Of Unstyle Content无样式内容闪烁。
webpack关于css的加载就讲到这里。
*请认真填写需求信息，我们会在24小时内与您取得联系。
