html5的简单问题
1.html5结构语义化
用正确的标签做正确的事情。
便于团队的开发和维护，在没有加载css的情况下也能呈现较好的内容与结构代码，易于阅读。
有利于seo，提高可访问性。
2.html5新特性
增加：用于媒介回访的video和autio元素；本地离线存储localStorage长期存储数据，浏览器关闭后数据不丢失；sessiontorage的数据在浏览器关闭后自动删除；语义化更好的内容元素；表单控件；新的技术webworker,websocket,geolocation
移除纯表现的元素和对可用性产生负面影响的元素
支持html5新标签
3.描述cookies,sessionStroage和locaStorage的区别
cookies是网站为了标示用户身份而存储在用户本地终端上的数据，cookies数据始终在同源的http请求中携带，在浏览器和服务器间来回传递
sessionStroage和locaStorage不会把数据发送给服务器，仅在本地保存。
存储大小：
cookies数据大小不超过4k,sessionStroage和locaStora也有存储大小限制，但比cookies大得多，5M或更大
有效时间：
locaStorage存储持久数据，浏览器关闭后数据不丢失，除非主动删除
sessionStroage数据在当前浏览器窗口关闭后自动删除
cookies数据在过期时间之前一直有效，即使窗口或浏览器关闭。
<template>
<button @click="setCookie('username','zs',1)">设置cookies</button>
<button @click="getCookie('username')">获取cookies</button>
<button @click="delCookie('username')">删除cookies</button>
</template>
<script setup>
function getCookie(key) {
var cookie = document.cookie;
var arr = cookie.split("; ");// ["username=zs","password=123456","sex=男"]
for (var i = 0; i < arr.length; i++) {
var newarr = arr[i].split('=');// ["username","zs"]
if (newarr[0] == key) {
console.log('key,value',key,newarr[1]);
return newarr[1]
}
}
return ''
}
function setCookie(key, value, day) {
var date = new Date();
date.setDate(date.getDate() + day)
document.cookie = key + '=' + value + ';expires=' + date
console.log('key, value, day',key, value, day);
}
function delCookie(key) {
setCookie(key, "", -1)
}
</script>4.浏览器渲染机制（网页渲染到浏览器端）分为几个步骤
a.处理html并构建dom树
b.处理css并构建cssom树
c.将domh与cssom合并成一个渲染树
d.根据渲染树来布局，计算每个节点的位置
e.调度gpu绘制，合成图层，显示在屏幕上
在构建cssom树时，会阻塞渲染，直到cssom树构建完成。所以尽量保证层级扁平，减少过渡层叠。
当html解析到script标签时，会暂停构建dom，完成后才会从暂停的地方重新开始。所以，如果想要首屏渲染的越快，就不要在首屏就加载js文件。
5.重绘和回流
重绘是当前节点需要更改外观而不会影响布局
回流是布局或几何属性需要发生改变。
回流必定会发生重绘，重绘不一定会引发回流。回流所需成本比重绘高得多，改变深层次的节点很可能导致父节点的一系列回流。
导致回流现象的操作：添加或删除可见dom元素，元素的位置发生变化，元素尺寸发生变化，内容发生变化，定位或浮动，浏览器窗口尺寸变化
减少重绘和回流：批量修改dom，对于复杂动画效果使用绝对定位使其脱离文档流，css硬件加速
6.data-* 属性的用法
在 HTML 中，data-* 属性用于存储自定义数据。可以在任何元素上使用这些属性，而 div 标签是最常见的应用之一。data-* 属性允许你在元素上存储与其相关的信息，而不会影响页面的结构或样式。
<body>
<div id="myDiv" data-user-id="123" data-role="admin" data-location="USA">
用户信息
</div>
</body>
<script>
window.onload = function() {
const myDiv = document.getElementById('myDiv');
// 访问 data 属性
console.log(myDiv.dataset.userId); // 输出: '123'
console.log(myDiv.dataset.role); // 输出: 'admin'
console.log(myDiv.dataset.location); // 输出: 'USA'
// 修改 data 属性
myDiv.dataset.userId = '456';
myDiv.dataset.role = 'editor';
// 输出新值
console.log(myDiv.dataset.userId); // 输出: '456'
console.log(myDiv.dataset.role); // 输出: 'editor'
// 删除 data 属性
delete myDiv.dataset.userId;
console.log(myDiv.dataset.userId); // 输出: undefined
};
</script>
原文地址：https://blog.csdn.net/2301_79568779/article/details/142911617
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！