Blogger Information
Blog 19
fans 0
comment 0
visits 11108
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
html5常用标签与属性--php培训9期线上班
炭烧鸡腿卤煮米线
Original
775 people have browsed it

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

HTML:超文本标记语言--一种同用的编写超文本的语言

HTTP:超文本传输协议--一套服务端与客户端都必须要遵守的请求和响应的标准或规范

联系:通过html语言编写文档,遵守http协议进行传输,客户端解析后显示出相关的信息,达到客户端与服务端之间的联系2.制作一个导航,要求使用到列表,链接,图片,并使用图片做为链接元素

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

实例

<!DOCTYPE html>
<!--html是根元素标签,en代表英文,zh-CN代表中文-->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>导航</title>
</head>
<body>
<ul>
    <li><a href="https://www.php.cn/" target="_blank"><img src="https://www.php.cn/static/images/index_banner.png?1" alt="首页" width="70">首页</a></li>
    <li><a href="https://www.php.cn/xiazai/" target="_blank"><img src="https://img.php.cn/upload/webpage/000/013/709/598d6087023ae563.jpg" alt="资源" width="70">资源</a></li>
    <li><a href="https://www.php.cn/course.html" target="_blank"><img src="https://img.php.cn/upload/course/000/000/001/5d240e769553b901.jpg" alt="课程" width="70">课程</a></li>
    <li><a href="https://www.php.cn/wenda.html" target="_blank"><img src="https://www.php.cn/upload/system/000/000/000/5a9111e703515423.jpg" alt="论坛" width="70">论坛</a></li>
</ul>
</body>
</html>

运行实例 »

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

手抄:

导航1.0.jpg

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

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品信息表</title>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="5" width="400">
    <caption><h2>商品信息表</h2></caption>
    <thead>
    <tr bgcolor="#7fffd4">
        <th>序号</th>
        <th>商品名称</th>
        <th>型号</th>
        <th>颜色</th>
        <th>价格</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td align="center">1</td>
        <td align="center">nike</td>
        <td align="center">空军一号</td>
        <td align="center">白</td>
        <td align="center">749</td>
    </tr>
    <tr>
        <td align="center">2</td>
        <td align="center">adidas</td>
        <td align="center">Stan Smith</td>
        <td align="center">白</td>
        <td align="center">499</td>
    </tr>
    <tr>
        <td align="center">3</td>
        <td align="center">vans</td>
        <td align="center">Old Skool</td>
        <td align="center">黑</td>
        <td align="center">535</td>
    </tr>
    <tr>
        <td align="center">4</td>
        <td align="center">converse</td>
        <td align="center">***</td>
        <td align="center">黑</td>
        <td align="center">439</td>
    </tr>
    </tbody>
    <tfoot>
    <tr>
        <td colspan="4" align="right">总计</td>
<!--        <td></td>-->
<!--        <td></td>-->
<!--        <td></td>-->
        <td align="center">2222</td>
    </tr>
    </tfoot>
</table>
</body>
</html>

运行实例 »

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

手抄:

信息表.jpg

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

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
</head>
<body>
<h3>个人信息注册</h3>
<form action="login.php" method="post">
    <p>
        <label for="photo">头像上传:</label>
        <input type="file" name="photo" id="photo">
    </p>
    <p>
        <label for="username">账号:</label>
        <input type="text" id="username" name="username" value="shy">
    </p>
    <p>
        <label for="password">密码:</label>
        <input type="password" id="password" name="password" placeholder="不少于6位">
    </p>
    <p>
        <label for="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="male">性别:</label>
        <input type="radio" name="gender" id="male"><label for="male">男</label>
        <input type="radio" name="gender" id="female" checked><label for="female">女</label>
        <input type="radio" name="gender" id="secret"><label for="secret">保密</label>
    </p>
    <p>
        <label for="">擅长语言:</label>
        <input type="checkbox" name="hobby[]" value="ability1" id="ability1"><label for="ability1">PHP语言</label>
        <input type="checkbox" name="hobby[]" value="ability2" id="ability2"><label for="ability2">Java语言</label>
        <input type="checkbox" name="hobby[]" value="ability3" id="ability3"><label for="ability3">Python语言</label>
    </p>
    <p>
        <label for="">学历:</label>
        <select name="coures" id="">
            <option value="">请选择</option>
            <option value="">博士</option>
            <option value="">硕士</option>
            <option value="">学士</option>
            <option value="">大专及以下</option>
        </select>
    <p>
        <label for="">意向职位:</label>
        <select name="coures" id="">
            <option value="">请选择</option>
            <optgroup label="技术部">
                <option value="">seo专员</option>
                <option value="">前端工程师</option>
                <option value="">前端实习</option>
            </optgroup>

            <optgroup label="业务部">
                <option value="">业务经理</option>
                <option value="">推广专员</option>
                <option value="">客服</option>
            </optgroup>

        </select>
    </p>
<p>
    <input type="submit" name="submit" value="提交">
<!--    <button>提交</button>这个也行-->
</p>
</form>
</body>
</html>

运行实例 »

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

手抄:

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

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内链框架</title>
</head>
<body>
<!--<iframe src="" frameborder="0"></iframe>-->
<ul>
    <li><a href="demo2.html" target="content">商品列表</a></li>
    <li><a href="demo3.html" target="content">用户信息</a></li>
    <li><a href="demo1.html" target="content">首页</a></li>
</ul>
<iframe srcdoc="<h2>欢迎进入后台</h2>" frameborder="1" name="content" width="530" height="350"></iframe>
</body>
</html>

运行实例 »

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

手抄:

内联框架.jpg

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

1.使网页结构简洁,易于调整;2.有利于seo优化,使网页易被收录,符合w3c的标准

2.有利于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