web前端开发笔记(1)

时间:2021-03-28 00:08:54

 一、HTML标签书写有哪些规范?

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

二、Http状态码

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

  304 Not Modified:
  客户端有缓冲的文档并发出了一个条件性的请求(一般是提供If-Modified-Since头表示客户只想比指定日期更新的文档)。服务器告诉客户,原来缓冲的文档还可以继续使用。

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

  403 Forbidden:
  资源不可用。

  404 Not Found:
  无法找到指定位置的资源。

  500 Internal Server Error:
  服务器遇到了意料不到的情况,不能完成客户的请求。

  501 Not Implemented:
  服务器不支持实现请求所需要的功能。例如,客户发出了一个服务器不支持的PUT请求。

三、css有几种引入方式?每一种具有哪些特点?

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

四、圣杯布局

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

  圣杯布局:写结构时要先写中间盒子,因为中间盒子要优先渲染。通过浮动,定位来实现。

五、常见兼容性问题

  *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 {}

六、跨域

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

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

七、js和java的关系

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

八、css样式合并

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

九、盒子模型

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

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

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

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

十、js引入方式

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

十一、js命名规范

  1. 区别大小写。
  2. 首字符必须是字母、下划线或美元符号。
  3. 除了首字符以外的字符,可以由数字、字母、下划线、美元符号等组成。
  4. 不允许包含空格。
  5. 不能以关键字或保留字命名。
  6. 变量名必须为小写字母。
  7. 类的命名使用骆驼命名规则。
  8. 简写单词不能使用大写名称作为变量名。
  9. 方法的命名必须为动词或动词短语。
  10. 公有类的命名必须使用混合名称命名。
  11. css变量的命名必须使用其对应的相同的公共类变量。
  12. 私有类的变量属性成员必须使用混合名称命名,并在前面划下划线。
  13. 变量如果设置为私有,则前面必须添加下划线。
  14. 通用的变量必须使用与其名字一致的类型命名。
  15. 所有的变量名必须使用英文名称。
  16. 变量如有较广的作用域,必须使用全局变量,此时可以设计成一个类的成员。相对的如作用域较小或为私有变量则使用简洁的单词命名。
  17. 如果变量有其隐含的返回值,则避免使用其相似的方法。
  18. 公有变量必须清楚的表达其自身的属性,避免字义含糊不清。
  19. 类构造函数可以使用扩展其基类的名称命名,这样可以正确、迅速的找到其基类的名称。

十二、js书写规范

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

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

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

十四、js数据类型有哪些

  1. Number 数字类型
  2. String 字符串类型
  3. Boolean 布尔类型
  4. Function 函数
  5. Object 对象
  6. Null 空值
  7. Undefined 没有定义类型

十五、浏览器的内核分别是什么?

  IE浏览器的内核Trident、Mozilla的Gecko、Chrome的Blink(WebKit的分支)、Opera内核原为Presto,现为Blink;

十六、语义化的理解

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

十七、谈谈this对象的理解

  this是js的一个关键字,随着函数使用场合不同,this的值会发生变化。 但是有一个总原则,那就是this指的是调用函数的那个对象。 this一般情况下:是全局对象Global。 作为方法调用,那么this就是指这个对象。

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

  1. 可以开发前规定命名规范,根据不同开发人员开发的功能在函数前加前缀
  2. 将每个开发人员的函数封装到类中,调用的时候就调用类的函数,即使函数重名只要类名不重复就ok

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

  解决方案有:文件合并、文件最小化/文件压缩、使用CDN托管、缓存的使用(多个域名提供缓存)等等。
  目前有很多前端自动化工具有整合文件的功能,比如gulp,我曾经写过一篇利用gulp解决微信浏览器缓存问题的文章,里面有写到如何合并压缩css、js文件,此类文章网上也有很多,大家有兴趣可以去看一下。

二十、什么是全局变量,什么是局部变量。

  将函数理解为盒子。

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

  在函数外部声明的变量,就是全局变量,在函数内部可以访问。

欢迎留言~~

web前端开发笔记(2)

