2019-10-29html标签用法（第二课）

10月29日作业:
1. 描述HTML与HTTP是什么,他们之间有什么联系?

2. 制作一个导航,要求使用到列表,链接,图片,并使用图片做为链接元素
3. 制作一张商品信息表, 要求用到标题, 头部与底部, 行与列方向的合并

4. 制作一张完整的用户注册表单, 要求尽可能多的用到学到的表单控件
5. 制作一个网站后面, 要求使用`<iframe>`内联框架实现
6. 总结: 为什么推荐使用语义化的标签?

实例

<!--无序列表导航，没有数字 有序将ul换成ol即可，img为图片，加上超链接必须在a标签中，将新闻二字变成img即变成图片链接，如图标导航也可以采用这种方式-->
<ul>
    <li><a href="http://www.baidu.com" target="_blank" >首页</a></li>
    <li><a href="http://www.qq.com" target="_blank" >新闻</a></li>
    <li><a href="http://www.sohu.com" target="_blank" >
    <img src="https://www.xp.cn/upload/avatar/001/000/112/uniqid_rand.jpg";alt="hao" width="20%"></a></li>
</ul>

实例

<!--工资表，rowspan 列合并；colspan 行合并-->

<table border="1" width="500" cellspacing="0" cellpadding="5">
    <caption>
        <h3>工资</h3>
    </caption>
    <!-- 表头 -->
    <thead>
    <tr bgcolor="lightblue">
        <th>编号</th>
        <th>姓名</th>
        <th>应发</th>
        <th>实发</th>
        <th>社保</th>
    </tr>
    </thead>
    <!-- 主体 -->

    <tr>
        <td rowspan="3" align="center">1</td>
        <td>张三</td>
        <td>5000</td>
        <td>4500</td>
        <td>500</td>
    </tr>
    <tr>
        <!--<td>2</td>-->
        <td>李四</td>
        <td>4000</td>
        <td>3500</td>
        <td>500</td>
    </tr>
    <tr>
        <!--<td>3</td>-->
        <td>王五</td>
        <td>2500</td>
        <td>2000</td>
        <td>500</td>
    </tr>
    <!-- 底部 -->

    <tr>
        <td colspan="3" align="center">合计:</td>
        <!-- <td>x</td> -->
        <!-- <td>x</td> -->
        <td></td>
        <td>1500</td>
    </tr>
</table>

实例

<!--id和for属性要一致，否则点击文字不能移动到填写框，<input type="radio" name="yusuan" id="a3" checked><label for="a3">3000</label>，
checked代表默认，放哪里默认哪个，本案默认为3000；

<input type="checkbox" name="hobby[]" value="xcx" id="xcx" checked><label
            for="programme">小程序</label>

checkbox为单选圆点默认，本案为默认选择小程序

-->
<form action="manager.php" method="POST">
    <p>
       
        <label for="username">账号:</label>
        <input type="text" id="username" name="username" value="若">
    </p>

    <p>
        <label for="password">密码:</label>
        <input type="password" id="password" name="password" placeholder="必须在6-12位之间">
    </p>


    <p>
        <label for="age">年龄:</label>
        <input type="number" id="age" name="age" min="16" max="80">
    </p>
    <p>
        <label for="email">邮箱:</label>
        <input type="email" id="email" name="email" placeholder="example@email.com">
    </p>

<p>
       
        <label for="dizhi">详细地址</label>
        <input type="text" id="dizhi" name="dizhi" value="地址">
    </p>
    <p>
        <label for="">省</label>
        <!-- 下拉列表 -->
        <select name="" id="">
            <optgroup label="北京">
                <option value="">请选择</option>
                <option value="">东胜区</option>
                <option value="">西城区</option>
                <option value="">丰台区</option>
            </optgroup>

            <optgroup label="天津">
                <option value="">港口区</option>
                <option value="">西门区</option>
                <option value="">大华区</option>
            </optgroup>

        </select>
    </p>

    <p>
        <label for="">需求:</label><!--多选框-->
        <input type="checkbox" name="hobby[]" value="soft" id="soft"><label for="soft">软件开发</label>
        <input type="checkbox" name="hobby[]" value="xcx" id="xcx" checked><label
            for="programme">小程序</label>
        <input type="checkbox" name="hobby[]" value="shop" id="shop"><label for="movies">商城</label>
    </p>

    <p>
        <label for="a2">预算:</label><!--单选框-->
        <input type="radio" name="yusuan" id="a1"><label for="a1">1000</label>
        <input type="radio" name="yusuan" id="a2"><label for="a2">2000</label>
        <input type="radio" name="yusuan" id="a3" checked><label for="a3">3000</label>
    </p>

    <p>
        <label for="photo">文件上传:</label>
        <input type="file" name="wenjian" id="wenjian">

    </p>

    <p>
        <input type="submit" name="submit" value="提交">
        <input type="reset" name="reset" value="重填">
       

    </p>

</form>

实例

<iframe src="https://www.baidu.com" frameborder="0" width="500" height="400"></iframe><!--内联iframe框架页面-->



<hr>


<!--网站后台 内联页面  非iframe内联框架-->

<ul style="float: left;margin-right: 15px;">
    <li><a href="1.html" target="content">我的家</a></li>
    <li><a href="2.html" target="content">我家人</a></li>
    <li><a href="3.html" target="content">我的资产</a></li>
</ul>
<iframe srcdoc="<h2>欢迎使用若后台</h2>" frameborder="1" name="content" width="530" height="450"></iframe>

总结: 为什么推荐使用语义化的标签?

答：语义化便于维护代码，换程序员也可以轻松上手；更好的让蜘蛛理解页面意思，便于站点收录，对SEO优化友好。