简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 1029作业
Blogger Information
Blog 13
fans 0
comment 0
visits 8820
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
1029作业
文永
Original
734 people have browsed it

HTML是超文本标记语言；它包括一系列的标签，通过这些标签可以将网络上的文档格式统一，HTML命令可以说明文字、图形、动画、声音、表格连接等。HTTP是一种超文本传输协议，它指定了客户端可以发送给服务器什么样的消息以及得到什么样的响应。它们之间的联系；HTML做成的客户端需要HTTP的传输协议，没有HTTP协议，数据不能传输，HTML也就没有意义了。

导航页


实例

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>导航</title>
</head>
<body>
<section>
    <ul style  =color:blue>
            <li>首页</li>
            <li>新闻</li>
            <li>娱乐</li>
            <li>体育</li>
    </ul>
    <li><a href="https://www.baidu.com/">购物</a></li>
    <li><a href="https://www.baidu.com/">商品</a></li>
    <li><a href="https://www.baidu.com/">详情</a></li>
    <li><a href="https://www.baidu.com/">售后</a></li>
    <img src="static/images/1.jpg" alt="图片"width="500">
    <a href="https://www.baidu.com">
        <img src="https://img.php.cn/upload/course/000/000/001/5d1c6dfc9eb09885.jpg" width="500" alt="百度">
        </a>
    <ol>
        <li>华为手机</li>
        <li>苹果手机</li>
        <li>小米手机</li>
    </ol>
    <hr>
    <dl>
        <dt>电话:</dt>
        <dd>010-123456789</dd>
        <dt>地址:</dt>
        <dd>北京市大兴区</dd>
        <dt>emamil:</dt>
        <dd>123456@email.com</dd>

    </dl>
</section>

</body>
</html>


表格页

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品信息表</title>
</head>
<body>
<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>1</td>
        <td>红酒</td>
        <td>100</td>
        <td>2</td>
        <td>200</td>
    </tr>
    <tr>
        <td>2</td>
        <td>水果</td>
        <td>50</td>
        <td>2</td>
        <td>100</td>
    </tr>
    <tr>
        <td>3</td>
        <td>可口可乐</td>
        <td>3</td>
        <td>5</td>
        <td>15</td>
    </tr>
    <tr>
        <td>4</td>
        <td>面包</td>
        <td>10</td>
        <td>5</td>
        <td>50</td>
    </tr>
    <tr bgcolor="#7fffd4">
        <td colspan="3" align="center">合计</td>
        <td>14</td>
        <td>365</td>
    </tr>
</table>
</body>
</html>


注册页

实例

<!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="username">账号</label>
       <input type="text" id="username" name="username" placeholder="只能为手机号或邮箱">
   </p> 
    <P>
        <label for="password">密码</label>
        <input type="password" id="password" name="password" placeholder="必须由字母和数字组成">
    </P>
    <p>
        <label for="email">邮箱</label>
        <input type="email"id="email"name="email"placeholder="examole@email.com">
    </p>
    <p>
                             <label for="">想学习的内容</label>
        <select name="" id="">
            <optgroup label="舞蹈类">
                <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[]" valur="game" id="game"><label for="game">玩游戏</label>
        <input type="checkbox" name="hobby[]" valur="xuexi" id="xuexi" checked ><label for="xuexi">学习</label>
        <input type="checkbox" name="hobby[]" valur="运动" id="sport"><label for="sport">运动</label>
    </p>
    <p>
        <label for="male">性别：</label>
        <input type="radio" name="gender" id="male"><label for="male">男</label>
        <input type="radio" name="gender" id="female"><label for="female">女</label>
        <input type="radio" name="gender" id="secrecy"><label for="secrecy">保密</label>
    </p>
    <p>
        <label for="age">年龄</label>
        <input type="number"id="age"name="age" min="18" max="40">
    </p>
    <p>
        <label for="photo">照片上传</label>
        <input type="file" name="photo" id="photo">
    </p>
    <p>
        <input type="submit"name="submit" valur="提交">
        <input type="reset" neme="rest" value="重写">
        <button type="button">注册</button>

    </p>


</form>
</body>
</html>


内联框架

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内联框架</title>
</head>
<body>
<iframe src="https://j.map.baidu.com/c1/IJ" frameborder="0" width="500" height="500"></iframe>
<hr>
<ul style="float: left;margin-right: 15px">
    <li><a href="dome1.html" target="content">主页</a></li>
    <li><a href="deme2.html" target="content">购物列表</a</li>
    <li><a href="demo3.html" target="content">用户注册</a</li>

</ul>
<iframe srcdoc="<h2>欢迎使用管理后台</h2>" frameborder="1" name="content" width="500" height="500"></iframe>
</body>
</html>

为什么推荐使用语义化标签？增强了可读性，能够清晰看出网页结构，方便开发和维护

运行实例 »

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

运行实例 »

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

运行实例 »

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

运行实例 »

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



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！