整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
正常，轮播这种东西纯用css都能实现，随手就能写，从新建记事本开始计时，写完超过5分钟你砍我，扯什么js当借口。。。
为啥会有这么多人不信啊。。。我贴gif看得清代码么？你们看这点代码有难度么。。。从新建记事本开始计时，编辑器editplus，有代码染色，无自动补全，换系统自带记事本写也可以。html部分纯手打，用了大概1分30秒，这部分你把我屏幕关了就给个键盘让我写10遍我都能写10份分毫不差的出来，一个制表符和换行符都不带多的。。。剩下三分钟在浏览器上按F12写css样式，浏览器有补全，最后复制粘贴整理到代码里，刷新页面确认效果收工。。。。一共4分31秒，animation的参数顺序忘记了，稍微试了几次，不然还能快一点。其实比我想象中慢，我本来想说3分钟来着，还好稳了一手。。。
好的，我发现PC知乎可以贴代码，那我贴出来吧。。。真是纯基本功，面试考这个没毛病
<html>
<head>
</head>
<body>
<style>
body{background: #ddd;}
.aaa{width: 300px;height: 100px;margin: 0 auto;overflow: hidden;}
.bbb{width: 300px;height: 100px;position: relative;left: 0;white-space: nowrap;animation: ddd 3s cubic-bezier(0.5,1,0.5,1) infinite normal;}
.bbb:hover{animation-play-state:paused;}
.bbb a{width: 100px;height: 100px;display: inline-block;line-height: 100px;text-align: center;color: #fff;font-size: 40px;}
@keyframes ddd{0%{left:0;}33%{left:-100px;}66%{left:-200px;}100%{left:-300px;}}
.bbb a:nth-child(1){background: #f00;}
.bbb a:nth-child(2){background: #0f0;}
.bbb a:nth-child(3){background: #00f;}
.bbb a:nth-child(4){background: #f00;}
.bbb a:nth-child(5){background: #0f0;}
.bbb a:nth-child(6){background: #00f;}
</style>
<div class="aaa">
<div class="bbb">
<a>1</a><a>2</a><a>3</a><a>1</a><a>2</a><a>3</a>
</div>
</div>
</body>
</html>手写 JS 轮播效果算个啥，我见过要求 纯 CSS 实现轮播效果的
初级前端定义应该是熟练使用某种框架，了解基本的 JS 基础的相关知识，浏览器提供的各种 API。就一个 JS 实现的轮播效果来看，这里面涉及到的 JS 基础并不会太难，所以我认为这样面试是完全合理的
在写轮播组件的时候，如果能注意类的抽象，方法的封装。能够可复用，可扩展，就可以更好的展示自己的能力，offer 也分分钟拿下
正常 我工作3年半，你让我没准备直接写也写不出来
事实上是大部分面试官都是在面试你之前在网上搜两道题，自己看懂了，再来面试你
甚至有的面试官只看到网上的一种解法，就默认你应该用他看到的那种解法，你要方法和他不一样，一样挂你
我有碰到过和我视频share screen让我debug css的面试官。。那个视频软件还可以给鼠标权限，但搞笑的是我的鼠标进不去他的developer tool...所以只能我口述，她debug。。最后按我的口述给她debug出来了，但是方法和她的不一样 我也是醉了。。
接着让我share一个我觉得好的css solution, 我说我们用纯css实现了responsive font size
大概就是 calc(38px +(60 - 38) * (100vw - 768px) / (1440 - 768)); 这样做一般最多只用打三个断点就可以覆盖手机到桌面的所有情况下的responsive font size，并且使得字体自适应屏幕大小。
比起直接用vw，这样做可以自己设定自己的比例尺，任意调节大小；比起em, rem这种残疾方法，这样不需要打无数个断点。
那边hmm, interesting... 也不知道她听懂没。。
注释：<!-- -->
DOCTYPE：就是告诉浏览器，我们要使用什么规范
head：网页头部标签
body：代表网页主题
标题标签
段落标签
换行标签
水平线标签
字体样式标签
注释
特殊字符
特殊符号就是 & xxx ;
<img src="path" alt="文字" title="text" width="x" heigth="y" />
注意：../ 代表上一级目录
文本链接
<a href="path" target="目标窗口位置">链接文本或图像</a>
图像链接：就是嵌套图片标签
页面间链接
锚链接
功能性链接
块元素
行内元素
什么是列表：就是一种展示方式
有序列表
无序列表
自定义列表
<dl>
<dt></dt> 标题
<dd></dd> 选项
<dd></dd>
<dd></dd>
</dl>为什么使用表格
基本结构
<table border="1px" 边框>表格标签
<tr>
<td></td>列标签
<td></td>
<td></td>
</tr>行标签 这代表一行
</table>跨列：使用colspan="夸的列数" <td colspan="4">
跨行：使用rowspan="夸的行数" <td rowspan="4">
视频元素
音频元素
元素名 | 描述 |
header | 标题头部区域的内容(用于页面或页面中的一块区域) |
footer | 标记脚部区域的内容（用于整个页面或页面的一块区域） |
section | web页面中的一块独立区域 |
atricle | 独立的文章内容 |
aside | 相关内容或应用(常用于侧边栏) |
nav | 导航类辅助内容 |
<iframe src="path" name="mainFrame"></iframe>
表单：form
<form method="post|get" action="result.hetml">
<input />
</form>get方式提交：我们可以在url中看到我们提交的信息，不安全，但高效
post方式提交：比较安全，可以传输大文件
表单元素格式
属性 | 说明 |
type | 指定元素的类型。text、password、checkbox、radio、submit、reset、file、hidden、image、button默认为text |
name | 指定表单元素的名称 必填，用来后台读取 |
value | 元素的初试值。type为radio时必须指定一个值 |
size | 指定元素的初始宽度。当type为text时或者password时，表单元素的大小以字符为单位。对于其他类型，宽度以像素为单位 |
maxlength | type为txet或password时，输入的最大字符数 |
cheaked | type为radio或cheackbox时，指定按钮是否被选中 |
单选框
多选框
按钮
<input type="button" name="btn1" value="点击" />普通按钮
<input type="image" src ="点击跳转的path"/>图片按钮
<input type="submit"/>提交按钮
<input type="reset"/>重置按钮下拉框
<select name="列表名称">
<option value="选项的值" select>中国</option>
<option value="选项的值">中国</option>
<option value="选项的值">中国</option>
<option value="选项的值">中国</option>
<option value="选项的值">中国</option>
</select>
提交的格式就是列表名称和value文本域
<textarea name="name" cols="列数" rows="行数">文本内容</textarea>文件域
<input type="file" name="files"/>
<input type="button" value="提交"/>邮件验证
<input type="email" name="youjian">URL
<input type="url" name="url"> 数字验证
<input type="number" name="num" max="100" min="0" step="10">滑块
<input type="range" max="100" min="0">搜索
<input type="search" name="search">隐藏域 hidden
<input type="text" id="mark" hidden>只读 readonly
<input type="text" id="mark" readonly>禁用 disabled
<input type="text" id="mark" disabled>增强鼠标可用性
<label for="mark">点击</label>
<input type="text" id="mark">为什么要进行表单验证：缓解服务器压力、保证数据安全
提示信息
非空判断
正则表达式验证
高级验证使用js
人人都是产品经理【起点学院】，BAT实战派产品总监手把手系统带你学产品、学运营。
产品设计时细节是产品经理最头疼的问题，一个button，一个链接都要考虑太多的细节问题。作者整理了常见的一些功能设计问题，一篇文章看懂这些功能设计。来学习吧。
链接也称为超链接，所谓的超链接是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序。而在一个网页中用来超链接的对象，可以是一段文本或者是一个图片。当浏览者单击已经链接的文字或图片后，链接目标将显示在浏览器上，并且根据目标的类型来打开或运行。
链接可以是一个字或是一段字这样的文本，也可以是一个按钮，一张图片，当你点击后跳转到另一个目标，当你把鼠标指针移到某个链接时会变成一个小手，当然在手机上没有这一特点。
文本样式的链接一般在搜索引擎的网站呈现蓝色字样，大多会在下面加上下划线以便识别，不过现如今考虑到不影响文本的可读性与用户体验，逐渐取消了下划线。而在一些别的网站考虑到界面设计风格各方面的因素而不用蓝色。
谷歌的文本链接是蓝色，没有下划线
百度的文本链接也是蓝色，关键词是红色，有下划线
而京东的文本链接有灰色，有白色，有黑色
按钮样式的链接比文本样式的更容易识别，每一个按钮都是一样链接。
按钮样式链接
图片样式的链接可以是单独的一张图片，也可以是文字与按钮一起组成一张图片，只是鼠标指针扫过图片的任何一个部位都会变成小手。
如桌面弹出这种游戏小窗口的图片式链接
由文字/图/按钮样式一起构成的一张图片式按钮，鼠标可以点击图中任何一部位
链接打开的方式有三种：第一种是在当前页面刷新跳转，国外的网站大多是这样的打开式；第二种是在新标签页面打开链接，国内大多采用这种；第三种是提示用APP打开。当然现在出现了一种新的打开方式，那就是二维码扫描。
提示用美拍APP打开
按照连接路径的不同，网页中超链接一般分为以下3种类型：内部链接，锚点链接和外部链接。
链接还可以分为动态链接和静态链接。动态超链接指的是可以通过改变HTML代码来实现动态变化的链接，例如我们可以实现将鼠标移动到某个文字链接上，文字就会象动画一样动起来或改变颜色的效果，也可以实现鼠标移到图片上图片就产生反色或朦胧等等的效果。而静态链接，顾名思义，就是没有动态效果的链接。
与外部链接（即反向链接）相反，内部链接是指同一网站域名下的内容页面之间互相链接。如频道、栏目、终极内容页之间的链接，乃至站内关键词之间的Tag链接都可以归类为内部链接，因此内部链接我们也可以称之为站内链接，对内部链接的优化其实就是对网站的站内链接的优化。
HTML中的链接，正确的说法应该称作"锚点"，它命名锚点链接（也叫书签链接）常常用于那些内容庞大繁琐的网页，通过点击命名锚点，不仅让我们能指向文档，还能指向页面里的特定段落，更能当作"精准链接"的便利工具，让链接对象接近焦点。便于浏览者查看网页内容。类似于我们阅读书籍时的目录页码或章回提示。在需要指定到页面的特定部分时，标记锚点是最佳的方法。
外部链接，又常被称为：“反向链接”或“导入链接”，是指通过其他网站链接到你的网站的链接。
外部链接指的是针对搜索引擎，与其它站点所做的友情链接。高质量的外部链接指：和你的网站建立链接的网站知名度高，访问量大，同时相对的外部链接较少，有助于快速提升你的网站知名度和排名的其他网站的友情链接。
如果按照使用对象的不同，网页中的链接又可以分为：文本超链接，图像超链接，E-mail链接，锚点链接，多媒体文件链接，空链接等。
链接是一种对象，它以特殊编码的文本或图形的形式来实现链接，如果单击该链接，则相当于指示浏览器移至同一网页内的某个位置，或打开一个新的网页，或打开某一个新的WWW网站中的网页。
链接在交互上一般会呈现4种状态，即默认状态/悬停时状态/点击时状态/点击后状态。比如谷哥网站的交互体验。如下图：
点击前
悬停时，下面浮现半透明线条
点击时，有波纹晕开的动态效果
点击后，下面线条粗
有时候是3种状态，比如百度网和知乎应用：
默认状态
点击时链接变红
点击后链接变成紫色
IOS系统知乎应用的3种状态，而在Android系统没有用力点击这一状态。
默认状态
点击状态
用力点击会弹出预览小窗口
有些时候只有2种状态，如下图谷歌网：
默认和点击后状态一样
鼠标悬停时出现下划线
默认状态
点击时
而有时候比如在APP里有时候就一直只有一种状态，也可以称静态链接，之前的可以称之为动态链接。在不同的使用场景会因为当时的情况选择最合适的交互体验设计。有的情况下还会加上点击的音效，使用户体验更畅快，这在移动端用的使用情况多一些。
总之链接是网页不可缺少的构成部分，每一个链接的呈现都是经过深思熟虑的。
作者：潘瑶琼（简书作者）
本文由 @潘瑶琼 授权发布于人人都是产品经理，未经作者许可，禁止转载。
*请认真填写需求信息，我们会在24小时内与您取得联系。
