html5基本常用標籤

Through287發表於2024-03-09
HTML

https://www.alipan.com/s/sk6qdCWDVQG

<!-- vs code中  !後Enter建立骨架 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Welcome</title>
</head>
<body>
    <p>p標籤（分段）</p>
    你是誰<br>
    br換行標籤
    <h1>一級標題</h1>
    <h2>二級標題</h2>
    <h3>三級標題</h3>
    <!-- img標籤插入影像 -->
    <img src="https://img2.baidu.com/it/u=4090769304,121135334&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500" alt="搜素的圖片" width="720"><!-- alt：圖片顯示失敗後現實的文字 -->
    <br><br>
    <!-- a標籤插入連結 -->
    <a href="https://www.cnblogs.com/through287">我的部落格</a>
    <br><hr><br>
    <!-- input輸入標籤 -->
    暱稱：<input type="text" placeholder="請輸入暱稱"><br><br>
    密碼：<input type="password"><br><br>
    <input type="radio" name="sex">男<input type="radio" name="sex">女<br><br>
    <input type="checkbox" name="career" checked>學生<input type="checkbox" name="career">教師<input type="checkbox" name="career">公務員 <br><br>
    <input type="file" multiple><br><br>
    <input type="button" value="普通按鈕">
    <br><br>
    <!-- button按鈕標籤 -->
    <button type="submit">提交按鈕</button>
    <button type="reset">重置按鈕</button>
    <button type="button">普通按鈕</button><br><br>
    <!-- label標籤兩種用法（可以為input標籤改變滑鼠點選範圍） -->
    愛好：
        <!-- 第一種 -->
        <input type="checkbox" name="hobby" id="one"><label for="one">敲程式碼</label>
        <!-- 第二種 -->
        <label>
            <input type="checkbox">熬夜
        </label>
    <!-- select下拉選單標籤 -->
    所在城市：<select>
            <option>上海</option>
            <option selected>北京</option>
            <option>天津</option>
            <option>重慶</option>
            </select>
    <br><br>
    <!-- textarea文字域標籤 -->
    請提出你的意見：<br>
    <textarea cols="30" rows="10"></textarea>
    <div>div分割槽標籤</div>
    <span>行內標籤</span>
    <br><br>
    <!-- 表格標籤 -->
    <table border="1">
        <tr>
            <th>姓名</th>
            <th>性別</th>
            <th>年齡</th>
        </tr>
        <tr>
            <td>張三</td>
            <td>男</td>
            <td>18</td>
        </tr>
        <tr>
            <td>趙四</td>
            <td>男</td>
            <td>19</td>
        </tr>
        <tr>
            <td>王五</td>
            <td>女</td>
            <td>20</td>
        </tr>
    </table>
    <br><hr><br>
    <table border="1" cellspacing="0" width="500"><!-- 框線，行距，列寬 -->
        <tr>
            <th colspan="2">品牌logo</th><!-- colspan橫向合併 -->
            <th>品牌名稱</th>
            <th>企業名稱</th>
        </tr>
        <tr align="center"><!-- 居中 -->
            <td>010</td>
            <td><img src="./images/三隻松鼠.png" width="60" height="50"></td>
            <td>三隻松鼠</td>
            <td>三隻松鼠</td>
        </tr>
        <tr align="center">
            <td rowspan="2">009</td><!-- rowspan縱向合併 -->
            <td><img src="./images/優衣庫.png" width="60" height="50"></td>
            <td>優衣庫</td>
            <td>優衣庫</td>
        </tr>
        <tr align="center">
            <td>008</td>
            <td><img src="./images/小米.png" width="60" height="50"></td>
            <td>小米</td>
        </tr>
        <!-- ./定位到同級目錄，../定位到上一級目錄，../../定位到上兩級目錄 -->
</body>
</html>

相關文章