1. 程式人生 > >2-HTML中的表格及表單控制元件

2-HTML中的表格及表單控制元件

自己總結:
讓圖片和外部文字 出現間隙 使用hspace[水平]和vspace[垂直]屬性
img(標籤中使用)-->usermap="#myMap" 屬性-->設定熱點 可以使用DW中-->(視窗)屬性-->進行熱點在圖片中的定位(DW會自動生成程式碼)-->area 便籤中的 href屬性設定點選後的跳轉(下面有介紹)

其他常用的html標籤
第一部分
    1,超連結
        從一個web資源到另外一個web資源的連線
        絕對路徑:
            每個網頁都有一個唯一的地址,稱為URI 統一資源定位符,也稱為該網頁的絕對路徑。
            http://ip:port/目錄/檔名
        相對路徑:
            相對於當前文件所在的路徑
            ../imgs/a.jpg
            ./imgs/a.jpg
            imgs/a.jpg
        本地連線
            file:///d:/html/index.html
            超連結中不允許寫本地連線
        伺服器路徑
            http://localhost:8888/test/index.html

        1)a 超連結
            連線狀態:
                未訪問
                已選擇
                已訪問

            <a href="">內容顯示</a>
            屬性:
                href    定義連線的目標URI
                    絕對路徑:http://www.baidu.com
                    相對路徑:b.html
                    郵件地址:mailto:
