2020-题目（HTML5）

最新推荐文章于 2021-11-05 16:04:52 发布

Sylvia_2000

最新推荐文章于 2021-11-05 16:04:52 发布

阅读量394

点赞数

分类专栏：前端 JavaScript 文章标签： html javascript 前端

本文链接：https://blog.csdn.net/ciel_2/article/details/111825409

版权

前端同时被 3 个专栏收录

29 篇文章 2 订阅

订阅专栏

2020

18 篇文章 0 订阅

订阅专栏

JavaScript

18 篇文章 2 订阅

订阅专栏

2020题目（2）

1.DOCTYPE的作用？标准模式与兼容模式的区别？
2.页面导入样式时，使用link和@import有什么区别？
3.对浏览器内核的理解
4.常见的浏览器内核种类
5.HTML5新特性
6.HTML5移除的元素
7.如何处理HTML5新标签的兼容性
8.对HTML语义化的理解
9.[重要]cookie、sessionStorage、localStorage
10.iframe的缺点
11.网页验证码的作用
12.[重要]如何实现浏览器内多个标签页之间的通信

1.DOCTYPE的作用？标准模式与兼容模式的区别？

DOCTYPE位于html文档第一行，处于html标签之前。告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。
标准模式的排版和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中，页面以宽松的向后兼容的方式显示，模拟老式浏览器的行为，以防止站点无法工作。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
</body>
</html>

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

1) 用途：

@import只能引入CSS文件
link既能引入CSS，又能引入其他文件，比如vue脚手架唯一index.html中引入.ico图标

<link rel="icon" href="<%=BASE_URL%>favicon.ico" >

2) 加载顺序

@import引入的CSS将在页面加载完毕后，被加载
link标签引入的CSS在页面加载时，被同时加载。所以一般把link放在html文档开头，从而css加载和html加载能够并行进行

3) 优先级

@import引入的CSS样式优先级低于 link引入的CSS样式

4) DOM操作

@import不支持使用DOM动态添加和改变
link支持使用DOM动态添加和改变

3.对浏览器内核的理解

主要分为渲染引擎和JS引擎

渲染引擎：负责取得网页的内容（HTML、XML、图像等）、整理讯息（如加入CSS等），以及计算网页的显示方式，然后会输出至显示器。浏览器内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。
JS引擎：解析和执行JavaScript来实现网页的动态效果

4.常见的浏览器内核种类

Trident 内核：IE、360、搜狗浏览器等
Gecko 内核：Firefox
Webkit 内核：Safari、Chrome、Edge、Opera

5.HTML5新特性

增强了图形渲染：canvas
音影：video、audio
数据存储：sessionStorage、localStorage
语义化更好的元素内容：article、footer、header、nav、section等
表单控件：calendar、date、time、email、url、search
新的技术：webworker（专用线程）、websocket通信、Geolocation地理定位

6.HTML5移除的元素

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

7.如何处理HTML5新标签的兼容性

使用框架html5shiv，可解析不兼容标签并且自动添加行为

<script>
src = "http://html5shim.googlecode.com/svn/trunk/html5.js
</script>

不使用框架情况下，通过document.createElement创建标签，自定义对应样式和事件

8.对HTML语义化的理解

用正确的标签做正确的事
HTML语义化让页面的内容结构化，结构更清晰，便于浏览、便于搜索引擎解析
搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，利于SEO
使阅读源代码的人更容易将网站分块，便于阅读维护理解

9.[重要]cookie、sessionStorage、localStorage

相同点：都存储在客户端

不同点：

1) 存储大小

cookie 数据大小不能超过4k
sessionStorage和localStorage 数据大小可以达到5M或更大

2) 有效时间

cookie 在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭
localStorage 存储持久数据，浏览器关闭后数据不丢失，除非主动删除数据
sessionStorage 数据在当前浏览器窗口关闭后自动删除

3) 数据与服务器之间的交互方式

cookie 的数据会自动传递到服务器，服务器端也可以写cookie到客户端
sessionStorage和localStorage 不会自动把数据发给服务器，仅在本地保存

4）实时性（如在多个标签页实现通信时）

cookie 不具备实时性，cookie值改变后只能手动获取或者用setInterval定时获取修改后的cookie值
localStorage 只要任一同源页面修改了localStorage中的值，都会自动触发其他页面中的storage事件

10.iframe的缺点

iframe会阻塞主页面的onload事件
因为页面加载时，如果遇到iframe，会先去加载iframe页面，等待iframe加载回来后再继续往下加载，从而导致总体加载时间过长
搜索引擎的检索程序无法解读这种页面，不利于SEO
iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载
iframe和主页面属于两个页面，意味着有两个window对象，iframe破坏了程序和页面的结构
如需使用iframe，最好通过JavaScript动态给iframe添加 src 属性值，这样可以绕开以上两个问题。
如果网页有公用的页头/页尾，可先使用<header>展位，ajax异步加载页头/页尾，可改善页面加载时间过长问题

