前端常见知识点三之HTML

前端常见知识点三之HTML

1.HTML5 drag api

• dragstart：事件主体是被拖放元素，在开始拖元素时触发
• darg：事件是被拖放元素，在正在拖放时触发
• dragenter：事件主体是目标元素，在进入某元素时触发
• dragover：事件主体是目标元素，在某元素内移动时触发
• dragleave：事件主体是目标元素，在移出目标元素时触发
• drop：事件主体是目标元素，在目标元素完全接受被拖放元素时触发
• dragend：事件主体是被拖放元素，在整个拖放操作结束时触发

2.对HTML语义化标签的理解

HTML5语义化标签是指正确的标签包含了正确的内容，结构良好，便于阅读。（比如nav表示导航条，还有类似的article、header、footer）

1. 语义化的标签，会使HTML结构更加清晰
2. 方便后期的开发和维护
3. 有利于SEO优化
4. 某些标签的属性有利于优化用户体验（alt、title、lable）

3.iframe是什么？有什么缺点？

• 定义：iframe元素会创建包含另一个文档的内联框架；
• 提示：可以将提示文字放在标签之间，用来提示某些不支持iframe的浏览器；
• 缺点：会阻塞主页面的onload事件；不利于SEO；iframe和主页共享连接池，而浏览器对相同区域有限制所以会影响性能；

4.Doctype作用？严格模式与混杂模式如何区分？有何意义 ？

Doctype声明于文档最前面，告诉浏览器以何种方式来渲染页面，这里有两种模式。严格模式的排版和js运作模式是以该浏览器支持的最高标准运行；混杂模式则是向后兼容，模拟老式浏览器，防止浏览器无法兼容页面。

5.HTML5新增的元素

• 首先，html5为了更好的实践web语义化，增加了header，footer，nav，aside,sectiond等语义化标签。
• 在表单方面，为了增强表单，为input增加了color，emial，data，range等类型。
• 在存储方面，提供了sessionStorage，localStorage和离线存储，通过这些存储方式方便数据在客户端的存储和获取。
• 在多媒体方面规定了音频和视频元素audio和vedio。
• 另外还有地理定位，canvas画布，拖放，多线程编程的web worker和websocket协议