高频前端面试题之HTML篇（二）

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

构成：结构层、表示层、行为层

1. 结构层（structural layer）

   结构层类似于盖房子需要打地基以及房子的悬梁框架，它是由HTML超文本标记语言来创建的，也就是页面中的各种标签，在结构层中保存了用户可以看到的所有内容，比如说：一段文字、一张图片、一段视频等等

2. 表示层（presentation layer）

   表示层是由CSS负责创建，它的作用是如何显示有关内容，学名：层叠样式表，也就相当于装修房子，看你要什么风格的，田园的、中式的、地中海的，总之CSS都能办妥

3. 行为层（behaviorlayer）

   行为层表示网页内容跟用户之间产生交互性，简单来说就是用户操作了网页，网页给用户一个反馈，这是JavaScript和DOM主宰的领域

7. iframe的作用以及优缺点

iframe也称作嵌入式框架，嵌入式框架和框架网页类似，它可以把一个网页的框架和内容嵌入到现有的网页中。

优点：

• 可以用来处理加载缓慢的内容，比如：广告

缺点：

• iframe会阻塞主页面的Onload事件
• iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。但是可以通过JS动态给ifame添加src属性值来解决这个问题，当然也可以解决iframe会阻塞主页面的Onload事件的问题
• 会产生很多页面，不易管理
• 浏览器的后退按钮没有作用
• 无法被一些搜索引擎识别

8. img上 title 与 alt

• alt：全称alternate，切换的意思，如果无法显示图像，浏览器将显示alt指定的内容
• title：当鼠标移动到元素上时显示title的内容

区别：

一般当鼠标滑动到元素身上的时候显示title，而alt是img标签特有的属性，是图片内容的等价描述，用于图片无法加载时显示，这样用户还能看到关于丢失了什么东西的一些信息，相对来说比较友好。

9. H5和HTML5区别

• H5是一个产品名词，包含了最新的HTML5、CSS3、ES6等新技术来制作的应用
• HTML5是一个技术名词，指的就是第五代HTML

10. 行内元素和块级元素分别有哪些？有何区别？怎样转换？

常见的块级元素：p、div、form、ul、li、ol、table、h1、h2、h3、h4、h5、h6、dl、dt、dd

常见的行级元素：span、a、img、button、input、select

块级元素：

• 总是在新行上开始，就是每个块级元素独占一行，默认从上到下排列
• 宽度缺少时是它的容器的100%，除非设置一个宽度
• 高度、行高以及外边距和内边距都是可以设置的
• 块级元素可以容纳其它行级元素和块级元素

行内元素：

• 和其它元素都会在一行显示
• 高、行高以及外边距和内边距可以设置
• 宽度就是文字或者图片的宽度，不能改变
• 行级元素只能容纳文本或者其它行内元素

使用行内元素需要注意的是：

• 行内元素设置宽度width无效
• 行内元素设置height无效，但是可以通过line-height来设置
• 设置margin只有左右有效，上下无效
• 设置padding只有左右有效，上下无效

可以通过display属性对行内元素和块级元素进行切换(主要看第 2、3、4三个值)：