首頁 > 開發者 > 網站開發

HTML 自學筆記（HTML架構+表單設計）

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：

HTML架構
  1. 什麼是架構：將瀏覽器劃分成不同部分，每一部分載入不同的網頁，用以實現在同一瀏覽器視窗中載入多個頁面的效果。
  2. <frameset> 劃分架構標記。
    1. 文法格式：<frameset>...</frameset>
    2. 屬性：
      1. cols 使用“像素值”和“%”分割左右視窗，“*”表示剩餘部分。若使用“*，*，*”則表示架構平均分成3個。若使用“*，*”則表示架構平均分成2個。
      2. rows 使用“像素值”和“%”分割上下視窗，“*”表示剩餘部分。
      3. framborder 指定是否顯示邊框。<framborder="0">不顯示；<framborder="1">顯示。
      4. border 設定邊框的大小，預設值5px
    3. 3.<frame> 子視窗標記，單標記。該標記必須放在<frameset>中使用，在<frameset>中設定幾個視窗，就必須對應使用幾個<frame>架構。而且還必須使用src屬性指定一個網頁。
    1. 文法格式：<frame 屬性=“屬性值”> 。
    2. 屬性：
      1. src 載入網頁檔案的url地址。
      2. name 架構名稱，是連結標記的target所要參數。
      3. noresize表示不能調整架構大小，沒有設定時就可以調整。
      4. scrolling是否需要捲軸

值：

    1. auto根據需要自動調整
    2. yes 有 
    3. no  無

5.<frameborder>是否需要邊框 <frameborder=“1”>顯示邊框；<frameborder=“0”>不顯示邊框。

4.其他相關標籤

      • <code>表示電腦原始碼或其他機器可以閱讀的常值內容</code>也會將文本顯示為等寬字樣。
      • <pre>定義預格式文本，被包圍在pre元素中的文本通常會保留空格和分行符號。而文本也會呈現等寬字樣。
      • <tt>呈現等寬文字效果
      • <address>標籤定義文檔或文章的作者聯絡資訊。
        • 若<address>元素位於<body>元素內，則表示文檔聯絡資訊
        • 若<address>元素位於<article>元素內，則表示文章的聯絡資訊

註：元素中的文本通常呈現為斜體。大多數瀏覽器會在 address 元素前後添加折行

HTML表單設計
  1. 表單標記：<form>定義表單的開始位置和結束位置，表單提交時的內容就是form中的內容</form>
    1. 文法格式：<form action="伺服器端地址（接受表單內容的地址）" name="表單名稱" method="post/get(傳輸方式)">...</from>
    2. 常見屬性：
      1. get：get方式提交時，會將表單的內容附加在URL地址後面，所以限制了提交內容的長度，不超過8192個字元，且不具備保密性。
      2. post：post提交時，將表單的資料一併包含在表單主體中，一起傳輸到伺服器中處理，沒有資料大小限制。
      3. action：表單資料的處理常式的URL地址，如果為空白，則使用當前文檔的url地址，如果表單中不需要使用action屬性也要指定其屬性為“0”
      4. target:和超連結屬性類似，用來指定目標視窗。
  2. <input>文本域和密碼域，沒有結束標記。
    1. 文法格式：<input type="" value="" size="" maxlength="規定輸入欄位的最大長度，以字元個數計">
      • 當type="text"時，<input>表示一個輸入文本域
      • 當type="password"時，<input>表示一個密碼輸入欄位。

               2.常見屬性：

      • name 定義控制項名稱
      • value 初始化值，開啟瀏覽器時，文字框中的內容
      • size   設定控制項的長度
      • maxlength 輸入框中最大 允許輸入的字元

      3.按鈕的使用

  1. 提交按鈕；當<input type="submit" >時；
  2. 重設按鈕；當<input type="reset">時；
  3. 普通按鈕；當<input type="button">時；
  4. 選項按鈕：當<input type="radio">時； 
  5. 複選按鈕：當<input type="checkbox" >時。

註：選項按鈕和複選按鈕都可以使用"checked"屬性來設定預設項。另name屬性一致時，則為二選一。

如：

      性別：<input type="radio" name="sex">男

      性別：<input type="radio" name="sex">女

4.隱藏欄位：當<input type="hidden">時；

      5.多行文本域：

用法：使用<textarea>標記可以實現一個能夠輸入多行文本地區。

格式：<textarea name="name" rows="value" cols="value"  value="value">...<textarea>

 註：rows和cols屬性分別用來指定顯示行的行數和列數，單位是字元個數。

      6.菜單下拉式清單域<select>

文法格式：   <select name="" size="value" multiple="value">

   <option value="" selected="selected">選項1</option>

   <option value="" selected="selected">選項2</option>

   <option value="" selected="selected">選項3</option>

</select>

<html><head>    <title>        網頁的架構    </title>    <meta charset="utf-8"></head>    <frameset rows="90,*,90" frameborder="1" border="1" noresize="noresize">        <frame name="top" src="top.html"/>            <frameset cols="20%,80%">                <frame name="left" src="left.html"/>                <frame name="right" src="right.html" scrolling="no"/>            </frameset>        <frame name="bottom" src="bottom.html"/>    </frameset></html>

 



<html><head>    <title>表單設計練習</title>    <meta charset="utf-8"></head><body>    <form>        帳號：<input type="text" size="16">        <br/><br/>        密碼：<input type="password" size="16">            <br/><br/>        愛好：<input type="checkbox" name="tiyu">體育              <input type="checkbox" name="yinyue">音樂              <input type="checkbox" name="yingshi">影視              <input type="checkbox" name="yuedu">閱讀              <br/><br/>        性別：<input type="radio" name="sex">男                <input type="radio" name="sex">女                 <br/><br/>        自我介紹；         <br/><br/>         <textarea name="name" rows="10" cols="30" >這裡是自我介紹        </textarea>        <br/><br/>        地址：        <select name="dizhi">        <!--selected不添加也會有同樣的效果-->           <option value="shanxi" selected="selected">陝西</option>           <option value="sichuan" selected="selected">四川</option>           <option value="gansu" selected="selected">甘肅</option>           <option value="henan" selected="selected">河南</option>        </select>        <br/><br/>        <input type="submit" value="提交">        <input type="reset" value="重設">        <!--value不賦值，提交按鈕和重設按鈕會有同樣的效果，但是普通按鈕不會有文字，就只是個方形按鈕，大家可以自己練習一下-->        <input type="button" value="按鈕">    </form></body></html>


　　


     


 


HTML 自學筆記（HTML架構+表單設計）

                

                    
本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

                

            


                                                                    

        

            

                

                                        

                        

                    

                

                

    

                    
聯繫我們

            
該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

            

                如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至：
                info-contact@alibabacloud.com
                進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。
            

            



                

                

            

        

    

    


    


  

    

      

        

          

            

              
A Free Trial That Lets You Build Big!

              
 Start building with 50+ products and up to 12 months usage for Elastic Compute Service 

              

                Get Started for Free
              

            

          

          

            

              
    
                
  • 
                  
    Sales Support
    
                  
    
                    1 on 1 presale consultation
                  
    
                  
    
                    Chat
                    Contact Sales
                  
    
                
    • 
                
  • 
                  
    After-Sales Support
    
                  
    
                    24/7 Technical Support
                    6 Free Tickets per Quarter
                    Faster Response
                  
    
                  
    
                    Open a Ticket
                  
    
                
    • 
                
  • 
                  
    
                  
     Alibaba Cloud offers highly flexible support services tailored to meet your exact needs. 
    
                  
    
                    Learn More
                  
    
                
    •