HTML面试题个人理解

最新推荐文章于 2024-06-04 08:13:24 发布

缚塵

最新推荐文章于 2024-06-04 08:13:24 发布

阅读量119

点赞数

文章标签： html 前端

本文链接：https://blog.csdn.net/xinshoudandan/article/details/125175333

版权

1、HTML5的离线储存怎么使用，工作原理能不能解析一下？
(1)、所谓的离线存储就是在没有网络连接的时候可以正常的访问站点或应用，在用户网络链接的时候更新缓存的文件

原理：HTML5的离线存储是基于一个manifest文件(缓存清单文件，后缀为.appcache)的缓存机制(不是存储技术)，通过这个文件上的清单解析离线存储资源，这些资源就会像cookie一样被存储了下来。之后当网络在处于离线状态时，浏览器会通过被离线存储的数据进行页面展示。

(2)、什么是manifest文件

Manifest是一个简单的文本文件，它的扩展名是任意的，定义需要缓存的文件、资源，当第一次打开时，浏览器会自动缓存相应的资源。

Manifest 的特点：

离线浏览：即当网络断开时，可以继续访问你的页面。

访问速度快：将文件缓存到本地，不需每次都从网络上请求。

稳定性：做了Manifest缓存，遇到突发网络故障或者服务器故障，继续访问本地缓存

(3)、更新缓存：当应用与网页被缓存时，它会保持缓存直到发生以下情况：
用户清空浏览器缓存
manifest 文件被修改
由程序来更新应用缓存

(4)、如何使用：

Ⅰ、在页面头部加入一个manifest属性
Ⅱ、在cache.manifest 文件里编写离线存储的资源
Ⅲ、在离线状态时，操作window.applicationCache 进行需求的实现

2、标签上的 title属性与 alt属性的区别

(1)、相同之处：它们都会出现一个小浮层，显示图片相关的内容

(2)、不同之处：
Ⅰ、含义不同
alt属性的实质是通过文字来代替图片的内容；title属性的实质是对图片的描述或者注释

Ⅱ、适用范围，浏览器表现
alt是img标签的属性；title属性适用于所有标签

Ⅲ、对于网站seo优化
alt属性是搜索引擎唯一识别的图片信息,因此alt属性应与图片主题内容相关

3、input和textarea的区别

input 单行文本输入框 textarea多行文本输入框

input textarea都可以通过width height设置宽高，textarea还可以通过cols rows来设置显示的行数和列数

input textarea都可以通过maxlength来设置最多输入的字符数，input的size是最多展示出来的字符数，类似于textarea的cols属性

input有value属性，无法自动换行，textarea值是标签对之间，可以自动换行

4、用一个div模拟textarea的实现

<div class="textarea" contenteditable="true"></div>
#textarea {
border: 1px solid #ccc;
padding: 20px;
width: 200px;
min-height: 100px;
/* 可以设置一个最大高度，超出时滚动，否则，高度会被撑开 */
/* max-height: 300px; */
overflow: auto;
}
contenteditable属性，值为Boolean值，true绑定元素可编辑，false(默认)元素不可编辑

5、html5有哪些新特性？

语义化标签:
布局：
   头部：<header></header>
   尾部：<footer></footer>
   独立结构：<article></article>
   主要内容：<main></main>
   导航：<nav></nav>
   侧边栏：<aside></aside>
   节、段、分组：<section></section>
表单新增语义化标签：
   新增input属性
   input类型   number email ... 描述
   autofocus   页面加载时自动获取焦点
   required   规定输入域不能为空
   placeholder   提供一种提示（hint），输入域为空时显示，获得焦点时消失
   pattern   规定验证input域的模式（正则表达式）
   height、width   仅适用于image类型的input标签的图像高度和宽度
(1)`Canvas绘图`
(2)`SVG绘图` 矢量图
(3)`audio video` 音频视频
(4)`地理定位` Geolocation（地理定位）
(5)`Web Worker`
`web worker` 是运行在后台的 JS，独立于其他脚本，不会影响页面的性能。
(6)`Web Storage`
1.Cookie技术（兼容性好,数据不能超4kb,操作复杂）
2.（兼容性差,数据8MB,操作简单）sessionStorage
3.localStorage
   localStorage.setItem("name",arr);//保存数据
   localStorage.getItem("name")//读取数据，也可以根据key值读取
   localStorage.removeItem(key)//删除单个数据
   localStorage.clear()//数据清空

(7)`Web Socket`
WebSocket协议是基于TCP的一种新的网络协议。它实现了浏览器与服务器全双工(full-duplex)通信允许服务器主动发送信息给客户端。