前端面试-HTML5篇

链接：https://www.nowcoder.com/questionTerminal/a99c642a9fd94424a68b03c7675a05b8
来源：牛客网

Question 1:HTML5有哪些新特性、移除了哪些元素？

Html5新增了 27 个元素，废弃了 16 个元素，根据现有的标准规范，把 HTML5 的元素按优先级定义为结构性属性、级块性元素、行内语义性元素和交互性元素 4 大类。结构性元素主要负责web上下文结构的定义

新特性:

section：在 web 页面应用中，该元素也可以用于区域的章节描述。

header：页面主体上的头部， header 元素往往在一对 body 元素中。

footer：页面的底部（页脚），通常会标出网站的相关信息。

nav：专门用于菜单导航、链接导航的元素，是 navigator 的缩写。

article：用于表现一篇文章的主体内容，一般为文字集中显示的区域。

级块性元素主要完成web页面区域的划分，确保内容的有效分割。

aside：用于表达注记、贴士、侧栏、摘要、插入的引用等作为补充主体的内容。

figure：是对多个元素进行组合并展示的元素，通常与 ficaption 联合使用。

code：表示一段代码块。

dialog：用于表达人与人之间的对话，该元素包含 dt 和 dd 这两个组合元素， dt 用于表示说话者，而 dd 用来表示说话内容。

行内语义性元素主要完成web页面具体内容的引用和描述，是丰富内容展示的基础。

meter：表示特定范围内的数值，可用于工资、数量、百分比等。

time：表示时间值。

progress：用来表示进度条，可通过对其 max 、 min 、 step 等属性进行控制，完成对进度的表示和监事。

video：视频元素，用于支持和实现视频文件的直接播放，支持缓冲预载和多种视频媒体格式。

audio：音频元素，用于支持和实现音频文件的直接播放，支持缓冲预载和多种音频媒体格式。

交互性元素主要用于功能性的内容表达，会有一定的内容和数据的关联，是各种事件的基础。

details：用来表示一段具体的内容，但是内容默认可能不显示，通过某种手段（如单击）与 legend 交互才会显示出来。

datagrid：用来控制客户端数据与显示，可以由动态脚本及时更新。

menu：主要用于交互菜单（曾被废弃又被重新启用的元素）。

command：用来处理命令按钮。

移除:
 

移除的特性：

纯表现的元素

•   <basefont> 默认字体，不设置字体，以此渲染
•   <font> 字体标签
•   <center> 水平居中
•   <u> 下划线
•   <big> 大字体
•   <strike> 中横线
•   <tt> 文本等宽

 

框架集

•   <frameset>
•   <noframes>
•   <frame>

Question2 说说你对HTML5认识?（是什么,为什么）

是什么：

• HTML5指的是包括 HTML 、 CSS 和 JavaScript 在内的一套技术组合。它希望能够减少网页浏览器对于需要插件的丰富性网络应用服务（ Plug-in-Based Rich Internet Application ， RIA ），例如： AdobeFlash 、 Microsoft Silverlight 与 Oracle JavaFX 的需求，并且提供更多能有效加强网络应用的标准集。 
• HTML5 是 HTML 最新版本， 2014 年 10 月由万维网联盟（ W3C ）完成标准制定。目标是替换 1999 年所制定的 HTML 4.01 和 XHTML 1.0 标准，以期能在互联网应用迅速发展的时候，使网络标准达到匹配当代的网络需求。

为什么：

 

 

• HTML4陈旧不能满足日益发展的互联网需要，特别是移动互联网。为了增强浏览器功能 Flash 被广泛使用，但安全与稳定堪忧，不适合在移动端使用（耗电、触摸、不开放）。
• HTML5增强了浏览器的原生功能，符合 HTML5 规范的浏览器功能将更加强大，减少了 Web 应用对插件的依赖，让用户体验更好，让开发更加方便，另外 W3C 从推出 HTML4.0 到 5.0 之间共经历了 17 年， HTML 的变化很小，这并不符合一个好产品的演进规则。

