IMWeb提升营Day1

最新推荐文章于 2017-08-26 09:47:42 发布

rical730

最新推荐文章于 2017-08-26 09:47:42 发布

阅读量334

点赞数

分类专栏： Web开发文章标签： IMWeb web 前端

本文链接：https://blog.csdn.net/rical730/article/details/72674800

版权

Web开发专栏收录该内容

63 篇文章 0 订阅

订阅专栏

2017.5.24

今日早报

柯洁对阵AlphaGo，第一局柯洁负，机器打比赛主要是稳打稳扎，规避风险，此外，这次是单机版。
Git改进了安全性和UI，之前用的SHA-1容易受到碰撞攻击，现在实现的算法可以检测和拒绝任何创建死后带有制造冲突目的的对象。
Siri联合创始人表明人工智能还有巨大的潜能来开发有巨大价值的数据。

前段常见题目

问题1:CSS引入的方式有哪些

1 内联方式
- 在<body>内部的元素中使用”style”属性来定义样式
- 这通常是个很糟糕的书写方式，它只能改变当前标签的样式，内联方式引入 CSS 代码会导致 HTML 代码变得冗长，且使得网页难以维护
- e.g.

<div style="background: red"></div>

2 嵌入方式
- 在<head>元素中使用”style”元素来指定
- 嵌入方式的 CSS 只对当前的网页有效。当我们写模板网页时这通常比较有利。可以一目了然地查看 HTML 结构和 CSS 样式
- e.g.

<head>
    <style>

    .content {
        background: red;
    }

    </style>
</head>

3 外链方式
- 使用<link>元素链接到外部的样式文件
- 这是最常见的也是最推荐的引入 CSS 的方式。CSS 文件会在第一次加载时引入，以后切换页面时只需加载 HTML 文件即可。
- e.g.

<head>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

4 引入方式
- 使用CSS “@import”标记来导入样式表单
- e.g.

<style>
    @import url(style.css);
</style>

问题2: 行内元素有哪些？块级元素有哪些？CSS的盒模型？

块级元素：<div> <p> <h1> <h2> <h3> <h4> <from> <ul>
行内元素：<a> <b> <i> <span> <input> <select>
CSS盒模型：border，margin，padding

问题3: link和@import的区别是?

本质上，这两种方式都是为了加载CSS文件，但还是存在着细微的差别。

区别1：老祖宗的差别。
- link是XHTML标签，除了加载CSS外，还可以定义RSS，定义rel连接属性等其他事务；@import属于CSS范畴，只能加载CSS。
区别2：加载顺序的差别。（页面加载就是被浏览者浏览的时候）
- link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。
区别3：兼容性的差别。
- link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持，只有在IE5以上的才能识别。
区别4：使用dom控制样式时的差别。
- link支持使用Javascript控制DOM去改变样式；而@import不支持。

问题4： ”==”和“===”的不同

答案：前者会自动转换类型，后者不会

个人思考题

1、你之前自认为做得最好的，最具有挑战的一项需求是什么，为什么？现在回头去看，还有哪些地方可以值得优化？

2、说一下h5中的离线存储有哪些

什么是HTML5 的离线存储？
- HTML5提供了很多新的功能以及相应的接口，离线存储就是其中的一个，离线存储可以将站点的一些文件存储在本地，在没有网络的时候还是可以访问到以缓存的对应的站点页面，其中这些文件可以包括html，js，css，img等等文件，但其实即使在有网络的时候，浏览器也会优先使用已离线存储的文件，返回一个200（from cache）头。这跟HTTP的缓存使用策略是不同的。
- html文件头要有一句说明manifest=”manifest.appcache”

<!DOCTYPE html>
<html lang="en" manifest="manifest.appcache">
<head>
    <meta charset="UTF-8">
    <title>APP CACHE</title>
    <link rel="stylesheet" type="text/css" href="test.css">
</head><!-- text/cache-mainfest -->
<body>
    <img src="img/1.jpg">
    <img src="img/2.jpg">
<script type="text/javascript">
    window.addEventListener('load', function(e){
        console.log(window.applicationCache.status);
    })
</script>
</body>
</html>

怎么使用HTML5的离线存储？
- 首先，你得告诉浏览器你想要离线存储哪些文件，那就需要有一个缓存文件清单，这跟文件是一个manifest后缀名的文件，注意，使用HTML5的离线存储就必须有这个文件，而且必须在服务器端做修改，使得.manifest后缀名的文件的mime类型为text/cache-manifest。典型的一个文件清单类似下面这个，一定是以CACHE MANIFEST开头的：

CACHE MANIFEST  #这句必须存在，且必须放在第一行

#Cache入口
CACHE:
    img/1.jpg
    img/2.jpg
    test.css

# 以下资源必须在线访问 
NETWORK: 
login.php 

# 如果index.php无法访问则用404.html代替 
FALLBACK: 
/index.php /404.html

.manifest文件参数
- CACHE:指定你要浏览器进行离线存储的文件列表，一个文件一行
- NETWORK:跟CACHE相反,指定浏览器一定要通过网络访问的文件列表
- FALLBACK:如果通过网络访问失败了，就去访问紧跟着的那个在本地缓存好的文件文件
- 指定上述文件，可以用相对路径，也可以用绝对路径，都是ok的。但是绝对路径要加上http://
- 编辑好这个文件以后就在html文件中引入这个文件浏览器就可以知道要缓存那些文件了。
- -
H5的离线缓存可以做什么
- 1.用户可离线访问应用，这对于无法随时保持联网状态的移动终端用户来说尤其重要
- 2.用户访问本地的缓存文件，通常意味着更快的访问速度