发表于： 2019-03-04 18:16:52
1 972
今天完成的事情：
今天把任务6完成了。还完成了入学视频和入学介绍
明天计划的事情：
明天准备把任务7的相关资料看看。并把第一个图做出来
遇到的问题：
用CSS截断字符串 实现文字自动截断隐藏溢出文本
方法一：
<div style="width:300px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;"> 任意长度的字符串 </div>
说明：优点是内容可以为任何HTML元素，包括超链接和图片等，在IE6中还会在结尾自动显示省略号。缺点是必须指定宽度数值，并且宽度不能是百分数，否则在IE中会被认为是字符总长的百分比。
方法二：
<input type=”text” style=”width:100%; cursor:default; border-width:0; border-style:none; background-color:transparent;” value=”任意长度的字符串” readonly/>
说明：优点是宽度可以设为百分数。但缺点是内容只能为纯文本，不能有超链接等内容。
CSS 截断字符串2008-01-08 09:58CSS是实现文字自动截断，代码如下：
div.test{
width:200px;
height:14px;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
text-overflow: ellipsis;/* IE/Safari */
-ms-text-overflow: ellipsis;
-o-text-overflow: ellipsis;/* Opera */
-moz-binding: url("ellipsis.xml#ellipsis");/*FireFox*/
}
关键是text-overflow,其语法如下：
text-overflow:clip | ellipsis
clip：不显示省略标记(...)，而是简单的裁切
ellipsis：当对象向内文本溢出时显示省略标记(...)
要注意的是：这个属性是IE专用的！不过，却非只有IE可用。该标签虽然没有被乖哦公开支持采纳，但却被很多浏览器的私有属性所包含。text-overflow单独使用是不起作用的，必须有white-space:nowrap;overflow:hidden;这两句的配合方可。前一句的作用是强制在同一行内显示所有文本，直到文本结束或者遭遇br对象。
不难看出，用text-overflow的最佳场所不是文章的行文，而是用以单行显示的标题或摘要的列表。
语法：
white-space : normal | pre | nowrap
取值：
normal : 默认值。默认处理方式。文本自动处理换行。假如抵达容器边界内容会转到下一行
pre : 换行和其他空白字符都将受到保护。这个值需要IE6+或者 !DOCTYPE 声明为 standards-compliant mode 支持。如果 !DOCTYPE 声明没有指定为 standards-compliant mode ，此属性可以使用，但是不会发生作用。结果等同于 normal 。参阅 pre 对象
nowrap : 强制在同一行内显示所有文本，直到文本结束或者遭遇 br 对象。参阅 noWrap 属性
说明：
设置或检索对象内空格字符的处理方式。
空格字符，像换行，空格，TAB，在HTML文档中默认的是被忽略的。当此属性设置为 normal 或者 nowrap 时，你可以使用不换行空格的命名实体 来添加空格，用 br 元素来添加换行。此属性对你使用文档对象模型(DOM)操作的内容的影响与其对IE显示内容的影响一样。
此属性作用于块对象。
此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。
对应的脚本特性为 whiteSpace 。
收获：了解了如何截断隐藏文字
任务一总结
任务一耗时1天
任务总结：任务一主要是做盒子，因为做的9个盒子都是一模一样的，所以只需要写1个div就行，做出来一个后只需要复制就行。这个任务只要了解with，还有内外边距和浮动基本上就能做出来了。然后还要了解一下盒子的边框圆角。这些东西懂了，任务一就算完成了
深度思考：
1.HTML文件里开头的Doctype有什么作用
DOCTYPE是document type的简写，它并不是 HTML 标签，也没有结束标签，它是一种标记语言的文档类型声明，即告诉浏览器当前 HTML 是用什么版本编写的。DOCTYPE的声明必须是 HTML 文档的第一行，位于html标签之前。大多数Web文档的顶部都有doctype声明，它是在新建一个文档时，由Web创作软件草率处理的众多细节之一。很少人会去注意 doctype ，但在遵循标准的任何Web文档中，它都是一项必需的元素。doctype会影响代码验证，并决定了浏览器最终如何显示你的 Web文档。
2.如何理解盒模型及其content、padding、border、margin？
内容(content)、填充(padding)、边框(border)、边界(margin)
3.常见的inline元素、block元素、inline-block元素有哪些？它们之间有什么区别
inline：span,a,strong,em等
block：div,p,h1到h6,form,ul,ol等
inline-block：img,input等
inline表示的是行内元素，block表示的是块級元素，inline-block表示的是内联块狀元素
4.如何使用浏览器的F12调试页面？
Elements标签页
Elements标签页的左侧就是对页面HTML结构的查看与编辑，你可以直接在某个元素上双击修改元素的属性。
Network标签页
Network标签页对于分析网站请求的网络情况、查看某一请求的请求头和响应头还有响应内容很有用。注意是在你打开Chrome开发者工具后发起的请求，才会在这里显示
Sources标签页
Sources标签页可以查看到请求的资源情况，包括CSS、JS、图片等的内容。也可以设置各种断点。对存储的内容进行编辑然后保存也会实时的反应到页面上。
Audits标签页
这个对于优化前端页面、加速网页加载速度很有用;点击run按钮，就可以开始分析页面，分析完了就可以看到分析结果了
在控制台中可以直接模拟手机、调整UA、修改网络连接状态。
5.九宫格的布局你还能想到哪些办法实现？它们各自的优势劣势是什么？
使用ul,li布局。
ul,li布局和div布局很像，同样使用9个li，将li标签inline-block化。然后对li标签设置背景色，使用padding内边距来撑开li标签宽高，控制好外边距，使得li标签之间的间距相等。
这种方法的优点是层次分明，
不易混乱；缺点是ul,li标签是有默认的margin和padding.
6.IDE是什么？它和文本编辑器相比有什么优缺点？
IDE的意思是集成开发环境，全称是Integrated Development Environment，集成开发环境是用于提供程序开发环境的应用程序，一般包括代码编辑器、编译器、调试器和图形用户界面等工具。
编辑器的本质是可以写字符就行,像windows自带的写字板就是最简单的 编辑器,他的识别级别在文字级,他只显示你想写入,和打开的文本内容.他不管你写什么内容.只提供接收与显示功能.
ide是集合了sdk, 语言支持包, 函数库, 编辑器在一起的软件,或者集合.可以支持你要学的特定编程语言的. 他的"识别级别"比编辑器高一级, 可以识别到编程语言, 或者这种语言的库. 往往用起来更方便. 或者更专业,
7.加和不加meta的viewport有什么区别？
首先如果不设置meta viewport标签，那么移动设备上浏览器默认的宽度值为800px，980px，1024px等这些，总之是大于屏幕宽度的。这里的宽度所用的单位px都是指css中的px，它跟代表实际屏幕物理像素的px不是一回事。
第二、每个移动设备浏览器中都有一个理想的宽度，这个理想的宽度是指css中的宽度，跟设备的物理宽度没有关系，在css中，这个宽度就相当于100%的所代表的那个宽度。我们可以用meta标签把viewport的宽度设为那个理想的宽度，如果不知道这个设备的理想宽度是多少，那么用device-width这个特殊值就行了，同时initial-scale=1也有把viewport的宽度设为理想宽度的作用。所以，我们可以使用
任务二总结
任务耗时1天
任务总结：首先建一个号。然后把写代码的文件上传到文件库里，然后github上面是https://github.com/——然后跟着自己的ID， 学员服务器上面：http://119.10.57.69:880/jnshu3950/jnshu/index.html是像这个样子， 首先通过前面的URL，然后一层一层的找到文件夹，最后找到html文件。
深度思考
1.如何使用svn将代码上传至github?
创建一个GitHub项目 配置项目 记录SVN地址（右侧管理界面） 复制点完出现的Subversion checkout URL的地址就ok了
2.如何使用git将代码上传至github?
1.进入本地的项目目录，右键“Git Bash here”,调出git命令行界面，然后输入
2.将目录下的所有文件上传，也可以将“.”换成具体的文件名
3.将项目提交到本地仓库
4. 在github上创建新的repository
5. 点击 “Create repository”跳转到一个连接
6. 将本地的代码关联到github上
7. 上传代码到github之前需要先pull
8.上传代码到远程git仓库
9.输入自己github的账号，密码，代码会成功上传上去
3.svn和git有什么区别?
Git是分布式的，而Svn不是分布的。
4.如何利用github搭建自己的个人网站？
第一步：打开github官网：github.com
第二步：点击sign up for github注册自己的geithub账号并登录
第三步：点击start a project，开始创建工程文件
第四步：输入自己的Repository name,格式为“github.com”或者“**github.io”，其中就是自己起个名字。到时候会是你自己个人主页的网址的一部分，如笔者起的名字是xiaoming
第五步：其他选项都不用动，直接点击creat Repository 进入下一步点击之后来到下图的界面，点击sittings选项
第六步：点击sitings菜单下面的launch automatic page generator按钮，进入下一步
第七步：此时下面输入框里面显示的是将来会显示在你个人主页上的内容，你可以更改，稍后系统会自动根据这些内容帮你生成html代码
第八步：点击页面最下方的continue to layouts 进入下一步
第九步：在这里选择自己喜欢的模板，笔者选择第四个，界面下方是你的个人主页预览，点击publish page就完成了
第十步：生成了如下文件，你可以在index.html中更改代码以改变你的个人主页显示内容以及方式
第十一步：你的个人主页已经设置好了，那么你的主页网址是多少呢，如果忘记了刚才自己设置的网址，可以按以下方法找到，很简单 点击settings选项，一直往页面下面拉，有个github pages 下面就是你的个人主页网址，复制到地址栏打开就可以了
5.如何配置nginx，实现在手机上查看页面？
静态HTTP服务器
Nginx是一个HTTP服务器，可以将服务器上的静态文件（如HTML、图片）通过HTTP协议展现给客户端,在测试产品的时候,浏览器就是客户端,nginx就是虚拟服务器
反向代理
客户端本来可以直接通过HTTP协议访问某网站应用服务器，网站管理员可以在中间加上一个Nginx，客户端请求Nginx，Nginx请求应用服务器，然后将结果返回给客户端，此时Nginx就是反向代理服务器。
负载均衡
将一个应用部署在多台服务器上,当大量的请求访问时,nginx可以将这些请求均衡的分发到其他的服务器,保证服务器的正常运转
6.如何将代码部署至自己的服务器？
将代码部署到自己服务器上面的一个过程，就是上传代码的过程，并且能成功访问自己写的代码，通过上传的一个工具，使代码能成功上传，
然后通过url，这里的url都是有规则的，github上面是https://github.com/——然后跟着自己的ID， 学员服务器上面：http://119.10.57.69:880/jnshu3950/jnshu/index.html是像这个样子， 首先通过前面的URL，然后一层一层的找到文件夹，最后找到html文件。
返回列表
评论