Html學習一

johnchou發表於2021-09-09
HTML

1、解決HTML中的編碼問題


<html>
    <head>
        <title>HelloHtml</title>
        <!--告知瀏覽器用UTF-8編碼開啟-->
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    </head>
    <body>
        
        <marquee>hello java</marquee>
        
    </body></html>


2、列表的使用


<html>
    <head>
        <title>列表標記</title>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    </head>
    <body>
        <!--有序列表：ol；
            屬性：
                type：預設值是1，可選值：AaIi
                start:開始的序號        -->
        <ol type="1" start="10">
            <li>星期日</li>
            <li>星期一</li>
            <li>星期二</li>
        </ol>
        <hr/>
        <!--無序列表：ul
            屬性：
                type：預設值是disc，可選值：circle  square 
        -->
        <ul type="square">
            <li>張三</li>
            <li>李四</li>
            <li>王五</li>
        </ul>
        <!--自定義列表
        dt:定義標題
        dd：定義內容        -->
        <dl>
            <dt>title</dt>
            <dd>content</dd>
        </dl>
        <hr/>
        <dl>
            <dt>title</dt>
            <dd>content</dd>
        </dl>
        <hr/>
        <dl>
            <dt>title</dt>
            <dd>content</dd>
        </dl>
    </body></html>


3、HTML中的表格標記


<html>
    <head>
        <title>表格標記</title>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    </head>
    <body>
        <!--
        tr:表示表中的行
        td:表示行中的列。內容要在td中
            colspan:當前列佔用的幾列的寬度
            rowspan：當前列佔用的行數
        th:表示行中的列。內容會被自動居中和加粗。作為表頭使用
        cellspacing:單元格之間的距離。取值是畫素值.  外補丁
        cellpadding：單元格中的內容和邊線的距離。取值是畫素值 內補丁        -->
        <table border="1" width="60%" align="center">
            <tr>
                <th>姓名</th>
                <th>性別</th>
                <th>籍貫</th>
            </tr>
             <tr>
                <td>張三</td>
                <td>男</td>
                <td>山東</td>
             </tr>
             <tr>
                <td>&nbsp;李四</td>
                <td>女</td>
                <td>山東</td>
             </tr>
        </table>
        <hr/>
        <table border="1" width="60%" align="center" cellspacing="0" cellpadding="5">
            <tr>
                <th>姓名</th>
                <th>性別</th>
                <th>籍貫</th>
            </tr>
             <tr>
                <td>張三</td>
                <td>男</td>
                <td>山東</td>
             </tr>
             <tr>
                <td>李四</td>
                <td>女</td>
                <td>山東</td>
             </tr>
        </table>
        <hr/>
        <table border="1" width="60%" align="center" cellspacing="0" cellpadding="5">
            <tr>
                <td align="center" colspan="3">
                學員資訊列表                </td>
            </tr>
            <tr>
                <th>姓名</th>
                <th>性別</th>
                <th>籍貫</th>
            </tr>
             <tr>
                <td>張三</td>
                <td>男</td>
                <td>山東</td>
             </tr>
             <tr>
                <td>李四</td>
                <td>女</td>
                <td>山東</td>
             </tr>
        </table>
        <hr/>
        <table align="center" border="1" width="60%" cellspacing="0" cellpadding="5">
            <caption>表格的標題</caption>
            <tr>
                <th>年度</th>
                <th>班級</th>
            </tr>

            <tr>
                <td rowspan="3">2014</td>
                <td>JavaEE12</td>
            </tr>
            <tr>
                <td>JavaEE13</td>
            </tr>
            <tr>
                <td>JavaEE14</td>
            </tr>
            <tr>
                <td rowspan="3">2015</td>
                <td>JavaEE15</td>
            </tr>
            <tr>
                <td>JavaEE16</td>
            </tr>
            <tr>
                <td>JavaEE17</td>
            </tr>
        </table>
    </body></html>


4、表單標記


<html>
    <head>
        <title>表單標記</title>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    </head>
    <body>
        <!--表單有關的標記放在form中
        form：代表一個表單
            屬性：
                action:是一個地址，接收資料的地址
                method:預設值是get。建議使用post
                
            重點：get和post的區別（暫時記住）
                get：(預設值)01html.html?username=abc&password=123
                    保密性查，容易被旁邊的人看到，不安全。
                    長度有限制：<1kb
                post：建議使用的
                    保密性好。長度沒有限制
                    
                    username=abc&password=123
                    
                
        input:輸入標記
            屬性：
            type:輸入域的型別。text(預設值)|password(暗文)
                |radio(單選)|checkbox(複選)|file(上傳)
                |reset（重置）|submit（提交）|button（按鈕，結合js使用）
                |image(指定src用圖片代替按鈕)
                |hidden隱藏域，向伺服器傳遞資訊
                
            name：給該輸入域取一個名字。
            maxlength:限制輸入的內容的最大長度
        select:下拉選擇
        textarea:文字區域        
        -->
        <form action="01html.html" method="get">
            <input type="hidden" name="id" value="123"/>
            使用者名稱：<input type="text" name="username" value="" maxlength="5"/><br/>
            密碼：<input type="password" name="password"/><br/>
            性別：<input id="g1" type="radio" name="gender" value="1" checked="checked"/>
                    <label for="g1">男</label>
                   <input id="g2" type="radio" name="gender" value="0"/>
                    <label for="g2">女</label>
                   <br/>
            愛好：<input type="checkbox" name="hobby" value="吃飯"/>吃飯                    <input type="checkbox" name="hobby" value="睡覺"/>睡覺                    <input type="checkbox" name="hobby" value="學java"/>學java<br/>
            籍貫：<select name="province">
                        <option value="BJ">北京</option>
                        <option value="SD" selected="selected">山東</option>
                        <option value="HB">湖北</option>
                    </select><br/>
            靚照：<input type="file" name="photo"/><br/>
            簡介：<textarea name="discription" rows="3" cols="38"></textarea><br/>
            <input type="submit" value="提交"/>
            <input type="reset" value="重置"/>
            <input type="button" value="按鈕"/>
            <input type="image" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="images/reg.jpg"/>
        </form>
    </body></html>

作者：海之浪子

原文連結：https://www.cnblogs.com/haizhilangzi/p/9666851.html

來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/4422/viewspace-2820367/，如需轉載，請註明出處，否則將追究法律責任。

相關文章