面试题2
html部分
第一题
问：
HTML全局属性(global attribute)有哪些（包含H5）？
答：
全局属性：用于任何HTML5元素的属性
| 属性 | 描述 |
|---|---|
| accesskey | 设置访问元素的键盘快捷键。 |
| class | 规定元素的类名（classname） |
| contenteditable (h5) | 规定是否可编辑元素的内容。 |
| contextmenu (h5) | 指定一个元素的上下文菜单。当用户右击该元素，出现上下文菜单 |
| data-*（h5） | 用于存储页面的自定义数据 |
| dir | 设置元素中内容的文本方向。 |
| draggable (h5) | 指定某个元素是否可以拖动 |
| dropzone (h5) | 指定是否将数据复制，移动，或链接，或删除 |
| hidden (h5) | hidden 属性规定对元素进行隐藏。 |
| id | 规定元素的唯一 id |
| lang | 设置元素中内容的语言代码。 |
| spellcheck (h5) | 检测元素是否拼写错误 |
| style | 规定元素的行内样式（inline style） |
| tabindex | 设置元素的 Tab 键控制次序。 |
| title | 规定元素的额外信息（可在工具提示中显示） |
| translate (h5) | 指定是否一个元素的值在页面载入时是否需要翻译 |
第二题：
问：
HTML 5的文件离线储存怎么使用，工作原理是什么？
答：
HTML5 的离线存储的使用：
什么是HTML5 的离线存储？
HTML5提供了很多新的功能以及相应的接口，离线存储就是其中的一个，离线存储可以将站点的一些文件存储在本地，在没有网络的时候还是可以访问到以缓存的对应的站点页面，其中这些文件可以包括html，js，css，img等等文件，但其实即使在有网络的时候，浏览器也会优先使用已离线存储的文件，返回一个200（from cache）头。这跟HTTP的缓存使用策略是不同的。
本地缓存应用所需的文件
怎么使用HTML5的离线存储
首先，你得告诉浏览器你想要离线存储哪些文件，那就需要有一个缓存文件清单，这跟文件是一个manifest后缀名的文件，注意，使用HTML5的离线存储就必须有这个文件，而且必须在服务器端做修改，使得.manifest后缀名的文件的mime类型为text/cache-manifest。
配置manifest文件
页面上：
<!DOCTYPE HTML>
<html manifest="demo.appcache">
...
</html>
manifest文件：
manifest是最简单的文本文件，它告知浏览器被缓存的内容（以及不缓存的内容）。
manifest文件分为三个部分：
CACHE MANIFEST-在此标题下列出的文件将在首次下载后进行缓存NETWOrK-在此标题下的文件需要与服务器进行连接，且不会被缓存FALLBACK-在此标题下的文件规定当页面无法被访问时的回退页面（比如404页面）- 指定上述文件，可以用相对路径，也可以用绝对路径，都是ok的。但是绝对路径要加上http://
完整demo
CACHE MANIFEST
# 2016-07-24 v1.0.0
/theme.css
/main.js
NETWORK:
login.jsp
FALLBACK:
/html/ /offline.html
服务器上：manifest文件需要配置正确的MIME-type，即text/cache-manifest。
常用API
核心是applicationCache对象，有个status属性，表示应用缓存的当前状态：
0 （UNCACHED）：无缓存，没有和页面相关的应用缓存
1 （IDLE）：闲置，应用缓存没有得到更新
2 （CHECKING）：检查中，正在下载描述文件并检查更新
3 （DOWNLOADING）：下载中，应用缓存正在下载与描述文件中指定的资源
4 （UPDATEREADY）：更新完成，所有资源都已经下载完毕
5 （IDLE）：废弃，应用缓存的描述文件已经不存在了，因此页面无法再访问应用缓存
相关事件
表示应用缓存状态的改变：
checking：在浏览器为应用缓存查找更新时触发
error：在检查更新或下载资源期间发生错误时触发
noupdate：在检查描述文件发现文件无变化时触发
downloading：在开始下载应用缓存资源时触发
progress：在文件下载应用缓存的过程中持续不断地下载时触发
updateready：在页面新的应用缓存下载完毕时触发
cached：在应用缓存完整可用时触发
application cache的三个优势：
- 离线浏览
- 提升页面载入速度
- 降低服务器压力
注意事项：
- 浏览器对缓存数据的容量限制可能不太一样（某些浏览器设置的限制是每个站点
5M） - 如果是
manifest文件，或者内部列举的某一个文件不能正常下载，整个更新过程将视为失败，浏览器继续全部使用旧的缓存 - 引用
manifest的html必须与manifest文件同源，在同一个域下 - 浏览器会自动缓存引用
manifest文件的html文件，这就导致了如果更改了html内容，也需要更新版本才能做到最新 manifest文件中的CACHE与NETWOrK、FALLBACK的位置顺序没有关系，如果是隐式声明需要在最前面FALLBACK中的资源必须和manifest文件同源- 更新完版本后，必须刷新一次才会启动新版本（会出现重刷一次页面的情况），需要添加监听版本事件
- 站点中的其他页面即使没有设置
manifest属性，请求的资源如果在缓存中也从缓存中访问 - 当
manifest文件发生改变时，资源请求本身也会触发更新
离线缓存和传统浏览器缓存的区别
- 离线缓存是针对整个应用，浏览器缓存是单个文件
- 离线缓存可以主动通知浏览器更新资源
css部分
第一题
问：
在页面上隐藏元素的方法有哪些？
答：
利用 dispaly
- disaplay: none; 页面不会渲染
- visibility: hidden; 页面会渲染只是不限显示
- opacity: 0; 看不见，但是会占据空间
利用 position （absolute 的情况下）
- left/right/top/bottom: 9999px/-9999px 让元素在视区外
- z-index: -9999 放到最底层，同一位置可以让其他元素把这个给遮掉
利用2D动画
- transform: scale(0) 设置元素缩放比例为0，起到display:none; 的作用
超出隐藏
- overflow: hidden;
宽高设置
- width:0; height:0;
仅对块内文本元素:
- text-indent: -9999px;
- font-size: 0;
第二题：
问：
CSS选择器有哪些？哪些属性可以继承？
答：
css选择器
| 选择器 | 例子 | 例子描述 | CSS |
|---|---|---|---|
| .class | .intro | 选择 class=“intro” 的所有元素。 | 1 |
| #id | #firstname | 选择 id=“firstname” 的所有元素。 | 1 |
| * | * | 选择所有元素。 | 2 |
| element | p | 选择所有元素。 | 1 |
| element,element | div,p | 选择所有元素和所有元素。 | 1 |
| element element | div p | 选择元素内部的所有元素。 | 1 |
| element>element | div>p | 选择父元素为元素的所有元素。 | 2 |
| element+element | div+p | 选择紧接在元素之后的所有元素。 | 2 |
| [attribute] | [target] | 选择带有 target 属性所有元素。 | 2 |
| [attribute=value] | [target=_blank] | 选择 target="_blank" 的所有元素。 | 2 |
| [attribute~=value] | [title~=flower] | 选择 title 属性包含单词 “flower” 的所有元素。 | 2 |
| [attribute|=value] | [lang|=en] | 选择 lang 属性值以 “en” 开头的所有元素。 | 2 |
| :link | a:link | 选择所有未被访问的链接。 | 1 |
| :visited | a:visited | 选择所有已被访问的链接。 | 1 |
| :active | a:active | 选择活动链接。 | 1 |
| :hover | a:hover | 选择鼠标指针位于其上的链接。 | 1 |
| :focus | input:focus | 选择获得焦点的 input 元素。 | 2 |
| :first-letter | p:first-letter | 选择每个元素的首字母。 | 1 |
| :first-line | p:first-line | 选择每个元素的首行。 | 1 |
| :first-child | p:first-child | 选择属于父元素的第一个子元素的每个元素。 | 2 |
| :before | p:before | 在每个元素的内容之前插入内容。 | 2 |
| :after | p:after | 在每个元素的内容之后插入内容。 | 2 |
| :lang(language) | p:lang(it) | 选择带有以 “it” 开头的 lang 属性值的每个元素。 | 2 |
| element1~element2 | p~ul | 选择前面有元素的每个元素。 | 3 |
| [attribute^=value] | a[src^=“https”] | 选择其 src 属性值以 “https” 开头的每个 元素。 | 3 |
| [attribute$=value] | a[src$=".pdf"] | 选择其 src 属性以 “.pdf” 结尾的所有 元素。 | 3 |
| [attribute*=value] | a[src*=“abc”] | 选择其 src 属性中包含 “abc” 子串的每个 元素。 | 3 |
| :first-of-type | p:first-of-type | 选择属于其父元素的首个元素的每个元素。 | 3 |
| :last-of-type | p:last-of-type | 选择属于其父元素的最后元素的每个元素。 | 3 |
| :only-of-type | p:only-of-type | 选择属于其父元素唯一的元素的每个元素。 | 3 |
| :only-child | p:only-child | 选择属于其父元素的唯一子元素的每个元素。 | 3 |
| :nth-child(n) | p:nth-child(2) | 选择属于其父元素的第二个子元素的每个元素。 | 3 |
| :nth-last-child(n) | p:nth-last-child(2) | 同上，从最后一个子元素开始计数。 | 3 |
| :nth-of-type(n) | p:nth-of-type(2) | 选择属于其父元素第二个元素的每个元素。 | 3 |
| :nth-last-of-type(n) | p:nth-last-of-type(2) | 同上，但是从最后一个子元素开始计数。 | 3 |
| :last-child | p:last-child | 选择属于其父元素最后一个子元素每个元素。 | 3 |
| :root | :root | 选择文档的根元素。 | 3 |
| :empty | p:empty | 选择没有子元素的每个元素（包括文本节点）。 | 3 |
| :target | #news:target | 选择当前活动的 #news 元素。 | 3 |
| :enabled | input:enabled | 选择每个启用的 元素。 | 3 |
| :disabled | input:disabled | 选择每个禁用的 元素 | 3 |
| :checked | input:checked | 选择每个被选中的 元素。 | 3 |
| :not(selector) | :not§ | 选择非元素的每个元素。 | 3 |
| ::selection | ::selection | 选择被用户选取的元素部分。 | 3 |
属性可以继承
1. 所有元素都可以继承
visibility和cursor
2. 内联元素可以继承
letter-spacing：字符之间的间隙word-spacing：单词之间的间隙white-space：换行方式line-height：行高color：颜色font：字体设置font-family：字体名称font-size：字体大小font-style：字体样式font-variant：是否为小型的大写字母font-weight：文本字体的粗细text- decoration：复合属性。文本的装饰。text-transform：文本的大小写direction：文本流的方向
3. 块级元素可以继承
text-indent：文本缩进text-align：文本对齐方式
4. 列表元素可以继承
list-style：复合属性。设置列表项目相关内容list-style-type：列表项所使用的预设标记list-style-position：列表项标记如何根据文本排列list-style-image：列表项标记的图像
5. 表格元素嗯昆虫继承
border-collapse：表格的行和单元格的边是合并还是独立
6. 不可继承的元素
display`、`margin`、`border`、`padding`、`background`、`height`、`min-height`、`max- height`、`width`、`min-width`、`max-width`、`overflow`、`position`、`left`、`right`、`top`、 `bottom`、`z-index`、`float`、`clear`、`table-layout`、`vertical-align`、`page-break-after`、 `page-bread-before和unicode-bid
js部分
第一题：
问：
去除字符串中最后一个指定的字符
答：
var str = "123456789"
function strdelete (str, del) {
if (typeof str !== 'string') {
return false
} else {
var index = str.lastIndexOf(del)
return str.substring(0,index ) + str.substring(index+1,str.length);
}
}
var a=strdelete(str, "9")
console.log(a)
第二题：
问：
写一个方法把下划线命名转成大驼峰命名
答：
第一种：
function transoform(str) {
var result = str.split('');
result.forEach(function(e, i, a) {
if (e === '_') {
a[i + 1] = a[i + 1].toUpperCase();
}
});
return result.join('').replace(/\_*/g, '');
}
var result = transoform('if_you_are_my_world');
console.log(result); // ifYouAreMyWorld
第二种：
function toCamel(str) {
return str.replace(/(\w)(_)(\w)/g, (match, $1, $2, $3) => `${$1}${$3.toUpperCase()}`)
}
console.log(toCamel('a_bc_def')) // aBcDef
913
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
