html的body標籤

1 標題標籤 h1~h6

2 文本樣式標籤

3 段落標籤 p

4 超鏈接標籤 a

5 列表標籤 ul ol

6 盒子標籤 div

7 圖片標籤 img

8 span標籤

9 表格標籤 table

10 表單標籤 form

11 表單控件 button textarea select option input label

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>註冊信息</title>

        <meta http-equiv="Content-Type" content="text/html;charset=utf-8">

        <link rel="icon" href="./1.ico">
    </head>

    <body>

        <!-- 標題標籤
            h1-h6 不同級別的字體,從大到小。    塊狀元素-->


        <h1>lalallala</h1>
        <h2>lalallala</h2>
        <h3>lalllaaaa</h3>
        <h4>lalallala</h4>
        <h5>lalalalla</h5>
        <h6>lalallala</h6>

        <!-- 文本樣式標籤


             1. `<b></b>`:加粗    
             2. `<i></i>`:斜體
             3. `<u></u>`:下劃線
             4. `<s></s>`:刪除線
             5. `<sup></sup>`:上標 
             6. `<sub></sub>`:下標

             用於強調一段化話中的某些:
              7 `<em></em>`默認會用斜體表示
              8 `<strong></strong>`會用粗體來表示 


              9 `<br>`換行
              10 `<hr>`用橫線分割

        -->


        <!-- 可以進行多重嵌套 -->
        <h1>
            <u><i>lallalala</i></u>
            <sup>haha</sup>
        </h1>


        <!-- 段落標籤p
            塊狀元素 -->

         
        <p>lfdslafsajf<br>lhaemkhnjajsd<em>snvsf<hr>dsfdsf</em>hakfj<br>cnsl<strong>sfesf</strong>adfjiesafljasdsljfe</p>
        <p><hr>fefewb<hr>scfdvf<hr>dscs<hr>sdsfcsf<hr>dsdsc<hr>sdsdsd<hr>sdsds<hr>dsdswd<hr>dsd<hr>ds<hr>sds<hr>scs<hr>scc</p>


        <!-- 超鏈接標籤
            a 行內元素 -->


        <!-- _bank 在新的網站打開
             _self 在當前網站打開 -->

        <a href="https://www.baidu.com" target="_bank" title="路飛學城">路飛學城</a>
        <a href="https://www.baidu.com" target="_self" title="路飛學城">路飛學城</a>
        <!-- 下載包要先存在,郵箱要先登錄着 -->
        <a href="a.zip">下載包</a>
        <a href="mailto:[email protected]">聯繫我們</a>
        <!-- 返回頂部 -->
        <a href="#">跳轉頂部</a>

        <!-- 一般在div中會設置id -->
        <a href="#id=1">跳轉id=1</a>
        <!-- 執行js代碼 -->
        <a href="javascript:alert()">執行js</a>


        <!-- 列表標籤
            ul 無序  ol 有序 -->


        <!--  type:列表標識的類型

                disc:實心圓(默認值)
                circle:空心圓
                square:實心矩形
                none:不顯示標識 

        -->
        <!-- type:列表標識的類型
            1:數字
            a:小寫字母
            A:大寫字母
            i:小寫羅馬字符
            I:大寫羅馬字符 

        -->


        <ul type="square">
            <li>dafsdfd</li>
            <li>sdfcsevf</li>
            <li>dsafas</li>
        </ul>

        <ol type="a">
            <li>fsfasf</li>
            <li>sdfaa</li>
            <li>fsfesf</li>
        </ol>


        <!-- 盒子標籤
            div 用來進行分區 只低於head和body-->


        <div class="lalalla">
            fsafafsagdsk
            fsegesgsbvg
            fesgvsabvbvse
            <h1>fwegfawfawf</h1>
            <ul type="square">
                <li>dafsdfd</li>
                <li>sdfcsevf</li>
                <li>dsafas</li>
            </ul>
            
        </div>


        <!-- 圖片標籤
            img 行內塊狀元素 可同行,可定義長寬 -->


            <!-- 1 src設置的圖片地址可以是本地的地址也可以是一個網絡地址。
                 2  圖片的格式可以是png、jpg和gif。
                 3 alt屬性的值會在圖片加載失敗時顯示在網頁上。
                 4 還可以爲圖片設置寬度(width)和高度(height),不設置就顯示圖片默認的寬度和高度
                 5 瀏覽器查看效果:行內塊元素,與行內元素在一行內顯示
            -->


        <img src="data:image/jpeg;base64,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" alt="谷歌" style="width: 200px;height: 200px">
        <img src="./1.png" alt="hahh" style="width: 200px;height: 200px">
        <img src="./2.png" alt="hahh" style="width: 200px;height: 200px">


        <!-- 其他的一些標籤 -->


        <!-- span標籤
            可以單獨摘出某塊內容,結合css設置相應的樣式  -->


        <div>
            <span>sdfsgvsdfe</span>
            sdfsgasdfs
            <img src="./2.png" alt="hahh" style="width: 200px;height: 200px">
        </div>
        <!-- <br>標籤
            用來將內容換行 -->
        <p>fdsfaasf<br>fsfsfsf</p>
        <!-- <hr>標籤
            用來在HTML頁面中創建水平分隔線,通常用來分隔內容 -->
        <p>fdsfaasf<hr>fsfsfsf</p>


        <!-- 特殊符號
            HTML代碼中的所有連續的空行(換行)也被顯示爲一個空格 -->

        <p>
            fsd     fsf


            ffdsf
        </p>


        <!-- 表格標籤
            table -->


        <!-- 屬性
            border=“1” 顯示邊框
            cellspacing=“0” 取消間隙 -->
        <!-- 合併
            rowspan 合併行(豎着合併) tr套td時
            colspan 合併列(橫着合併) td套tr時
        -->

       thead表頭   tbody表主體    tfoot表尾

       tr行  th列(表頭)    tr行  td列(表主體)


        <div class="table">
            <table border="1" cellspacing="0">
                <!-- 表頭 thead-->
                <thead>
                    <!-- 表頭行 tr-->
                    <tr>
                        <!-- 表頭列 th-->
                        <th></th>
                        <th>
                            monday
                        </th>
                        <th>
                            tuseday
                        </th>
                        <th>
                            thursday
                        </th>
                    </tr>
                    
                </thead>
                <!-- 表體 tbody-->
                <tbody>
                    <!-- 表頭行 tr-->
                    <tr>
                        <!-- 表頭列 td-->
                        <td rowspan="2">am</td>
                        <td>heheh</td>
                        <td>lallf</td>
                        <td>fsfgsdf</td>
                    </tr>
                    <tr>
                        <td>heheh</td>
                        <td>lallf</td>
                        <td>fsfgsdf</td>
                    </tr>
                    <tr>
                        <td>pm</td>
                        <td>heheh</td>
                        <td>lallf</td>
                        <td>fsfgsdf</td>
                    </tr>
                </tbody>
                <!-- 表尾 tfoot-->
                <tfoot>
                    <tr></tr>
                </tfoot>
            </table>
            
        </div>


        <!-- 表單標籤 
            form-->
        <!-- 


            action 定義表單被提交發生的動作,提交給服務器處理程序的地址
            method 定義表單提交數據的方式
                get 明文提交,提交內容會顯示在地址上,安全性低
                    數據最大爲2KB
                post 隱式提交 
                     無大小限制
            enctype 編碼類型
                    取值:application/x-www-form-urlencoded (默認)允許提交普通字符、特殊字符
                          multipart/form-data 允許將文件提交給服務器
                          text/plain 只允許提交普通字符

            Note:提交文件,method用post,enctype用multipart/form-data
        -->    


        <!-- 表單控件


           button按鈕
           textarea文本域
                 允許用戶錄入多行數據
                 cols 列數
                 rows 行數
           select和option選項框    
                 select
                     size 大於1爲滾動列表,否則爲下拉菜單
                     multiple 允許多選
                 option
                     value 選項的值
                     selected 預選,默認是第一項
             input
                 type
                     button
                     text 明文顯示用戶輸入的數據
                     password 密文
                     radio 單選按鈕 checkbox複選框 checked設置後默認選中
                     submit 提交給服務器
                     file 上傳文件
                 value
                     控件值,傳給服務器的數據
                 name
                     控件名稱,服務器用
                 disable
                     禁用該控件
                 id
                     id地址,一般與label關聯
                 placeholder
                     文本框中默認內容
             label
                 關聯文本與表達元素,點擊文本如同點擊表單元素
                 for 表示與該label關聯的表單控件元素的id值-->

 

        <div class="form">
            <form action="http://www.baidu.com" method="get">
                <!-- usename -->
                <p>
                    <label for="user">用戶名</label>
                    <input type="text" name="username" id="user" placeholder="請輸入用戶名">
                </p>
                <!-- password -->
                <p>
                    <label for="password">密碼</label>
                    <input type="password" name="password" id="password" placeholder="請輸入密碼">
                </p>
                <!-- gender -->
                <p>
                    <input type="radio" name="gender" value="男" checked>男
                    <input type="radio" name="gender" value="女">女
                </p>
                <!-- hobby -->
                <p>
                    <input type="checkbox" name="hobby" value="111" checked>111
                    <input type="checkbox" name="hobby" value="222">222
                    <input type="checkbox" name="hobby" value="333">333
                    <input type="checkbox" name="hobby" value="444">444
                </p>
                <!-- put file -->
                <p>
                    <input type="file" name="textfile">
                </p>
                <!-- textarea -->
                <p>
                    <textarea rows="5" cols="20" name="text" placeholder="請輸入自我介紹"></textarea>
                </p>
                <!-- select and option -->
                <p>
                    <select size="2" name="sel" multiple="">
                        <option value="北京" selected>北京</option>
                        <option value="南京">南京</option>
                        <option value="天津">天津</option>
                    </select>
                </p>

            </form>
        </div>

    </body>
</html>

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章