简述要修改 html元素,HTML面试题(示例代码)

最新推荐文章于 2024-08-09 20:45:54 发布

刘兮mkq0.01~

最新推荐文章于 2024-08-09 20:45:54 发布

阅读量109

点赞数

文章标签：简述要修改 html元素

//渐进增强

.transition{

-webkit-transition: all .5s;

-moz-transition: all .5s;

-o-transition: all .5s;

transition: all .5s;

}

//优雅降级

.transition{

transition: all .5s;

-o-transition: all .5s;

-moz-transition: all .5s;

-webkit-transition: all .5s;

}

渐进增强(progressive enhancement)：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。(从被所有浏览器支持的基本功能开始，逐步地添加那些只有新式浏览器才支持的功能，向页面添加无害于基础浏览器的额外样式和功能。当浏览器支持时，它们会自动地呈现出来并发挥作用。)

优雅降级(graceful degradation)：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。(Web站点在所有新式浏览器中都能正常工作，如果用户使用的是老式浏览器，则代码会检查以确认它们是否能正常工作。由于IE独特的盒模型布局问题，针对不同版本的IE的hack实践过优雅降级了，为那些无法支持功能的浏览器增加候选方案，使之在旧式浏览器上以某种形式降级体验却不至于完全失效。)

区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的、能够起作用的版本开始，并不断扩充，以适应未来环境的需要。

四、为什么利用多个域名来存储网站资源会更有效？

CDN缓存更方便，突破浏览器并发限制，节约cookie带宽，节约主域名的连接数，优化页面响应速度，防止不必要的安全问题。

五、img标签上title属性与alt属性的区别是什么？

alt属性是为了给那些不能看到你文档中图像的浏览者提供文字说明的。且长度必须少于100个英文字符或者用户必须保证替换文字尽可能的短。这包括那些使用本来就不支持图像显示或者图像显示被关闭的浏览器的用户，视觉障碍的用户和使用屏幕阅读器的用户等。

title属性为设置该属性的元素提供建议性的信息。使用title属性提供非本质的额外信息。

六、iframe的优缺点？

优点：

a. 解决加载缓慢的第三方内容如图标和广告等的加载问题

b. iframe无刷新文件上传

c. iframe跨域通信

缺点：

a. iframe会阻塞主页面的Onload事件

b. 无法被一些搜索引擎索引到

c. 页面会增加服务器的http请求

d. 会产生很多页面，不容易管理。

七、H5的新特性你了解哪些？

HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。

拖拽释放(Drag and drop) API

语义化更好的内容标签(header,nav,footer,aside,article,section)

音频、视频API(audio,video)

画布(Canvas) API

地理(Geolocation) API

本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；sessionStorage 的数据在浏览器关闭后自动删除

表单控件，calendar、date、time、email、url、search

新的技术webworker, websocket, Geolocation

h5新标签兼容：

IE8/IE7/IE6支持通过document.createElement方法产生的标签，

可以利用这一特性让这些浏览器支持HTML5新标签，

当然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架

八、请描述一下cookies，sessionStorage和localStorage的区别？

相同点：都会在浏览器端保存，有大小和同源限制。

不同点：

1、cookie会随请求发送到服务器，作为会话表示，服务器可修改cookie。web storage不会随请求发送到服务器。

2、cookie有path的概念，子路径可以访问父路径的cookie，父路径不可以访问子路径的cookie。

3、有效期： cookie在设置的有效期内有效，默认为浏览器关闭消失。sessionStorage在会话窗口关闭后失效，localStorage长期有效，需主动删除。

4、sessionStorage不能共享，localStorage在同源文档之间可以共享，cookie在同源且符合path规则的文档之间可以共享。

5、localStorage的修改会触发其他文档的update事件。

6、cookie有secure属性要求HTTPS传输。

7、浏览器不能保存超过300个cookie，单个服务器不能超过20个，每个cookie不能超过4k。webStorage可以支持5M的存储。

九、meta viewport是做什么的？怎么用？

移动端浏览器通常都在一个比屏幕更宽的虚拟窗口中渲染页面，这个虚拟窗口就是viewport，目的是正常展示没有做移动端适配的网页，可以让他们完整的展现给用户。我们有时用移动设备访问桌面版网页就会看到一个横向滚动条，这里可显示区域的宽度就是viewport的宽度。

该meta标签的作用是让当前viewport的宽度等于设备的宽度，同时不允许用户手动缩放。当然maximum-scale=1.0, user-scalable=0不是必需的，是否允许用户手动播放根据网站的需求来定，但把width设为width-device基本是必须的，这样能保证不会出现横向滚动条。

meta viewport 的6个属性：

width

设置layout viewport 的宽度，为一个正整数，或字符串”width-device”

initial-scale

设置页面的初始缩放值，为一个数字，可以带小数

minimum-scale

允许用户的最小缩放值，为一个数字，可以带小数

maximum-scale

允许用户的最大缩放值，为一个数字，可以带小数

height

设置layout viewport 的高度，这个属性并不重要，很少使用

user-scalable