HTML基礎(二)——表單,圖片熱點,網頁劃區和拼接

来源:http://www.cnblogs.com/H2921306656/archive/2016/07/09/5656699.html
-Advertisement-
Play Games

一、表單 <form id="" name="" method="post/get" action="負責處理的服務端"> id不可重覆;name可重覆;get提交有長度限制,並且編碼後的內容在地址欄可見,post提交無長度限制,且編碼後內容不可見。 </form> 1、文本輸入 文本框<input ...


 

一、表單

<form id="" name="" method="post/get" action="負責處理的服務端"> id不可重覆;name可重覆;get提交有長度限制,並且編碼後的內容在地址欄可見,post提交無長度限制,且編碼後內容不可見。

</form>

1、文本輸入

    文本框<input type="txt" name="" id="" value="" />

    註:上面設置value值,表示設置預設值

    密碼框<input type="password" name="" id="" value="" />

    文本域<textarea name="" id="" cols=""(字元多少) rows=""(幾行高)></textarea>

    隱藏域<input type="hidden" name="" id="" value="" />

2、按鈕

    提交按鈕<input type="submit" name="" id="" disabled="disabled" value=""/>點擊後轉到form內的提交伺服器的地址

    註:上面中設置value值表示運行時上面顯示的文字。

    重置按鈕<input type="reset" name="" id="" disabled="disabled" value=""/>

    普通按鈕<input type="button" name="" id="" disabled="disabled" value=""/>

    圖片按鈕<input type="image" name="" id="" disabled="disabled" src="圖片地址"/>

附:

       disabled,使按鈕失效;enable,使可用。

3、選擇輸入

    單選按鈕組<input type="redio" name="" checked="checked" value=""/>   name的值用來分組;value值看不見,是提交給程式用的;checked,設置預設選項。

    註:單選按鈕組選中後不可取消。

   覆選框組<input type="checkbox" name="" checked="checked" value=""/>

   註:checked="checked"表示一上來就選中,且覆選框可選中可取消。

    文件上傳<input type="file" name="" id="" />

   <label for=""></label>

       <label> 標簽為 input 元素定義標註(標記)。

       label 元素不會向用戶呈現任何特殊效果。不過,它為滑鼠用戶改進了可用性。如果您在 label 元素內點擊文本,就會觸發此控制項。就是說,當用戶選擇該標簽時,瀏覽器就會自動將焦點轉到和標簽相關的表單控制項上。

       <label> 標簽的 for 屬性應當與相關元素的 id 屬性相同。

下拉列表框

    <select  name="" id="" size="" multiple="multiple">    --size=1時,為菜單;>1時,為列表。multiple為多選。

             <option value="值">內容1</option>

             <option value="值" selected="selected">內容2</option>    --selected,設為預設

             <option value="值">內容3</option>

    </select>

綜上HTML程式顯示:

 

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>無標題文檔</title>
 6 </head>
 7 
 8 <body background="22.jpg">
 9 <form>
10 賬號:<input type="text" value="12345" disabled="disabled" /><br /><br />
11 密碼:<input type="password" /><br /><br />
12 說說:<textarea cols="140" rows="8"></textarea><br /><br />
13 請問:中華人民共和國成立於那一年?<input type="text" />
14 <input type="submit" value="提交" />
15 <input type="hidden" value="1949" />
16 <input type="reset" /><br />
17 <input type="button" value="登錄" /><br />
18 <input type="image" src="55.jpg" /><br />
19 <input type="radio" name="sex" /><br />
20 <input type="radio" name="sex" /><br />
21 <input type="checkbox" checked="checked" />可樂<br />
22 <input type="checkbox" />雞腿<br />
23 <input type="file" /><br /><br />
24 <select size="1">
25 <option value="11">可口可樂</option>
26 <option value="22">雪碧</option>
27 <option value="33" selected="selected">芬達</option>
28 </select>
29 </form>
30 </body>
31 </html>
View Code

 

運行結果顯示:

 

實例分析:做郵箱界面程式顯示

 

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>無標題文檔</title>
 6 </head>
 7 
 8 <body background="11.jpg">
 9 <font face="華文隸書">