[email protected]

                    錨點    :#mao
                    空連線    :javascript:void(0);
                target    定義連線的目標視窗
                    _blank        
                    _parent
                    _self
                    _top
                    自定義目標名
                title    定義連線的提示資訊
                type    連線到任何型別的檔案以供下載
                    <a href="../docs/myWord.doc" type="application/msword">報名表</a>
            錨點:
                錨點可以讓使用者在文件中設定標記,這些標記通常放在文件的特定主題處或頂部,然後建立到這些錨點的連線,指向網頁中的特點位置。

                例如:
                <h2 id="section1">1,什麼是全球資訊網</h2>
                <p>全球資訊網,是基於Internet的資訊服務系統,官方定義為"WWW is a wide-area hypermedia information retrieval initiative aiming to give universal access to a large universe of documents",簡而言之,WWW是一個以Internet為基礎的計算機網路,它允許使用者在一臺計算機上通過Internet訪問另一臺計算機上的信...</p>

                <a href="#section1">檢視第一部分內容</a>

        2)link    文件關係連線
            只能出現在head標籤中,定義了當前文件和另一個資源之間的聯絡。
            通常用於連結到外部樣式表
            <link rel="stylesheet" href="style.css" type="text/css">
            屬性:
                href:    定義關係連結地址
                rel:    定義當前文件與所連線文件之間的關係。
                type:     文件型別
        3)base    基準連結地址
            設定頁面中所有文件相對路徑相對的基準URI。如果設定了基準連結地址,當前頁面中的所有相對路徑都基於該路徑
            <base href="http://localhost:8888/sg">

        4)圖片
            1,圖片型別
                適合在網站上進行快速檢視的圖片格式
                GIF        (graphics interchange format,圖形交換格式)
                    可以將背景設定為透明的,圖片最多使用256中顏色,最適合顯示色調不連續或具有大面積單一顏色的圖片,如導航條,按鈕,圖示等。由於GIF圖片中儲存的顏色資訊較少,因此佔用空間極小,使用起來更方便。
                JPEG(joint photographic experts group,聯合影象專家組)
                    最適合攝影或連續色調影象的彩色照片,jpeg檔案可以包含數百萬中顏色,保證圖片不失真。JPEG圖片無法擁有透明的背景
                PNG(portable network graphics,可移植網路圖形)
                    PNG可以包含256種以上的顏色,並可以具有透明的背景。PNG檔案可保留所有原始層,向量,灰度,顏色和效果資訊,並且在任何時候所有元素都是可以編輯的。

            2,鏈入圖片文字
                <img src="" alt="">
                屬性:
                    src        : 圖片的源地址
                    title    : 對圖片的文字說明,當用戶把滑鼠放在圖片上稍作停留,alt屬性的值就會以浮動的形式顯示出來。
                    width    : 圖片的寬度
                    height    : 圖片的高度
                    alt        : 當圖片檔案找不到的時候顯示的文字資訊    
                    border    :圖片的邊框
                    align    :圖片和文字的對齊
                        當align值為left時,圖片靠在最左方,周圍的文字顯示在右側上方
                        當align值為right時,圖片靠在最右方,周圍的文字顯示在左側上方
                        當align值為top時,圖片靠在最上方,周圍的文字顯示在上方
                        當align值為bottom時,圖片靠在最上方,周圍的文字顯示在下方
                    hspace    :圖片的水平間距
                    vspace    :圖片的垂直間距
                為圖片新增連結
                    <a href=""><img src="" alt=""></a>
                熱點 area
                    <img src="" alt="" usemap="#myMap">
                    
                    <map name="myMap">
                        <area shape="" coords="" href="beijing.html" alt="北京">
                        <area shape="" coords="" href="shanghai.html" alt="上海">
                    </map>
                    可以在一副圖片的某幾個部位建立連結
                    <area shape="" coords="" href="" alt="">
                    屬性:
                        shape:default預設為整個區域,rect矩形,circle圓形,poly多邊形
                        coords:
                          rect:     left-x ,top-y ,right-x ,bootom-y
                          circle:    center-x,center-y,radius
                          poly:        x1,y1,x2,y2...xn,yn
                使用DW建立熱點:
    2,表格
        1)table
            定義表格
            屬性: caption
                thead
                tbody
                tfoot
                border:    設定表格邊框線條寬度
                width:    設定表格寬度
                align:    表格在頁面中對其
                bgcolor:表格背景色
                cellspacing:     單元格之間的間距
                cellpadding:    單元格之間的襯距
                frame:    表格中邊框線的顯示
                    void    不顯示邊框
                    above    上邊框
                    below    下邊框
                    hsides    上下邊框
                    vsides    左右邊框
                    lhs     左邊框
                    rhs     右邊框
                    box        四個邊框
                    border:四個邊框
                rules:    表格中分割線的顯示
                    none    無分割線顯示    
                    groups    僅在列分組間和行分組間顯示分割線
                    rows    僅在行間顯示分割線
                    cols    僅在列間顯示分割線
                    all        在所有行列間顯示分割線
        2)tr
            定義表格行
        3)th/td
            th 定義單元格
            td 定義內容單元格
            屬性:
                colspan    跨列
                rowspan    跨行
                align     單元格水平對其
                    left,center,right,justify    兩端對其
                valign    單元格垂直對其
                    top,middle,bottom,baseline基準
            對齊的繼承
                1)內容自身的設定具有最高優先順序
                2)th,td元素的對齊設定
                3)tr,thead,tfoot,tbody元素的對齊設定
                4)table元素的對齊設定具有全域性性
                5)預設的設定
        4)caption
            表格的標題
        5)表格的分組顯示
            thead    表格頭
            tfoot    表格尾
            tbody     表格主體
    3,框架文件
        一個框架文件由四部分組成,文件宣告,html元素,head元素,frameset元素
        <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
        "http://www.w3.org/TR/html4/frameset.dtd">
        1)frameset    框架集
            rows
                用來定義將框架水平分隔為子框架的數量和這些子框架的寬度
            cols
                用來定義將框架垂直分隔為子框架的數量和這些子框架的高度。


            <frameset rows="10%,90%">
                <frame src="">
                <frameset cols="15%,85%">
                    <frame src="">
                    <frame src="">
                </frameset>
            </frameset>
        2)frame    框架視窗
            屬性
            src:        設定框架的初始內容
            frameborder:框架視窗邊框線 frameborder="0" border="0"
            marginwidth:    在框架的邊緣和邊框的內容之間可以出現的空白(左右邊)
            marginheight:    在框架的邊緣和邊框的內容之間可以出現的空白(上下邊)
            srolling:        框架檢視的滾動條設定
                auto    必要時提供,預設值
                yes        始終提供滾動條
                no         不提供滾動條
            noresize:        改變框架視窗大小
            name:        框架名稱,作為該框架的標識
            target:        框架目標
                _blank
                _parent
                _self
                _top
                框架名
        3)iframe    內聯框架
            iframe允許使用者在一個文字中插入一個框架,iframe元素可以使用frame元素的所有屬性,實現功能也相同。
            <body>
                <iframe src="" frameborder="0"></iframe>
            </body>

    4,表單
        主要用於收集來自使用者的資訊,並將收集的資訊傳送給伺服器端處理程式處理。表單時客戶端和伺服器端傳遞資料的橋樑,是實現用於與伺服器互動的最主要方式。
        1)form
            表單控制元件的容器
            <form action="">
            </form>
            屬性
            action     設定處理表單資料URI的地址
            method    設定資料傳送到伺服器的方式
                get    將輸入的資料追加到action地址後面
                post    將輸入的資料儲存到HTTP協議的報文中
            name    設定表單的名稱
            enctype    設定表單資料的內容型別
                application/x-www-form-urlencoded    在傳送前編碼所有字元(預設)
                    編碼方式:
                        1)控制元件的名稱和值都被轉義,空白字元使用【+】替換,保留的字元一般都是用來實現特定的目的,例如(: / ? ; @ = & 等)。非數字和字母的字元使用%HH(這裡HH表示兩個十六進位制數字,代表該字元的ASCII碼)進行轉換,
                        2)控制元件的"名稱/值"對按照它們在文件資料流中出現的順序列出來。"名稱""值"使用"="分割,兩個"名稱/值"之間使用&隔開。
                multipart/form-data        不對字元編碼。在使用包含檔案上傳控制元件的表單時,必須使用該值。
                    資料分成多個部分,每個部分代表一個結構良好的控制元件,作為文件資料流的一部分,每一個部分都按照它們在文件資料流中出現的順序依次傳送到伺服器端,並且,每一部分的邊界不會出現在資料中。每一部分有一個content-desposition標題頭,它的值的格式是:
                        Content-Disposition:form-data;name="myControl"
                text/plain                空格轉換為 "+" 加號,但不對特殊字元編碼。
            accept-charset    設定伺服器端可以處理的字元編碼
        2)input    基本表單控制元件
            <input type="text">
            屬性:
            type    控制元件型別
                text        單行文字框
                textarea    多行文字框
                password    密碼框
                checkbox    複選框
                radio        單選按鈕
                submit        提交按鈕
                reset        重置按鈕
                file        檔案
                hidden        隱藏域
                image        影象按鈕
                button        普通按鈕
            name
                控制元件名稱,這個名稱將與控制元件的當前值形參"名稱/值"對 一同隨表單提交到伺服器(可以將提交的資料傳輸到伺服器,伺服器獲取設定的value值)
            value    
                用於設定初始化,可選。
            checked    
                單選框,複選框預設選中屬性
            size    
                當前控制元件的初始寬度,這個寬度以畫素為單位。除非控制元件型別是text,password,這時寬度是整數值,表示字元的數目
            maxlength
                指定可以輸入的字元的最大值。適用於控制元件型別為text,password。
        3)button    按鈕控制元件
            <button></button>
            屬性
            name    控制元件名稱
            value    控制元件初始值
            type    控制元件型別
                button    普通按鈕
                submit    提交按鈕
                reset    重置按鈕

                圖片按鈕
                    <button><img src="" alt=""></button>
        4)select    下拉列表
            <select name="" id="">
                <option value=""></option>
                <option value=""></option>
            </select>
            屬性
            name:        控制元件名稱
            size:        列表框中行的顯示數量
            multiple:    是否允許多選
                如果select元素不包含屬性size和屬性multiple時,表單型別顯示為選單(組合框)
                如果使用了屬性size和屬性multiple中的任意一個,則表單型別顯示為列表框
            selected:    預設選中
          option    下拉列表選項
              屬性:
              value:    定義控制元件的初始值。提交表單時,初始值會被提交給伺服器。
          optgroup    分組選項
              <select name="" id="">
                  <optgroup label="大洋">
                      <option value="">太平洋</option>
                      <option value="">大西洋</option>
                      <option value="">印度洋</option>
                  </optgroup>
                  <optgroup label="大海">
                      <option value="">東海</option>
                      <option value="">南海</option>
                      <option value="">渤海</option>
                  </optgroup>
              </select>
        4)textarea    多行文字框
            屬性
            name:    控制元件名稱
            rows:    定義文字框行數
            cols:    定義文字框ul列數
            warp:    是否自動換行。
                    off    不自動換行
                    hard自動硬回車換行,換行元素一同被傳送到伺服器中
                    soft自動軟回車換行,換行元素不會傳到伺服器中
        5)label    為表單控制元件定義標籤
            一些表單控制元件內建有標籤,當內建有標籤時,一般使用value屬性的值作為標籤,而另外一些表單控制元件沒有標籤,則直接使用文字作為標籤來說明控制元件的意義。每個label元素都要和表單控制元件關聯到一起
            <table>
                <tr>
                    <td><label for="username">使用者名稱:</label></td>
                    <td><input type="text" id="username" name="username"></td>
                </tr>
                <tr>
                    <td><label for="passwold">密碼:</label></td>
                    <td><input type="password" id="password" name="password"></td>
                </tr>
            </table>

        6)fieldset    為表單新增結構
            一般與legend元素配合使用,fieldset元素可以包含其他的表單控制元件,在這些表單控制元件周圍畫一個方框,而legend元素可以顯示一個標籤說明被包含的這些表單控制元件。

        7)其他控制元件特性
            disabled    禁用
                支援該屬性的控制元件:button,input,optgroup,option,select,textarea
                1)禁止的元素不接受節點
                2)禁止的控制元件的值不與表單一起被提交
             readonly    只讀
                 支援該屬性的控制元件:input,textarea
                 1)可以接受焦點,但是不能被使用者修改
                 2)只讀元素的值可以與表單一起被提交。


