1.css3有了解吗，新增了哪些
1.CSS3边框：
- border-radius：CSS3圆角边框。在 CSS2 中添加圆角矩形需要技巧，我们必须为每个圆角使用不同的图片，在 CSS3 中，创建圆角是非常容易的，在 CSS3 中，border-radius 属性用于创建圆角。border：2px solid;
- box-shadow：CSS3边框阴影。在 CSS3 中，box-shadow 用于向方框添加阴影。box-shadow:10px 10px 5px #888888;
- border-image：CSS3边框图片。通过 CSS3 的 border-image 属性，您可以使用图片来创建边框。border-image：url(border.png) 30 30 round;
2.CSS3背景：
- background-size： 属性规定背景图片的尺寸。在 CSS3 之前，背景图片的尺寸是由图片的实际尺寸决定的。在 CSS3 中，可以规定背景图片的尺寸，这就允许我们在不同的环境中重复使用背景图片。您能够以像素或百分比规定尺寸。如果以百分比规定尺寸，那么尺寸相对于父元素的宽度和高度。
- background-origin ：属性规定背景图片的定位区域。背景图片可以放置于 content-box、padding-box 或 border-box 区域。
3.CSS3文字效果：
- text-shadow：在 CSS3 中，text-shadow 可向文本应用阴影。text-shadow:5px 5px 5px #FFFFFF;
- word-wrap :单词太长的话就可能无法超出某个区域，允许对长单词进行拆分，并换行到下一行：p{word-wrap:break-word;}
4.CSS3 2D转换：
transform：通过 CSS3 转换，我们能够对元素进行移动、缩放、转动、拉长或拉伸。
- translate()：元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数：transform：translate（50px,100px）;值 translate(50px,100px) 把元素从左侧移动 50 像素，从顶端移动 100 像素。
- rotate()：元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。transform:rotate(30deg);值 rotate(30deg) 把元素顺时针旋转 30 度。
- scale():元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数：transform:scale(2,4);值 scale(2,4) 把宽度转换为原始尺寸的 2 倍，把高度转换为原始高度的 4 倍。
5.CSS3 3D转换：
- rotateX()：元素围绕其 X 轴以给定的度数进行旋转。transform：rotateX(120deg);
- rotateY()：元素围绕其 Y 轴以给定的度数进行旋转。transform：rotateY(120deg);
6.CSS3 过渡：当元素从一种样式变换为另一种样式时为元素添加效果。
7.CSS3动画：通过 CSS3，我们能够创建动画，这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。
衍生问题1：用过CSS3什么新特性？
用过它的选择器 :
- :first-child :选取属于其父元素的首个子元素的指定选择器
- :last-child :选取属于其父元素的最后一个子元素的指定选择器
用过它的盒模型box-sizing:border-box
用过它的线性渐变和径向渐变 background
2.div的隐藏有哪些方法
三种，display:none , visibility:hidden , opacity:0
衍生问题1：它们有什么区别？
差异性-事件绑定
-
display:none;的元素会直接从页面上消失，因此在该元素上绑定的事件不会生效。
-
visibility: hidden;的元素不会触发绑定的事件。
-
opacity:0; 的元素会触发绑定的事件，例如点击会触发click函数。
3.讲讲html5的标签语义化（谈谈你对 HTML5语义化标签的理解）？
在html5之前采用html+css的文档结构写法。 通过给每个div标签设置id来标识页面上特定元素。
这种做法有两个缺点：
1.不利于SEO搜索引擎对页面内容的抓取。
2.文档结构定义不明确。
于是HTML5专门添加页眉、页脚、导航、文章内容等跟结构相关的语义结构元素标签来解决上述问题。使用语义结构标签：
回答下面几点
为什么要语义化？
- 代码结构: 使页面没有css的情况下，也能够呈现出很好的内容结构
- 有利于SEO:有利于搜索引擎对页面内容的抓取。 爬虫依赖标签来确定关键字的权重，因此可以和搜索引擎建立良好的沟通，帮助爬虫抓取更多的有效信息
- 提升用户体验： 例如title、alt可以用于解释名称或者解释图片信息，以及label标签的灵活运用。
- 便于团队开发和维护: 语义化使得代码更具有可读性，让其他开发人员更加理解你的html结构，减少差异化。
- 方便其他设备解析: 如屏幕阅读器、盲人阅读器、移动设备等，以有意义的方式来渲染网页。
衍生问题1：哪些方式有利于SEO（SEO优化方法有哪些）？
SEO有三条最重要的规律，那就是原创的内容、高质量的外部链接和持之以恒适度的优化。
1.使用meta标签，meta标签的keywords的信息参数，代表说明网站的关键词是什么。
例如网易云的写法：
<meta name="keywords" content="优质课程、智能问答、趣味实践、随心笔记、教育、网易公开课、计算机开发、交互视觉设计、视频教程、交流互动、免费、名师、实用、培训"/>
META标签的`Description`
2.META标签的Robots，Robots代表高速搜索引擎机器人抓取哪些页面
例如网易云课堂的写法：
<meta name="robots" content="all">
3.利用布局，把重要内容HTML代码放在最前。搜索引擎抓取HTML内容是从上到下，利用这一特点，可以让主要代码优先读取
4.尽少使用ifname框架。搜索引擎不会抓取到iframe里的内容，重要内容不要放在框架中
5.重要内容不要用js输出，爬虫不会读取js里面的内容，所以重要内容必须放在HTML中。
6.网站结构呈扁平状树型，目录结构不宜过深，每个页面离首页最多点击不超过3次，过深不利于搜索引擎的抓取
衍生问题2：讲几个语义化标签？
衍生问题1：h5的新特性知道哪些？
1.语义化标签
2.本地存储
h5提供了sessionStorage、localStorage和indexedDB加强本地存储。
localStorage和sessionStorage的区别在于sessionStorage基于会话，关闭浏览器之后存储消失。localStorage在各浏览器中上限不同，最低的是2.6MB, 所以开发上限为2.6MB, 当然这比cookie强太多，如果还是不够的话只能借助indexedDB, indexedDB上限是250MB。
localStorage和cookie另一个区别是没有过期时间，不过这个可以在localStorage中加一个时间字段轻松解决这个问题。存取localStorage可能遇到的坑是跨域问题，因为localStorage是域内安全，也就是同一个域才能对localStorage进行存储，可以通过postMessage来解决。
3.离线web应用
页面缓存指的还是有网络状态下，而离线web应用指的是在没有网络状态可以运行应用。
4.convas绘图
convas是图形榕溪容器，需要使用js脚本来在上面进行绘画图形。
5.地理定位
通过浏览器获取当前用户的所在地理坐标，以实现“LBS服务”（Location Based Service），如实时导航、周边推荐。
6.webSocket协议
web socket是一种基于TCP的协议。
4.translate和left/top进行位移的区别？
最首要的区别是元素位置：使用 top left 定位是直接改变元素真实位置的。但是用 transform: translateY(-5px) 只是改变了视觉位置，元素本身位置还是在 0px，只是视觉上向上偏移了 5px。然后是效率的区别：由于 transform 不改动 css 布局，因为渲染行为大多数情况下在元素本身，所以效率比 top left 要高。
衍生问题1：transform是否可以避免重排问题？
CSS的最终表现分为以下四步：Recalculate Style -> Layout -> Paint Setup and Paint -> Composite Layers
按照中文的意思大致是 查找并计算样式 -> 排布 -> 绘制 -> 组合层。
这上面的几个步骤有点类似于之前说到的重排必定导致重绘，而查询属性会强制发生重排。所以上文提到的重排重绘内容可以结合这里进行理解。
由于transform是位于Composite Layers层，而width、left、margin等则是位于Layout层，在Layout层发生的改变必定导致Paint Setup and Paint -> Composite Layers，所以相对而言使用transform实现的动画效果肯定比left这些更加流畅。
而且就算抛开这一角度，在另一方面浏览器也会针对transform等开启GPU加速。
5.position的属性
6.href与src有什么区别？
1.href：Hypertext Reference的缩写，超文本引用，它指向一些网络资源，建立和当前元素或者说是本文档的链接关系。在加载它的时候，不会停止对当前文档的处理，浏览器会继续往下走。常用在a、link等标签。这也是建议使用link，而不采用@import加载css的原因。
2.src：source的所写，表示的是对资源的引用，它指向的内容会嵌入到当前标签所在的位置。由于src的内容是页面必不可少的一部分，因此浏览器在解析src时会停下来对后续文档的处理，直到src的内容加载完毕。
常用的有：img、script、iframe。当浏览器解析到该元素时，会暂停浏览器的渲染，直到该资源加载完毕。这也是将js脚本放在底部而不是头部得原因。
7.说一下网格布局？
网络布局可以将元素分割为不同的空间，或者定义他们的大小、位置以及层级。
就像表格一样，网格布局可以使元素按列或行对齐排列，和表格不同的是，网格布局没有内容结构，从而使各种布局不可能与表格一样。例如，一个网格布局中的子元素都可以定位自己的位置，这样他们可以重叠和类似元素定位。
没有内容结构的网格布局有助于使用流体、调整顺序等技术管理或更改布局。通过结合CSS的媒体查询属性，可以控制网格布局容器和他们的子元素，使用页面的布局根据不同的设备和可用空间调整元素的显示风格与定位，而不需要去改变文档结构的本质内容。
8.requestAnimationFrame 和setTimeout 的区别？
requestAnimationFrame是HTML5新增的api，类似于setTimeout定时器。是window对象的一个方法：window.requestAnimationFrame 。是浏览器（所以只能在浏览器中使用）专门为动画提供API，让dom动画，canvas动画。svg动画。webGL动画等有一个统一的刷新机制。
特点：
1.按帧对网页进行重绘。该方法告诉浏览器希望之星动画并请求浏览器在下一次重绘之前调用就掉函数更新动画。
2.由系统来决定回调函数的执行机制。在运行时浏览器会自动优化方法的调用。
3. 显示器有固定的刷新频率（60Hz 或 75Hz），也就是说，每秒最多只能重绘60 次或 75 次，requestAnimationFrame 的基本思想让页面重绘的频率与这个刷新频率保持同步比如显示器屏幕刷新率为 60Hz，使用 requestAnimationFrame API，那么回调函数就每 1000ms / 60 ≈ 16.7ms 执行一次；如果显示器屏幕的刷新率为 75Hz，那么回调函数就每 1000ms / 75 ≈ 13.3ms 执行一次。
4.通过 requestAnimationFrame 调用回调函数引起的页面重绘或回流的时间间隔和显示器的刷新时间间隔相同。所以 requestAnimationFrame 不需要像setTimeout 那样传递时间间隔，而是浏览器通过系统获取并使用显示器刷新频率。
区别：
1.requestAnimationFrame不需要像setTimeout 那样传递时间间隔，而是浏览器通过系统获取并使用显示器刷新频率。
2.使用requestAnimationFrame不会掉帧，而使用setTimeout有可能会。
衍生问题1：为什么requestAnimationFrame不会掉帧而seTtimeout会掉帧？
- 由于js中的事件队列的存在，因此setTimeout 的执行时间并不是确定的。
- 刷新频率受屏幕分辨率和屏幕尺寸影响，不同设备的屏幕刷新率可能不同，
setTimeout 只能设置固定的时间间隔，这个时间和屏幕刷新间隔可能不同 - 以上两种情况都会导致 setTimeout 的执行步调和屏幕的刷新步调不一致，从而引起丢帧现象。使用 requestAnimationFrame 执行动画，最大优势是能保证回调函数在屏幕每一次刷新间隔中只被执行一次，这样就不会引起丢帧，动画也就不会卡顿。
8.如何在移动端实现1像素细线？
1.使用css3提供的border-image来实现
.border{
border-width: 1px;
border-image: url(border.gif) 2 repeat;
}2.多背景渐变实现。设置1px的渐变背景，50%有颜色，50%透明
.border {
background:
linear-gradient(180deg, black, black 50%, transparent 50%) top left / 100% 1px no-repeat,
linear-gradient(90deg, black, black 50%, transparent 50%) top right / 1px 100% no-repeat,
linear-gradient(0, black, black 50%, transparent 50%) bottom right / 100% 1px no-repeat,
linear-gradient(-90deg, black, black 50%, transparent 50%) bottom left / 1px 100% no-repeat;
}3.通过rem实现，在chorm下1rem等于12px。因此可以把border宽度设置成0.83rem
div:{
borer-width:0.83rem
}4.伪类 + transform
原理是把原先元素的 border 去掉，然后利用 :before 或者 :after 重做 border ，并用transform 的 scale 缩小一半，原先的元素相对定位，新做的 border 绝对定位
.hairlines li{
position: relative;
border:none;
}
.hairlines li:after{
content: '';
position: absolute;
left: 0;
background: #000;
width: 100%;
height: 1px;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}
9.什么是伪类？什么是伪元素？你所知道的伪类和伪元素？
伪类相当于一个特殊的class选择器，用来添加一些特殊效果。 使用一个冒号表示。如 :hover
伪元素相当于一个特殊的元素，可以用来存放一些特殊样式或者内容。它不会被渲染到dom树中。使用两个冒号表示 如::after
常见伪类：
:active :hover :first-child :last-child :focus :disable
常见伪元素：
::after ::before ::first-line(选择指定元素的第一行) ::selection(选择指定元素中被用户选中的内容)
注意：
1.伪元素要配合content属性一起使用
2.伪元素不会出现在DOM中，所以不能通过js来操作，仅仅是在CSS渲染层加入
3.伪元素的特效通常要使用:hover伪类样式来激活
10.html的dom树如何生成的?
浏览器解析HTML文档构建DOM树主要分为两步：
1. 标签解析
这部分完成从HTML字符串中解析出标签的功能。主要使用标记化算法。
标记化算法的输入结果是HTML标记，使用状态机表示。状态机一共有4个状态：数据状态(Data)、标记打开状态(Tag open)、标记名称状态(Tag name)、关闭标记打开状态(Close tag open state)。
2. DOM树构建
当标签解析器解析出标签后会发送到DOM树构建器，我们可以认为DOM树构建器主要有以下两部分组成：
1.DOM树
2.一个存放标签名的栈
11.restful风格格式知道吗
REST（英文：Representational State Transfer，简称REST）是一种软件架构风格、设计风格，而不是标准，只是提供了一组设计原则和约束条件。它主要用于客户端和服务器交互类的软件。基于这个风格设计的软件可以更简洁，更有层次，更易于实现缓存等机制。
REST 指的是一组架构（约束条件）和原则。满足这些（约束条件）和（原则）的应用程序或设计就是 RESTful。
restful有什么特点
1.每一个URI代表一种资源，独一无二
2.客户端和服务器之间，传递这种资源的某种表现层
3.客户端通过四个HTTP动词，对服务器端资源进行操作，实现"表现层状态转化"。GET、POST(用服务器来完成的例如:由服务器来生成id然后保存数据)、PUT(这个功能是由客户端完成的)、DELETE
之前的操作是没有问题的,大神认为是有问题的,有什么问题呢?你每次请求的接口或者地址,都在做描述,例如查询的时候用了queryUser,新增的时候用了saveUser ，修改的时候用了updateUser,其实完全没有这个必要,我使用了get请求,就是查询.使用post请求,就是新增的请求,PUT就是修改，delete就是删除，我的意图很明显,完全没有必要做描述,这就是为什么有了restful.
扫一扫
888
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
