HTML上机

最新推荐文章于 2024-05-23 20:09:14 发布

哥哥好棒棒

最新推荐文章于 2024-05-23 20:09:14 发布

阅读量817

点赞数 2

分类专栏： html 文章标签： html css 前端

本文链接：https://blog.csdn.net/xfhxdfg/article/details/122681343

版权

html 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一、做一个表格，3行，4列，内容不限，表格格式要求

网页标题栏有显示；网页内容有标题；表格居中；表格有表头；表格显示内容有属性差异：表格间距；表格背景色；文字的位置、大小。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学生信息表</title>
</head>
<body>
<h1 align="center">学生信息表</h1>
<table border="1"width="80%" id="table" align="center">
    <tr>
        <th>姓名</th>
        <th>性别</th>
        <th>年龄</th>
        <th>是否单身</th>
    </tr>
    <tr bgcolor="aqua">
        <td align="center">张三</td>
        <td>女</td>
        <td align="center">150</td>
        <td align="center">是</td>
    </tr>
    <tr>
        <td align="center">王二麻</td>
        <td>男</td>
        <td align="center">8</td>
        <td align="center">否</td>
    </tr>

</table>

</body>
</html>

二、创建一个表单，行按照20%和80%划分frameset

(a)20%frame部分显示多个链接

(b)点击任一个超链接，在80%frame部分显示对应的页面

(c)登录页面login.html

(d)注册页面register.html，表单实现注册用户相关信息录入，包含提交和重置按钮。

(e)基本信息包括：姓名，年龄，生日，所在城市，爱好，联系电话等

2）如此6的网页：<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>如此6的网页</title>
    <style type="text/css">
        a.login-btn1{
            text-decoration: none;
          /*  background-color: aqua;*/
            font-size: 50px;
            margin-left: 10px;

        }
        a.login-btn2{
            text-decoration: none;
          /*  background-color:red ;*/
            font-size: 50px;
            margin-left: 80px;

        }
        a.wamg{
            text-decoration: none;
            font-size: 15px;
        }
        p.ziti{
            font-size: 15px;
        }
        p.ba{
            font-size: 15px;
        }

    </style>
</head>
<img src="timg.jpg" width="100%" height="100%"><br>
    <a href="实验1.2.2.html" target="main" class="login-btn1"><font color="red">登录</font></a>
    <a href="实验1.2.3.html" target="main" class="login-btn2">注册</a></br>
    <p class="ziti">友情提示王者下载处——
    <a href="https://pvp.qq.com/" class="wamg">王者荣耀</a>
    </p>
<p class="ba">
    <a href="https://tieba.baidu.com/f?kw=%E7%8E%8B%E8%80%85%E8%8D%A3%E8%80%80%E8%B4%B4"><font color="aqua">王者贴吧</font></a>
</p>
</body>
</html>

登录：<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
</head>
<body style=" background-image: url(2.jpg);
               background-repeat: no-repeat;
               background-size: 1200px 700px">
<h1 style="color: red" >欢迎登录</h1>
<form id="form1" name="form1" method="post" action="ShowInfo.php">
    <p>
        用户名:<input name="txtUserName" style="color: gold" type="text" value="" /><br>
    </p>
    <p>
        密&nbsp;&nbsp;&nbsp;码:  <input name="txtUserpass" style="color: red" type="password" value="" /><br>
    </p>
    <p>
        <button type="submit" name="submit" id="submit">提交</button>

    </p>
</form>

</body>
</html>

注册：<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
    <style type="text/css">
        p.tishi{
            font-style: oblique;
            font-size: large;
        }

    </style>
