html+css面试题集锦（一）

阳光穿透心脏的1/2处 2022-05-19 06:40 230阅读 0赞

**1、对WEB标准以及W3C的理解与认识？**

web标准简单来说可以分为结构、表现和行为，其中结构主要是有HTML标签组成，或者通俗点来讲，在页面Body中我们写入的标签都是为了页面的结构，表现指css样式表，通过css可使页面的结构标签更具美感，行为是指页面和用户具有一定的交互，同时页面结构或者行为发生变化，主要是js组成。

web标准一般是将该三部分独立分开，使其更具有模块化，但一般行为发生变化时，一般伴随着结构或者表现的变化。

其中W3C对web标准提出了规范化的要求，也即是代码规范，包括：①对于结构的要求（标签规范可以提高搜索引擎对页面的抓取效率，对SEO很有帮助），标签的字母要小写，标签要闭合，标签不允许随意嵌套。②对于css和js，尽量使用外链css样式表和js脚本，使结构，表现和行为分为三块，提高页面渲染速度，提高用户体验，尽量少用行间样式表，使结构与表现分离，标签的id和class等属性名要做到见文知意。

### **2、xhtml和html有什么区别？** ###

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

最主要的不同：

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

XHTML 元素必须被关闭。

标签名必须用小写字母。

XHTML 文档必须拥有根元素。

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

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

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

Css盒模型:content（内容），border（边框） ,margin（外边距），padding（内边距）

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

①内联方式（很糟糕的书写方式）

直接在html标签中的style属性中添加css。

![70][]

②嵌入方式

在html头部中的<style>标签下书写css代码

![70 1][]

③链接方式

在hrml的头部的<head>标签中引入外部的css文件。

![70 2][]

最常见也是最推荐的引入css的方式，使用这种方式，所有的 CSS 代码只存在于单独的 CSS 文件中，所以具有良好的可维护性。并且所有的 CSS 代码只存在于 CSS 文件中，CSS 文件会在第一次加载时引入，以后切换页面时只需加载 HTML 文件即可。

④导入样式

导入方式指的是使用 CSS 规则引入外部 CSS 文件。

![70 3][]

两者都是外部引用CSS的方式，但是存在一定的区别：

区别1：link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。

区别2：link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。

区别3：link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。

区别4：ink支持使用Javascript控制DOM去改变样式；而@import不支持。

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

![70 4][]

![70 5][]

Class 可继承  伪类A标签可以继承  列表 UL LI DL DD DT 可继承优先级就近原则，样式定义最近者为准载入样式以最后载入的定位为准

优先级为!important > \[ id > class > tag \]

!Important 比 内联优先级高。

### **6.前端页面有哪三层构成，分别是什么，作用是什么？** ###

结构层HTML，表示层CSS，行为层JS

**网页的结构层（structural layer）**由 HTML 或 XHTML 之类的标记语言负责创建。标签，也就是那些出现在尖括号里的单词，对网页内容的语义含义做出了描述，但这些标签不包含任何关于如何显示有关内容的信息。例如，P 标签表达了这样一种语义：“这是一个文本段。”

**网页的表示层（presentation layer）** 由 CSS 负责创建。 CSS 对“如何显示有关内容”的问题做出了回答。

**网页的行为层（behavior layer）**负责回答“内容应该如何对事件做出反应”这一问题。这是 Javascript 语言和 DOM 主宰的领域。

### **7.IE6 BUG的解决方法** ###

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

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

margin-right:-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）；

### **8.HTML5应用程序缓存为应用带来什么优势。** ###

应用程序缓存为应用带来三个优势：

1）离线浏览：用户可在应用离线时使用它们。

2）速度：已缓存资源加载得更快。

3）减少服务器负载：浏览器将只从服务器下载更新过或更改过的资源。

### **9.谈谈对响应式布局的看法。** ###

响应式布局有缺点也有优点。

优点：面对不同分辨率设备，灵活性强，能够快捷地解决设备显示适应问题。

缺点：兼容各种设备时所需工作量大、效率低下、代码累赘，会隐藏无用的元素，加载时间延长，其实这是一种折中性质的十设计解决方案，由于多方面元素影响而达不到最佳效果，在一定程度上改变了网站原有的布局结构，会出现用户混淆的情况。

[70]: /images/20220519/3c840c5abab64396846f80cf8810db6f.png
[70 1]: /images/20220519/cded39a294a64748bc97ee9304664db2.png
[70 2]: /images/20220519/165a3aa23bf243b5a5893048c02c7e11.png
[70 3]: /images/20220519/6ba92e3715ac4fc2b5fe3c3dd4090fc7.png
[70 4]: /images/20220519/6eea22b86e674968b2acb8a271b21171.png
[70 5]: /images/20220519/fa14dec61d4c4fdc981276aaff1d4e9b.png