Question3 对WEB标准以及W3C的理解与认识?

    优点：
         标签闭合、标签小写、不乱嵌套——>XHTML；
         提高搜索机器人搜索几率——>DOM；
         使用外 链css和 js 脚本-——>结构行为表现的分离；
         文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问，
         容易维护、改版方便，
        提高网站易用性。

Question4  HTML5行内元素有哪些,块级元素有哪些, 空元素有哪些?

•      什么是web标准：一系列标准的集合，包括结构化标准语言（html等）、表现标准语言（css）、行为标准语言（EMCAScript等）。这些标准大部分由万维网联盟起草和发布
•      为什么使用web标准：为了解决因浏览器版本不同、软硬件设备不同导致的需多版本开发的问题
•      W3C：万维网联盟，是一个web开发的国际性联盟

1.行内元素

• a - 锚点
• abbr - 缩写
• b - 粗体 ( 不推荐 )
• bdo - bidi override
• br - 换行
• cite - 引用
• dfn - 定义字段
• em - 强调
• i - 斜体
• img - 图片
• input - 输入框
• kbd - 定义键盘文本
• label - 表格标签
• q - 短引用
• s - 中划线 ( 不推荐 )
• samp - 定义范例计算机代码
• select - 项目选择
• small - 小字体文本
• span - 常用内联容器，定义文本内区块
• strong - 粗体强调
• sub - 下标
• sup - 上标
• textarea - 多行文本输入框
• var - 定义变量

2.块元素 (block element)

• address - 地址
• blockquote - 块引用
• dir - 目录列表
• div - 常用块级容易，也是 css layout 的主要标签
• dl - 定义列表
• fieldset - form控制组
• form - 交互表单
• h3-大标题
• h4 - 副标题
• h3 - 3级标题
• h4 - 4级标题
• h5 - 5级标题
• h6 - 6级标题
• hr - 水平分隔线
• isindex - input prompt
• menu - 菜单列表
• noscript - ）可选脚本内容（对于不支持 script 的浏览器显示此内容）
• ol - 排序表单
• p - 段落
• pre - 格式化文本
• table - 表格
• ul - 非排序列表

可变元素

可变元素为根据上下文语境决定该元素为块元素或者内联元素。

• applet - java applet
• button - 按钮
• del - 删除文本
• iframe - inline frame
• ins - 插入的文本
• map - 图片区块 (map)
• object - object对象
• script - 客户端脚本

3.空元素 ( 在 HTML[1] 元素中，没有内容的 HTML 元素被称为空元素 )

• <br/> //换行
• <hr> //分隔线
• <input> //文本框等
• <img> //图片
• <link> <meta>

Question5 什么是WebGL,它有什么优点?

WebGL（全写 Web Graphics Library ）是一种 3D 绘图标准，这种绘图技术标准允许把 JavaScript 和 OpenGL ES 2.0 结合在一起，通过增加OpenGL ES 2.0 的一个 JavaScript 绑定， WebGL 可以为 HTML5 Canvas 提供硬件 3D 加速渲染，这样 Web 开发人员就可以借助系统显卡来在浏览器里更流畅地展示 3D 场景和模型了，还能创建复杂的导航和数据视觉化。显然， WebGL 技术标准免去了开发网页专用渲染插件的麻烦，可被用于创建具有复杂 3D 结构的网站页面，甚至可以用来设计 3D 网页游戏等等。

WebGL完美地解决了现有的 Web 交互式三维动画的两个问题：

第一，它通过HTML脚本本身实现 Web 交互式三维动画的制作，无需任何浏览器插件支持 ;

第二，它利用底层的图形硬件加速功能进行的图形渲染，是通过统一的、标准的、跨平台的OpenGL接口实现的。

通俗说WebGL中 canvas 绘图中的 3D 版本。因为原生的 WebGL 很复杂，我们经常会使用一些三方的库，如 three.js 等，这些库多数用于 HTML5游戏开发。