</head>
    <body style="background-image: url(王者.jpg);
     background-repeat: no-repeat;
     background-size: 1200px 700px">
    <h1 style="color: red">欢迎成为王者荣耀的用户</h1>
    <p>
       姓名:<input name="UserName"  type="text" value="" />
       年龄:<input name="age" style="color: gold" type="text" value="" /><br>
    </p>
    <p>
        生日：<input type="datetime-local">
    </p>
    <p>
        擅长的位置：<input type="checkbox" name="like">对抗路
                   <input type="checkbox" name="like">发育路
                   <input type="checkbox" name="like">中路
                   <input type="checkbox" name="like">游走
                   <input type="checkbox" name="like">啥也不是
    </p>
    <p>
        身份证号:<input name="shenfen"  type="text" value="" /><br>
        联系方式:<input name="dianhua" style="color: gold" type="text" value="" /><br>
        所在城市:<input name="city"  type="text" value="" />
    </p>
    <p>
        <button type="submit" name="submit" id="submit">提交</button>
        <button type="reset" name="reset" id="reset">重置</button>
    </p>
    <p class="tishi" ><font color="red">
        温馨提示：不要做零氪金玩家，想要通过白嫖来达到<br>欢乐的目的是不存在的，请时刻记住，充钱使你强大<br>,使你欢乐，感谢您对我们的支持，祝您游戏愉快。
    </font>

    </p>


    </body>
</html>

框架：<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>框架</title>
</head>
<frameset framespacing="1" border="1" bordercolor="#333399" frameborder="yes">
    <frameset cols="350,*">
        <frame name="left" target="main" src="实验1.2.html" scrolling="auto" frameborder="1">
        <frame name="main" src="实验1.2.2.html" scrolling="auto" noresize frameborder="1">
    </frameset>
    <noframes>
<body>

</body>
    </noframes>
</frameset>
</html>

三、创建一个表单，包含下面的组建元素：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>手机品牌调查表</h1>
    <p>
        请输入您的姓名：<input type="text">

    </p>

    <p>
        性&nbsp;&nbsp;&nbsp;别：<input type="radio" name="gander" checked>男
        <input type="radio" name="gander">女
    </p>
    <p>
        邮箱：<input type="text">
    </p>
    <p>
        1、您使用过多少部手机:<select type="number" id="number">
        <option value="1部"selected>1部</option>
        <option value="2部">2部</option>
        <option value="3部">3部</option>
        <option value="4部">4部</option>
        <option value="5部">5部</option>
        <option value="6部">6部</option>
        <option value="7部">7部</option>
        <option value="8部">8部</option>
    </select>
    </p>
    <p>
       最早什么时候开始使用手机的： <input type="date">
    </p>
    <p style="color: blue">
    2、如果让你从下面品牌选择，你会选择那些品牌？
    </p>
    <p>
        <input type="radio" name="brand" >苹果
        <input type="radio" name="brand">华为
        <input type="radio" name="brand">HTC
        <input type="radio" name="brand">OPPO
        <input type="radio" name="brand">三星
        <input type="radio" name="brand">摩托罗拉
    </p>
    <p style="color: blueviolet">
     3、如果您更换手机，您将关注下列哪些功能是否具备？
    </p>
        <input type="checkbox" name="function" >影视音乐
        <input type="checkbox" name="function" >娱乐游戏
        <input type="checkbox" name="function" >摄像功能</br>
        <input type="checkbox" name="function" >信息储存容量
        <input type="checkbox" name="function" >机型外观
        <input type="checkbox" name="function" >待机时长

    </p>
    <p style="color: darkorange">
        4、请您描述以下在您心目中理想的手机是哪种类型？
    </p>
     <p>
         <form id="forml" name="forml" method="post" >
         <textarea name="details" cols="50" rows="10"></textarea>
         </form>
     </p>
     <p>
         <form id="auto" name="auto" method="post">
          <input type="submit" name="submit" id="submit" value="提交"/>
          <input type="reset" name="reset" id="reset" value="重置"/>
         </form>
     </p>

</body>
</html>

哥哥好棒棒

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
HTML上机

一、做一个表格，3行，4列，内容不限，表格格式要求网页标题栏有显示；网页内容有标题；表格居中；表格有表头；表格显示内容有属性差异：表格间距；表格背景色；文字的位置、大小。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>学生信息表</title></head><body><h1 alig
复制链接

扫一扫