面试题之HTML5、CSS3

风不在乎

已于 2023-03-13 20:34:57 修改

阅读量84

点赞数

分类专栏：面试题 HTML 文章标签： html5 前端 Powered by 金山文档

于 2023-02-20 18:45:56 首次发布

本文链接：https://blog.csdn.net/wind_notcare/article/details/129129425

版权

面试题同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

HTML

1 篇文章 0 订阅

订阅专栏

本文介绍了HTML5的新特性，包括语义化标签如

、

摘要由CSDN通过智能技术生成

H5

H5新特性

绘图

canvas绘图

canvas元素在网页上绘制图形，有多重绘制路径、矩形、圆形、字符以及添加图片的方法。标签只是图形容器，必须用脚本来绘制图形。一旦图形被绘制完成，就不会得到浏览器的继续关注，如果它的位置发生变化，那么整个场景将进行重新绘制

Canvas - 图形

创建一个画布，一个画布在网页中是一个矩形框，通过 <canvas> 元素来绘制。默认情况下元素没有边框和内容。标签通常需要指定一个id属性 (脚本中经常引用), width 和 height 属性定义的画布的大小，使用 style 属性来添加边框。你可以在HTML页面中使用多个 <canvas> 元素

// 创建一个宽200高100的画布，1px黑色边框
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>

使用Javascript来绘制图像，canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成

<script>
    // 通过id获取画布dom元素
　　var c = document.getElementById("myCanvas");
    // 设置画布属性为2d，getContext方法是内建的 HTML5 对象设置 
　　var ctx = c.getContext("2d");
    // 设置绘制图形的颜色，可以是css颜色、渐变、图案，默认为#000000
　　ctx.fillStyle = "#FF0000";
    // 绘制一个从画布左上角开始的150x75的矩形
　　ctx.fillRect(0,0,150,75);
</script>

Canvas - 线条

在Canvas上画线，我们将使用以下两种方法：

moveTo(x,y) 定义线条开始坐标，lineTo(x,y) 定义线条结束坐标

然后使用stroke()方法进行绘制。

<script>
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    // 定义开始坐标
    ctx.moveTo(0,0);
    // 定义结束坐标
    ctx.lineTo(200,100);
    // 进行绘制
    ctx.stroke();
</script>

Canvas - 文本

使用 canvas 绘制文本，重要的属性和方法如下：

<script>
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    // 定义字体样式和大小
    ctx.font = "30px Arial";
    // 文本内容和起始坐标，fillText绘制实心文本、strokeText绘制空心文本
    ctx.fillText("Hello World",10,50);
    ctx.strokeText("Hello World",50,50);
</script>

Canvas - 渐变

渐变可以填充在矩形, 圆形, 线条, 文本等等, 各种形状可以自己定义不同的颜色。以下有两种不同的方式来设置Canvas渐变：

　　createLinearGradient(x, y, x1, y1) - 创建线条渐变

　　createRadialGradient(x, y, r, x1, y1, r1) - 创建一个径向/圆渐变

<script>
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
     
    // 设置绘制线性渐变的起始坐标
    var grd = ctx.createLinearGradient(0,0,200,0);
    // 设置渐变的颜色，必须使用两种或两种以上的颜色，以0~1为坐标范围
    grd.addColorStop(0,"red");
    grd.addColorStop(1,"white");
     
    // 设置渐变样式，开始绘制形状
    ctx.fillStyle = grd;
    ctx.fillRect(10,10,150,80);
</script>

Canvas - 图像

把一幅图像放置到画布上, 使用 drawImage(image,x,y) 方法

<script>
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    // 拿到图片，放到画布上
    var img = document.getElementById("scream");
    ctx.drawImage(img,10,10);
</script>

svg绘图

svg是指可伸缩的矢量图形，是一种使用XML描述2D图形的语言。

在svg中，每个被绘制的图形都视为对象，如果对象属性发生变化，浏览器将自动重现图形。

API

地理定位

getlocaltion获取用户地理位置

window.navigator.geolocation {
    getCurrentPosition:  fn  用于获取当前的位置数据
    watchPosition: fn  监视用户位置的改变
    clearWatch: fn  清除定位监视
}　

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

Web Worker

当HTML页面在执行脚本时，页面的状态是不可响应的，直到脚本完成。web worker是运行在后台的JavaScript，独立于其他js代码，不会影响页面性能，并且在里面可以操作任何事件：点击、选取内容等等。

let wk

