10月29日作业

# 10月29日作业:

## 1. 描述HTML与HTTP是什么,他们之间有什么联系?

- 答：简单的说明：html是超文本标记语言，http是超文本传输协议，他们直接的联系简单的说http的产生是为了服务于html的传输服务。

## 2. 制作一个导航,要求使用到列表,链接,图片,并使用图片做为链接元素

    

实例

<nav>
        <ul>
            <li>
                <a href="">
                    <img src="./img/首页.png" alt="首页" >
                    首页
                </a>
            </li>
            <li>
                <a href="">
                    <img src="./img/关于我们.png" alt="关于我们">
                    关于我们
                </a>
            </li>
            <li>
                <a href="">
                    <img src="./img/新闻中心.png" alt="新闻中心">
                    新闻中心
                </a>
            </li>
            <li>
                <a href="">
                    <img src="./img/产品中心.png" alt="产品中心">
                    产品中心
                </a>
            </li>
            <li>
                <a href="">
                    <img src="./img/联系我们.png" alt="联系我们">
                    联系我们
                </a>
            </li>
        </ul>
    </nav>

## 3. 制作一张商品信息表, 要求用到标题, 头部与底部, 行与列方向的合并

    

实例

<table border="1" cellspacing="0" width="300">
        <caption>
            这是一张商品表
        </caption>
        <thead>
            <tr>
                <th>id</th>
                <th>商品名称</th>
                <th>成本价格</th>
                <th>销售价格</th>
                <th>成本总价</th>
                <th>销售总价</th>
            </tr>
        </thead>
        <tbody>
            <tr align="center">
                <td>2</td>
                <td>羽毛球</td>
                <td>5</td>
                <td>25</td>
                <td rowspan="4">95.5</td>
                <td rowspan="4">477.5</td>
            </tr>
            <tr align="center">
                <td>3</td>
                <td>乒乓球</td>
                <td>0.5</td>
                <td>2.5</td>
            </tr>
            <tr align="center">
                <td>4</td>
                <td>篮球</td>
                <td>40</td>
                <td>200</td>
            </tr>
            <tr align="center">
                <td>5</td>
                <td>足球</td>
                <td>50</td>
                <td>250</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td colspan="4" align="center">本次批发价格清单</td>
                <td colspan="2" align="center">wangwen</td>
            </tr>
        </tfoot>
    </table>

## 4. 制作一张完整的用户注册表单, 要求尽可能多的用到学到的表单控件

    

实例

<form action="xxx.php" method="post" enctype="multipart/form-data">
        <p>
            <label for="username">用户名称</label>
            <input type="text" name="username" id="username" value="" />
        </p>
        <p>
            <label for="password">登入密码</label>
            <input type="password" name="password" id="password" value="" />
        </p>
        <p>
            <label>性别</label>
            <input type="radio" name="sex" id="man" value="男" /><label for="man">男</label>
            <input type="radio" name="sex" id="woman" value="女" /><label for="woman">女</label>
        </p>
        <p>
            <label for="age">年龄</label>
            <input type="number" name="age" id="age" value="" min="18" max="80"/>
        </p>
        <p>
            <label>就读学校</label>
            <select name="school">
                <optgroup label="线上学校">
                    <option value="1">PHP中文网</option>
                    <option value="2">PHP中文网</option>
                    <option value="3">PHP中文网</option>
                </optgroup>
                <optgroup label="线下学校">
                    <option value="1">五道口学校</option>
                    <option value="2">清华大学</option>
                    <option value="3">深圳大学</option>
                </optgroup>
            </select>
        </p>
        <p>
            <label for="date">入学时间</label>
            <input type="date" name="入学时间" id="date" value="" />
        </p>
        <p>
            <label for="toux">头像</label>
            <input type="file" name="photo" id="toux" value="" />
        </p>    
    </form>

## 5. 制作一个网站后面, 要求使用`<iframe>`内联框架实现

   

实例

 <ul>
        <li><a href="XXXX1.html"  target="myFrameName">操作导航一</a></li>
        <li><a href="XXXX2.html"  target="myFrameName">操作导航二</a></li>
        <li><a href="XXXX3.html"  target="myFrameName">操作导航三</a></li>
    </ul>
    <iframe src="" id="myframe" name="myframe" scrolling="no" frameborder="0" width="300" height=""></iframe>

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

- 因为代码比较直观简洁，还有就是有利于浏览器的蜘蛛抓取，有利于网站给浏览器收入，有比较好的排名，增加网站的曝光率。