標簽 tag

基礎標簽

div 塊元素

介紹：沒有任何含義，主要用於 div 進行模塊佈局

類型：塊級元素 block，盒子占用寬度為一整行

屬性：沒有屬性

<div>我是模塊</div>

span 行內文本元素

介紹：沒有任何含義，主要用於展示文本內容

類型：內聯元素 inline，盒子占用寬度根據內容決定

屬性：沒有屬性

<span>我是內容</span>

p 段落元素

介紹：預設自帶了 margin 樣式，主要用於展示一段內容

類型：塊級元素 block，獨占一行

屬性：沒有屬性

<p>我是內容我是內容我是內容我是內容</p>

img 圖片元素

介紹：單標簽、主要用於展示圖片

類型：內聯元素 inline，占用位置根據圖片寬度決定

屬性：

• src ：圖片的路徑
• alt ：圖片載入不出來時顯示的文本
• width ：圖片展示寬度
• height ：圖片展示高度

<img src="xxx.png" alt="載入失敗" width="100px" height="100px" />

h1 ~ h6 一級標題 ~ 六級標題

介紹：預設自帶了 margin 和 font 樣式，主要用於展示不同級別標題

類型：塊級元素 block，盒子占用寬度為一整行

屬性：沒有屬性

<h1>我是標題1</h1>
<h2>我是標題2</h2>
<h3>我是標題3</h3>
<h4>我是標題4</h4>
<h5>我是標題5</h5>
<h6>我是標題6</h6>

a 超鏈接

介紹：預設自帶了 font 樣式，主要用於展示超鏈接文字

類型：內聯元素 inline，盒子占用寬度根據內容決定

屬性：

• href ：超鏈接地址
• target ：視窗打開方式，_blank（新視窗）、_self（當前視窗，預設）

<a href="http://www.baidu.com" target="_blank">點我跳轉</a>

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>

ul、li 無序列表

介紹：ul 預設自帶了 margin、padding 樣式，一般需要結合 li 使用，主要用於展示沒有序號的列表

類型：塊級元素 block，盒子占用寬度為一整行

屬性：沒有屬性

<ul>
    <li>xiaoming</li>
    <li>libai</li>
    <li>anqila</li>
</ul>

ol、li 有序列表

介紹：ol 預設自帶了 margin、padding 樣式，一般需要結合 li 使用，主要用於展示有序號的列表

類型：塊級元素 block，盒子占用寬度為一整行

屬性：沒有屬性

<ol>
    <li>xiaoming</li>
    <li>libai</li>
    <li>anqila</li>
</ol>

表單標簽

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>

textarea 文本域

介紹：預設自帶了 padding、border、width 樣式，主要用於展示多行文本輸入框

類型：行內塊級元素 inline-block，盒子占用寬度根據內容決定

屬性：

• rows：行數
• cols：列數
• placeholder：提示信息

<textarea cols="30" rows="2" placeholder="請輸入內容"></textarea>

button 按鈕

介紹：預設自帶了 padding、border 樣式，主要用於展示按鈕

類型：行內塊級元素 inline-block，盒子占用寬度根據內容決定

屬性：沒有屬性

<button>我是按鈕</button>

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>

多媒體標簽

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>

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>

audio 音頻

介紹：主要用於展示音頻播放器

屬性：

• src：音頻地址，一般使用 mp3 格式
• loop：是否迴圈播放
• muted：靜音
• autoplay：自動播放，瀏覽器一般都是禁止的，需要結合靜音使用才能生效
• controls：展示播放器控制項，樣式根據瀏覽器決定

<audio src="https://noxussj.top/huxiyouhai.mp3" controls></audio>

video 視頻

介紹：主要用於展示視頻播放器

屬性：

• src：視頻地址，一般使用 mp4 格式
• loop：是否迴圈播放
• muted：靜音
• autoplay：自動播放，瀏覽器一般都是禁止的，需要結合靜音使用才能生效
• controls：展示播放器控制項，樣式根據瀏覽器決定

<video src="https://noxussj.top/oceans.mp4" controls></video>