// 检测浏览器是否支持worker
if(typeof(worker) !== 'undefined'){
    // 支持worker，可以进行下一步操作
    // 检测是否存在worker，不存在就创建一个worker对象，然后运行指定js文件代码
    if(typeof(wk) == "undefined"){
        wk = new Worker("workers.js"); 
    }

    // 创建对象之后，添加一个事件监听器
    wk.onmessage = (event) => {
        document.getElementById("result").innerHTML = event.data;
    };
}else{
    // 不支持worker
}

// 终止worker 释放浏览器资源
wk.terminate()

在workers.js文件中创建计数函数

let i = 0;

function timedCount(){
    i = i+1;
    postMessage(i);
    setTimeout("timedCount()",500);
}

timedCount();

Web Socket

webSocket协议为web应用程序客户端和服务端提供了一种全双工通讯机制。

在webSocket API中，服务端和客户端只需要一个握手的动作，两者之间就形成一条快速通道，直接进行数据通讯。浏览器通过JavaScript像服务端发出建立webSocket的请求，连接建立以后，客户端和服务端就可以通过TCP连接直接交换数据

在获取webSocket连接之后，通过send()方法向服务端发送数据，通过onmessage()事件接收服务端返回的数据

<script type="text/javascript">
    function WebSocketTest(){
        if ("WebSocket" in window){
            alert("您的浏览器支持 WebSocket!");
            // 打开一个 web socket
            var ws = new WebSocket("ws://localhost:9998/echo");
            ws.onopen = function(){
                // Web Socket 已连接上，使用 send() 方法发送数据
                ws.send("发送数据");
                alert("数据发送中...");
            };
                
            ws.onmessage = function (evt){ 
                var received_msg = evt.data;
                alert("数据已接收...");
            };
                
            ws.onclose = function(){ 
                // 关闭 websocket
                alert("连接已关闭..."); 
            };
        }else{
            // 浏览器不支持 WebSocket
            alert("您的浏览器不支持 WebSocket!");
        }
    }
</script>

Web Storage

是HTML5引入的帮助解决cookie存储本地缓存的一个重要功能，相比cookie，webstorage存储更加的安全和快速，存储量也更大

localStorage：没有时间限制的存储，除非手动删除，否则永远保存在本地

sessionStorage：只在当前页面存储，当浏览器窗口页面关闭之后，自动清除

// 使用之前进行检查
if(typeof(Storage)!=="undefined"){
   // 支持 localStorage  sessionStorage 对象!
   // 两者使用的API相同
    localStorage.setItem(key,value);    // 保存数据键值对
    localStorage.getItem(key);    // 通过键读取数据
    localStorage.removeItem(key);    // 删除指定键数据
    localStorage.clear();    // 删除所有数据
    localStorage.key(index);    // 得到某个索引的key
}else{
   // 不支持 web 存储。
}

拖拽

拖放是一种常见的特性，就是指抓取目标以后移动到另一个位置，在HTML5中，拖放是标准的一部分，任何元素都能够拖放，拖放的过程中，源对象和目标对象会触发不同的事件。

源对象——即将拖动的元素——可以触发三个事件：

dragstate：开始拖动

drag：拖动中

dragend：拖动结束

整个拖动过程分为：dragstate * 1 + drag * n + dragend * 1

目标对象——拖动之后要放置的目标位置——可以触发四个事件：

dragenter：源对象进入目标对象

dragover：源对象悬停，或者源对象在目标对象里面移动

dragleave：源对象离开目标对象

drop：在目标对象里面释放源对象

拖动过程分为两种：源对象经过目标对象 dragevent * 1 + dragover * n + dragleave * 1

源对象放入目标对象 dragevent * 1 + dragover * n + drop * 1

dataTransfer：用于数据传递的对象

在源对象事件中使用e.dataTransfer.setData ( k , v ) 保存数据

在目标对象事件中使用e.dataTransfer.getData ( k ) 读取数据

其他

标签属性

title属性和alt属性

alt和title都是标签中自带的属性。

alt 是给搜索引擎识别，主要是在图像无法显示时的替代文本；title 是关于元素的注释信息，主要是给用户解读，在鼠标放到内容上时会显示出来。

因为 IE 浏览器的差异性，在 IE 浏览器中 alt 起到了 title 的作用，变成文字提示。在定义 img 对象时，将 alt 和 title 属性写全，可以保证在各种浏览器中都能正常使用。

herf和src区别

herf指向网络资源的位置，建立连接；src指向本地资源的位置，引用资源。

最主要的区别是浏览器在解析到src的引用资源时会下载到本地进行解析，所以会暂停其他资源的下载和解析，阻塞进程，而href不会。