******************************************************************
1、所有的屬性格式都是屬性=”屬性值”嗎?如果不是,還有哪種方式?
     布林型屬性  (boolean)   結果為真假值
     <input type="text" readonly  value="禁止在公眾場合吸菸"/>
真的表示方法:不寫值、readonly=”readonly”    readonly=”true”

1、<hr width=”800”>中,800的單位是什麼?
   px  畫素(預設)
2、<hr width=”80%”>和<hr width=”800”> 80%和800實現效果有什麼區別?
      百分比:佔外層元素的百分比
      固定值:不隨著瀏覽器大小的變化而改變
3、<p>今  天天           氣很            好</p>
以上語句實現效果是什麼?為什麼?
4、用p標籤實現如下圖所示的效果:
     &nbsp; 空格
7、實現在頁面上顯示  <b>  標籤和版權符號©,如下圖所示。
      &lt;b&gt;     &copy;
8、實現如下圖所示的效果:
    &amp;lt;
9、什麼是HTML字元實體?(特殊字元),他的作用是什麼?
     語法:&字母;
為了區別html中的標籤
10、有序列表和無序列表的標籤分別是什麼?
 
11、按規範講,一個頁面可以有多少個<h1>?從搜尋引擎的角度說說為什麼?
   其它的標題標籤呢?


*****************************************************************
    HTML字元實體
布林型(boolean)屬性:
屬性值為真假,寫上就代表真,不寫就代表假;
1、有序列表和無序列表的標籤分別是什麼?
     <ol>     <ul>
ol:ordered lists
ul:unordered lists
l:lists
2、按規範講,一個頁面可以有多少個<h1>?從搜尋引擎的角度說說為什麼?
   其它的標題標籤呢?
   按規範講,一個頁面只能有一個<h1>
  搜尋引擎會把它當做關鍵字-->寫多個按作弊處理-->封殺域名
  剩下的標題標籤可以寫多個
3、<i></i>       <u></u>       <b></b>
斜體標籤    下劃線標籤      加粗標籤
<strong>    <em>    強調 :搜尋引擎會重點處理
4、超連結標籤是什麼?其中指定跳轉位置的屬性是什麼?
    <a href=”URL”></a>
5、圖片的標籤是什麼?其中指定圖片位置的屬性是什麼?
     <img src=”URL”/>
6、<br>標籤和<p>標籤格式上有什麼區別?
     <p>本身會換行,並且會加一個空行
7、圖片標籤是單標籤,存放圖片;p標籤是雙標籤,存放文字等
8、字型標籤<font></font>