web前端应该知道的html+css知识点

1、HTML中定义表格的宽度用80px与80%的区别是什么？

px表示像素，%表示相对父级的大小。

2、简述DIV元素和SPAN元素的区别。

DIV默认情况下是分行显示，SPAN在同行显示。

3、在HTML页面布局中，position的值有哪几种？默认值又是什么？

1）position的五种值分别是static,relative,absolute,fixed,inherit

2）position的缺省值是static

4、怎样使一个宽为200px和高为200px的层垂直居中于浏览器中?

写出CSS样式代码。这里使用百分比和绝对定位，与外补丁负值的方法，负值的大小为其自身宽度高度一半。

5、CSS规范中

.（句点）后面跟一个名称代表什么含义？#（井号）后面跟一个名称代表什么含义？如果要对一个元素设置CSS样式（内嵌样式），应将CSS样式写在它的什么属性内？

1）.（句号）后面跟一个名称表示文档中所有class属性值包含这个名称的应用其样式，

2）#（井号）后面跟个名称表示文档中ID为此名称的元素应用其样式。

3）CSS样式写在style属性内。

6、CSS具体含义是什么？在网页制作中为什么要使用CSS技术?

CSS(Cascading Style Sheets)也叫层叠样式表，它是用来控制网页中一个或多个元素的外观。在网页制作中，使用样式表可以减少很多具有相同外观元素的重复设置工作，从而给网页的设计和维护带来了很大的方便;具体应用是：改变样式表中元素显示样式的定义，则在使用该样式表的所有网页中相应元素的显示样式都会自动发生改变。

7、CSS+DIV开发Web页面的优势有哪些？

1）CSS+DIV，这个网页设计模式中，DIV承担了网页的内容，CSS承担了网页的样式。这样就使网页的内容和样式的分离开来。有利于页面的维护升级。

2）有助于提高搜索引擎亲和力（快速找到需要的数据，而不是像在TABLE中一层层的查找）

3）有助于页面的重构(换皮肤如blog，直接套用另外一套样式就可以实现，而不用改动网页脚本。)

8、一个HTML文档必须包含三个元素，它们是head、body和哪个？

html

9、HTML中文档内联注释应该是以—>结尾

10、引用CSS样式，有哪几种方法？

1）导入一个已经存在的CSS文件

2）直接在HARD里声明一个CSS代码段：

3）直接在网页元素里声明使用CSS样式：style=”color:red;”

11、JavaScript中settimeout与setinteval两个函数的区别？

settimeout只执行一次，setInteval没有次数限制。

12、编写JavaScript脚本生成1-6之间的整数？

var NowFrame;

NowFrame=Math.random()*6+1//随机生成一个1-6之间的小数

NowFrame=parseInt(NowFrame)//把1-6之间的小数转化为整数

13、设置什么属性可以让一个DIV隐藏和显示？值分别是什么？

1）设置diasplay属性的值为none时，该层隐藏。

2）设置diasplay属性的值为block时，该层显示。

14、在JavaScript脚本中，isNaN的作用是什么？

isNaN的作用是判断值是否不是数字

15、JavaScript中获取某个元素有哪几种方式？

document.getElementById();此方法用于获得名为ID值的元素

document.myform.xxx;此方法按照层次结构来获取

document.getElementsByName();此方法用于获得所有的名字相同的元素

16、Ajax的优缺点都有什么？

Ajax的优点：

1）页面无刷新，用户体验非常好。

2）使用异步方式与服务器通信，具有更加迅速的响应能力。

3）可以把一些服务器负担的工作转到客户端，利用客户端闲置的能力来处理，减轻服务器负担，节约空间和宽带租用成本。并且减轻服务器的负担，ajax的原则是“按需取数据”，可以最大程度的减少冗余请求和响应对服务器造成的负担。

4）基于标准化并被广泛支持的技术，不需要下载插件或者小程序。

Ajax的缺点:

1）Ajax不支持浏览器back按钮。

2）安全问题，Ajax暴露了与服务器交互的细节。

3）对搜索引擎的支持比较弱。

4）破坏了程序的异常机制。

5）不容易调试。

17、简述一下Ajax的工作原理。

Ajax的核心是JavaScript对象XmlHttpRequest。该对象在Internet Explorer5中首次引入，它是一种支持异步请求的技术。简而言之，XmlHttpRequest使您可以使用JavaScript向服务器提出请求并处理响应，而不阻塞用户。

18、JavaScript中的数据类型有几种？分别是什么？

