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