HTML简单登录和注册页面及input标签诠释
今天第一次接觸HTML這種語言，雖然不能完全理解其中的意思，過去學的英語單詞幾乎也忘了差不多了，但是感覺進入這門語言學習之后就沒有那么難了，一步一步來吧！下面鞏固下今天學內容：
HTML是一種超文本標記語言.HTML 標簽是由尖括號包圍的關鍵詞，比如 <html>。HTML 標簽通常是成對出現的，比如 <b> 和 </b>；
<html> 與 </html> 之間的文本描述網頁；
<body> 與 </body> 之間的文本是可見的頁面內容，<h1> 與 </h1> 之間的文本被顯示為標題，<p> 與 </p> 之間的文本被顯示為段落；
HTML 鏈接由 <a> 標簽定義。鏈接的地址在 href 屬性中指定，如<a href="網址">鏈接名稱</a>；
標題（Heading）是通過 <h1> - <h6> 等標簽進行定義的；
<h1> 定義最大的標題，<h6> 定義最小的標題；
h1 用作主標題（最重要的），其后是 h2（次重要的），再其次是 h3，以此類推；
<hr /> 標簽在 HTML 頁面中創建水平線；
hr 元素可用于分隔內容；
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>密 碼: <input type="text" name="name" /></p>
<p>驗證碼: <input size="10" name="name" /></p>
<button type="button">登錄</button> <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> 用戶名: <input type="text" name="name" /></p>
<p> 密碼: <input type="text" name="name" /></p>
<p>確認密碼: <input type="text" name="name" /></p>
<p>電子郵件: <input type="text" name="name" /></p>
<p> 性別：<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> 生日：<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> 愛好：<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>
input標簽
<input>（輸入） 標簽用于搜集用戶信息
<input> 標簽沒有結束標簽
image(圖像)屬性只能與 <input type="image"> 配合使用。它規定圖像輸入相對于周圍其他元素的對齊方式。
它的值有：
left（左邊）
right（右邊）
top（前）
middle（中）
bottom（低）
checked（預先選定復選框或單選按鈕）屬性 與 <input type="checkbox"> 或 <input type="radio"> 配合使用。
height （定義 input 字段的高度）屬性只適用于 <input type="image">。
disabled （在文本框中設置disabled="disabled"將無法輸入)屬性規定應該禁用 input 元素，無法與 <input type="hidden"> 一起使用.
formnovalidate 屬性覆蓋 form 元素的novalidate屬性,如果使用該屬性，帶有兩個提交按鈕的表單（一個進行驗證，另一個不驗證）。
name 屬性規定 input 元素的名稱。
placeholder 屬性提供可描述輸入字段預期值的提示信息（hint）。
readonly 屬性規定輸入字段為只讀。
size 屬性規定輸入字段的寬度。
src 屬性只能與 <input type="image"> 配合使用。它規定作為提交按鈕顯示的圖像的地址。
ype 屬性規定 input 元素的類型。
它的值有：<input type="text" /> 定義用戶可輸入文本的單行輸入字段。
<input type="button"/> 定義可點擊的按鈕，但沒有任何行為。
<input type="checkbox"/> 定義復選框。復選框允許用戶在一定數目的選擇中選取一個或多個選項。
<input type="file"/> 用于文件上傳。
<input type="hidden"/> 定義隱藏字段。隱藏字段對于用戶是不可見的。隱藏字段通常會存儲一個默認值，它們的值也可以由 JavaScript 進行修改。
<input type="image"/> 定義圖像形式的提交按鈕。必須把src 屬性和alt 屬性與 <input type="image"> 結合使用。
<input type="password"/> 定義密碼字段。密碼字段中的字符會被掩碼（顯示為星號或原點）。
<input type="radio" /> 定義單選按鈕。單選按鈕允許用戶選取給定數目的選擇中的一個選項。
<input type="reset"/> 定義重置按鈕。重置按鈕會清除表單中的所有數據。
<input type="submit"/> 定義提交按鈕。提交按鈕用于向服務器發送表單數據。
總結
以上是生活随笔為你收集整理的HTML简单登录和注册页面及input标签诠释的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 用html实现网页版的拼图游戏,jQue
- 下一篇： vue keep-alive 实现详情返