大家好,我是小丫,今天和大家分享的是:12个最常见的HTML5WEB前端面试题及经典答案
HTML5WEB前端面试题及经典答案Q1、什么是HTML5?
HTML5是HTML(超文本标记语言)的最新版本。它是一种为万维网构建和显示内容的语言,万维网是互联网的核心技术。
WHATWG(Web超文本应用技术工作组)另一次W3C个人聚会认为,W3C没有认真考虑当前方言的现实改进需求,它已经开始处理HTML-HTML5的新确定。因此,HTML5是HTML4.01和XHTML1.0的另一种改编,它集中于Web应用程序设计者的必要性上,并且还倾向于在当前细节中发现的问题。
HTML5WEB前端面试题及经典答案具体而言,HTML5包含许多新的句法特征。新元素,如section,article,header和nav,是文档语义实质的重要组成部分。它们还包含section,article,header和canvas标记,以及SVG内容的集成。这些组件旨在简化合并和处理网络上的交互式媒体和图形内容,而无需诉诸限制性模块和API。少数成分和性状已被排出。一些组件,例如,video,audio和menu已经被更改、重新定义或标准化。API和DOM不再被重新考虑,而是HTML5规范的基本部分。
lt;!DOCTYPEgt;Q2、什么是!DOCTYPE?是否需要在HTML5中使用?
!DOCTYPE是关于页面写入了什么版本的HTML的指令。!DOCTYPE标记没有结束标记,它不区分大小写。
!DOCTYPE声明必须是HTML5文档中的第一行,在标记之前。如HTML4.01,全部!DOCTYPE声明需要引用文档类型定义(DTD),因为HTML4.01是基于标准通用标记语言(SGML)的。而HTML5并不基于SGML,因此不需要对文档类型定义(DTD)的引用。
HTML5新特性Q3、HTML5有哪些的新特性?
HTML5中最有趣的新特性:
*二维画图中的canvas元素
*媒体播放的video和audio元素
*支持本地存储
*新的内容特定元素,如section,article,footer,header,nav,menu
HTML5Q4、HTML5的优势有哪些?
一些网络研究的前5名似乎提供了以下HTML5特性;
*相关性
*标记/代码简洁
*语义清晰
*简明的表单和网络应用程序
*缓存式离线应用程序
HTML5CanvasQ5、Canvas是什么?怎样写Canvas?
Canvas是HTML5的一个元素,它使用JavaScript在网页上绘制图形。Canvas是一个矩形区域。它的每一个像素都可以由HTML5语言来控制。使用Canvas绘制路径、框、圆、字符和添加图像有几种方法。
如果要在我们的HTML文档中添加Canvas标签,我们需要ID、宽度和高度。下面是如何将基本Canvas标签写入HTML文档的示例。
canvasid=myFirstCanvaswidth=height=/canvas
Q6、HTML5地理定位是什么?如何使用?
HTML5地理定HTML5地理定位用于定位用户的位置
HTML5地理定位API用于获取用户的地理位置。
由于这会侵犯用户隐私,除非用户批准,否则该位置不可用。
使用getCurrentPosition()方法获取用户的位置。
下面的示例是返回用户位置的纬度和经度的简单地理定位示例:
scriptvarx=document.getElementById(demo);functiongetLocation(){if(navigator.geolocation){navigator.geolocation.getCurrentPosition(showPosition);}else{x.innerHTML=Geolocationisnotsupportedbythisbrowser.;}}functionshowPosition(position){x.innerHTML=Latitude:+position.coords.latitude+Longitude:+position.coords.longitude;}/script
Q7、使用HTML5需要遵守哪些规则?
HTML*新的特性应该基于HTML、CSS、DOM和JavaScript
*减少对外部插件的需求(如Flash)
*更好的错误处理
*更多的替换脚本的标记
*HTML5应与设备无关
*开发过程必须可视化
Q8、HTML5中的Sessionstorage存储对象是什么?如何创建和访问?
Sessionstorage存储对象存储一个会话的数据。当用户关闭浏览器窗口时,数据将被删除。如下所示,我们可以在这里创建“blogName”作为会话并访问Sessionstoragescripttype=text/javascriptsessionStorage.blogName=OnlineInterviewQuestions;document.write(sessionStorage.name);/script
Q9、Html5应用程序缓存和Html浏览器缓存有什么区别?
新的HTML5规范允许浏览器在连接客户端时预取一些或全部网站资产,如HTML文件、图像、CSS、JavaScript等。对于获取此内容,用户以前没有必要访问此内容。换句话说,应用程序缓存可以预取完全未被访问的页面,从而在常规浏览器缓存中不可用。预取文件可以加速站点的性能,尽管您最初使用带宽下载这些文件。
HTML5Q10、简要描述下最新的HTML5标准中的API是什么?
下面是HTML5标准提供的新API列表。
*Canvas:Canvas由HTML代码中定义的具有高度和宽度属性的可绘制区域组成。JavaScript代码可以通过一组完整的绘图函数访问该区域,这与其他常见的2DAPI类似,因此允许动态生成图形。Canvas的一些预期用途包括构建图形、动画、游戏和图像合成。
*定时媒体回放
*离线存储数据库
*文档编辑
*拖放
*跨文档消息传递
*浏览器历史管理
*MIME类型和协议处理程序注册
HTML5Q11、LocalStorage本地存储在HTML5中有什么用途?
LocalStores本地存储就是一个轻量级的sqllite数据库。可以在客户端本地存储数据,用于在断开网络连接的情况下读取本地缓存cookies,LocalStores可以将数据长期保存在客户端,直至人工清除为止,接下来演示下实例:
1、使用localStorage对象保存数据:
localStorage.setItem(key,value)
2、使用localStorage获取保存的数据:
localStorage.getItem(key)
3、清除localStorage保存的数据:
localStorage.removeItem(key)
4、清除全部localStorage对象保存的数据:
localStorage.clear()
Q12、你能列出HTML5中新的输入类型属性吗?
HTML5search:用于搜索域,比如站点搜索或Google搜索,域显示为常规的文本域。
url:用于应该包含URL地址的输入域在提交表单时,会自动验证url域的值。
email:用于应该包含e-mail地址的输入域,在提交表单时,会自动验证email域的值。
datetime:选取时间、日、月、年(UTC时间)
date:选取日、月、年
month:选取月、年
week:选取周和年
time:选取时间(小时和分钟)
datetime-local:选取时间、日、月、年(本地时间)
number:用于应该包含数值的输入域,您还能够设定对所接受的数字的限定。
range:用于应该包含一定范围内数字值的输入域,类型显示为滑动条。
以上就是小丫为大家分享的:12个最常见的HTML5WEB前端面试题及经典答案。如果觉得以上内容对您有帮助,可以