標簽 tag
基礎(chǔ)標簽
div 塊元素
介紹：沒有任何含義如蚜，主要用于 div 進行模塊布局
類型：塊級元素 block鸟廓，盒子占用寬度為一整行
屬性：沒有屬性
<div>我是模塊</div>
<AppCard>
<div>我是模塊</div>
</AppCard>
<br />
span 行內(nèi)文本元素
介紹：沒有任何含義，主要用于展示文本內(nèi)容
類型：內(nèi)聯(lián)元素 inline续语，盒子占用寬度根據(jù)內(nèi)容決定
屬性：沒有屬性
<span>我是內(nèi)容</span>
<AppCard>
<span>我是內(nèi)容</span>
</AppCard>
<br />
p 段落元素
介紹：默認自帶了 margin 樣式垂谢，主要用于展示一段內(nèi)容
類型：塊級元素 block，獨占一行
屬性：沒有屬性
<p>我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容</p>
<AppCard>
<p>我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容</p>
</AppCard>
<br />
img 圖片元素
介紹：單標簽疮茄、主要用于展示圖片
類型：內(nèi)聯(lián)元素 inline滥朱，占用位置根據(jù)圖片寬度決定
屬性：
- 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>
<br />
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>
<br />
a 超鏈接
介紹：默認自帶了 font 樣式徙邻，主要用于展示超鏈接文字
類型：內(nèi)聯(lián)元素 inline，盒子占用寬度根據(jù)內(nèi)容決定
屬性：
- href ：超鏈接地址
- target ：窗口打開方式畸裳，_blank（新窗口）鹃栽、_self（當(dāng)前窗口，默認）
<a target="_blank">點我跳轉(zhuǎn)</a>
<AppCard>
<a target="_blank">點我跳轉(zhuǎn)</a>
</AppCard>
<br />
table 表格元素
介紹：一般需要結(jié)合 thead躯畴、tbody民鼓、tr、th蓬抄、td 標簽進行使用丰嘉，主要用于展示表格
類型：表格元素 table，盒子占用寬度為一整行
屬性：
- border ：表格邊框
- cellspacing ：每一行之間以及每一列之間的間距
- cellpadding ：每一列的內(nèi)邊距
- width ：表格寬度嚷缭，不設(shè)置則由內(nèi)容撐開
子元素：
- 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>
<br />
ul饮亏、li 無序列表
介紹：ul 默認自帶了 margin、padding 樣式阅爽，一般需要結(jié)合 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>
<br />
ol付翁、li 有序列表
介紹：ol 默認自帶了 margin简肴、padding 樣式，一般需要結(jié)合 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 樣式辫狼，主要用于展示輸入框
類型：行內(nèi)塊級元素 inline-block初斑，盒子占用寬度根據(jù)內(nèi)容決定
屬性：
- type：輸入框類型
- text：文本框
- password：密碼框
- radio：單選框
- checkbox：多選框
- button：按鈕
- file：上傳文件
- value：表單值
<p>
<input type="text" placeholder="請輸入內(nèi)容" />
</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="請輸入內(nèi)容" />
</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>
<br />
textarea 文本域
介紹：默認自帶了 padding、border膨处、width 樣式见秤，主要用于展示多行文本輸入框
類型：行內(nèi)塊級元素 inline-block，盒子占用寬度根據(jù)內(nèi)容決定
屬性：
- rows：行數(shù)
- cols：列數(shù)
- placeholder：提示信息
<textarea cols="30" rows="2" placeholder="請輸入內(nèi)容"></textarea>
<AppCard>
<textarea cols="30" rows="2" placeholder="請輸入內(nèi)容"></textarea>
</AppCard>
<br />
button 按鈕
介紹：默認自帶了 padding真椿、border 樣式鹃答，主要用于展示按鈕
類型：行內(nèi)塊級元素 inline-block，盒子占用寬度根據(jù)內(nèi)容決定
屬性：沒有屬性
<button>我是按鈕</button>
<AppCard>
<button>我是按鈕</button>
</AppCard>
<br />
select瀑粥、option 下拉框
介紹：默認自帶了 border 樣式挣跋，一般需要結(jié)合 option 使用三圆，主要用于展示下拉框
類型：行內(nèi)塊級元素 inline-block狞换，盒子占用寬度根據(jù)內(nèi)容決定
屬性：
- 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>
<br />
svg、path 矢量圖形
介紹：默認自帶了 width整慎、height 樣式脏款，一般需要結(jié)合 path 使用，主要用于展示矢量圖形
類型：內(nèi)聯(lián)元素 inline裤园，占用位置根據(jù)矢量圖形寬度決定
屬性：
- 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>
<br />
audio 音頻
介紹：主要用于展示音頻播放器
屬性：
- src：音頻地址撤师，一般使用 mp3 格式
- loop：是否循環(huán)播放
- muted：靜音
- autoplay：自動播放，瀏覽器一般都是禁止的拧揽，需要結(jié)合靜音使用才能生效
- controls：展示播放器控件剃盾，樣式根據(jù)瀏覽器決定
<audio src="https://noxussj.top/huxiyouhai.mp3" controls></audio>
<AppCard>
<audio src="https://noxussj.top/huxiyouhai.mp3" controls></audio>
</AppCard>
<br />
video 視頻
介紹：主要用于展示視頻播放器
屬性：
- src：視頻地址，一般使用 mp4 格式
- loop：是否循環(huán)播放
- muted：靜音
- autoplay：自動播放淤袜，瀏覽器一般都是禁止的痒谴，需要結(jié)合靜音使用才能生效
- controls：展示播放器控件，樣式根據(jù)瀏覽器決定
<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>
