html
html
自定义属性 data-*
html标签自定义属性 data-* 可以用来保存 一些与不同DOM元素相关联的信息 。 自定义属性可以设置多个
如下：
<li id="id" data-num="1" data-names="zhangsan" data-age="999">
Hello world
</li>
使用 js 获取自定义属性
1 使用 getAttribute 和 setAttribute
var restaurant = document.getElementById("id");
var strings = restaurant.getAttribute("data-num");
var restaurant = document.getElementById("id");
restaurant.setAttribute("data-num", "dataNum");
2 使用dataset属性
var restaurant = document.getElementById("id");
var stringss = restaurant.dataset.num; // 通过dataset获取自定义属性
restaurant.dataset.num = newNum; // 设置自定义属性的值
table表格设置边线为单边线
css border-collapse属性
border-collapse：属性，为表格设置合并边框模型。 其属性值如下： separate：默认值。边框会被分开。 collapse：将边框会合并为一个单线的边框 inherit：继承父元素的 border-collapse 属性的值，早期IE浏览器不支持此值。 实现 table 的单线边框的办法 为 table 表格的样式，为入 border-collapse 属性即可
<table>
<tr>
<td>内容</td>
<td>内容</td>
<td>内容</td>
</tr>
<tr>
<td>内容</td>
<td>内容</td>
<td>内容</td>
</tr>
<tr>
<td>内容</td>
<td>内容</td>
<td>内容</td>
</tr>
</table>
<style>
table,table tr td {
border:1px solid #ccc;
border-collapse:collapse
}
table tr td{
padding: 5px 10px;
}
</style>
input 上传文件
<input type="file" onchange="uploadFile" />
const uploadFile = (e) => {
let reader = new FileReader();
reader.readAsDataURL(e.target.files[0]); // 传递参数 e.target.files[0] ，后台用MultipartFile接收实现上传文件
// reader.readAsText(e.target.files[0]) //读取text文件内容
reader.onload = (e) => {
console.log(e.target.result); //读取内容
};
};
FileReader 对象是 Web API 的一部分，它提供了几种方法来读取文件，并将文件内容转换为 JavaScript 可以使用的格式。以下是 FileReader 的主要方法：
- readAsArrayBuffer(file)：
- 读取文件的内容，并将其作为 ArrayBuffer 对象返回。这对于处理二进制文件（如图像或音频文件）非常有用。
- readAsBinaryString(file)：
- 读取文件的内容，并将其作为二进制字符串返回。这个方法在现代浏览器中已经不推荐使用，因为它的性能较差。
- readAsDataURL(file)：
- 读取文件的内容，并将其作为 data URL 返回。这对于在网页上直接显示图像或视频等媒体内容非常有用。
- readAsText(file, [encoding])：
- 读取文件的内容，并将其作为文本字符串返回。可以指定一个可选的编码参数，通常用于非 UTF-8 编码的文本文件。如果不指定编码，默认使用 UTF-8 编码。
每个方法都会触发 FileReader 的 onload 事件，当文件读取完成后，可以通过 e.target.result 访问读取的内容。如果读取过程中发生错误，会触发 onerror 事件。如果用户在读取完成前取消了文件读取，会触发 onabort 事件。
ul li 去除前面的黑点
ul {
list-style-type: none;
}
list-style-type: "123"; ""里面的内容展示在 li 标签前面
// list-style-type 常用属性值有以下几个
1 none不使用项目符号
2 disc实心圆，默认值
3 circle空心圆
4 square实心方块
5 decimal阿拉伯数字
6 lower-roman小写罗马数字
7 upper-roman大写罗马数字
8 lower-alpha小写英文字母
9 upper-alpha大写英文字母
audio video
audio用于在文档中表示用品内容，比如音乐。``可以包含多个音频资源，使用src或者source属性进行描述，浏览器会选择最合适的来用。当前它只支持三种音频格式：MP3, WAV, and OGG。
https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/audio
<audio controls>
<!-- Won't play because the mp3 doesn't exist -->
<source src="cat.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>
对于不考虑兼容问题时，可以直接将src设置在 audio 标签里
<audio controls src="horse.mp3">
Video用来处理电影或者视频流。这个可能是大家最熟悉的标签之一了。它现在支持的视频格式包括： MP4, WebM, and Ogg 。
https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/video
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
您的浏览器不支持 HTML5 video 标签。
</video>
对于不考虑兼容问题时，可以直接将src设置在video标签里
<video width="320" height="240" controls src="movie.mp4"></video>
progress 进度条
<progress id="file" max="100" value="70"> 70% </progress>
details 标签 挂件（实现下拉展示）
details可以创建一个挂件，默认处于关闭状态，仅在被切换成展开状态时才会显示隐藏的内容信息。可以在其中嵌入summary标签，为该部件提供概要。
<details>
<summary>总结</summary>
<!-- 非必填，默认显示“详细信息” -->
我是内容，我是内容。我是内容，我是内容。我是内容，我是内容。
</details>
Template
Template用来包含一些在页面加载时不会呈现的内容，但随后可以在运行时使用javascript进行实例化。
可以用来存储一段后续要用到的内容片段，减少了在JavaScript实例化节点时创建模版内容的过程。
<template>
<h2>前端记事本</h2>
<p>前端记事本前端记事本</p>
</template>
在javascript中可以使用这部分模版来实例化节点
function createNewNode() {
const node = document.querySelector('template');
const template = node.content.cloneNode(true);
document.body.appendChild(template);
}
img
造数据时，将本地图片转 url
img: new URL("@/assets/images/index/zph1.png", import.meta.url),