web前端开发笔记（1）

时间 2019-11-26

标签 web 前端开发笔记栏目 HTML 繁體版

原文原文链接

1、HTML标签书写有哪些规范？javascript

页面编码。
文档声明。
关键字与描述。
行内元素不能包含块级元素。
a标签不能嵌套a标签。
标签名和属性必须用小写字母书写，属性必须加引号，标签必须闭合，单标签页必须闭合。
页面中不要用 进行缩进，如需缩进，用css控制。
html标签使用必须语义化。
要为img标签填写alt和title属性。

2、Http状态码css

　　200 ok：
　　一切正常，对GET和POST请求的应答文档跟在后面html

　　304 Not Modified：
　　客户端有缓冲的文档并发出了一个条件性的请求（通常是提供If-Modified-Since头表示客户只想比指定日期更新的文档）。服务器告诉客户，原来缓冲的文档还能够继续使用。前端

　　400 Bad Request：
　　请求出现语法错误。java

　　403 Forbidden：
　　资源不可用。web

　　404 Not Found：
　　没法找到指定位置的资源。apache

　　500 Internal Server Error：
　　服务器遇到了意料不到的状况，不能完成客户的请求。gulp

　　501 Not Implemented：
　　服务器不支持实现请求所须要的功能。例如，客户发出了一个服务器不支持的PUT请求。跨域

3、css有几种引入方式？每一种具备哪些特色？浏览器

标签内引入：优先级最高，冗余代码多，代码量大，不易维护。
头部引入：加载速度快，没有服务器请求压力，相对于单页代码量少。代码量大，不易先后台沟通，不易改版与维护。
外部引入：一个css文件可控制多个页面，代码简洁，易于分工协做。有效利用缓存机制，外部引入中的href属性会给服务器形成请求的压力。

4、圣杯布局

　　实现圣杯布局实现的是三栏布局，两边的盒子宽度固定，中间盒子宽度自适应。

　　圣杯布局：写结构时要先写中间盒子，由于中间盒子要优先渲染。经过浮动，定位来实现。

5、常见兼容性问题

　　*png24位的图片在iE6浏览器上出现背景，解决方案是作成PNG8.。

　　* IE6双边距bug:块属性标签float后，又有横行的margin状况下，在ie6显示margin比设置的大。

　　浮动ie产生的双倍距离 #box{ float:left; width:10px; margin:0 0 0 10px;} 这种状况之下IE会产生20px的距离，解决方案是在float的标签样式控制中加入 ——_display:inline;将其转化为行内属性。(_这个符号只有ie6会识别)

　　* IE下,可使用获取常规属性的方法来获取自定义属性, 也可使用getAttribute()获取自定义属性; Firefox下,只能使用getAttribute()获取自定义属性. 解决方法:统一经过getAttribute()获取自定义属性.

　　* Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示, 可经过加入 CSS 属性 -webkit-text-size-adjust: none; 解决.

　　* 超连接访问事后hover样式就不出现了被点击访问过的超连接样式不在具备hover和active了解决方法是改变CSS属性的排列顺序: L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}

6、跨域

　　跨域指的是浏览器不能执行其它网站的脚本。它是由浏览器的同源策略形成的，是浏览器对javascript施加的安全限制。

　　解决办法：设置本域apache服务器的反向代理。

7、js和java的关系

　　java是一种严格的面向对象的程序设计语言，经常使用于开发基于Internet的应用程序。javascript是一种脚本语言，经常使用语网页中加强交互性和页面效果，以及进行数据校验等。java是sun公司的产品，而javascript是NetScape公司推出的，两者没有任何联系。

8、css样式合并

　　CSS样式合并，指的是一些不可分离的样式（按钮，图标等），将他们公共的样式部分进行合并，非公共的再次独立出来，以减少CSS文件的大小。

9、盒子模型

　　外边距、内边距和边框之间的关系，及IE8如下版本的浏览器中的盒模型。

　　ie 盒子模型和标准 w3c 盒子模型。

　　标准 w3c 盒子模型的范围包括 margin、border、padding、content，而且 content 部分不包含其余部分。

　　ie 盒子模型的范围也包括 margin、border、padding、content，和标准 w3c 盒子模型不一样的是：ie 盒子模型的 content 部分包含了 border 和 pading。

10、js引入方式