11.网页验证码的作用

是为了防止一些人使用软件恶意注册、发帖等行为而设的
它的行为是为了确保登陆网站的是一个真人，而不是一个自动登陆的软件
例：破解密码时可以穷举所有密码组合，而这种暴力破解密码的前提是可以连续不间断的向服务器发送请求，但是验证码破坏了这一前提

12.[重要]如何实现浏览器内多个标签页之间的通信

1) cookie + setInterval 方式

注: cookie、localStorage、sessionStorage在同源页面间属于共享资源。（同源：如两个页面的协议、IP地址、端口号相同，即为同源页面）
缺点：
① cookie 空间有限，浏览器在每个域名下最多能设置30-50个cookie，容量最多4k左右
② 每次 HTTP 请求会把当前域的所有cookie发送到服务器上，包括只在本地才用到的。浪费网络带宽
③ setInterval的频率设置，过大会影响浏览器性能，过小会影响时效性

优点：每个浏览器都兼容

// send.html
send.onclick = function(){
	document.cookie = `msg=${msg.value.trim()}`
}

// rec.html

function getKey(key){ // 获取cookie中的指定变量值
	return JSON.parse(`{"${
		document.cookie.replace(/;\s+/gi,'", "').replace(/=/gi,'":"')
	}"}`)[key]
}

// 每隔1秒获取cookie的内容
setInterval(function(){
	msg.innerHTML = getKey('msg')
},1000)

完整版代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <!-- send.html -->
  <input id="msg1" type="text">
  <input id="msg2" type="text">
  <button id="send">发送</button>
  <script>
    send.onclick = function(){
      if(msg1.value.trim() !== '' && msg2.value.trim()){
        document.cookie = `msg1=${msg1.value.trim()}`
        document.cookie = `msg2=${msg2.value.trim()}`
      }
    }
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <!-- rec.html -->
  <h1>收到消息：<span id="recMsg1"></span></h1>
  <h1>收到消息：<span id="recMsg2"></span></h1>
  
  <script>

    console.log(document.cookie)

    function getKey(key){
      // 解析cookie为对象
      var cookies = JSON.parse(`{"${
        document.cookie.replace(/=/g,'":"').replace(/;\s+/g,'", "')
      }"}`)
      return cookies[key]
    }

    setInterval(() => {
      recMsg1.innerHTML = getKey('msg1')
      recMsg2.innerHTML = getKey('msg2')
    }, 500);

  </script>
</body>
</html>

2) localStorage 方式

setItem时，会自动触发整个浏览器的storage事件，除当前页面之外，所有打开的标签都会受影响

缺点：
① localStorage属于HTML5新特性，高版本的浏览器才支持localStorage这个属性，且不同浏览器localStorage大小限制不统一
② localStorage只能监听非己页面的数据变化，这一点严重影响使用

优点：解决了cookie容量小和时效性不足的问题

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <!-- send.html -->
  <input id="msg1" type="text">
  <input id="msg2" type="text">
  <button id="send">发送</button>
  <script>
    send.onclick = function(){
      if(msg1.value.trim() !== '' && msg2.value.trim()){
       localStorage.setItem('msg1', msg1.value.trim())
       localStorage.setItem('msg2', msg2.value.trim())
      }
    }
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <!-- rec.html -->
  <h1>收到消息：<span id="recMsg1"></span></h1>
  <h1>收到消息：<span id="recMsg2"></span></h1>
  
  <script>

    // 页面加载时调用函数
    load()

    // 只要任一同源页面修改了localStorage中的值，都会自动触发其他页面中的storage事件
    window.addEventListener('storage', function(){
      load()
    })
    // window.addEventListener('storage',load) // 不涉及this情况下，可直接这样写

    // 函数：获取localStorage中的值
    function load(){
      recMsg1.innerHTML = localStorage.getItem('msg1')
      recMsg2.innerHTML = localStorage.getItem('msg2')
    }

  </script>
</body>
</html>

3）WebSocket 方式

WebSocket方式

缺点：
① 它需要服务端的支持才能完成任务。如果socket数据量比较大的话，会严重消耗服务器的资源
② 必须要在服务端项目中写服务端监听程序才能支持

优点：如果部署了WebSocket服务器，可以实现很多实时的功能。（如阿里旺旺等网页上的即时通信功能）

实现步骤：
① 实现服务端监听程序

npm init

先创建一个node项目，然后引入ws

npm i -s ws

新建js文件，实现功能代码如下：

