记录第一次html作业----创建一个登录界面

最新推荐文章于 2024-07-27 11:58:54 发布

chishuiLi

最新推荐文章于 2024-07-27 11:58:54 发布

阅读量692

点赞数 1

文章标签： html

本文链接：https://blog.csdn.net/qq_47711757/article/details/115257600

版权

使用WebStorm创建了首个HTML5文件Logon.html，构建了一个登录界面。通过添加和设置标签解决了红框和灰框问题。利用action属性实现页面跳转至Index.html，button的submit属性用于提交数据。初次尝试HTML，体会到了其易学性和实用性，未来将继续通过写博客记录学习历程。

摘要由CSDN通过智能技术生成

要求：
所用软件：WebStorm 2020.3.2 x64
打开之后新建，在web下新建一个html5文件，命名：Logon.html
首先解决红框—用<style>标签，插入

<style>
        div{
            border: 1px solid red;--边界为1像素，红色
            width:800px;--宽度800px；
          、 margin: 0 auto; --居中
        }
    </style>

没有height，标识高度能变化

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>test</title>
 <style>
     div{
         border: 1px solid red;
         width:800px;
     }
 </style>
</head>
<body>
<div>
 --这里面是红框里面的内容
</div>
</body>
</html>

这样运行就能得到红框一个
红框解决完后解决灰框
在头部的<style>标签中添加

fieldset{
        margin: 0 auto;--居中
        width: 90%;--宽度90%
    }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <style>
        div{
            border: 1px solid red;
            width:800px;
            margin: 0 auto;
        }
        fieldset{
            width: 90%;
            margin: 0 auto;
        }
    </style>
</head>
<body>
<div>
    我在红框里
    <fieldset>
        我在灰框里
    </fieldset>
</div>
</body>
</html>

这样基本格式就好了
现在来搞具体的
第一个红框里面的：

<fieldset>
        <legend>必填项</legend>
        <label for="TexName">用户名</label>
        <input type ="text" id="TexName" name="TexName" placeholder="请输入用户名" required="required" ><br>
        <label for="TexPass">密码</label>
       <input type ="password" id="TexPass" name="TexPass" placeholder="请输入密码(6~10个字符)" required