使用<script></script>标签直接嵌入网页，通常放在head标签内，亦能够放在body标签内，只要保证这些代码在被调用前已读取并加载到内存便可。
使用外部的js文件，这样的好处是实现表现行为的分离、w3c很是提倡页面、样式、行为都分离，这样页面结构清晰，方便维护和团队的开发。在外部js文件中直接写js代码，引入方式是：<script type="text/javascript" src="a.js"></script>
直接做为某个标签的事件代码：<input type="button" value="肯定" onclick="documet.write('hello')"/>

11、js命名规范

区别大小写。
首字符必须是字母、下划线或美圆符号。
除了首字符之外的字符，能够由数字、字母、下划线、美圆符号等组成。
不容许包含空格。
不能以关键字或保留字命名。
变量名必须为小写字母。
类的命名使用骆驼命名规则。
简写单词不能使用大写名称做为变量名。
方法的命名必须为动词或动词短语。
公有类的命名必须使用混合名称命名。
css变量的命名必须使用其对应的相同的公共类变量。
私有类的变量属性成员必须使用混合名称命名，并在前面划下划线。
变量若是设置为私有，则前面必须添加下划线。
通用的变量必须使用与其名字一致的类型命名。
全部的变量名必须使用英文名称。
变量若有较广的做用域，必须使用全局变量，此时能够设计成一个类的成员。相对的如做用域较小或为私有变量则使用简洁的单词命名。
若是变量有其隐含的返回值，则避免使用其类似的方法。
公有变量必须清楚的表达其自身的属性，避免字义含糊不清。
类构造函数可使用扩展其基类的名称命名，这样能够正确、迅速的找到其基类的名称。

12、js书写规范

文件编码统一为UTF-8。
书写过程当中，每行代码结束必须有分号。
库引入，原则上仅引入jQuery库。
代码结构明了化，加适量注释，提升函数重用率。
注重与html分离，减小reflow，注重性能。
把外部js文件放在html底部，</body>前面。
优化循环。循环体中如有DOM操做，应该把DOM操做提到循环体外，在同一做用域内，DOM选择赋值给一局部变量。
避免混乱，建议在html中使用双引号，在js中使用单引号。
使用更简单的格式写innerscript。
避免混入其它技术，js不直接控制css样式的设置，控制classname。
避免全局变量。
声明变量老是用var。
获取对象属性的时候用方括号。
避免使用eval()方法。
不要省略 " 和 {}。

十3、Doctype做用? 严格模式与混杂模式如何区分？它们有何意义?

<!DOCTYPE> 声明位于文档中的最前面，处于 <html> 标签以前。告知浏览器的解析器，用什么文档类型规范来解析这个文档。
严格模式的排版和 JS 运做模式是以该浏览器支持的最高标准运行。
在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点没法工做。
DOCTYPE不存在或格式不正确会致使文档以混杂模式呈现。

十4、js数据类型有哪些

Number 数字类型
String 字符串类型
Boolean 布尔类型
Function 函数
Object 对象
Null 空值
Undefined 没有定义类型

十5、浏览器的内核分别是什么？

　　IE浏览器的内核Trident、Mozilla的Gecko、Chrome的Blink（WebKit的分支）、Opera内核原为Presto，现为Blink；

十6、语义化的理解

　　用正确的标签作正确的事情！ html语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析；在没有样式CCS状况下也以一种文档格式显示，而且是容易阅读的。搜索引擎的爬虫依赖于标记来肯定上下文和各个关键字的权重，利于 SEO。使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。

十7、谈谈this对象的理解

　　this是js的一个关键字，随着函数使用场合不一样，this的值会发生变化。可是有一个总原则，那就是this指的是调用函数的那个对象。 this通常状况下：是全局对象Global。做为方法调用，那么this就是指这个对象。

十8、规避javascript多人开发函数重名问题

能够开发前规定命名规范，根据不一样开发人员开发的功能在函数前加前缀
将每一个开发人员的函数封装到类中，调用的时候就调用类的函数，即便函数重名只要类名不重复就ok

十9、你如何对网站的文件和资源进行优化？

　　解决方案有：文件合并、文件最小化/文件压缩、使用CDN托管、缓存的使用（多个域名提供缓存）等等。
　　目前有不少前端自动化工具备整合文件的功能，好比gulp，我曾经写过一篇利用gulp解决微信浏览器缓存问题的文章，里面有写到如何合并压缩css、js文件，此类文章网上也有不少，你们有兴趣能够去看一下。

二10、什么是全局变量，什么是局部变量。

　　将函数理解为盒子。

　　在函数内声明的变量，就是局部变量，在函数外部不能访问。

　　在函数外部声明的变量，就是全局变量，在函数内部能够访问。

欢迎留言~~

web前端开发笔记（2）