web前端开发笔记(1)的更多相关文章

  1. web前端开发笔记(2)

    一.什么是作用域. 所有变量都存在于一个执行环境中(也称作用域),这个执行环境决定了变量的生命周期,以及哪一部分代码可以访问其中的变量.总结: 执行环境有全局执行环境和函数执行环境. 每次进入一个新执 ...

  2. MOOC web前端开发笔记(一)

    网站和网页 网站 互联网上用于展示特定内容的相关网页的集合. 网页 网站中的一页,一个网站中的网页通过"超链接"的方式被组织在一起. 主页 进入网站看到的第一个网页,主页的文件名通 ...

  3. MOOC web前端开发笔记(二)

    HTML HTML概述 HTML(HyperText MarkUp Language) "超文本标记语言",以标签的形式规定网页结构,它是制作网页的标准语言 HTML不区分大小写 ...

  4. 《编写高质量代码--Web前端开发修炼之道》读书笔记

    前言 这两周参加公司的新项目,采用封闭式开发(项目成员在会议室里开发),晚上加班到很晚,所以没时间和精力写原创博客了,今天就分享下这篇<编写高质量代码--Web前端开发修炼之道>读书笔记吧 ...

  5. web前端开发最佳实践笔记

    一.文章开篇 由于最近也比较忙,一方面是忙着公司的事情,另外一方面也是忙着看书和学习,所以没有时间来和大家一起分享知识,现在好了,终于回归博客园的大家庭了,今天我打算来分享一下关于<web前端开 ...

  6. &lbrack;读书笔记&rsqb; Web 前端开发修炼之道

    原创地址:http://www.cnblogs.com/bnbqian/p/3735565.html 转载请注明出处 今天我们要读的书是Web 前端开发修炼之道 第1章 从网站重构说起 1.1 糟糕的 ...

  7. 《编写高质量代码:Web 前端开发修炼之道》 笔记与读后感

    编写高质量代码:Web 前端开发修炼之道/曹刘阳著. —北京:机械工业出版社,2010.5 第一版 涉及到的知识点: 1. CSS Sprites 在国内很多人叫css精灵,是一种网页图片应用处理方式 ...

  8. Web前端学习笔记&lpar;001&rpar;

    ....编号    ........类别    ............条目  ................明细....................时间 一.Web前端学习笔记         ...

  9. 最新传智播客web前端开发39期视频教程【完整版】

    本套视频为传智2018web前端开发全套视频教程基础班+就业班,视频+源码+案例笔记,全套高清不加密~2018最新传智播客视频! 本教程是实战派课程!为传智最新web前端39期,挑战全网最全视频,没有 ...

随机推荐

  1. C&num;设计模式-单例模式

    单例模式三种写法: 第一种最简单,但没有考虑线程安全,在多线程时可能会出问题…… public class Singleton { private static Singleton _instance ...

  2. Flex编译程序出现 Could not find compiled resource bundle &&num;39&semi;SharedResources&&num;39&semi; for locale &&num;39&semi;en&lowbar;US&&num;39&semi;&period;

    Flex编译程序出现 Could not find compiled resource bundle 'SharedResources' for locale 'en_US'. 而且静态类居然为nul ...

  3. SQL拼接备份数据库

    在SQLserver使用脚本备份数据库的时候需要注意的问题是: 1.指向的文件名必须是有读写权限. 2.在使用批量数据库备份时候需要根据自己需求选择性备份. -- ================== ...

  4. DNS&comma;ARP&comma;RARP&comma;NAT&comma;WINS的作用和区别

    DNS 域名服务系统,是将域名(比如www.cnblogs.com)转成ip地址.arp 地址转换协议,是将ip地址转成mac地址(物理地址,可用ipconfig /all查看).rarp从mac转到 ...

  5. 洗礼灵魂,修炼python(3)--从一个简单的print代码揭露编码问题,运行原理和语法习惯

    前期工作已经准备好后,可以打开IDE编辑器了,你可以选择python自带的IDLE,也可以选择第三方的,这里我使用pycharm--一个专门为python而生的IDE 按照惯例,第一个python代码 ...

  6. python中yield的用法

    ---"在python中,当你定义一个函数,使用了yield关键字时,这个函数就是一个生成器" (也就是说,只要有yield这个词出现,你在用def定义函数的时候,系统默认这就不是 ...

  7. InstallShield :cannot rename directory &period;&period;&period;

    InstallShield项目编译的生成目录文件夹需要关闭.

  8. JS传递函数并且调用

    封装的函数: function getDataByJsonP(methName, inData, fn) { // 这里fn可以直接传入函数名字 $.ajax({ url: '', //请求的url地 ...

  9. 三、cent OS安装配置nginx

    简介Tengine是淘宝发起的web服务器项目,简单的讲就是对nginx进行了二次开发并提供了更丰富的功能,官网地址:http://tengine.taobao.org/ 下载nginx这里使用淘宝二 ...

  10. volatile关键字在多线程中的作用