常见的HTML5事件

一般事件

onClick：鼠标点击事件，多用在某个对象控制的范围内的鼠标点击；

onDblClick：鼠标双击事件；

onMouseDown：鼠标上的按钮被按下了；

onMouseUp：鼠标按下后，松开时激发的事件；

onMouseOver：当鼠标移动到某对象范围的上方时触发的事件；

onMouseMove：鼠标移动时触发的事件；

onMouseOut：当鼠标离开某对象范围时触发的事件；

onKeyPress：当键盘上的某个键被按下并且释放时触发的事件；

onKeyDown：当键盘上某个按键被按下时触发的事件；

onKeyUp：当键盘上某个按键被按放开时触发的事件。

页面相关事件

onAbort：图片在下载时被用户中断；

onBeforeUnload：当前页面的内容将要被改变时触发的事件；

onError：捕抓当前页面因为某种原因而出现的错误，如脚本错误与外部数据引用的错误；

onLoad：页面内空完成传送到浏览器时触发的事件，包括外部文件引入完成；

onMove：浏览器的窗口被移动时触发的事件；

onResize：当浏览器的窗口大小被改变时触发的事件；

onScroll：浏览器的滚动条位置发生变化时触发的事件；

onStop：浏览器的停止按钮被按下时触发的事件或者正在下载的文件被中断；

onUnload：当前页面将被改变时触发的事件。

表单相关事件

onBlur：当前元素失去焦点时触发的事件 [鼠标与键盘的触发均可]；

onChange：当前元素失去焦点并且元素的内容发生改变而触发的事件 [鼠标与键盘的触发均可]；

onFocus：当某个元素获得焦点时触发的事件；

onReset：当表单中RESET的属性被激发时触发的事件；

onSubmit：一个表单被递交时触发的事件。

滚动字幕事件

onBounce：在Marquee内的内容移动至Marquee显示范围之外时触发的事件；

onFinish：当Marquee元素完成需要显示的内容后触发的事件；

onStart：当Marquee元素开始显示内容时触发的事件。

编辑事件

onBeforeCopy HTML:当页面当前的被选择内容将要复制到浏览者系统的剪贴板前触发的事件；

onBeforeCut：当页面中的一部分或者全部的内容将被移离当前页面[剪贴]并移动到浏览者的系统剪贴板时触发的事件。

触发的事件

onBeforeEditFocus：当前元素将要进入编辑状态；

onBeforePaste：内容将要从浏览者的系统剪贴板传送[粘贴]到页面中时触发的事件；

onBeforeUpdate：当浏览者粘贴系统剪贴板中的内容时通知目标对象；

onContextMenu：当浏览者按下鼠标右键出现菜单时或者通过键盘的按键触发页面菜单时触发的事件 [试试在页面中的中加入onContentMenu=”return false”就可禁止使用鼠标右键了]；

onCopy：当页面当前的被选择内容被复制后触发的事件；

onCut：当页面当前的被选择内容被剪切时触发的事件；

onDrag：当某个对象被拖动时触发的事件 [活动事件]；

onDragDrop：一个外部对象被鼠标拖进当前窗口或者帧；

onDragEnd HTML:当鼠标拖动结束时触发的事件，即鼠标的按钮被释放了；

onDragEnter：当对象被鼠标拖动的对象进入其容器范围内时触发的事件；

onDragLeave：当对象被鼠标拖动的对象离开其容器范围内时触发的事件；

onDragOver：当某被拖动的对象在另一对象容器范围内拖动时触发的事件[活动事件]；

onDragStart：当某对象将被拖动时触发的事件；

onDrop：在一个拖动过程中，释放鼠标键时触发的事件；

onLoseCapture：当元素失去鼠标移动所形成的选择焦点时触发的事件；

onPaste：当内容被粘贴时触发的事件；

onSelect：当文本内容被选择时的事件；

onSelectStart HTML：当文本内容选择将开始发生时触发的事件。

外部事件

onAfterPrint：当文档被打印后触发的事件；

onBeforePrint：当文档即将打印时触发的事件；

onFilterChange：当某个对象的滤镜效果发生变化时触发的事件；

onHelp：当浏览者按下F1或者浏览器的帮助选择时触发的事件；

onPropertyChange：当对象的属性之一发生变化时触发的事件；

onReadyStateChange：当对象的初始化属性值发生变化时触发的事件。

C3

新增操作

平滑滚动

// 需要实现效果的地方加上
scroll-behavior: smooth;