久久精品国产亚洲一区二区,国产一区二区三区成人欧美日韩在线观看 ,国产亚洲精品久久久久5区

首頁 > 博客列表 > html基本標(biāo)簽的使用-九期線上班

博主信息

博文 12

粉絲 0

評論 0

訪問量 11447

專題推薦

更多>

相關(guān)推薦

熱門教程

更多>

相關(guān)教程

實例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>nav</title>
</head>
<body>
    <h2> 制作一個導(dǎo)航,要求使用到列表,鏈接,圖片,并使用圖片做為鏈接元素</h2>
    <ul>
        <li><a href="">首頁</a></li>
        <li><a href="">新聞</a></li>
        <li><a href="">地圖</a></li>
        <li><a href="http://baijiahao.baidu.com/s?id=1648612920083186131">
            <img src="http://pics6.baidu.com/feed/cb8065380cd79123d6722abf582ef087b3b7800f.jpeg?token=c7e1362dca1b41c722be7f07d42ed6b8&s=6B6022D148727F8E9AB061E20300F0F3"
             width="120px" height="90px"alt=""></a>
        </li>
    </ul>
</body>
</html>

運(yùn)行實例 ?

點(diǎn)擊 "運(yùn)行實例" 按鈕查看在線實例

3. 制作一張商品信息表, 要求用到標(biāo)題, 頭部與底部,行與列方向的合并

實例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>雙十一熱銷的商品</title>
</head>
<body>
    <h3>制作一張商品信息表, 要求用到標(biāo)題, 頭部與底部, 行與列方向的合并</h3>
    
    <table border="1" cellspacing="0">
        <thead>
            <tr>
                <th>編號</th>
                <th>名稱</th>
                <th>單價</th>
                <th>庫存</th>
                <th>金額</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>Givenchy</td>
                <td>340RMB</td>
                <td>10</td>
                <td>3400</td>
            </tr>

            <tr>
                <td>2</td>
                <td>YSL</td>
                <td>240RMB</td>
                <td>10</td>
                <td>2400</td>
            </tr>

            <tr>
                <td>3</td>
                <td>Dior</td>
                <td>270RMB</td>
                <td>10</td>
                <td>2700</td>
            </tr>

            <tr>
                <td>4</td>
                <td>Christian Louboutin</td>
                <td>750RMB</td>
                <td>10</td>
                <td>7500</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td colspan="3" align="center">total</td>
              <!--
                <td></td>
                <td></td> -->
                <td>40</td>
                <td>16000</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

運(yùn)行實例 ?

點(diǎn)擊 "運(yùn)行實例" 按鈕查看在線實例

4. 制作一張完整的用戶注冊表單, 要求盡可能多的用到學(xué)到的表單控件

實例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>用戶注冊</title>
</head>
<body>
    <h2>制作一張完整的用戶注冊表單, 要求盡可能多的用到學(xué)到的表單控件</h2>
    <form action="login.php" method="POST">
       <p>
           <label for="username">用戶名</label>
           <input type="text" id="username" name="username" value="brait">
        </p>

       <p>
           <label for="password">密碼</label>
           <input type="password" id="passworde" name="password" placeholder="不能少于6位">
        </p>

       <p>
           <label for="email">email</label>
           <input type="email" id="email" name="email" placeholder="example@email.com">
        </p>

       <p>
           <label for="age">年齡</label>
           <input type="number" id="age" name="age" min="16" max="80">
        </p>

        <p>
            <label for="tel">電話</label>
            <input type="number" id="tel" name="tel" minlength="8" maxlength="12">
        </p>

        <p>
            <label for="sex">性別</label>
            <input type="radio" name="sex" value="male" checked>Male
            <input type="radio" name="sex" value="fmale" >Female
        </p>

        <p>
            <label for="">課程</label>

            <select name="course" id="">
                <optgroup label="前端">
                    <option value="">HTML5</option>
                    <option value="">CSS3</option>
                    <option value="">JS</option>
                </optgroup>

                <optgroup label="后端">
                        <option value="" selected>PHP</option>
                        <option value="">MYSQL</option>
                        <option value="">Laravel</option>
                    </optgroup>
            </select>
            
        </p>

        <p>
            <label for="hobby">興趣</label>
            <input type="checkbox" name="hobby[]" value="Bike">騎單車
            <input type="checkbox" name="hobby[]" value="basketball">打籃球
            <input type="checkbox" name="hobby[]" value="football">踢足球
            <input type="checkbox" name="hobby[]" value="films">看電影
        </p>

        <p>
            <label for="photo">上傳頭像</label>
            <input type="file" name="photo" id="photo">
        </p>
    

        <button>提交</button>
    </form>

</body>
</html>

運(yùn)行實例 ?

點(diǎn)擊 "運(yùn)行實例" 按鈕查看在線實例

5. 制作一個網(wǎng)站后面, 要求使用`<iframe>`內(nèi)聯(lián)框架實現(xiàn)

實例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <h2>制作一個網(wǎng)站后面, 要求使用`iframe`內(nèi)聯(lián)框架實現(xiàn)</h2>
    <ul>
        <li><a href="form.html" target="content">用戶注冊</a></li>
        <li><a href="nav.html" target="content">導(dǎo)航</a></li>
        <li><a href="table.html" target="content">商品列表</a></li>

    </ul>

    <iframe srcdoc="
    <h2 style='color:red'>歡迎使用管理后臺</h2>" frameborder="1" name="content" width="530">
    </iframe>
</body>
</html>

運(yùn)行實例 ?

點(diǎn)擊 "運(yùn)行實例" 按鈕查看在線實例微信圖片_20191030193626.jpg

6. 總結(jié): 為什么推薦使用語義化的標(biāo)簽?

答：用語義化的標(biāo)簽便于做seo且符合W3C的規(guī)則。而且語義化標(biāo)簽更方便維護(hù)代碼。

批改狀態(tài)：合格

老師批語：寫得很認(rèn)真, 望堅持下去

本博文版權(quán)歸博主所有，轉(zhuǎn)載請注明地址！如有侵權(quán)、違法，請聯(lián)系admin@php.cn舉報處理！

全部評論文明上網(wǎng)理性發(fā)言，請遵守新聞評論服務(wù)協(xié)議

0條評論

作者最新博文

html基本標(biāo)簽的使用-九期線上班

2019-10-30 19:49:32

亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

實例

實例

實例

實例