首页 前端知识 前端面试题——HTML5的新特性

前端面试题——HTML5的新特性

2024-04-13 09:04:43 前端知识 前端哥 702 279 我要收藏

前言

为了更好地处理今天的互联网应用,HTML5添加了很多新元素及功能,比如: 图形的绘制,多媒体内容,更好的页面结构,更好的形式 处理,和几个api拖放元素,定位,包括网页 应用程序缓存,存储等

1、语义化标签

所谓语义标签就是看到标签我就能明白这是什么意思。以前制作网页布局基本使用div来做。div就是一个普通的块级标签,对搜索引擎来说没有任何的语义。

标签描述
<hrader></header> 定义了文档的头部区域
 <footer></footer> 定义了文档的尾部区域
<nav></nav>定义文档的导航
<section></section> 定义文档中的节(section、区段)
 <article></article>定义页面独立的内容区域
<aside></aside>定义页面的侧边栏内容
<detailes></detailes>用于描述文档或文档某个部分的细节
<summary></summary>标签包含 details 元素的标题
<dialog></dialog>定义对话框,比如提示框

使用语义化标签有利于SEO(Search Engine Optimization 搜索引擎优化),和搜索引擎建立良好的沟通,有助于爬虫爬取更多有效的信息。因为爬虫依赖于标签来确定上下文和各个关键字的权重。也能方便团队开发和维护,增加代码可读性,遵循标准,减少差异化。

2、增强型表单

HTML5 拥有多个新的表单 Input 输入类型。这些新特性提供了更好的输入控制和验证。

新增5个表单元素
标签内容
<progress></progress>进度条,展示连接/下载进度
<meter></meter>刻度值,用于某些计量,例如温度、重量等
<keygen></keygen>提供一种验证用户的可靠方法生成一个公钥和私钥
<output></output>用于不同类型的输出比如计算或脚本输出
<datalist></datalist>用户会在他们输入数据时看到定义域选项的下拉列表
新增多个表单输入类型

输入类型

描述

color

主要用于选取颜色

date

从一个日期选择器选择一个日期

datetime

选择一个日期(UTC 时间)

datetime-local

选择一个日期和时间 (无时区)

email

包含 e-mail 地址的输入域

month

选择一个月份

number

数值的输入域

range

一定范围内数字值的输入域

search

用于搜索域

tel

定义输入电话号码字段

time

选择一个时间

url

 URL 地址的输入域

week

选择周和年
新增表单属性
属性描述
placehoder输入框默认提示文字
required要求输入的内容是否可为空
pattern描述一个正则表达式验证输入的值
min/max设置元素最小/最大值
step为输入域规定合法的数字间隔
height/wdith用于image类型<input>标签图像高度/宽度
autofocus规定在页面加载时,域自动获得焦点
multiple规定<input>元素中可选择多个值

3、视频和音频

html5提供了音频和视频文件的标准,既使用<audio>元素。

<audio controls>  
  <source src="" type="audio">
</audio>
<video controls>
  <source src="" type="video">
</video>

4、Canvas绘图

<canvas>元素负责在页面中设定一个区域,然后就可以通过 Javascript 动态地在这个区域中绘制图形。

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
</canvas>

5、SVG绘图

什么是svg

SVG 是一种使用 XML 描述 2D 图形的语言,在放大或改变尺寸的情况下其图形质量不会有损失,当svg对象的属性发生变换时,浏览器会重新渲染该图形。

与canvas的区别
  • canvas可以随时绘制2D图形(用JavaScript)
  • svg是基于XML的,意味着可以操作DOM,渲染速度较慢
  • 在SVG中每个形状都被当做是一个对象,如果SVG发生改变,页面就会发生重绘
  • Canvas是一像素一像素地渲染,如果改变某一个位置,整个画布会重绘
svg用法
<svg version="相关版本号,比如1.1">
      <circle cx = "100" cy = "50"stroke="red" stroke-width="5" fill="black"/>
      <!--
			cx:圆心的(x轴)横坐标
			cy:圆心的(y轴)纵坐标
			r:圆心的半径
			stroke:外边线条的颜色
			stroke-width:外边线条的宽度
			fill:圆填充的颜色
	  -->
</svg>

6、地理位置

地理位置能够识别你的定位,并且与别人共享地理信息。

navigator.geolocation.getCurrentPosition(
    function(pos){
    console.log('用户定位数据获取成功')
    console.log('定位时间:',pos.timestamp)
    console.log('经度:',pos.coords.longitude)
    console.log('纬度:',pos.coords.latitude)
    console.log('海拔:',pos.coords.altitude)
    console.log('速度:',pos.coords.speed)
    },    //定位成功的回调
    function(err){ 
    console.log('用户定位数据获取失败')
    }     //定位失败的回调
)

