时间：2023-09-07 03:42:02 | 来源：网站运营
时间：2023-09-07 03:42:02 来源：网站运营
从零开始玩编程（Html 介绍篇）：超文本标记语言（英语：HyperTextMarkupLanguage，简称：HTML）是一种用于创建网页的标准标记语言以上就是html的基本定义了，那么我先放一个自己做的简单网页
在线咨询
<!DOCTYPE html><html lang="zh" class="no-js"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Log In</title> </head><script>function check(){hide}</script><style>.bgjpg{ background-image: url(img/4.jpg); background-repeat:no-repeat ; position:fixed; position:fixed; top: 0; left: 0; width:100%; height:100%; min-width: 1000px; z-index:-10; zoom: 1; background-color: #fff; background-repeat: no-repeat; background-size: cover; -webkit-background-size: cover; -o-background-size: cover; background-position: center 0; } .fir{ transform:translate(50%,-50%); position: absolute; top:24%; right:50%; margin:auto; display:block; font-weight: bold color : #fafafa; font-size: 500%; color: transparent; background-color : black; text-shadow : rgba(255,255,255,0.5) 0 5px 6px, rgba(255,255,255,0.2) 1px 3px 3px; -webkit-background-clip : text; } .kuang{ transform:translate(50%,-50%); position: fixed; top:38%; right:50%; transform:translate(50%,-50%); width:35%; height:40%; margin:0 auto; border-radius: 70px; background: linear-gradient(315deg, #ffffff, #ffffff); box-shadow: -29px -29px 58px #ffffff, 29px 29px 58px #ffffff; opacity: 0.5; } .iuser{ position: fixed; top:37.75%; right:64%; transform:translate(50%,-50%); margin:auto; display:block; } .ipass{ transform:translate(50%,-50%); position: fixed; top:47.75%; right:64%; transform:translate(50%,-50%); margin:auto; display:block; }.ilog{ transform:translate(50%,-50%); height: 4%; width: 3%; position: fixed; top:44%; right:41%; transform:translate(50%,-50%); margin:auto; display:block;} /*-------------------------------这里开始输入框------------------------------------------------------*/.input { position: relative; z-index: 1; display: inline-block; margin: 1em; max-width: 400px; width: calc(100% - 2em); vertical-align: top;}.input__field { position: relative; display: block; float: right; padding: 0.9em; width: 60%; border: none; border-radius: 0; background-color: rgb(107, 105, 105); opacity: 0.5; color: rgb(19, 18, 18); font-weight: bold; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; -webkit-appearance: none; /* for box shadows to show on iOS */}.input__field:focus { outline: none;}.input__label { display: inline-block; float: right; padding: 0 1em; width: 40%; color: #000000; font-weight: bold; font-size: 70.25%; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}.input__label-content { position: relative; display: block; padding: 1.6em 0; width: 100%;}.graphic { position: absolute; top: 0; left: 0; fill: none;}.icon { color: rgb(0, 0, 0); font-size: 150%;}/* Individual styles *//* Jiro */.input--jiro { margin-top: 2em;}.input__field--jiro { padding: 0.9em 0em; width: 100%; background: transparent; color: #000000; opacity: 0; -webkit-transition: opacity 0.3s; transition: opacity 0.3s;}.input__label--jiro { position: absolute; left: 0; padding: 0 0.85em; width: 140%; height: 100%; text-align: left; pointer-events: none;}.input__label-content--jiro { -webkit-transition: -webkit-transform 0.3s 0.3s; transition: transform 0.3s 0.3s;}.input__label--jiro::before,.input__label--jiro::after {transform: translate(50%,-50%); content: ''; position: absolute; top: 0; left: 0; width: 140%; height: 100%; -webkit-transition: -webkit-transform 0.3s; transition: transform 0.3s;}.bgcolor-7 { background: none; }.input__label--jiro::before { border-top: 1px solid #303030; -webkit-transform: translate3d(0, 100%, 0) translate3d(0, -2px, 0); transform: translate3d(0, 100%, 0) translate3d(0, -2px, 0); -webkit-transition-delay: 0.3s; transition-delay: 0.3s;}.input__label--jiro::after { z-index: -1; background: #303030; -webkit-transform: scale3d(1, 0, 1); transform: scale3d(1, 0, 1); -webkit-transform-origin: 50% 0%; transform-origin: 50% 0%; opacity: 0.2;}.input__field--jiro:focus,.input--filled .input__field--jiro { opacity: 1; -webkit-transition-delay: 0.3s; transition-delay: 0.3s;}.input__field--jiro:focus + .input__label--jiro .input__label-content--jiro,.input--filled .input__label-content--jiro { -webkit-transform: translate3d(0, -80%, 0); transform: translate3d(0, -80%, 0); -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1); transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);}.input__field--jiro:focus + .input__label--jiro::before,.input--filled .input__label--jiro::before { -webkit-transition-delay: 0s; transition-delay: 0s;}.input__field--jiro:focus + .input__label--jiro::before,.input--filled .input__label--jiro::before { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);}.input__field--jiro:focus + .input__label--jiro::after,.input--filled .input__label--jiro::after { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); -webkit-transition-delay: 0.3s; transition-delay: 0.3s; -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1); transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);} /*----------------------------结束---------下面输入框位置---------------------------------------*/.inputuser{ transform:translate(50%,-50%); position: fixed; top:36%; right:55%; transform:translate(50%,-50%); margin:auto; display:block;}.inputpass{ transform:translate(50%,-50%); position: fixed; top:46%; right:55%; transform:translate(50%,-50%); margin:auto; display:block;} </style> <body> <form> <div class="bgjpg"></div> <div class="kuang"></div> <div class="fir" >Log In</div> <div class="iuser"><img src="img/user.png" style="transform:scale(0.1);" > </div> <div class="ipass"><img src="img/pass.png" style="transform:scale(0.1);" > </div> <div class="inputuser"> <div class="input input--jiro"> <input class="input__field input__field--jiro" type="text" id="user" /> <label class="input__label input__label--jiro" for="user"> <span class="input__label-content input__label-content--jiro">Input Your Username Here</span> </label> </div> </div> <div class="inputpass"> <div class="input input--jiro"> <input class="input__field input__field--jiro" type="text" id="pass" /> <label class="input__label input__label--jiro" for="pass"> <span class="input__label-content input__label-content--jiro">Input Your Password Here</span> </label> </div> </div> </form> <div class="ilog"> <img src="img/log.png"style="transform:scale(0.2);" onclick="check();" /></div> </body> </html> 这就是这个网页的基本代码，其实入果去除输入框的话代码还是比较短的，而其中使用到的一些标记语言我们也会慢慢了解关键词：
