标签 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>