HTML

Elgina發表於2024-09-02
HTML

HTML

大體框架

<!DOCTYPE html>
<html lang="en"> //語言 english
<head>
    <meta charset="UTF-8"> // 字元編碼
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> // 相容IE
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> // 視口
    <title>Document</title> // 網頁標題
</head>
<body>
    <a href="https://www.baidu.com" target = "_blank" > baidu </a> 
    
</body>
</html>

註釋

    <!--    
    == /* */
    -->

圖片標籤

<img src="https://www.baidu.com/img/flexible/logo/pc/result.png" alt="百度logo"> 
    <!--    
    src alt 相互補充 不出現前者才會出現後者
	後面還可以帶有 align = "" 的屬性 來達成某種效果
    -->

超連結跳轉

<a href="https://www.baidu.com">百度一下</a>

音訊標籤

    <audio controls>
        <source src="C:\Users\LWQ\Desktop\Admin\JAY\愛在西元前.flac" type="audio/mpeg">
    </audio>

影片標籤

    <video width="760" height="480" controls>
        <source src="C:\Users\LWQ\Desktop\Admin\JAY\✿Nightcore✿  Ama no Jaku 【Whispering】.mp4" type="video/mp4">
    </video>

框架標籤

內建可展開的html

    <iframe
        src="tpy.html" width="760" height="480" frameborder="0" scrolling="no">
    </iframe>

表格標籤

    <table border="1" width = "500" height = "600"  align = "center" >
        <tr>
            <td align = "center">1</td>  
            <td align = "center">2</td>
            <td align = "center">3</td>
        </tr>
        <tr>
            <td align = "center">4</td>
            <td align = "center">5</td>
            <td align = "center">6</td>
        </tr>
        <tr>
            <td align = "center">7</td>
            <td align = "center">8</td>
            <td align = "center">9</td>
        </tr>
    </table>

合併單元格

    <table border="1" width = "500" height = "600"  align = "center" >
        <tr>
            <td align = "center" colspan = "3"> 123 </td>
            
        </tr>
        <tr>
            <td align = "center">4</td>
            <td align = "center">5</td>
            <td align = "center" rowspan="2">6<br>9</td>
        </tr>
        <tr>
            <td align = "center">7</td>
            <td align = "center">8</td>
            <!-- <td align = "center">9</td> -->
        </tr>
        
    </table>

colspan  列合併 rowspan 行合併

無序列表

<!-- 
ul<li*10>a + tab
-->    
<ul>
        <li type = "circle">1</li>
        <li type = "square">2</li>
        <li type = "none">3</li>
    </ul>

有序列表

控制編號的兩個屬性

    <ol type = "A" start = "3">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ol>

自定義列表

    <dl>
        <dt>1</dt>
        <dd>ABC</dd>
        <dd>DEF</dd>
        <dt>2</dt>
        <dd>usb</dd>
        <dt>3</dt>
        <dd>kkl</dd>
    </dl>

列表導航欄

     <style>
        ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-color: #333;
        }

        li {
            float: left;
        }

        li a {
            display: block;
            color: white;
            text-align: center;
            padding: 14px 16px; 
            text-decoration: none;
        }

    </style>
    
 	<ul>
        <li><a href="https://mirror.codeforces.com/">主頁</a></li>   
        <li><a href="https://mirror.codeforces.com/top">熱門</a></li>
        <li><a href="https://mirror.codeforces.com/catalog">指南目錄</a></li>
        <li><a href="https://mirror.codeforces.com/contests">比賽</a></li>
        <li><a href="https://mirror.codeforces.com/blog">部落格</a></li>
        <li><a href="https://mirror.codeforces.com/contests/with-virtual-participation">虛擬比賽</a></li>
        
    </ul>

表單

<form action = "https://mirror.codeforces.com" method = "post">
        <input type = "text" name = "username" placeholder = "使用者名稱" />
        <br>
        <input type = "password" name = "password" placeholder = "密碼" />
        <br>
        <input type = "submit" value = "登入" />
        <input type = "reset" value = "重置" />
    </form>




    <form action = "https://mirror.codeforces.com" method = "get">
        <table>
            <caption> 登入 Codeforces</caption> 
            <tr>
                <td>賬戶/郵箱</td>

                <td><input type = "text" name = "handle" /></td>
            </tr>
            <tr>
                <td>密碼</td>
                
                <td><input type = "password" name = "password" /></td>
            </tr>
            <tr>
                <!-- 空格 -->
                
                <td><input type = "checkbox" name = "remember" /></td>
                <td>記住我一個月</td>
            </tr>
            
            <tr>
                <td><input type = "submit" value = "登入" /></td>
                <td><input type = "submit" value = "註冊" /></td>
            </tr>

            <tr>
                <td><input type = "submit" value = "忘記密碼" /></td>
            </tr>
        </table>        
    </form>

相關文章