一个简单的注册页面以及前端页面基本概念简单介绍

最新推荐文章于 2024-08-04 21:23:42 发布

松花酿酒Kitty

最新推荐文章于 2024-08-04 21:23:42 发布

阅读量1.5k

点赞数 1

分类专栏：注册页面前端页面基本概念文章标签： html css javascript js

本文链接：https://blog.csdn.net/quique/article/details/105508554

版权

注册页面同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

前端页面基本概念

1 篇文章 0 订阅

订阅专栏

前端页面基本概念以及一个简单的注册页面

- 前端页面基本概念
- 代码部分

先上图！

如图所示，该代码实现了出生日期，点击年、月后对日的响应。当然也可以用date实现，会更美观完善，这里只是在做练习，我也在代码里注释了date的写法。
“全选”、“反选”、“重置”三个按钮能够实现对应的响应。
这个table是在屏幕中央显示的。

前端页面基本概念

先简单介绍一下基本概念
HTML：超文本描述语言
它是一种XML格式的文件，且是文本文件。HTML到现在应该发展到6版本。HTML1到HTML4之间因为浏览器的差异，造成很大的兼容性问题。可以将浏览器分为两大类：IE和非IE。

HTML5.0比较常用，其增加了大量的语义性很强的标签，增加了大量高复杂度标签。HTML目前的方向越来越向丰富标签、统一标签标准。

HTML中分为两大类标签：行标签、块标签

px：页面大小的度量单位之一：像素

前端页面的内容分为三类：
1、数据；基本上是由标签 + 数据；
2、样式：CSS；用来修饰、控制数据的显示特点；
3、响应：javascript；面向事件编程。

网站是由众多网页经过超链的形式组织起来的。其中，第一个网页称为：首页。

有时候在写CSS的过程中，某些限制总是不起作用，这就涉及了CSS样式覆盖的问题。注意！样式是可以被覆盖的，顺序是：浏览器缺省 < 外部样式、内部样式 < 行间样式。外部样式和内部样式按照前后顺序，后者覆盖前者；书写顺序决定覆盖顺序。

代码部分

代码如下：
index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title >一个可爱的页面</title>
        <link rel="stylesheet" type="text/css" href="css/index.css" />
    </head>
    <body>
         <div id="round">

        <p></p>

        </div>
         <table id="loginTab" >
            <caption id="loginWelcome">欢迎注册</caption>
        <tr>
            <td class="celLeft">账号</td>
            <td class="celRight">
                <input class="txtWidth" type="text" name="id" placeholder="请输入8位账号">
            </td>
        </tr>
          <tr>
            <td class="celLeft">密码</td>
            <td class="celRight">
                <input class="txtWidth" type="password" name="password" placeholder="由字母和数字构成" />
            </td>
        </tr>
          <tr>
            <td class="celLeft">性别</td>
            <td class="celRight">
                <input id="sexMale" type="radio" name="sex" checked="true" />
                <label for="sexMale">男</label>
                 <input id="sexFamale" type="radio" name="sex" />
                <label for="sexFamale">女</label>
            </td>
        </tr>
          <tr>
            <td class="celLeft">出生日期</td>
            <td class="celRight">
                 <select id="birthYear">
                 </select>
                 <label>年</label>
                 <select id="birthMonth">
                 </select>
                 <label>月</label>
                 <select id="birthDate">
                 </select>
                 <label>日</label>
                <!--<input id="date" type="date" name="date"/>-->
            </td>
        </tr>
          <tr>
            <td class="celLeft">爱好</td>
            <td class="celHobbyRight" align="center">
                <input type="checkbox" name="hobby" value="打王者" id="playgame"/>
                <label for="playgame">打王者</label>
                <input type="checkbox" name="hobby" value="睡觉" id="sleep"/>
                <label for="sleep">睡觉</label>
                <input type="checkbox" name="hobby" value="旅游" id="travel"/>
                <label for="travel">旅游</label>

                <br />

                <input id="selectALL" type="button" value="全选" />
                <input id="selectRev" type="button" value="反选" />
                <input id="selectNone" type="button" value="重置" />

            </td>
        </tr>
        <tr>
            <td height="45" colspan="2" align="center">
                <input type="submit" style="font-size:16px"/>
            </td>
        </tr>
       </table>
    </body>