JavaScript中的数据类型有7种，分别是：

1）Number数字类型

2）String字符串类型

3）Boolean布尔类型

4）Function函数

5）Object对象

6）Null

7）Undefined没有定义类型

19、在JavaScript脚本中，表达式2+5+”8″得到的结果是什么？并说明原因。

因为2和5是数字类型，“8”是字符串类型，所以相加得到的结果是78。

20、编写JavaScript脚本隐藏一个超级链接真实的地址。

代码示例如下：

onMouseOut=’window.status=”Done”;’href=”http://www.affiliate-url-here.com”

target=”_blank”>LinkTextHere

21.对WEB标准以及W3C的理解与认识

标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外链css和js脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件，容易维护、改版方便，不需要变动页面内容、提供打印版本而不需要复制内容、提高网站易用性;

22.xhtml和html有什么区别

HTML是一种基本的WEB网页设计语言，XHTML是一个基于XML的置标语言

最主要的不同：

XHTML 元素必须被正确地嵌套。

XHTML 元素必须被关闭。

标签名必须用小写字母。

XHTML 文档必须拥有根元素。

23.Doctype? 严格模式与混杂模式-如何触发这两种模式，区分它们有何意义?

用于声明文档使用那种规范(html/Xhtml)一般为 严格 过度 基于框架的html文档

加入XMl声明可触发，解析方式更改为IE5.5 拥有IE5.5的bug

24.行内元素有哪些?块级元素有哪些?CSS的盒模型?

块级元素：div p h1 h2 h3 h4 form ul

行内元素: a b br i span input select

Css盒模型:内容，border ,margin，padding

25.CSS引入的方式有哪些? link和@import的区别是?

内联 内嵌 外链 导入

区别 ：同时加载

前者无兼容性，后者CSS2.1以下浏览器不支持

Link 支持使用javascript改变样式，后者不可

26.CSS选择符有哪些?哪些属性可以继承?优先级算法如何计算?内联和important哪个优先级高?

标签选择符 类选择符 id选择符

继承不如指定 Id>class>标签选择

后者优先级高

27.前端页面有哪三层构成，分别是什么?作用是什么?

结构层 Html 表示层 CSS 行为层 js

28.css的基本语句构成是?

选择器{属性1:值1;属性2:值2;……}

29.你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么?

Ie(Ie内核) 火狐(Gecko) 谷歌(webkit) opear(Presto)

30.写出几种IE6 BUG的解决方法

1.双边距BUG float引起的 使用display

2.3像素问题 使用float引起的 使用dislpay:inline -3px

3.超链接hover 点击后失效 使用正确的书写顺序 link visited hover active

4.Ie z-index问题 给父级添加position:relative

5.Png 透明 使用js代码 改

6.Min-height 最小高度 !Important 解决’

7.select 在ie6下遮盖 使用iframe嵌套

8.为什么没有办法定义1px左右的宽度容器(IE6默认的行高造成的，使用over:hidden,zoom:0.08 line-height:1px)

9.ie 6 不支持!important

31.img标签上title与alt属性的区别是什么?

Alt 当图片不显示是 用文字代表。

Title 为该属性提供信息

32.描述css reset的作用和用途。

Reset重置浏览器的css默认属性 浏览器的品种不同，样式不同，然后重置，让他们统一

33.解释css sprites，如何使用。

Css 精灵 把一堆小的图片整合到一张大的图片上，减轻服务器对图片的请求数量

34.浏览器标准模式和怪异模式之间的区别是什么?

盒子模型 渲染模式的不同

使用 window.top.document.compatMode 可显示为什么模式

35.你如何对网站的文件和资源进行优化?期待的解决方案包括：

文件合并

文件最小化/文件压缩

使用CDN托管

缓存的使用

36.什么是语义化的HTML?

直观的认识标签 对于搜索引擎的抓取有好处

37.清除浮动的几种方式，各自的优缺点

1.使用空标签清除浮动 clear:both(理论上能清除任何标签，，，增加无意义的标签)

2.使用overflow:auto(空标签元素清除浮动而不得不增加无意代码的弊端,,使用zoom:1用于兼容IE)

3.使用afert伪元素清除浮动(用于非IE浏览器)

38.css hack

<!–[if IE 6]–><![end if]–>

_marging \\IE 6

+margin \\IE 7

Marging:0 auto \9 所有Ie

Margin \0 \\IE 8

未经允许不得转载：爱前端网 » web前端应该知道的html+css知识点