10 <table align="center" width="600" height="600" border="1" cellpadding="0" cellspacing="0">
11 <tr>
12 <td width="150">&nbsp;&nbsp;&nbsp;郵箱:</td>
13 <td><form><input type="text" /></form></td>
14 </tr>
15 <tr>
16 <td></td>
17 <td valign="middle"><font color="#999999">需要通過郵箱激活賬戶,不支持sohu,21cn,sogou的郵箱</font></td>
18 
19 </tr>
20 <tr>
21 <td>&nbsp;&nbsp;&nbsp;登錄用戶名:</td>
22 <td><form><input type="text" /></form></td>
23 </tr>
24 <tr>
25 <td></td>
26 <td valign="middle"><font color="#999999">僅在登錄時使用,字元數不少於4個</font></td>
27 </tr>
28 <tr>
29 <td>&nbsp;&nbsp;&nbsp;顯示名稱:</td>
30 <td><form><input type="text" /></form></td>
31 </tr>
32 <tr>
33 <td></td>
34 <td><font color="#999999">即昵稱,字元數不少於2個</font></td>
35 </tr>
36 <tr>
37 <td>&nbsp;&nbsp;&nbsp;密碼:</td>
38 <td><form><input type="password" /></form></td>
39 </tr>
40 <tr>
41 <td>&nbsp;&nbsp;&nbsp;確認密碼:</td>
42 <td><form><input type="password" /></form></td>
43 </tr>
44 <tr>
45 <td></td>
46 <td><font color="#999999">至少8位,必須包含字母、數字、特殊字元</font></td>
47 </tr>
48 <tr>
49 <td>&nbsp;&nbsp;&nbsp;性別:</td>
50 <td><form><select size="1">
51 <option value="1" selected="selected"></option>
52 <option value="2"></option>
53 </select></form>
54 </td>
55 </tr>
56 <tr>
57 <td>&nbsp;&nbsp;&nbsp;喜好:</td>
58 <td><form><select size="1">
59 <option value="1">打游戲</option>
60 <option value="2">打籃球</option>
61 <option value="3">看電影</option>
62 <option value="4" selected="selected">聽音樂</option>
63 <option value="5">旅游</option>
64 </select></form>
65 </td>
66 </tr>
67 <tr>
68 <td></td>
69 <td><form><input type="submit" value="註冊" /></form></td>
70 </tr>
71 
72 </table> 
73 </font>
74 </body>
75 </html>
View Code

 

 

運行結果顯示:

二、圖片熱點

     規划出圖片上的一個區域,可以做出超鏈接,直接點擊圖片區域就可以完成跳轉的效果。

示例:

 

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>無標題文檔</title>
 6 </head>
 7 
 8 <body>
 9 <img src="a006.jpg" usemap="ditu" />
10 <map name="ditu">
11 <area shape="rect" coords="0,0,50,50" href="http://www.baidu.com" />
12 <area shape="circle" coords="265,118,80" href="http://qq.com" />
13 </map>
14 </body>
15 </html>
View Code

 

 

設計界面:矩形和圓形的地方在運行時,滑鼠放上會變成小手狀,表示有鏈接。

三、網頁劃區和拼接

劃區:在一個網頁里,規划出一個區域用來展示另一個網頁的內容。

示例:

拼接:在一個網路頁面內,規划出多個頁面視窗,以表格拼接的形式展示出來。(可以想象一下監控畫面,多個畫面同時顯示)

示例:

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 0.簽名 java -Xmx2048m -jar out/host/linux-x86/framework/signapk.jar -w build/target/product/security/testkey.x509.pem build/target/product/security/test ...
  • 效果:(換膚出來一個div,選擇你想要的圖片,作為網頁背景,保存) 要點:cookie保存狀態 html代碼: css代碼: js代碼: 效果圖: ...
  • 前面的話 前端工程師最基本的工作是切圖。photoshop用的6不6,對於工作效率有很大的影響。小火柴將前端工程師需要掌握的photoshop的知識和技能進行了梳理和歸納,總結成以下目錄 目錄 前端工程師技能之photoshop巧用系列第一篇——準備篇 前端工程師技能之photoshop巧用系列第二 ...
  • × 目錄 [1]初始設置 [2]自動切圖 前面的話 隨著photoshop版本的不斷升級,軟體本身增加了很多新的功能,也為切圖工作增加了很多的便利。photoshop最新的版本新增了自動切圖功能,本文將詳細介紹photoshop的這個新功能 初始設置 當然首先還是要進行一些首選項設置 【1】在編輯 ...
  • 源碼: <input type="checkbox" id="cleckAll" />全選 <div class="list"> <input type="checkbox" />覆選一 <input type="checkbox" />覆選二 <input type="checkbox" />覆選 ...
  • Javascript小學生都知道了javascript中的函數調用時會 隱性的接收兩個附加的參數:this和arguments。參數this在javascript編程中占據中非常重要的地位,它的值取決於調用的模式。總的來說Javascript中函數一共有4中調用模式:方法調用模式、普通函數調用模式、 ...
  • 概述 上一篇我們介紹瞭如何將$.ajax和Vue.js結合在一起使用,並實現了一個簡單的跨域CURD示例。Vue.js是數據驅動的,這使得我們並不需要直接操作DOM,如果我們不需要使用jQuery的DOM選擇器,就沒有必要引入jQuery。vue-resource是Vue.js的一款插件,它可以通過... ...
  • 經過今天的討論, 我們組初步給出了設計方案。 安裝了一晚上的 mockupBuilder 終於繪製了幾份界面的原型圖, 這裡需要吐槽下 mockupBuilder, 這個軟體很好用, 不過網頁版和單機版提供的功能不太一樣, 感覺單機版更全一些, 但是缺點是無法保存。。。 首頁:(初步設想是類似網易雲 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...