html面试3

html3

1.页面导入样式时，使用link和@import有什么区别？

  1. link是 xhtml标签，除了加载css外，还可以定义RSS 等其他事务;@import属于CSS范畴，只能加载CSS。

  2. link引用CSS.时候，页面载入时同时加载;@import需要在页面完全加载以后加载，而且@import被引用的CSS会等到引用它的CSS文件被加载完才加载。

  3. link是xhtml标签，无兼容问题;@import是在CSs2.1提出来的，低版本的浏览器不支持。

  4. link支持使用javascript控制去改变样式，而import不支持。

  5. link方式的样式的权重高于import的权重。

  6. import在html使用时候需要<style type="text/css">标签。

2.无样式内容闪烁(FOUC) Flash of Unstyle Content

@import 导入CSS文件会等到文档加载完后再加载CSS样式表。因此,在页面DOM加载完成到CSS 导入完成之间会有—段时间页面上的内容是没有样式的。解决方法:使用link标签加载CSS样式文件。因为link是顺序加载的，这样页面会等到CSS下载完之后再下载 HTML文件，这样先布局好，就不会出现FOUC问题。

3.拖放APl; drag. drop
 /*目标对象上触发的dragove事件*/
    drag.addEventListener('dragover', function (e) {
        e.preventDefault(); //阻止默认动作
    })
​
    /*源对象释放，目标对象上触发的事件*/
    drag.addEventListener('drop', function (e) {
        ele.classList.remove('draging');
        if (e.target.nodeName === 'LI') {
            e.target.parentNode.insertBefore(ele, e.target); //将源对象元素插入到目标元素前面
        }
    })
4.HTML5的文件离线储存怎么使用，工作原理是什么

在线情况下，浏览器发现HTML头部有manifest属性，它会请求manifest文件，如果是第一次访问，那么浏览器就会根据 manifest文件的内容下载相应的资源，并进行离线存储。如果已经访问过并且资源已经离线存储了，那么浏览器就会使用离线的资源加载页面。然后浏览器会对比新的manifest文件与旧的 manifest文件，如果文件没有发生改变，就不会做任何操作;如果文件改变了，那么就会重新下载文件中的资源，并且进行离线存储。例如，在页面头部加入manifest属性

<html manifest='cache.manifest'>

在cache.manifest文件中编写离线存储的资源

CACHE MANIFEST

#v0.11

CACHE:

5.label的作用是什么?是怎么用的?*

label标签用来定义表单控件间的关系,当用户选择该标签时,浏览器会自动将焦点转到和标签相关的表单控件上。label中有两个属性是非常有用的,FOR和ACCEsSKEY。FOR属性功能:表示 label标签要绑定的HTML元素，你点击这个标签的时候，所绑定的元素将获取焦点。例如，

<Label FOR="InputBox">姓名</Label> <input lD="InputBox"type= "text">

ACCESSKEY属性功能:表示访问label标签所绑定的元素的热键，当您按下热键所绑定的元素将获取焦点。例如，

<Label FOR="InputBox"ACCESSKEY="N">姓名</Label> <inputID="InputBox" type="text">
6.HTML5的form如何关闭自动完成功能

  1. 在E的internet选项菜单中里的自动完成里面设置。

  2. 设置form输入框的autocomplete为 on或者off来来开启输入框的自动完成功能。

7.如何实现浏览器内多个标签页之间的通信?

  1. WebSocket，SharedWorker。

    initWebSocket: function (userId,sessionId) {                
        // WebSocket与普通的请求所用协议有所不同，ws等同于http，wss等同于https                
        this.websock = new WebSocket("ws://127.0.0.1:1997/websocket/"+userId+"/"+sessionId);                
        this.websock.onopen = this.websocketonopen;                
        this.websock.onerror = this.websocketonerror;                
        this.websock.onmessage = this.websocketonmessage;                
        this.websock.onclose = this.websocketclose;
    },              
    websocketonopen: function () {                
        console.log("WebSocket连接成功");    
    },              
    websocketonerror: function (e) { 
        console.log("WebSocket连接发生错误",e);              
    },              
    websocketonmessage: function (e) {  
        console.log("获取到后端传递来的数据",e.data);     
    },              
    websocketclose: function (e) {
        console.log("WebSocket连接关闭",e);                
    }

    1、initWebSocket

        我们调用initWebSocket方法就可以和后端建立连接，userId、sessionId就是我们传递的参数。

    2、websocketonopen

        websocket连接成功后，就会调用websocketonopen方法。

    3、websocketonerror

        websocket连接失败后，就会调用websocketonerror方法

    4、websocketonmessage

        当接收到后端发送消息的时候，就会调用 websocketonmessage方法，e.data就是传递的消息内容。

    5、websocketclose

        当websocket连接关闭的时候，就会调用这个websocketclose方法。
    8.webSocket如何兼容低浏览器

    1. 引用WebSocket.js这个文件来兼容低版本浏览器。

    9.页面可见性(Page Visibility)API可以有哪些用途

    1. 通过visibility state 的值得检测页面当前是否可见，以及打开网页的时间。

    10.如何在页面上实现一个圆形的可点击区域

    1. border-radius。

    2. 纯js 实现，一个点不在圆上的算法。

    11.实现不使用border 画出1px高的线,在不同浏览器的Quirks，mode和CSs Compat模式下都能保持同一效果
    <div style="height:1px;overflow:hidden;background:red" ></div >
    12.网页验证码是干嘛的，是为了解决什么安全问题

    1. 区分用户是计算机还是人的程序。

    2. 可以防止恶意破解密码、刷票,论坛灌水。

    13.title 与h1的区别、b与strong的区别、i与em的区别

    1. title 属性没有明确意义，只表示标题;h1表示层次明确的标题，对页面信息的抓取也有很大的影响。

    2. strong标明重点内容，语气加强含义;b是无意义的视觉表示em表示强调文本;i是斜体，是无意义的视觉表示。

    3. 视觉样式标签:biu s。

    4. 语义样式标签: 'strong em ins del code。

    14.简述一下src 与href的区别。

    1. src用于替换当前元素，href 用于在当前文档和引用资源之间确立联系。

    2. src是source 的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置;在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。

    3. href是 Hypertext Reference的缩写，指向网络资源所在位置，建立和当前元素(锚点)或当前文档(链接)之间的链接，如果我们在文档中添加

    15.HTML元素的显示优先级?

    1. 帧元素(frame) >HTML元素优先，表单元素总>非表单元素优先。

    2. 常见的非表单元素包括:链接标记(A)，DIV标记，SPAN标记，TABLE标记等等。表单元素覆盖样式元素的根本原因在于HTML元素默认的显示优先级规则。所有这样 HTML,元素又可以根据其显示要求分成两类，即有窗口的 HTML元素(Windowed Element),无窗口的HTML元素( Windowless Element)。

    3. 有窗口的元素包括:SELECT完素，OBJECT元素;插件，IE5.01以主更早版本中的IFRAME元素。

    4.  
posted @ 2023-08-15 17:17  Y~~~  阅读(13)  评论(0)    收藏  举报