WEB前端(2)—— HTML经典案例

最新推荐文章于 2024-02-07 10:05:00 发布

会璇转地木马

最新推荐文章于 2024-02-07 10:05:00 发布

阅读量2k

点赞数 3

分类专栏： HTML 文章标签： html web

本文链接：https://blog.csdn.net/qq_46187519/article/details/119535465

版权

HTML 专栏收录该内容

10 篇文章 1 订阅

订阅专栏

案例一：(表格)

案例二：(表单)

HTML的框架元素：

前言：当我们开始接触HTML时处于懵懂状态不知道那些知识点重要，下面我将举几个HTML具有代表性和考试经常会出的案例和HTML的框架元素。

案例一：(表格)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格</title>
</head>
<body>
    <table>
        <!-- <colgroup> 标签用于对表格中的列进行组合，以便对其进行格式化 -->
        <colgroup>
            <col bgcolor="#f79d03"></col>
            <col bgcolor="#ffd4f5"></col>
            <col bgcolor="#e80063"></col>
            <col bgcolor="#24ff45"></col>
        </colgroup>
        <tr>
            <th>排名</th>
            <th>公司</th>
            <th>营收（单位：百万美元）</th>
            <th>利润（单位：百万美元）</th>
        </tr>
        <tr>
            <td>1</td>
            <td>公司A</td>
            <td>323、139.0</td>
            <td>12、284.0</td>
        </tr>
        <tr>
            <td>2</td>
            <td>公司B</td>
            <td>234、369.0</td>
            <td>35、235.0</td>
        </tr>
        <tr>
            <td>3</td>
            <td>公司C</td>
            <td>396、486.0</td>
            <td>58、758.0</td>
        </tr>
    </table>
</body>
</html>

运行效果如图：

案例二：(表单)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单</title>
</head>
<body>
    <h1>注册账号</h1>
    <form action="regist" method="post">
        用户名：<input type="text" name="username" id="username" value=""/>
        <input type="button" name="checkusername" id="checkusername" value="检查用户名是否被注册"/><br/>
        密码：<input type="password" name="password" id="password" value=""/><br/>
        确认密码：<input type="password" name="" id="re_password" value=""/><br/>
        性别：<input type="radio" name="sex" id="sex_man" value="man" checked="checked"/>男
        <input type="radio" name="sex" id="sex_woman" value="woman">女<br/>
        兴趣爱好：<input type="checkbox" name="interest" id="ins_football" value="volleyball" />排球
        <input type="checkbox" name="interest" id="ins_ping-pong" value="ping-pong"/>乒乓球<br/>
        选择头像：<input type="file" name="file" id="file" value=""/><br/>
        <input type="image" width="80px" height="80px" src="image/1074148.jpg"/><br/>
        <input type="reset" value="重置信息"/><input type="submit" id="submit" value="注册账号"/>
        <input type="hidden" name="regist" id="" value="default"/>
    </form>
</body>
</html>

运行效果如图：

HTML的框架元素：

首先我们要知道大部分网页布局DIV+CSS，也可能是框架集布局方式。

框架集布局用到了HTML框架集元素，框架集布局和普通布局最大的不同就是，框架集布局可以在同一个浏览器窗口显示一个以上的页面。

<frameset>:一个框架及用于组织多个窗口（框架），每一个框架有独立的HTML文档

<frame>: 用于定义<frameset>中的特定的窗口（框架），需要注意的是这个元素是空元素没有结束标签，建议写成<frame/>

<noframe>:用于为那些不支持框架级的浏览器显示文本<noframe>元素位于<frameset>元素内部

后期将继续更新前端内容。

会璇转地木马

关注

3
点赞
踩
11

收藏

觉得还不错? 一键收藏
1
评论
WEB前端(2)—— HTML经典案例

目录案例一：(表格)案例二：(表单)HTML的框架元素：前言：当我们开始接触HTML时处于懵懂状态不知道那些知识点重要，下面我将举几个HTML具有代表性和考试经常会出的案例和HTML的框架元素。案例一：(表格)<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" cont.
复制链接

扫一扫