整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
天对html做了一下总结，半个月以后要开发一个全栈项目，疯狂学习中。
如有任何疑问，可以随时讨论。
人人都是产品经理【起点学院】，BAT实战派产品总监手把手系统带你学产品、学运营。
产品设计时细节是产品经理最头疼的问题，一个button，一个链接都要考虑太多的细节问题。作者整理了常见的一些功能设计问题，一篇文章看懂这些功能设计。来学习吧。
链接也称为超链接，所谓的超链接是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序。而在一个网页中用来超链接的对象，可以是一段文本或者是一个图片。当浏览者单击已经链接的文字或图片后，链接目标将显示在浏览器上，并且根据目标的类型来打开或运行。
链接可以是一个字或是一段字这样的文本，也可以是一个按钮，一张图片，当你点击后跳转到另一个目标，当你把鼠标指针移到某个链接时会变成一个小手，当然在手机上没有这一特点。
文本样式的链接一般在搜索引擎的网站呈现蓝色字样，大多会在下面加上下划线以便识别，不过现如今考虑到不影响文本的可读性与用户体验，逐渐取消了下划线。而在一些别的网站考虑到界面设计风格各方面的因素而不用蓝色。
谷歌的文本链接是蓝色，没有下划线
百度的文本链接也是蓝色，关键词是红色，有下划线
而京东的文本链接有灰色，有白色，有黑色
按钮样式的链接比文本样式的更容易识别，每一个按钮都是一样链接。
按钮样式链接
图片样式的链接可以是单独的一张图片，也可以是文字与按钮一起组成一张图片，只是鼠标指针扫过图片的任何一个部位都会变成小手。
如桌面弹出这种游戏小窗口的图片式链接
由文字/图/按钮样式一起构成的一张图片式按钮，鼠标可以点击图中任何一部位
链接打开的方式有三种：第一种是在当前页面刷新跳转，国外的网站大多是这样的打开式；第二种是在新标签页面打开链接，国内大多采用这种；第三种是提示用APP打开。当然现在出现了一种新的打开方式，那就是二维码扫描。
提示用美拍APP打开
按照连接路径的不同，网页中超链接一般分为以下3种类型：内部链接，锚点链接和外部链接。
链接还可以分为动态链接和静态链接。动态超链接指的是可以通过改变HTML代码来实现动态变化的链接，例如我们可以实现将鼠标移动到某个文字链接上，文字就会象动画一样动起来或改变颜色的效果，也可以实现鼠标移到图片上图片就产生反色或朦胧等等的效果。而静态链接，顾名思义，就是没有动态效果的链接。
与外部链接（即反向链接）相反，内部链接是指同一网站域名下的内容页面之间互相链接。如频道、栏目、终极内容页之间的链接，乃至站内关键词之间的Tag链接都可以归类为内部链接，因此内部链接我们也可以称之为站内链接，对内部链接的优化其实就是对网站的站内链接的优化。
HTML中的链接，正确的说法应该称作"锚点"，它命名锚点链接（也叫书签链接）常常用于那些内容庞大繁琐的网页，通过点击命名锚点，不仅让我们能指向文档，还能指向页面里的特定段落，更能当作"精准链接"的便利工具，让链接对象接近焦点。便于浏览者查看网页内容。类似于我们阅读书籍时的目录页码或章回提示。在需要指定到页面的特定部分时，标记锚点是最佳的方法。
外部链接，又常被称为：“反向链接”或“导入链接”，是指通过其他网站链接到你的网站的链接。
外部链接指的是针对搜索引擎，与其它站点所做的友情链接。高质量的外部链接指：和你的网站建立链接的网站知名度高，访问量大，同时相对的外部链接较少，有助于快速提升你的网站知名度和排名的其他网站的友情链接。
如果按照使用对象的不同，网页中的链接又可以分为：文本超链接，图像超链接，E-mail链接，锚点链接，多媒体文件链接，空链接等。
链接是一种对象，它以特殊编码的文本或图形的形式来实现链接，如果单击该链接，则相当于指示浏览器移至同一网页内的某个位置，或打开一个新的网页，或打开某一个新的WWW网站中的网页。
链接在交互上一般会呈现4种状态，即默认状态/悬停时状态/点击时状态/点击后状态。比如谷哥网站的交互体验。如下图：
点击前
悬停时，下面浮现半透明线条
点击时，有波纹晕开的动态效果
点击后，下面线条粗
有时候是3种状态，比如百度网和知乎应用：
默认状态
点击时链接变红
点击后链接变成紫色
IOS系统知乎应用的3种状态，而在Android系统没有用力点击这一状态。
默认状态
点击状态
用力点击会弹出预览小窗口
有些时候只有2种状态，如下图谷歌网：
默认和点击后状态一样
鼠标悬停时出现下划线
默认状态
点击时
而有时候比如在APP里有时候就一直只有一种状态，也可以称静态链接，之前的可以称之为动态链接。在不同的使用场景会因为当时的情况选择最合适的交互体验设计。有的情况下还会加上点击的音效，使用户体验更畅快，这在移动端用的使用情况多一些。
总之链接是网页不可缺少的构成部分，每一个链接的呈现都是经过深思熟虑的。
作者：潘瑶琼（简书作者）
本文由 @潘瑶琼 授权发布于人人都是产品经理，未经作者许可，禁止转载。
前网虫发过一篇关于HTML的文章，也给大家推荐去看W3C的课程。如今两个星期过去啦，不知道还有几个同学坚持看完的？
在网虫发那篇文章的同时，网虫身边也有一个朋友开始学HTML，昨天他跟网虫说，看了两遍教程，大体上有点概念，但还是不理解，所以网虫今天就写一篇关于HTML的一些重点标签，希望可以帮到还在坚持的朋友们！
学习HTML前大家要先对HTML有个概念，什么是HTML？网虫个人的理解是：HTML就是网页内容的载体。比如我们打开一个网页，网页上所有的文字、图片、视频等等可视化的内容都是用HTML来实现的（这里咱们先省略掉CSS跟JS)。
很多朋友对HTML已经有了概念，但是对HTML所包含的标签却很头疼。每次看到那些密密麻麻的标签，都有种想暴走的冲动。其实，W3C教程里给我们讲解所有的HTML标签，但是在日常中，我们常用的标签并没有那么多，现在网虫就给大家讲解一下一些常用的标签，以及使用方法！
首先，我们要先明白，一个HTML文件是有自己固定的结构的！
<html>
<head>...</head>
<body>...</body>
</html>
我们来仔细讲解一下HTML的结构：
1. <html></html>称为根标签，所有的网页标签都在<html></html>中。也就是说一个完整的HTML文件，一定是以<html>标签开头，以</html>标签结束。
2. <head> 标签用于定义文档的头部，它是所有头部元素的容器。头部元素有<title>、<script>、 <style>、<link>、 <meta>等标签，头部标签在下一小节中会有详细介绍。
3. 在<body>和</body>标签之间的内容是网页的主要内容，如<h1>、<p>、<a>、<img>等网页内容标签，在这里的标签中的内容会在浏览器中显示出来。
很多朋友看到这里就表示懵圈了，大家不要萌，这些代码不要去死记硬背，只要明白了HTML文件的结构就行。
现在我们讲下<body>和</body>标签间常用的内容标签。网虫以一篇文章为例，给大家讲解：
首先我们大概描述一下这篇文章的内容：
标题：小明跟小红一起出去散步
内容：今天天气很好，小明跟小红一起出去散步
图片：两个人一起出去散步的图片（这里是一张图，为了大家理解，所以我把配图用文字写出来）
这篇文章的内容在文档里写出来很简单，那怎么把文章内容展示在网页上呢？
我们看到，文章是由三部分组成的，分别是标题、内容、跟图片。这三部分的HTML代码都是写在<body>和</body>里的。我们看下标题用HTML怎么写
标题标签一共有6个，h1、h2、h3、h4、h5、h6分别为一级标题、二级标题、三级标题、四级标题、五级标题、六级标题。并且依据重要性递减。<h1>是最高的等级。
那么以刚才我们描述的文章为例，标题的HTML代码就可以这样写：
<h1>小明跟小红一起出去散步</h1>
这里大家要注意，<h1>和</h1>是HTML的标签，是告诉浏览器，这是个标题，而标题的内容，是写在<h1>和</h1>之间的。
写好了标题，接下来我们要展示的是文章的内容。在HTML中，显示正文内容的标签为<p>和</p>，用HTML代码表示就是：
<p>今天天气很好，小明跟小红一起出去散步</p>
这里跟刚才的<h1>标签是一样的，<p>和</p>是是告诉浏览器，这里是文字段落，而文字的内容，是写在<p>和</p>之间的。
到了这里，我们就解决了一篇文章的标题跟内容，但我们刚才列举的那篇文章中，还有穿插一张图片，那在HTML中图片又是怎么表示的呢？
这里就要说到<img>标签了。在HTML中，<img>是用来表示图片的，一般来说，一个完整的<img>标签里包含三个部分，分别是：图片的路径（scr），下载失败时的替换文本（alt）、和 提示文本（title）。
以刚才我们描述的文章图片为例，那篇文章的图片我们就可以写成：
<img src = "/i/eg_cute.gif" alt = "My Image" title = "My Image" />
注意：
这里的scr后面的双引号内是图片的路径，也就是说，你这张图片是保存在哪里的，就填保存的路径跟保存的名字以及保存的格式，本文中的图片是保存在i文件夹下，图片名称为：eg_cute，文件格式是：gif。
至于<img>标签中的alt跟title，大家只要明白意思就行了，后期大家大量练习的时候，自然就会明白。
到这里，咱们刚才写的那篇文章就用HTML代码写出来了，我们看下在浏览器里的整体效果
当然，网虫举得案例是最简单最简答的案例，为的是让很多看了一两遍还是没看懂的朋友了解HTML中最常用的三个标签的意思。
接下来，网虫再给大家解释另外几个常用的标签
1，无序列表
ul-li是没有前后顺序的信息列表。
语法：
<ul>
<li>信息</li>
<li>信息</li>
......
</ul>
举例：
<ul>
<li>精彩少年</li>
<li>美丽突然出现</li>
<li>触动心灵的旋律</li>
</ul>
ul-li在网页中显示的默认样式一般为：每项li前都自带一个圆点
2，使用<a>标签，链接到别一个页面
使用<a>标签可实现超链接，它在网页制作中可以说是无处不在，只要有链接的地方，就会有这个标签。
语法：
<a href=”目标网址”>链接显示的文本</a>
例如：
<a href = "http://www.baidu.com">click here!</a>
上面例子作用是单击click here!文字，网页链接到http://www.baidu.com这个网页。
3，<div>容器标签
在网页制作过程过中，可以把一些独立的逻辑部分划分出来，放在一个<div>标签中，这个<div>标签的作用就相当于一个容器。
语法：
<div>…</div>
确定逻辑部分：
什么是逻辑部分？它是页面上相互关联的一组元素。如网页中的独立的栏目版块，就是一个典型的逻辑部分。如下图所示：图中用红色边框标出的部分就是一个逻辑部分，就可以使用<div>标签作为容器
注释：<div> 是一个块级元素，也就是说，浏览器通常会在 div 元素前后放置一个换行符。
以上这几个标签是网虫个人觉得在任何HTML中都出现最频繁的几个标签，当然除了这几个标签还有其他几个标签都是常用的，这里网虫就不一一举例了。
网虫有一份之前网虫分享给网虫的快速学习HTML的方法文档，大家如果有需要，可以联系网虫，网虫把这份文档发给大家。
今天的分享说完了，网虫叨叨两句：
网虫之前做了个公众号，本意是方便大家下载一些软件，因为很多人不知道怎么跟网虫联系，想下载软件也下载不了。公众号上线两天，很多朋友都加入了进来，但是跟大家讲一个不好的消息，今天网虫准备登陆公众号的时候发现公众号被举报而被短期封号了。
其实网虫看到这个消息心里还是有点不舒服的，网虫的所有软件都是自己找的，免费分享给大家，从来没有受收过任何一个朋友钱，很多朋友给我发红包，我也从来没收过。虽然当初做公众号是无心之举，但是现在很多人加了网虫后，网虫也很开心能帮到大家。
至于说有些朋友加了网虫的公众号，下载了软件，然后又举报了公众号，网虫内心也很无奈。目前公众号已经无法访问，网虫接下来分享的软件大家也无法从公众号下载。如果大家有想要分享的软件，可以添加我的微信号：BZD111400。我会把软件列表发给大家。
不管怎么样，既然已经写了，那就要坚持下去，还是那句话，网虫也是从小白走过来的，希望我会的能够帮到大家！
我是网虫，一个在互联网里挣扎努力不让自己依然是小白的人。在互联网里被嘲笑过，被骗过，也无助过。现在懂一点技术，会一点推广，希望可以把自己会的教给大家，也希望跟大家一起努力，一起共勉！
*请认真填写需求信息，我们会在24小时内与您取得联系。
