HTML簡單登陸和註冊頁面及input標籤詮釋

時間 2019-11-11

標籤 html 簡單登陸註冊頁面 input 標籤詮釋欄目 HTML 简体版

原文原文鏈接

今天第一次接觸HTML這種語言，雖然不能徹底理解其中的意思，過去學的英語單詞幾乎也忘了差很少了，可是感受進入這門語言學習以後就沒有那麼難了，一步一步來吧！下面鞏固下今天學內容：css

HTML是一種超文本標記語言.HTML 標籤是由尖括號包圍的關鍵詞，好比 <html>。HTML 標籤一般是成對出現的，好比 <b> 和 </b>；html

<html> 與 </html> 之間的文本描述網頁；服務器

<body> 與 </body> 之間的文本是可見的頁面內容，<h1> 與 </h1> 之間的文本被顯示爲標題，<p> 與 </p> 之間的文本被顯示爲段落；學習

HTML 連接由 <a> 標籤訂義。連接的地址在 href 屬性中指定，如<a href="網址">連接名稱</a>；網站

標題（Heading）是經過 <h1> - <h6> 等標籤進行定義的；ui

<h1> 定義最大的標題，<h6> 定義最小的標題；spa

h1 用做主標題（最重要的），其後是 h2（次重要的），再其次是 h3，以此類推；code

<hr /> 標籤在 HTML 頁面中建立水平線；orm

hr 元素可用於分隔內容；htm

HTML 圖像是經過 <img> 標籤進行定義的，如<img src="圖片地址" 寬="**" 高="**" />；

如下是簡單的登陸頁面HTML文本及效果：

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
    <style type="text/css" rel="stylesheet">
        .wrap{margin:0 auto;width:400px;} 
    </style>
</head>
    <body>
        <div class="wrap">
          <h1>網站後臺管理系統</h1>    
          <fieldset>
            <form action="/example/html/form_action.asp" method="get">
                <p>用戶名: <input type="text" name="name" /></p>
                <p>密&nbsp;&nbsp;&nbsp;&nbsp;碼: <input type="text" name="name" /></p>
                <p>驗證碼: <input size="10" name="name" /></p>
                <button type="button">登陸</button>&nbsp;&nbsp;&nbsp;<input type="button" onclick="window.location.href('C:/Users/hailang/Desktop/register.html')" value="註冊" />
            </form>
          </fieldset>
        </div>
    </body>
</html>

如下是註冊頁面HTML文本及效果：

<html>
<head>
    <meta charset="UTF-8">
    <style type="text/css" rel="stylesheet">
        .wrap{margin:0 auto;width:500px;} 
    </style>
</head>
    <body>
        <div class="wrap">
          <h1>網站後臺管理系統</h1>    
            <form action="/example/html/form_action.asp" method="get">
                <p>&nbsp;&nbsp;&nbsp;&nbsp;用戶名: <input type="text" name="name" /></p>
                <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;密碼: <input type="text" name="name" /></p>
                <p>確認密碼: <input  type="text" name="name" /></p>
                <p>電子郵件: <input  type="text" name="name" /></p>
                <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;性別：<label><input name="Fruit" type="radio" value="" checked />保密 </label>
                         <label><input name="Fruit" type="radio" value="" />男</label> 
                         <label><input name="Fruit" type="radio" value="" />女 </label>
                </p>
                <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;生日：<select name="select" id="select_k1" class="xla_k">
                            <option value="請選擇">請選擇</option>
                            <option value="1989">1989</option>
                            <option value="1990">1990</option>
                            <option value="1991">1991</option>
                        </select>年
                        <select name="select" id="select_k1" class="xla_k">
                            <option value="請選擇">請選擇</option>
                            <option value="5">5</option>
                            <option value="4">4</option>
                            <option value="3">3</option>
                        </select>月
                        <select name="select" id="select_k1" class="xla_k">
                            <option value="請選擇">請選擇</option>
                            <option value="17">17</option>
                            <option value="16">16</option>
                            <option value="15">15</option>
                        </select>日
                </p>
                </p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;愛好：<input type=checkbox checked> 讀書
                          <input type=checkbox>旅遊
                          <input type=checkbox value=1>足球
                          <input type=checkbox value=1>籃球
                          <input type=checkbox value=1>乒乓球
                </p>
                <p>我的說明：<textarea name="yj" cols="30" rows="6"></textarea>
                </p>
            </form>
        </div>
    </body>
</html>