// 获得 WebSocketServer 类型
var WebSocketServer = require('ws').Server

// 创建 WebSocketServer 对象实例，监听指定端口
var wss = new WebSocketServer({port:5500})

// 创建保存所有已连接到服务器的客户端对象的数组
var clients = []

// 为服务器添加connection事件监听，当有客户端连接到服务端时，立刻将客户端对象保存进数组中
wss.on('connection', function(client){
  console.log('一个客户端连接到服务器')
  
  if(clients.indexOf(client) === -1){
    clients.push(client)
    console.log(`有${clients.length}个客户端在线`)

    // 为每个client对象绑定message事件，当某个客户端发来消息时，自动触发
    client.on('message', function(msg){
      console.log(`收到消息：${msg}`)

      // 遍历clients数组中每个其他客户端对象，并发送消息给其他客户端
      for(var c of clients){
        if(c != client){
          c.send(msg)
        }
      }
    })
  }
  
})

② 实现发送端代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <!-- send.html -->
  <input type="text" id="msg">
  <button id="send">发送</button>
  <script>
    // 建立到服务端的WebSocket连接
    var ws = new WebSocket('ws://localhost:5500')

    send.onclick = function(){ // 点击“发送”按钮，向服务端发送信息
      if(msg.value.trim() !== ''){
        ws.send(msg.value.trim())
      }
    }
  </script>
</body>
</html>

③ 实现接收端代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <!-- rec.html -->
  <h1>收到消息：<span id="recMsg"></span></h1>
  <script>
    // 建立到服务端的WebSocket连接
    var ws = new WebSocket('ws://localhost:5500')

    // 当连接被打开时，注册接收消息的处理函数
    ws.onopen = function(event){
      console.log(event)
      // 当有消息发过来时，就将消息放到显示元素上
      ws.onmessage = function(event){
        recMsg.innerHTML = event.data
      }
    }
  </script> 
</body>
</html>

④ 运行
运行服务端 node server.js --> 打开发送端和接收端文件 --> 发送消息
在这里插入图片描述

4) SharedWorker 方式

SharedWorker
实现步骤：
① 创建worker.js，代码如下：

// 在所有SharedWorker共享的worker.js中，保存一个data变量，用于存储多个worker共享的数据
let data = ''

// 必须提供一个名为onconnect的事件处理函数
// 每当一个页面中new SharedWorker('worker.js')时，就会为新创建的worker绑定onconnect事件处理函数
onconnect = function(e){
  // 获得当前连接上来的客户端对象
  var client = e.ports[0]
  // 当当前对象收到消息时
  client.onmessage = function(e){
    if(e.data === ''){ // 如果消息内容为空，说明该客户端想获取共享数据data
      client.postMessage(data) // 给当前客户端发送data数据
    }else{ // 如果消息内容不为空，说明该客户端想要提供新的消息保存在共享的data中
      data = e.data
    }
  }
}

② 创建发送方.html，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <!-- send.html -->
  <input type="text" id="msg">
  <button id="send">发送</button>

  <script>
    var worker = new SharedWorker('worker.js')
    worker.port.start()

    send.onclick = function(){
      if(msg.value.trim() !== ''){
        worker.port.postMessage(msg.value.trim())
      }
    }
  </script>
</body>
</html>

③ 创建接收方.html，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <!-- rec.html -->
  <h1>收到消息：<span id="recMsg"></span></h1>

  <script>
    var worker = new SharedWorker('worker.js')
    // 3.当worker.js中给当前客户端返回了data，会触发当前客户端的message事件，data的值自动保存进事件对象e的data属性中
    worker.port.addEventListener('message',function(e){
      recMsg.innerHTML = e.data
    })
    worker.port.start()

    // 1.接收端反复向共享的worker.js对象中发送空消息，意为想获取data的值
    setInterval(() => {
      worker.port.postMessage('')
      // 2.只要发送消息，就会触发worker.js中的onmessage()，onmessage判断是空消息，说明客户端想获得data，于是就用postMessage()方法，将data返回给当前客户端
    }, 500);
  </script>
</body>
</html>

Sylvia_2000

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
2020-题目（HTML5）

2020题目（2）1.DOCTYPE的作用？标准模式与兼容模式的区别？2.页面导入样式时，使用link和@import有什么区别？1) 用途：2) 加载顺序3) 优先级4) DOM操作3.对浏览器内核的理解4.常见的浏览器内核种类5.HTML5新特性6.HTML5移除的元素7.如何处理HTML5新标签的兼容性8.对HTML语义化的理解9.[重要]cookie、sessionStorage、localStorage相同点：都存储在客户端不同点：1) 存储大小2) 有效时间3) 数据与服务器之间的交互方式4）实
复制链接

扫一扫

专栏目录