web前端开发笔记(1)
一、HTML标签书写有哪些规范?
- 页面编码。
- 文档声明。
- 关键字与描述。
- 行内元素不能包含块级元素。
- a标签不能嵌套a标签。
- 标签名和属性必须用小写字母书写,属性必须加引号,标签必须闭合,单标签页必须闭合。
- 页面中不要用 进行缩进,如需缩进,用css控制。
- html标签使用必须语义化。
- 要为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有几种引入方式?每一种具有哪些特点?
- 标签内引入:优先级最高,冗余代码多,代码量大,不易维护。
- 头部引入:加载速度快,没有服务器请求压力,相对于单页代码量少。代码量大,不易前后台沟通,不易改版与维护。
- 外部引入:一个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引入方式
- 使用<script></script>标签直接嵌入网页,一般放在head标签内,亦可以放在body标签内,只要保证这些代码在被调用前已读取并加载到内存即可。
- 使用外部的js文件,这样的好处是实现表现行为的分离、w3c非常提倡页面、样式、行为都分离,这样页面结构清晰,方便维护和团队的开发。在外部js文件中直接写js代码,引入方式是:<script type="text/javascript" src="a.js"></script>
- 直接作为某个标签的事件代码:<input type="button" value="确定" onclick="documet.write('hello')"/>
十一、js命名规范
- 区别大小写。
- 首字符必须是字母、下划线或美元符号。
- 除了首字符以外的字符,可以由数字、字母、下划线、美元符号等组成。
- 不允许包含空格。
- 不能以关键字或保留字命名。
- 变量名必须为小写字母。
- 类的命名使用骆驼命名规则。
- 简写单词不能使用大写名称作为变量名。
- 方法的命名必须为动词或动词短语。
- 公有类的命名必须使用混合名称命名。
- css变量的命名必须使用其对应的相同的公共类变量。
- 私有类的变量属性成员必须使用混合名称命名,并在前面划下划线。
- 变量如果设置为私有,则前面必须添加下划线。
- 通用的变量必须使用与其名字一致的类型命名。
- 所有的变量名必须使用英文名称。
- 变量如有较广的作用域,必须使用全局变量,此时可以设计成一个类的成员。相对的如作用域较小或为私有变量则使用简洁的单词命名。
- 如果变量有其隐含的返回值,则避免使用其相似的方法。
- 公有变量必须清楚的表达其自身的属性,避免字义含糊不清。
- 类构造函数可以使用扩展其基类的名称命名,这样可以正确、迅速的找到其基类的名称。
十二、js书写规范
- 文件编码统一为UTF-8。
- 书写过程中,每行代码结束必须有分号。
- 库引入,原则上仅引入jQuery库。
- 代码结构明了化,加适量注释,提高函数重用率。
- 注重与html分离,减少reflow,注重性能。
- 把外部js文件放在html底部,</body>前面。
- 优化循环。循环体中若有DOM操作,应该把DOM操作提到循环体外,在同一作用域内,DOM选择赋值给一局部变量。
- 避免混乱,建议在html中使用双引号,在js中使用单引号。
- 使用更简单的格式写innerscript。
- 避免混入其它技术,js不直接控制css样式的设置,控制classname。
- 避免全局变量。
- 声明变量总是用var。
- 获取对象属性的时候用方括号。
- 避免使用eval()方法。
- 不要省略 " 和 {}。
十三、Doctype作用? 严格模式与混杂模式如何区分?它们有何意义?
- <!DOCTYPE> 声明位于文档中的最前面,处于 <html> 标签之前。告知浏览器的解析器, 用什么文档类型 规范来解析这个文档。
- 严格模式的排版和 JS 运作模式是 以该浏览器支持的最高标准运行。
- 在混杂模式中,页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。
- DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。
十四、js数据类型有哪些
- Number 数字类型
- String 字符串类型
- Boolean 布尔类型
- Function 函数
- Object 对象
- Null 空值
- Undefined 没有定义类型
十五、浏览器的内核分别是什么?
IE浏览器的内核Trident、Mozilla的Gecko、Chrome的Blink(WebKit的分支)、Opera内核原为Presto,现为Blink;
十六、语义化的理解
用正确的标签做正确的事情! html语义化就是让页面的内容结构化,便于对浏览器、搜索引擎解析; 在没有样式CCS情况下也以一种文档格式显示,并且是容易阅读的。 搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重,利于 SEO。 使阅读源代码的人对网站更容易将网站分块,便于阅读维护理解。
十七、谈谈this对象的理解
this是js的一个关键字,随着函数使用场合不同,this的值会发生变化。 但是有一个总原则,那就是this指的是调用函数的那个对象。 this一般情况下:是全局对象Global。 作为方法调用,那么this就是指这个对象。
十八、规避javascript多人开发函数重名问题
- 可以开发前规定命名规范,根据不同开发人员开发的功能在函数前加前缀
- 将每个开发人员的函数封装到类中,调用的时候就调用类的函数,即使函数重名只要类名不重复就ok
十九、你如何对网站的文件和资源进行优化?
解决方案有:文件合并、文件最小化/文件压缩、使用CDN托管、缓存的使用(多个域名提供缓存)等等。
目前有很多前端自动化工具有整合文件的功能,比如gulp,我曾经写过一篇利用gulp解决微信浏览器缓存问题的文章,里面有写到如何合并压缩css、js文件,此类文章网上也有很多,大家有兴趣可以去看一下。
二十、什么是全局变量,什么是局部变量。
将函数理解为盒子。
在函数内声明的变量,就是局部变量,在函数外部不能访问。
在函数外部声明的变量,就是全局变量,在函数内部可以访问。
欢迎留言~~
web前端开发笔记(1)的更多相关文章
- web前端开发笔记(2)
一.什么是作用域. 所有变量都存在于一个执行环境中(也称作用域),这个执行环境决定了变量的生命周期,以及哪一部分代码可以访问其中的变量.总结: 执行环境有全局执行环境和函数执行环境. 每次进入一个新执 ...
- MOOC web前端开发笔记(一)
网站和网页 网站 互联网上用于展示特定内容的相关网页的集合. 网页 网站中的一页,一个网站中的网页通过"超链接"的方式被组织在一起. 主页 进入网站看到的第一个网页,主页的文件名通 ...
- MOOC web前端开发笔记(二)
HTML HTML概述 HTML(HyperText MarkUp Language) "超文本标记语言",以标签的形式规定网页结构,它是制作网页的标准语言 HTML不区分大小写 ...
- 《编写高质量代码--Web前端开发修炼之道》读书笔记
前言 这两周参加公司的新项目,采用封闭式开发(项目成员在会议室里开发),晚上加班到很晚,所以没时间和精力写原创博客了,今天就分享下这篇<编写高质量代码--Web前端开发修炼之道>读书笔记吧 ...
- web前端开发最佳实践笔记
一.文章开篇 由于最近也比较忙,一方面是忙着公司的事情,另外一方面也是忙着看书和学习,所以没有时间来和大家一起分享知识,现在好了,终于回归博客园的大家庭了,今天我打算来分享一下关于<web前端开 ...
- [读书笔记] Web 前端开发修炼之道
原创地址:http://www.cnblogs.com/bnbqian/p/3735565.html 转载请注明出处 今天我们要读的书是Web 前端开发修炼之道 第1章 从网站重构说起 1.1 糟糕的 ...
- 《编写高质量代码:Web 前端开发修炼之道》 笔记与读后感
编写高质量代码:Web 前端开发修炼之道/曹刘阳著. —北京:机械工业出版社,2010.5 第一版 涉及到的知识点: 1. CSS Sprites 在国内很多人叫css精灵,是一种网页图片应用处理方式 ...
- Web前端学习笔记(001)
....编号 ........类别 ............条目 ................明细....................时间 一.Web前端学习笔记 ...
- 最新传智播客web前端开发39期视频教程【完整版】
本套视频为传智2018web前端开发全套视频教程基础班+就业班,视频+源码+案例笔记,全套高清不加密~2018最新传智播客视频! 本教程是实战派课程!为传智最新web前端39期,挑战全网最全视频,没有 ...
随机推荐
- 10 -- 深入使用Spring -- 5...2 在Spring中使用Quartz
10.5.2 在Spring中使用Quartz Spring 的任务调度抽象层简化了任务调度,在Quartz基础上提供了更好的调度抽象.本系统使用Quartz框架来完成任务调度,创建Quartz的作业 ...
- flexbox子盒子align-self属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- iframe设置高度为100%
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- ios开发之-- 延迟执行方法
延迟执行的几种方法,分享一下. 1.performSelector(NSObject)方法 2.NSTimer方法 3.GCD方法 4.sleep(NSThread)方法 1.performSe ...
- U3D调用7z解压文件
using UnityEngine; using System; using System.IO; using System.Diagnostics; public class Test : Mono ...
- 嵌入式ROOTFS transplantation
作一个嵌入式Linux rootfs,并且实现 web 服务 1. 文件系统简介 •理论上说一个嵌入式设备如果内核能够运行起来,且不需要运行用户进程的话,是不需要文件系统的,文件系统简单的说就是一种目 ...
- 在wepy里面使用redux
wepy 框架本身是支持 Redux 的,我们在构建项目的时候,将 是否安装 Redux 选择 y 就好了,会自动安装依赖,运行项目后看官方给的 demo 确实是可以做到的,但是官方文档里却对这一块只 ...
- 微信小程序 禁止ios页面下拉下滑滚动 出现空白的情况
项目需要做了一个图片拖动指定组件上删除,和排序的功能android测试正常, ios会出现拖动图片页面也跟着下滑的尴尬情况. 查文档下拉刷新配置默认是关闭的,后经查找文档发现在本页面page.json ...
- CCOMBOX下拉弹出框,因属性对话框自动隐藏而弹出框没有隐藏问题
关于这个问题是可以使用 使其失去焦点 releasecapture()解决的,但是鼠标在下拉列表中的item中经过时,调用releasecapture()后会选中最后mousemove过的item项. ...
- iOS - 布局NSLayoutConstraint动画的实现
抛出问题:为何在用到用到constraint的动画时以下代码无法实现动画的功能 ,没有动画直接刷新UI跳到80 - (void)touchesBegan:(NSSet<UITouch *> ...