简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > HTML基础标签作业-九期线上
Blogger Information
Blog 16
fans 0
comment 0
visits 12375
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
HTML基础标签作业-九期线上
wenbin0209
Original
912 people have browsed it

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

        HTML:超文本标记语言

        HTTP:超文本传输协议

        通过HTTP协议发起请求到服务器，返回响应到客户端，将html内容显示出来。


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

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>导航</title>
</head>
<body>
    <ul>
        <li><a href="https://www.jd.com/" target="_blank">京东</a></li>
        <li><a href="https://www.taobao.com/" target="_blank">淘宝网</a></li>
        <li><a href="https://www.vip.com/" target="_blank"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1572431433048&di=377e4fb94da2635fdf173ecca56a536f&imgtype=0&src=http%3A%2F%2Fimg.itmop.com%2Fupload%2F2015-6%2F201562121128.png" alt="唯品会">唯品会</a></li>
    </ul>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

微信图片_20191030202532.jpg

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

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品表</title>
</head>
<body>
    <table align="center"  border="1" cellspacing="0" cellpadding="5">
        <caption>手机列表</caption>
        <thead>
            <tr>
                <th>编号</th>
                <th>商品名</th>
                <th>单价</th>
                <th>数量</th>
                <th>金额</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td >1</td>
                <td>华为 HUAWEI Mate 30 Pro 5G 麒麟990 OLED环幕屏双4000万徕卡电影四摄8GB+256GB亮黑色5G全网通版</td>
                <td>￥6899.00</td>
                <td >1</td>
                <td rowspan="3" align="center">未知</td>
            </tr>
            <tr>
                <td>2</td>
                <td>小米9 Pro 5G 骁龙855Plus 30W无线闪充 12GB+512GB 钛银黑 双卡全网通 全面屏拍照智能新品游戏手机</td>
                <td>￥4299.00</td>
                <td>1</td>
                
            </tr>
            <tr>
                <td>3</td>
                <td>vivo iQOO Pro 8GB+128GB 竞速黑 高通骁龙855Plus手机 4800万AI三摄 44W超快闪充 4G全网通手机</td>
                <td>￥3198.00</td>
                <td>1</td>
               
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td colspan="3" align="center">合计</td>
                <td>3</td>
                <td>￥14,396</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

微信图片_20191030202538.jpg

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

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h3>用户注册</h3>
    <form>
        <p>
            <label for="username">账号</label>
            <input type="text" id="username" name="username" placeholder="请输入登录账号">
        </p>
        <p>
            <label for="password">密码</label>
            <input type="text" id="password" name="password" placeholder="请输入密码">
        </p>
        <p>
            <label for="email">邮箱</label>
            <input type="text" id="email" name="email" placeholder="请输入邮箱">
        </p>
        <p>
            <label for="age">年龄</label>
            <input type="number" id="age" name="age" min="16" max="80">
        </p>
        <p>
            <label for="">课程</label>
            <select name="课程" id="xxx">
                <optgroup label="前端">
                    <option va>HTML5</option>
                    <option>CSS3</option>
                    <option>JavaScript</option>
                </optgroup>

                <optgroup label="后端">
                    <option>php</option>
                    <option>java</option>
                    <option>sql</option>
                </optgroup>
            </select>
        </p>
        <p>
            <label for="sex">性别</label>
            <input type="radio" name="gender" id="male" checked><label for="male">男</label>
            <input type="radio" name="gender" id="id="female"><label for="female">女</label>
            <input type="radio" name="gender" id="id="secrecy"><label for="female">保密</label>
        </p>
        <p>
            <label for="photo">头像上传:</label>
            <input type="file" name="photo" id="photo">
        </p>
        <p>
            <button>注册</button>
        </p>
    </form>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

微信图片_20191030202542.jpg

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


实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内联标签</title>
</head>
<body>
    <ul style="float: left;margin-right: 15px;">
        <li><a href="https://passport.bilibili.com/login" target="test">登录</a></li>
        <li><a href="https://weibo.com/" target="test">欢迎使用</a></li>
        <li><a href="https://sh.qihoo.com/pc/home?sign=360chrome" target="test">注销</a></li>
    </ul>
    <iframe srcdoc="<h2>欢迎使用yjCMS</h2>" frameborder="1" name="test" width="500" height="550"></iframe>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

微信图片_20191030202548.jpg

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

1、有利于SEO，有利于搜索引擎爬虫更好的理解我们的网页，从而获取更多的有效信息，提升网页的权重。

2、便于团队开发和维护，语义化的HTML可以让开发者更容易的看明白，从而提高团队的效率和协调能力。

微信图片_20191030202552.jpg


Correction status：qualified

Teacher's comments：努力一定会有回报 写得很认真, 望坚持下去
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！