Community Learn Tools Library Leisure
search
English
Home > List of blog posts > html基本标签的使用-九期线上班
Blogger Information
Blog 12
fans 0
comment 0
visits 8514
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基本标签的使用-九期线上班
brait
Original
911 people have browsed it

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

    答：HTML是超文本标记语言，http是超文本传输协议；html写好的网页通过http协议进行传输。

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

实例

<!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> 制作一个导航,要求使用到列表,链接,图片,并使用图片做为链接元素</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>

运行实例 »

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

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

实例

<!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>制作一张商品信息表, 要求用到标题, 头部与底部, 行与列方向的合并</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>

运行实例 »

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

2.jpg

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

实例

<!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>制作一张完整的用户注册表单, 要求尽可能多的用到学到的表单控件</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>

运行实例 »

点击 "运行实例" 按钮查看在线实例666.jpg555.jpg

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

实例

<!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>制作一个网站后面, 要求使用`iframe`内联框架实现</h2>
    <ul>
        <li><a href="form.html" target="content">用户注册</a></li>
        <li><a href="nav.html" target="content">导航</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>

运行实例 »

点击 "运行实例" 按钮查看在线实例微信图片_20191030193626.jpg

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

答：用语义化的标签便于做seo且符合W3C的规则。而且语义化标签更方便维护代码。

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