标签 tag基础标签div 块元素介绍：没有任何含义，主要用于 div 进行模块布局类型：块级元素 block，盒子占用宽度为一整行属性：没有属性<div>我是模块</div><AppCard><div>我是模块</div> </AppCard>span 行内文本元素介绍：没有任何含义，主要用于展示文本内容类型：内联元素 inline，盒子占用宽度根据内容决定属性：没有属性<span>我是内容</span><AppCard><span>我是内容</span></AppCard>p 段落元素介绍：默认自带了 margin 样式，主要用于展示一段内容类型：块级元素 block，独占一行属性：没有属性<p>我是内容我是内容我是内容我是内容</p><AppCard><p>我是内容我是内容我是内容我是内容</p></AppCard>img 图片元素介绍：单标签、主要用于展示图片类型：内联元素 inline，占用位置根据图片宽度决定属性：src ：图片的路径alt ：图片加载不出来时显示的文本width ：图片展示宽度height ：图片展示高度<img src="xxx.png" alt="加载失败" width="100px" height="100px" /><AppCard><img src="./tag/noxussj.png" alt="加载失败" width="100" height="100" /></AppCard>h1 ~ h6 一级标题 ~ 六级标题介绍：默认自带了 margin 和 font 样式，主要用于展示不同级别标题类型：块级元素 block，盒子占用宽度为一整行属性：没有属性<h1>我是标题1</h1><h2>我是标题2</h2><h3>我是标题3</h3><h4>我是标题4</h4><h5>我是标题5</h5><h6>我是标题6</h6><AppCard><h1>我是标题1</h1><h2>我是标题2</h2><h3>我是标题3</h3><h4>我是标题4</h4><h5>我是标题5</h5><h6>我是标题6</h6></AppCard>a 超链接介绍：默认自带了 font 样式，主要用于展示超链接文字类型：内联元素 inline，盒子占用宽度根据内容决定属性：href ：超链接地址target ：窗口打开方式，\_blank（新窗口）、\_self（当前窗口，默认）<a href="http://www.baidu.com" target="_blank">点我跳转</a><AppCard><a href="http://www.baidu.com" target="_blank">点我跳转</a></AppCard>table 表格元素介绍：一般需要结合 thead、tbody、tr、th、td 标签进行使用，主要用于展示表格类型：表格元素 table，盒子占用宽度为一整行属性：border ：表格边框cellspacing ：每一行之间以及每一列之间的间距cellpadding ：每一列的内边距width ：表格宽度，不设置则由内容撑开子元素：thead：表头部分tbody：表主体部分tr：每一行th：表头中每一列td：表主体中每一列<table border="0" cellspacing="0" cellpadding="0" width="auto"> <thead> <tr> <th>姓名</th> <th>年龄</th> <th>性别</th> </tr> </thead> <tbody> <tr> <td>xiaoming</td> <td>12</td> <td>男</td> </tr> <tr> <td>anqila</td> <td>16</td> <td>女</td> </tr> </tbody></table><AppCard><table border="0" cellspacing="0" cellpadding="0" width="auto"> <thead> <tr> <th>姓名</th> <th>年龄</th> <th>性别</th> </tr> </thead> <tbody> <tr> <td>xiaoming</td> <td>12</td> <td>男</td> </tr> <tr> <td>anqila</td> <td>16</td> <td>女</td> </tr> </tbody></table></AppCard>ul、li 无序列表介绍：ul 默认自带了 margin、padding 样式，一般需要结合 li 使用，主要用于展示没有序号的列表类型：块级元素 block，盒子占用宽度为一整行属性：没有属性<ul> <li>xiaoming</li> <li>libai</li> <li>anqila</li></ul><AppCard><ul> <li>xiaoming</li> <li>libai</li> <li>anqila</li></ul></AppCard>ol、li 有序列表介绍：ol 默认自带了 margin、padding 样式，一般需要结合 li 使用，主要用于展示有序号的列表类型：块级元素 block，盒子占用宽度为一整行属性：没有属性<ol> <li>xiaoming</li> <li>libai</li> <li>anqila</li></ol><AppCard><ol> <li>xiaoming</li> <li>libai</li> <li>anqila</li></ol></AppCard>表单标签input 输入框介绍：单标签、默认自带了 margin、width 样式，主要用于展示输入框类型：行内块级元素 inline-block，盒子占用宽度根据内容决定属性：type：输入框类型text：文本框password：密码框radio：单选框checkbox：多选框button：按钮file：上传文件value：表单值<p> <input type="text" placeholder="请输入内容" /></p><p> <input type="password" placeholder="请输入密码" /></p><p> <span>男<input type="radio" name="gender" value="1" /></span> <span>女<input type="radio" name="gender" value="2" /></span></p><p> <span>男<input type="checkbox" name="gender" value="1" /></span> <span>女<input type="checkbox" name="gender" value="2" /></span></p><p> <input type="button" value="我是按钮" /></p><p> <input type="file" /></p><AppCard><p> <input type="text" placeholder="请输入内容" /></p><p> <input type="password" placeholder="请输入密码" /></p><p> <span>男<input type="radio" name="gender" value="1" /></span> <span>女<input type="radio" name="gender" value="2" /></span></p><p> 男<input type="checkbox" name="gender" value="1" /> 女<input type="checkbox" name="gender" value="2" /></p><p> <input type="button" value="我是按钮" /></p><p> <input type="file" /></p></AppCard>textarea 文本域介绍：默认自带了 padding、border、width 样式，主要用于展示多行文本输入框类型：行内块级元素 inline-block，盒子占用宽度根据内容决定属性：rows：行数cols：列数placeholder：提示信息<textarea cols="30" rows="2" placeholder="请输入内容"></textarea><AppCard><textarea cols="30" rows="2" placeholder="请输入内容"></textarea></AppCard>button 按钮介绍：默认自带了 padding、border 样式，主要用于展示按钮类型：行内块级元素 inline-block，盒子占用宽度根据内容决定属性：没有属性<button>我是按钮</button><AppCard><button>我是按钮</button></AppCard>select、option 下拉框介绍：默认自带了 border 样式，一般需要结合 option 使用，主要用于展示下拉框类型：行内块级元素 inline-block，盒子占用宽度根据内容决定属性：label：选项文本value：选项值<select> <option label="xiaoming" value="a"></option> <option label="libai" value="b"></option> <option label="anqila" value="c"></option></select><AppCard><select> <option label="xiaoming" value="a"></option> <option label="libai" value="b"></option> <option label="anqila" value="c"></option></select></AppCard>多媒体标签canvas 绘图在 HTML5 中提供了 canvasAPI ，允许在 canvas 画布上绘制图形ie6、7、8 不兼容<canvas width="300" height="300" id="myCanvas"></canvas><script> var canvas = document.getElementById('myCanvas') var context = canvas.getContext('2d') context.moveTo(0, 0) // 绘制第一个点，坐标是（0, 0） context.lineTo(300, 300) // 绘制第二个点，然后连线，坐标是（300, 300） context.lineWidth = 5 // 线条宽度 context.strokeStyle = '#058' // 线条颜色 context.stroke() // 开始绘制</script><AppCard><BaseCanvas></BaseCanvas></AppCard>svg、path 矢量图形介绍：默认自带了 width、height 样式，一般需要结合 path 使用，主要用于展示矢量图形类型：内联元素 inline，占用位置根据矢量图形宽度决定属性：d：矢量图形路径<svg viewBox="0 0 1024 1024" width="200" height="200"> <path d="M768 768a32 32 0 0 1 0 64H256a32 32 0 0 1 0-64h512zM512 192a32 32 0 0 1 32 32v345.504l128.64-128.608a32 32 0 0 1 42.496-2.496l2.784 2.496a32 32 0 0 1 2.496 42.464l-2.496 2.784-181.024 181.024a32 32 0 0 1-42.464 2.496l-2.784-2.496-181.024-181.024a32 32 0 0 1 42.464-47.744l2.784 2.496L480 565.024V224a32 32 0 0 1 32-32z" ></path></svg><AppCard><svg viewBox="0 0 1024 1024" width="200" height="200"><path d="M768 768a32 32 0 0 1 0 64H256a32 32 0 0 1 0-64h512zM512 192a32 32 0 0 1 32 32v345.504l128.64-128.608a32 32 0 0 1 42.496-2.496l2.784 2.496a32 32 0 0 1 2.496 42.464l-2.496 2.784-181.024 181.024a32 32 0 0 1-42.464 2.496l-2.784-2.496-181.024-181.024a32 32 0 0 1 42.464-47.744l2.784 2.496L480 565.024V224a32 32 0 0 1 32-32z"></path></svg></AppCard>audio 音频介绍：主要用于展示音频播放器属性：src：音频地址，一般使用 mp3 格式loop：是否循环播放muted：静音autoplay：自动播放，浏览器一般都是禁止的，需要结合静音使用才能生效controls：展示播放器控件，样式根据浏览器决定<audio src="https://noxussj.top/huxiyouhai.mp3" controls></audio><AppCard><audio src="https://noxussj.top/huxiyouhai.mp3" controls></audio></AppCard>video 视频介绍：主要用于展示视频播放器属性：src：视频地址，一般使用 mp4 格式loop：是否循环播放muted：静音autoplay：自动播放，浏览器一般都是禁止的，需要结合静音使用才能生效controls：展示播放器控件，样式根据浏览器决定<video src="https://noxussj.top/oceans.mp4" controls></video><AppCard><video src="https://noxussj.top/oceans.mp4" controls></video></AppCard><script lang="ts" setup>import BaseCanvas from "../../components/BaseCanvas.vue"import AppCard from "../../components/AppCard.vue"import { loginRead } from '../../../src/utils/login-read'loginRead('11005')</script>
