前端面试题

html5有哪些新特性？

• a）拖拽释放
• b）画布canvas
• c）自定义属性data-id
• d）媒介播放video和audio
• e）新的语义化标签:article、header、nav、section、footer、aside
• f）新的本地存储：localStorage
• g）新的表单控件：date、time、email、url、search、tel、file、number
• h）新的技术：websocket，web worker，geolacation

简述一下你对html语义化的理解

可以清晰的向浏览器和开发者描述其意义，在丢失css时也能很好的显示页面结构，利于seo，seo可以根据标签和上下文计算权重，方便其他设备解析，方便开发和维护，可读性高

标签上title和alt属性的区别是什么

• a）alt是html标签的属性；title既是标签又是属性
• b）title：

    title作为标签时，网页的标题就是写在这对标签之内
    title作为属性时，可以为元素提供额外的说明信息

• c）alt：

    alt属性用在img元素上时，用于网页中图片无法正常显示时的图片信息描述

什么叫优雅降级和渐进增强

优雅降级：一开始就构建完整的功能，再针对低版本浏览器进行兼容
渐进增强：针对低版本浏览器进行构建页面，保证最基本的功能，再针对高版本浏览器进行效果、交互等改进和追加功能达到更好的用户体验

前端页面由哪三层构成？分别是什么？作用是什么

• a）结构层：由HTML负责，负责搭建页面的结构
• b）表示层：由CSS负责，负责页面的样式
• c）行为层：由JavaScrip负责，负责页面的交互

Label的作用是什么？是怎么用的？

label标签用于定义表单控件之间的关系，当用户选择标签时，浏览器自动聚焦在标签相关的表单控件上
<label for="na">Number:</label><input type="text" name="na" id="na" />
<label>Date:<input type="text" name="B" /></label>

title与h1的区别、b与strong的区别、i与em的区别？

• a）titile属性无明确意义，只表示为标题；H1表示层次明确的标题，对页面信息的抓取有很大影响
• b）b表示强调内容；strong是标明重点内容，有语气加强的含义，使用阅读设备阅读网络时：strong会重读
• c）i表示内容为斜体，em表示强调的文本

网站图片文件，如何点击下载？而非点击预览？

<a href="logo.jpg" download>下载</a>
<a href="logo.jpg" download="网站logo">下载</a>

简述src与href的区别

• a）href是指向网络资源所在位置，建立和当前元素或当前文档之间的链接，用于超链接
• b）src是指向外部资源的位置，指向的内容将会嵌套入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载冰应用到文档内，例js脚本，img图片和frame等元素。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部