以后这个作为本人的前端知识库,只要学到一点东西就更新一下
* about HTML
HTML:超文本标记语言(Hyper Text Markup Language),标准通用标记语言下的一个应用。HTML 不是一种编程语言,而是一种标记语言 (markup language),是网页制作所必备的,“超文本”就是指页面内可以包含图片、链接,甚至音乐、程序等非文字元素。超文本标记语言(或超文本标签语言)的结构包括“头”部分(英语:Head)、和“主体”部分(英语:Body),其中“头”部提供关于网页的信息,“主体”部分提供网页的具体内容。
1.你是如何理解HTML语义化的?
HTML语义化是正确的标签做正确的事情,能够便于开发者阅读和写出更优雅的代码的同时,让网络爬虫更好的解析。
2.为什么要做到语义化?
有利于SEO,有利于搜索引擎爬虫更好的解析我们的页面,从而获取更多的有效信息,提升网页的权重。
在没有CSS的时候,能够清晰看出网页的结构,增强可读性。
便于团队合作开发和维护,提高开发效率
文档声明,它不是HTML标签,是一个指示web浏览关于页面使用哪个HTML版本编写的指令。 声明必须位于文档的第一行,位于标签之前。
4.lang属性设定文档语言。
作用:SEO搜索引擎优化;有助于阅读障碍人士,通过读屏器阅读页面
还可以是
5.meta标签的几种用法。
6.你用过哪些 HTML5标签
a.内容性的标签:
* about CSS
CSS:层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。 CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力
1.两种盒模型。
盒模型一共有两种模式,一种是标准模式,另一种就是怪异模式。
当你用编辑器新建一个html页面的时候你一定会发现最顶上都会有一个DOCTYPE标签,例如:
以上几种DOCTYPE都是标准的文档类型,无论使用哪种模式完整定义DOCTYPE,都会触发标准模式,而如果DOCTYPE缺失则在ie6,ie7,ie8下将会触发怪异模式(quirks 模式)。首先定义一个div块用来演示标准模式和怪异模式的区别,以下是Css样式:box { width: 200px; height: 200px; border: 20px solid black; padding: 50px; margin: 50px; }
在标准模式下的盒模型,盒子总宽度/高度=width/height+padding+border+margin
在怪异模式下的盒模型,盒子的总宽度和高度是包含内边距padding和边框border宽度在内的,盒子总宽度/高度=width/height + margin = 内容区宽度/高度 + padding + border + margin;也就是盒子宽高 = 内容区域的宽高+padding+border;
在此基础上介绍一下css3属性box-sizing; box-sizing有两个值一个是content-box,另一个是border-box。当设置为box-sizing:content-box时,将采用标准模式解析计算,也是默认模式;当设置为box-sizing:border-box时,将采用怪异模式解析计算;目前使用此属性需要添加前缀:-webkit-box-sizing: content-box; -moz-box-sizing: content-box;
标准盒模型的缺点是,盒子的宽度和高度计算复杂(两子元素并排例子)
怪异盒模型的优点,当确定了width/height之后,可以随意修改padding和border的厚度值,而不用担心父容器被撑爆。
2.如何实现水平和垂直居中?
https://www.cnblogs.com/yugege/p/5246652.html(个人觉得他写的很好,有时间了借鉴一下)
* about JS
在JavaScript中,prototype对象是实现面向对象的一个重要机制。
每个函数就是一个对象(Function),函数对象都有一个子对象 prototype对象,类是以函数的形式来定义的。prototype表示该函数的原型,也表示一个类的成员的集合。
constructor 是一种用于创建和初始化class创建的对象的特殊方法。
* 有关长按保存图片的功能
1.使用CSS属性
-webkit-touch-callout:default;
可以编辑使改元素长按可保存,但是注意着只是写入了 草案的一个属性。但是在实际使用中并没有发现问题
2. 在需要对元素垂直居中的时候可以使用
position:absolute;
top:50%;
tranform:translateY(-50%)
使用元素垂直居中,因为transform 百分比对应的是自己的高度,而margin 对应的是父容器高度
3.CameraRoll模块
CameraRoll模块提供了访问本地相册的功能。在iOS上使用这个模块之前,你需要先链接RCTCameraRoll库
链接原生库:并不是所有的APP都需要使用全部的原生功能,包含支持全部特性的代码会增大应用的体积。但我们仍然希望能让你简单地根据自己的需求添加需要的特性。
在这种思想下,我们把许多特性都发布成为互不相关的静态库。
大部分的库只需要拖进两个文件就可以使用了,偶尔你还需要几步额外的工作,但不会再有更多的事情要做了。
我们随着React Native发布的所有库都在仓库中的Libraries文件夹下。其中有一些是纯Javascript代码,你只需要去require它们就可以使用了。另外有一些库基于一些原生代码实现,你必须把这些文件添加到你的应用,否则应用会在你使用这些库的时候产生报错。
添加包含原生代码的库需要几个步骤:
自动链接
第一步
安装一个带原生依赖的库:
$ yarn add 某个带有原生依赖的库
第二步
运行以下命令,它会根据package.json文件中的dependencies和devDependencies记录来链接所有需要链接的库(注意一些老的教程和文档可能会提到rnpm link命令,此命令已过期不再使用,由下面这个命令代替):
$ react-native link
如果只需要链接某一个库:
$ react-native link 某已安装的具体库名
好了!现在原生依赖就成功地链接到你的iOS/Android项目了。
可以参考:https://reactnative.cn/docs/0.50/cameraroll.html
在JavaScript中,prototype对象是实现面向对象的一个重要机制。
每个函数就是一个对象(Function),函数对象都有一个子对象 prototype对象,类是以函数的形式来定义的。prototype表示该函数的原型,也表示一个类的成员的集合。
* about Img与background的区别
一、从解析机制看
Img属于html标签,background是css方法。一个页面由html、css、js组成,按照浏览器解析机制,html标签优先解析。大家都知道css文件会放在head加载,但是这并不意味着它会立即执行,而是在html加载完后才执行的。所以重要的元素,如logo就应该使用img
如果仅仅是为了显示一张图片,比如banner、广告图等,建议采用background方式。因为不重要的自动往后排,避免占用带宽,造成数据阻塞。
如果图片很多,这里又出现一个新的问题,不同的浏览器支持的并发加载数量是不一样的,(最新测试)IE是10个,FF是10个,图片多,就会出现严重的延迟或者404,因为图片加载慢会影响到页面主要数据呈现,那么让用户看到的都是空白,你好意思让他继续等下去吗!所以,如果不采用lazyload还是采用background比较好。
Img标签优点是自闭和,可以避免空标签出现(空标签也是w3c验证的内容之一)。采用background方式就会出现空标签,bootstrap中的icon都是用i标签加入的,而i标签中是空内容,这样就产生了空标签(并不是说这样做不好)。
二、从SEO角度看
刚才说了,Img标签是自闭和的,不能添加文本内容,但是,Img有一个alt属性,而且这个属性在w3c标准中,要求必须有,这样做的优点还是很多的。
第一,图片比较大,或者用户网速比较窝火的时候,加载失败了,至少还有文字提示告诉用户这里是个什么内容的图片。如果用户非要看这个图,那就多刷几次去加载。另外,alt属性有利于辅助阅读,尤其是对盲人朋友,他们使用阅读器浏览页面,如果没有文本提示,就太不厚道了。
第二,alt属性有利于SEO,搜索引擎实现很好的图像识别还是有一段路要走。
当然缺点也是有滴:
第一,Img加载的图片是通过src拿到的,如果HTML代码不允许修改,那怎么换图,只有同名文件替换,但是有可能遇到304状态,需要服务器端做相应的设置。这时background的优点就出来了,换皮肤就是这个栗子。
第二,如果图片显示区域空间大小是预留的,那么图片必须和预留的空间一致,否则图片要么被拉伸要么被压缩,都不是等比例操作。当然,避免这种问题就需要前端和视觉设计师遵守一定的规范。
三、语义化角度
Background和语义化不沾边了,Img是HTML标签,语义明确。
建议:重要的需要优先加载的图片最好采用img。不重要的图片最好采用background。
做SEO是最方便的还是background,图片是放在背景上的,前景写内容,两不误。如果不想让内容显示出来,就加text-indent, -99999你懂的。(以前有这种玩法,是搜索引擎算法单一的年代,关键字比重高 排名就靠前)。
刚才提了一下bootstrap的background方法,bootstrap的做法是用background设置icon,icon的使用太灵活了,所以必须模块化,语义化先靠边站,鱼与熊掌不可兼得。PS:bootstrap v3之后采用了icon font
其次icon的重要性真不高,放在最后加载还减少了带宽占用量,提高PV速度。
img标签语义很明确不能乱用,所以bootstrap采用无语义的i标签来设置icon也挺好。PS:自己项目中使用无语义标签要注意是否向前兼容,要关注HTML5中的定义。
* about 开源
像git中提交代码的步骤:
1.git diff
2.git add .
3.git commit -m "first test"
4.git push origin master
如果有报错,报错信息:”nothing to commit, working tree clean”,那么安装 hexo-deployer-git 就行了:npm install hexo-deployer-git。