web前端开发初学者十问集锦.docx

上传人:b****6 文档编号:12058339 上传时间:2023-06-04 格式:DOCX 页数:54 大小:626.95KB
下载 相关 举报
web前端开发初学者十问集锦.docx_第1页
第1页 / 共54页
web前端开发初学者十问集锦.docx_第2页
第2页 / 共54页
web前端开发初学者十问集锦.docx_第3页
第3页 / 共54页
web前端开发初学者十问集锦.docx_第4页
第4页 / 共54页
web前端开发初学者十问集锦.docx_第5页
第5页 / 共54页
web前端开发初学者十问集锦.docx_第6页
第6页 / 共54页
web前端开发初学者十问集锦.docx_第7页
第7页 / 共54页
web前端开发初学者十问集锦.docx_第8页
第8页 / 共54页
web前端开发初学者十问集锦.docx_第9页
第9页 / 共54页
web前端开发初学者十问集锦.docx_第10页
第10页 / 共54页
web前端开发初学者十问集锦.docx_第11页
第11页 / 共54页
web前端开发初学者十问集锦.docx_第12页
第12页 / 共54页
web前端开发初学者十问集锦.docx_第13页
第13页 / 共54页
web前端开发初学者十问集锦.docx_第14页
第14页 / 共54页
web前端开发初学者十问集锦.docx_第15页
第15页 / 共54页
web前端开发初学者十问集锦.docx_第16页
第16页 / 共54页
web前端开发初学者十问集锦.docx_第17页
第17页 / 共54页
web前端开发初学者十问集锦.docx_第18页
第18页 / 共54页
web前端开发初学者十问集锦.docx_第19页
第19页 / 共54页
web前端开发初学者十问集锦.docx_第20页
第20页 / 共54页
亲,该文档总共54页,到这儿已超出免费预览范围,如果喜欢就下载吧!
下载资源
资源描述

web前端开发初学者十问集锦.docx

《web前端开发初学者十问集锦.docx》由会员分享,可在线阅读,更多相关《web前端开发初学者十问集锦.docx(54页珍藏版)》请在冰点文库上搜索。

web前端开发初学者十问集锦.docx

web前端开发初学者十问集锦

web前端开发初学者十问集锦

1.script标签可以放置在什么位置

答:

script标签可以放置在html文件的任何地方(anywhere),比如既可以放置在html标签外,也可以放置在head内,也可以放置在body内,也可以放置在meta内。

如下所示:

html标签外:

document.write("

HelloWorld!

")

head内:

document.write("

HelloWorld!

")

body内:

document.write("

HelloWorld!

")

meta内:

document.write("

HelloWorld!

")

2.script标签应该放置在什么位置,有什么区别?

我们知道,script标签可以放置在html文档的任何位置。

那实际使用中,应该放置在什么位置呢?

区别:

不同的位置,其区别主要是javascript脚本加载执行的顺序。

浏览器对于html文件的解析是由上往下线性加载并解析,

HelloWorld!

alert("页面已加载5!

");

用浏览器打开html文件会,依次弹出:

“页面已加载1!

”,“已加载3!

”,“页面已加载5!

”和”页面已加载2”。

即body的onload事件在整个html文件加载完成时才会被触发。

**注意:

**Javascript的具名函数(也就是具有名字的函数)在页面加载时是不会被执行的,必须显示调用才会被执行。

如上面body的onload事件显示调用functionload()。

4.Javascript脚本定义的全局变量和函数可以跨script标签调用吗?

对于全局变量和函数都可以跨script标签调用。

但是全局变量和函数二者的区别在于:

对于全局变量,不管是在同一个script还是在不同的script,使用时前面必须已经定义。

但是对于函数而言,同一个script内可以先使用,后定义。

DOCTYPEhtml>

5.js中null和”“空串的区别?

本质上,null是空对象,它的类型是Object。

alert(typeof(null));会输出object;

“”是一个空字符串,alert(typeof(“”));会输出string。

使用的区别上,null可以将任意类型的对象置空,将该对象的类型变成Object。

1

2

3

4

5

6

分别弹出:

null和object。

6.javascript中null和undefined的区别?

说null和undefined的区别之前先说明js中有哪些数据类型。

W3cschool中介绍了js有7大数据类型,分别为:

Undefined、Null、Boolean、Number、String,Array和Object。

但是要注意的是js中并没有Undefined和Null关键字。

undefined是Undefined类型的一个值,且Undefined类型只有undefined这一个值。

null是Null类型的一个值,且Null类型只有一个专用值null,即它的字面量。

null和undefined都是值,并非对象。

为什么typeof运算符对于null值会返回“object”。

这实际上是JavaScript最初实现中的一个错误,然后被ECMAScript沿用了。

还有一个需要注意的是:

值undefined实际上是从值null派生来的,因此ECMAScript把它们定义为相等的。

alert(null==undefined);//输出"true"

1

因此null和undefined的区别是null是Null类型的值,undefined是Undefined类型的值。

这里贴一张typeof运算符计算各种类型的变量时的返回值:

7.ECMAScript和JavaScript的区别

ECMAScript是一种由Ecma国际(前身为欧洲计算机制造商协会,英文名称是EuropeanComputerManufacturersAssociation)通过ECMA-262标准化的脚本程序设计语言。

ECMAScript是JavaScript的核心部分,ECMAScript描述了JavaScript的语法和基本对象;

除此之外,JavaScript的组成部分还有:

DOM描述了处理网页内容的方法和接口;

BOM描述了与浏览器进行交互的方法和接口。

也就是说尽管ECMAScript是一个重要的标准,但它并不是JavaScript唯一的部分,当然,也不是唯一被标准化的部分。

实际上,一个完整的JavaScript实现是由以下3个不同部分组成的:

核心(ECMAScript);

文档对象模型(DOM);

浏览器对象模型(BOM)。

图示为JavaScript的组成部分:

8.JavaScript如何定义类

Javascript本身并不支持面向对象,它没有访问控制符,它没有定义类的关键字class,它没有支持继承的extend或冒号,它也没有用来支持多态的虚函数以及virtual关键字。

不过,Javascript是一门灵活的语言,下面我们就看看没有关键字class的Javascript如何实现类定义,并创建对象。

如何在Javascript中定义类,创建类的对象,创建公有和私有的属性和方法,创建静态属性和方法,模拟构造函数,并且讨论了容易出错的this。

请参考:

JavaScript中定义类。

这篇文章写得全面易懂,让人豁然开朗,值得阅读。

9.JavaScript中方法可以有返回值吗?

JS中的方法可以有返回值。

因为js是弱类型语言,无需为方法显示指明返回值类型,直接使用return将返回值返回即可,例如:

functionadd(a,b){

returna+b;

}

alert(add(1,2));//3

1

2

3

4

如果函数里不写return,则函数会返回undefined,可以根据需要判断是否有返回值。

10.html颜色有哪几种表示方式?

主要有三种,

第一种:

rgb模式。

分为两种表示方式:

(1)十六进制表示。

如红色:

#ff0000,绿色:

#00ff00,蓝色:

#0000ff。

注意,十六进制不区分大小写;

(2)十进制或百分比形式:

如红色:

rgb(255,0,255)或者RGB(100%,0%,0%)。

注意rgb大小写均可;

如果增加Alpha不透明度的话,表示方式为:

红色:

rgba(255,0,255,1)或者RGBA(100%,0%,0%,1)。

Alpha不透明度的取值范围是0到1或者,不能使用百分比表示。

第二种:

hsl模式。

这个是CSS3新增的颜色表示方法。

其中,HSL色彩模式亦是工业界的一种颜色标准,分别对应色相(Hue),也叫色调、饱和度(Saturation)、明度(Lightness)。

三者的取值分别为:

Hue(色调)。

0(或360)表示红色,120表示绿色,240表示蓝色,也可取其他数值来指定颜色。

取值为:

0-360;

Saturation(饱和度)。

取值为:

0.0%-100.0%;

Lightness(亮度)。

取值为:

0.0%-100.0%。

比如红色的表示为:

hsl(0,%100,%50)。

亮度如果为100%,那么就变成了白色。

hsl不区分大小写。

如果加上Alpha不透明度,则红色可表示为hsla(0,%100,%50,1)。

第三种:

htlm预定义的颜色名称。

使用htlm预定义的颜色名称,如red,blue,green等。

1.html中行内元素可以设置宽高吗?

行内元素(如a标签),在文档流中的时候因为是行内元素所以无法设置宽高;而当设置了绝对定位或者浮动,会生成块级框(即变成块级元素),所以就可以设置宽高了。

2.img标签是行内元素为什么可以设置宽高?

准确来说,img是替换内联元素replacedinlineelement,属于inlineelement类目。

其特殊之处在于可以设置height/width/padding/margin,效果等于块级元素。

有一点需要注意的是,它在计算height/margin/width等值或在绝对定位的时候,有一些额外的规则。

比如设定了width但未设置height,img的height会根据图片的大小按比列缩放。

3.html中行内块元素与行内元素和块级元素的区别?

在W3Cschool中查看CSSdisplay属性的时候,发现display有一个取值为inline-block,其作用是将元素设置为行内块元素。

如下图:

那么这个行内块元素与行内元素和块级元素有什么区别呢?

首先说一下行内元素与块级元素的区别。

行内元素又称为“内联”元素。

在CSS框模型(又名盒子模型)中,一切元素皆为框(box,也称为”盒子”)。

行内元素对应行内框,块级元素对应块级框,又叫块框。

二者的区别在于:

(1)块级元素独占一行,行内元素不独占一行;

测试代码如下,IE10运行。

1pxsolidred;">sometext

1pxsolidred;">sometext2

1pxsolidred;">Somemoretext.

运行结果如下:

(2)块级元素可以通过CSSwidth、height、边框,垂直内边距和外边距设置框的尺寸,但行内元素不可以,行内元素的高和宽只能由其包含的内容的高和宽决定。

此外,行内框在一行中水平布置。

可以使用水平内边距、边框和外边距调整它们的间距。

但是,垂直内边距、边框和外边距不影响行内框的高度。

IE10测试,测试代码:

1pxsolidred;width:

150px;height:

150px;margin-bottom:

100px;">sometext

1pxsolidred;width:

150px;height:

50px;display:

block;">sometext2

1pxsolidred;width:

200px;height:

50px;">Somemoretext.

测试结果截图:

注意:

对于行内替换元素,也可以设置宽高和垂直方向的内外边距。

(3)块级元素可以包含行内元素或块级元素,行内元素最好不要包含块级元素。

因为不同浏览器有不同的容错处理,所以浏览器解析时可能会出错。

行内块元素:

顾名思义就是行内的块级元素,拥有块级元素的特性但是却不独占一行,是行内元素与块级元素的折衷产品,这也是它与行内元素和块级元素的区别。

其对应的框叫做行内块框。

4.CSS框模型中行框,块框,行内框,行内块框的理解。

由W3Cschool给出的框的定义可知:

行框:

由一行形成的水平框称为行框(LineBox);行框是指本行的一个虚拟的矩形框,是浏览器渲染模式中的一个概念,并没有实际显示。

行框高度等于本行内所有元素中行内框最大的值。

当有多行内容时,每行都会有自己的行框。

块框:

块级元素形成的框称为块框,又叫块级框。

如div、h1或p元素常常被称为块级元素。

这意味着这些元素显示为一块内容,即“块框”;

行内框:

行内元素形成的框称为行内框,如a、span元素形成的框。

注意,这里不要与行框相混淆。

行内块框:

由CSSdisplay属性设置为inline-block的行内块元素形成的框称为行内块框,又叫作行内块级框。

5.html中什么是替换元素,什么是非替换元素?

元素是文档结构的基础,在CSS中,每个元素生成了一个包含了元素内容的框(box,也译为“盒子”)。

但是不同的元素显示的方式会有所不同,例如

就不同,而

也不一样。

在文档类型定义(DTD)中对不同的元素规定了不同的类型,这也是DTD对文档之所以重要的原因之一。

从元素本身的特点来讲,可以分为替换和非替换元素。

替换元素:

替换元素就是浏览器根据元素的标签和属性,来决定元素的具体显示内容。

例如浏览器会根据标签的src属性的值来读取图片信息并显示出来,而如果查看(X)HTML代码,则看不到图片的实际内容;又例如根据标签的type属性来决定是显示输入框,还是单选按钮等。

(X)HTML中的