7、拖放Api

设置元素为可拖放
<img draggable = "true">
拖拽对象的方法
  • setData(format,data)

将指定格式的数据赋值给dataTransfer对象,参数format定义数据的格式也就是数据的类型,data为待赋值的数据

  • getData(format)

从dataTransfer对象中获取指定格式的数据,format代表数据格式,data为数据。

  • clearData([format])

从dataTransfer对象中删除指定格式的数据,参数可选,若不给出,则为删除对象中所有的数据

  • addElement(element)

添加自定义图标。

  • setDragImage(element,x,y)

设置拖放操作的自定义图标。其中element设置自定义图标,x设置图标与鼠标在水平方向上的距离,y设置图标与鼠标在垂直方向上的距离。

拖拽的属性
  1. none:不能把拖动的元素放在这里。这是除了文本框之外所有元素默认的值。
  2. move:把拖动的元素移动到放置目标。
  3. copy:把拖动的元素复制到放置目标。
  4. link:放置目标会打开拖动的元素(但拖动的元素必须是个链接URL地址)。

8、Web Worker

什么是web work

当在 HTML 页面中执行脚本时,页面的状态是不可响应的,直到脚本已完成。web worker 是运行在后台的 JavaScript,独立于其他脚本,不会影响页面的性能。您可以继续做任何愿意做的事情:点击、选取内容等等,而此时 web worker 在后台运行。

优点

为js创建多线程环境。js在主线程执行,new一个子线程在后台执行。worker完成计算的任务返回给主线程,UI交互流畅,不会被阻塞。主线程中的代码执行会导致浏览器响应阻塞,而子线程代码执行不会。主线程和子线程两者互补干扰,独立执行。

9、Web Storage

什么是web storage

Web 存储更加的安全与快速,这些数据不会被保存在服务器上,但是这些数据只用于用户请求网站数据上,它也可以存储大量的数据,而不影响网站的性能。数据以键/值对存在, web网页的数据只允许该网页访问使用。

localStorage和sessionStorage的区别
  • 相同点

(1)数据都保存在浏览器客户端。
(2)同源,即同域名,同端口,同协议。
(3)操作方法相同。

  • 不同点

(1)生命周期不同。localStorage是永久保存,除非用户手动清除数据。sessionStorage是临时保存(存在于进入页面浏览至关闭浏览器的时间)。

(2)作用域不同。浏览器有很多种,所以无法共享用户数据,也就是不同源的页面无法共享数据。

localStorage信息可以在相同浏览器中同源的不同页面,不同标签,不同窗口中共用。sessionStorage不可以在不同页面,不同标签,不同窗口中共用,即使是同源。

用法

存储

// 第一种方式,标准方法
sessionStorage.setItem('email','xxx@qq.com');
// 第二种方式,直接当成普通对象属性赋值。
sessionStorage.blog = 'http://xxxxxx';

获取

// 1. 标准方法
var email = sessionStorage.getItem('email');
// 2. 直接取属性值
var blog = sessionStorage.blog;

移除键值对

// 移除之后,再获取值,将会得到 undefined
// 根据key,移除键值对
sessionStorage.removeItem('email');

清空sessionStorage

// 全部清除
sessionStorage.clear();

localStorage与sessionStorage用法类似,就不过多赘述。

10、WebSocket

概念

WebSocket是HTML5开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。在WebSocket API中,浏览器和服务器只需要做一个握手的动作,然后,浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求,连接建立以后,客户端和服务器端就可以通过 TCP 连接直接交换数据。当你获取 Web Socket 连接后,你可以通过 send() 方法来向服务器发送数据,并通过 onmessage 事件来接收服务器返回的数据。

相较于传统短轮询和长轮询的优点
  • 较少的控制开销:在连接创建后,服务器和客户端之间交换数据时,用于协议控制的数据包头部相对较小;
  • 更强的实时性:由于协议是全双工的,所以服务器可以随时主动给客户端下发数据。相对于 HTTP 请求需要等待客户端发起请求服务端才能响应,延迟明显更少;
  • 保持连接状态:与 HTTP 不同的是,WebSocket 需要先创建连接,这就使得其成为一种有状态的协议,之后通信时可以省略部分状态信息;
  • 更好的二进制支持:WebSocket 定义了二进制帧,相对 HTTP,可以更轻松地处理二进制内容;
  • 可以支持扩展:WebSocket 定义了扩展,用户可以扩展协议、实现部分自定义的子协议。
转载请注明出处或者链接地址:https://www.qianduange.cn//article/4843.html
标签
评论
发布的文章
大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!