博客列表 >HTML5常用表格表单及内联框架标签与属性 - PHP培训九期线上班

HTML5常用表格表单及内联框架标签与属性 - PHP培训九期线上班

SmileHoHo
SmileHoHo原创
2019年10月30日 12:22:52480浏览

1. 描述HTML与HTTP是什么,他们之间有什么联系?
(1)HTML:超文本标记语言(使用htm超文本标记语言编写的文档以‘.html’为扩展名)
(2)HTTP:超文本传输协议(是一套客户端与服务器端都必须遵循的请求和响应的标准或规范
2. 制作一个导航,要求使用到列表,链接,图片,并使用图片做为链接元素
(1)导航使用到的是无序列表 ul标签,li标签,a标签,img标签
(2)下面我们来看看实例,实例如下:

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>无序列表的导航实例</title>
</head>
<body>
<ul>
    <li><a href="https://www.php.cn"><img src="images/logo.png" alt="logo"></a></li>
    <li><a href="https://www.php.cn"><img src="images/1.png" alt="首页"></a></li>
    <li><a href="https://www.php.cn"><img src="images/2.png" alt="视频教程"></a></li>
    <li><a href="https://www.php.cn"><img src="images/3.png" alt="入门教程"></a></li>
    <li><a href="https://www.php.cn"><img src="images/4.png" alt="社区问答"></a></li>
    <li><a href="https://www.php.cn"><img src="images/5.png" alt="技术文章"></a></li>
    <li><a href="https://www.php.cn"><img src="images/6.png" alt="编程词典"></a></li>
    <li><a href="https://www.php.cn"><img src="images/7.png" alt="资源下载"></a></li>
    <li><a href="https://www.php.cn"><img src="images/8.png" alt="工具下载"></a></li>
</ul>
</body>
</html>

运行实例 »

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


3. 制作一张商品信息表, 要求用到标题, 头部与底部, 行与列方向的合并
(1)HTML <caption>元素展示一个表格的标题, 它常常作为<table>的第一个子元素出现,同时显示在表格内容的最前面。
(2)HTML<thead>元素定义了一组定义表格的列头的行。
(3)HTML元素<tbody>元素在一个<table>元素中可以出现一个或者更多.代表表格的主体内容
(4)HTML元素<tfoot>定义了一组计算表格中各列总和

下面我们开看看:

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品信息表</title>
</head>
<body>
    <table border="1" cellspacing="0" cellpadding="5">
        <caption><h3>商品信息表</h3></caption>
        <thead>
            <tr>
                <th>编号</th>
                <th>商品名称</th>
                <th>运行内存</th>
                <th>机身存储</th>
                <th>操作系统</th>
                <th>机身颜色</th>
                <th>分辨率</th>
                <th>单价(元)</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td rowspan="2">华为 HUAWEI Mate20 X (5G) 7nm工艺5G旗舰芯片</td>
                <td>8GB</td>
                <td>256G</td>
                <td>Android(安卓)</td>
                <td>宝石蓝</td>
                <td>全高清FHD+</td>
                <td>6199</td>
            </tr>
            <tr>
                <td>2</td>
                <td>8GB</td>
                <td>128GB</td>
                <td>Android(安卓)</td>
                <td>宝石蓝</td>
                <td>全高清FHD+</td>
                <td>5199</td>
            </tr>
            <tr>
                <td>3</td>
                <td>华为 HUAWEI Mate 20 麒麟980AI智能芯片</td>
                <td>6GB</td>
                <td>64GB</td>
                <td>Android(安卓)</td>
                <td>亮黑色</td>
                <td>全高清FHD+</td>
                <td>3199</td>
            </tr>
            <tr>
                <td>4</td>
                <td rowspan="2">华为 HUAWEI Mate 30 5G 麒麟990 5G全网通版</td>
                <td>8GB</td>
                <td>128GB</td>
                <td>Android(安卓)</td>
                <td>罗兰紫</td>
                <td>全高清FHD+</td>
                <td>5499</td>
            </tr>
            <tr>
                <td>5</td>
                <td>8GB</td>
                <td>256GB</td>
                <td>Android(安卓)</td>
                <td>星河银</td>
                <td>全高清FHD+</td>
                <td>6199</td>
            </tr>
            <tr>
                <td>6</td>
                <td>华为 HUAWEI Mate 30 5G 麒麟990 5G全网通版</td>
                <td>8GB</td>
                <td>256GB</td>
                <td>Android(安卓)</td>
                <td>星河银</td>
                <td>全高清FHD+</td>
                <td>6199</td>
            </tr>
            <tr>
                <td colspan="8" align="center">以上商品价格仅供参考,请以官网价格为准</td>
            </tr>
        </tbody>
        <tfoot></tfoot>
    </table>
</body>
</html>

运行实例 »

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

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

(1)<form>元素定义 HTML 表单,HTML 表单用于搜集不同类型的用户输入
(2)表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等等

实例

<!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与input的id相同,点击用户名鼠标光标会跳到输入框中-->
            <label for="username">用户名:</label>
            <input type="text" name="username" id="username" value="请输入用户名">
        </p>
        <p>
            <label for="password">密码:</label>
            <input type="password" name="password" id="password" placeholder="请输入密码">
        </p>
        <p>
            <label for="password">确认密码:</label>
            <input type="password" name="password" id="password" placeholder="请确认密码">
        </p>
        <p>
            <label for="email">邮箱:</label>
            <input type="email" name="email" id="email" placeholder="example@email.com">
        </p>
        <p>
            <label for="age">年龄:</label>
            <input type="number" name="age" id="age" min="16" max="68" ">
        </p>
        <p>
            <label for="">课程:</label>
            <select name="coures" id="">
                <optgroup label="前端">
                    <option value="">HTML5</option>
                    <option value="">CSS3</option>
                    <option value="">JavaScript</option>
                    <option value="">其他</option>
                </optgroup>
                <optgroup label="后端">
                    <option value="" selected>PHP</option>
                    <option value="">MySQL</option>
                    <option value="">Larvael</option>
                    <option value="">其他</option>
                </optgroup>
            </select>
        </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" checked><label for="secrecy">保密</label>
        </p>
        <p>
            <label for="movie">兴趣爱好:</label>
            <input type="checkbox" name="hobby[]" value="game" id="game"><label for="game">玩游戏</label>
            <input type="checkbox" name="hobby[]" value="running" id="running"><label for="running">跑步</label>
            <input type="checkbox" name="hobby[]" value="study" id="study"><label for="study">学习</label>
            <input type="checkbox" name="hobby[]" value="writing" id="writing"><label for="writing">写作</label>
            <input type="checkbox" name="hobby[]" value="movie" id="movie"><label for="movie">看电影</label>
        </p>
        <p>
            <label for="">头像上传:</label>
            <input type="file" name="photo" id="photo">
        </p>
        <p>
            <input type="reset" name="reset" value="重置">
            <input type="submit" name="submit" value="提交">
        </p>
    </form>
</body>
</html>

运行实例 »

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

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

(1)frameborder:是否显示边框,1(yes),0(no)
(2)height:框架作为一个普通元素的高度,建议在使用css设置。
(3)width:框架作为一个普通元素的宽度,建议使用css设置。
(4)name:框架的名称,window.frames[name]时专用的属性。
(5)scrolling:框架的是否滚动。yes,no,auto。
(6)src:内框架的地址,可以使页面地址,也可以是图片的地址。

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后台模板 内联框架</title>
</head>
<body>
        <ul style="float: left;">
            <li><a href="1.html" target="content">网站导航</a></li>
            <li><a href="2.html" target="content">商品信息</a></li>
            <li><a href="3.html" target="content">用户注册</a></li>
        </ul>
        <iframe srcdoc="<h3>这是一个后台管理</h3>" frameborder="1" name="content" width="600" height="700"></iframe>

</body>
</html>

运行实例 »

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

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

(1)有利于SEO,有利于搜索引擎爬虫更好的理解我们的网页,从而获取更多的有效信息,提升网页的权重。
(2)结构更好,更利于开发人员的维护(可维护性更高,因为结构清晰,易于阅读)


QQ图片20191030122239.jpg

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