1.制作一張課程表

筆記：
制作表格應(yīng)用<table>標(biāo)簽，其中<tr>表示行，<td>表示列。

<border>表示表格邊框。
cellspacing可以設(shè)置表格邊框，可設(shè)置為0，將表格邊框折疊。
cellpadding可設(shè)置表格內(nèi)容和表格邊框的距離。

<caption>標(biāo)簽可對(duì)表格標(biāo)題進(jìn)行設(shè)置。可在style中將font-weight設(shè)置為bolder，加粗表格標(biāo)題。設(shè)置margin-bottom，使得表格標(biāo)題和表格有距離，使表格更美觀。

其中rowspan和colspan可對(duì)表格的行和列單元格進(jìn)行合并，用法就是找到要合并的單元格位置起點(diǎn)設(shè)置要合并的單元格數(shù)量。

<table border="1" cellspacing="0" cellpadding="5" width="80%">
    <caption style="font-weight: bolder; margin-bottom: 1em;">課程表</caption>
    <tr>
        <th>時(shí)間</th>
        <th>星期一</th>
        <th>星期二</th>
        <th>星期三</th>
        <th>星期四</th>
        <th>星期五</th>
    </tr>
    <tr>
        <td rowspan="2" bgcolor="lightblue">上午</td>
        <td>語文</td>
        <td>數(shù)學(xué)</td>
        <td>英語</td>
        <td>體育</td>
        <td>美術(shù)</td>
    </tr>
    <tr>
        <td>政治</td>
        <td>音樂</td>
        <td>歷史</td>
        <td>英語</td>
        <td>數(shù)學(xué)</td>
    </tr>
    <tr>
        <td rowspan="2" bgcolor="lightgreen">下午</td>
        <td>語文</td>
        <td>英語</td>
        <td>歷史</td>
        <td>數(shù)學(xué)</td>
        <td>美術(shù)</td>
    </tr>
    <tr>
        <td>政治</td>
        <td>數(shù)學(xué)</td>
        <td>美術(shù)</td>
        <td>英語</td>
        <td>數(shù)學(xué)</td>
    </tr>
    <tr>
        <td colspan="6" bgcolor="red">備注：早上8點(diǎn)上課，下午兩點(diǎn)開始上課。</td>
    </tr>
</table>

2.制作一張用戶注冊表單

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用戶注冊</title>
</head>
<body>
    <form style="display: grid; gap: 0.5em;">
        <!-- 文本輸入框 -->
        <fieldset>
            <legend>必填項(xiàng)</legend>
            <div>
                <label  for="username">帳號(hào):</label>
                <input type="text" id="username" placeholder="不能為空">
            </div>
            <div>
                <label  for="password">密碼:</label>
                <input type="password" id="password" placeholder="必須同時(shí)包含字母和數(shù)字">
            </div>
            <div>
                <label  for="email">郵箱:</label>
                <input type="email" id="email" placeholder="格式為：xxx@xx.com">
            </div>
        </fieldset>
        <!-- 單選按鈕：多選1 -->
        <div>
            <label  for="secret">性別:</label>
            <input type="radio" name="gender" value="male" id="male" /><label for="male">男</label>
            <input type="radio" name="gender" value="female" id="female" /><label for="female">女</label>
            <input type="radio" name="gender" value="secret" id="secret" /><label for="female">保密</label>
        </div>
        <!-- 復(fù)選框 -->
        <div>
            <label for="">愛好</label>
            <input type="checkbox" name="hobby[]" id="programmer" checked><label for="programmer">編程</label>
            <input type="checkbox" name="hobby[]" id="game" ><label for="game">游戲</label>
            <input type="checkbox" name="hobby[]" id="shot" ><label for="shot">攝影</label>
        </div>
        <!-- 下拉列表 -->
        <select name="level" id="">
            <option value="1">銅牌會(huì)員</option>
            <option value="2">銀牌會(huì)員</option>
            <option value="3" selected>金牌會(huì)員</option>
            <option value="4">鉆石會(huì)員</option>
        </select>
        <!-- 輸入框+下拉列表 -->
        <div>
            <label for="">關(guān)鍵字：</label>
            <input type="search" name="search" id="" list="key"/>
            <datalist id="key">
                <option value="html"></option>
                <option value="css"></option>
                <option value="javascript"></option>
            </datalist>
        </div>
        <div>
            <button>提交</button>
        </div>
    </form>
</body>
</html>

3.簡單的地圖顯示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>map</title>
</head>
<body>
    <a href="https://j.map.baidu.com/61/g" target="map">北京</a>
    <a href="https://j.map.baidu.com/5f/7" target="map">合肥</a>
    <a href="https://j.map.baidu.com/45/g" target="map">上海</a>
    <hr/>
    <iframe srcdoc="<em>地圖顯示區(qū)</em>" frameborder="1" width="500" height="500" name="map"></iframe>
</body>
</html>

批改老師：

天蓬老師

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

老師批語：

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

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

0條評(píng)論

作者最新博文

vscode的使用配置以及markdown常用語法

2021-03-25 02:43:14

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

1.制作一張課程表

2.制作一張用戶注冊表單

3.簡單的地圖顯示