博客列表 >第二课 HTML的常用标签

第二课 HTML的常用标签

王伟
王伟原创
2019年10月30日 18:18:53604浏览

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

        HTML是一种超文本标记语言,(全称是Hypertext Markup Language)它包括一系列标签.通过这些标签可以将网络上的文档格式统一,HTML文本是由HTML命令组成的描述性文本,HTML命令可以说明文字,图形、动画、声音、表格、链接等。   HTTP是一种超文本传输协议,(全称是Hypertext Transfer Protocol)它通常运行在能够联网的设备上,它指定了客户端可能发送给服务器什么样的消息以及得到什么样的响应。  他们之间有什么联系?HTML做成的客户端需要HTTP的传输协议,没HTTP协议,数据不能传输,HTML也没有什么用了。

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


实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>导航</title>
</head>
<body>
<h2 style="color:#ff0000;">导航制作</h2>
<ul>
    <li><a href="#" target="_parent">首页</a></li>
    <li><a href="#" target="_blank">类目一</a></li>
    <li><a href="#" target="_blank">类目二</a></li>
    <li><a href="#" target="_blank">类目三</a></li>
    <li><a href="#" target="_blank">类目四</a></li>
</ul>
<a href="https://www.php.cn/jishu/php/" target="_blank">
    <img src="https://www.php.cn/static/images/index_php_item2.jpg?1" alt="加载中" title="每日编程"/></a>
</body>
</html>

运行实例 »

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


实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="5" width="500">
    <caption><h3>购物车</h3></caption>
        <thead>
            <tr bgcolor="#f5f5dc">
                <th>序号</th>
                <th>名称</th>
                <th>单价</th>
                <th>数量</th>
                <th>金额</th>
            </tr>
        </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>苹果</td>
            <td>10</td>
            <td>1</td>
            <td>10</td>
        </tr>
    </tbody>
    <tbody>
    <tr>
        <td>2</td>
        <td>橘子</td>
        <td>8</td>
        <td>7</td>
        <td>56</td>
    </tr>
    </tbody>
    <tbody>
    <tr>
        <td>3</td>
        <td>香蕉</td>
        <td>3</td>
        <td>8</td>
        <td>24</td>
    </tr>
    </tbody>
    <tfoot>
        <td colspan="3" align="center">合计:</td>
        <td>16</td>
        <td>90</td>
    </tfoot>
</table>
</body>
</html>

运行实例 »

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

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
</head>
<body>
<form>
    <p>
        <label for="zh1">账号:</label>
        <input type="text" name="zh" id="zh1" placeholder="请输入账号">
    </p>
    <p>
        <label for="password">密码:</label>
        <input type="password" name="password" id="password" placeholder="请输入密码"
    </p>
    <p>
        <label for="nan">性别:</label>
        <input type="radio" name="nv" id="nan" checked><label for="nan">男</label>
        <input type="radio" name="nv" id="v"><label for="v">女</label>
        <input type="radio" name="nv" id="bm"><label for="bm">保密</label>
    </p>
    <p>
        <label for="nl">年龄:</label>
        <input type="number" name="nl" id="nl" min="16" max="60">
    </p>
    <p>
        <label>爱吃的水果</label>
        <input type="checkbox" name="sg" id="sg1" checked><label for="sg1">橘子</label>
        <input type="checkbox" name="sg" id="sg2" ><label for="sg2">香蕉</label>
        <input type="checkbox" name="sg" id="sg3" ><label for="sg3">甘蔗</label>
        <input type="checkbox" name="sg" id="sg4" ><label for="sg4">苹果</label>
    </p>
    <p>
        <label for="dq">地区</label>
        <select name="dq" id="dq">
            <optgroup label="山东省">
                <option value="">济南</option>
                <option value="" selected>青岛</option>
                <option value="">东营</option>
            </optgroup>
            <optgroup label="河北省">
                <option value="">石家庄</option>
                <option value="">邯郸</option>
            </optgroup>
        </select>
    </p>
    <p>
        <label for="email">邮箱:</label>
        <input type="email" name="email" id="email" placeholder="请输入邮箱地址" autofocus required checked
        autocapitalize="off">
    </p>
    <p>
        <label for="tx">头像上传:</label>
        <input type="file" name="photo" id="tx">
    </p>
    <p>
        <button>提交</button>
        <input type="reset" name="reset" value="重置">
    </p>
</form>
</body>
</html>

运行实例 »

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

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议