Web前端面试题-HTML元素和应用CSS样式

1、什么是Shadow DOM（影子中的DOM）？

答案：Shadow DOM是浏览器的一种功能，能够自动添加子元素，例如audio元素，在网页中能使用进度条、音量控制等功能，这些相关元素都由浏览器自动生成

 

2、元素属性src和href有何区别？

答案：两者的功能不同。href能够建立一条通道，将当前文档和定义的资源连接起来。src是将定义的资源嵌入到当前文档中。

 

3、img元素中的title和alt属性有何区别？

答案：title是全局属性，提供额外的提示信息，当鼠标滑动到该元素时，显式定义的提示。link和style元素中的title比较特殊，表示样式表的名称；alt时局部属性，仅可用在img、input等元素中，提供在图片未载入或加载失败时的代替文档。ps：只有当input元素的type属性为image时，才能使用alt属性

 

4、3种将CSS样式应用到元素上的方式有什么区别？

方式	特殊性	HTTP请求	重构用范围	文档大小	伪类和为元素
内联样式	最高	无	不可重用	增加	不可定义
内嵌样式	与外部相同	无	当前文档	增加	可定义
外部样式	与内嵌相同	有	整个项目	保持	可定义

 

5、3中嵌入JavaScript的方式有什么区别？

方式	内容和行为	HTTP请求	重用范围	文档大小	特点
内联脚本	耦合	无	当前文档	增加	将内联脚本放在外部样式表之后，会延迟其他资源 的下载
外联脚本	分离	有	整个项目	保持	容易维护，高复用，可用defer或async属性解决页 面阻塞问题
元素属性	耦合	无	不可重用	增加	两种定义方式，分别是事件属性和在链接属性中使 用特殊伪协议的URL。不但能制作可执行JavaScript 的浏览器书签，还能用a元素模拟按钮的效果

 

 

 

 

 

 

 

 

6、defer和async的区别

属性	作用	执行顺序	作用内联脚本
defer	延迟脚本执行，直到文档解析完成	有序	否
async	尽快执行脚本，不会阻塞文档解析	无序	否

 

 

 

 

7、meta元素可以定义文档的那些元数据？

答案：meta元素可以定义的元数据可简要概括为4类，如下：

• 声明HTML文档内容所用的字符编码
• 完善文档描述信息，让搜索引擎更容易解析索引，提升SEO
• 适配移动设备，使页面在各种尺寸的屏幕中显示正确
• 指定首选样式表、执行重载或重定向

 

8、a元素除了可以用于导航外，还有什么其他的功能？

答案：href属性中的URL可以是浏览器支持的任何协议，因为有这个特点，a元素也可用于手机拨号、发送短信、发送邮件等功能。当发送信息的时候，可将内容作为参数直接带过去；当发送邮件的时候，可以将收件人、抄送人、主题和内容作为参数直接带过去