<script type="text/javascript" src="js/index.js"></script>

</html>

index.css

 #round{
                width:400px;                       
                height:100px;
                margin:0 auto;
            }

            table{
                margin:0 auto;
            }

            body{
                font-size: 17px;
            }

            #loginTab{
                margin: 0 auto; 
                width:320px;
            }

            .celLeft{
                width: 25.5%;
                text-align: right;
                background: #E8D3F5;
                padding: 5px 5px 4px 5px;
            }

            .txtWidth{
                width: 94%;
                margin-left: 3px;
                padding-left: 3px;
               
            }

            .celRight{
                background: #E8D3F5;
            }

            .celHobbyRight{
                background: #E8D3F5;
                padding: 5px 5px 4px 5px;
            }

            #loginWelcome{
                color: #C35FF1;
                font-size: 30px;
                padding:15px 0px;
            }

            #date{
                 margin-left: 3px;
            }

index.js


        var hobbies = document.getElementsByName("hobby");
        console.log(hobbies);
        var selectALL = document.getElementById("selectALL");
        var selectRev = document.getElementById("selectRev");
        var selectNone = document.getElementById("selectNone");

        var setHobbiesSelected = function(value){
            for(var index = 0;index < hobbies.length;index++){
                hobbies[index].checked = value;
            }
        };

        selectALL.onclick = function (){
            setHobbiesSelected(true);
        };

        selectNone.onclick = function (){
            setHobbiesSelected(false);
        };

        selectRev.onclick = function(){
           for(var index = 0;index < hobbies.length;index++){
            hobbies[index].checked = !hobbies[index].checked;
           }
        };

         var birthYear = document.getElementById("birthYear");
       // birthYear.innerHTML = "<option>1990</option>"
        for(var i = 1990;i < 2020;i++){
            var option = document.createElement("option");
            option.text = i;
            option.value = i;
            birthYear.appendChild(option);
        }
        
        var birthMonth = document.getElementById("birthMonth"); 
        var monthHtml = "";
        for(var month = 1; month <= 12;month++){
            monthHtml += "<option>";
            monthHtml += month;
            monthHtml += "</option>"; 
        }
        birthMonth.innerHTML = monthHtml;

        var birthDate = document.getElementById("birthDate");

         birthYear.onchange = function(){
            var year = birthYear.value;
            var month = birthMonth.value;
            setDate(year,month);
        }

        birthMonth.onchange = function(){
            var year = birthYear.value;
            var month = birthMonth.value;
            setDate(year,month);
        }
       

        function setDate(year,month){
            birthDate.innerHTML = "";
            var date = new Date(year,month,0);
            var lastData = date.getDate();
            for(var d = 1;d <= lastData;d++){
                var option = document.createElement("option");
            option.text = d;
            option.value = d;
            birthDate.appendChild(option);
            }
        }

        setDate(birthYear.value,birthMonth.value);

如图新建两个文件夹用来存放css和js文件，每个文件夹下分别放着index.css和index.js文件。这样做能够让代码的逻辑更加清晰明了，而且在更改时，html文件只用改一行代码。css相当于给我们的数据添加样式，通俗的讲就是皮肤。我们把它单独拎出来，可以做很多份不同的样式，而在更改时只用修改要用css文件路径即可。

松花酿酒Kitty

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
1
评论
一个简单的注册页面以及前端页面基本概念简单介绍

前端页面基本概念以及一个简单的注册页面前端页面基本概念代码部分先上图！如图所示，该代码实现了出生日期，点击年、月后对日的响应。当然也可以用date实现，会更美观完善，这里只是在做练习，我也在代码里注释了date的写法。“全选”、“反选”、“重置”三个按钮能够实现对应的响应。这个table是在屏幕中央显示的。前端页面基本概念先简单介绍一下基本概念HTML：超文本描述语言它是一种...
复制链接

扫一扫

专栏目录